/* Integrated platform diagram (platform.html only). Shared tokens, type and .site-icon come from style.css. */

/* Lucide icons added for this page; the others are defined in style.css. */
.icon-server { --icon-source: url("assets/icons/server.svg"); }
.icon-badge-check { --icon-source: url("assets/icons/badge-check.svg"); }
.icon-settings { --icon-source: url("assets/icons/settings.svg"); }
.icon-users { --icon-source: url("assets/icons/users.svg"); }
.icon-layout-dashboard { --icon-source: url("assets/icons/layout-dashboard.svg"); }
.icon-message-square { --icon-source: url("assets/icons/message-square.svg"); }
.icon-map-pin { --icon-source: url("assets/icons/map-pin.svg"); }
.icon-blocks { --icon-source: url("assets/icons/blocks.svg"); }
.icon-briefcase-business { --icon-source: url("assets/icons/briefcase-business.svg"); }
.icon-ticket { --icon-source: url("assets/icons/ticket.svg"); }
.icon-contact { --icon-source: url("assets/icons/contact.svg"); }
.icon-monitor { --icon-source: url("assets/icons/monitor.svg"); }
.icon-heart-pulse { --icon-source: url("assets/icons/heart-pulse.svg"); }
.icon-building-2 { --icon-source: url("assets/icons/building-2.svg"); }
.icon-cloud { --icon-source: url("assets/icons/cloud.svg"); }
.icon-arrow-down-up { --icon-source: url("assets/icons/arrow-down-up.svg"); }
.icon-arrow-left-right { --icon-source: url("assets/icons/arrow-left-right.svg"); }
.icon-person-standing { --icon-source: url("assets/icons/person-standing.svg"); }
.icon-battery-charging { --icon-source: url("assets/icons/battery-charging.svg"); }
.icon-pointer { --icon-source: url("assets/icons/pointer.svg"); }
.icon-radio { --icon-source: url("assets/icons/radio.svg"); }
.icon-nfc { --icon-source: url("assets/icons/nfc.svg"); }
.icon-door-open { --icon-source: url("assets/icons/door-open.svg"); }
.icon-laptop { --icon-source: url("assets/icons/laptop.svg"); }
.icon-id-card { --icon-source: url("assets/icons/id-card.svg"); }
.icon-layers { --icon-source: url("assets/icons/layers.svg"); }
.icon-shield-check { --icon-source: url("assets/icons/shield-check.svg"); }
.icon-lock-open { --icon-source: url("assets/icons/lock-open.svg"); }
.icon-life-buoy { --icon-source: url("assets/icons/life-buoy.svg"); }

.platform-diagram {
  --pd-bg: #0a1a29;
  --pd-panel: #10273b;
  --pd-panel-2: #15324b;
  --pd-line: #2a4d6c;
  --pd-text: #eaf2f8;
  --pd-muted: #a9bdcc;
  --pd-blue-soft: rgba(0, 153, 255, .13);
  --pd-inset: clamp(14px, 2.6vw, 30px);
  background: var(--pd-bg);
  color: var(--pd-text);
  padding-block: 0 96px;
  scroll-margin-top: 90px;
}

/* Sky band behind the intro: the homepage hero image, with the same position and overlay as style.css .centered-hero,
   faded out over its lower half so it blends into the diagram background. */
.pd-sky { position: relative; isolation: isolate; padding: 88px 0 64px; }
.pd-sky::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(4, 15, 23, .91) 0%, rgba(4, 15, 23, .77) 40%, rgba(4, 15, 23, .55) 100%), #06131e url("chromeroads-sky-background.webp") center 58% / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 50%, transparent 100%);
}
@media (max-width: 800px) {
  .pd-sky::before { background-image: linear-gradient(180deg, rgba(4, 15, 23, .91) 0%, rgba(4, 15, 23, .77) 40%, rgba(4, 15, 23, .55) 100%), url("chromeroads-sky-background-mobile.webp"); }
}
.platform-diagram h2, .platform-diagram h3 { color: var(--pd-text); font-family: var(--head); letter-spacing: var(--heading-tracking, -.01em); }
.platform-diagram p { color: var(--pd-muted); }
.platform-diagram .eyebrow { color: var(--blue); }
.platform-diagram .site-icon { color: var(--blue); }

/* Intro: a mirrored pair of rows. Row 2: heading (left) and identity/intent lines (right, right-aligned).
   Row 3: paragraph (left) and the identity-to-intent steps (right, right-aligned).
   The heading and the right-hand lines share one rule and --pd-display, so size, weight and line positions always match;
   the step labels use the paragraph's text style. The right column is sized to its own text. */
