/* Our story page (our-story.html only): the deck's story as stops along one circuit trace through hardware and software.
   Palette and hero follow assets/platform.css; shared tokens, type and .site-icon come from style.css. */

/* Lucide icons used only here (the rest are defined in style.css). */
.icon-brain { --icon-source: url("assets/icons/brain.svg"); }
.icon-shield-question-mark { --icon-source: url("assets/icons/shield-question-mark.svg"); }
.icon-banknote { --icon-source: url("assets/icons/banknote.svg"); }
.icon-credit-card { --icon-source: url("assets/icons/credit-card.svg"); }
.icon-mouse-pointer-click { --icon-source: url("assets/icons/mouse-pointer-click.svg"); }
.icon-octagon-x { --icon-source: url("assets/icons/octagon-x.svg"); }
.icon-code-xml { --icon-source: url("assets/icons/code-xml.svg"); }
.icon-cloud-download { --icon-source: url("assets/icons/cloud-download.svg"); }
.icon-circuit-board { --icon-source: url("assets/icons/circuit-board.svg"); }
.icon-handshake { --icon-source: url("assets/icons/handshake.svg"); }
.icon-nfc { --icon-source: url("assets/icons/nfc.svg"); }
.icon-laptop { --icon-source: url("assets/icons/laptop.svg"); }
.icon-map-pin { --icon-source: url("assets/icons/map-pin.svg"); }
.icon-message-square { --icon-source: url("assets/icons/message-square.svg"); }
.icon-person-standing { --icon-source: url("assets/icons/person-standing.svg"); }
.icon-door-open { --icon-source: url("assets/icons/door-open.svg"); }
.icon-monitor { --icon-source: url("assets/icons/monitor.svg"); }
.icon-shield-check { --icon-source: url("assets/icons/shield-check.svg"); }

.sd {
  --sd-bg: #0a1a29;
  --sd-panel: #10273b;
  --sd-panel-2: #15324b;
  --sd-line: #2a4d6c;
  --sd-text: #eaf2f8;
  --sd-muted: #a9bdcc;
  --sd-trace: #0a7fd1;
  --sd-rail: 64px;
  --sd-gap: 28px;
  background: var(--sd-bg);
  color: var(--sd-text);
  padding-bottom: 40px;
}
.sd h1, .sd h2, .sd h3, .sd h4, .sd h5 { margin: 0; color: var(--sd-text); font-family: var(--head); font-weight: 600; letter-spacing: var(--heading-tracking, -.01em); }
.sd p, .sd li { color: var(--sd-muted); }
.sd .eyebrow { color: var(--blue); }
.sd .site-icon { color: var(--blue); }

/* Hero: the homepage sky image behind the intro, fading into the road (as on the platform page). */
.sd-sky { position: relative; isolation: isolate; padding: 88px 0 72px; }
.sd-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) {
  .sd-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"); }
}
.sd-intro .eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.sd-intro .eyebrow .site-icon { --icon-size: 20px; }
.sd-intro h1 { font-size: min(clamp(2.6rem, 5vw, 4.3rem), 11vw); line-height: 1.08; }
.sd-intro h1 span { color: var(--blue); }
.sd-lead { margin-top: 22px; font-size: clamp(1.2rem, 1.8vw, 1.5rem); line-height: 1.45; color: var(--sd-text) !important; max-width: 760px; }
.sd-intro-text { margin-top: 16px; font-size: var(--text-body, 1.125rem); line-height: 1.6; max-width: 760px; }
.sd-intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 56px; align-items: center; }
.sd-intro-copy { min-width: 0; }
.sd-intro-blocks { --sd-gap: 22px; }
.sd-hs { padding: 22px 24px; background: rgba(16, 39, 59, .82); }
.sd-hs.sd-box--lit { background: rgba(21, 50, 75, .9); }
.sd-hs h2 { margin-top: 14px; font-size: 26px; line-height: 1.2; }
.sd-hs p { margin-top: 8px; font-size: 16px; line-height: 1.5; }
.sd-hs .sd-chips { margin-top: 12px; }
.sd-hs .sd-chips li { font-size: 14px; padding: 5px 11px; }
.sd-hs .sd-link { margin-top: 14px; }
/* Headline on the left, Hardware/Software chip on the right, centred on the headline; the rest spans the block. */
.sd-hs { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: center; }
.sd-hs > h2 { grid-column: 1; grid-row: 1; margin: 0; display: flex; align-items: center; gap: 12px; }
.sd-hs > h2 .site-icon { --icon-size: 28px; flex-shrink: 0; }
.sd-hs > h2 a { display: inline-flex; align-items: center; gap: 12px; color: inherit; }
.sd-hs > h2 a:hover { color: var(--blue); }
.sd-hs > h2 .sd-hs-out { --icon-size: 18px; opacity: .8; }
.sd-hs > .sd-tag { grid-column: 2; grid-row: 1; justify-self: end; }
.sd-hs > :not(.sd-tag):not(h2) { grid-column: 1 / -1; }
.sd-legend { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 26px 0 0; padding: 0; }

/* Hardware / software tags. */
.sd-tag { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--sd-line); background: var(--sd-panel-2); color: var(--sd-text); font-size: 14px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.sd-tag .site-icon { --icon-size: 16px; }

