/* ========================================================================== 
   AGENTIC PRODUCT PLATFORM — Shared design tokens
   ========================================================================== */
:root {
  --bg: #ffffff;
  --text-primary: #080b20;
  --text-secondary: #617abb;
  --nav-text: #607ecd;
  --blue: #1267f4;
  --blue-soft: #eef5ff;
  --line: #d9e5fb;
  --surface: #f8fbff;
  --success: #16a34a;
  --radius-sm: 8px;
  --radius-md: 11px;
  --radius-lg: 20px;
  --font: "Inter", "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --gutter: 60px;
  --page-width: 1480px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --card-shadow: 0 2px 5px rgb(37 79 140 / 2%), 0 10px 28px rgb(42 93 166 / 5%);
  --surface-card: linear-gradient(150deg, #ffffff 8%, #ffffff 52%, #f6f9ff 100%);
  --surface-inset: linear-gradient(140deg, #f8fbff 0%, #eef4fd 100%);
  --surface-platform: linear-gradient(110deg, #f1f6ff 0%, #fbfdff 49%, #f2f7ff 100%);
  --surface-active: linear-gradient(145deg, #ffffff 5%, #f2f7ff 100%);
  --surface-halo: radial-gradient(ellipse at 50% 62%, rgb(218 234 255 / 48%) 0%, rgb(240 246 255 / 22%) 48%, transparent 73%);
  --motion: 180ms;
  --stage-title-size: 50px;
  --overview-title-size: 65px;
  --overview-subtitle-size: 22px;
  --overview-card-title-size: 26px;
  --overview-card-copy-size: 15px;
  --overview-card-label-size: 12px;
  --site-header-height: 99px;
  --kpi-column-width: 194px;
  --pipeline-caption-gap: 20px;
  --role-font-size: 19px;
  --role-avatar-size: 48px;
  --role-icon-size: 28px;
  --role-text-gap: 12px;
}

/* ========================================================================== 
   Reset, semantic defaults and accessibility
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
body { margin: 0; color: var(--text-primary); background: var(--bg); font-family: var(--font); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
ul, ol { list-style: none; padding: 0; margin: 0; }
svg { display: block; max-width: 100%; }
::selection { background: #dbeaff; color: var(--text-primary); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 5px; border-radius: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.svg-definitions { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.skip-link { position: fixed; z-index: 20; top: 12px; left: 20px; padding: 12px 18px; background: white; border: 1px solid var(--blue); border-radius: var(--radius-sm); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.icon { display: inline-block; width: 24px; height: 24px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; color: var(--blue); }
.blue { color: var(--blue); }

/* ========================================================================== 
   Global composition and typography
   ========================================================================== */
.screen { min-height: 100svh; scroll-margin-top: 0;
  background: radial-gradient(ellipse at 58% 46%, rgb(239 246 255 / 34%) 0%, rgb(249 252 255 / 18%) 45%, transparent 74%);
}
/* View routing adds hidden only after JavaScript initializes; the complete
   document remains available when scripts are disabled. */
[data-screen][hidden] { display: none !important; }
.page-shell { width: min(calc(100% - var(--gutter) * 2), var(--page-width)); margin-inline: auto; }
.eyebrow { font-size: 12px; line-height: 1.35; font-weight: 600; letter-spacing: .19em; text-transform: uppercase; color: var(--text-secondary); }
.wordmark { display: inline-block; flex: 0 0 auto; font-size: 36px; font-weight: 800; letter-spacing: -.065em; line-height: 1.1; color: #070908; }
.wordmark span { color: var(--blue); }
.brand-signature { display: flex; flex: 0 0 auto; align-items: center; gap: 16px; color: var(--text-secondary); font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: .22em; }
.brand-signature .icon { width: 20px; height: 20px; stroke-width: 1.5; }
.stage-shell { display: flex; flex-direction: column; min-height: calc(100svh - var(--site-header-height)); padding-top: 20px; padding-bottom: 12px; }
.stage-main { display: grid; grid-template-columns: 340px minmax(0, 1fr) var(--kpi-column-width); gap: 28px; align-items: start; flex: 1 0 auto; min-height: 0; padding-block: 24px; }
/* Center the complete, natural-height content row in the available desktop
   space. Its columns retain their own alignment and can grow without clipping. */
@media screen and (min-width: 1200px) {
  .stage-main { align-content: center; }
}
.stage-narrative { align-self: start; padding-top: 22px; padding-bottom: 0; }
.stage-narrative > .eyebrow { margin-bottom: 14px; }
.stage-narrative h2 { font-size: var(--stage-title-size); width: max-content; max-width: calc(100% + 90px); font-weight: 740; letter-spacing: -.047em; line-height: 1.02; color: #070908; }
.title-rule { display: block; width: 30px; height: 2px; margin-block: 12px 8px; background: var(--blue); }
.stage-description { max-width: 355px; font-size: 21px; line-height: 1.36; letter-spacing: -.035em; color: var(--text-secondary); width: calc(100% + 15px); }
.stage-diagram { min-width: 0; position: relative; isolation: isolate; }
.stage-diagram::before { content: ""; position: absolute; inset: -14px -10px -4px; background: var(--surface-halo); z-index: -1; pointer-events: none; }
.led-by { margin-top: 32px; }
.led-by-label { display: block; color: var(--text-secondary); font-size: 18px; margin-bottom: 12px; }
/* The same lead typography and avatar size are used by all four stages.
   Two-person teams stack at every breakpoint; single leads use the same row. */
.roles { display: flex; flex-direction: column; align-items: flex-start;
  gap: 8px; width: 100%; max-width: 100%; }
.role .avatar { width: var(--role-avatar-size); height: var(--role-avatar-size); }
.role .avatar .icon { width: var(--role-icon-size); height: var(--role-icon-size); }
.role { display: inline-flex; align-items: center; gap: var(--role-text-gap); font-size: var(--role-font-size); font-weight: 550; white-space: nowrap; letter-spacing: -.035em; }
.avatar { width: 54px; height: 54px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #e7effc; border-radius: 50%; background: var(--surface-inset); }
.avatar .icon { width: 29px; height: 29px; }

/* ========================================================================== 
   Header and navigation
   ========================================================================== */
.site-header { position: relative; z-index: 12; padding-top: 4px; background: var(--bg); }
.hero-screen, body[data-view="detail"] .screen[data-stage] { min-height: calc(100svh - var(--site-header-height)); }
.hero-header { display: flex; align-items: center; gap: 76px; min-height: 95px; border-bottom: 1px solid var(--line); position: relative; }
.hero-header .wordmark { font-size: 43px; }
.brand-logo { display: inline-flex; flex: 0 0 auto; align-items: center; width: 160px; min-height: 44px; }
.brand-logo img { display: block; width: 100%; height: auto; }
.primary-nav { display: flex; align-items: stretch; gap: 40px; align-self: stretch; }
.primary-nav > a, .primary-nav > .product-stages-menu > .product-stages-trigger { display: flex; align-items: center; position: relative; color: #586aa5; font-size: 12px; line-height: 1.2; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; }
.primary-nav > a::after, .primary-nav > .product-stages-menu > .product-stages-trigger::after { content: ""; width: 0; height: 2px; background: var(--blue); position: absolute; left: 0; bottom: 23px; transition: width var(--motion) ease; }
.primary-nav > a:hover, .primary-nav > a.is-active,
.primary-nav > .product-stages-menu > .product-stages-trigger:hover,
.primary-nav > .product-stages-menu > .product-stages-trigger.is-active { color: var(--text-primary); }
.primary-nav > a:hover::after, .primary-nav > a.is-active::after,
.primary-nav > .product-stages-menu > .product-stages-trigger:hover::after,
.primary-nav > .product-stages-menu > .product-stages-trigger.is-active::after { width: 32px; }
.hero-header .brand-signature { margin-left: auto; }
.menu-toggle { display: none; }

/* A single header-owned disclosure replaces the permanent stage tracker.
   Its absolute panel shares the header gutters and never moves page content. */
.product-stages-menu { min-width: 0; }
.product-stages-trigger { display: flex; align-items: center; gap: 9px; min-height: 44px; height: 100%; cursor: pointer; list-style: none; }
.product-stages-trigger::-webkit-details-marker { display: none; }
.stage-menu-chevron { display: block; flex: 0 0 auto; width: 7px; height: 7px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.product-stages-menu[open] > .product-stages-trigger .stage-menu-chevron { transform: translateY(2px) rotate(225deg); }
.primary-nav > .product-stages-menu[open] > .product-stages-trigger { color: var(--blue); }
.primary-nav > .product-stages-menu[open] > .product-stages-trigger::after { width: 56px; }
.product-stages-panel { position: absolute; top: 100%; left: 0; right: 0; padding: 28px 24px 22px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-md); max-height: calc(100dvh - var(--site-header-height) - 12px); overflow-y: auto; overscroll-behavior: contain; }
.product-stages-menu:not([open]) > .product-stages-panel { display: none; }
.product-stages-menu[open] > .product-stages-panel { animation: stage-menu-enter var(--motion) ease-out; }
.stage-menu-banner { display: flex; align-items: flex-end; gap: 24px; position: relative; isolation: isolate; overflow: hidden; padding: 30px 32px; margin-bottom: 16px; border-radius: var(--radius-md); background: var(--surface); }
.stage-menu-intro { flex: 1; min-width: 0; }
.stage-menu-intro > .eyebrow { color: var(--blue); font-size: 13px; margin-bottom: 12px; }
.stage-menu-intro > h2 { font-size: clamp(36px, 3.4vw, 52px); line-height: 1.08; font-weight: 740; letter-spacing: -.047em; color: #070908; }
.stage-menu-subtitle { margin-top: 12px; color: var(--text-secondary); font-size: clamp(18px, 1.4vw, 22px); line-height: 1.4; letter-spacing: -.035em; }
.stage-menu-wave { position: absolute; z-index: -1; pointer-events: none; color: var(--blue); opacity: .14; width: 60%; height: auto; right: -2%; top: 8px; mask-image: linear-gradient(to right, transparent, #000 35%); }
.stage-menu-overview { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 10px; min-height: 44px; margin-bottom: 16px; color: var(--blue); font-size: 18px; letter-spacing: -.025em; white-space: nowrap; }
.stage-menu-overview .icon { width: 22px; height: 22px; }
.stage-menu-overview:hover { text-decoration: underline; text-underline-offset: 5px; }
.stage-menu-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.stage-menu-list > li { min-width: 0; }
.stage-menu-link { display: flex; flex-direction: column; align-items: flex-start; height: 100%; padding: 24px 24px 42px; border-radius: var(--radius-md); line-height: 1.4; transition: background-color 200ms ease; }
.stage-menu-number { flex: 0 0 auto; font-size: 24px; line-height: 1.2; font-weight: 500; letter-spacing: -.04em; color: var(--blue); transition: color 200ms ease; }
.stage-menu-number::after { content: ""; display: block; width: 28px; height: 3px; margin-top: 16px; background: currentColor; }
.stage-menu-name { display: block; min-width: 0; margin-top: 28px; font-size: clamp(24px, 1.9vw, 30px); line-height: 1.12; font-weight: 650; letter-spacing: -.045em; color: #070908; overflow-wrap: anywhere; }
.stage-menu-description { display: block; max-width: 245px; margin-top: 16px; color: var(--text-secondary); font-size: clamp(18px, 1.35vw, 21px); line-height: 1.4; letter-spacing: -.03em; }
.stage-menu-link[aria-current="page"] { background: #f2f7ff; }
.stage-menu-link:focus-visible { background: var(--blue-soft); outline-offset: 2px; }
/* Keep the header and menu crisp over a subtle, nonblocking grey backdrop. */
body::after { content: ""; position: fixed; inset: 0; z-index: 11; pointer-events: none; background: rgb(20 24 32 / 18%); opacity: 0; transition: opacity var(--motion) ease; }
body.stage-menu-open::after { opacity: 1; }
/* Native details retains the same backdrop when JavaScript is unavailable. */
@media (min-width: 768px) {
  body:has(.site-header [data-stage-menu][open])::after { opacity: 1; }
}
@media (max-width: 767px), (max-width: 1199px) and (max-height: 500px) and (pointer: coarse) {
  body:has(.site-header [data-stage-menu][open])::after { opacity: 0; }
  body:has(.mobile-site-menu[open] [data-stage-menu][open])::after { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  body::after { transition: none; }
}
@media print {
  body::after { display: none; }
}
@keyframes stage-menu-enter {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (hover: hover) and (pointer: fine) {
  .stage-menu-link:not([aria-current]):hover { background: #f7faff; }
  .stage-menu-link:not([aria-current]):hover .stage-menu-number { color: #0958d9; }
}
@media (min-width: 1000px) and (max-width: 1399px) {
  .product-stages-panel { padding: 20px 18px 18px; }
  .stage-menu-banner { padding: 26px 24px; gap: 20px; }
  .stage-menu-list { gap: 8px; }
  .stage-menu-link { padding: 22px 16px 32px; }
}
@media (max-width: 999px), (max-width: 1199px) and (max-height: 500px) and (pointer: coarse) {
  .product-stages-panel { padding: 16px; }
  .stage-menu-banner { padding: 24px; gap: 12px; }
  .stage-menu-overview { font-size: 16px; margin-bottom: 0; }
  .stage-menu-list { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .stage-menu-link { display: grid; grid-template-columns: minmax(32px, max-content) minmax(0, 1fr); align-content: center; gap: 6px 20px; min-height: 100px; padding: 18px 24px; }
  .stage-menu-number { grid-row: 1 / 3; align-self: start; font-size: 20px; }
  .stage-menu-number::after { width: 24px; height: 2px; margin-top: 10px; }
  .stage-menu-name { margin: 0; font-size: 22px; line-height: 1.2; }
  .stage-menu-name br, .stage-menu-description br { display: none; }
  .stage-menu-description { grid-column: 2; max-width: none; margin: 0; font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .product-stages-menu[open] > .product-stages-panel { animation: none; }
  .stage-menu-link, .stage-menu-number, body::after { transition: none; }
}
@media print {
  .product-stages-panel { display: none; }
  body::after { display: none; }
}

.stage-pagination { display: flex; justify-content: space-between; align-items: center; flex: 0 0 auto; gap: 24px; margin-top: 24px; padding-block: 12px; }
.stage-pagination a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; max-width: 46%; color: #586aa5; font-size: 14px; line-height: 1.4; letter-spacing: -.025em; transition: color 180ms ease; }
.stage-pagination a:hover { color: var(--blue); }
.stage-pagination .stage-next { margin-left: auto; text-align: right; justify-content: flex-end; }

.section-footer { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 58px; margin-top: auto; border-top: 1px solid var(--line); padding-block: 16px 6px; }
.text-link { display: flex; gap: 16px; align-items: center; font-size: 16px; color: var(--blue); letter-spacing: -.035em; line-height: 1.4; transition: color var(--motion); }
.text-link .icon { width: 24px; height: 24px; stroke-width: 1.5; transition: transform var(--motion); }
.text-link:hover { color: #004dc5; }
.next-link { text-align: right; margin-left: auto; }
.next-link:hover .icon { transform: translateX(3px); }
.back-link:hover .icon { transform: translateX(-3px); }

.return-loop { display: grid; grid-template-columns: minmax(20px, 1fr) minmax(0, auto) minmax(20px, 1fr); align-items: center; gap: 20px; min-height: 44px; padding-top: 12px; margin-inline: -17px; }
.return-loop > span { color: #536fae; font-size: 10px; font-weight: 600; line-height: 1.45; letter-spacing: .18em; text-align: center; text-transform: uppercase; }
.return-loop-arm { position: relative; height: 28px; margin-top: -28px; border-bottom: 1px solid #6497ff; }
.return-loop-arm:first-child { border-left: 1px solid #6497ff; border-bottom-left-radius: 20px; }
.return-loop-arm:last-child { border-right: 1px solid #6497ff; border-bottom-right-radius: 20px; }
.return-loop-arm::before { content: ""; position: absolute; top: 0; width: 5px; height: 5px; border-top: 1px solid #6497ff; border-left: 1px solid #6497ff; transform: rotate(45deg); }
.return-loop-arm:first-child::before { left: -3px; }
.return-loop-arm:last-child::before { right: -3px; }
@media (max-width: 1199px) {
  .return-loop { margin-inline: 0; gap: 12px; }
}
@media (max-width: 767px), (max-width: 1199px) and (max-height: 500px) and (pointer: coarse) {
  .return-loop { padding-top: 18px; }
  .return-loop > span { font-size: 12px; letter-spacing: .08em; }
}

/* ========================================================================== 
   Hero: geometric ideas, shared context and an assembled product
   ========================================================================== */
.hero-shell { display: flex; flex-direction: column; min-height: calc(100svh - var(--site-header-height)); }
.hero-main { display: grid; grid-template-columns: 540px minmax(0, 1fr); align-items: center; gap: 0; flex: 1; padding-block: 36px 48px; }
.hero-narrative { position: relative; z-index: 1; padding-bottom: 5px; }
.hero-narrative > .eyebrow { color: var(--blue); font-size: 15px; letter-spacing: .18em; margin-bottom: 38px; }
.hero-narrative h1 { font-size: 112px; font-weight: 750; letter-spacing: -.065em; line-height: .98; color: #030504; }
.hero-description { font-size: 27px; line-height: 1.4; letter-spacing: -.028em; color: #6578ad; max-width: 449px; margin-top: 30px; }
.principles { display: grid; grid-template-columns: .97fr 1.15fr 1fr; margin-top: 57px; width: 590px; max-width: calc(100% + 50px); }
.principles > div { padding-right: 26px; }
.principles > div + div { border-left: 1px solid #bed2fb; padding-left: 28px; }
.principles h2 { font-size: 14px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; line-height: 1.3; margin-bottom: 6px; white-space: nowrap; }
.principles p { font-size: 17px; line-height: 1.4; color: #6374a8; letter-spacing: -.02em; }
.hero-visual { position: relative; margin-left: -14px; margin-right: -4px; align-self: center; padding-right: 26px; }
.platform-illustration { width: 100%; height: auto; overflow: visible; }
.svg-wordmark { font-family: var(--font); font-size: 42px; font-weight: 750; letter-spacing: -2.5px; fill: #040606; }
.svg-label { font-family: var(--font); font-size: 12px; font-weight: 550; letter-spacing: 3px; fill: #586ca7; }
.svg-flow-label { font-family: var(--font); font-size: 12px; font-weight: 650; letter-spacing: 3px; fill: var(--text-primary); }
.impact-label { position: absolute; display: flex; align-items: center; gap: 9px; right: -51px; top: 54%; font-size: 10px; letter-spacing: .15em; font-weight: 650; transform: translateY(-50%); }
.impact-label span { color: #213a7c; font-size: 21px; }

/* Supplied ribbon artwork scales naturally; surrounding content remains HTML. */
.hero-visual.hero-visual--ribbon {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  align-self: center;
  transform: translateY(-48px);
}
.hero-ribbon {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1154 / 493;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* ========================================================================== 
   Reusable cards, indicators and local SVG connectors
   ========================================================================== */
.card { background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--card-shadow); }
.connector-layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.connector-layer path { fill: none; stroke: var(--blue); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.connector-layer .secondary-path { stroke-dasharray: 4 4; opacity: .57; }
.connector-layer .group-brace { stroke: #749ff2; stroke-width: 1.1; }
.connector-layer .group-arrow { stroke-width: 1.15; }
.connector-layer circle { fill: var(--blue); }
[data-node], .prototype-card, .mini-inputs, .mini-context-inputs, .review-window, .spec-output, .prototype-input, .stakeholder, .main-prototype { position: relative; z-index: 2; }
.diagram-scroll { min-width: 0; }
.diagram-scroll:focus-visible { outline-offset: 6px; }
.diagram-scroll[data-overflows="true"]::after { content: "Scroll to explore →"; display: block; position: sticky; left: 0; width: 100%; padding-top: 9px; text-align: right; color: var(--text-secondary); font-size: 10px; line-height: 1.4; letter-spacing: .02em; }
.workflow { display: grid; align-items: center; }
.flow-card { position: relative; display: flex; align-items: center; flex-direction: column; text-align: center; }
.flow-card .flow-icon { width: 32px; height: 32px; }
.flow-card h3 { font-size: 14px; font-weight: 550; letter-spacing: -.04em; line-height: 1.3; }
.flow-card p { color: var(--text-secondary); font-size: 13px; line-height: 1.38; letter-spacing: -.035em; }
.flow-card.is-active, .flow-card.is-route { border-color: #6098fc; box-shadow: 0 0 0 3px rgb(18 103 244 / 3%), 0 9px 24px rgb(18 103 244 / 8%); background: var(--surface-active); }
.status-check { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; background: var(--success); }
.status-check .icon { width: 11px; height: 11px; color: white; stroke-width: 2.2; }
.status-pending { display: inline-block; flex: 0 0 auto; width: 15px; height: 15px; border: 1.5px solid #bbd0fc; border-radius: 50%; }
.node-status { position: absolute; top: 13px; right: 10px; }
.artifact-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; text-align: center; padding: 12px 8px; }
.artifact-card > .icon { width: 31px; height: 31px; }
.artifact-card h3 { font-size: 13px; line-height: 1.3; font-weight: 550; letter-spacing: -.04em; }
.increment-card { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 18px 12px; }
.increment-heading { width: 100%; }
.increment-heading h4 { font-size: 14px; line-height: 1.3; letter-spacing: -.035em; font-weight: 550; }
.increment-icon { width: 31px; height: 31px; margin-bottom: 12px; }
.version { display: inline-block; background: var(--blue); color: white; font-size: 12px; font-weight: 650; border-radius: 20px; padding: 2px 10px; line-height: 1.3; margin-top: 7px; letter-spacing: -.025em; }
.check-list { display: flex; flex-direction: column; gap: 8px; text-align: left; margin-top: 14px; }
.check-list li { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--text-secondary); line-height: 1.35; letter-spacing: -.035em; }

/* ========================================================================== 
   Shared Context — diagram pills and workflow platforms
   ========================================================================== */
.context-stem { display: block; position: relative; width: 1px; height: 28px; background: #5b96ff; margin-inline: auto; flex: 0 0 auto; }
.context-stem::before, .context-stem::after { content: ""; position: absolute; left: -2px; width: 5px; height: 5px; background: var(--blue); border-radius: 50%; }
.context-stem::before { top: 0; }
.context-stem::after { bottom: 0; }
.context-pill { display: flex; gap: 20px; align-items: center; width: max-content; max-width: 100%; margin-inline: auto; min-height: 56px; padding: 10px 26px; background: var(--surface-card); border: 1px solid var(--line); border-radius: 100px; box-shadow: var(--card-shadow); color: var(--text-secondary); }
.context-pill > .icon { width: 29px; height: 29px; }
.context-pill p { font-size: 15px; line-height: 1.4; letter-spacing: -.035em; }
.context-pill div > span { display: block; font-size: 13px; line-height: 1.4; letter-spacing: -.025em; }
.context-pill--prototype { font-size: 13px; min-height: 50px; padding-inline: 22px; gap: 16px; letter-spacing: -.025em; }
.context-pill--prototype .icon { width: 25px; height: 25px; }
.context-platform { display: flex; align-items: center; justify-content: center; gap: 34px; background: var(--surface-platform); border: 1px solid var(--line); border-radius: var(--radius-sm); min-height: 68px; padding: 15px 30px; }
.context-platform-brand { display: flex; align-items: center; justify-content: flex-start; gap: 18px; flex: 0 0 30%;  padding-left: 14px; }
.context-platform-brand .wordmark { font-size: 29px; }
.context-platform-brand .eyebrow { font-size: 11px; white-space: nowrap; }
.context-platform ul { flex: 1; display: flex; align-items: center; }
.context-platform li { display: flex; align-items: center; justify-content: center; flex: 1; gap: 13px; color: var(--text-secondary); font-size: 12px; letter-spacing: -.035em; min-height: 24px; padding-inline: 12px; border-left: 1px solid #c4d8fb; }
.context-platform li .icon { width: 23px; height: 23px; }

/* Detailed stages share the pipeline's context component, constrained to the
   workflow canvas rather than the narrative or KPI columns. */
.stage-diagram-canvas { min-width: 0; }
.stage-context { min-width: 0; margin-inline: var(--context-inset-start, 0px) var(--context-inset-end, 0px); container: stage-context / inline-size; }
.build-canvas > .stage-context { --context-inset-start: 56px; }
.stage-context > .context-stem { height: 24px; margin-top: 4px; }
.stage-context .context-platform { flex-wrap: wrap; gap: 12px 18px; min-height: 64px; padding: 12px 16px; }
.stage-context .context-platform-brand { flex: 0 0 auto; padding: 0; min-width: 0; justify-content: center; }
.stage-context .context-platform-brand .eyebrow { font-size: 10px; letter-spacing: .12em; }
.stage-context .context-platform ul { display: flex; flex-wrap: wrap; justify-content: center; flex: 1 1 480px; min-width: 0; gap: 8px 0; }
.stage-context .context-platform li { flex: 1 0 auto; min-width: max-content; padding-inline: 8px; gap: 7px; font-size: 12px; line-height: 1.4; }
.stage-context .context-platform li span { white-space: nowrap; overflow-wrap: normal; word-break: normal; }
.stage-context .context-platform li .icon { width: 22px; height: 22px; }
@container stage-context (max-width: 640px) {
  .stage-context .context-platform-brand { flex-basis: 100%; flex-wrap: wrap; }
  .stage-context .context-platform ul { flex-basis: 100%; }
  .stage-context .context-platform li:first-child { border-left: 0; }
}
@container stage-context (max-width: 560px) {
  .stage-context .context-platform li { flex-direction: column; gap: 5px; padding-inline: 4px; }
}
@container stage-context (max-width: 380px) {
  .stage-context .context-platform { padding: 12px; }
  .stage-context .context-platform ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 8px; }
  .stage-context .context-platform li { flex: 1 1 80px; max-width: 120px; border: 0; }
  .stage-context .context-platform-brand .eyebrow { white-space: normal; }
}

.context-rail { display: flex; align-items: center; gap: 19px; min-height: 50px; border-top: 1px solid var(--line); margin-top: 12px; }
.context-rail .wordmark { font-size: 22px; }
.context-rail > .eyebrow { font-size: 10px; letter-spacing: .18em; white-space: nowrap; }
.context-types { display: flex; gap: 12px; font-size: 9px; font-weight: 550; letter-spacing: .14em; text-transform: uppercase; color: var(--text-secondary); white-space: nowrap; }
.context-types b { font-weight: 500; color: #88adfa; }
.rail-line { flex: 1; height: 1px; background: var(--line); min-width: 15px; position: relative; }
.rail-line::after { content: ""; position: absolute; right: 0; top: -2px; width: 5px; height: 5px; background: var(--blue); border-radius: 50%; }
.context-rail .rail-line:nth-last-child(2)::after { right: auto; left: 0; }
.context-rail + .section-footer { border-top: 0; }

/* ========================================================================== 
   KPI column and numbered feature band
   ========================================================================== */
.kpis { border-left: 1px solid #ccdafa; align-self: stretch; padding: 0 0 0 28px; display: flex; flex-direction: column; justify-content: flex-start; margin-block: 10px 0; }
.kpis > .eyebrow { margin-bottom: 18px; }
.kpi { display: flex; flex-direction: column; padding-block: 16px 16px; border-bottom: 1px solid #d3e0fa; }
.kpi:first-child { padding-top: 0; }
.kpi:last-child { border: 0; padding-bottom: 0; }
.kpi dd { order: 0; font-size: 53px; font-weight: 730; letter-spacing: -.055em; line-height: 1.04; margin-bottom: 5px; white-space: nowrap; }
.kpi dt { order: 1; color: var(--text-secondary); font-size: 18px; letter-spacing: -.035em; line-height: 1.3; }
.kpi small { display: block; margin-top: 6px; font-size: 14px; line-height: 1.35; }
.features { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 6px; padding-bottom: 6px; }
.features > .eyebrow { margin-bottom: 17px; }
.features ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.features li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 20px; padding: 0 32px; }
.features li:first-child { padding-left: 36px; }
.features li + li { border-left: 1px solid #c0d6fb; }
.feature-number { display: inline-flex; flex-direction: column; align-items: flex-start; width: max-content; font-size: 23px; font-weight: 550; letter-spacing: -.035em; line-height: 1.2; color: var(--blue); }
.feature-number::after { content: ""; width: 25px; height: 3px; background: var(--blue); margin-top: 9px; }
.features h4 { font-size: 18px; line-height: 1.25; font-weight: 550; letter-spacing: -.04em; margin-bottom: 7px; }
.features p { font-size: 14px; line-height: 1.42; letter-spacing: -.025em; color: var(--text-secondary); }

/* ========================================================================== 
   Product prototype (live HTML and a shared chair photo)
   ========================================================================== */

.product-photo { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 123 / 112; object-fit: contain; }

.cart-button { border: 0; border-radius: 5px; background: #101f44; color: white; font-size: 10px; padding: 9px 3px; line-height: 1.25; width: 100%; margin-top: 10px; transition: background var(--motion); }
.cart-button:hover { background: #173369; }
.cart-button[aria-pressed="true"] { background: #167044; }

/* ========================================================================== 
   Image-based device frame; screen text and controls remain real HTML.
   All screen proportions use the phone container, so every size stays aligned.
   ========================================================================== */
.phone {
  --phone-width: 190px;
  width: var(--phone-width); aspect-ratio: 11 / 21; flex: 0 0 auto;
  position: relative; container-type: inline-size; isolation: isolate;
  filter: drop-shadow(2px 5px 6px rgb(26 48 81 / 9%));
}
.phone-frame { display: block; position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; user-select: none; z-index: 3; }
.phone-screen { position: absolute; inset: 2.0455% 4.5455%; background: #fff;
  border-radius: 14.25% / 6.75%; overflow: hidden;
  padding: 4.3cqw 3.65cqw 5cqw; display: flex; flex-direction: column; }
.phone-status { display: flex; justify-content: space-between; align-items: center;
  font-size: 3.6cqw; font-weight: 650; line-height: 1; min-height: 6.9cqw;
  flex: 0 0 auto; color: #111720; padding-inline: .3cqw; }
.phone-status-icons { display: flex; gap: .75cqw; }
.phone-status-icons .icon { width: 4.7cqw; height: 4.7cqw; color: #17202c; stroke-width: 2; }
.phone-brand { color: #171dde; text-align: center; font-size: 14.2cqw; font-weight: 780;
  letter-spacing: -.065em; line-height: 1; margin-block: 10cqw 7.2cqw; }
.phone-search { background: linear-gradient(110deg, #f5f8ff, #eff4ff); color: #7490c9;
  display: flex; align-items: center; gap: 2.5cqw; font-size: 4.15cqw;
  border-radius: 3.5cqw; padding: 3.35cqw 3cqw; white-space: nowrap; line-height: 1.25;
  letter-spacing: -.035em; }
.phone-search .icon { width: 6cqw; height: 6cqw; color: #6686c7; stroke-width: 1.6; }
.phone-product-image { margin-top: 4.5cqw; border-radius: 3.5cqw; overflow: hidden;
  flex: 0 0 auto; background: #f1f3f5; }
.phone-product-image .product-photo { width: 100%; height: auto; aspect-ratio: 1.18;
  object-fit: contain; }
.phone-product-name { color: #263960; font-size: 5cqw; line-height: 1.3; margin-top: 4.1cqw; }
.phone-product-price { font-size: 7.2cqw; font-weight: 650; line-height: 1.35;
  letter-spacing: -.04em; margin-top: 1.5cqw; }
.phone .cart-button { margin-top: 4.2cqw; padding: 4.5cqw 1.5cqw; font-size: 5cqw;
  line-height: 1.25; border-radius: 2.5cqw; flex: 0 0 auto; }
.main-prototype .phone { --phone-width: 187px; filter: none; }
.main-prototype .phone-frame { filter: drop-shadow(2px 4px 5px rgb(26 48 81 / 10%));
  mask-image: linear-gradient(to bottom, #000 0%, #000 89%, transparent 98%); }
.phone--mini { --phone-width: 129px; }
.tiny-prototype { display: grid; place-items: center; height: 85px; width: min(56px, 100%);
  padding: 4px 8px; background: var(--surface-inset); border-radius: 6px; }
.tiny-phone { position: relative; width: min(38px, 100%); aspect-ratio: 11 / 21;
  filter: drop-shadow(1px 2px 2px rgb(26 48 81 / 9%)); }
.tiny-phone-screen { position: absolute; inset: 2.0455% 4.5455%; background: #fff;
  border-radius: 14.25% / 6.75%; display: flex; align-items: center; overflow: hidden; }
.tiny-phone-screen .product-photo { width: 100%; height: auto; border: 0; border-radius: 0; }

.prototype-card { width: 140px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-card); padding: 12px; box-shadow: var(--card-shadow); }
.prototype-image { border-radius: 7px; overflow: hidden; }
.prototype-product-name { display: block; font-size: 10px; color: #22365f; margin-top: 8px; line-height: 1.3; }
.skeleton-line { display: block; height: 7px; width: 90%; background: #eaf1fc; border-radius: 10px; margin-top: 6px; }
.skeleton-line.short { width: 65%; }

/* ========================================================================== 
   Pipeline overview
   ========================================================================== */
.pipeline-screen { min-height: 0; }
.pipeline-shell { --pipeline-card-gap: 24px; --pipeline-context-gap: 36px; min-height: 0; display: flex; flex-direction: column; padding-top: 30px; padding-bottom: 36px; justify-content: flex-start; }
.pipeline-header { margin-bottom: 23px; }
.pipeline-header h2, .platform-architecture .pa-header h2 { font-family: var(--font); font-size: var(--overview-title-size); font-weight: 740; letter-spacing: -.055em; line-height: 1.06; }
.pipeline-header h2 { color: #040605; }
.pipeline-description, .platform-architecture .pa-subtitle { font-family: var(--font); font-size: var(--overview-subtitle-size); font-weight: 400; line-height: 1.45; letter-spacing: -.035em; margin-top: 8px; }
.pipeline-description { color: var(--text-secondary); }
.pipeline-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--pipeline-card-gap); padding-top: 1px; }
/* Shared rows align headings, diagrams and outcomes without fixing card height. */
.pipeline-stage { position: relative; min-width: 0; display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; padding: 20px 16px 14px; border: 1px solid #d2e2fc; border-radius: 20px; background: linear-gradient(145deg, transparent 5%, rgb(240 245 255 / 20%) 52%, rgb(222 235 255 / 30%) 100%), #fff; }
.pipeline-stage-heading { display: flex; flex-direction: column; padding-inline: 6px; margin-bottom: 16px; }
.pipeline-stage-heading > h3 { flex: 1; }
.pipeline-stage-heading > .feature-number { margin-bottom: 12px; font-size: 23px; }
.pipeline-stage-heading .eyebrow { display: block; margin-bottom: 5px; font-size: var(--overview-card-label-size); }
.pipeline-stage h3 { font-size: var(--overview-card-title-size); font-weight: 650; line-height: 1.08; letter-spacing: -.043em; min-height: 57px; color: #080c13; }
.pipeline-stage-heading > p { font-size: var(--overview-card-copy-size); line-height: 1.4; min-height: 39px; color: var(--text-secondary); letter-spacing: -.03em; margin-top: 5px; }
.pipeline-stage-heading:hover h3 { color: var(--blue); }
.pipeline-visual { min-height: 256px; position: relative; min-width: 0; display: flex; align-items: center; }
.pipeline-visual::before { content: ""; position: absolute; inset: 12px 0 0; background: var(--surface-halo); z-index: 0; pointer-events: none; }
.pipeline-output { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px; border-radius: 13px; background: #edf4ff; text-align: left; color: var(--text-primary); font-size: 14px; font-weight: 700; line-height: 1.35; letter-spacing: -.025em; min-height: 56px; margin-top: var(--pipeline-caption-gap); }
.pipeline-output > .icon { width: 28px; height: 28px; }
.pipeline-output > span { min-width: 0; overflow-wrap: anywhere; }
.pipeline-stage > .context-stem { position: absolute; top: calc(100% + 1px); left: 50%; height: var(--pipeline-context-gap); margin: 0; }
.pipeline-stage > .context-stem::before { top: -2.5px; }
.pipeline-stage > .context-stem::after { bottom: -2.5px; }
.overview-discovery { justify-content: space-between; gap: 24px; }
.mini-inputs { display: flex; flex-direction: column; justify-content: center; align-self: center; gap: 24px; padding: 0; flex: 0 0 70px; }
.mini-inputs strong, .mini-context-inputs strong { display: block; font-size: 12px; font-weight: 600; line-height: 1.3; letter-spacing: -.035em; }
.overview-discovery .prototype-card { flex: 0 0 146px; }
.overview-specification { gap: 18px; }
.mini-context-inputs { flex: 0 0 106px; display: flex; flex-direction: column; justify-content: center; gap: 26px; }
.mini-context-inputs > div { display: flex; align-items: center; gap: 8px; }
.mini-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 32px; width: 32px; height: 39px; border: 1px solid #e4edfc; border-radius: 11px; background: var(--surface-card); box-shadow: 0 5px 12px rgb(42 93 166 / 4%); }
.mini-icon .icon { width: 22px; height: 22px; }
.specification { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 13px; background: var(--surface-card); min-width: 0; box-shadow: var(--card-shadow); }
.specification h4 { font-size: 12px; font-weight: 600; letter-spacing: -.035em; margin-bottom: 12px; }
.specification ul { display: flex; flex-direction: column; gap: 6px; }
.specification li { display: flex; align-items: center; gap: 10px; border: 1px solid #e2ebfb; border-radius: 7px; min-height: 36px; padding: 6px 8px; background: linear-gradient(140deg, #fff 55%, #fafcff); font-size: 12px; letter-spacing: -.04em; color: #334f9a; }
.specification li .icon { width: 20px; height: 20px; }
.specification li > span:not(.count) { flex: 1; }
.count { background: #f0f4fa; border-radius: 7px; padding: 2px 5px; font-size: 10px; color: #4562a1; line-height: 1.5; }
.specification--mini { flex: 1; padding: 10px 8px; }
.specification--mini h4 { font-size: 10px; margin-bottom: 10px; }
.specification--mini li { padding: 5px 4px; gap: 4px; font-size: 10px; min-height: 32px; }
.specification--mini li .icon { width: 16px; height: 16px; }
.specification--mini .count { font-size: 9px; padding: 1px 4px; }
.build-checklist { border: 1px solid var(--line); background: var(--surface-card); box-shadow: var(--card-shadow); border-radius: 7px; padding: 7px; width: 100%; display: flex; flex-direction: column; gap: 5px; }
.build-checklist li { display: flex; align-items: center; gap: 12px; border: 1px solid #e3ecfc; padding: 6px 9px; border-radius: 5px; background: #fff; font-size: 12px; line-height: 1.3; letter-spacing: -.035em; }
.build-checklist li > .icon { width: 23px; height: 23px; }
.build-checklist li > span:nth-child(2) { flex: 1; }
.build-checklist strong { font-size: 11px; font-weight: 600; }
.build-checklist .status-check, .build-checklist .status-pending { width: 13px; height: 13px; }
.overview-impact { justify-content: center; gap: 22px; }

.impact-summary.card { border-radius: var(--radius-sm); padding: 16px 12px; }
.impact-summary .impact-result { align-items: center; }
.impact-summary .impact-result p > span { line-height: 1.35; }
.impact-summary { display: flex; flex-direction: column; gap: 21px; flex: 1; max-width: 155px; }
.impact-result { display: flex; align-items: flex-start; gap: 13px; }
.impact-result > .icon { width: 27px; height: 27px; }
.impact-result strong { display: block; font-weight: 600; font-size: 14px; line-height: 1.3; }
.impact-result p > span { display: block; color: var(--text-secondary); font-size: 12px; }
.pipeline-context { margin-top: var(--pipeline-context-gap); }
.pipeline-context .context-platform-brand { flex: 0 0 auto; padding-left: 0; }
.pipeline-context .context-platform-brand .eyebrow { font-size: 14px; letter-spacing: .12em; }

/* The card moves without reflow; its stem and lower endpoint stay anchored
   to the rail. A sharp line extension bridges the three-pixel lift. */
.pipeline-stage { --stage-lift: 0px; --stem-strength: 0px; --stem-color: #5b96ff; transform: translateY(calc(-1 * var(--stage-lift))); transition: transform 200ms cubic-bezier(.2, .65, .3, 1), border-color 200ms cubic-bezier(.2, .65, .3, 1), box-shadow 200ms cubic-bezier(.2, .65, .3, 1), background-color 200ms cubic-bezier(.2, .65, .3, 1); }
.pipeline-stage > .context-stem { transform: translateY(var(--stage-lift)); background: var(--stem-color); box-shadow: 0 calc(-1 * var(--stage-lift)) 0 var(--stem-strength) var(--stem-color); transition: transform 200ms cubic-bezier(.2, .65, .3, 1), background-color 200ms cubic-bezier(.2, .65, .3, 1), box-shadow 200ms cubic-bezier(.2, .65, .3, 1); }
.pipeline-stage > .context-stem::before { top: calc(-2.5px - var(--stage-lift)); transition: top 200ms cubic-bezier(.2, .65, .3, 1); }
.pipeline-context [data-context-item] { transition: color 200ms cubic-bezier(.2, .65, .3, 1), opacity 200ms cubic-bezier(.2, .65, .3, 1); }
.pipeline-context [data-context-item] .icon { transition: color 200ms cubic-bezier(.2, .65, .3, 1); }
.pipeline-context [data-context-item="data"] { color: var(--context-data-color, var(--text-secondary)); opacity: var(--context-data-opacity, 1); }
.pipeline-context [data-context-item="data"] .icon { color: var(--context-data-color, var(--blue)); }
.pipeline-context [data-context-item="knowledge"] { color: var(--context-knowledge-color, var(--text-secondary)); opacity: var(--context-knowledge-opacity, 1); }
.pipeline-context [data-context-item="knowledge"] .icon { color: var(--context-knowledge-color, var(--blue)); }
.pipeline-context [data-context-item="code"] { color: var(--context-code-color, var(--text-secondary)); opacity: var(--context-code-opacity, 1); }
.pipeline-context [data-context-item="code"] .icon { color: var(--context-code-color, var(--blue)); }
.pipeline-context [data-context-item="learnings"] { color: var(--context-learnings-color, var(--text-secondary)); opacity: var(--context-learnings-opacity, 1); }
.pipeline-context [data-context-item="learnings"] .icon { color: var(--context-learnings-color, var(--blue)); }
.pipeline-context [data-context-item="signals"] { color: var(--context-signals-color, var(--text-secondary)); opacity: var(--context-signals-opacity, 1); }
.pipeline-context [data-context-item="signals"] .icon { color: var(--context-signals-color, var(--blue)); }
/* Keyboard focus communicates the same stage relationships as pointer hover. */
.pipeline-stage:has(:focus-visible) { --stage-lift: 3px; --stem-strength: .5px; --stem-color: var(--blue); border-color: #9dbdf3; background-color: #f8fbff; box-shadow: 0 10px 28px rgb(42 93 166 / 7%); }
.pipeline-shell:has(:where(.pipeline-stage :focus-visible)) { --context-data-opacity: .68; --context-data-color: var(--text-secondary); --context-knowledge-opacity: .68; --context-knowledge-color: var(--text-secondary); --context-code-opacity: .68; --context-code-color: var(--text-secondary); --context-learnings-opacity: .68; --context-learnings-color: var(--text-secondary); --context-signals-opacity: .68; --context-signals-color: var(--text-secondary); }
.pipeline-shell:has(:where(.pipeline-stage[data-context~="data"] :focus-visible)) { --context-data-opacity: 1; --context-data-color: var(--blue); }
.pipeline-shell:has(:where(.pipeline-stage[data-context~="knowledge"] :focus-visible)) { --context-knowledge-opacity: 1; --context-knowledge-color: var(--blue); }
.pipeline-shell:has(:where(.pipeline-stage[data-context~="code"] :focus-visible)) { --context-code-opacity: 1; --context-code-color: var(--blue); }
.pipeline-shell:has(:where(.pipeline-stage[data-context~="learnings"] :focus-visible)) { --context-learnings-opacity: 1; --context-learnings-color: var(--blue); }
.pipeline-shell:has(:where(.pipeline-stage[data-context~="signals"] :focus-visible)) { --context-signals-opacity: 1; --context-signals-color: var(--blue); }
@media (hover: hover) and (pointer: fine) {
  .pipeline-stage:hover { --stage-lift: 3px; --stem-strength: .5px; --stem-color: var(--blue); border-color: #9dbdf3; background-color: #f8fbff; box-shadow: 0 10px 28px rgb(42 93 166 / 7%); }
  /* Pointer intent takes precedence if a different stage retains keyboard focus. */
  .pipeline-shell:has(:where(.pipeline-stage:hover)) { --context-data-opacity: .68; --context-data-color: var(--text-secondary); --context-knowledge-opacity: .68; --context-knowledge-color: var(--text-secondary); --context-code-opacity: .68; --context-code-color: var(--text-secondary); --context-learnings-opacity: .68; --context-learnings-color: var(--text-secondary); --context-signals-opacity: .68; --context-signals-color: var(--text-secondary); }
  .pipeline-shell:has(:where(.pipeline-stage[data-context~="data"]:hover)) { --context-data-opacity: 1; --context-data-color: var(--blue); }
  .pipeline-shell:has(:where(.pipeline-stage[data-context~="knowledge"]:hover)) { --context-knowledge-opacity: 1; --context-knowledge-color: var(--blue); }
  .pipeline-shell:has(:where(.pipeline-stage[data-context~="code"]:hover)) { --context-code-opacity: 1; --context-code-color: var(--blue); }
  .pipeline-shell:has(:where(.pipeline-stage[data-context~="learnings"]:hover)) { --context-learnings-opacity: 1; --context-learnings-color: var(--blue); }
  .pipeline-shell:has(:where(.pipeline-stage[data-context~="signals"]:hover)) { --context-signals-opacity: 1; --context-signals-color: var(--blue); }
}
@media (prefers-reduced-motion: reduce) {
  .pipeline-stage { --stage-lift: 0px !important; }
  .pipeline-stage, .pipeline-stage > .context-stem { transform: none; }
  .pipeline-stage, .pipeline-stage > .context-stem, .pipeline-stage > .context-stem::before,
  .pipeline-context [data-context-item], .pipeline-context [data-context-item] .icon { transition: none !important; }
}
@media print {
  .pipeline-stage { --stage-lift: 0px !important; --stem-strength: 0px; transform: none; box-shadow: none; }
  .pipeline-context [data-context-item] { opacity: 1; }
}

/* ========================================================================== 
   Stage 01 — Definition & Design
   ========================================================================== */
.prototype-network { display: grid; grid-template-columns: minmax(0, 1fr) 190px minmax(0, 1fr); grid-template-rows: 1fr 1fr; column-gap: 48px; row-gap: 22px; align-items: center; min-height: 352px; position: relative; }
.main-prototype { grid-column: 2; grid-row: 1 / 3; justify-self: center; transform: perspective(850px) rotateY(-14deg) rotateZ(-2.5deg); }
.prototype-port { position: absolute; width: 0; height: 0; pointer-events: none; }
.prototype-port--ux { left: 0; top: 39%; }
.prototype-port--research { left: 0; top: 67%; }
.prototype-port--business { right: 0; top: 39%; }
.prototype-port--executive { right: 0; top: 67%; }

.stakeholder { display: flex; gap: 12px; align-items: flex-start; max-width: 225px; }
.stakeholder--ux { grid-column: 1; grid-row: 1; }
.stakeholder--business { grid-column: 3; grid-row: 1; }
.stakeholder--research { grid-column: 1; grid-row: 2; }
.stakeholder--executive { grid-column: 3; grid-row: 2; }
.stakeholder-icon { display: inline-flex; justify-content: center; align-items: center; flex: 0 0 44px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, #fcfdff, #f0f6ff); }
.stakeholder-icon .icon { width: 27px; height: 27px; }
.stakeholder h3 { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; line-height: 1.4; margin: 5px 0 7px; }
.stakeholder p { font-size: 14px; color: var(--text-secondary); line-height: 1.4; letter-spacing: -.028em; }
.design-diagram > .context-stem { margin-top: 6px; height: 27px; }
.stage--definition .title-rule { display: none; }
.stage--definition .stage-description { margin-top: 18px; }
.stage--definition .led-by-label { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }

/* ========================================================================== 
   Stage 02 — Architecture & Specification
   ========================================================================== */
.stage--architecture .stage-main { grid-template-columns: 340px minmax(0, 1fr) var(--kpi-column-width); }
.stage--architecture .stage-narrative { padding-top: 14px; }
.spec-diagram { padding-top: 18px; }
.spec-context { display: flex; flex-direction: column; align-items: center; padding-right: 113px; }
.spec-context .context-stem { height: 28px; }
.spec-context .context-pill { width: max-content; max-width: 100%; }
.spec-flow { display: grid; grid-template-columns: 91px 28px minmax(0, 1fr) 27px 205px; gap: 8px; align-items: center; min-height: 321px; position: relative; }
.prototype-input { padding: 13px 10px 10px; }
.prototype-input h3 { font-size: 12px; font-weight: 550; line-height: 1.35; letter-spacing: -.04em; margin-bottom: 13px; }

.review-window { padding: 15px; border-radius: var(--radius-md); background: var(--surface-card); box-shadow: 0 14px 36px rgb(42 93 166 / 7%); }
.window-lights { display: flex; gap: 5px; margin-bottom: 15px; }
.window-lights i { width: 6px; height: 6px; border-radius: 50%; background: #fe605c; }
.window-lights i:nth-child(2) { background: #fec757; }
.window-lights i:nth-child(3) { background: #22c576; }
.window-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.window-heading > .icon { width: 16px; height: 16px; color: #293f7a; padding: 2px; background: #f0f4fb; border-radius: 50%; }
.window-heading h3 { font-size: 13px; line-height: 1.3; letter-spacing: -.04em; font-weight: 600; }
.window-heading > span { margin-left: auto; font-size: 11px; color: var(--text-secondary); }
.participants { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.participant { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 118px; padding: 12px 4px; background: var(--surface-inset); border: 1px solid #e8effb; border-radius: 7px; }
.participant--active { border-color: #5c92fc; background: var(--surface-active); }
.participant .avatar { width: 40px; height: 40px; margin-bottom: 12px; }
.participant .avatar .icon { width: 27px; height: 27px; }
.participant h4 { font-size: 11px; font-weight: 550; line-height: 1.3; letter-spacing: -.04em; text-align: center; }
.participant-status { display: flex; align-items: center; justify-content: center; gap: 3px; color: var(--text-secondary); font-size: 11px; line-height: 1.4; margin-top: 5px; }
.participant-status .icon { width: 16px; height: 16px; }
.review-quote { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px; border: 1px solid #e7effd; border-radius: 7px; background: linear-gradient(135deg, #f6f9ff, #eef4ff); }
.review-quote .avatar { width: 32px; height: 32px; background: #e5f0ff; }
.review-quote .avatar .icon { width: 23px; height: 23px; }
.review-quote p { color: #627cb5; font-size: 12px; line-height: 1.5; letter-spacing: -.035em; }
.window-controls { display: flex; align-items: center; justify-content: center; gap: 15px; margin-top: 14px; }
.window-controls > span { width: 29px; height: 29px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #f0f4fb; }
.window-controls .icon { width: 13px; height: 13px; color: #173169; }
.window-controls .hangup { margin-left: auto; width: 35px; height: 26px; background: #fc575e; }
.window-controls .hangup .icon { color: white; width: 19px; }
.window-controls > span:first-child { margin-left: auto; }
.spec-output h3 { font-size: 16px; line-height: 1.3; font-weight: 550; letter-spacing: -.04em; margin-bottom: 9px; }
.specification--output { border: 0; padding: 0; background: transparent; box-shadow: none; }
.specification--output h4 { display: none; }
.specification--output li { min-height: 45px; padding: 9px; gap: 10px; font-size: 13px; border-radius: var(--radius-sm); }
.specification--output li .icon { width: 21px; height: 21px; }
.specification--output .count { font-size: 10px; }
.spec-diagram > .context-stem { height: 28px; }
.spec-diagram .context-pill { min-height: 53px; }

/* ========================================================================== 
   Stage 03 — Development & Validation
   ========================================================================== */
.stage--development .stage-main { grid-template-columns: 270px minmax(0, 1fr) var(--kpi-column-width); column-gap: 24px; row-gap: 24px; }
.stage--development .stage-narrative { padding-top: 12px; padding-bottom: 0; }
.stage--development .led-by { margin-top: 26px; }
.stage--development .stage-description { font-size: 20.5px; width: 315px; max-width: 315px;  line-height: 1.3; }
.stage--development .stage-narrative h2 { max-width: 390px; }
.stage--development .kpis { padding-left: 28px; grid-column: 3; grid-row: 1; }
.stage--development .kpi dd { font-size: 53px; }
.stage--development .kpi dt { font-size: 18px; }
.build-map { position: relative; padding-left: 56px; }
.oversight-band { height: 98px; position: relative; }
.engineer-oversight { position: absolute; left: 49%; top: 0; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; width: max-content; max-width: 90%; }
.engineer-oversight .avatar { width: 45px; height: 45px; }
.engineer-oversight .avatar .icon { width: 27px; height: 27px; }
.engineer-oversight h3 { font-size: 15px; font-weight: 550; line-height: 1.4; letter-spacing: -.035em; }
.engineer-oversight p { font-size: 12px; color: var(--text-secondary); letter-spacing: -.025em; line-height: 1.4; }
.oversight-label { position: absolute; top: 50px; right: 14%; color: #6684c3; font-size: 10px; background: white; padding-inline: 6px; z-index: 3; }
.build-workflow { grid-template-columns: 92px repeat(6, minmax(0, 1fr)) 135px; gap: 10px; min-height: 174px; }
.build-input { min-height: 133px; background: #fbfdff; }
.build-step { min-height: 165px; padding: 29px 5px 15px; gap: 16px; }
.build-step .flow-icon { width: 30px; height: 30px; }
.build-step h3 { font-size: 13px; line-height: 1.3; font-weight: 550; }
.build-step p { font-size: 12px; line-height: 1.4; }
.build-step.is-active { min-height: 177px; padding-top: 21px; padding-bottom: 10px; gap: 7px; }
.build-step.is-active > .node-status { opacity: .25; }
.build-step.is-active .flow-icon { margin-bottom: 4px; }
.build-step.is-active .eval-status { color: var(--blue); font-size: 10px; margin-top: 2px; }
.eval-ring { width: 27px; height: 27px; transform: rotate(-90deg); }
.eval-ring circle { stroke: #d6e4fc; fill: none; stroke-width: 3; }
.eval-ring .eval-progress { stroke: var(--blue); stroke-dasharray: 52 76; stroke-linecap: round; }
.eval-score { font-size: 12px; font-weight: 650; }
.build-increment { min-height: 174px; padding: 15px 10px; text-align: left; }
.build-increment > .increment-icon { display: none; }
.build-increment .increment-heading { display: flex; gap: 5px; align-items: flex-start; }
.build-increment h4 { font-size: 12px; }
.build-increment .version { font-size: 9px; padding: 2px 4px; margin-top: 0; border-radius: 5px; margin-left: auto; }
.build-increment .check-list { gap: 8px; margin-top: 14px; width: 100%; }
.build-increment .check-list li { font-size: 11.5px; gap: 6px; }
.build-increment .status-check { width: 13px; height: 13px; }
.build-increment .status-check .icon { width: 9px; height: 9px; }
.build-context { grid-column: 1 / 3; grid-row: 2; margin: 0; }
.build-context .context-platform { min-height: 64px; padding: 14px 22px; }
.build-context .context-platform-brand { flex-basis: 31%; gap: 15px; }
.build-context .context-platform-brand .wordmark { font-size: 27px; }
.build-context .context-platform-brand .eyebrow { font-size: 10px; }
.build-context .context-platform li { font-size: 11px; gap: 10px; padding-inline: 10px; }
.build-context .context-platform li .icon { width: 21px; height: 21px; }

/* ========================================================================== 
   Stage 04 — Operate & Evolve
   ========================================================================== */
.stage--launch .stage-main { grid-template-columns: 325px minmax(0, 1fr) var(--kpi-column-width); gap: 29px; }
.stage--launch .stage-narrative { padding-top: 0; }
.stage--launch .led-by { margin-top: 20px; }
.stage--launch .stage-narrative h2 { max-width: 100%; }
.stage--launch .stage-description { max-width: 320px; font-size: 22px; }
.stage--launch .kpis { padding-left: 28px; }
.stage--launch .kpi dd { font-size: 53px; }
.stage--launch .kpi dt { font-size: 18px; }

/* Wide composition follows the source's balanced diagram gutters. */
@media (min-width: 1500px) {
  .prototype-network { grid-template-columns: minmax(0, 1fr) 190px minmax(0, 1.1fr); }
  .stakeholder--ux, .stakeholder--research { margin-left: 16px; max-width: 200px; }
  .stakeholder--business, .stakeholder--executive { margin-left: 20px; }
  .stakeholder h3 { font-size: 10.5px; }
  .pipeline-stage h3 { min-height: 0; }
  .pipeline-stage-heading > p { min-height: 28px; }
}

/* ========================================================================== 
   Compact desktop — preserve the multi-column composition
   ========================================================================== */
@media (min-width: 1200px) and (max-width: 1499px) {
  :root { --gutter: 44px; --stage-title-size: 43px; --kpi-column-width: 175px; --role-font-size: 17px; --role-avatar-size: 44px; --role-icon-size: 26px; }
  .hero-header { gap: 50px; }
  .hero-header .brand-logo { width: 140px; }
  .primary-nav { gap: 27px; }
  .hero-main { grid-template-columns: 460px minmax(0, 1fr); }
  .hero-narrative h1 { font-size: 92px; }
  .hero-description { font-size: 23px; max-width: 410px; }
  .impact-label { right: -25px; font-size: 8px; gap: 5px; }
  .hero-visual { padding-right: 40px; }
  .hero-narrative > .eyebrow { font-size: 13px; }
  .principles { width: 510px; }
  .principles h2 { font-size: 12px; }
  .principles p { font-size: 15px; }
  .principles > div { padding-right: 17px; }
  .principles > div + div { padding-left: 20px; }
  .stage-main { grid-template-columns: 255px minmax(0, 1fr) var(--kpi-column-width); gap: 22px; }
  .stage-description { font-size: 19px; }
  .kpis { padding-left: 20px; }
  .kpi dd { font-size: 46px; }
  .kpi dt { font-size: 17px; }
  .prototype-network { grid-template-columns: minmax(0, 1fr) 160px minmax(0, 1fr); column-gap: 18px; }
  .main-prototype .phone { --phone-width: 158px; }
  .phone--mini { --phone-width: 110px; }

  .stakeholder { gap: 7px; }
  .stakeholder-icon { flex-basis: 28px; height: 32px; }
  .stakeholder-icon .icon { width: 22px; height: 22px; }
  .stakeholder h3 { font-size: 8px; }
  .stakeholder p { font-size: 11px; }
  .spec-flow { grid-template-columns: 64px 18px minmax(0, 1fr) 17px 143px; gap: 5px; }
  .prototype-input { padding: 9px 7px; }
  .prototype-input h3 { font-size: 10px; }

  .review-window { padding: 10px; }
  .window-heading h3 { font-size: 10px; }
  .window-heading { gap: 5px; }
  .window-heading > span { font-size: 9px; }
  .participant { min-height: 111px; }
  .participant h4 { font-size: 8px; white-space: normal; }
  .participant-status { font-size: 9px; }
  .review-quote { gap: 6px; padding: 8px; }
  .review-quote p { font-size: 9px; }
  .spec-output h3 { font-size: 14px; }
  .specification--output li { font-size: 10px; gap: 5px; padding: 7px; }
  .specification--output li .icon { width: 18px; height: 18px; }
  .features li { padding-inline: 23px; gap: 12px; grid-template-columns: 34px minmax(0, 1fr); }
  .features li:first-child { padding-left: 16px; }
  .features h4 { font-size: 16px; }
  .features p { font-size: 12px; }
  .pipeline-stage { padding: 18px 10px 12px; }
  :root { --overview-card-title-size: 25px; --overview-card-copy-size: 13px; }
  .overview-discovery { gap: 20px; padding-right: 0; }
  .mini-inputs { flex-basis: 68px; }
  .mini-inputs strong, .mini-context-inputs strong { font-size: 11px; }
  .overview-discovery .prototype-card { flex-basis: 126px; padding: 9px; }
  .overview-specification { gap: 17px; }
  .mini-context-inputs { flex-basis: 85px; }
  .mini-icon { flex-basis: 25px; width: 25px; border: 0; }
  .mini-icon .icon { width: 21px; height: 21px; }
  .mini-context-inputs > div { gap: 5px; }
  /* Compact input labels leave the specification UI the larger column. */
  .overview-specification .mini-context-inputs > div { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 3px 5px; }
  .overview-specification .mini-context-inputs > div > div { display: contents; }
  .overview-specification .mini-context-inputs strong { grid-column: 2; grid-row: 1; align-self: center; }
  .overview-specification .mini-icon { width: 20px; height: 20px; grid-column: 1; grid-row: 1; background: none; box-shadow: none; }
  .overview-specification .mini-icon .icon { width: 18px; height: 18px; }
  .specification--mini { padding: 8px 5px; }
  .specification--mini h4 { font-size: 9px; }
  .specification--mini li { font-size: 9px; gap: 3px; padding-inline: 3px; }
  .specification--mini .count { font-size: 8px; }
  .specification--mini li .icon { width: 12px; height: 12px; }
  .build-checklist li { font-size: 10px; gap: 7px; padding-inline: 6px; }
  .build-checklist li > .icon { width: 20px; height: 20px; }
  .overview-impact { gap: 15px; }

  .impact-result { gap: 8px; }
  .impact-result > .icon { width: 24px; height: 24px; }
  .impact-result strong { font-size: 12px; }
  .impact-result p > span { font-size: 10px; }
  .pipeline-output { font-size: 12px; }
  .context-platform { gap: 20px; padding-inline: 20px; }
  .context-platform-brand { gap: 12px; }
  .context-platform-brand .wordmark { font-size: 25px; }
  .context-platform-brand .eyebrow { font-size: 9px; }
  .context-platform li { font-size: 11px; gap: 10px; }
  .stage--development .stage-main { grid-template-columns: 236px minmax(0, 1fr) var(--kpi-column-width); gap: 18px; }
  .stage--development .stage-narrative h2 { max-width: 320px; }
  .stage--development .kpis { padding-left: 20px; }
  .stage--development .kpi dd { font-size: 46px; }
  .stage--development .kpi dt { font-size: 17px; }
  .build-workflow { grid-template-columns: 58px repeat(6, minmax(0, 1fr)) 94px; gap: 7px; }
  .build-step { padding-inline: 3px; gap: 15px; }
  .build-step h3 { font-size: 10px; }
  .build-step p { font-size: 10px; }
  .build-step .flow-icon { width: 26px; height: 26px; }
  .node-status { right: 6px; }
  .build-step .status-check, .build-step .status-pending { width: 12px; height: 12px; }
  .build-step.is-active { gap: 8px; }
  .build-step.is-active .eval-status { font-size: 8px; }
  .build-input { padding-inline: 3px; }
  .build-input h3 { font-size: 10px; }
  .build-increment { padding-inline: 7px; }
  .build-increment .increment-heading { flex-direction: column; }
  .build-increment .version { margin-left: 0; }
  .build-increment h4 { font-size: 10px; }
  .build-increment .check-list li { font-size: 9px; gap: 4px; }
  .build-increment .status-check { width: 10px; height: 10px; }
  .engineer-oversight h3 { font-size: 12px; }
  .engineer-oversight p { font-size: 10px; }
  .build-context { margin: 0; }
  .build-context .context-platform { padding-inline: 14px; gap: 15px; }
  .build-context .context-platform-brand .wordmark { font-size: 23px; }
  .build-context .context-platform-brand .eyebrow { font-size: 8px; }
  .build-context .context-platform li { font-size: 10px; gap: 7px; padding-inline: 7px; }
  .stage--launch .stage-main { grid-template-columns: 252px minmax(0, 1fr) var(--kpi-column-width); gap: 24px; }
  .stage--launch .stage-narrative h2 { max-width: 380px; }
  .stage--launch .kpis { padding-left: 20px; }
  .stage--launch .kpi dd { font-size: 46px; }
  .stage--launch .kpi dt { font-size: 17px; }

  .stage--architecture .stage-main { grid-template-columns: 255px minmax(0, 1fr) var(--kpi-column-width); }
  .stage--development .stage-description { width: 255px; }
  .build-map { padding-left: 46px; }
  .build-canvas > .stage-context { --context-inset-start: 46px; }
  .spec-context { padding-right: 78px; }

  .context-rail { gap: 14px; }
  .context-types { font-size: 8px; gap: 9px; }
  .context-rail > .eyebrow { font-size: 9px; }
  .section-footer .text-link { font-size: 14px; gap: 12px; }
}

/* ========================================================================== 
   Tablet — reflow secondary regions, keep diagrams readable
   ========================================================================== */
@media (max-width: 1199px) {
  .context-platform-brand { padding-left: 0; }
  :root { --gutter: 32px; --stage-title-size: 43px; --role-font-size: 16px; --role-avatar-size: 44px; --role-icon-size: 26px; }
  .hero-header { gap: 45px; min-height: 88px; }
  .hero-header .brand-logo { width: 126.667px; }
  .hero-header .wordmark { font-size: 38px; }
  .primary-nav { gap: 24px; }
  .primary-nav > a, .primary-nav > .product-stages-menu > .product-stages-trigger { font-size: 10px; letter-spacing: .11em; }
  .brand-signature { gap: 12px; font-size: 10px; }
  .hero-main { grid-template-columns: 42% minmax(0, 1fr); padding-block: 72px; }
  .hero-narrative h1 { font-size: clamp(64px, 7.5vw, 88px); }
  .hero-narrative > .eyebrow { font-size: 12px; margin-bottom: 30px; }
  .hero-description { font-size: 22px; }
  .principles { margin-top: 42px; max-width: calc(100% + 45px); }
  .principles > div { padding-right: 17px; }
  .principles > div + div { padding-left: 18px; }
  .principles h2 { font-size: 10px; }
  .principles p { font-size: 13px; }
  .hero-visual { margin-right: -6px; margin-left: 0; padding-right: 21px; }
  .impact-label { font-size: 8px; right: -4px; gap: 7px; }
  .stage-shell { padding-top: 22px; padding-bottom: 32px; }
  .step-label { max-width: 170px; }
  .stage-main, .stage--development .stage-main, .stage--launch .stage-main { grid-template-columns: 260px minmax(0, 1fr); gap: 30px; padding-block: 36px 0; }
  .stage-narrative, .stage--development .stage-narrative { align-self: center; padding-bottom: 0; }
  .stage-narrative h2, .stage--development .stage-narrative h2 { max-width: 350px; }
  .stage--launch .stage-narrative h2 { max-width: 385px; }
  .stage-description { font-size: 19px; }
  .stage--launch .stage-description { max-width: 265px; }
  .stage--development .stage-description { width: auto; max-width: 295px; font-size: 19px; }
  .led-by { margin-top: 28px; }
  .led-by-label { font-size: 17px; }
  .stage-diagram { align-self: center; }
  .kpis, .stage--development .kpis, .stage--launch .kpis { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); padding: 18px 0 0; margin: 0; }
  .kpis > .eyebrow { margin-bottom: 17px; }
  .kpis dl { display: grid; grid-template-columns: repeat(3, 1fr); }
  .kpi, .kpi:first-child, .kpi:last-child { padding: 0 25px; border-bottom: 0; }
  .kpi:first-child { padding-left: 0; }
  .kpi + .kpi { border-left: 1px solid var(--line); }
  .kpi dd, .stage--development .kpi dd, .stage--launch .kpi dd { font-size: 46px; }
  .kpi dt, .stage--development .kpi dt, .stage--launch .kpi dt { font-size: 17px; max-width: 250px; }
  .kpi small { font-size: 13px; }
  .features { margin-top: 30px; }
  .features > .eyebrow { margin-bottom: 20px; }
  .features li { padding-inline: 20px; gap: 12px; grid-template-columns: 33px minmax(0, 1fr); }
  .features li:first-child { padding-left: 0; }
  .features li:last-child { padding-right: 0; }
  .feature-number { font-size: 21px; }
  .features h4 { font-size: 16px; }
  .features p { font-size: 12px; }
  .pipeline-shell { padding-block: 32px; }
  .pipeline-header { margin-bottom: 35px; }
  :root { --overview-title-size: 55px; }
  :root { --overview-subtitle-size: 20px; }
  .pipeline-shell { --pipeline-card-gap: 32px; }
  .pipeline-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .pipeline-stage { padding: 20px 14px 14px; }
  :root { --overview-card-title-size: 28px; }
  .pipeline-stage h3 { min-height: auto; }
  .pipeline-stage-heading > p { min-height: 42px; }
  .pipeline-visual { min-height: 287px; }
  .pipeline-stage > .context-stem { display: none; }
  .overview-discovery { justify-content: space-around; gap: 30px; }
  .mini-inputs { flex-basis: 70px; }
  .overview-discovery .prototype-card { flex-basis: 148px; }
  .overview-specification { gap: 20px; justify-content: space-around; }
  .mini-context-inputs { flex-basis: 106px; }
  .specification--mini { max-width: 200px; padding: 8px; }
  .specification--mini h4 { font-size: 11px; }
  .specification--mini li { min-height: 35px; font-size: 11px; }
  .overview-build .build-checklist { max-width: 370px; margin-inline: auto; }
  .overview-impact { gap: 30px; }
  .pipeline-context { margin-top: 29px; }
  .context-platform { flex-wrap: wrap; gap: 20px; padding: 18px 20px; }
  .context-platform-brand { flex-basis: auto; }
  .context-platform-brand .wordmark { font-size: 27px; }
  .context-platform-brand .eyebrow { font-size: 10px; }
  .context-platform ul { min-width: 400px; }
  .context-platform li { font-size: 11px; gap: 9px; }
  .prototype-network { grid-template-columns: minmax(0, 1fr) 160px minmax(0, 1fr); gap: 18px 15px; min-height: 353px; }

  .stakeholder { flex-direction: column; gap: 5px; }
  .stakeholder-icon { flex-basis: auto; width: 32px; height: 34px; }
  .stakeholder-icon .icon { width: 23px; height: 23px; }
  .stakeholder h3 { font-size: 8px; margin-bottom: 5px; }
  .stakeholder p { font-size: 11px; }
  .context-pill { gap: 14px; padding-inline: 22px; }
  .context-pill div > span { font-size: 11px; }
  .context-pill--prototype { font-size: 12px; }
  .diagram-scroll { overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; scrollbar-width: thin; scrollbar-color: #c0d6fc transparent; padding: 4px 3px 10px; margin-inline: -3px; }
  .spec-canvas { min-width: 615px; }
  .spec-flow { grid-template-columns: 73px 22px minmax(0, 1fr) 20px 163px; gap: 7px; }
  .review-window { padding: 12px; }
  .participant h4 { font-size: 9px; }
  .spec-output h3 { font-size: 15px; }
  .specification--output li { font-size: 11px; gap: 7px; }
  .spec-diagram > .context-stem { height: 20px; }
  .build-canvas { min-width: 785px; }
  .build-workflow { grid-template-columns: 73px repeat(6, minmax(0, 1fr)) 118px; gap: 10px; }
  .build-step h3 { font-size: 12px; }
  .build-context { grid-column: 1 / -1; grid-row: 3; margin: 0; }
  .stage--development .kpis { grid-column: 1 / -1; grid-row: 2; }
  .build-context .context-platform { padding: 15px 20px; }
  .build-context .context-platform-brand { flex-basis: auto; }
  .stage--development .features { margin-top: 18px; }

  .stage--launch .features { margin-top: 20px; padding-bottom: 32px; }
}

/* ========================================================================== 
   Narrow tablet: diagram below narrative instead of an undersized composition
   ========================================================================== */
@media (min-width: 768px) and (max-width: 949px) {
  .hero-header .brand-logo { width: 106.667px; }
  .hero-header { gap: 30px; }
  .hero-header .brand-signature { gap: 8px; font-size: 9px; }
  .primary-nav { gap: 20px; }
  .primary-nav > a, .primary-nav > .product-stages-menu > .product-stages-trigger { font-size: 9px; }
  .hero-main { grid-template-columns: 45% minmax(0, 1fr); }
  .hero-narrative h1 { font-size: 64px; }
  .hero-description { font-size: 20px; }
  .hero-narrative > .eyebrow { font-size: 10px; }
  .principles { max-width: calc(100% + 70px); width: 410px; }
  .hero-visual { margin-left: -8px; margin-right: 0; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .hero-visual.hero-visual--ribbon { transform: translateY(-26px); }
  .main-prototype .phone { --phone-width: 180px; }
  .stage-main, .stage--development .stage-main, .stage--launch .stage-main { grid-template-columns: 1fr; gap: 30px; }
  .stage-narrative { display: grid; grid-template-columns: 1fr 1fr; column-gap: 30px; }
  .stage-narrative > .eyebrow { grid-column: 1; }
  .stage-narrative h2 { grid-column: 1; grid-row: 2 / 5; }
  .stage-narrative .title-rule { display: none; }
  .stage-description, .stage--development .stage-description, .stage--launch .stage-description { width: auto; grid-column: 2; grid-row: 1 / 3; max-width: none; }
  .led-by { grid-column: 2; grid-row: 3; margin-top: 20px; }
  .stage-diagram { max-width: 100%; width: 100%; }
  .stage--development .kpis, .build-context { grid-column: 1; grid-row: auto; }
  .prototype-network { max-width: 760px; margin-inline: auto; grid-template-columns: 1fr 190px 1fr; gap: 30px; }

  .stakeholder { flex-direction: row; gap: 10px; }
  .stakeholder h3 { font-size: 9px; }
  .stakeholder p { font-size: 13px; }
  .spec-canvas { min-width: 660px; }

  .stage--architecture .stage-main { grid-template-columns: 1fr; }
  .stage--definition .stage-description { margin-top: 0; }
  .stage-narrative, .stage--architecture .stage-narrative, .stage--development .stage-narrative { padding-top: 0; }
  .spec-diagram { padding-top: 0; }
  .spec-context { padding-right: 100px; }
  .build-map { padding-left: 0; }
  .build-canvas > .stage-context { --context-inset-start: 0px; }
  .context-rail { gap: 14px; margin-top: 24px; flex-wrap: wrap; padding-block: 15px; }
  .context-rail .rail-line { min-width: 35px; }
  .context-rail > .eyebrow:last-child { display: none; }
  .context-types { font-size: 8px; gap: 9px; }
  .section-footer { margin-top: 24px; }
  .section-footer .text-link { font-size: 14px; gap: 9px; max-width: 42%; }
  .features p { font-size: 14px; }
}

/* ========================================================================== 
   Mobile — a real reflow, not a scaled-down desktop screenshot
   ========================================================================== */
@media (max-width: 767px), (max-width: 1199px) and (max-height: 500px) and (pointer: coarse) {
  :root { --gutter: 20px; --stage-title-size: clamp(38px, 8.65vw, 50px);
    --role-font-size: 15px; --role-avatar-size: 40px;
    --role-icon-size: 25px; --role-text-gap: 10px; }
  html { scrollbar-gutter: auto; }
  .screen { min-height: auto; }
  .hero-shell { min-height: 100svh; padding-top: 0; }
  .hero-header { flex-wrap: wrap; gap: 0; min-height: 80px; padding-block: 20px; }
  .hero-header .wordmark { font-size: 35px; }
  .hero-header > .brand-signature { display: none; }
  .menu-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-left: auto; border: 0; color: var(--text-primary); background: transparent; padding: 8px 0 8px 8px; font-size: 12px; }
  .menu-toggle .icon { width: 20px; height: 20px; }
  .primary-nav { flex-basis: 100%; display: none; flex-wrap: wrap; gap: 12px 28px; padding-top: 24px; padding-bottom: 4px; }
  .primary-nav.is-open { display: flex; }
  .primary-nav > a, .primary-nav > .product-stages-menu > .product-stages-trigger { padding-block: 7px; font-size: 10px; min-height: 32px; }
  .primary-nav > a::after, .primary-nav > .product-stages-menu > .product-stages-trigger::after { bottom: 0; }
  .hero-main { display: flex; flex-direction: column; gap: 26px; padding-block: 44px 28px; }
  .hero-narrative { width: 100%; padding-bottom: 0; }
  .hero-narrative > .eyebrow { font-size: 10px; margin-bottom: 25px; letter-spacing: .16em; }
  .hero-narrative h1 { font-size: clamp(64px, 12.4vw, 88px); letter-spacing: -.065em; line-height: .99; }
  .hero-description { font-size: 20px; max-width: 380px; margin-top: 24px; line-height: 1.42; }
  .principles { width: 100%; max-width: 465px; margin-top: 31px; grid-template-columns: 1fr 1.08fr 1fr; }
  .principles > div { padding-right: 12px; }
  .principles > div + div { padding-left: 13px; }
  .principles h2 { font-size: 9px; letter-spacing: .09em; margin-bottom: 5px; }
  .principles p { font-size: 12px; line-height: 1.4; }
  .hero-visual { width: 100%; max-width: 580px; padding-right: 52px; margin: 0; }
  .hero-visual.hero-visual--ribbon { max-width: 620px; margin-inline: auto; transform: none; }
  .impact-label { right: 0; font-size: 7px; gap: 4px; }
  .impact-label span { font-size: 14px; }
  .stage-shell { min-height: auto; padding-top: 24px; padding-bottom: 32px; }
  .brand-signature { font-size: 9px; gap: 11px; letter-spacing: .18em; }
  .brand-signature .icon { width: 16px; height: 16px; }
  .step-label { max-width: none; }
  .stage-main, .stage--development .stage-main, .stage--launch .stage-main { display: flex; flex-direction: column; align-items: stretch; gap: 32px; min-height: 0; padding: 37px 0 0; }
  .stage-narrative, .stage--development .stage-narrative { align-self: stretch; }
  .stage-narrative > .eyebrow { font-size: 11px; margin-bottom: 12px; }
  .stage-narrative h2, .stage--development .stage-narrative h2, .stage--launch .stage-narrative h2 { width: auto; max-width: 100%; line-height: 1.04; letter-spacing: -.047em; }
  .title-rule { margin-block: 16px 14px; width: 26px; }
  .stage-description, .stage--development .stage-description, .stage--launch .stage-description { max-width: 490px; font-size: 19px; line-height: 1.4; }
  .led-by { margin-top: 24px; }
  .led-by-label { font-size: 15px; margin-bottom: 10px; }
  .avatar { width: 42px; height: 42px; }
  .avatar .icon { width: 26px; height: 26px; }
  .stage-diagram { width: 100%; }
  .diagram-scroll { padding-top: 8px; padding-bottom: 15px; }
  .context-stem { height: 23px; }
  .context-pill { width: max-content; max-width: 100%; min-height: 56px; padding: 10px 15px; gap: 12px; border-radius: 24px; }
  .context-pill > .icon { width: 25px; height: 25px; }
  .context-pill p { font-size: 13px; }
  .context-pill div > span { font-size: 10px; line-height: 1.5; }
  .context-pill--prototype { font-size: 12px; padding-inline: 17px; min-height: 48px; }
  .kpis, .stage--development .kpis, .stage--launch .kpis { margin: 0; padding-top: 20px; }
  .kpis > .eyebrow { font-size: 10px; margin-bottom: 19px; }
  .kpi, .kpi:first-child, .kpi:last-child { padding-inline: 12px; }
  .kpi:first-child { padding-left: 0; }
  .kpi:last-child { padding-right: 0; }
  .kpi dd, .stage--development .kpi dd, .stage--launch .kpi dd { font-size: clamp(31px, 8.1vw, 43px); letter-spacing: -.06em; margin-bottom: 5px; }
  .kpi dt, .stage--development .kpi dt, .stage--launch .kpi dt { font-size: 12px; line-height: 1.4; letter-spacing: -.025em; }
  .kpi small { font-size: 10px; margin-top: 5px; }
  .features, .stage--launch .features, .stage--development .features { margin-top: 30px; padding-top: 17px; border-top: 1px solid var(--line); }
  .stage--development .features { padding-bottom: 20px; }
  .stage--launch .features { margin-top: 22px; padding-bottom: 32px; }
  .features > .eyebrow, .stage--development .features > .eyebrow { font-size: 10px; margin-bottom: 23px; }
  .features ol { display: flex; flex-direction: column; gap: 23px; }
  .features li, .features li:first-child, .features li:last-child { padding: 0; grid-template-columns: 37px minmax(0, 1fr); gap: 14px; border-left: 0; }
  .features li + li { border-top: 1px solid #e8effb; border-left: 0; padding-top: 22px; }
  .feature-number { font-size: 22px; }
  .feature-number::after { width: 23px; height: 2px; margin-top: 8px; }
  .features h4 { font-size: 17px; margin-bottom: 7px; }
  .features p { font-size: 14px; line-height: 1.5; }
  .pipeline-shell { padding-top: 34px; padding-bottom: 32px; }
  .pipeline-header { margin-bottom: 34px; }
  :root { --overview-title-size: clamp(41px, 9.5vw, 62px); }
  :root { --overview-subtitle-size: 18px; }
  .pipeline-grid { display: flex; flex-direction: column; gap: 31px; }
  .pipeline-stage { display: flex; flex-direction: column; padding: 20px 16px 16px; }
  .pipeline-stage-heading > .feature-number { font-size: 22px; margin-bottom: 18px; }
  :root { --overview-card-title-size: 28px; --overview-card-copy-size: 14px; --overview-card-label-size: 11px; }
  .pipeline-stage h3 { max-width: 390px; line-height: 1.1; min-height: 0; }
  .pipeline-stage-heading > p { min-height: 0; margin-top: 8px; }
  .pipeline-visual { min-height: 280px; margin-top: 15px; }
  .pipeline-output { font-size: 14px; margin-top: var(--pipeline-caption-gap); }
  .overview-discovery { justify-content: space-between; padding-inline: 5px; gap: 48px; }
  .mini-inputs { flex-basis: 120px; padding-block: 8px; }
  .mini-inputs strong { font-size: 13px; }
  .overview-discovery .prototype-card { flex-basis: 148px; padding: 12px; }
  .overview-specification { gap: 30px; justify-content: space-between; }
  .mini-context-inputs { flex-basis: 144px; gap: 23px; }
  .mini-context-inputs strong { font-size: 12px; }
  .mini-icon { flex-basis: 32px; }
  .specification--mini { padding: 9px 7px; }
  .specification--mini li { font-size: 10px; gap: 5px; }
  .specification--mini h4 { font-size: 10px; }
  .overview-build .build-checklist { max-width: none; }
  .build-checklist li { font-size: 13px; padding: 8px 10px; }
  .overview-impact { justify-content: center; gap: 33px; }

  .impact-summary { gap: 22px; max-width: 150px; }
  .impact-result strong { font-size: 16px; }
  .impact-result p > span { font-size: 13px; }
  .pipeline-context { margin-top: 25px; }
  .context-platform, .build-context .context-platform { flex-direction: column; flex-wrap: nowrap; gap: 20px; padding: 22px 15px; }
  .context-platform-brand, .build-context .context-platform-brand { flex-basis: auto; gap: 15px; }
  .context-platform-brand .wordmark, .build-context .context-platform-brand .wordmark { font-size: 26px; }
  .context-platform-brand .eyebrow, .build-context .context-platform-brand .eyebrow { font-size: 9px; }
  .context-platform ul { min-width: 0; width: 100%; flex-wrap: wrap; gap: 15px 0; justify-content: center; }
  .context-platform li, .build-context .context-platform li { flex: 0 0 33.333%; font-size: 11px; gap: 7px; padding-inline: 8px; border: 0; }
  .context-platform li .icon { width: 21px; height: 21px; }
  .prototype-network { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto; column-gap: 23px; row-gap: 27px; min-height: 0; }
  .main-prototype { grid-column: 1 / -1; grid-row: 1; margin-block: 5px 8px; }
  .main-prototype .phone { --phone-width: 196px; }
  .phone--mini { --phone-width: 132px; }

  .stakeholder--ux { grid-column: 1; grid-row: 2; }
  .stakeholder--business { grid-column: 2; grid-row: 2; }
  .stakeholder--research { grid-column: 1; grid-row: 3; }
  .stakeholder--executive { grid-column: 2; grid-row: 3; }
  .stakeholder { flex-direction: column; gap: 8px; align-self: start; max-width: none; }
  .stakeholder-icon { width: 35px; height: 35px; }
  .stakeholder-icon .icon { width: 25px; height: 25px; }
  .stakeholder h3 { font-size: 9px; letter-spacing: .055em; margin-block: 0 6px; min-height: 13px; }
  .stakeholder p { font-size: 13px; line-height: 1.5; }
  .prototype-network > .connector-layer { display: none; }
  .design-diagram > .context-stem { margin-top: 24px; height: 23px; }
  .spec-canvas { min-width: 680px; }
  .spec-flow { grid-template-columns: 74px 25px minmax(0, 1fr) 23px 174px; }
  .participant h4 { font-size: 11px; }
  .specification--output li { font-size: 12px; }
  .spec-diagram > .context-stem { margin-top: 1px; }
  .build-canvas { min-width: 845px; }
  .build-step h3 { font-size: 13px; }
  .build-step p { font-size: 12px; }
  .build-step .status-check, .build-step .status-pending { width: 14px; height: 14px; }
  .build-increment .check-list li { font-size: 10px; }
  .build-context { margin-top: 0; }

  .stage--architecture .stage-main { grid-template-columns: 1fr; }
  .stage-narrative, .stage--architecture .stage-narrative, .stage--development .stage-narrative { padding-top: 0; }
  .stage-description, .stage--development .stage-description { width: auto; }
  .spec-diagram { padding-top: 0; }
  .spec-context { padding-right: 0; }
  .build-map { padding-left: 0; }
  .context-rail { display: grid; grid-template-columns: auto 1fr; gap: 15px; padding-block: 20px; margin-top: 24px; }
  .context-rail .wordmark { font-size: 22px; }
  .context-rail > .eyebrow { font-size: 9px; }
  .context-rail .rail-line, .context-rail > .eyebrow:last-child { display: none; }
  .context-types { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; font-size: 8px; white-space: normal; }
  .section-footer { min-height: 108px; padding-block: 20px 14px; margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 22px 15px; }
  .section-footer .text-link { font-size: 13px; gap: 8px; max-width: none; }
  .section-footer .text-link .icon { width: 19px; height: 19px; }
  .section-footer .next-link { grid-column: 2; justify-self: end; }
  .impact-summary.card { padding: 18px 12px; }
}

/* Very small screens and motion preferences */
@media (max-width: 374px) {
  :root { --gutter: 16px; }
  .hero-narrative h1 { font-size: 59px; }
  .hero-description { font-size: 19px; }
  .principles h2 { font-size: 8px; }
  .principles p { font-size: 11px; }
  .principles > div + div { padding-left: 10px; }
  .kpi dd, .stage--development .kpi dd, .stage--launch .kpi dd { font-size: 29px; }
  .kpi dt, .stage--development .kpi dt, .stage--launch .kpi dt { font-size: 11px; }
  .overview-discovery { gap: 30px; }
  .overview-discovery .prototype-card { flex-basis: 130px; }
  .overview-specification { gap: 23px; }
  .mini-context-inputs { flex-basis: 126px; }
  .mini-context-inputs > div { gap: 5px; }
  .mini-icon { flex-basis: 26px; border: 0; }
  .specification--mini li { font-size: 9px; }
  .specification--mini h4 { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media (prefers-contrast: more) {
  :root { --text-secondary: #345bab; --line: #8ba7d8; }
  .stage-description, .features p, .stakeholder p, .review-quote p,
  .engineer-oversight p, .oversight-label, .hero-description, .principles p {
    color: #345bab;
  }
}
@media print {
  :root { --gutter: 24px; }
  .screen, .hero-screen, body[data-view="detail"] .screen[data-stage] { min-height: auto; break-after: page; }
  .hero-shell, .stage-shell, .pipeline-shell { min-height: auto; }
  .hero-visual.hero-visual--ribbon { transform: none; }
  .menu-toggle, .skip-link { display: none; }
  .diagram-scroll { overflow: visible; }
  a { color: inherit; }
}

/* Laptop windows just above the short-screen breakpoint also need room for
   the new card borders, outcome bands and complete shared-context footer. */
@media screen and (min-width: 1200px) and (max-width: 1599px) and (min-height: 861px) and (max-height: 940px) {
  /* Balance the content row beneath the shared website header. */
  .stage-main { padding-block: 7px; }
  .pipeline-shell { --pipeline-context-gap: 30px; padding-block: 24px 20px; }
  .pipeline-header { margin-bottom: 18px; }
  .pipeline-stage { padding-block: 14px 10px; }
  .pipeline-stage-heading { margin-bottom: 10px; }
  .pipeline-stage-heading > p { min-height: 0; }
  .pipeline-output { min-height: 48px; padding-block: 10px; margin-top: 16px; }
}

/* ========================================================================== 
   Height-aware desktop layout
   Only shorter desktop windows receive these overrides. Large-monitor, tablet
   and mobile rules remain untouched. There is no page zoom, transform scaling,
   fixed-height clipping or hidden content. At very small heights, normal
   document scrolling remains available instead of shrinking text indefinitely.
   ========================================================================== */
@media screen and (min-width: 1200px) and (max-height: 860px) {
  :root {
    --stage-title-size: clamp(38px, 5.5vh, 46px);
    --role-font-size: 16px;
    --role-avatar-size: 38px;
    --role-icon-size: 24px;
    --role-text-gap: 10px;
    --pipeline-caption-gap: 16px;
  }

  /* Header and vertical rhythm: preserve the existing horizontal grid. */
  .stage-shell { padding-top: 16px; padding-bottom: 8px; }
  .stage-main,
  .stage--definition .stage-main,
  .stage--architecture .stage-main,
  .stage--development .stage-main,
  .stage--launch .stage-main {
    padding-block: 20px;
  }
  .stage-narrative,
  .stage--architecture .stage-narrative,
  .stage--development .stage-narrative,
  .stage--launch .stage-narrative { padding-top: 8px; }
  .stage-narrative > .eyebrow { margin-bottom: 10px; }
  .stage-description,
  .stage--development .stage-description,
  .stage--launch .stage-description { font-size: 18px; line-height: 1.32; }
  .stage--definition .stage-description { margin-top: 14px; }
  .title-rule { margin-block: 10px 8px; }
  .led-by, .stage--development .led-by, .stage--launch .led-by { margin-top: 18px; }
  .led-by-label { font-size: 14px; margin-bottom: 8px; }
  .roles { gap: 6px; }

  /* Reserve a genuine feature/footer band, rather than hiding it below a
     desktop-only minimum-height diagram. Font sizes stay readable. */
  .features, .stage--development .features, .stage--launch .features {
    margin-top: 4px; padding-top: 10px; padding-bottom: 14px; flex-shrink: 0;
  }
  .features > .eyebrow, .stage--development .features > .eyebrow { margin-bottom: 12px; }
  .features li { padding-inline: 22px; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; }
  .features li:first-child { padding-left: 22px; }
  .features h4 { font-size: 16px; line-height: 1.25; margin-bottom: 6px; }
  .features p { font-size: 13px; line-height: 1.35; }
  .feature-number { font-size: 21px; }
  .feature-number::after { margin-top: 7px; }
  .context-rail { min-height: 40px; margin-top: 4px; flex-shrink: 0; }
  .section-footer { min-height: 44px; padding-block: 10px 4px; flex-shrink: 0; }
  .section-footer .text-link { font-size: 14px; }
  .stage-pagination { margin-top: 16px; padding-block: 0; }

  .kpis, .stage--development .kpis, .stage--launch .kpis { margin-top: 4px; }
  .kpis > .eyebrow { margin-bottom: 14px; }
  .kpi { padding-block: 12px; }
  .kpi dd, .stage--development .kpi dd, .stage--launch .kpi dd { font-size: 44px; }
  .kpi dt, .stage--development .kpi dt, .stage--launch .kpi dt { font-size: 16px; line-height: 1.3; }
  .kpi small { font-size: 12px; }

  /* Definition: the live device frame keeps its own aspect ratio. */
  .prototype-network { min-height: 306px; row-gap: 16px; }
  .main-prototype .phone { --phone-width: clamp(150px, 21vh, 170px); }
  .design-diagram > .context-stem { height: 20px; margin-top: 6px; }
  .context-pill, .spec-diagram .context-pill {
    min-height: 46px; padding-block: 8px;
  }
  .context-pill p { font-size: 14px; }
  .context-pill div > span { font-size: 12px; }
  .context-pill--prototype { min-height: 44px; font-size: 12px; }

  /* Specification: reduce panel chrome, not the specification information. */
  .spec-diagram { padding-top: 4px; }
  .spec-flow { min-height: 278px; }
  .review-window { padding: 12px; }
  .window-lights { margin-bottom: 10px; }
  .window-heading { margin-bottom: 12px; }
  .participant { min-height: 98px; padding-block: 8px; }
  .participant .avatar { width: 34px; height: 34px; margin-bottom: 8px; }
  .review-quote { margin-top: 10px; padding-block: 8px; }
  .window-controls { margin-top: 10px; }
  .spec-context .context-stem { height: 20px; }
  .specification--output li { min-height: 40px; padding-block: 7px; }

  /* Development: keep the workflow, metrics, shared context AND features. */
  .stage--development .stage-main { row-gap: 14px; }
  .oversight-band { height: 80px; }
  .oversight-label { top: 46px; }
  .engineer-oversight .avatar { width: 38px; height: 38px; }
  .build-workflow { min-height: 154px; }
  .build-step { min-height: 146px; padding-top: 25px; padding-bottom: 10px; gap: 10px; }
  .build-step.is-active { min-height: 158px; padding-top: 18px; gap: 5px; }
  .build-input { min-height: 118px; gap: 14px; }
  .build-increment { min-height: 156px; padding-block: 12px; }
  .build-context .context-platform { min-height: 54px; padding-block: 10px; }

  /* Pipeline: all four stages and the context platform form one viewport. */
  .pipeline-shell { min-height: 100svh; padding-top: 22px; padding-bottom: 20px; }
  .pipeline-header { margin-bottom: 18px; }
  :root { --overview-title-size: 54px; }
  :root { --overview-subtitle-size: 20px; }
  .pipeline-description, .platform-architecture .pa-subtitle { margin-top: 6px; }
  .stage-context > .context-stem { height: 18px; }
  .stage-context .context-platform { padding-block: 10px; gap: 10px 16px; }
  .pipeline-stage { padding-block: 14px 10px; }
  .pipeline-stage-heading { margin-bottom: 10px; }
  .pipeline-stage-heading > .feature-number { font-size: 21px; margin-bottom: 10px; }
  :root { --overview-card-title-size: 24px; --overview-card-copy-size: 13px; --overview-card-label-size: 11px; }
  .pipeline-stage-heading .eyebrow { margin-bottom: 4px; }
  .pipeline-stage h3 { min-height: 52px; }
  .pipeline-stage-heading > p { min-height: 0; margin-top: 4px; }
  .pipeline-output { min-height: 48px; padding-block: 10px; }
  .pipeline-visual { min-height: 238px; }
  .mini-inputs { gap: 20px; }
  .mini-context-inputs { gap: 20px; }
  .build-checklist { gap: 4px; padding: 6px; }
  .build-checklist li { padding-block: 5px; }
  .build-checklist li > .icon { width: 20px; height: 20px; }
  .phone--mini { --phone-width: 118px; }
  .impact-summary { gap: 16px; }
  .pipeline-shell { --pipeline-context-gap: 30px; }
  .pipeline-context .context-platform { min-height: 58px; padding-block: 11px; }

  /* The landing page follows the same height budget. */
  .hero-header { min-height: 78px; }
  .hero-main { padding-block: 26px; }
  .hero-narrative h1 { font-size: clamp(78px, 11vh, 98px); }
  .hero-narrative > .eyebrow { margin-bottom: 25px; }
  .hero-description { font-size: 23px; margin-top: 24px; }
  .principles { margin-top: 32px; }
}

/* Narrower laptop windows: keep the original compact-desktop column sizes. */
@media screen and (min-width: 1200px) and (max-width: 1499px) and (max-height: 860px) {
  .phone--mini { --phone-width: 110px; }
  :root { --overview-card-title-size: 22px; --overview-card-copy-size: 12px; }
  .pipeline-stage h3 { min-height: 48px; }
  .pipeline-stage-heading > p { min-height: 0; }
  .review-window { padding: 10px; }
}

/* Short laptop viewports, including common 125% display-scaling configurations.
   Compact spacing reaches a floor; anything smaller can scroll naturally. */
@media screen and (min-width: 1200px) and (max-height: 760px) {
  .hero-visual.hero-visual--ribbon { transform: translateY(-26px); }
  :root { --stage-title-size: 38px; --role-avatar-size: 34px;
    --role-icon-size: 22px; --pipeline-caption-gap: 14px; }
  .stage-shell { padding-top: 10px; padding-bottom: 6px; }
  .stage-main, .stage--definition .stage-main, .stage--architecture .stage-main,
  .stage--development .stage-main, .stage--launch .stage-main { padding-block: 14px; }
  .stage--development .stage-main { row-gap: 10px; }
  .stage-narrative, .stage--architecture .stage-narrative,
  .stage--development .stage-narrative, .stage--launch .stage-narrative { padding-top: 2px; }
  .stage-description, .stage--development .stage-description,
  .stage--launch .stage-description { font-size: 17px; }
  .stage-narrative > .eyebrow { font-size: 11px; margin-bottom: 8px; }
  .stage--definition .stage-description { margin-top: 12px; }
  .led-by, .stage--development .led-by, .stage--launch .led-by { margin-top: 14px; }
  .led-by-label { margin-bottom: 6px; }
  .roles { gap: 4px; }
  .kpis > .eyebrow { font-size: 11px; margin-bottom: 10px; }
  .kpi { padding-block: 10px; }
  .kpi dd, .stage--development .kpi dd, .stage--launch .kpi dd { font-size: 40px; }
  .kpi dt, .stage--development .kpi dt, .stage--launch .kpi dt { font-size: 15px; }
  .kpi small { font-size: 11px; }
  .prototype-network { min-height: 280px; row-gap: 12px; }
  .main-prototype .phone { --phone-width: 145px; }
  .design-diagram > .context-stem, .spec-context .context-stem { height: 17px; }
  .context-pill, .spec-diagram .context-pill { min-height: 42px; padding-block: 6px; }
  .context-pill--prototype { min-height: 40px; }
  .spec-flow { min-height: 254px; }
  .participant { min-height: 90px; }
  .review-quote { margin-top: 8px; padding-block: 6px; }
  .window-controls { margin-top: 8px; }
  .oversight-band { height: 70px; }
  .oversight-label { top: 42px; }
  .build-step { min-height: 133px; padding-top: 23px; gap: 8px; }
  .build-step.is-active { min-height: 146px; gap: 3px; }
  .build-workflow { min-height: 146px; }
  .build-increment { min-height: 146px; padding-block: 8px; }
  .build-context .context-platform { min-height: 49px; padding-block: 8px; }

  .features, .stage--development .features, .stage--launch .features { padding-top: 8px; padding-bottom: 12px; }
  .features > .eyebrow, .stage--development .features > .eyebrow { font-size: 11px; margin-bottom: 10px; }
  .features h4 { font-size: 15px; margin-bottom: 5px; }
  .context-rail { min-height: 34px; margin-top: 2px; }
  .section-footer { min-height: 38px; padding-block: 7px 3px; }
  .section-footer .text-link { font-size: 13px; }
  .pipeline-shell { padding-top: 16px; padding-bottom: 12px; }
  .pipeline-header { margin-bottom: 14px; }
  :root { --overview-title-size: 48px; }
  :root { --overview-subtitle-size: 18px; }
  .stage-context > .context-stem { height: 16px; }
  .stage-context .context-platform { padding-block: 8px; }
  .pipeline-stage { padding-block: 10px; }
  .pipeline-stage-heading { margin-bottom: 8px; }
  .pipeline-stage-heading > .feature-number { font-size: 20px; margin-bottom: 8px; }
  :root { --overview-card-title-size: 22px; --overview-card-copy-size: 12px; --overview-card-label-size: 10px; }
  .pipeline-stage h3 { min-height: 48px; }
  .pipeline-stage-heading > p { min-height: 0; }
  .pipeline-visual { min-height: 204px; }
  .pipeline-output { min-height: 44px; padding-block: 8px; margin-top: 10px; }
  .mini-context-inputs { gap: 18px; }
  .mini-inputs { gap: 18px; }
  .build-checklist li { padding-block: 4px; }
  .build-checklist li > .icon { width: 18px; height: 18px; }
  .phone--mini { --phone-width: 106px; }
  .pipeline-shell { --pipeline-context-gap: 26px; }
  .pipeline-context .context-platform { min-height: 52px; padding-block: 9px; }
  .hero-header { min-height: 68px; }
  .hero-main { padding-block: 20px; }
  .hero-description { font-size: 21px; max-width: 450px; margin-top: 20px; }
  .hero-narrative > .eyebrow { margin-bottom: 22px; }
  .principles { margin-top: 26px; }
}

/* Extra-short desktop windows: spend the remaining space on content, not
   panel chrome. This is the minimum density; shorter windows simply scroll. */
@media screen and (min-width: 1200px) and (max-height: 660px) {
  .stage-context > .context-stem { height: 12px; }
  .stage-context .context-platform { padding-block: 7px; }
  .stage-shell { padding-top: 8px; padding-bottom: 4px; }
  .stage-main, .stage--definition .stage-main, .stage--architecture .stage-main,
  .stage--development .stage-main, .stage--launch .stage-main { padding-block: 12px; }
  .stage--development .stage-main { padding-block: 10px; }
  .prototype-network { min-height: 264px; }
  .main-prototype .phone { --phone-width: 137px; }
  .features, .stage--development .features, .stage--launch .features { padding-top: 6px; padding-bottom: 10px; }
  .features > .eyebrow, .stage--development .features > .eyebrow { margin-bottom: 8px; }
  .context-rail { min-height: 30px; }
  .section-footer { min-height: 36px; }
  .build-context .context-platform { min-height: 44px; padding-block: 6px; }

  .pipeline-shell { padding-top: 12px; padding-bottom: 8px; }
  .pipeline-header { margin-bottom: 10px; }
  :root { --overview-title-size: 46px; }
  .pipeline-stage h3 { min-height: 46px; }
  .pipeline-stage-heading > p { min-height: 0; }
  .pipeline-shell { --pipeline-context-gap: 20px; }
  .pipeline-context .context-platform { min-height: 50px; padding-block: 8px; }
}

/* ========================================================================== 
   Platform architecture — four shared layers and two cross-cutting rails
   Viewport-filling overview with progressively enhanced layer disclosures.
   ========================================================================== */
.platform-architecture {
  --pa-text: #f5f8ff;
  --pa-muted: #8ebeee;
  --pa-icon: #76b6ff;
  --pa-accent: #1a9cff;
  --pa-border: #174d75;
  position: relative;
  display: flex;
  align-items: flex-start;
  min-height: 100svh;
  color: var(--pa-text);
  background:
    radial-gradient(ellipse 48% 64% at 50% -13%, rgb(4 94 207 / 63%), transparent 86%),
    radial-gradient(ellipse 48% 58% at 51% 116%, rgb(0 100 220 / 64%), transparent 84%),
    linear-gradient(110deg, #02192b, #001426 55%, #011727);
}
.platform-architecture .pa-shell { width: min(calc(100% - var(--gutter) * 2), var(--page-width)); margin-inline: auto; padding: 56px 0 32px; }
.platform-architecture .pa-header { margin: 0 0 28px; }
.platform-architecture .pa-header h2 { color: var(--pa-text); }
.platform-architecture .pa-title-dot { color: #1684ff; }
.platform-architecture .pa-subtitle { color: var(--pa-muted); }
.platform-architecture .pa-layout { position: relative; isolation: isolate; display: grid; grid-template-columns: 224px minmax(0, 1fr) 224px; gap: 32px; align-items: stretch; }
.platform-architecture .pa-icon,
.platform-architecture .pa-chevron { display: block; width: 30px; height: 30px; flex: 0 0 auto; color: var(--pa-icon); fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.platform-architecture .pa-rail,
.platform-architecture .pa-layer { position: relative; z-index: 2; min-width: 0; border: 1px solid var(--pa-border); border-radius: 10px; background: linear-gradient(112deg, #07223a, #062844 58%, #06223c); }
.platform-architecture .pa-layers { display: grid; grid-template-rows: repeat(4, auto); gap: 12px; min-width: 0; align-content: start; }
.platform-architecture .pa-layer { display: flex; flex-direction: column; container: pa-layer / inline-size; }
.platform-architecture .pa-layer-header { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) 20px; column-gap: 22px; row-gap: 12px; align-content: center; align-items: center; min-height: 132px; padding: 20px 24px; border-radius: inherit; }
.platform-architecture .pa-layer-header > .pa-layer-icon { grid-column: 1; grid-row: 1 / 3; }
.platform-architecture .pa-layer-heading { grid-column: 2; grid-row: 1; }
.platform-architecture .pa-layer-header > .pa-chevron { grid-column: 3; grid-row: 1 / 3; }
.platform-architecture .pa-layer-icon { width: 40px; height: 40px; stroke-width: 1.65; }
.platform-architecture .pa-layer-heading { min-width: 0; }
.platform-architecture .pa-layer-heading h3 { font-size: var(--overview-card-title-size); font-weight: 650; line-height: 1.1; letter-spacing: -.043em; }
.platform-architecture .pa-layer-heading > p { margin-top: 5px; color: var(--pa-muted); font-size: var(--overview-card-copy-size); line-height: 1.4; letter-spacing: -.03em; }
.platform-architecture .pa-layer-toggle { max-width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; font: inherit; letter-spacing: inherit; overflow-wrap: anywhere; }
.platform-architecture .pa-layer-toggle::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.platform-architecture .pa-layer-header:has(.pa-layer-toggle:enabled:hover) { background: rgb(118 182 255 / 5%); }
.platform-architecture .pa-layer-toggle:disabled { cursor: default; }
.platform-architecture .pa-layer-toggle:disabled::after { pointer-events: none; }
.platform-architecture .pa-layer-header:has(.pa-layer-toggle:disabled) .pa-chevron { visibility: hidden; }
.platform-architecture .pa-layer-toggle:focus-visible { outline: none; }
.platform-architecture .pa-layer-toggle:focus-visible::after { outline: 2px solid #9bd3ff; outline-offset: 3px; border-radius: 10px; }
.platform-architecture .pa-layer-body { padding-bottom: 20px; }
.platform-architecture .pa-layer-body[hidden] { display: none; }
.platform-architecture .pa-technology { min-width: 0; margin: 0 24px; border-top: 1px solid #21618b; padding-top: 14px; color: var(--pa-muted); }
.platform-architecture .pa-technology .pa-kicker { margin-bottom: 4px; font-size: var(--overview-card-label-size); font-weight: 600; line-height: 1.35; letter-spacing: .19em; text-transform: uppercase; }
.platform-architecture .pa-technology > p + p { font-size: var(--overview-card-copy-size); line-height: 1.4; letter-spacing: -.03em; }
.platform-architecture .pa-built-on { grid-column: 2; grid-row: 2; display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--pa-muted); }
.platform-architecture .pa-built-on .pa-kicker { flex: 0 0 auto; font-size: var(--overview-card-label-size); line-height: 1.35; letter-spacing: .15em; text-transform: uppercase; }
.platform-architecture .pa-brands { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.platform-architecture .pa-brands li { display: flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; padding: 5px 8px; border: 1px solid rgb(118 182 255 / 17%); border-radius: 5px; background: rgb(118 182 255 / 4%); color: #cce2f9; font-size: 12px; line-height: 1.3; }
.platform-architecture .pa-brands li > span { min-width: 0; overflow-wrap: anywhere; }
.platform-architecture .pa-brand-icon { display: block; flex: 0 0 auto; width: 18px; height: 18px; fill: currentColor; stroke: none; }
.platform-architecture .pa-brands .pa-concept-icon { width: 18px; height: 18px; color: inherit; }
.platform-architecture .pa-built-on--rail { display: block; margin-top: 18px; padding-top: 16px; border-top: 1px solid #17577f; }
.platform-architecture .pa-built-on--rail .pa-kicker { margin-bottom: 8px; }
.platform-architecture .pa-built-on--rail .pa-brands { display: grid; gap: 8px; }
.platform-architecture .pa-built-on--rail .pa-brands li { padding: 2px 0; border: 0; border-radius: 0; background: none; gap: 10px; }
@container pa-layer (min-width: 900px) {
  .platform-architecture .pa-layer-header { grid-template-columns: 40px minmax(0, 1fr) 350px 20px; column-gap: 18px; }
  .platform-architecture .pa-layer-header > .pa-layer-icon,
  .platform-architecture .pa-layer-header > .pa-chevron { grid-row: 1; }
  .platform-architecture .pa-layer-header > .pa-chevron { grid-column: 4; }
  .platform-architecture .pa-built-on { grid-column: 3; grid-row: 1; flex-direction: column; align-items: flex-start; gap: 8px; border-left: 1px solid #21618b; padding-left: 18px; }
}
@media screen and (min-width: 1200px) {
  /* Only the fully collapsed composition distributes spare viewport height. */
  .platform-architecture .pa-shell:has(.pa-layer-toggle:enabled):not(:has(.is-expanded)) { min-height: 100svh; display: flex; flex-direction: column; }
  .platform-architecture .pa-shell:has(.pa-layer-toggle:enabled):not(:has(.is-expanded)) .pa-layout { flex: 1; }
  .platform-architecture .pa-shell:has(.pa-layer-toggle:enabled):not(:has(.is-expanded)) .pa-layers { grid-template-rows: repeat(4, minmax(min-content, 1fr)); align-content: stretch; }
  .platform-architecture .pa-shell:has(.pa-layer-toggle:enabled):not(:has(.is-expanded)) .pa-layer-header { flex: 1; }
}
.platform-architecture .pa-chevron { width: 20px; height: 20px; stroke-width: 1.6; color: #9cd2ff; transform: rotate(90deg); transition: transform var(--motion); pointer-events: none; }
.platform-architecture .pa-layer-header:has([aria-expanded="true"]) .pa-chevron { transform: rotate(-90deg); }
.platform-architecture .pa-layer--workflow { border-color: #169bff; background: radial-gradient(ellipse at 50% 0, #092b4a, #062139 100%); box-shadow: inset 0 0 0 1px rgb(0 8 22 / 60%); }
.platform-architecture .pa-layer--workflow .pa-layer-icon { color: #429eff; }
.platform-architecture .pa-layer--workflow .pa-chevron { color: var(--pa-accent); stroke-width: 2.3; }

/* Editable examples of human oversight in the tools where people work. */
.platform-architecture .pa-human-examples { container: pa-human / inline-size; margin-inline: 24px; padding-top: 16px; border-top: 1px solid #21618b; }
.platform-architecture .pa-example-label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin-bottom: 14px; color: var(--pa-muted); font-size: 12px; line-height: 1.4; }
.platform-architecture .pa-example-label > span { color: #91acca; font-size: 11px; }
.platform-architecture .pa-human-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: stretch; }
.platform-architecture .pa-human-card { display: flex; flex-direction: column; min-width: 0; padding: 16px; border: 1px solid #245579; border-radius: 8px; background: linear-gradient(135deg, #06223b, #041a2e); }
.platform-architecture .pa-human-card-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.platform-architecture .pa-human-card-heading > .pa-brand-icon { flex: 0 0 26px; width: 26px; height: 26px; color: var(--pa-text); fill: currentColor; stroke: none; }
.platform-architecture .pa-human-card-heading > div { min-width: 0; }
.platform-architecture .pa-human-card-heading h4 { color: var(--pa-text); font-size: 18px; font-weight: 650; line-height: 1.2; letter-spacing: -.035em; }
.platform-architecture .pa-human-card-heading p { margin-top: 4px; color: var(--pa-muted); font-size: 12px; line-height: 1.45; }
.platform-architecture .pa-ticket,
.platform-architecture .pa-pr-review { flex: 1; min-width: 0; padding: 14px; border: 1px solid #204c6e; border-radius: 6px; background: rgb(1 18 34 / 38%); }
.platform-architecture .pa-ticket-meta { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.platform-architecture .pa-item-reference { color: #a9c8e8; font-size: 11px; font-weight: 550; line-height: 1.4; }
.platform-architecture .pa-item-reference > span { padding-inline: 3px; }
.platform-architecture .pa-item-status { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #3d6287; border-radius: 4px; padding: 3px 7px; color: #b8d9ff; background: #102e4b; font-size: 10px; line-height: 1.2; font-weight: 600; white-space: nowrap; }
.platform-architecture .pa-item-status > span { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.platform-architecture .pa-item-status--open { border-color: #23665f; color: #92dccb; background: #0a3435; }
.platform-architecture .pa-item-title { margin: 0; color: var(--pa-text); font-size: 16px; font-weight: 600; line-height: 1.35; letter-spacing: -.025em; overflow-wrap: anywhere; }
.platform-architecture .pa-item-meta { margin-top: 6px; color: #91acca; font-size: 11px; line-height: 1.5; }
.platform-architecture .pa-item-meta > span { padding-inline: 3px; }
.platform-architecture .pa-progress-summary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; margin-top: 18px; color: #91acca; font-size: 10px; line-height: 1.5; }
.platform-architecture .pa-progress-summary strong { color: #bfd7f0; font-size: 11px; font-weight: 550; }
.platform-architecture .pa-progress-meter { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin-top: 7px; }
.platform-architecture .pa-progress-meter > span { height: 3px; border-radius: 2px; background: #264159; }
.platform-architecture .pa-progress-meter > .is-complete { background: #70ace9; }
.platform-architecture .pa-progress-meter > .is-current { background: #b2d8ff; }
.platform-architecture .pa-feature-steps { margin-top: 14px; }
.platform-architecture .pa-feature-steps > li { position: relative; isolation: isolate; display: grid; grid-template-columns: 23px minmax(0, 1fr); column-gap: 10px; align-items: start; padding: 6px 0; }
.platform-architecture .pa-feature-steps > li:not(:last-child)::after { content: ""; position: absolute; z-index: -1; top: 22px; left: 11px; bottom: -8px; width: 1px; background: #315776; }
.platform-architecture .pa-progress-mark { display: flex; align-items: center; justify-content: center; width: 23px; height: 23px; border: 1px solid #3a668e; border-radius: 50%; background: #13334e; }
.platform-architecture .pa-progress-mark .pa-icon { width: 13px; height: 13px; color: #a8d3ff; stroke-width: 1.8; }
.platform-architecture .pa-feature-steps strong { display: block; color: #d9e9fa; font-size: 12px; font-weight: 550; line-height: 1.4; }
.platform-architecture .pa-feature-steps p { margin-top: 2px; color: #91acca; font-size: 11px; line-height: 1.4; }
.platform-architecture .pa-feature-steps > .is-current { grid-template-columns: 23px minmax(0, 1fr) auto; align-items: center; margin-block: 5px; padding: 10px 8px; margin-inline: -8px; border: 1px solid #386c98; border-radius: 5px; background: #102f4b; }
.platform-architecture .pa-feature-steps > .is-current::after { left: 20px; }
.platform-architecture .is-current .pa-progress-mark { border-color: #91c5fb; background: #1c4c74; }
.platform-architecture .is-current .pa-progress-mark .pa-icon { width: 12px; height: 12px; color: #d4eaff; }
.platform-architecture .is-current .pa-step-attention { color: #bddbfb; font-size: 9px; font-weight: 600; line-height: 1.4; }
.platform-architecture .pa-feature-steps > .is-waiting .pa-progress-mark { border-color: #36506a; background: #0b243a; }
.platform-architecture .pa-feature-steps > .is-waiting .pa-progress-mark .pa-icon { color: #91acca; }
.platform-architecture .pa-feature-steps > .is-waiting strong { color: #a9bfd6; }
.platform-architecture .pa-pr-review { display: flex; flex-direction: column; }
.platform-architecture .pa-review-fields { margin-top: 18px; }
.platform-architecture .pa-review-field { display: grid; grid-template-columns: minmax(81px, max-content) minmax(0, 1fr); gap: 10px; padding-block: 14px; border-top: 1px solid #204663; }
.platform-architecture .pa-review-field dt { display: flex; align-items: flex-start; gap: 8px; color: #acd4ff; font-size: 11px; font-weight: 550; line-height: 1.5; }
.platform-architecture .pa-review-field dt .pa-icon { width: 18px; height: 18px; }
.platform-architecture .pa-review-field dd { min-width: 0; color: #a9c5e2; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.platform-architecture .pa-review-decision { margin-top: auto; padding-top: 16px; border-top: 1px solid #204663; }
.platform-architecture .pa-review-decision > p { color: #91acca; font-size: 11px; line-height: 1.5; }
.platform-architecture .pa-review-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.platform-architecture .pa-review-action { display: inline-flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: 7px; padding: 8px 10px; border: 1px solid #426689; border-radius: 4px; background: #102d49; color: #d1e4fa; font-size: 10px; font-weight: 550; line-height: 1.4; }
.platform-architecture .pa-review-action > .pa-icon { width: 14px; height: 14px; color: inherit; }
.platform-architecture .pa-review-action--approve { border-color: #36776e; background: #103c3d; color: #b1e5d8; }

@container pa-human (min-width: 660px) {
  .platform-architecture .pa-human-cards { grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); }
}
@container pa-human (max-width: 350px) {
  .platform-architecture .pa-human-card { padding: 12px; }
  .platform-architecture .pa-ticket,
  .platform-architecture .pa-pr-review { padding: 12px; }
  .platform-architecture .pa-review-field { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .platform-architecture .pa-feature-steps > .is-current { grid-template-columns: 23px minmax(0, 1fr); }
  .platform-architecture .is-current .pa-step-attention { grid-column: 2; margin-top: 4px; }
}
@media (min-width: 1200px) and (max-width: 1599px) {
  .platform-architecture .pa-human-examples { margin-inline: 20px; }
}
@media (max-width: 767px) {
  .platform-architecture .pa-human-examples { margin-inline: 16px; }
}
@media print {
  .platform-architecture .pa-human-card { break-inside: avoid; }
}

/* Shared controls and visibility span all four layers. */
.platform-architecture .pa-rail { min-height: 0; padding: 20px; display: flex; flex-direction: column; background: linear-gradient(145deg, #061e36, #031628); }
.platform-architecture .pa-rail-icon { width: 36px; height: 36px; margin-bottom: 12px; }
.platform-architecture .pa-rail h3 { color: var(--pa-text); font-size: var(--overview-card-title-size); font-weight: 650; line-height: 1.1; letter-spacing: -.043em; overflow-wrap: anywhere; }
.platform-architecture .pa-rail-description { margin-top: 6px; color: var(--pa-muted); font-size: var(--overview-card-copy-size); line-height: 1.4; letter-spacing: -.03em; }
.platform-architecture .pa-rail-list { display: grid; gap: 14px; margin-top: 18px; padding-top: 18px; border-top: 1px solid #17577f; }
.platform-architecture .pa-rail-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 36px; color: var(--pa-muted); font-size: 14px; line-height: 1.4; letter-spacing: -.015em; }
.platform-architecture .pa-rail-list .pa-icon { width: 24px; height: 26px; }
.platform-architecture .pa-rail-list li span { min-width: 0; overflow-wrap: anywhere; }
.platform-architecture .pa-explore { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: auto; padding-top: 16px; color: var(--pa-accent); font-size: 13px; line-height: 1.35; letter-spacing: -.035em; }
.platform-architecture .pa-explore .pa-icon { width: 18px; height: 18px; color: inherit; stroke-width: 1.5; }
.platform-architecture .pa-rail-connectors { z-index: 1; }
.platform-architecture .connector-layer .pa-rail-wire { stroke: #1787ce; stroke-width: 1; }
.platform-architecture .pa-rail-cap { fill: #6eb6ff; stroke: none; }
.platform-architecture .pa-rail-cap--human { fill: #073558; stroke: #83c2ff; stroke-width: 1; }

/* Real HTML workflow nodes; SVG only draws the measured arrows and retry. */
.platform-architecture .pa-workflow-scroll { overflow: visible; padding: 20px 24px 0; margin: 0 24px; border-top: 1px solid #21618b; scrollbar-width: thin; scrollbar-color: #3377ae #08253e; }
.platform-architecture .pa-workflow-map { position: relative; width: 100%; min-width: 0; min-height: max(180px, var(--pa-workflow-height, 0px)); padding-top: 2px; }
.platform-architecture .pa-steps { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
.platform-architecture .pa-step { min-width: 0; text-align: center; }
.platform-architecture .pa-step-icon { width: 40px; height: 40px; margin: 0 auto 5px; }
.platform-architecture .pa-step h4 { color: var(--pa-text); font-size: 18px; font-weight: 600; line-height: 1.35; letter-spacing: -.04em; overflow-wrap: anywhere; }
.platform-architecture .pa-step > p { color: var(--pa-muted); font-size: 15px; line-height: 1.5; letter-spacing: -.025em; overflow-wrap: anywhere; }
.platform-architecture .pa-step .pa-review-tools { max-width: 100%; margin-top: 11px; font-size: 14px; letter-spacing: -.01em; text-wrap: balance; }
.platform-architecture .pa-retry { position: absolute; z-index: 2; left: var(--pa-retry-x, 38%); top: var(--pa-retry-y, 136px); transform: translate(-50%, calc(-50% + 4px)); width: max-content; max-width: calc(100% - 24px); text-align: center; }
.platform-architecture .pa-retry .pa-icon { width: 24px; height: 24px; margin: 0 auto 2px; stroke-width: 1.7; }
.platform-architecture .pa-retry strong { display: block; font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -.035em; }
.platform-architecture .pa-retry p { color: var(--pa-muted); font-size: 15px; line-height: 1.4; letter-spacing: -.035em; }
.platform-architecture .pa-workflow-connectors { z-index: 1; }
.platform-architecture .connector-layer .pa-flow-line,
.platform-architecture .connector-layer .pa-retry-line { stroke: #73baff; stroke-width: 1.4; }
.platform-architecture .connector-layer .pa-retry-line { stroke-dasharray: 6 4; }
.platform-architecture :focus-visible { outline-color: #9bd3ff; }
.platform-architecture .pa-workflow-scroll[data-overflows="true"]::after { content: "Scroll to explore the workflow →"; display: block; width: max-content; padding: 8px 0; color: var(--pa-muted); font-size: 13px; }

@media (min-width: 1200px) and (max-width: 1599px) {
  .platform-architecture .pa-layout { grid-template-columns: 194px minmax(0, 1fr) 194px; gap: 24px; }
  .platform-architecture .pa-layer-header { grid-template-columns: 36px minmax(0, 1fr) 20px; column-gap: 18px; padding-inline: 20px; }
  .platform-architecture .pa-layer-icon { width: 36px; height: 36px; }
  .platform-architecture .pa-technology { margin-inline: 20px; }
  .platform-architecture .pa-rail { padding-inline: 18px; }
  .platform-architecture .pa-rail-list li { font-size: 13px; }
  .platform-architecture .pa-workflow-scroll { padding-inline: 0; margin-inline: 20px; }
  .platform-architecture .pa-workflow-map { min-width: 0; min-height: max(188px, var(--pa-workflow-height, 0px)); }
  .platform-architecture .pa-step > p { font-size: 13px; }
  .platform-architecture .pa-step h4 { font-size: 16px; }
  .platform-architecture .pa-step .pa-review-tools { font-size: 12px; }
}

@media screen and (min-width: 1200px) and (max-height: 860px) {
  .platform-architecture .pa-shell { padding-top: 44px; padding-bottom: 28px; }
  .platform-architecture .pa-header { margin-bottom: 22px; }
  .platform-architecture .pa-layer-header { min-height: 112px; padding-block: 14px; row-gap: 10px; }
}

@media screen and (min-width: 1200px) and (max-height: 760px) {
  .platform-architecture .pa-shell { padding-top: 40px; padding-bottom: 24px; }
  .platform-architecture .pa-header { margin-bottom: 18px; }
  .platform-architecture .pa-layers { gap: 10px; }
  .platform-architecture .pa-layer-header { min-height: 106px; padding-block: 12px; row-gap: 8px; }
  .platform-architecture .pa-rail { padding-block: 16px; }
  .platform-architecture .pa-rail-icon { width: 32px; height: 32px; margin-bottom: 10px; }
  .platform-architecture .pa-rail-list { gap: 8px; margin-top: 12px; padding-top: 12px; }
  .platform-architecture .pa-built-on--rail { margin-top: 12px; padding-top: 12px; }
  .platform-architecture .pa-built-on--rail .pa-brands { gap: 6px; }
  .platform-architecture .pa-explore { padding-top: 12px; }
}

@media (max-width: 1199px) {
  .platform-architecture .pa-shell { padding: 32px 0; }
  .platform-architecture .pa-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .platform-architecture .pa-layers { grid-column: 1 / -1; grid-row: 1; }
  .platform-architecture .pa-quality { grid-column: 1; grid-row: 2; }
  .platform-architecture .pa-observability { grid-column: 2; grid-row: 2; }
  .platform-architecture .pa-rail-connectors { display: none; }
  .platform-architecture .pa-workflow-scroll { overflow-x: auto; padding-inline: 12px; }
  .platform-architecture .pa-workflow-map { min-width: 850px; min-height: max(190px, var(--pa-workflow-height, 0px)); }
  .platform-architecture .pa-step .pa-review-tools { font-size: 12px; }
  .platform-architecture .pa-rail-description br { display: none; }
}

@media (max-width: 767px), (max-width: 1199px) and (max-height: 500px) and (pointer: coarse) {
  .platform-architecture .pa-shell { padding: 36px 0; }
  .platform-architecture .pa-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .platform-architecture .pa-quality { grid-column: 1; grid-row: 2; }
  .platform-architecture .pa-observability { grid-column: 1; grid-row: 3; }
  .platform-architecture .pa-layer-header { grid-template-columns: 32px minmax(0, 1fr) 18px; gap: 12px; padding: 20px 16px; }
  .platform-architecture .pa-layer-icon { grid-column: 1; grid-row: 1; width: 32px; height: 36px; align-self: start; }
  .platform-architecture .pa-layer-heading { grid-column: 2; grid-row: 1; }
  .platform-architecture .pa-layer-heading h3 { font-size: 21px; }
  .platform-architecture .pa-layer-heading > p { font-size: 16px; line-height: 1.4; margin-top: 5px; }
  .platform-architecture .pa-layer-header > .pa-layer-icon { grid-row: 1; }
  .platform-architecture .pa-layer-header > .pa-chevron { grid-row: 1; }
  .platform-architecture .pa-built-on { grid-column: 1 / -1; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 4px; }
  .platform-architecture .pa-built-on .pa-kicker { font-size: 11px; }
  .platform-architecture .pa-brands li { font-size: 12px; }
  .platform-architecture .pa-built-on--rail { margin-top: 20px; }
  .platform-architecture .pa-chevron { grid-column: 3; grid-row: 1; width: 18px; height: 18px; align-self: start; margin-top: 3px; }
  .platform-architecture .pa-technology { margin-inline: 16px; padding-top: 14px; }
  .platform-architecture .pa-workflow-scroll { padding: 4px 12px 0; }
  .platform-architecture .pa-rail { padding: 24px; }
  .platform-architecture .pa-rail-icon { width: 40px; height: 40px; margin-bottom: 14px; }
  .platform-architecture .pa-rail h3 { font-size: 24px; }
  .platform-architecture .pa-rail-description { font-size: 18px; }
  .platform-architecture .pa-rail-list li { font-size: 16px; }
}

@media print {
  .platform-architecture { min-height: 0; break-before: page; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .platform-architecture .pa-shell { padding: 24px; }
  .platform-architecture .pa-workflow-scroll { overflow: visible; }
  .platform-architecture .pa-workflow-map { min-width: 0; }
  .platform-architecture .pa-workflow-scroll[data-overflows="true"]::after { display: none; }
  .platform-architecture .pa-chevron { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .platform-architecture .pa-chevron { transition: none; }
}

/* Phone layouts use the same content, with vertical reading and touch controls.
   Additional markup is hidden on laptops, monitors, and in printed copies. */
.mobile-only, .mobile-site-header { display: none; }

/* Desktop architecture rails flank the central layers. */

@media (min-width: 1200px) {
  .platform-architecture .pa-quality { grid-column: 1; grid-row: 1; }
  .platform-architecture .pa-layers { grid-column: 2; grid-row: 1; }
  .platform-architecture .pa-observability { grid-column: 3; grid-row: 1; }
}

@media screen and (max-width: 767px), screen and (max-width: 1199px) and (max-height: 500px) and (pointer: coarse) {
  :root { --gutter: clamp(16px, 5vw, 20px); --page-width: 620px; --mobile-header-height: 76px; --text-secondary: #52699f; }
  html { scroll-padding-top: calc(var(--mobile-header-offset, calc(var(--mobile-header-height) + env(safe-area-inset-top, 0px) + 1px)) + 12px); }
  body { font-size: 16px; padding-top: var(--mobile-header-offset, calc(var(--mobile-header-height) + env(safe-area-inset-top, 0px) + 1px)); }
  .screen, .hero-screen, body[data-view="detail"] .screen[data-stage] { min-height: 0; scroll-margin-top: 0; }
  .page-shell { width: min(calc(100% - var(--gutter) * 2), 620px); }
  .mobile-only { display: block; }
  a.wordmark { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .mobile-site-header { display: block; position: fixed; top: 0; left: 0; width: 100%; z-index: 15; background: #fff; border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top, 0px); }
  .mobile-header-bar { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; max-width: 660px; margin-inline: auto; min-height: var(--mobile-header-height); padding: 6px max(var(--gutter), env(safe-area-inset-right, 0px)) 6px max(var(--gutter), env(safe-area-inset-left, 0px)); }
  .mobile-header-bar > .wordmark { display: flex; align-items: center; min-height: 44px; font-size: 29px; }
  .mobile-header-bar > .brand-logo { width: clamp(113.333px, 30.667vw, 130px); }
  .mobile-current-label { order: 3; flex-basis: 100%; min-width: 0; font-size: 12px; line-height: 1.35; color: var(--text-secondary); padding-bottom: 2px; }
  .mobile-current-label [data-mobile-current] { overflow-wrap: anywhere; }
  .mobile-site-menu { margin-left: auto; }
  .mobile-site-menu > summary { display: flex; gap: 8px; align-items: center; justify-content: center; min-height: 44px; min-width: 80px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-size: 15px; color: var(--text-primary); list-style: none; }
  .mobile-site-menu > summary::-webkit-details-marker { display: none; }
  .mobile-site-menu summary .icon { width: 20px; height: 20px; }
  .mobile-site-menu[open] > summary { background: var(--blue-soft); border-color: #83aefb; }
  .mobile-site-menu > nav { position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100dvh - var(--mobile-header-offset, var(--mobile-header-height)) - 12px); overflow-y: auto; overscroll-behavior: contain; padding: 8px var(--gutter) 16px; background: #fff; border-bottom: 1px solid var(--line); }
  .mobile-site-menu nav a { display: flex; align-items: center; min-height: 48px; padding: 10px 12px; border-radius: 7px; font-size: 16px; line-height: 1.4; }
  .mobile-site-menu nav a[aria-current] { color: #0958d9; background: var(--blue-soft); font-weight: 650; }
  .mobile-site-menu nav a:active { background: #dceaff; }
  .product-stages-menu--mobile > .product-stages-trigger { justify-content: space-between; height: auto; min-height: 48px; padding: 10px 12px; font-size: 16px; line-height: 1.4; border-radius: 7px; }
  .product-stages-menu--mobile > .product-stages-trigger.is-active { color: #0958d9; font-weight: 650; }
  .product-stages-menu--mobile > .product-stages-panel { position: static; padding: 8px 0; max-height: none; overflow: visible; border: 0; }
  .product-stages-menu--mobile .stage-menu-banner { display: block; padding: 20px 16px 12px; margin-bottom: 8px; }
  .product-stages-menu--mobile .stage-menu-intro > .eyebrow { font-size: 11px; margin-bottom: 10px; }
  .product-stages-menu--mobile .stage-menu-intro > h2 { font-size: 30px; }
  .product-stages-menu--mobile .stage-menu-subtitle { font-size: 16px; margin-top: 10px; }
  .product-stages-menu--mobile .stage-menu-wave { width: 90%; top: 0; opacity: .1; }
  .product-stages-menu--mobile .stage-menu-list { gap: 2px; }
  .mobile-site-menu .stage-menu-link { display: grid; gap: 6px 14px; min-height: 108px; padding: 18px 12px; border-radius: var(--radius-sm); }
  .mobile-site-menu .stage-menu-link[aria-current] { background: #f2f7ff; font-weight: inherit; }
  .mobile-site-menu .stage-menu-name { font-size: 20px; }
  .mobile-site-menu .stage-menu-description { font-size: 16px; }
  .mobile-site-menu .stage-menu-overview { display: inline-flex; padding: 8px 0; margin: 8px 0 0; font-size: 16px; }
  .mobile-site-menu .stage-menu-overview[aria-current] { background: transparent; color: var(--blue); font-weight: inherit; }
  .site-header { display: none; }
  .hero-shell { min-height: 0; }
  .hero-main { padding-block: 36px 40px; gap: 28px; }
  .hero-narrative > .eyebrow { font-size: 12px; margin-bottom: 22px; letter-spacing: .1em; }
  .hero-narrative h1 { font-size: clamp(52px, 14vw, 76px); }
  .hero-narrative h1 { overflow-wrap: anywhere; }
  .hero-description { font-size: 19px; line-height: 1.5; max-width: none; }
  .principles { grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
  .principles > div, .principles > div + div { padding: 0 0 0 14px; border-left: 2px solid #c6dbfc; }
  .principles h2 { font-size: 12px; letter-spacing: .08em; margin-bottom: 3px; }
  .principles p { font-size: 16px; line-height: 1.5; }
  .principles br { display: none; }
  .hero-visual { max-width: 520px; }
  .mobile-artwork-summary { display: grid; gap: 12px; margin-top: 20px; padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: #f8fbff; font-size: 15px; line-height: 1.5; color: var(--text-secondary); }
  .mobile-artwork-summary strong { display: block; color: var(--text-primary); }
  .mobile-artwork-summary ol { display: grid; gap: 14px; }
  .stage-shell { padding-block: 28px 32px; }
  .stage-main, .stage--definition .stage-main, .stage--architecture .stage-main, .stage--development .stage-main, .stage--launch .stage-main { padding-top: 28px; gap: 28px; }
  .stage-narrative h2, .stage--development .stage-narrative h2, .stage--launch .stage-narrative h2 { font-size: clamp(34px, 9vw, 48px); overflow-wrap: anywhere; }
  .stage-description, .stage--development .stage-description, .stage--launch .stage-description { font-size: 18px; line-height: 1.5; width: auto; max-width: none; letter-spacing: -.02em; }
  .role { font-size: 16px; white-space: normal; }
  .eyebrow, .stage-narrative > .eyebrow, .features > .eyebrow, .stage--development .features > .eyebrow, .kpis > .eyebrow { font-size: 12px; }
  .features p { font-size: 16px; line-height: 1.55; }
  .features h4 { font-size: 19px; line-height: 1.35; }
  .context-pill { border-radius: 14px; width: 100%; }
  .context-pill p { font-size: 15px; }
  .context-pill div > span { font-size: 14px; }
  .context-platform li, .build-context .context-platform li { font-size: 14px; flex-basis: auto; padding: 6px; }
  .context-platform ul { gap: 8px 14px; }
  .context-platform-brand .eyebrow, .build-context .context-platform-brand .eyebrow { font-size: 12px; letter-spacing: .1em; }
  .context-platform-brand, .build-context .context-platform-brand { flex-wrap: wrap; justify-content: center; padding-left: 0; min-width: 0; }
  .context-platform-brand .eyebrow { white-space: normal; }
  .stage-context > .context-stem { height: 24px; }
  .stage-context .context-platform { flex-direction: column; gap: 14px; padding: 16px 12px; }
  .stage-context .context-platform-brand { flex-basis: auto; flex-wrap: wrap; }
  .stage-context .context-platform-brand .eyebrow { font-size: 12px; }
  .stage-context .context-platform ul { display: flex; flex: auto; flex-wrap: wrap; width: 100%; justify-content: center; gap: 12px 8px; }
  .stage-context .context-platform li { flex: 1 1 80px; max-width: 120px; flex-direction: column; gap: 6px; border: 0; font-size: 14px; padding: 4px; }
  .context-types, .context-rail > .eyebrow { font-size: 12px; line-height: 1.5; letter-spacing: .08em; }
  .context-rail { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .context-rail > .eyebrow { white-space: normal; overflow-wrap: anywhere; }
  .context-types { gap: 10px; min-width: 0; overflow-wrap: anywhere; }
  .context-types > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .kpis dl { display: grid; grid-template-columns: 1fr; gap: 0; }
  .kpi, .kpi:first-child, .kpi:last-child, .stage--development .kpi, .stage--launch .kpi { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 16px; align-items: start; padding: 18px 0; border: 0; border-bottom: 1px solid var(--line); }
  .kpi dd, .stage--development .kpi dd, .stage--launch .kpi dd { font-size: 32px; margin: 0; grid-column: 1; grid-row: 1; }
  .kpi dt, .stage--development .kpi dt, .stage--launch .kpi dt { font-size: 16px; line-height: 1.45; grid-column: 2; grid-row: 1; }
  .kpi small { font-size: 14px; }
  .section-footer { gap: 16px; }
  .section-footer .text-link { min-height: 48px; font-size: 14px; padding-block: 8px; overflow-wrap: anywhere; }
  .mobile-section-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 20px; margin-top: 20px; border-top: 1px solid var(--line); padding-top: 14px; }
  .mobile-section-footer a { display: flex; align-items: center; min-height: 48px; font-size: 15px; color: var(--blue); }
  .section-footer .mobile-overview-link { display: flex; grid-column: 1 / -1; justify-self: stretch; justify-content: space-between; width: 100%; margin: 0; padding-top: 16px; border-top: 1px solid var(--line); }
  .stage-pagination { align-items: flex-start; gap: 16px; margin-top: 28px; padding-block: 12px 0; }
  .stage-pagination a { min-height: 48px; max-width: calc(50% - 8px); font-size: 14px; padding-block: 8px; }

  /* The pipeline cards stay informative at phone width. */
  :root { --overview-title-size: clamp(38px, 10vw, 50px); }
  .pipeline-stage { display: flex; flex-direction: column; padding: 18px 14px 14px; }
  .pipeline-stage-heading { padding: 0; margin-bottom: 0; }
  :root { --overview-card-copy-size: 16px; --overview-card-label-size: 12px; }
  .pipeline-stage-heading > p, .pipeline-output { font-size: 16px; line-height: 1.5; }
  .pipeline-output { padding: 14px; gap: 12px; min-height: 60px; }
  .pipeline-visual { height: auto; min-height: 0; margin-top: 18px; }
  .overview-discovery, .overview-specification { flex-direction: column; align-items: stretch; gap: 36px; padding: 0; }
  .mini-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-self: stretch; gap: 18px; flex: auto; padding: 0; }
  .mini-inputs strong, .mini-context-inputs strong { font-size: 15px; }
  .overview-discovery .prototype-card { flex: auto; width: min(230px, 100%); align-self: center; padding: 16px; }
  .prototype-product-name { font-size: 14px; }
  .mini-context-inputs { flex: auto; gap: 16px; }
  .mini-context-inputs > div { gap: 12px; }
  .specification--mini { flex: auto; padding: 16px; }
  .pipeline-stage .specification--mini { max-width: none; width: 100%; }
  .pipeline-stage .specification--mini li > span:not(.count), .pipeline-stage .build-checklist li > span:nth-child(2) { min-width: 0; overflow-wrap: anywhere; }
  .specification--mini h4, .specification h4 { font-size: 16px; }
  .specification--mini li, .specification--output li { font-size: 15px; min-height: 46px; padding: 10px; gap: 10px; letter-spacing: -.02em; }
  .specification--mini .count, .specification--output .count { font-size: 13px; }
  .build-checklist li { font-size: 15px; padding: 12px; }
  .build-checklist strong { font-size: 14px; }
  .overview-impact { flex-direction: column; gap: 20px; }
  .overview-impact .phone--mini { --phone-width: 180px; }
  .impact-summary { width: 100%; max-width: none; gap: 18px; }
  .impact-summary.card { padding: 20px; }
  .impact-result strong { font-size: 20px; }
  .impact-result p > span { font-size: 16px; }

  /* Full-sized demo controls live beside, rather than inside, miniature phones. */
  .phone [data-demo-cart] { display: none; }
  .mobile-demo-control { width: 100%; max-width: 360px; margin: 18px auto 0; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: white; font-size: 16px; line-height: 1.5; }
  .mobile-demo-control p { color: var(--text-secondary); font-size: 14px; margin-bottom: 8px; }
  .mobile-demo-control p strong, .mobile-demo-control p span { display: block; }
  .mobile-demo-control p strong { color: var(--text-primary); font-size: 16px; }
  .mobile-demo-control button { min-height: 48px; width: 100%; border: 0; border-radius: 7px; padding: 12px 16px; background: #101f44; color: white; font-size: 16px; }
  .mobile-demo-control button[aria-pressed="true"] { background: #167044; }
  .mobile-demo-control button:active { background: #284378; }
  .prototype-network { grid-template-columns: 1fr; grid-template-rows: auto; gap: 20px; }
  .main-prototype { grid-column: 1; grid-row: 1; width: 100%; transform: none; margin: 0; }
  .main-prototype .phone { --phone-width: 224px; margin-inline: auto; }
  .stakeholder--ux { grid-column: 1; grid-row: 2; }
  .stakeholder--business { grid-column: 1; grid-row: 3; }
  .stakeholder--research { grid-column: 1; grid-row: 4; }
  .stakeholder--executive { grid-column: 1; grid-row: 5; }
  .stakeholder { flex-direction: row; gap: 14px; border: 1px solid var(--line); border-radius: 10px; padding: 16px; }
  .stakeholder h3 { font-size: 12px; min-height: 0; margin: 0 0 6px; }
  .stakeholder p { font-size: 16px; line-height: 1.5; }

  /* Vertical diagrams reserve explicit gutters for SVG relationship lines. */
  .diagram-scroll { overflow: visible; padding: 0; margin: 0; }
  .diagram-scroll[data-overflows="true"]::after { display: none; }
  .spec-canvas, .build-canvas { min-width: 0; }
  .build-canvas > .stage-context { --context-inset-start: 32px; }
  .spec-flow { min-width: 0; min-height: 0; grid-template-columns: minmax(0, 1fr); gap: 38px; align-items: stretch; }
  .spec-flow > :not(.connector-layer) { grid-column: 1; grid-row: auto; }
  .spec-flow > .flow-spacer { display: none; }
  .prototype-input { display: flex; gap: 18px; align-items: center; padding: 18px; }
  .prototype-input h3 { font-size: 18px; margin: 0; }
  .prototype-input .tiny-prototype { flex: 0 0 64px; width: 64px; height: 100px; }
  .review-window { padding: 16px; }
  .window-heading h3 { font-size: 16px; }
  .window-heading > span { font-size: 13px; }
  .participants { grid-template-columns: 1fr; gap: 10px; }
  .participant { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 2px 12px; justify-content: start; min-height: 78px; padding: 12px; }
  .participant .avatar { grid-row: 1 / 3; margin: 0; }
  .participant h4 { font-size: 15px; text-align: left; }
  .participant-status { grid-column: 2; justify-content: flex-start; font-size: 14px; margin: 0; }
  .review-quote p { font-size: 15px; }
  .window-controls { gap: 16px; }
  .spec-output h3 { font-size: 19px; }
  .spec-context { padding: 0; }
  .build-map { min-width: 0; padding-left: 32px; }
  .oversight-band { height: auto; padding-bottom: 38px; }
  .engineer-oversight { position: relative; left: auto; top: auto; transform: none; width: 100%; max-width: none; gap: 10px; }
  .engineer-oversight h3 { font-size: 16px; }
  .engineer-oversight p { font-size: 14px; }
  .oversight-label { position: static; display: block; margin: 10px 0 0; padding: 0; font-size: 14px; }
  .build-workflow { grid-template-columns: minmax(0, 1fr); gap: 32px; min-height: 0; }
  .build-input, .build-step, .build-step.is-active, .build-increment { height: auto; min-height: 0; padding: 20px; gap: 10px; }
  .build-input { flex-direction: row; justify-content: flex-start; gap: 16px; }
  .build-input h3 { font-size: 16px; }
  .build-step { display: grid; grid-template-columns: 36px minmax(0, 1fr); text-align: left; align-content: start; gap: 6px 14px; }
  .build-step .flow-icon { grid-column: 1; grid-row: 1 / 3; margin: 0; }
  .build-step h3 { grid-column: 2; font-size: 18px; padding-right: 10px; }
  .build-step p { grid-column: 2; font-size: 15px; }
  .build-step p br { display: initial; }
  .build-step .eval-ring, .build-step .eval-score, .build-step.is-active .eval-status { grid-column: 2; font-size: 14px; }
  .build-step .status-check, .build-step .status-pending { width: 17px; height: 17px; }
  .build-increment .increment-heading { align-items: center; gap: 10px; flex-wrap: wrap; }
  .build-increment h4 { font-size: 18px; }
  .build-increment .version { font-size: 13px; }
  .build-increment .check-list li { font-size: 15px; }

  /* Architecture keeps its navy palette, with the workflow in reading order. */
  .platform-architecture .pa-shell { padding: 36px 0; }
  .platform-architecture .pa-layout { grid-template-columns: minmax(0, 1fr); }
  .platform-architecture .pa-layer-heading h3 { font-size: 21px; }
  .platform-architecture .pa-layer-heading > p { font-size: 16px; }
  .platform-architecture .pa-technology .pa-kicker { font-size: 12px; }
  .platform-architecture .pa-workflow-scroll { overflow: visible; padding: 0 16px 20px 8px; }
  .platform-architecture .pa-workflow-map { min-width: 0; min-height: 0; padding: 0 0 0 32px; }
  .platform-architecture .pa-steps { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .platform-architecture .pa-step { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 3px 12px; text-align: left; padding: 12px; border: 1px solid #1d507a; border-radius: 8px; background: #082840; }
  .platform-architecture .pa-step-icon { grid-column: 1; grid-row: 1 / 3; width: 30px; height: 32px; margin: 0; }
  .platform-architecture .pa-step h4 { font-size: 17px; }
  .platform-architecture .pa-step > p { grid-column: 2; font-size: 15px; }
  .platform-architecture .pa-step .pa-review-tools { grid-column: 1 / -1; width: auto; max-width: 100%; left: auto; transform: none; margin-top: 8px; font-size: 14px; white-space: normal; }
  .platform-architecture .pa-retry { position: relative; left: auto; top: auto; transform: none; width: auto; margin-top: 20px; text-align: left; padding: 12px; background: #082840; border-radius: 8px; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 2px 10px; }
  .platform-architecture .pa-retry .pa-icon { grid-row: 1 / 3; margin: 0; }
  .platform-architecture .pa-retry p { grid-column: 2; font-size: 15px; }
  .platform-architecture .pa-rail { min-height: 0; padding: 24px; }
  .platform-architecture .pa-rail h3 { white-space: normal; }
  .platform-architecture .pa-rail-list { gap: 16px; padding-top: 20px; margin-top: 20px; }
  .platform-architecture .pa-rail-list li { gap: 14px; min-height: 36px; }
  .platform-architecture .pa-rail-list li span { margin-right: 0; }
  .platform-architecture .pa-explore { position: static; margin-top: 20px; white-space: normal; color: var(--pa-muted); font-size: 15px; }
  .platform-architecture .pa-explore .pa-icon { display: none; }
  .platform-architecture .mobile-section-footer { border-color: #21618b; }
  .platform-architecture .mobile-section-footer a { color: #91caff; }
  .pipeline-header h2, .pipeline-stage h3, .platform-architecture .pa-header h2,
  .platform-architecture .pa-rail h3, .platform-architecture .pa-kicker { overflow-wrap: anywhere; }
  .context-pill > div, .context-pill > span { min-width: 0; overflow-wrap: anywhere; }
}

@media screen and (max-width: 767px) and (prefers-contrast: more), screen and (max-width: 1199px) and (max-height: 500px) and (pointer: coarse) and (prefers-contrast: more) {
  :root { --text-secondary: #345bab; }
}

/* Stage 04: product signals feed shared context and three parallel loops.
   Container sizing also covers narrow desktop columns and enlarged text. */
.operate-diagram { container: operate / inline-size; }
.operate-canvas { min-width: 0; }
.operate-map { position: relative; display: grid; gap: 24px; }
.operate-product, .operate-context, .operate-loop { position: relative; z-index: 2; min-width: 0; }
.operate-product { display: grid; grid-template-columns: minmax(180px, 1.15fr) minmax(0, 2fr); align-items: center; gap: 12px; padding: 12px; }
.operate-product-preview { display: flex; align-items: center; gap: 14px; min-width: 0; }
.operate-product h3, .operate-loop h3 { font-size: 17px; font-weight: 550; line-height: 1.3; letter-spacing: -.035em; }
.operate-browser { flex: 0 1 108px; min-width: 70px; overflow: hidden; border: 1px solid var(--blue); border-radius: 5px; background: #fff; box-shadow: 0 3px 10px rgb(18 103 244 / 7%); }
.operate-browser-bar { display: flex; gap: 3px; padding: 4px 5px; border-bottom: 1px solid var(--line); background: var(--blue-soft); }
.operate-browser-bar span { width: 3px; height: 3px; border-radius: 50%; background: var(--blue); }
.operate-browser-screen { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 8px; padding: 8px 6px; }
.operate-browser-photo { padding: 4px; border-radius: 3px; background: var(--surface-inset); }
.operate-browser-copy { display: grid; gap: 5px; }
.operate-browser-copy > span { display: block; height: 3px; border-radius: 2px; background: var(--line); }
.operate-browser-copy > span:nth-child(3) { width: 65%; }
.operate-browser-copy > .operate-browser-button { width: 75%; height: 8px; margin-top: 2px; background: var(--blue); }
.operate-signals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); min-width: 0; }
.operate-signals li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 4px 7px; border-left: 1px solid var(--line); text-align: center; color: var(--text-secondary); font-size: 13px; line-height: 1.35; letter-spacing: -.025em; }
.operate-signals .icon { width: 28px; height: 28px; }
.operate-context { margin-inline: 0; }
.operate-loops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.operate-loop { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 12px; text-align: center; }
.operate-loop-icon { width: 48px; height: 48px; stroke-width: 1.25; }
.operate-loop-heading { display: flex; flex-direction: column; align-items: center; }
.operate-loop-description { color: var(--text-secondary); font-size: 13px; line-height: 1.4; letter-spacing: -.025em; min-height: 37px; }
.operate-process { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 7px; row-gap: 6px; margin-top: auto; font-size: 13px; line-height: 1.4; letter-spacing: -.025em; color: var(--text-secondary); }
.operate-process li { display: inline-flex; align-items: center; gap: 7px; }
.operate-process li + li::before { content: ""; flex: 0 0 12px; width: 12px; height: 10px; background: var(--blue); clip-path: polygon(0 44%, 80% 44%, 51% 10%, 59% 2%, 100% 50%, 59% 98%, 51% 90%, 80% 56%, 0 56%); }
.planned-badge { display: inline-block; width: max-content; max-width: 100%; padding: 2px 8px; border: 1px solid #bdd3fa; border-radius: 20px; background: var(--blue-soft); color: var(--blue); font-size: 10px; line-height: 1.4; font-weight: 500; letter-spacing: 0; vertical-align: middle; }
.operate-loop > .planned-badge { position: absolute; top: 10px; right: 10px; }
.stage--launch .features h4 .planned-badge { margin-left: 5px; }

@container operate (max-width: 720px) {
  .operate-product { grid-template-columns: minmax(180px, 1fr) minmax(0, 1.8fr); gap: 10px; padding: 10px; }
  .operate-product-preview { gap: 10px; }
  .operate-product h3 { font-size: 15px; white-space: nowrap; }
  .operate-browser { flex-basis: 76px; min-width: 60px; }
  .operate-signals li { font-size: 12px; padding-inline: 5px; gap: 7px; }
  .operate-signals .icon { width: 25px; height: 25px; }
  .operate-loop h3 { font-size: 16px; }
  .operate-loop { padding-inline: 10px; }
  .operate-process { font-size: 12px; column-gap: 5px; }
  .operate-process li { gap: 5px; }
  .operate-process li + li::before { flex-basis: 10px; width: 10px; }
}
@container operate (max-width: 600px) {
  .operate-product { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .operate-product-preview { justify-content: center; }
  .operate-product h3 { font-size: 18px; white-space: normal; }
  .operate-browser { flex-basis: 90px; }
  .operate-signals { border-top: 1px solid var(--line); padding-top: 12px; }
  .operate-signals li:first-child { border-left: 0; }
  .operate-loops { grid-template-columns: minmax(0, 1fr); padding-left: 28px; gap: 20px; }
  .operate-loop { gap: 12px; padding: 20px; }
  .operate-loop-heading, .operate-loop-description { min-height: 0; }
  .operate-loop h3 { font-size: 18px; }
  .operate-loop-description, .operate-process { font-size: 16px; }
  .operate-loop-icon { width: 40px; height: 40px; }
  .operate-process { margin-top: 4px; }
}
@container operate (max-width: 380px) {
  .operate-signals { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 0; }
  .operate-signals li:nth-child(odd) { border-left: 0; }
  .operate-process { column-gap: 6px; }
  .operate-process li { gap: 6px; }
}
@media screen and (min-width: 1200px) and (max-height: 860px) {
  .operate-map { gap: 22px; }
  .operate-product { padding: 10px; }
  .operate-loop { padding-block: 14px; gap: 10px; }
  .operate-loop-icon { width: 40px; height: 40px; }
  .operate-loop-description { min-height: 0; }
  .operate-process { margin-top: auto; padding-top: 4px; }
}
@media screen and (min-width: 1200px) and (max-height: 760px) {
  .operate-map { gap: 20px; }
  .operate-loop { gap: 9px; padding-block: 12px; }
  .operate-loop-icon { width: 36px; height: 36px; }
  .operate-context .context-platform { min-height: 52px; }
}
@media screen and (min-width: 1200px) and (max-height: 660px) {
  .operate-map { gap: 18px; }
  .operate-product { padding: 8px; }
  .operate-loop { gap: 8px; padding-block: 10px; }
}
@media screen and (max-width: 767px), screen and (max-width: 1199px) and (max-height: 500px) and (pointer: coarse) {
  .operate-map { gap: 30px; }
  .operate-product { padding: 16px; }
  .operate-product h3 { font-size: 18px; }
  .operate-signals li { font-size: 14px; }
  .operate-loops { grid-template-columns: minmax(0, 1fr); padding-left: 28px; gap: 20px; }
  .operate-loop { padding: 20px 16px; gap: 12px; }
  .operate-loop-heading, .operate-loop-description { min-height: 0; }
  .operate-loop h3 { font-size: 18px; }
  .operate-loop-description, .operate-process { font-size: 16px; }
  .operate-loop-icon { width: 40px; height: 40px; }
  .operate-process { margin-top: 4px; }
  .planned-badge { font-size: 12px; }
}
@media print {
  .operate-product, .operate-context, .operate-loop { break-inside: avoid; }
}

/* ==========================================================================
   Ways of Working — a dedicated page using the shared type, shell and icons.
   Original photography introduces the people; the line describes the journey.
   ========================================================================== */
.ways-of-working {
  --wow-accent: #0052ff;
  --wow-ink: var(--wow-accent);
  --wow-copy: #445164;
  --wow-line: var(--line);
  --wow-tint: var(--surface);
  color: var(--text-primary);
  background: var(--bg);
}
.ways-of-working .eyebrow { color: var(--wow-ink); }
.ways-of-working .icon { color: var(--wow-ink); }
.ways-of-working :is(h1, h2, h3, p) { overflow-wrap: anywhere; }
.wow-dot { color: var(--wow-ink); }
/* This editorial opening reveals Vision instead of filling the viewport. */
.wow-intro-shell { min-height: 0; }
.wow-intro { display: grid; flex: none; column-gap: clamp(36px, 4vw, 64px); padding-block: 48px; }
.wow-intro-copy { min-width: 0; padding-bottom: 0; }
.wow-intro h1 { max-width: 10ch; text-wrap: balance; }
.wow-lead { color: var(--wow-copy); }
.wow-hero-photo, .wow-journey-photo { min-width: 0; }
.wow-hero-photo { width: 100%; max-width: 800px; justify-self: end; }
/* Preserve the hero photograph; art-direct the Journey detail through CSS. */
.wow-hero-image, .wow-journey-image { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 853; object-fit: contain; border-radius: var(--radius-sm); }
.wow-section { padding-block: 80px; }
.wow-section-header { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-6); margin-bottom: var(--space-12); }
.wow-section-number { font-size: 22px; line-height: 1; font-weight: 550; letter-spacing: -.045em; color: var(--wow-ink); }
.wow-section-number::after { content: ""; display: block; width: 24px; height: 2px; margin-top: 12px; background: var(--wow-accent); }
.wow-section-header .eyebrow { margin-bottom: 8px; }
.wow-section-header h2 { font-size: clamp(32px, 3.15vw, 46px); font-weight: 740; line-height: 1.08; letter-spacing: -.05em; }
.wow-section-description { max-width: 760px; margin-top: 16px; font-size: 20px; line-height: 1.5; letter-spacing: -.025em; color: var(--wow-copy); }
.wow-vision { padding-top: 64px; border-block: 1px solid var(--wow-line); background: var(--wow-tint); }
/* Open propositions give the longer descriptions room to read as an essay. */
.wow-vision-grid, .wow-belief-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 64px; }
.wow-proposition, .wow-belief { min-width: 0; display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-rows: subgrid; grid-row: span 2; gap: 16px 24px; padding-block: 28px 12px; border-top: 1px solid var(--wow-line); transition: border-color var(--motion) ease; }
.wow-proposition-top, .wow-belief-top { grid-column: 1; grid-row: 1 / 3; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding-top: 4px; }
.wow-proposition h3, .wow-proposition p, .wow-belief h3, .wow-belief p { grid-column: 2; }
.wow-item-number { font-size: 15px; font-weight: 550; line-height: 1; letter-spacing: -.025em; color: var(--wow-ink); font-variant-numeric: tabular-nums; }
.wow-proposition-top .icon, .wow-belief-top .icon { width: 26px; height: 26px; }
.wow-proposition h3, .wow-milestone h3, .wow-belief h3 { font-size: 22px; font-weight: 650; line-height: 1.2; letter-spacing: -.035em; }
.wow-proposition h3, .wow-belief h3 { font-size: 26px; }
.wow-proposition p, .wow-milestone p, .wow-belief p { color: var(--wow-copy); font-size: 17px; line-height: 1.65; letter-spacing: -.015em; }
.wow-proposition p, .wow-belief p { max-width: 54ch; font-size: 18px; }
.wow-journey { --wow-journey-gap: 32px; }
.wow-journey-intro { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: var(--wow-journey-gap); margin-bottom: 48px; }
.wow-journey-intro .wow-section-header { grid-column: 1 / 3; margin-bottom: 0; }
.wow-journey-photo { grid-column: 3 / 5; width: 100%; }
.wow-journey-image { aspect-ratio: 12 / 5; object-fit: cover; object-position: 50% 55%; }
.wow-journey-track { position: relative; isolation: isolate; }
.wow-journey-path { position: absolute; z-index: -1; top: 0; left: calc((100% - 3 * var(--wow-journey-gap)) / 8); width: calc((100% + var(--wow-journey-gap)) * .75); height: 80px; fill: none; stroke: var(--wow-ink); stroke-width: 1.5; overflow: visible; }
.wow-journey-path path { vector-effect: non-scaling-stroke; }
.wow-milestones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--wow-journey-gap); }
.wow-milestone { min-width: 0; display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: var(--space-4); }
.wow-milestone-marker { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 48px; max-width: 100%; margin: 0 auto 12px; }
.wow-milestone-marker .wow-item-number { padding-inline: 4px; background: var(--bg); }
.wow-milestone-icon { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 auto; background: var(--bg); }
.wow-milestone-marker .icon { width: 28px; height: 28px; }
.wow-beliefs { --wow-copy: #c5d6df; --wow-accent: #0be0d5; --wow-ink: var(--wow-accent); --wow-line: #1d4b54; color: #f5f8ff; background: #021b2c; }
@media (hover: hover) and (pointer: fine) {
  .wow-proposition:hover { border-color: #83aefb; }
  .wow-belief:hover { border-color: #439590; }
}
@media (prefers-reduced-motion: reduce) {
  .wow-proposition, .wow-belief { transition: none; }
}
@media (min-width: 950px) {
  /* Budget header, hero insets and the next heading; width keeps the photo's ratio. */
  .wow-intro { --wow-photo-width: clamp(360px, calc((100svh - var(--site-header-height) - 240px) * 1.5), 800px); grid-template-columns: minmax(0, 1fr) minmax(0, min(56%, var(--wow-photo-width))); }
  .wow-intro-copy > .eyebrow { margin-bottom: 28px; }
  .wow-intro h1 { font-size: clamp(72px, 6.5vw, 104px); }
  .wow-lead { max-width: 29ch; font-size: clamp(21px, 1.75vw, 26px); margin-top: 24px; }
}
@media (min-width: 950px) and (max-height: 860px) {
  .wow-intro { padding-block: 32px; }
  .wow-intro-copy > .eyebrow { margin-bottom: 24px; }
  .wow-intro h1 { font-size: clamp(72px, 10.5svh, 92px); }
  .wow-lead { font-size: 22px; }
  .wow-vision { padding-top: 56px; }
}
@media (min-width: 768px) and (max-width: 1050px) {
  /* Make room for the fourth top-level link without changing the menu model. */
  .hero-header { gap: 24px; }
  .primary-nav { gap: 18px; }
  .hero-header .brand-signature { gap: 7px; font-size: 9px; letter-spacing: .13em; }
}
@media (max-width: 1199px) {
  .wow-vision-grid, .wow-belief-grid { column-gap: 40px; }
  .wow-journey-intro { margin-bottom: 40px; }
  /* Keep the journey in one reading sequence; its rail follows content height. */
  .wow-journey-path { display: none; }
  .wow-milestones { grid-template-columns: minmax(0, 1fr); max-width: 800px; margin-inline: auto; }
  .wow-milestone { position: relative; grid-row: auto; grid-template: auto auto / 92px minmax(0, 1fr); gap: 10px 28px; padding: 0 0 36px; }
  .wow-milestone::before { content: ""; position: absolute; z-index: -1; left: 45px; top: 28px; bottom: -28px; border-left: 1.5px solid var(--wow-ink); }
  .wow-milestone:last-child { padding-bottom: 0; }
  .wow-milestone:last-child::before { display: none; }
  .wow-milestone-marker { grid-column: 1; grid-row: 1 / 3; align-self: start; justify-self: center; margin: 0; }
  .wow-milestone h3, .wow-milestone p { grid-column: 2; }
  .wow-milestone h3 { padding-top: 3px; }
  .wow-milestone p { padding-right: 0; }
}
@media (max-width: 949px) {
  .wow-intro { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: 40px 48px; }
  .wow-intro-copy { max-width: 620px; }
  .wow-lead { max-width: 560px; }
  .wow-hero-photo { max-width: none; }
  .wow-journey-intro { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .wow-journey-intro .wow-section-header, .wow-journey-photo { grid-column: 1; }
  .wow-journey-image { aspect-ratio: 1280 / 853; object-fit: contain; }
}
@media (max-width: 767px), (max-width: 1199px) and (max-height: 500px) and (pointer: coarse) {
  .wow-intro { grid-template-columns: minmax(0, 1fr); padding-block: 36px 48px; gap: 32px; }
  .wow-intro h1 { font-size: clamp(52px, 14vw, 76px); }
  .wow-hero-photo { max-width: none; }
  .wow-section { padding-block: 48px; }
  .wow-section-header { grid-template-columns: 28px minmax(0, 1fr); gap: 16px; margin-bottom: 28px; }
  .wow-section-header h2 { font-size: clamp(30px, 7vw, 38px); }
  .wow-section-number { font-size: 20px; }
  .wow-section-description { font-size: 18px; }
  .wow-proposition h3, .wow-milestone h3, .wow-belief h3 { font-size: 22px; }
  .wow-vision-grid, .wow-belief-grid { grid-template-columns: minmax(0, 1fr); }
  .wow-proposition, .wow-belief { grid-template-columns: 28px minmax(0, 1fr); gap: 14px 16px; padding-block: 24px 0; }
  .wow-proposition p, .wow-belief p { font-size: 17px; }
  .wow-journey-intro { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-bottom: 48px; }
  .wow-journey-intro .wow-section-header, .wow-journey-photo { grid-column: 1; }
  .wow-journey-image { aspect-ratio: 1280 / 853; object-fit: contain; }
  .wow-milestone { grid-template-columns: 56px minmax(0, 1fr); column-gap: 20px; padding-bottom: 32px; }
  .wow-milestone-marker { width: 56px; }
  .wow-milestone-icon { width: 56px; height: 56px; }
  .wow-milestone-marker .icon { width: 26px; height: 26px; }
  .wow-milestone::before { left: 27px; }
}
@media print {
  .ways-of-working { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .wow-intro-shell { min-height: 0; }
  .wow-intro { padding-block: 24px; }
  .wow-section { padding-block: 24px; }
  .wow-section-header { break-after: avoid; }
  .wow-proposition, .wow-milestone, .wow-belief { break-inside: avoid; }
}