.pd-intro { --pd-display: min(clamp(2.2rem, 4vw, 3.4rem), 6.4vw); display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; }
.pd-intro .eyebrow { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; }
.pd-intro .eyebrow .site-icon { --icon-size: 20px; flex-shrink: 0; }
.platform-diagram .pd-intro h1, .platform-diagram .pd-motto { grid-row: 2; margin: 0; font-family: var(--head); font-weight: 600; font-size: var(--pd-display); line-height: 1.12; letter-spacing: var(--heading-tracking, -.01em); color: var(--pd-text); white-space: nowrap; }
.pd-intro h1 { grid-column: 1; }
.pd-motto { grid-column: 2; text-align: right; }
.platform-diagram .pd-motto span { color: var(--blue); }
.pd-intro-text, .pd-intro .pd-steps > li { font-size: var(--text-body, 1.125rem); font-weight: 400; line-height: 1.55; color: var(--pd-muted); }
.pd-intro-text { grid-column: 1; grid-row: 3; max-width: 760px; margin-top: 24px; }

/* Steps: the homepage hero's identity-to-intent list (style.css .hero-intent-steps), enlarged, with each icon left of its two-line label. */
.pd-intro .pd-steps { grid-column: 2; grid-row: 3; justify-self: end; align-self: start; align-items: center; margin-top: 24px; gap: 48px; }
.pd-intro .pd-steps > li { flex-direction: row; align-items: center; gap: 12px; text-align: left; }
.pd-intro .pd-steps .site-icon { --icon-size: 44px; }
.pd-intro .pd-steps > li + li::before { top: 50%; left: -37px; width: 26px; height: 26px; transform: translateY(-50%) rotate(90deg); }

/* Figure grid, 60/40: column 1 (60%) holds the platform boundary and its tiers; the API column and
   customer systems outside the boundary share the remaining 40%. */
.pd { margin: 0; display: grid; grid-template-columns: minmax(0, 60%) 92px minmax(0, 1fr); column-gap: 0; }
/* The platform boundary: one rounded outline around everything Chrome Roads provides. */
.pd-boundary { grid-column: 1; grid-row: 1 / 9; border: 1px solid rgba(0, 153, 255, .45); border-radius: 18px; background: rgba(16, 39, 59, .45); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .02); }
/* Platform rows (column 1): admin 2, link 3, server 4, link 5, card + SDK kit 6, admin tool 7, local connections 8. */
.pd-admin { grid-column: 1; grid-row: 2; margin-top: var(--pd-inset); }
.pd-link-bill { grid-column: 1; grid-row: 3; }
.pd-server-wrap { grid-column: 1; grid-row: 4; }
.pd-link-cloud { grid-column: 1; grid-row: 5; }
.pd-devices { grid-column: 1; grid-row: 6; }
.pd-tool { grid-column: 1; grid-row: 7; margin-top: 16px; }
.pd-local { grid-column: 1; grid-row: 8; margin-block: 16px var(--pd-inset); }
.pd-admin, .pd-server-wrap, .pd-devices, .pd-tool, .pd-local { margin-inline: var(--pd-inset); }
/* Customer side (columns 2-3): each connector and card shares the row of the platform tier it connects to,
   top-aligned with it; the header is level with the Admin Controller, and the arrows sit at the card titles. */
.pd-yours { grid-column: 3; grid-row: 2; align-self: start; margin-top: var(--pd-inset); }
.pd-api-server, .pd-enterprise { grid-row: 4; }
.pd-api-devices, .pd-workflows { grid-row: 6; }
.pd-api { grid-column: 2; align-self: start; padding-top: 20px; }
.pd-ext { grid-column: 3; align-self: start; }

/* Shared node styling: every component reads as part of one system. */
.pd-node { background: var(--pd-panel); border: 1px solid var(--pd-line); border-radius: 12px; padding: 20px; }
.pd-head { display: flex; align-items: flex-start; gap: 14px; }
.pd-head > .site-icon { --icon-size: 30px; margin-top: 2px; }
.pd-head .eyebrow { display: block; font-size: 12px; letter-spacing: .12em; color: var(--blue); }
.pd-head h3 { font-size: 21px; line-height: 1.25; margin: 4px 0 4px; }
.pd-head p { font-size: 15px; line-height: 1.5; }

.pd-admin { justify-self: center; width: min(100%, 520px); }

