/* Hallmark · shape: Catalogue · genre: modern-minimal · theme: Dusk (by request, recolored white/navy to the product frontend) · job: sign up · draw: 900ecf
 * hero: Stage (the hour) · nav: edge-aligned, fog glass once scrolled · footer: colophon block · imagery: photographs, library 1; product sample built in a slot · signature: the review list in smoked glass over the fog
 * dusk: fog/periwinkle-apricot/well (glass only over photographs) · axes: light/grotesk-sans/cool · posture: committed · contrast: pass · fold: pass · v2.0.0
 * hero-review: fix → fixed (proof line day-muted→day-ink where fog washed it; headline swapped for the owned mechanism, speed pick moved to lead; chip nowrap at 375) */
/* Hallmark · pre-emit critique: P5 H4 E4 S4 R5 V4 · weakest: S, "AI writer" pages are a dime a dozen; every line names RFP mechanics (review states, sources, portal) and the sample cites real surfaces */
/* Hallmark · surface: absolute · white paper is the product frontend's own, modern-minimal loosens 7b */
@import url("./tokens.css");
@import url("./base.css");

/* ---------- skip link ---------- */
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-fog); border-radius: 0 0 var(--radius-inner) 0; }
.skip:focus-visible { top: 0; outline-offset: -4px; }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border: 1px solid var(--color-accent); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font: 600 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; box-shadow: inset 0 1px 0 color-mix(in oklab, var(--color-light) 28%, transparent); transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-accent-hi); border-color: var(--color-accent-hi); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn--quiet { background: transparent; color: inherit; border-color: color-mix(in oklab, currentColor 32%, transparent); box-shadow: none; }
.btn--quiet:hover { background: color-mix(in oklab, currentColor 8%, transparent); border-color: color-mix(in oklab, currentColor 45%, transparent); }
.btn--sm { min-height: 40px; padding: 0 var(--space-md); font-size: var(--text-sm); }
@media (prefers-reduced-motion: reduce) { .btn { transition: background-color var(--dur-short) linear, border-color var(--dur-short) linear; } }

/* ---------- nav: edge-aligned, fog glass once it leaves the photograph ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-sticky-nav); color: var(--color-fog); background: linear-gradient(to bottom, color-mix(in oklab, var(--color-shade) 68%, transparent), transparent 100px); border-bottom: 1px solid transparent; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.nav.is-scrolled { color: var(--color-ink); background: color-mix(in oklab, var(--color-fog) 82%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); border-bottom-color: var(--color-rule); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 72px; }
.nav__mark { display: inline-flex; align-items: center; gap: 0.5em; font: 600 1.0625rem/1 var(--font-display); letter-spacing: -0.01em; text-decoration: none; }
.nav__mark svg { width: 1.3em; height: 1.3em; flex: none; }
.nav__mark:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: 3px; }
.nav__links { display: flex; align-items: center; gap: var(--space-lg); }
.nav__links a { font-size: var(--text-sm); font-weight: 500; text-decoration: none; opacity: 0.92; }
.nav__links a:hover { opacity: 1; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.nav__links a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: 3px; }
.nav__actions { display: flex; align-items: center; gap: var(--space-sm); }
.nav__actions .btn--quiet { min-height: 40px; }
.nav .menu summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; cursor: pointer; border-radius: var(--radius-inner); }
.nav .menu summary::-webkit-details-marker { display: none; }
.nav .menu summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.nav .menu[open] summary { background: color-mix(in oklab, currentColor 10%, transparent); }
.menu__panel { display: none; position: fixed; top: 72px; left: var(--space-md); right: var(--space-md); padding: var(--space-md); gap: var(--space-2xs); background: var(--color-card); color: var(--color-ink); border: 1px solid var(--color-rule); border-radius: var(--radius-card); box-shadow: var(--shadow-soft); }
.menu[open] > .menu__panel { display: grid; }
.menu__panel a { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-inner); font-size: var(--text-md); font-weight: 500; text-decoration: none; white-space: nowrap; }
.menu__panel a:hover { background: var(--color-paper-2); }
.menu__panel a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
@media (max-width: 60rem) { .nav__links { display: none; } .nav .menu { display: block; } }
@media (min-width: 60.001rem) { .nav .menu { display: none; } }
@media (max-width: 24rem) { .nav__actions .btn--quiet { display: none; } }

/* ---------- the launch: navy illustration sky, light head on its empty part ---------- */
.hero { position: relative; isolation: isolate; }
.hero__photo { position: absolute; inset: 0; z-index: 0; border-radius: 0; margin: 0; }
.hero__photo img { object-position: 50% 100%; }
.hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background:
  linear-gradient(to bottom, color-mix(in oklab, var(--color-shade) 46%, transparent) 0%, transparent 26%, transparent 88%, var(--color-paper) 100%); }
.hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: center; min-height: 100dvh; padding-top: 120px; padding-bottom: calc(var(--space-xl) + 3rem); }
.hero__text { grid-column: 1 / 6; color: var(--color-band-ink); }
.hero__text h1 { margin-bottom: var(--space-md); }
.hero__text .lead { color: var(--color-band-muted); margin-bottom: var(--space-lg); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.hero__proof { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2xs); font-size: var(--text-sm); color: var(--color-band-ink); }
.hero__proof span { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.hero__proof svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--color-accent-2); }
/* navy button disappears on the navy sky: the hero and the unscrolled nav carry it light */
.hero__text .btn:not(.btn--quiet), .nav:not(.is-scrolled) .btn:not(.btn--quiet) { background: var(--color-light); border-color: var(--color-light); color: var(--color-accent-deep); }
.hero__text .btn:not(.btn--quiet):hover, .nav:not(.is-scrolled) .btn:not(.btn--quiet):hover { background: var(--color-fog); border-color: var(--color-fog); }

/* ---------- the product in smoked glass ---------- */
.glass { background: var(--glass); border-radius: var(--radius-card); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.35); backdrop-filter: blur(var(--glass-blur)) saturate(1.35); box-shadow: var(--glass-hi), var(--shadow-card); color: var(--color-band-ink); }
.hero__product { grid-column: 6 / 13; }
@media (min-width: 60rem) { .hero__product { margin-right: -32px; } }
/* hero scene on paper: white card instead of smoked glass; scoped var flip, demo.html keeps its dark stage */
.hero__product { background: var(--color-card); --color-band-ink: var(--color-ink); --color-band-muted: var(--color-muted); --color-glass-deep: var(--color-paper-2); --glass-row: var(--color-rule); }
.hero__product .scene__state, .hero__product .srow__conf.is-mid, .hero__product .srow__status.tone-review,
.hero__product .pane__state, .hero__product .pane__stateword.is-open { color: var(--color-accent-2-ink); }
.hero__product .srow__conf.is-low { color: oklch(55% 0.13 27); }
.hero__product .docchip__icon--xls { color: oklch(42% 0.1 150); }
.hero__product .docchip__icon--pdf { color: oklch(48% 0.13 27); }
.hero__product .docchip__icon--doc { color: oklch(42% 0.1 255); }
.pane { padding: var(--space-lg); }
.pane__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); padding-bottom: var(--space-md); }
.pane__head h2 { font-size: var(--text-title); color: inherit; }
.pane__state { font-size: var(--text-sm); font-weight: 500; white-space: nowrap; color: var(--color-accent-2); padding: var(--space-2xs) var(--space-md); background: var(--color-glass-deep); border-radius: var(--radius-pill); }
.pane__list { list-style: none; margin: 0; padding: 0; }
.pane__list li { padding-block: var(--space-md); border-top: 1px solid var(--glass-row); display: grid; gap: var(--space-2xs); }
.pane__q { font-size: 0.9375rem; font-weight: 500; }
.pane__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); font-size: var(--text-sm); color: var(--color-band-muted); }
.pane__src { color: var(--color-band-muted); white-space: nowrap; }
.pane__stateword { display: inline-flex; align-items: center; gap: var(--space-2xs); white-space: nowrap; color: var(--color-signal); }
.pane__stateword svg { width: 15px; height: 15px; flex-shrink: 0; }
.pane__stateword.is-open { color: var(--color-accent-2); }
.pane__foot { display: grid; gap: var(--space-2xs); padding-top: var(--space-md); border-top: 1px solid var(--glass-row); font-size: var(--text-sm); color: var(--color-band-muted); }
.pane__bar { height: 6px; border-radius: var(--radius-pill); background: var(--glass-row); overflow: hidden; }
.pane__bar i { display: block; height: 100%; width: 35%; border-radius: inherit; background: var(--color-signal); }