/* The road: one trace down the left rail. Every stop spans the rail so its separator crosses the trace at a via. */
.sd-road { position: relative; padding-left: var(--sd-rail); }
.sd-road::before { content: ""; position: absolute; top: 0; bottom: 34px; left: calc(var(--sd-rail) / 2 - 1px); width: 2px; background: var(--sd-trace); box-shadow: 0 0 10px rgba(0, 153, 255, .35); }
.sd-road::after { content: ""; position: absolute; bottom: 22px; left: calc(var(--sd-rail) / 2 - 12px); width: 24px; height: 12px; border-radius: 3px; background: var(--blue); }
.sd-stop { position: relative; margin-left: calc(-1 * var(--sd-rail)); padding: 128px 0 128px var(--sd-rail); }

/* Stop heading: a pad on the trace, joined to the heading by a short trace. */
.sd-stop-head { position: relative; margin-bottom: 34px; }
.sd-stop-head::before { content: ""; position: absolute; top: 3px; left: calc(var(--sd-rail) / -2 - 8px); width: 16px; height: 16px; border-radius: 4px; background: var(--blue); box-shadow: 0 0 0 5px rgba(0, 153, 255, .16); }
.sd-stop-head::after { content: ""; position: absolute; top: 10px; left: calc(var(--sd-rail) / -2 + 8px); width: calc(var(--sd-rail) / 2 - 18px); height: 2px; background: var(--sd-trace); }
.sd-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 14px; }
.sd-kicker .eyebrow { margin: 0; }
.sd-stop-title { font-size: clamp(1.9rem, 3.2vw, 2.7rem); line-height: 1.15; }
.sd-sub { margin-top: 12px; font-size: var(--text-body, 1.125rem); line-height: 1.55; }
.sd-sub strong { color: var(--sd-text); }
.sd-sub em { font-style: normal; color: var(--blue); font-weight: 600; }

/* Panels ("chips" on the board). */
.sd-box { position: relative; background: var(--sd-panel); border: 1px solid var(--sd-line); border-radius: 12px; padding: 20px; }
.sd-box h4 { font-size: 19px; line-height: 1.3; }
.sd-box p { margin-top: 6px; font-size: 16px; line-height: 1.5; }
.sd-box > .site-icon { --icon-size: 30px; display: block; margin-bottom: 12px; }
.sd-box .eyebrow { display: block; font-size: 12px; letter-spacing: .12em; margin-bottom: 6px; }
.sd-box--lit { background: var(--sd-panel-2); border-color: var(--blue); box-shadow: 0 0 0 1px rgba(0, 153, 255, .35), 0 10px 28px rgba(0, 153, 255, .12); }
/* The attack step uses the alert red from the trust-app prototype: a solid fill with white type. */
.sd-box--alert { border-color: #ff2d55; background: #ff2d55; box-shadow: 0 10px 28px rgba(255, 45, 85, .25); }
.sd .sd-box--alert p, .sd-box--alert > .site-icon, .sd-box--alert .sd-step-num { color: #fff; }
.sd-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--sd-gap); list-style: none; margin: 0; padding: 0; }
.sd-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; }
.sd-split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Flow: boxes in order, joined by traces with a pad where each trace lands. */
.sd-flow { display: grid; grid-template-columns: repeat(var(--steps), minmax(0, 1fr)); gap: var(--sd-gap); list-style: none; margin: 0; padding: 0; }
.sd-flow > li { position: relative; }
.sd-flow > li + li::before { content: ""; position: absolute; top: 34px; left: calc(-1 * var(--sd-gap)); width: var(--sd-gap); height: 2px; background: var(--sd-trace); }
.sd-flow > li + li::after { content: ""; position: absolute; top: 31px; left: -5px; width: 8px; height: 8px; border-radius: 2px; background: var(--blue); }
/* Stacked flows join top to bottom at every width. */
.sd-flow--stack { --steps: 1; }
.sd-flow--stack > li + li::before { top: calc(-1 * var(--sd-gap)); left: 34px; width: 2px; height: var(--sd-gap); }
.sd-flow--stack > li + li::after { top: -5px; left: 31px; }
.sd-step-num { display: block; font-family: var(--head); font-weight: 600; font-size: 15px; letter-spacing: .04em; color: var(--blue); margin-bottom: 8px; }
.sd-flow--big .sd-step-num { font-size: 30px; letter-spacing: 0; line-height: 1; margin-bottom: 12px; }