/* Vertical links between tiers: one continuous spine. */
.pd-link { display: flex; flex-direction: column; align-items: center; text-align: center; padding-block: 4px; }
.pd-line { width: 2px; height: 18px; background: linear-gradient(var(--blue), rgba(0, 153, 255, .35)); }
.pd-link > .site-icon { --icon-size: 22px; margin-block: 4px; }
.pd-link-text { font-size: 14px; color: var(--pd-muted); margin-top: 2px; }
.pd-pill { display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px; border-radius: 999px; background: var(--pd-panel-2); border: 1px solid rgba(0, 153, 255, .5); font-weight: 600; font-size: 15px; color: var(--pd-text); margin-block: 4px; }
.pd-pill .site-icon { --icon-size: 20px; }
.pd-link-text .site-icon { --icon-size: 16px; vertical-align: -3px; margin-right: 4px; }

/* Server tier, with Chrome Roads Servers operated by licensed partners stacked behind it. */
.pd-modules { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pd-modules li { display: flex; align-items: center; gap: 10px; font-size: 15px; line-height: 1.35; color: var(--pd-text); }
.pd-modules li { background: var(--pd-panel-2); border: 1px solid var(--pd-line); border-radius: 8px; padding: 10px 12px; }
.pd-modules .site-icon { --icon-size: 20px; }
.pd-band { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 11px 14px; border-radius: 8px; background: var(--pd-blue-soft); border: 1px solid rgba(0, 153, 255, .4); font-size: 15px; color: var(--pd-text); }
.pd-band strong { font-weight: 700; }
.pd-band .site-icon { --icon-size: 20px; }
.pd-band-security { background: rgba(0, 153, 255, .07); border-color: var(--pd-line); }
.pd-server { position: relative; z-index: 2; }
.pd-licensee { position: relative; display: flex; align-items: center; gap: 10px; margin-top: -6px; padding: 14px 18px 10px; border: 1px solid var(--pd-line); border-top: 0; border-radius: 0 0 12px 12px; background: #0e2335; font-size: 14px; font-weight: 600; color: var(--pd-muted); }
.pd-licensee .site-icon { --icon-size: 18px; }
.pd-licensee > span:last-child { font-weight: 400; }
.pd-licensee strong { font-weight: 600; color: var(--pd-text); }
.pd-licensee:nth-of-type(2) { z-index: 1; margin-left: 18px; }
.pd-licensee:nth-of-type(3) { z-index: 0; margin-left: 36px; background: #0c1f2f; }

/* Connectors from the platform to customer systems: APIs at the server tier, the SDK at the card and app tier. */
.pd-api { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 14px; font-weight: 700; letter-spacing: .1em; color: var(--blue); }
.pd-api .site-icon { --icon-size: 30px; }
.pd-api .icon-arrow-down-up { display: none; }

/* Customer side: a dashed outline and lighter panel mark systems the customer runs, outside the platform. */
.pd-yours .eyebrow { display: block; font-size: 12px; letter-spacing: .12em; }
.pd-yours h3 { font-size: 26px; line-height: 1.2; margin: 4px 0 6px; }
.pd-yours p { font-size: 15px; line-height: 1.5; }
.pd-ext { background: rgba(255, 255, 255, .03); border: 1px dashed rgba(169, 189, 204, .5); }
.pd-ext-tiles { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pd-ext-tiles li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; background: var(--pd-panel-2); border: 1px solid var(--pd-line); font-size: 14px; line-height: 1.35; color: var(--pd-text); }
.pd-ext-tiles .site-icon { --icon-size: 22px; flex-shrink: 0; }
.pd-demo { margin-top: 12px; padding: 14px 16px; border-radius: 10px; background: var(--pd-panel-2); border: 1px solid var(--pd-line); }
.pd-demo h4 { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--head); font-size: 17px; font-weight: 600; color: var(--pd-text); }
.pd-demo h4 .site-icon { --icon-size: 24px; }
.pd-demo p { margin: 6px 0 12px; font-size: 14px; line-height: 1.5; }
.pd-demo .pd-demo-button { font-size: 15px; }
.pd-demo .pd-demo-button .site-icon { color: currentColor; }

/* Devices tier: the card and the SDK kit side by side, 50% each of the platform column (equal heights). */
.pd-devices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pd-side { display: grid; gap: 16px; }
/* Licensed SDK and developer kit: what the kit includes, then how it is licensed. */
.pd-kit { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.pd-kit li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 8px; background: var(--pd-panel-2); border: 1px solid var(--pd-line); font-size: 14px; line-height: 1.45; color: var(--pd-muted); }
.pd-kit li .site-icon { --icon-size: 22px; margin-top: 1px; }
.pd-kit strong { display: block; font-size: 15px; font-weight: 600; color: var(--pd-text); margin-bottom: 2px; }
.pd-kit-license { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--pd-line); font-size: 14px; line-height: 1.5; }
.pd-kit-license > .site-icon { --icon-size: 20px; flex-shrink: 0; }
.pd-kit-license a { font-weight: 600; color: var(--blue); }
.pd-kit-license a .site-icon { --icon-size: 14px; margin-left: 4px; vertical-align: -2px; }
.pd-kit-license a:hover, .pd-kit-license a:focus-visible { color: #6cc4ff; }
.pd-caps { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pd-caps li { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 14px 8px; border-radius: 8px; background: var(--pd-panel-2); border: 1px solid var(--pd-line); font-size: 14px; line-height: 1.3; color: var(--pd-text); }
.pd-caps .site-icon { --icon-size: 26px; }
.pd-local { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; align-items: start; }
.pd-local h4, .pd-radios h4 { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--pd-muted); }
.pd-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pd-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: var(--pd-panel-2); border: 1px solid var(--pd-line); font-size: 14px; color: var(--pd-text); white-space: nowrap; }
.pd-chips .site-icon { --icon-size: 17px; }

/* Compact steps, so the four-step row stays no wider than the identity/intent lines and the paragraph keeps its width. */
@media (max-width: 1200px) {
  .pd-intro .pd-steps { gap: 28px; }
  .pd-intro .pd-steps > li { gap: 10px; }
  .pd-intro .pd-steps .site-icon { --icon-size: 36px; }
  .pd-intro .pd-steps > li + li::before { left: -24px; width: 20px; height: 20px; }
}

@media (max-width: 1100px) {
  .pd { grid-template-columns: minmax(0, 60%) 70px minmax(0, 1fr); }
  .pd-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-local { grid-template-columns: minmax(0, 1fr); }
}

/* Intro stacks: heading, paragraph, then the right-aligned identity/intent lines and steps. */
@media (max-width: 1000px) {
  .pd-intro { grid-template-columns: minmax(0, 1fr); }
  .platform-diagram .pd-motto { grid-column: 1; grid-row: 4; margin-top: 40px; }
  .pd-intro .pd-steps { grid-column: 1; grid-row: 5; }
}

/* Stacked: the platform boundary first, then APIs and customer systems below it. */
@media (max-width: 900px) {
  .platform-diagram { padding-block: 0 68px; }
  .pd-sky { padding-top: 60px; }
  .pd { grid-template-columns: minmax(0, 1fr); }
  /* Stacked: the platform box, then the customer side in order (APIs to enterprise systems, SDK to workflows). */
  .pd-yours { grid-column: 1; grid-row: 9; margin-top: 32px; }
  .pd-api { grid-column: 1; flex-direction: row; padding-block: 14px; }
  .pd-api-server { grid-row: 10; }
  .pd-enterprise { grid-row: 11; }
  .pd-api-devices { grid-row: 12; }
  .pd-workflows { grid-row: 13; }
  .pd-ext { grid-column: 1; }
  .pd-api .icon-arrow-left-right { display: none; }
  .pd-api .icon-arrow-down-up { display: inline-block; }
  .pd-local { grid-template-columns: minmax(0, 1fr); }
}
/* One enterprise system per row where a half-width tile is too narrow: the 40% customer column on smaller
   desktops, and the smallest phones. */
@media (min-width: 901px) and (max-width: 1100px) {
  .pd-ext-tiles { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 380px) {
  .pd-ext-tiles { grid-template-columns: minmax(0, 1fr); }
}
/* The card and the SDK kit stack where a half-width card is too narrow for its capability tiles:
   just above the 900px layout change (the 60% column is narrowest there), and on phones. */
@media (min-width: 901px) and (max-width: 1000px) {
  .pd-devices { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .pd-devices { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .pd-modules { grid-template-columns: minmax(0, 1fr); }
  .pd-node { padding: 16px; }
  .pd-licensee:nth-of-type(2) { margin-left: 10px; }
  .pd-licensee:nth-of-type(3) { margin-left: 20px; }
}
/* Too narrow for one row: stack the steps. The block stays right-aligned; its icons form one column with arrows pointing down. */
@media (max-width: 600px) {
  .pd-intro .pd-steps { flex-direction: column; align-items: flex-start; gap: 26px; }
  .pd-intro .pd-steps > li + li::before { top: -22px; left: 9px; width: 18px; height: 18px; transform: rotate(180deg); }
}

@media (forced-colors: active) {
  .platform-diagram, .pd-boundary, .pd-node, .pd-licensee, .pd-modules li, .pd-caps li, .pd-chips li, .pd-band, .pd-pill, .pd-ext-tiles li, .pd-demo { background: Canvas; color: CanvasText; border-color: CanvasText; }
  .pd-line { background: CanvasText; }
  .pd-sky::before { display: none; }
}