/* rows rise in once (the reveal; visible without script) */
.js .pane [data-reveal] { opacity: 0; transform: translateY(8px); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); transition-delay: calc(var(--i, 0) * 40ms); }
.js .pane [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .pane [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* ---------- hero scene: live funnel demo; the static .pane above it is the accessible truth ---------- */
.scene-card { position: relative; }
.scene-card.is-fading .scene, .scene-card.is-fading .scene__static { opacity: 0; }
.scene__static { transition: opacity 680ms var(--ease-out); }
.scene-card[data-live="on"] .scene__static { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.scene { display: none; padding: var(--space-lg); transition: opacity 680ms var(--ease-out); }
.scene-card[data-live="on"] .scene { display: block; }
.scene__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); min-height: 34px; }
.scene__head h2 { font-size: var(--text-title); color: inherit; }
.scene__state { font-size: var(--text-sm); font-weight: 500; white-space: nowrap; color: var(--color-accent-2); padding: var(--space-2xs) var(--space-md); background: var(--color-glass-deep); border-radius: var(--radius-pill); opacity: 0; transition: opacity calc(var(--dur-long) * 1.5) var(--ease-out); }
.scene[data-showstate] .scene__state { opacity: 1; }
.scene__body { position: relative; height: 300px; margin-top: var(--space-md); overflow: hidden; }
.act { position: absolute; inset: 0; transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out); }
.act--fill, .act--knowledge, .act--agents { opacity: 0; transform: translateY(10px); pointer-events: none; }
.scene:not([data-phase="drop"]):not([data-phase="extract"]) .act--drop { opacity: 0; transform: translateY(-10px); pointer-events: none; }
.scene[data-phase="fill"] .act--fill, .scene[data-phase="hold"] .act--fill,
.scene[data-phase="knowledge"] .act--knowledge, .scene[data-phase="agents"] .act--agents { opacity: 1; transform: none; pointer-events: auto; }
.steps { display: flex; align-items: center; margin: var(--space-sm) 0 0; padding: 0; list-style: none; font-size: var(--text-xs); color: var(--color-band-muted); }
.steps li { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.steps li + li::before { content: ""; width: 14px; height: 1px; background: var(--glass-row); margin-inline: 6px; }
.steps li i { font-style: normal; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--color-glass-deep); font-size: 10px; transition: background-color var(--dur-short) linear, color var(--dur-short) linear; }
.steps li[data-on] { color: var(--color-band-ink); }
.steps li[data-on] i { background: var(--color-accent-2); color: var(--color-accent-ink); }
.steps li[data-done] i { background: var(--color-signal); color: oklch(20% 0.035 265); }
.kchip { display: inline-flex; align-items: center; gap: 6px; padding: var(--space-2xs) var(--space-sm); font-size: var(--text-xs); color: var(--color-band-muted); background: var(--color-glass-deep); border-radius: var(--radius-pill); opacity: 0; transform: translateY(8px); transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out); }
.kchip.is-in { opacity: 1; transform: none; }
.kchip__dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.kchip__icon { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0; }
.kchip__icon svg { width: 12px; height: 12px; }
.agent { flex-direction: column; gap: var(--space-xs); padding: var(--space-sm); border-radius: var(--radius-inner); min-width: 72px; justify-content: center; }
.agent__bot { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; }
.agent__bot svg { width: 28px; height: 28px; }
.agent__role { color: var(--color-band-ink); }
[data-agents].is-check .agent__bot { animation: funnel-pulse 690ms var(--ease-out) var(--pd, 0ms); }
.kdomains { display: grid; gap: var(--space-xs); height: 100%; align-content: center; }
.kdomain { justify-content: flex-start; gap: var(--space-sm); padding: var(--space-xs) var(--space-sm); }
.kdomain__name { color: var(--color-band-ink); }
.kdomain__meta { display: inline-flex; align-items: center; gap: var(--space-xs); margin-left: auto; }
.kdomain__bar { position: relative; width: 64px; height: 4px; border-radius: var(--radius-pill); background: var(--color-glass-deep); overflow: hidden; }
.kdomain__bar b { position: absolute; inset: 0; width: 0; border-radius: inherit; background: var(--color-signal); transition: width 420ms var(--ease-out); }
.kdomain.is-scan .kdomain__bar b { background-image: repeating-linear-gradient(115deg, transparent 0 4px, oklch(100% 0 0 / 0.16) 4px 8px); animation: bar-scan 700ms linear infinite; }
@keyframes bar-scan { to { background-position: 16px 0; } }
.kdomain.is-scan .kchip__icon { animation: funnel-pulse 900ms var(--ease-out) infinite; }
.kdomain__count { font-style: normal; font-size: var(--text-xs); font-variant-numeric: tabular-nums; min-width: 9ch; text-align: right; color: var(--color-band-muted); }
.kdomain.is-hit .kdomain__count { color: var(--color-signal); }
.docs { display: grid; gap: var(--space-xs); justify-items: center; margin-bottom: var(--space-lg); }
.docchip { display: inline-flex; align-items: center; gap: var(--space-xs); max-width: 100%; padding: var(--space-2xs) var(--space-sm); font-size: var(--text-xs); color: var(--color-band-muted); background: var(--color-glass-deep); border-radius: var(--radius-pill); }
.docchip__icon { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; color: var(--color-band-ink); flex-shrink: 0; }
.docchip__icon svg { width: 12px; height: 12px; }
.docchip__icon--xls { background: oklch(52% 0.11 150 / 0.35); color: oklch(80% 0.14 150); }
.docchip__icon--pdf { background: oklch(52% 0.16 27 / 0.35); color: oklch(80% 0.12 27); }
.docchip__icon--doc { background: oklch(52% 0.12 255 / 0.35); color: oklch(80% 0.09 255); }
.docchip__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docchip.is-eaten { animation: doc-eat 720ms var(--ease-in) forwards; }
@keyframes doc-eat { 55% { opacity: 1; } 100% { transform: translateY(var(--eat-y, 120px)) scale(0.1) rotate(-6deg); opacity: 0; } }
.funnel { width: 88px; margin-inline: auto; color: var(--color-band-muted); }
.funnel.is-pulse { animation: funnel-pulse 630ms var(--ease-out); }
@keyframes funnel-pulse { 35% { transform: scale(1.12) translateY(3px); } }
.scene__parse { margin-top: var(--space-sm); text-align: center; font-size: var(--text-xs); color: var(--color-band-muted); min-height: 1.2em; }
.pills { position: absolute; left: 50%; top: 58%; width: 0; }
.pill { position: absolute; left: 0; top: 0; transform: translateX(-50%); padding: var(--space-2xs) var(--space-sm); font-size: var(--text-xs); white-space: nowrap; color: var(--color-band-ink); background: var(--color-glass-deep); border-radius: var(--radius-pill); opacity: 0; }
.pills.is-emit .pill { animation: pill-fly 1140ms var(--ease-in-out) var(--pd, 0ms) forwards; }
@keyframes pill-fly { 12% { opacity: 1; } 100% { transform: translateX(calc(-50% + var(--px, 0px))) translateY(64px) scale(0.7); opacity: 0; } }
.tabs { display: flex; gap: var(--space-2xs); padding: var(--space-2xs); background: var(--color-glass-deep); border-radius: var(--radius-pill); margin-bottom: var(--space-sm); }
.tabs__tab { flex: 1; min-width: 0; padding: var(--space-2xs) var(--space-xs); font-size: var(--text-xs); color: var(--color-band-muted); background: none; border: 0; border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background-color var(--dur-short) linear, color var(--dur-short) linear; }
.tabs__tab[aria-selected="true"] { color: var(--color-accent-ink); background: var(--color-accent-2); font-weight: 500; }
.srow { padding-block: var(--space-sm); border-top: 1px solid var(--glass-row); display: grid; gap: var(--space-2xs); opacity: 0; transform: translateY(10px); transition: opacity 450ms var(--ease-out), transform 450ms var(--ease-out); }
.srow.is-in { opacity: 1; transform: none; }
.srow__q { font-size: 0.9375rem; font-weight: 500; }
.srow__ans { font-size: var(--text-sm); color: var(--color-band-ink); opacity: 0.82; min-height: 1.4em; }
.srow__ans.is-typing::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -0.15em; background: var(--color-signal); animation: caret 1050ms steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.srow__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); font-size: var(--text-sm); color: var(--color-band-muted); }
.srow__meta-l { display: inline-flex; align-items: center; gap: var(--space-sm); min-width: 0; }
.srow__src, .srow__conf { opacity: 0; transition: opacity 390ms var(--ease-out); }
.srow.is-done .srow__src, .srow.is-done .srow__conf { opacity: 1; }
.srow__conf { font-size: var(--text-xs); padding: 1px 8px; border-radius: var(--radius-pill); background: var(--color-glass-deep); font-variant-numeric: tabular-nums; transition-delay: 180ms; }
.srow__conf.is-high { color: var(--color-signal); }
.srow__conf.is-mid { color: var(--color-accent-2); }
.srow__conf.is-low { color: oklch(75% 0.13 27); }
.srow__status { display: inline-flex; align-items: center; gap: var(--space-2xs); white-space: nowrap; color: var(--color-band-muted); }
.srow__status svg { width: 15px; height: 15px; flex-shrink: 0; }
.srow__status.is-working { animation: working 1350ms var(--ease-in-out) infinite; }
@keyframes working { 50% { opacity: 0.45; } }
.srow__status.tone-approved { color: var(--color-signal); }
.srow__status.tone-review { color: var(--color-accent-2); }
.srow__status.tone-draft { color: var(--color-band-muted); }
.srow__status.pop { animation: pop 390ms var(--ease-out); }
@keyframes pop { 0% { transform: scale(0.6); } 60% { transform: scale(1.14); } }
.scene__foot { display: grid; gap: var(--space-2xs); padding-top: var(--space-md); border-top: 1px solid var(--glass-row); margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-band-muted); opacity: 0; transition: opacity calc(var(--dur-long) * 1.5) var(--ease-out); }
.scene[data-showstate] .scene__foot { opacity: 1; }
.scene__bar { height: 6px; border-radius: var(--radius-pill); background: var(--glass-row); overflow: hidden; }
.scene__bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--color-signal); transition: width 1050ms var(--ease-out); }
@media (max-width: 26rem) { .scene__body { height: 340px; } .docchip__name { max-width: 26ch; } .steps { font-size: 10px; } .steps li + li::before { width: 8px; margin-inline: 4px; } }

