:root {
  --ink: #0b0b0b;
  --muted: #66645f;
  --paper: #f7f6f2;
  --panel: #efeee9;
  --white: #fff;
  --line: rgba(11, 11, 11, .13);
  --orange: #f06f3c;
  --blue: #6178ff;
  --lime: #d8f271;
  --radius: 28px;
  --shell: min(1180px, calc(100% - 48px));
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button, select { font: inherit; }
button { color: inherit; }
button:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
img { max-width: 100%; display: block; }
section[id], .navigator-workspace { scroll-margin-top: 84px; }
.shell { width: var(--shell); margin-inline: auto; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 12px 16px; border-radius: 9px; }
.skip-link:focus { top: 16px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.site-header {
  height: 72px;
  padding: 0 max(24px, calc((100vw - 1180px) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  border-bottom: 1px solid var(--line);
  background: rgba(247, 246, 242, .88);
  backdrop-filter: blur(18px);
  position: sticky;
  top: 0;
  z-index: 20;
}
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; letter-spacing: -.03em; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; overflow: hidden; flex: 0 0 38px; background: #fff; }
.brand-mark img { width: 100%; height: 100%; max-width: none; object-fit: cover; transform: scale(1.38); }
.brand-copy { display: grid; gap: 1px; }
.brand-copy strong { font-size: 15px; line-height: 1.05; font-weight: 720; }
.brand-copy small { color: var(--muted); font-size: 9px; line-height: 1.1; letter-spacing: .01em; }
.desktop-nav { display: flex; align-items: center; gap: 28px; }
.desktop-nav a { text-decoration: none; font-size: 14px; }
.desktop-nav a:hover { opacity: .55; }
.header-pill, .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; text-decoration: none; transition: transform .2s ease, background .2s ease; }
.button { border: 0; cursor: pointer; }
.header-pill { background: var(--ink); color: #fff; padding: 11px 17px; font-size: 14px; }
.header-pill:hover, .button:hover { transform: translateY(-2px); }
.scroll-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; }
.scroll-progress span { display: block; width: 100%; height: 100%; background: var(--orange); transform: scaleX(0); transform-origin: left; }

.hero { min-height: 500px; padding: 104px 0 70px; display: grid; grid-template-columns: 1.25fr .75fr; align-items: end; gap: 60px; }
.eyebrow { margin: 0 0 20px; color: var(--muted); font-size: 13px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.hero h1 { max-width: 760px; margin: 0; font-size: clamp(50px, 5vw, 72px); line-height: 1.02; letter-spacing: 0; word-spacing: 0; font-weight: 520; }
.hero-highlight { color: #445de1; text-decoration-line: underline; text-decoration-color: var(--orange); text-decoration-thickness: .075em; text-underline-offset: .1em; }
.hero-copy { padding-bottom: 8px; }
.hero-copy > p { max-width: 520px; margin: 0 0 46px; font-size: clamp(20px, 2vw, 28px); line-height: 1.25; letter-spacing: -.035em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; }
.button { min-height: 48px; padding: 0 21px; font-size: 14px; font-weight: 600; }
.button-dark { background: var(--ink); color: #fff; }
.button-light { background: var(--white); border: 1px solid var(--line); }
.hero-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.hero-facts span { border-top: 1px solid var(--line); padding-top: 14px; color: var(--muted); font-size: 13px; }
.hero-facts strong { display: block; color: var(--ink); font-size: 28px; font-weight: 520; letter-spacing: -.04em; }

.navigator-section { padding: 40px 0 120px; }
.journey-intro { padding-bottom: 40px; }
.compact-heading { margin-bottom: 42px; }
.compact-heading h2 { max-width: 800px; }
.story-map { display: grid; grid-template-columns: minmax(160px, 1fr) 32px minmax(180px, 1fr) 32px minmax(180px, 1fr) 32px minmax(190px, 1.15fr); align-items: stretch; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: 0 18px 70px rgba(11,11,11,.06); }
.story-node { min-height: 160px; display: flex; flex-direction: column; justify-content: center; padding: 24px; border-radius: 18px; background: var(--panel); }
.story-node > span { margin-bottom: 16px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.story-node > strong { max-width: 180px; font-size: 20px; font-weight: 570; line-height: 1.08; letter-spacing: 0; }
.story-node > small { margin-top: 11px; color: var(--muted); font-size: 12px; line-height: 1.3; }
.story-node-question { border: 1px solid rgba(97,120,255,.32); background: #f1f3ff; }
.story-node-question > span, .story-node-question > small { color: #445de1; }
.story-node-orange { border-color: rgba(240,111,60,.34); background: #fff2eb; }
.story-node-orange > span, .story-node-orange > small { color: #c64a18; }
.story-node-outcome { background: #111; color: #fff; }
.story-node-outcome > span { color: var(--lime); }
.story-node-outcome > small { color: rgba(255,255,255,.58); }
.method-cloud { display: flex; gap: 5px; margin-top: 18px; }
.method-cloud i { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid rgba(11,11,11,.15); border-radius: 50%; background: #fff; color: var(--muted); font-size: 9px; font-style: normal; }
.story-connector { position: relative; min-width: 32px; }
.story-connector::before { content: ""; position: absolute; left: 5px; right: 5px; top: 50%; height: 1px; background: rgba(11,11,11,.25); }
.story-connector::after { content: "›"; position: absolute; right: 3px; top: calc(50% - 12px); color: var(--muted); font-size: 18px; }
.story-connector i { position: absolute; left: 5px; top: calc(50% - 3px); width: 7px; height: 7px; border-radius: 50%; background: var(--orange); animation: journey-pulse 3.2s ease-in-out infinite; }
.story-connector:nth-of-type(2) i { animation-delay: .7s; }
.story-connector:nth-of-type(3) i { animation-delay: 1.4s; }
@keyframes journey-pulse { 0%, 20% { transform: translateX(0); opacity: 0; } 35%, 70% { opacity: 1; } 85%, 100% { transform: translateX(19px); opacity: 0; } }

.navigator-workspace { display: grid; grid-template-columns: 255px minmax(0, 1fr); border-radius: 32px; overflow: clip; background: #111318; color: #fff; box-shadow: 0 28px 90px rgba(11,11,11,.15); }
.journey-rail { padding: 34px 24px; border-right: 1px solid rgba(255,255,255,.12); }
.journey-rail > p { margin: 0 0 20px; color: rgba(255,255,255,.42); font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.journey-tab { width: 100%; min-height: 142px; padding: 20px; border: 1px solid rgba(255,255,255,.13); border-radius: 18px; background: transparent; color: #fff; text-align: left; cursor: pointer; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.journey-tab + .journey-tab { margin-top: 10px; }
.journey-tab:hover { transform: translateX(3px); border-color: rgba(255,255,255,.3); }
.journey-tab.active { border-color: var(--lime); background: rgba(216,242,113,.1); }
.journey-tab > span { display: block; margin-bottom: 24px; color: var(--lime); font-size: 11px; }
.journey-tab strong { display: block; margin-bottom: 7px; font-size: 15px; font-weight: 620; }
.journey-tab small { display: block; color: rgba(255,255,255,.5); font-size: 11px; line-height: 1.4; }
.journey-principles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 24px; }
.journey-principles span { padding: 6px 8px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; color: rgba(255,255,255,.48); font-size: 9px; }
.journey-panels { min-width: 0; background: #f5f3ed; color: var(--ink); }
.phase-panel { padding: clamp(30px, 5vw, 64px); animation: phase-in .38s ease both; }
.phase-panel[hidden] { display: none; }
@keyframes phase-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.phase-heading { max-width: 780px; margin-bottom: 40px; }
.phase-heading > p:first-child { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.phase-heading > p:first-child span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; font-size: 10px; }
.phase-heading h3 { margin: 0; font-size: clamp(38px, 4.2vw, 60px); font-weight: 520; line-height: .98; letter-spacing: 0; }
.phase-heading > p:last-child { max-width: 690px; margin: 22px 0 0; color: var(--muted); font-size: 16px; line-height: 1.55; }
.guide-progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: -10px 0 24px; padding: 0; list-style: none; }
.guide-progress li { position: relative; display: flex; align-items: center; gap: 9px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.42); transition: color .25s ease, border-color .25s ease, background .25s ease; }
.guide-progress li span { width: 22px; height: 22px; flex: 0 0 22px; display: grid; place-items: center; border-radius: 50%; background: rgba(11,11,11,.08); font-size: 9px; font-weight: 750; transition: background .25s ease, color .25s ease; }
.guide-progress li strong { overflow: hidden; font-size: 10px; font-weight: 680; text-overflow: ellipsis; white-space: nowrap; }
.guide-progress li.active { border-color: rgba(97,120,255,.48); background: #ecefff; color: #364bc7; }
.guide-progress li.active span { background: var(--blue); color: #fff; }
.guide-progress li.complete { border-color: rgba(11,11,11,.15); color: var(--ink); }
.guide-progress li.complete span { background: var(--ink); color: var(--lime); }
.guide-wizard { max-width: 900px; margin-inline: auto; overflow: hidden; border: 1px solid var(--line); border-radius: 26px; background: #fff; box-shadow: 0 22px 70px rgba(11,11,11,.09); }
#phase-choose .guide-wizard { container: choose-wizard / inline-size; scroll-margin-top: 86px; }
.deployment-wizard { container: deployment-wizard / inline-size; scroll-margin-top: 86px; }
.wizard-stage { min-height: 0; }
.wizard-step { min-height: 0; padding: clamp(22px, 3vw, 32px) clamp(26px, 3.8vw, 40px) 18px; animation: wizard-step-in .34s ease both; }
@keyframes wizard-step-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
.wizard-step-kicker { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; color: #445de1; font-size: 10px; font-weight: 720; letter-spacing: .08em; text-transform: uppercase; }
.wizard-step-kicker span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: #ecefff; font-size: 9px; }
.wizard-title-row { display: flex; align-items: center; gap: 14px; }
.wizard-title-row .wizard-step-kicker { flex: 0 0 auto; margin: 0; }
.wizard-step > h4, .wizard-title-row > h4 { max-width: 650px; margin: 0; font-size: clamp(30px, 4vw, 46px); font-weight: 540; line-height: 1.03; letter-spacing: 0; }
.wizard-step > p { margin: 10px 0 18px; color: var(--muted); font-size: clamp(15px, 1.45vw, 17px); line-height: 1.45; }
.wizard-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; border: 0; }
.wizard-choice-grid .choice-button { min-height: 88px; align-content: center; margin: 0; padding: 15px 18px; border-color: var(--line); border-radius: 15px; background: var(--paper); }
.wizard-choice-grid .choice-button:hover { border-color: rgba(97,120,255,.45); background: #f3f4ff; transform: translateY(-2px); }
.wizard-choice-grid .choice-button.active { border-color: var(--blue); background: #eef0ff; box-shadow: inset 0 0 0 1px var(--blue), 0 8px 25px rgba(97,120,255,.12); }
.wizard-choice-grid .choice-button strong { font-size: 18px; line-height: 1.2; }
.wizard-choice-grid .choice-button small { margin-top: 5px; font-size: clamp(15px, 1.35vw, 17px); line-height: 1.35; }
.wizard-audio-grid { max-width: 680px; }
.three-choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.purpose-goal-label { display: block; margin: 4px 0 8px; color: #445de1; font-size: 9px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.purpose-workflow-card { margin-top: 10px; padding: 12px; border: 1px solid rgba(97,120,255,.25); border-radius: 16px; background: #f2f3ff; }
.purpose-workflow-card > span { color: #445de1; font-size: 14px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.purpose-workflow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin-top: 9px; }
.workflow-node { position: relative; min-height: 80px; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 8px 4px; border: 1px solid rgba(97,120,255,.2); border-radius: 11px; background: #fff; text-align: center; }
.workflow-node:not(:last-child)::after { content: "›"; position: absolute; z-index: 1; right: -7px; top: calc(50% - 11px); color: #445de1; font-size: 17px; }
.workflow-node > span { color: #445de1; font-size: 12px; font-weight: 740; letter-spacing: .02em; text-transform: uppercase; }
.workflow-node > strong { font-size: 17px; font-weight: 650; line-height: 1.2; }
#wizard-purpose { padding-bottom: 14px; }
#wizard-purpose .wizard-step-kicker { font-size: 12px; }
#wizard-purpose .wizard-step-kicker span { width: 28px; height: 28px; font-size: 11px; }
#wizard-purpose .wizard-title-row > h4 { font-size: clamp(34px, 4.4vw, 50px); }
#wizard-purpose > p { margin: 8px 0 10px; font-size: 18px; }
.guide-wizard:has(#wizard-purpose:not([hidden])) .wizard-navigation p { font-size: 15px; }
.guide-wizard:has(#wizard-purpose:not([hidden])) .wizard-back,
.guide-wizard:has(#wizard-purpose:not([hidden])) .wizard-next { font-size: 14px; }

@container choose-wizard (max-width: 650px) {
  .purpose-workflow-card { padding: 10px; }
  .purpose-workflow { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px 5px; }
  .workflow-node { grid-column: span 2; min-height: 72px; padding: 7px 6px; }
  .workflow-node:nth-child(n + 4) { grid-column: span 3; }
  .workflow-node:nth-child(3)::after { right: 50%; top: auto; bottom: -12px; transform: translateX(50%) rotate(90deg); }
  .workflow-node > span { font-size: 10.5px; letter-spacing: .01em; }
  .workflow-node > strong { font-size: 14.5px; letter-spacing: -.01em; }
}
.wizard-inline-question { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 18px 0 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: 15px; background: var(--paper); }
.wizard-inline-question legend { padding: 0; font-size: 12px; font-weight: 680; }
.wizard-inline-question > div, .result-adjustment > div { display: flex; gap: 5px; }
.wizard-inline-question button, .result-adjustment button { min-height: 34px; padding: 0 13px; border: 1px solid var(--line); border-radius: 999px; background: #fff; cursor: pointer; font-size: 10px; font-weight: 650; }
.wizard-inline-question button.active { border-color: var(--blue); background: #ecefff; color: #364bc7; }
.wizard-result { background: #fff; color: var(--ink); }
.wizard-result > h4, .wizard-result .wizard-title-row > h4 { color: var(--ink); }
.wizard-result > p { margin-bottom: 20px; color: var(--muted); text-transform: capitalize; }
.wizard-result .result-kicker { color: #445de1; }
.wizard-result .live-dot { background: var(--blue); box-shadow: 0 0 0 5px rgba(97,120,255,.1); }
.result-adjustment { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 18px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 13px; }
.result-adjustment { border-color: var(--line); background: var(--paper); }
.result-adjustment legend { padding: 0; color: var(--muted); font-size: 9px; font-weight: 720; letter-spacing: .06em; text-transform: uppercase; }
.result-adjustment button { min-height: 30px; border-color: var(--line); background: #fff; color: var(--muted); }
.result-adjustment button.active { border-color: var(--blue); background: #ecefff; color: #364bc7; }
.wizard-result-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 18px; align-items: start; }
.wizard-requirement-column, .wizard-recommendation-column { min-width: 0; }
.wizard-navigation { min-height: 52px; display: grid; grid-template-columns: minmax(92px, 1fr) minmax(0, 2fr) minmax(120px, 1fr); align-items: center; gap: 14px; padding: 4px 18px; border-top: 1px solid var(--line); background: #fff; }
.wizard-navigation p { margin: 0; overflow: hidden; color: var(--muted); font-size: clamp(13px, 1.15vw, 15px); text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.wizard-back, .wizard-next { min-height: 42px; padding: 0 17px; border-radius: 999px; cursor: pointer; font-size: 12px; font-weight: 650; white-space: nowrap; }
.wizard-back { grid-column: 1; justify-self: start; border: 1px solid var(--line); background: #fff; }
.wizard-navigation p { grid-column: 2; }
.wizard-next { grid-column: 3; justify-self: end; border: 0; background: var(--ink); color: #fff; }
.wizard-next:disabled { cursor: not-allowed; opacity: .28; }
.choice-layout, .deployment-layout { display: grid; grid-template-columns: minmax(300px, .9fr) minmax(360px, 1.1fr); gap: 18px; align-items: start; }
.choice-controls { display: grid; gap: 12px; }
.choice-group { min-width: 0; margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.62); }
.choice-group legend { padding: 0 6px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.choice-group legend span { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 5px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 9px; }
.choice-button { width: 100%; display: grid; gap: 3px; padding: 13px 14px; border: 1px solid transparent; border-radius: 12px; background: transparent; text-align: left; cursor: pointer; transition: background .18s ease, border-color .18s ease, transform .18s ease; }
.choice-button + .choice-button { margin-top: 3px; }
.choice-button:hover { background: #fff; transform: translateX(2px); }
.choice-button.active { border-color: rgba(97,120,255,.42); background: #fff; box-shadow: 0 7px 22px rgba(11,11,11,.06); }
.choice-button strong { font-size: 14px; font-weight: 610; }
.choice-button small { color: var(--muted); font-size: 11px; line-height: 1.35; }
@keyframes guide-question-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.choice-button.suggested { position: relative; border-color: rgba(97,120,255,.26); }
.choice-suggestion { justify-self: start; margin-top: 4px; padding: 4px 7px; border-radius: 999px; background: #ecefff; color: #445de1; font-size: 8px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.guide-refinements { border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.48); animation: guide-question-in .42s ease both; }
.guide-refinements summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 18px; cursor: pointer; font-size: 12px; font-weight: 650; }
.guide-refinements summary span { padding: 4px 7px; border-radius: 999px; background: rgba(11,11,11,.07); color: var(--muted); font-size: 8px; letter-spacing: .05em; text-transform: uppercase; }
.refinement-content { display: grid; gap: 10px; padding: 0 10px 10px; }
.refinement-content .choice-group { background: #fff; }
.wizard-refinements { margin-top: 10px; border-color: rgba(255,255,255,.13); background: rgba(255,255,255,.04); }
.wizard-refinements summary { color: rgba(255,255,255,.72); }
.wizard-refinements summary span { background: rgba(255,255,255,.1); color: rgba(255,255,255,.46); }
.wizard-refinements .choice-group { border-color: rgba(255,255,255,.13); background: rgba(255,255,255,.04); }
.wizard-refinements .choice-group legend { color: rgba(255,255,255,.45); }
.wizard-refinements .choice-button { color: #fff; }
.wizard-refinements .choice-button:hover, .wizard-refinements .choice-button.active { background: rgba(255,255,255,.1); }
.compact-choice-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.compact-choice-group legend { grid-column: 1 / -1; }
.compact-choice-group .choice-button { height: 100%; margin-top: 0; }
.guide-result, .deployment-plan { position: sticky; top: 94px; padding: 30px; border-radius: 22px; background: #111318; color: #fff; box-shadow: 0 20px 60px rgba(11,11,11,.14); }
.result-kicker { display: flex; align-items: center; gap: 9px; margin-bottom: 22px; color: rgba(255,255,255,.52); font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 5px rgba(216,242,113,.1); }
.orange-dot { background: var(--orange); box-shadow: 0 0 0 5px rgba(240,111,60,.13); }
.guide-result h4, .deployment-plan h4 { max-width: 520px; margin: 0; font-size: clamp(30px, 3vw, 42px); font-weight: 520; line-height: 1; letter-spacing: 0; }
.guide-result > p, .deployment-plan > p { margin: 16px 0 24px; color: rgba(255,255,255,.58); font-size: 13px; line-height: 1.5; }
.requirement-summary { margin: 0; padding: 18px; border: 1px solid rgba(216,242,113,.28); border-radius: 16px; background: rgba(216,242,113,.07); animation: guide-result-in .48s ease both; }
.requirement-summary header { display: grid; gap: 5px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.13); }
.requirement-summary header span, .recommendation-heading > span { color: var(--lime); font-size: 9px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.requirement-summary header strong { font-size: 15px; font-weight: 640; }
.requirement-summary dl { display: grid; gap: 0; margin: 0; }
.requirement-summary dl > div { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.requirement-summary dt { color: rgba(255,255,255,.46); font-size: 8px; font-weight: 740; letter-spacing: .06em; text-transform: uppercase; }
.requirement-summary dd { margin: 0; color: rgba(255,255,255,.78); font-size: 10px; line-height: 1.45; }
.recommendation-heading { display: grid; gap: 5px; margin: 1px 0 11px; animation: guide-result-in .48s ease both; }
.recommendation-heading > strong { font-size: 15px; font-weight: 620; }
@keyframes guide-result-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
.recommendation-list { display: grid; gap: 8px; }
.recommendation-card { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 14px; border: 1px solid rgba(255,255,255,.13); border-radius: 14px; background: rgba(255,255,255,.04); color: #fff; text-align: left; cursor: pointer; transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.recommendation-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.35); }
.recommendation-card.selected { border-color: var(--lime); background: rgba(216,242,113,.08); }
.recommendation-rank { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.08); color: var(--lime); font-size: 10px; }
.recommendation-card strong { display: block; margin-bottom: 4px; font-size: 15px; font-weight: 630; }
.recommendation-card small { display: block; overflow: visible; color: rgba(255,255,255,.48); font-size: 10px; line-height: 1.35; white-space: normal; }
.recommendation-score { text-align: right; }
.recommendation-score b { display: block; color: var(--lime); font-size: 17px; font-weight: 580; }
.recommendation-score small { color: rgba(255,255,255,.4); font-size: 8px; letter-spacing: .07em; text-transform: uppercase; }
.result-caution { margin-top: 18px; padding: 16px; border-left: 2px solid var(--orange); background: rgba(255,255,255,.055); }
.result-caution strong { display: block; margin-bottom: 5px; font-size: 11px; }
.result-caution p { margin: 0; color: rgba(255,255,255,.52); font-size: 10px; line-height: 1.5; }
.result-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 22px; }
.result-actions .button { min-height: 44px; background: var(--lime); color: var(--ink); }
.result-actions .text-link { color: rgba(255,255,255,.78); font-size: 12px; }
.result-methodology { margin-top: 10px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.13); border-radius: 12px; background: rgba(255,255,255,.035); }
.result-methodology summary { cursor: pointer; color: rgba(255,255,255,.62); font-size: 10px; font-weight: 650; }
.result-methodology p { margin: 9px 0 0; color: rgba(255,255,255,.46); font-size: 9px; line-height: 1.45; }
.wizard-result .requirement-summary { border-color: rgba(97,120,255,.28); background: #f2f3ff; }
.wizard-result .requirement-summary header { border-bottom-color: rgba(11,11,11,.1); }
.wizard-result .requirement-summary header span,
.wizard-result .recommendation-heading > span { color: #445de1; }
.wizard-result .requirement-summary dl > div { border-bottom-color: rgba(11,11,11,.09); }
.wizard-result .requirement-summary dt { color: #445de1; }
.wizard-result .requirement-summary dd { color: #30323a; }
.wizard-result .recommendation-card { border-color: var(--line); background: var(--paper); color: var(--ink); }
.wizard-result .recommendation-card:hover { border-color: rgba(97,120,255,.48); background: #f3f4ff; }
.wizard-result .recommendation-card.selected { border-color: var(--blue); background: #ecefff; box-shadow: inset 0 0 0 1px var(--blue); }
.wizard-result .recommendation-rank { background: #e4e7ff; color: #445de1; }
.wizard-result .recommendation-card small { color: var(--muted); }
.wizard-result .recommendation-score b { color: #445de1; }
.wizard-result .recommendation-score small { color: var(--muted); }
.wizard-result .result-methodology { border-color: var(--line); background: var(--paper); }
.wizard-result .result-methodology summary { color: var(--muted); }
.wizard-result .result-methodology p { color: var(--muted); }
.wizard-result .result-actions .text-link { color: #445de1; }
.deployment-candidate { max-width: 900px; display: flex; align-items: center; gap: 10px; margin: -10px auto 18px; padding: 11px 15px; border: 1px solid rgba(97,120,255,.24); border-radius: 13px; background: #f2f3ff; }
.deployment-candidate > span { color: #445de1; font-size: 8px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.deployment-candidate strong { margin-right: auto; font-size: 13px; }
.deployment-candidate button { padding: 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: #445de1; cursor: pointer; font-size: 10px; }
.deployment-progress { max-width: 900px; margin: 0 auto 24px; }
.deployment-result { background: #fff; color: var(--ink); }
.deployment-result .result-kicker { color: #c64a18; }
.deployment-result > h4, .deployment-result .wizard-title-row > h4 { margin: 0; font-size: clamp(30px, 4vw, 46px); font-weight: 540; line-height: 1.03; }
.deployment-result > p { margin: 10px 0 15px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.deployment-reference-note { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 13px; align-items: start; margin-bottom: 10px; padding: 12px 14px; border: 1px solid rgba(97,120,255,.28); border-radius: 13px; background: #f2f3ff; }
.deployment-reference-note > span, .deployment-steps-panel > header span, .deployment-platform-panel > header span { color: #445de1; font-size: 9px; font-weight: 760; letter-spacing: .08em; text-transform: uppercase; }
.deployment-reference-note strong { display: block; margin-bottom: 3px; font-size: 12px; font-weight: 680; }
.deployment-reference-note p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.deployment-output-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(235px, .75fr); gap: 10px; align-items: start; }
.deployment-steps-panel, .deployment-platform-panel { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: var(--paper); }
.deployment-steps-panel > header, .deployment-platform-panel > header { display: grid; gap: 3px; padding: 13px 14px; border-bottom: 1px solid var(--line); background: #fff; }
.deployment-steps-panel > header strong, .deployment-platform-panel > header strong { font-size: 13px; font-weight: 660; }
.deployment-result ol { margin: 0; padding: 0; list-style: none; counter-reset: deployment-step; }
.deployment-result ol > li { min-width: 0; display: grid; grid-template-columns: 29px minmax(0, 1fr); gap: 11px; padding: 12px 14px; counter-increment: deployment-step; }
.deployment-result ol > li + li { border-top: 1px solid var(--line); }
.deployment-result ol > li::before { content: counter(deployment-step, decimal-leading-zero); width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; background: #fff0e8; color: #c64a18; font-size: 8px; font-weight: 760; }
.deployment-result ol > li strong { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 670; }
.deployment-result ol > li p { margin: 0; color: var(--muted); font-size: 10.5px; line-height: 1.48; }
.deployment-result ol > li code { display: block; width: fit-content; max-width: 100%; margin-top: 7px; padding: 4px 7px; overflow: hidden; border-radius: 6px; background: #fff; color: #3b49b7; font-size: 9px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.deployment-platform-panel { background: #f2f3ff; border-color: rgba(97,120,255,.24); }
.deployment-platform-panel > header { border-bottom-color: rgba(97,120,255,.18); }
.deployment-platform-panel dl { margin: 0; }
.deployment-platform-panel dl > div { padding: 10px 13px; }
.deployment-platform-panel dl > div + div { border-top: 1px solid rgba(97,120,255,.16); }
.deployment-platform-panel dt { margin-bottom: 3px; color: #445de1; font-size: 9px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.deployment-platform-panel dd { margin: 0; color: #3d4050; font-size: 10px; line-height: 1.45; }
.deployment-methodology { border-color: var(--line); background: var(--paper); }
.deployment-methodology summary, .deployment-methodology p, .deployment-methodology li { color: var(--muted); }
.deployment-methodology ul { display: grid; gap: 6px; margin: 10px 0 0; padding-left: 17px; }
.deployment-methodology li { font-size: 10px; line-height: 1.45; }
.deployment-result .result-actions { margin-top: 14px; }
.deployment-result .result-actions .text-link { color: #445de1; }

@container deployment-wizard (max-width: 680px) {
  .deployment-output-grid { grid-template-columns: 1fr; }
  .deployment-reference-note { grid-template-columns: 1fr; gap: 5px; }
  .deployment-platform-panel dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .deployment-platform-panel dl > div + div { border-top: 0; border-left: 1px solid rgba(97,120,255,.16); }
  .deployment-result ol > li code { white-space: normal; }
}

@container deployment-wizard (max-width: 400px) {
  .deployment-platform-panel dl { grid-template-columns: 1fr; }
  .deployment-platform-panel dl > div + div { border-top: 1px solid rgba(97,120,255,.16); border-left: 0; }
}
.deployment-banner { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding: 14px 18px; border: 1px solid rgba(97,120,255,.26); border-radius: 15px; background: #ecefff; }
.deployment-banner > span { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.deployment-banner strong { margin-right: auto; font-size: 16px; }
.deployment-banner button { border: 0; border-bottom: 1px solid currentColor; background: transparent; color: #445de1; font-size: 11px; cursor: pointer; }
.deployment-controls .choice-group { background: rgba(255,255,255,.75); }
.deployment-plan ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: gate; border-top: 1px solid rgba(255,255,255,.14); }
.deployment-plan li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.14); counter-increment: gate; }
.deployment-plan li::before { content: counter(gate, decimal-leading-zero); color: var(--orange); font-size: 10px; font-weight: 700; }
.deployment-plan li strong { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 620; }
.deployment-plan li p { margin: 0; color: rgba(255,255,255,.52); font-size: 10px; line-height: 1.5; }
.deployment-caution { border-left-color: var(--lime); }
.reveal-ready [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .65s ease, transform .65s ease; }
.reveal-ready [data-reveal].is-visible { opacity: 1; transform: translateY(0); }

.demo-section { padding: 0 0 90px; }
.demo-panel { background: var(--panel); border-radius: var(--radius); padding: clamp(24px, 4vw, 52px); overflow: hidden; }
.demo-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 38px; }
.demo-heading h2 { margin: 0; font-size: clamp(34px, 4vw, 58px); font-weight: 520; letter-spacing: 0; line-height: 1; }
.status-pill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: rgba(255,255,255,.6); border-radius: 999px; padding: 9px 13px; font-size: 12px; white-space: nowrap; }
.status-pill span { width: 7px; height: 7px; background: #42a55e; border-radius: 50%; }
.category-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.55); margin-bottom: 26px; }
.category-tab { border: 0; background: transparent; padding: 10px 16px; border-radius: 999px; cursor: pointer; color: var(--muted); }
.category-tab.active { background: #fff; color: var(--ink); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.demo-mode-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.demo-mode-row .category-tabs { margin-bottom: 0; }
.demo-mode-row > p { margin: 0; color: var(--muted); font-size: 12px; }
.demo-mode-row > p span { color: var(--ink); font-weight: 650; }
.control-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.control-grid label { display: grid; gap: 8px; font-size: 12px; color: var(--muted); }
.control-grid select { width: 100%; min-height: 52px; border-radius: 13px; border: 1px solid var(--line); background: #fff; padding: 0 40px 0 14px; color: var(--ink); }
.audio-stage { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: stretch; }
.audio-stage-three { grid-template-columns: 1fr auto 1fr auto 1fr; }
.audio-card { min-height: 260px; border-radius: 22px; padding: 28px; display: flex; flex-direction: column; }
.audio-card-clean { background: #ddd8ff; }
.audio-card-reference { background: var(--white); }
.audio-card-output { background: #121212; color: #fff; }
.audio-kicker { margin: 0 0 auto; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; opacity: .55; }
.audio-card h3 { margin: 30px 0 6px; font-size: 28px; font-weight: 520; letter-spacing: 0; }
.audio-card > p:not(.audio-kicker) { margin: 0 0 22px; opacity: .62; line-height: 1.45; }
.audio-placeholder { border-top: 1px solid currentColor; padding-top: 18px; opacity: .5; font-size: 13px; }
.audio-card audio { width: 100%; height: 42px; margin-top: 2px; }
.audio-card audio[hidden], .audio-placeholder[hidden] { display: none; }
.attack-arrow { align-self: center; width: 42px; height: 42px; display: grid; place-items: center; background: var(--orange); color: #fff; border-radius: 50%; }
.sample-stack { display: grid; gap: 16px; }
.sample-comparison { border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: rgba(255,255,255,.42); }
.sample-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.sample-heading > div { display: flex; align-items: baseline; gap: 12px; }
.sample-heading span { color: var(--muted); font-size: 10px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; }
.sample-heading h3 { margin: 0; font-size: 25px; font-weight: 540; letter-spacing: 0; }
.sample-heading > p { max-width: 54%; margin: 0; overflow: hidden; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.sample-audio-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.sample-audio-grid .audio-card { min-height: 230px; border-radius: 0; padding: 24px; }
.sample-audio-grid .audio-card + .audio-card { border-left: 1px solid var(--line); }
.sample-audio-grid .audio-card-output { border-color: rgba(255,255,255,.18); }
.sample-audio-grid .audio-card h4 { margin: 24px 0 6px; font-size: 23px; font-weight: 520; letter-spacing: 0; }
.sample-audio-grid .audio-card > p:not(.audio-kicker) { min-height: 42px; margin: 0 0 18px; opacity: .62; font-size: 13px; line-height: 1.45; }
.player-slot { margin-top: auto; }
.player-slot .audio-placeholder { min-height: 42px; margin: 0; display: flex; align-items: center; border-top: 1px solid currentColor; }
.stage-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 18px -24px -24px; border-top: 1px solid var(--line); }
.stage-metrics-clean { grid-template-columns: 1fr; }
.stage-metrics span { min-width: 0; padding: 13px 24px 15px; }
.stage-metrics span + span { border-left: 1px solid var(--line); }
.stage-metrics small { display: block; min-height: 22px; margin-bottom: 4px; color: var(--muted); font-size: 8px; line-height: 1.25; letter-spacing: .08em; text-transform: uppercase; }
.stage-metrics strong { display: block; font-size: 13px; font-weight: 590; white-space: nowrap; }
.audio-card-output .stage-metrics { border-color: rgba(255,255,255,.18); }
.audio-card-output .stage-metrics span + span { border-color: rgba(255,255,255,.18); }
.audio-card-output .stage-metrics small { color: rgba(255,255,255,.55); }
.metric-strip { display: grid; grid-template-columns: .7fr .7fr .7fr 1.9fr; margin-top: 18px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: rgba(255,255,255,.45); }
.metric { min-width: 0; padding: 17px 18px; border-right: 1px solid var(--line); }
.metric:last-child { border-right: 0; }
.metric span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.metric strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 20px; font-weight: 520; letter-spacing: -.03em; }
.demo-footnote { display: flex; justify-content: space-between; gap: 20px; padding-top: 18px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.demo-footnote p { margin: 0; }
.demo-footnote p:first-child { max-width: 68%; }

.text-link { display: inline-flex; gap: 12px; text-underline-offset: 5px; font-size: 14px; font-weight: 650; }
.text-link span { color: var(--orange); }

.section-heading { display: grid; grid-template-columns: 1.2fr .8fr; gap: 100px; align-items: end; margin-bottom: 46px; }
.section-heading h2 { max-width: 760px; margin: 0; font-size: clamp(42px, 5vw, 68px); line-height: 1; letter-spacing: 0; font-weight: 520; }
.section-heading > p { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.5; }

.dark-section { background: #111; color: #fff; padding: 130px 0; }
.dark-section .eyebrow { color: rgba(255,255,255,.52); }
.dark-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; }
.dark-grid h2 { margin: 0; max-width: 600px; font-size: clamp(52px, 6vw, 86px); font-weight: 500; line-height: .95; letter-spacing: 0; }
.finding-list { border-top: 1px solid rgba(255,255,255,.22); }
.finding-list article { display: grid; grid-template-columns: 120px 1fr; gap: 24px; padding: 29px 0; border-bottom: 1px solid rgba(255,255,255,.22); }
.finding-list article > span { color: var(--lime); font-size: 28px; letter-spacing: -.04em; }
.finding-list h3 { margin: 0 0 8px; font-size: 18px; font-weight: 560; }
.finding-list p { margin: 0; color: rgba(255,255,255,.56); line-height: 1.45; font-size: 14px; }

.methods-section { padding: 140px 0; }
.method-grid { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.method-card { min-height: 190px; padding: 19px; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: transparent; display: flex; flex-direction: column; align-items: flex-start; text-align: left; cursor: pointer; transition: background .2s, color .2s; }
.method-card:hover { background: var(--ink); color: #fff; }
.method-card span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .09em; }
.method-card strong { margin: auto 0 8px; font-size: 23px; font-weight: 540; letter-spacing: 0; }
.method-card small { color: var(--muted); font-size: 12px; }
.method-card:hover span, .method-card:hover small { color: rgba(255,255,255,.56); }
.method-card.method-unavailable { background: #e5e3de; color: var(--muted); }
.availability-note { margin: 18px 0 0; color: var(--muted); font-size: 12px; }

.workflow-section { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; padding: 30px 0 150px; }
.workflow-title h2 { margin: 0; font-size: clamp(48px, 5vw, 72px); line-height: .98; letter-spacing: 0; font-weight: 520; }
.workflow-summary { max-width: 590px; margin: 28px 0 0; color: var(--muted); font-size: 16px; line-height: 1.55; }
.quick-start { margin-top: 30px; }
.quick-start > span { display: block; margin-bottom: 10px; color: var(--muted); font-size: 11px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; }
.quick-start pre { margin: 0; padding: 20px 22px; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: #15191f; color: #fff; font: 600 15px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; }
.workflow-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 34px; }
.workflow-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.workflow-list li { display: grid; grid-template-columns: 42px 1fr; gap: 18px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.workflow-list li > span { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-size: 12px; }
.workflow-list h3 { margin: 2px 0 8px; font-size: 20px; font-weight: 550; letter-spacing: 0; }
.workflow-list p { margin: 0; color: var(--muted); line-height: 1.5; font-size: 14px; }
.workflow-list code { overflow-wrap: anywhere; color: var(--ink); font: 600 13px ui-monospace, SFMono-Regular, Consolas, monospace; }

.site-footer { min-height: 140px; display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 30px; align-items: center; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.site-footer p { text-align: center; }
.site-footer > div { display: flex; justify-content: flex-end; gap: 18px; }
.site-footer > div a { text-underline-offset: 4px; }
.noscript { margin: 0; padding: 14px; background: #ffdf80; text-align: center; }

@media (max-width: 850px) {
  .desktop-nav { display: none; }
  .hero { grid-template-columns: 1fr; gap: 48px; padding-top: 80px; }
  .control-grid { grid-template-columns: 1fr; }
  .audio-stage { grid-template-columns: 1fr; }
  .sample-audio-grid { grid-template-columns: 1fr; }
  .sample-audio-grid .audio-card + .audio-card { border-left: 0; border-top: 1px solid var(--line); }
  .sample-audio-grid .audio-card-output { border-color: rgba(255,255,255,.18); }
  .attack-arrow { transform: rotate(90deg); }
  .metric-strip { grid-template-columns: 1fr 1fr; }
  .metric { border-bottom: 1px solid var(--line); }
  .metric:nth-child(2) { border-right: 0; }
  .metric:nth-child(3), .metric:nth-child(4) { border-bottom: 0; }
  .section-heading, .dark-grid, .workflow-section { grid-template-columns: 1fr; gap: 46px; }
  .story-map { grid-template-columns: 1fr; gap: 8px; padding: 10px; }
  .story-node-outcome { grid-column: auto; }
  .story-connector { min-height: 20px; transform: rotate(90deg); }
  .navigator-workspace { grid-template-columns: 1fr; }
  .journey-rail { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 18px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
  .journey-rail > p, .journey-principles { grid-column: 1 / -1; }
  .journey-rail > p { margin: 0; }
  .journey-tab { min-height: 112px; }
  .journey-tab + .journey-tab { margin-top: 0; }
  .journey-tab > span { margin-bottom: 14px; }
  .choice-layout, .deployment-layout { grid-template-columns: 1fr; }
  .deployment-output-grid { grid-template-columns: 1fr; }
  .guide-result, .deployment-plan { position: static; }
  .method-grid { grid-template-columns: repeat(2, 1fr); }
  .site-footer { grid-template-columns: 1fr; gap: 16px; padding: 32px 0; text-align: center; }
  .site-footer p { margin: 0; }
  .site-footer .brand, .site-footer > div { justify-self: center; }
}

@media (max-width: 560px) {
  :root { --shell: calc(100% - 28px); --radius: 20px; }
  .site-header { height: 64px; padding-inline: 14px; }
  section[id], .navigator-workspace { scroll-margin-top: 72px; }
  .header-pill { display: none; }
  .hero { min-height: auto; padding: 70px 0 54px; }
  .hero h1 { font-size: 48px; }
  .hero-facts { gap: 8px; }
  .hero-facts strong { font-size: 24px; }
  .demo-heading { display: block; }
  .status-pill { margin-top: 20px; }
  .category-tabs { width: 100%; overflow-x: auto; }
  .category-tab { flex: 1 0 auto; }
  .demo-mode-row { display: block; }
  .demo-mode-row > p { margin-top: 10px; }
  .sample-heading { display: block; }
  .sample-heading > p { max-width: 100%; margin-top: 8px; }
  .metric-strip { grid-template-columns: 1fr; }
  .metric, .metric:nth-child(2), .metric:nth-child(3) { border-right: 0; border-bottom: 1px solid var(--line); }
  .metric:last-child { border-bottom: 0; }
  .demo-footnote { display: block; }
  .demo-footnote p:first-child { max-width: none; margin-bottom: 8px; }
  .methods-section { padding-bottom: 90px; }
  .methods-section { padding-top: 90px; }
  .method-grid { grid-template-columns: 1fr; }
  .dark-section { padding: 90px 0; }
  .finding-list article { grid-template-columns: 92px 1fr; }
  .workflow-section { padding-bottom: 100px; }
  .navigator-section { padding-top: 10px; padding-bottom: 90px; }
  .story-node { min-height: 126px; }
  .navigator-workspace { width: 100%; border-radius: 0; }
  .journey-rail { grid-template-columns: 1fr; }
  .journey-rail > p, .journey-principles { grid-column: auto; }
  .journey-tab { min-height: 96px; }
  .journey-principles { display: none; }
  .phase-panel { padding: 34px 14px 18px; }
  .phase-heading { padding-inline: 5px; }
  .guide-wizard { border-radius: 20px; }
  .wizard-stage, .wizard-step { min-height: 0; }
  .wizard-step { padding: 22px 20px 18px; }
  .wizard-choice-grid, .wizard-result-grid { grid-template-columns: 1fr; }
  .three-choice-grid { grid-template-columns: 1fr; }
  .wizard-choice-grid .choice-button { min-height: 82px; }
  .purpose-workflow { grid-template-columns: 1fr; gap: 6px; }
  .workflow-node, .workflow-node:nth-child(n + 4) { grid-column: auto; min-height: 60px; }
  .workflow-node:not(:last-child)::after { right: 50%; top: auto; bottom: -12px; transform: translateX(50%) rotate(90deg); }
  .wizard-inline-question, .result-adjustment { align-items: flex-start; flex-direction: column; }
  .wizard-inline-question > div, .result-adjustment > div { width: 100%; flex-wrap: wrap; }
  .wizard-inline-question button, .result-adjustment button { flex: 1 1 auto; }
  .wizard-navigation { grid-template-columns: 1fr 1fr; }
  .wizard-navigation p { display: none; }
  .wizard-next { grid-column: 2; }
  .deployment-reference-note { grid-template-columns: 1fr; gap: 5px; }
  .compact-choice-group { grid-template-columns: 1fr; }
  .guide-progress li { justify-content: center; padding-inline: 7px; }
  .guide-progress li strong { font-size: 8px; }
  .guide-result, .deployment-plan { padding: 24px 18px; border-radius: 18px; }
  .recommendation-card { grid-template-columns: 34px minmax(0, 1fr); }
  .recommendation-score { grid-column: 2; text-align: left; }
  .recommendation-score b, .recommendation-score small { display: inline; }
  .recommendation-score b { margin-right: 6px; }
  .deployment-banner { align-items: flex-start; flex-wrap: wrap; }
  .deployment-banner strong { width: 100%; order: 3; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}