/* Small inline flow (commerce speeds), nodes joined by traces. */
.sd-speed { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 0; list-style: none; margin: 18px 0 0; padding: 0; }
.sd-speed > li { display: flex; align-items: center; color: var(--sd-text); }
.sd-speed > li + li::before { content: ""; width: 44px; height: 2px; margin: 0 10px; background: var(--sd-trace); }
.sd-node { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; background: var(--sd-panel); border: 1px solid var(--sd-line); font-weight: 600; }
.sd-node .site-icon { --icon-size: 24px; }
.sd-oops { font-family: var(--head); font-size: 26px; font-weight: 600; color: #ff8a80; }
.sd-label { margin-top: 30px; font-size: 18px; color: var(--sd-text) !important; }
.sd-label strong { color: var(--blue); }
.sd-options { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 16px; }
.sd-options .sd-or { color: var(--blue); font-weight: 700; }
.sd-prompt { margin-left: auto; padding: 14px 20px; border-radius: 12px; background: var(--blue); color: #fff !important; font-family: var(--head); font-size: 20px; line-height: 1.3; }

/* Branch: one source (left) feeding several rows (right) through a vertical bus. */
.sd-branch { display: grid; grid-template-columns: minmax(180px, 3fr) minmax(0, 8fr); gap: 0 56px; align-items: stretch; }
.sd-branch-rows { position: relative; display: grid; gap: 16px; list-style: none; margin: 0; padding: 0; }
.sd-branch-rows::before { content: ""; position: absolute; top: 34px; bottom: 34px; left: -30px; width: 2px; background: var(--sd-trace); }
.sd-branch-rows > li { position: relative; }
.sd-branch-rows > li::before { content: ""; position: absolute; top: 50%; left: -30px; width: 30px; height: 2px; background: var(--sd-trace); }
.sd-branch-source { position: relative; display: flex; flex-direction: column; justify-content: center; }
.sd-branch-source::after { content: ""; position: absolute; top: 50%; right: -26px; width: 26px; height: 2px; background: var(--sd-trace); }
.sd-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; }
.sd-row > .site-icon { --icon-size: 30px; margin: 0; }
.sd-row .sd-when { font-family: var(--head); font-weight: 600; font-size: 22px; color: var(--sd-text); white-space: nowrap; }
.sd-factors { display: inline-flex; align-items: center; gap: 10px; }
.sd-factors .site-icon { --icon-size: 30px; }
.sd-factors .sd-plus { font-size: 20px; font-weight: 700; color: var(--sd-text); line-height: 1; }
.sd-num-big { font-family: var(--head); font-size: 34px; font-weight: 600; color: var(--blue); line-height: 1; }

/* Bus: boxes hang off one horizontal trace (one card, many credentials). */
.sd-bus { position: relative; margin-top: 14px; padding-top: 34px; }
.sd-bus::before { content: ""; position: absolute; top: 0; left: 34px; right: calc(100% / var(--cols, 4) / 2); height: 2px; background: var(--sd-trace); }
.sd-bus::after { content: ""; position: absolute; top: -14px; left: 34px; width: 2px; height: 14px; background: var(--sd-trace); }
.sd-bus > .sd-grid > li::before { content: ""; position: absolute; top: -35px; left: 50%; width: 2px; height: 34px; background: var(--sd-trace); }
.sd-bus-source { display: inline-flex; margin-bottom: 0; }

/* Merge: several boxes feed one conclusion. */
.sd-merge { position: relative; height: 34px; }
.sd-merge::before { content: ""; position: absolute; bottom: 0; left: calc(100% / 6); right: calc(100% / 6); height: 2px; background: var(--sd-trace); }
.sd-merge span { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--sd-trace); }
.sd-merge span:nth-child(1) { left: calc(100% / 6); } .sd-merge span:nth-child(2) { left: 50%; } .sd-merge span:nth-child(3) { left: calc(500% / 6); }
.sd-conclusion { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 28px; padding: 22px 28px; text-align: center; }
.sd-conclusion p { margin: 0; font-size: 18px; color: var(--sd-text); }

/* Board: a faint circuit grid behind the nine services. */
.sd-board { padding: 26px; border-radius: 16px; border: 1px solid var(--sd-line); background-color: rgba(16, 39, 59, .55); background-image: linear-gradient(rgba(0, 153, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 153, 255, .08) 1px, transparent 1px); background-size: 28px 28px; }
.sd-board .sd-box { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: start; }
.sd-board .sd-box > .site-icon { --icon-size: 26px; margin: 2px 0 0; grid-row: span 2; }
.sd-board .sd-box p { margin: 0; }

/* Quotes, callouts, chips, images and links. */
.sd-quote { margin: 0; padding-left: 22px; border-left: 3px solid var(--blue); }
.sd-quote p { font-size: clamp(1.35rem, 2.2vw, 1.9rem); line-height: 1.35; color: var(--sd-text) !important; }
.sd-quote p em { font-style: normal; color: var(--blue); }
.sd-quote footer { margin-top: 14px; color: var(--sd-muted); font-size: 15px; }
.sd-quote a { color: var(--sd-muted); text-decoration: underline; text-underline-offset: 3px; }
.sd-quote a:hover { color: var(--blue); }
.sd-callout { margin-top: 26px; padding: 2px 0 2px 20px; border-left: 3px solid var(--blue); font-size: 18px; line-height: 1.55; color: var(--sd-text) !important; }
.sd-callouts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sd-gap); }
.sd-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 14px 0 0; padding: 0; }
.sd-chips li { padding: 7px 13px; border-radius: 999px; background: var(--sd-panel-2); border: 1px solid var(--sd-line); font-size: 15px; color: var(--sd-text); }
.sd-chips li.sd-chip--lit { background: var(--blue); border-color: var(--blue); color: #fff; }
.sd-chips-label { margin-top: 26px; font-weight: 600; color: var(--sd-text) !important; }
.sd-panel { margin-top: 26px; padding: 20px 22px; border-radius: 12px; background: rgba(16, 39, 59, .7); border: 1px solid var(--sd-line); }
.sd-panel .eyebrow { font-size: 13px; letter-spacing: .12em; }
.sd-card-photo { display: block; width: min(100%, 300px); height: auto; margin-inline: auto; filter: drop-shadow(0 18px 36px rgba(0, 0, 0, .45)); }
.sd-media { display: grid; place-items: center; padding: 28px; border-radius: 16px; background: radial-gradient(circle at 50% 40%, rgba(0, 153, 255, .18), transparent 70%); }
.sd-list { margin: 10px 0 0; padding-left: 20px; }
.sd-list li { margin: 4px 0; line-height: 1.5; }
.sd-note { margin-top: 18px; font-size: 15px; }
.sd-links { display: flex; flex-wrap: wrap; gap: 12px 30px; margin-top: 30px; }
.sd-link { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--sd-text); }
.sd-link:hover { color: var(--blue); }
.sd-text-lead { font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.4; color: var(--sd-text) !important; }