@media (max-width: 60rem) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); padding-top: 104px; padding-bottom: var(--space-lg); min-height: 0; }
  .hero__text, .hero__product { grid-column: auto; }
  /* stacked text spans the full width: crop to plain sky */
  .hero__photo img { object-position: 50% 0%; }
}

/* ---------- sections ---------- */
.section { padding-block: var(--section-gap); }
.section--tight { padding-block: var(--section-gap-s); }
.headblock { max-width: 640px; margin-bottom: var(--space-2xl); }
.headblock h2 { margin-bottom: var(--space-md); }
.headblock .lead { color: var(--color-ink-2); }

/* tour: a ruled list beside one pane (Dusk range; the pane is a bone well, glass stays over the photograph) */
.tour__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: start; }
.tour__list { display: grid; }
.tour__step { position: relative; display: grid; gap: var(--space-2xs); padding: var(--space-md) var(--space-md) var(--space-md) var(--space-lg); text-align: left; background: none; border: 0; border-top: 1px solid var(--color-rule); cursor: pointer; color: inherit; font: inherit; }
.tour__step:last-child { border-bottom: 1px solid var(--color-rule); }
.tour__step::before { content: ""; position: absolute; left: 0; top: var(--space-lg); width: 7px; height: 7px; border-radius: 50%; background: var(--color-rule); }
.tour__step[aria-selected="true"] { background: var(--color-paper-2); border-radius: 0 var(--radius-inner) var(--radius-inner) 0; }
.tour__step[aria-selected="true"]::before { background: var(--color-accent); }
.tour__step:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.tour__step h3 { font-size: var(--text-title); }
.tour__step p { display: none; color: var(--color-muted); }
.tour__step[aria-selected="true"] p { display: block; }
.tour__pane { position: sticky; top: 104px; background: var(--color-well); border-radius: var(--radius-card); padding: var(--space-lg); min-height: 420px; }
.tour__pane > .pane-card { display: grid; gap: var(--space-sm); background: var(--color-card); border: 1px solid var(--color-well-rule); border-radius: var(--radius-inner); padding: var(--space-lg); min-height: 380px; align-content: start; }
.pcard__title { font: 500 var(--text-sm)/1.4 var(--font-body); color: var(--color-well-muted); }
.pcard__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2xs) var(--space-md); padding-block: var(--space-sm); border-top: 1px solid var(--color-well-rule); font-size: 0.9375rem; }
.pcard__row:first-of-type { border-top: 0; padding-top: 0; }
.pcard__chip { display: inline-flex; align-items: center; gap: var(--space-2xs); font-size: var(--text-sm); font-weight: 500; }
.pcard__chip svg { width: 15px; height: 15px; }
.pcard__chip.is-done { color: var(--color-accent); }
.pcard__chip.is-open { color: var(--color-accent-2-ink); }
.pcard__note { font-size: var(--text-sm); color: var(--color-well-muted); }
.pcard__note b { font-weight: 600; color: var(--color-ink-2); }
.pcard__src { display: inline-flex; align-items: center; gap: var(--space-2xs); padding: var(--space-2xs) var(--space-md); background: var(--color-accent-soft); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 500; color: var(--color-accent-deep); }
.pcard__bar { height: 6px; border-radius: var(--radius-pill); background: var(--color-paper-3); overflow: hidden; }
.pcard__bar i { display: block; height: 100%; width: 82%; border-radius: inherit; background: var(--color-accent); color: var(--color-card); }
.pcard__comment { border-left: 2px solid var(--color-accent-2); padding-left: var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); }

/* rows: capabilities parted by hairlines */
.rows { display: grid; }
.rows__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); padding-block: var(--space-lg); border-top: 1px solid var(--color-rule); }
.rows__row:last-child { border-bottom: 1px solid var(--color-rule); }
.rows__row h3 { font-size: var(--text-title); }
.rows__row p { color: var(--color-muted); align-self: center; }

/* split: trust portal, benefits left, the hand-off card on bone right */
.split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: start; }
.split__head { grid-column: 1; }
.split__body { grid-column: 1; }
.split__well { grid-column: 2; grid-row: 1 / 3; position: sticky; top: 120px; background: var(--color-well); border-radius: var(--radius-card); padding: var(--space-xl); display: grid; gap: var(--space-md); }
.well__caption { font-size: var(--text-sm); color: var(--color-well-muted); }
.portal-card { background: var(--color-card); border: 1px solid var(--color-well-rule); border-radius: var(--radius-inner); padding: var(--space-lg); display: grid; gap: var(--space-md); }
.portal-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2xs) var(--space-md); font-weight: 600; }
.portal-card__head span { font-weight: 500; color: var(--color-accent-2-ink); font-size: var(--text-sm); }
.portal-card .pcard__bar i { width: 82%; }
.benefits { display: grid; margin-top: var(--space-lg); }
.benefits > div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); padding-block: var(--space-md); border-top: 1px solid var(--color-rule); }
.benefits > div:last-child { border-bottom: 1px solid var(--color-rule); }
.benefits h3 { font-size: 1.0625rem; font-weight: 600; }
.benefits p { color: var(--color-muted); font-size: var(--text-sm); align-self: center; }