/* Milestones, patents, team and contact stops. */
.sd-stop-title span { color: var(--blue); }
.sd-stat { display: flex; align-items: baseline; gap: 12px; margin: 10px 0 10px; }
.sd-stat strong { font-family: var(--head); font-size: 52px; font-weight: 600; line-height: 1; color: var(--sd-text); }
.sd-stat span { color: var(--sd-muted); }
.sd-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 16px 0; }
.sd-mini { padding: 14px 16px; border-radius: 10px; background: var(--blue); }
.sd-mini h5 { margin: 0; font-family: var(--head); font-size: 17px; font-weight: 600; color: #fff; }
.sd-box .sd-mini p { margin-top: 6px; font-size: 15px; color: #eef7ff; }
.sd-box p strong { color: var(--sd-text); }
.sd-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--sd-line); border-radius: 12px; overflow: hidden; font-size: 16px; line-height: 1.45; }
.sd-table th, .sd-table td { text-align: left; vertical-align: top; padding: 12px 16px; border-bottom: 1px solid var(--sd-line); }
.sd-table thead th { background: var(--sd-panel-2); color: var(--sd-text); font-family: var(--head); font-weight: 600; }
.sd-table td { background: var(--sd-panel); color: var(--sd-muted); }
.sd-table td:first-child { color: var(--sd-text); font-weight: 600; white-space: nowrap; }
.sd-table tbody tr:last-child td { border-bottom: 0; }
.sd-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.icon-user-plus { --icon-source: url("assets/icons/user-plus.svg"); }
.sd-person-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.sd-tag--new { padding: 3px 9px; font-size: 13px; }
.sd-tag--new .site-icon { --icon-size: 14px; }
.sd-box .sd-role { margin-top: 4px; color: var(--blue); font-weight: 600; }
.sd-contact a { color: var(--sd-text); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.sd-contact a:hover { color: var(--blue); }
.sd-note strong { color: var(--sd-text); }

/* Road ahead: quarters as vias on one horizontal trace; vertical on smaller screens. */
.sd-timeline { position: relative; display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); gap: var(--sd-gap); list-style: none; margin: 0; padding: 0; }
.sd-timeline::before { content: ""; position: absolute; top: 7px; left: 0; right: 0; height: 2px; background: var(--sd-trace); }
.sd-timeline > li { position: relative; padding-top: 30px; }
.sd-timeline > li::before { content: ""; position: absolute; top: 0; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--sd-bg); border: 2px solid var(--blue); }
.sd-timeline > li.sd-timeline-now::before { background: var(--blue); box-shadow: 0 0 0 5px rgba(0, 153, 255, .18); }
.sd-timeline > li > .sd-box + .sd-box { margin-top: 14px; }
@media (min-width: 901px) { .sd-era { height: 100%; } }  /* equal heights only while the eras sit side by side */
.sd-era .sd-when { display: block; font-family: var(--head); font-weight: 600; font-size: 26px; line-height: 1.2; color: var(--sd-text); }
.sd-era p { margin-top: 8px; }
.sd-quarter { display: block; margin-bottom: 14px; font-family: var(--head); font-weight: 600; font-size: 18px; color: var(--sd-text); }

/* Roadmap: quarters as vias on one trace; dated items hang from their quarter on drop traces; ongoing work runs as long
   tracks below, aligned to the same quarter columns. Stacks vertically at 1100px and below. */