/* navy band: security */
.band { background: var(--color-shade); color: var(--color-band-ink); }
.band .headblock .lead { color: var(--color-band-muted); }
.band__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); }
.band__grid h3 { font-size: 1.0625rem; }
.band__grid p { color: var(--color-band-muted); font-size: var(--text-sm); margin-top: var(--space-2xs); }

/* FAQ as ruled rows with native disclosure */
.faq { max-width: none; }
.faq__item { border-top: 1px solid var(--color-rule); }
.faq__item:last-child { border-bottom: 1px solid var(--color-rule); }
.faq__item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding-block: var(--space-lg); cursor: pointer; font: 500 1.0625rem/1.4 var(--font-body); color: var(--color-ink); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.faq__item summary svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-muted); transition: transform var(--dur-short) var(--ease-out); }
.faq__item[open] summary svg { transform: rotate(45deg); }
.faq__item[open] summary { color: var(--color-accent); }
.faq__item:not([open]) .faq__answer { display: none; }
.faq__answer { padding-bottom: var(--space-lg); color: var(--color-muted); max-width: 60ch; }

/* close: the hero's action again, on fog */
.close { background: var(--color-paper-2); }
.close__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--gap-columns); align-items: center; }
.close__inner .lead { margin-top: var(--space-md); }
.close__actions { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.footer { border-top: 1px solid var(--color-rule); padding-block: var(--space-xl) var(--space-lg); }
.footer__grid { display: grid; gap: var(--space-md); }
.footer__mark { font: 600 1.0625rem/1 var(--font-display); }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); }
.footer__links a { font-size: var(--text-sm); color: var(--color-muted); text-decoration-thickness: 1px; }
.footer__links a:hover { color: var(--color-ink); }
.footer__links a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: 3px; }
.footer__colophon { font-size: var(--text-sm); color: var(--color-muted); }
.footer__colophon a { color: inherit; }

@media (max-width: 60rem) {
  .tour__grid, .split { grid-template-columns: minmax(0, 1fr); }
  .tour__pane, .split__well { position: static; min-height: 0; padding: var(--space-lg); }
  .tour__pane > .pane-card { min-height: 0; }
  .split__well { grid-row: auto; }
  .rows__row, .benefits > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .band__grid { grid-template-columns: minmax(0, 1fr); }
}