.sd-goals { margin: 0 0 36px; }
.sd-roadmap { --q-cols: minmax(0, 2.6fr) repeat(4, minmax(0, 1fr)); --q-gap: 20px; }
.sd-quarters { position: relative; display: grid; grid-template-columns: var(--q-cols); column-gap: var(--q-gap); list-style: none; margin: 0; padding: 0; }
.sd-quarters::before { content: ""; position: absolute; top: 46px; left: 0; right: 0; height: 2px; background: var(--sd-trace); }
.sd-q { position: relative; min-width: 0; min-height: 56px; }
.sd-q .sd-quarter { margin: 0; line-height: 28px; }
.sd-q::before { content: ""; position: absolute; top: 40px; left: 0; z-index: 1; width: 12px; height: 12px; border-radius: 50%; background: var(--sd-bg); border: 2px solid var(--blue); }
.sd-q--now::before { background: var(--blue); box-shadow: 0 0 0 5px rgba(0, 153, 255, .18); }
.sd-q-groups { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: 18px; margin-top: 60px; }
.sd-q-groups::before { content: ""; position: absolute; top: -34px; left: 6px; width: 2px; height: 34px; background: var(--sd-trace); }
.sd-q-group { position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0; padding-left: 22px; }
.sd-q-group::before { content: ""; position: absolute; top: 0; left: 6px; width: 2px; height: 56px; background: var(--sd-trace); }
.sd-q-group + .sd-q-group::after { content: ""; position: absolute; top: 0; left: calc(-100% - 12px); width: calc(100% + 18px); height: 2px; background: var(--sd-trace); }
.sd-q-label { margin: 0; font-size: 12px; font-weight: 600; line-height: 18px; letter-spacing: .12em; color: var(--sd-muted) !important; }
.sd-q-group > .sd-box { padding: 16px; }
.sd-q-group > .sd-box h4 { font-size: 17px; }
.sd-q-group > .sd-box p { font-size: 15px; }
.sd-q-group > .sd-box::before { content: ""; position: absolute; top: 24px; left: -16px; width: 16px; height: 2px; background: var(--sd-trace); }
.sd-q-group > .sd-box:not(:last-child)::after { content: ""; position: absolute; top: 24px; bottom: -38px; left: -16px; width: 2px; background: var(--sd-trace); }
.sd-tracks { display: grid; gap: 30px; margin-top: 44px; }
.sd-track { display: grid; grid-template-columns: var(--q-cols); column-gap: var(--q-gap); }
.sd-track-label { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: .12em; color: var(--blue) !important; }
.sd-track-label .site-icon { --icon-size: 18px; }
.sd-track-steps { grid-column: 1 / -1; position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; list-style: none; margin: 0; padding: 24px 12px 0 0; }
.sd-track--to-production .sd-track-steps { grid-column: 1 / 4; }
.sd-track-steps::before { content: ""; position: absolute; top: 6px; left: 0; right: 10px; height: 4px; border-radius: 2px; background: var(--sd-trace); }
.sd-track-steps::after { content: ""; position: absolute; top: 2px; right: 0; border-left: 12px solid var(--sd-trace); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.sd-track-steps > li { position: relative; font-size: 15px; line-height: 1.45; color: var(--sd-text); }
.sd-track-steps > li::before { content: ""; position: absolute; top: -23px; left: 0; width: 12px; height: 12px; border-radius: 3px; background: var(--blue); }

/* Detail boxes under the roadmap, each with a time stamp on top. */
.sd-details { margin-top: 44px; }
.sd .sd-subhead { margin-bottom: 22px; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.2; }
.sd-stamp { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 4px 11px; border-radius: 6px; border: 1px solid rgba(0, 153, 255, .45); background: rgba(0, 153, 255, .12); font-family: var(--head); font-size: 14px; font-weight: 600; color: var(--sd-text) !important; }
.sd-stamp::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }

@media (max-width: 1100px) {
  .sd-intro { grid-template-columns: minmax(0, 1fr); }
  .sd-intro-blocks { max-width: 640px; }
  .sd-quarters { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .sd-quarters::before { top: 0; bottom: 0; left: 6px; right: auto; width: 2px; height: auto; }
  .sd-q { min-height: 0; padding-left: 30px; }
  .sd-q::before { top: 8px; }
  .sd-q-groups { grid-auto-flow: row; grid-auto-columns: auto; row-gap: 20px; margin-top: 14px; }
  .sd-q-groups::before, .sd-q-group + .sd-q-group::after { display: none; }
  .sd-track { grid-template-columns: minmax(0, 1fr); }
  .sd-track-steps, .sd-track--to-production .sd-track-steps { grid-column: 1 / -1; grid-auto-flow: row; gap: 12px; padding: 0 0 0 30px; }
  .sd-track-steps::before { top: 0; bottom: 0; left: 4px; right: auto; width: 4px; height: auto; }
  .sd-track-steps::after { display: none; }
  .sd-track-steps > li::before { top: 4px; left: -30px; }
  .sd-flow--big { --steps: 1 !important; }
  .sd-flow--big > li + li::before { top: calc(-1 * var(--sd-gap)); left: 34px; width: 2px; height: var(--sd-gap); }
  .sd-flow--big > li + li::after { top: -5px; left: 31px; }
  .sd-flow--big .sd-box { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 10px; }
  .sd-flow--big .sd-step-num { grid-row: span 2; margin: 0; }
}
@media (max-width: 900px) {
  .sd { --sd-rail: 40px; --sd-gap: 22px; }
  .sd-stop { padding-block: 104px; }
  .sd-timeline { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .sd-timeline::before { top: 0; bottom: 0; left: 6px; right: auto; width: 2px; height: auto; }
  .sd-timeline > li { padding: 0 0 0 30px; }
  .sd-timeline > li::before { top: 4px; }
  .sd-split, .sd-split--even { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .sd-grid { --cols: 2 !important; }
  .sd-flow { --steps: 1 !important; }
  .sd-flow > li + li::before { top: calc(-1 * var(--sd-gap)); left: 34px; width: 2px; height: var(--sd-gap); }
  .sd-flow > li + li::after { top: -5px; left: 31px; }
  .sd-merge { display: none; }
  .sd-conclusion { margin-top: var(--sd-gap); }
  .sd-bus { padding-top: 0; }
  .sd-bus::before, .sd-bus::after, .sd-bus > .sd-grid > li::before { display: none; }
  .sd-bus-source { margin-bottom: 18px; }
  .sd-branch { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sd-branch-source::after { display: none; }
  .sd-branch-rows { margin-top: 18px; padding-left: 30px; }
  .sd-branch-rows::before { left: 0; top: -18px; }
  .sd-branch-rows > li::before { left: -30px; }
  .sd-callouts { grid-template-columns: minmax(0, 1fr); }
  .sd-prompt { margin-left: 0; }
}
@media (max-width: 650px) {
  .sd-hs h2 { font-size: 22px; }
  .sd { --sd-rail: 28px; }
  .sd-pair { grid-template-columns: minmax(0, 1fr); }
  .sd-table th, .sd-table td { padding: 10px 12px; }
  .sd-sky { padding: 56px 0 48px; }
  .sd-stop { padding-block: 80px; }
  .sd-grid { --cols: 1 !important; }
  .sd-row { grid-template-columns: auto minmax(0, 1fr); }
  .sd-row .sd-when { grid-column: 2; font-size: 18px; }
  .sd-speed > li + li::before { width: 20px; margin: 0 6px; }
  .sd-board { padding: 16px; }
}
@media (forced-colors: active) {
  .sd-road::before, .sd-road::after, .sd-stop-head::before, .sd-stop-head::after, .sd-flow > li + li::before, .sd-flow > li + li::after,
  .sd-branch-rows::before, .sd-branch-rows > li::before, .sd-branch-source::after, .sd-bus::before, .sd-bus::after, .sd-bus > .sd-grid > li::before,
  .sd-merge::before, .sd-merge span, .sd-speed > li + li::before, .sd-timeline::before, .sd-timeline > li::before, .sd-quarters::before, .sd-q::before, .sd-q-groups::before, .sd-q-group::before,
  .sd-q-group + .sd-q-group::after, .sd-q-group > .sd-box::before, .sd-q-group > .sd-box::after, .sd-track-steps::before, .sd-track-steps > li::before { background: CanvasText; forced-color-adjust: none; }
  .sd-sky::before { display: none; }
}

/* Story interactivity (assets/our-story.js adds .sd-js). Traces start dim and light up once the reader reaches them;
   the road fills behind the reader; the current point's pad glows; boxes pulse once in reading order, then settle.
   Only "Now" on the roadmap stays highlighted. Hover or keyboard focus lights the box you are on. */
@property --sd-trace { syntax: "<color>"; inherits: true; initial-value: #0a7fd1; }
.sd-js .sd-road::before { background: #1c4566; box-shadow: none; }
.sd-road-progress { position: absolute; top: 0; left: calc(var(--sd-rail) / 2 - 1px); z-index: 1; width: 2px; height: 0; background: var(--blue); box-shadow: 0 0 10px rgba(0, 153, 255, .55); pointer-events: none; }
.sd-js .sd-road::after { background: #1c4566; transition: background-color .5s; }
.sd-js .sd-road.is-complete::after { background: var(--blue); }
.sd-js .sd-stop { --sd-trace: #1c4566; transition: --sd-trace .6s ease; }
.sd-js .sd-stop.is-reached { --sd-trace: #0a7fd1; }
.sd-js .sd-stop-head::before { z-index: 2; background: #1c4566; box-shadow: none; transition: background-color .4s, box-shadow .4s; }
.sd-js .sd-stop.is-reached .sd-stop-head::before { background: var(--blue); }
.sd-js .sd-stop.is-active .sd-stop-head::before { box-shadow: 0 0 0 6px rgba(0, 153, 255, .22), 0 0 18px rgba(0, 153, 255, .6); }
@keyframes sd-pulse {
  0%, 100% { border-color: var(--sd-line); box-shadow: none; }
  30% { border-color: var(--blue); box-shadow: 0 0 0 1px rgba(0, 153, 255, .45), 0 10px 28px rgba(0, 153, 255, .2); }
}
.sd-js .sd-box.is-pulse { animation: sd-pulse 1.6s ease backwards; animation-delay: calc(var(--i, 0) * 160ms); }
.sd-js .sd-box--lit.is-pulse, .sd-js .sd-box--alert.is-pulse { animation: none; }
.sd-box { transition: border-color .2s, box-shadow .2s; }
@media (hover: hover) { .sd-box:not(.sd-box--alert):hover { border-color: var(--blue); box-shadow: 0 0 0 1px rgba(0, 153, 255, .35); } }
.sd-box:not(.sd-box--alert):focus-within { border-color: var(--blue); }
@media (prefers-reduced-motion: reduce) { .sd-road-progress { display: none; } }
@media (forced-colors: active) { .sd-road-progress { background: CanvasText; forced-color-adjust: none; } }

/* Chapters: a larger, numbered pad on the trace (a highway exit), with the chapter title. The route map at the top of
   the road links to each chapter. Each point ends with a one-line bridge to the next. */
.icon-badge-check { --icon-source: url("assets/icons/badge-check.svg"); }
.icon-presentation { --icon-source: url("assets/icons/presentation.svg"); }
.icon-printer { --icon-source: url("assets/icons/printer.svg"); }
.sd-route { padding: 40px 0 8px; }
.sd-route .eyebrow { margin-bottom: 4px; color: var(--sd-muted); }
.sd-route .sd-speed { margin-top: 10px; }
.sd-route a.sd-node { color: var(--sd-text); }
.sd-route a.sd-node:hover { border-color: var(--blue); color: var(--blue); }
.sd-route-num { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 4px; border-radius: 6px; border: 1px solid var(--blue); font-size: 12px; color: var(--blue); }
.sd-chapter-head { position: relative; margin-left: calc(-1 * var(--sd-rail)); padding: 72px 0 4px var(--sd-rail); }
.sd-chapter-head::before { content: attr(data-num); position: absolute; top: 68px; left: calc(var(--sd-rail) / 2 - 18px); z-index: 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; border: 2px solid var(--blue); background: var(--sd-bg); color: var(--sd-text); font-family: var(--head); font-size: 14px; font-weight: 600; box-shadow: 0 0 0 5px rgba(0, 153, 255, .14); }
.sd-chapter-head .eyebrow { margin-bottom: 6px; color: var(--sd-muted); }
.sd-chapter-head h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.2; color: var(--blue); }
.sd .sd-subhead--gap { margin-top: 48px; }
/* A drawing that takes the full height of the column beside it, scaled to fit without cropping. */
.sd-media--fill { position: relative; align-self: stretch; min-height: 320px; padding: 0; }
.sd-media--fill .sd-card-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 900px) { .sd-media--fill { align-self: auto; width: min(100%, 460px); min-height: 0; margin-inline: auto; aspect-ratio: 1656 / 1611; } }
/* Point 07: on hover (or a tap, Enter or Space) the card render "prints" over its blueprint, top to bottom, behind a scan line. */
.sd-reveal { container-type: size; cursor: pointer; }
.sd-reveal:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.sd-reveal-stack { position: absolute; top: 50%; left: 50%; width: min(100cqw, 100cqh * 1.0279); aspect-ratio: 1656 / 1611; transform: translate(-50%, -50%); }
.sd-reveal-blueprint { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .5s ease; }
/* Placed so the render's card body covers the drawing's outer 2.322 x 3.574 in outline. */
.sd-reveal-card { position: absolute; top: 9.93%; left: 34.33%; width: 52.11%; height: auto; opacity: 0; clip-path: inset(0 0 100% 0); filter: drop-shadow(0 18px 36px rgba(0, 0, 0, .5)); transition: clip-path .8s cubic-bezier(.2, .7, .2, 1), opacity .25s ease; }
.sd-reveal-stack::after { content: ""; position: absolute; top: 9.93%; left: 33%; width: 54%; height: 2px; background: #7cd0ff; box-shadow: 0 0 14px 3px rgba(0, 153, 255, .85); opacity: 0; pointer-events: none; }
.sd-reveal.is-revealed .sd-reveal-card { opacity: 1; clip-path: inset(0); }
.sd-reveal.is-revealed .sd-reveal-blueprint { opacity: .3; }
.sd-reveal.is-revealed .sd-reveal-stack::after { animation: sd-scan .8s cubic-bezier(.2, .7, .2, 1) forwards; }
@media (hover: hover) {
  .sd-reveal:hover .sd-reveal-card { opacity: 1; clip-path: inset(0); }
  .sd-reveal:hover .sd-reveal-blueprint { opacity: .3; }
  .sd-reveal:hover .sd-reveal-stack::after { animation: sd-scan .8s cubic-bezier(.2, .7, .2, 1) forwards; }
}
@keyframes sd-scan { 0% { top: 9.93%; opacity: 1; } 85% { opacity: 1; } 100% { top: 90.69%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sd-reveal-card { clip-path: none; transition: opacity .2s; } .sd-reveal-stack::after { display: none; } }
.sd-tag--proof { border-color: rgba(0, 153, 255, .45); }
.sd-present { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-top: 22px; }
.sd-present button.sd-link { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; cursor: pointer; }
.sd-present .site-icon { --icon-size: 18px; color: var(--blue); }
.sd-present-hint { font-size: 14px; color: var(--sd-muted); }
@media (hover: none) { .sd-present-hint { display: none; } }
@media (max-width: 650px) { .sd-chapter-head { padding-top: 56px; } .sd-chapter-head::before { top: 52px; width: 30px; height: 30px; left: calc(var(--sd-rail) / 2 - 15px); } }

/* Save as PDF: one point per landscape page, dark like the deck, without the site header, footer and closing block. */
/* Help cards: a deck note opens in one shared, full-width panel under the row of its box, or under its point's heading. */
.icon-plus { --icon-source: url("assets/icons/plus.svg"); }
.icon-x { --icon-source: url("assets/icons/x.svg"); }
.icon-notebook-text { --icon-source: url("assets/icons/notebook-text.svg"); }
.sd { position: relative; }
.sd-has-note { cursor: pointer; }
.sd-note-toggle { position: absolute; top: 10px; right: 10px; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--sd-line); border-radius: 50%; background: var(--sd-panel-2); color: var(--blue); cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.sd-note-toggle .site-icon { --icon-size: 16px; color: inherit; }
.sd-note-toggle:hover, .sd-has-note:hover > .sd-note-toggle, .sd-note-toggle[aria-expanded="true"] { border-color: var(--blue); background: var(--blue); color: #fff; }
.sd-note-toggle:focus-visible, .sd-card-close:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.sd-note-toggle--point { position: static; display: inline-flex; gap: 7px; width: auto; height: auto; padding: 5px 12px; border-radius: 999px; border-color: rgba(0, 153, 255, .45); color: var(--sd-text); font-family: inherit; font-size: 14px; font-weight: 600; letter-spacing: .02em; }
.sd-card { position: relative; margin-top: 40px; padding: 22px 64px 24px 28px; border: 1px dashed rgba(0, 153, 255, .45); border-left: 6px solid var(--blue); background: #06121d; box-shadow: inset 0 0 40px rgba(0, 153, 255, .08); scroll-margin-bottom: 16px; animation: sd-card-in .25s ease; }
.sd-stop-head + .sd-card { margin: 0 0 34px; }
.sd-card:focus { outline: none; }
/* The trace runs from the clicked box down into the note; hidden when the box is not directly above it. */
.sd-card::before { content: ""; position: absolute; bottom: 100%; left: var(--x, 40px); width: 2px; height: var(--reach, 40px); background: var(--blue); box-shadow: 0 0 8px rgba(0, 153, 255, .7); }
.sd-card::after { content: ""; position: absolute; top: -6px; left: calc(var(--x, 40px) - 5px); width: 12px; height: 12px; border-radius: 2px; background: var(--blue); }
.sd-card--plain::before, .sd-card--plain::after { display: none; }
.sd-card-close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--blue); cursor: pointer; }
.sd-card-close:hover { background: rgba(0, 153, 255, .14); }
.sd-card-close .site-icon { --icon-size: 18px; color: inherit; }
.sd .sd-card-kicker { display: flex; align-items: center; gap: 8px; margin: 0; padding-right: 40px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.sd-card-kicker .site-icon { --icon-size: 16px; color: inherit; }
.sd .sd-card-title { margin-top: 6px; font-size: 21px; line-height: 1.3; }
.sd-card-body { max-width: 980px; }
.sd .sd-card-body p, .sd .sd-card-body li { margin-top: 10px; font-size: 17px; line-height: 1.6; color: #cfe6f7; }
.sd-card-body ul { margin: 6px 0 0; padding-left: 20px; }
.sd .sd-card-body li { margin-top: 6px; }
.sd-card-body a { color: var(--blue); font-weight: 600; }
@media (max-width: 650px) { .sd-card { padding: 18px 52px 20px 20px; } }
@keyframes sd-card-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sd-card { animation: none; } }
@media (forced-colors: active) { .sd-card, .sd-note-toggle { border: 1px solid CanvasText; } .sd-card::before, .sd-card::after { background: CanvasText; } }
/* Other looks, kept for later: set data-note-style on the .sd section to "blueprint", "split" or "sheet". */
.sd-card--blueprint, .sd-card--split, .sd-card--sheet { margin-top: 22px; border: 0; box-shadow: none; }
.sd-card--blueprint::before, .sd-card--blueprint::after, .sd-card--split::before, .sd-card--split::after, .sd-card--sheet::before, .sd-card--sheet::after { display: none; }
.sd-card--blueprint { border-left: 6px solid var(--blue); background-color: rgba(0, 153, 255, .05); background-image: linear-gradient(rgba(0, 153, 255, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 153, 255, .12) 1px, transparent 1px); background-size: 24px 24px; }
.sd-card--split { display: grid; grid-template-columns: minmax(200px, 1fr) 3fr; gap: 8px 40px; align-items: start; padding: 26px 64px 26px 30px; border-left: 8px solid var(--blue); border-radius: 0 14px 14px 0; background: linear-gradient(90deg, #123a5a, #0e2a42 60%); }
.sd-card--split .sd-card-kicker, .sd-card--split .sd-card-title { grid-column: 1; }
.sd-card--split .sd-card-body { grid-column: 2; grid-row: 1 / span 2; }
.sd .sd-card--split .sd-card-body > :first-child { margin-top: 0; }
.sd .sd-card--split .sd-card-kicker { color: #7cc6ff; }
@media (max-width: 650px) { .sd-card--split { display: block; } }
.sd-card--sheet { border-left: 8px solid var(--blue); border-radius: 4px; background: #eef6fa; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.sd .sd-card--sheet .sd-card-kicker, .sd-card--sheet .sd-card-body a, .sd-card--sheet .sd-card-close { color: #0066a3; }
.sd .sd-card--sheet .sd-card-title { color: #112c40; }
.sd .sd-card--sheet .sd-card-body p, .sd .sd-card--sheet .sd-card-body li { color: #2b4456; }
@media print {
  @page { size: 13.333in 7.5in; margin: .35in; }
  html, body { background: #0a1a29 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  header.header, footer.footer, .consent-banner, .resources, .contact-section, .skip, .sd-present, .sd-route, .sd-road-progress, .email-fallback { display: none !important; }
  .sd { padding: 0; zoom: .52; }
  .sd-links, .sd-hs-out { display: none !important; }
  .sd-box, .sd-q, .sd-track, .sd-hs, .sd-table, .sd-chapter-head { break-inside: avoid; }
  .sd-sky { break-after: page; }
  .sd-sky::before { -webkit-mask-image: none; mask-image: none; }
  .sd-stop { break-before: page; padding-block: 24px; }
  .sd-chapter-head { break-before: page; }
  .sd-chapter-head + .sd-stop { break-before: avoid; }
  .sd-js .sd-stop { --sd-trace: #0a7fd1; }
  .sd-js .sd-road::before, .sd-js .sd-stop-head::before { background: var(--blue); }
  .sd-box { animation: none !important; }
  .sd-note-toggle, .sd-card { display: none !important; }
  .sd-reveal-card, .sd-reveal-stack::after { display: none !important; }
  .sd-reveal-blueprint { opacity: 1 !important; }
  /* The print width falls under the narrow layout; keep the history timeline across the page so point 02 fits one page. */
  .sd-timeline { grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); gap: var(--sd-gap); }
  .sd-timeline::before { top: 7px; bottom: auto; left: 0; right: 0; width: auto; height: 2px; }
  .sd-timeline > li { padding: 30px 0 0; }
  .sd-timeline > li::before { top: 0; }
}