:root {
  --night: #05080b;
  --ink: #f5f3ee;
  --muted: #b8c0c4;
  --quiet: #9ba7ad;
  --line: rgba(221, 237, 242, .18);
  --blue: #286caf;
  --warn: #e4bb78;
  --safe: env(safe-area-inset-bottom, 0px);
  --gutter: clamp(24px, 4.5vw, 76px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

[hidden] { display: none !important; }
* { box-sizing: border-box; }
html, body {
  margin: 0;
  min-height: 100%;
  background: var(--night);
  color: var(--ink);
  font-family: "Segoe UI Variable", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
body { overflow-x: clip; }
button, input, textarea { font: inherit; }
button, a { color: inherit; }
button { touch-action: manipulation; }
a { text-underline-offset: .2em; }
:focus-visible { outline: 2px solid #98d7ef; outline-offset: 5px; }
.skip-link {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 8px;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--night);
  transform: translateY(-160%);
}
.skip-link:focus { transform: none; }
.site-head {
  position: fixed;
  z-index: 40;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--gutter);
  min-height: 76px;
  background: linear-gradient(#000 0%, #000b 54%, transparent 100%);
}
.brand { display: inline-flex; background: #000; }
.brand img { display: block; height: 40px; width: auto; }
html:not([data-mode="story"]) .site-head > .text-action { display: none; }
.text-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 0;
  background: none;
  padding: 12px 4px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .16em;
  text-decoration: none;
  cursor: pointer;
}
.text-action:disabled { opacity: .45; cursor: default; }

.story { position: relative; }
.story-chapter {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  padding: 132px var(--gutter) clamp(64px, 10vh, 124px);
  isolation: isolate;
  overflow: hidden;
}
.story-visual, .reveal-visual {
  position: absolute;
  z-index: -2;
  inset: 0;
}
.story-visual img, .reveal-visual img, .visual-pane > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.story-shade, .reveal-shade {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, #02070bd9, #02070b22 78%),
              linear-gradient(0deg, #05080bd9, transparent 70%);
}
.story-copy, .reveal-copy { position: relative; max-width: 1040px; }
.eyebrow {
  margin: 0 0 24px;
  color: #c4d1d4;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.story h1, .story h2, .reveal h1 {
  margin: 0;
  font-size: clamp(58px, 9.2vw, 148px);
  font-weight: 250;
  line-height: .98;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.story h2 { font-size: clamp(52px, 7.6vw, 116px); }
.story h1 em, .story h2 em, .reveal h1 em {
  font-style: normal;
  font-weight: 450;
}
.lede {
  max-width: 42ch;
  margin: 28px 0 34px;
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 350;
  line-height: 1.65;
  color: #d7e0e1;
}
.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-height: 52px;
  border: 1px solid transparent;
  background: var(--ink);
  color: #071019;
  padding: 17px 25px;
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .16em;
  text-decoration: none;
  cursor: pointer;
}
.primary:disabled { opacity: .42; cursor: not-allowed; }
.truth {
  max-width: 56ch;
  margin: 20px 0 0;
  color: #bdc9cd;
  font-size: 12px;
  line-height: 1.65;
}
.story-note {
  position: absolute;
  right: var(--gutter);
  bottom: 48px;
  text-align: right;
}
.story-note span { font-size: 11px; color: #a9bec5; }
.story-note p { margin: 7px 0; font-size: 10px; text-transform: uppercase; letter-spacing: .24em; }
.story-details { align-items: center; border-top: 1px solid var(--line); }
.story-details .story-visual img { object-position: 80% center; transform: scale(1.15) rotate(180deg); opacity: .7; }
.story-details .story-shade { background: linear-gradient(90deg, #05080be6 15%, #05080b55 80%); }
.story-invitation {
  align-items: center;
  background: radial-gradient(ellipse at 90% 28%, #183d491f, transparent 62%), #070c10;
  border-top: 1px solid var(--line);
}

.composer {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(430px, .85fr);
  align-items: start;
  background: #080e12;
}
.visual-pane {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: #082431;
}
.visual-pane > img { object-position: 57% center; }
.visual-wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 72%, #080e1255),
              linear-gradient(0deg, #05080b99, transparent 48%);
}
.visual-status {
  position: absolute;
  left: var(--gutter);
  right: 28px;
  bottom: 34px;
  display: flex;
  align-items: center;
  gap: 11px;
  max-width: max-content;
  padding: 12px 15px;
  border: 1px solid #b4dbe130;
  background: #050d13e6;
  color: #dce8e9;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .04em;
}
.status-dot { flex: 0 0 6px; height: 6px; border-radius: 50%; background: var(--warn); }
.noscene {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  top: 48%;
  max-width: 35ch;
  padding: 20px;
  color: #dce8e9;
  background: #050d13e6;
  border: 1px solid var(--line);
  font-size: 16px;
  line-height: 1.6;
}
.decision-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100svh;
  padding: 88px clamp(26px, 3.3vw, 54px) calc(24px + var(--safe));
  border-left: 1px solid var(--line);
}
.journey-head {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 44px;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .13em;
}
.progress { height: 1px; flex: 1; background: var(--line); }
.progress i { display: block; width: 0; height: 100%; background: #cde4e9; transition: width .4s var(--ease); }
.question { margin: auto 0; padding: 34px 0; min-width: 0; outline: none; }
.question h2 {
  margin: 0 0 17px;
  font-size: clamp(34px, 3.55vw, 58px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.question .eyebrow { margin-bottom: 17px; }
.question-hint { max-width: 43ch; color: var(--muted); font-size: 15px; line-height: 1.6; }
.options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 25px;
  padding: 2px;
}
.option {
  min-width: 0;
  min-height: 88px;
  padding: 16px;
  border: 1px solid var(--line);
  background: #101a20;
  color: var(--ink);
  text-align: left;
  line-height: 1.4;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.option[aria-pressed="true"] {
  border-color: #dfedf0;
  background: #20343e;
  box-shadow: inset 3px 0 0 #cbe1e5;
}
.option:disabled { cursor: wait; opacity: .65; }
.option strong { display: block; font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
.option small { display: block; margin-top: 7px; color: #aebdc3; font-size: 11px; line-height: 1.5; }
.option[data-coverage="none"] small { color: #e4c78f; }
.option.declined[aria-pressed="true"], .gate__no[aria-pressed="true"] {
  border-color: var(--warn);
  box-shadow: inset 3px 0 0 var(--warn);
}
.swatch { display: block; height: 26px; margin-bottom: 13px; border: 1px solid #ffffff30; }
.gate { margin-top: 25px; }
.template-gate {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.template-gate > p { grid-column: 1 / -1; margin: 0 0 5px; font-size: 16px; line-height: 1.5; }
.gate__yes, .gate__no { min-height: 62px; font-size: 14px; }
.notice {
  margin-top: 20px;
  padding: 14px 16px;
  border-left: 2px solid var(--warn);
  background: #e4bb7812;
  color: #e5d8bb;
  font-size: 13px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.upload { margin-top: 24px; padding: 20px; border: 1px solid var(--line); background: #0d171d; }
.upload label { display: block; margin-bottom: 14px; font-size: 15px; }
.upload input { display: block; max-width: 100%; font-size: 13px; }
.upload input::file-selector-button {
  min-height: 44px;
  margin: 0 12px 10px 0;
  padding: 10px 14px;
  border: 1px solid var(--line);
  background: #20343e;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.upload textarea {
  display: block;
  width: 100%;
  min-height: 110px;
  padding: 13px;
  border: 1px solid #8ea7b355;
  border-radius: 0;
  background: #080e12;
  color: var(--ink);
  line-height: 1.6;
  resize: vertical;
}
.upload p, .beside { color: var(--quiet); font-size: 12px; line-height: 1.6; }
.beside:empty { display: none; }
.journey-actions { display: flex; align-items: center; gap: 15px; }
.journey-actions .primary { margin-left: auto; }
.save-status { min-height: 18px; margin: 14px 0 0; color: #b9cbd1; font-size: 11px; line-height: 1.5; }

.reveal {
  position: relative;
  display: grid;
  align-items: end;
  isolation: isolate;
  min-height: 100svh;
  padding: 148px var(--gutter) calc(70px + var(--safe));
}
.reveal-visual { max-height: 1120px; opacity: .78; }
.reveal-shade { background: linear-gradient(0deg, #05080b 2%, #05080b77 60%, #05080b55), linear-gradient(90deg, #05080bbd, transparent 80%); }
.reveal-actions { display: flex; align-items: center; gap: 22px; margin-top: 29px; }
.recap-panel { position: relative; margin-top: 80px; padding-top: 30px; border-top: 1px solid var(--line); }
.recap-panel h2 { margin: 0 0 20px; font-size: 26px; font-weight: 350; }
.recap-panel dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 24px; margin: 0; }
.recap-panel dl > div { padding: 19px 0; border-top: 1px solid var(--line); }
.recap-panel dt { color: var(--muted); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
.recap-panel dd { margin: 8px 0 0; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }

.fatal {
  position: fixed;
  z-index: 90;
  left: 24px;
  right: 24px;
  bottom: calc(24px + var(--safe));
  max-width: 560px;
  max-height: calc(100svh - 48px - var(--safe));
  overflow: auto;
  padding: 28px;
  border: 1px solid var(--warn);
  background: #0c1820;
  box-shadow: 0 20px 80px #000b;
}
.fatal:focus { outline: 2px solid #98d7ef; outline-offset: 3px; }
.fatal .eyebrow { margin-bottom: 15px; }
.fatal h2 { margin: 0 0 16px; font-size: 28px; font-weight: 350; line-height: 1.2; letter-spacing: -.025em; }
.fatal p:not(.eyebrow) { color: #cbd8dc; font-size: 14px; line-height: 1.65; }
.fatal .primary { margin: 6px 14px 0 0; }
.fatal .text-action { margin-top: 6px; }

@media (hover: hover) and (pointer: fine) {
  .text-action:hover { color: #b9e2ee; }
  .primary:not(:disabled):hover { background: #d8e9ec; }
  .option:not(:disabled):hover { border-color: #a8c3cf; background: #182a34; }
}

@media (max-width: 1000px) and (orientation: portrait), (max-width: 760px) {
  .composer { display: block; }
  .visual-pane { position: relative; height: clamp(250px, 34svh, 430px); min-height: 0; }
  .visual-pane > img { object-position: 68% 42%; }
  .visual-wash { background: linear-gradient(0deg, #080e12, transparent 52%); }
  .visual-status { top: 104px; bottom: auto; left: var(--gutter); right: var(--gutter); }
  .noscene { top: 62%; padding: 12px 16px; font-size: 13px; }
  .decision-pane {
    position: relative;
    z-index: 2;
    min-height: 66svh;
    margin-top: -20px;
    padding: 12px var(--gutter) calc(24px + var(--safe));
    border-left: 0;
    border-top: 1px solid #bdd9e229;
    border-radius: 22px 22px 0 0;
    background: #080e12;
  }
  .question { margin: 0; padding: 25px 0 28px; }
  .question h2 { max-width: 20ch; font-size: clamp(35px, 5.8vw, 52px); }
  .options { max-width: 760px; }
  .journey-actions { margin-top: auto; }
  .story-shade { background: linear-gradient(0deg, #02070be8 0%, #02070b55 75%); }
  .story-details .story-shade { background: linear-gradient(90deg, #05080bd9, #05080b66); }
}

@media (max-width: 600px) {
  :root { --gutter: 22px; }
  .site-head { min-height: 72px; padding: 14px 20px; }
  .brand img { height: 34px; }
  .site-head .text-action { font-size: 9px; letter-spacing: .1em; }
  .story-chapter { padding: 124px 22px calc(58px + var(--safe)); }
  .story h1, .reveal h1 { font-size: clamp(50px, 13.8vw, 82px); line-height: 1; }
  .story h2 { font-size: clamp(43px, 11.8vw, 70px); line-height: 1.04; }
  .story .eyebrow { font-size: 9px; letter-spacing: .22em; }
  .lede { max-width: 35ch; font-size: 17px; line-height: 1.6; margin: 24px 0 29px; }
  .truth { max-width: 41ch; font-size: 11px; }
  .story-note { display: none; }
  .story-details { align-items: center; }
  .story-details .story-visual img { object-position: 68% center; }
  .visual-pane { height: clamp(245px, 31svh, 310px); }
  .visual-status { top: 100px; left: 22px; right: 22px; font-size: 10px; padding: 10px 12px; }
  .decision-pane { padding: 9px 20px calc(20px + var(--safe)); min-height: 69svh; }
  .journey-head { gap: 12px; font-size: 9px; }
  .question { padding: 20px 0 26px; }
  .question h2 { font-size: clamp(32px, 8.6vw, 44px); }
  .question .eyebrow { margin-bottom: 13px; font-size: 9px; }
  .question-hint { font-size: 14px; margin-bottom: 0; }
  .options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 21px; }
  .option { min-height: 96px; padding: 13px 12px; }
  .option strong { font-size: 14px; }
  .option small { font-size: 10px; line-height: 1.5; }
  .template-gate { gap: 9px; }
  .gate__yes, .gate__no { min-height: 66px; font-size: 13px; }
  .notice { padding: 13px; font-size: 12px; }
  .upload { padding: 16px; }
  .journey-actions { gap: 12px; flex-wrap: wrap; }
  .journey-actions .text-action { font-size: 9px; letter-spacing: .11em; }
  .journey-actions .primary { min-width: 120px; flex: 1; padding: 16px 15px; font-size: 10px; }
  .save-status { margin-top: 13px; font-size: 10px; }
  .reveal { padding: 126px 22px calc(48px + var(--safe)); }
  .reveal-actions { align-items: stretch; flex-direction: column; gap: 10px; }
  .recap-panel { margin-top: 56px; }
  .recap-panel dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
  .recap-panel dd { font-size: 14px; }
  .fatal { left: 14px; right: 14px; bottom: calc(14px + var(--safe)); padding: 22px; max-height: calc(100svh - 28px - var(--safe)); }
  .fatal h2 { font-size: 25px; }
}

@media (max-height: 640px) and (min-width: 761px) {
  .visual-pane { min-height: 100svh; }
  .decision-pane { padding-top: 82px; }
  .question { padding: 24px 0; }
  .question h2 { font-size: 36px; }
  .story-chapter { padding-top: 112px; padding-bottom: 60px; }
  .story h1 { font-size: clamp(52px, 8vw, 96px); }
  .story h2 { font-size: clamp(44px, 6.5vw, 80px); }
}

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

/* Customer refinement: silver typography, quiet controls, distinct compositions. */
:root { --night: #000; --ink: #e8e8e8; --blue: #0050b0; --muted: #b5bbc2; --quiet: #a5adb6; }
html { scroll-padding-top: 100px; }
body { font-size: 1rem; }
.text-action { font-size: .875rem; letter-spacing: .04em; min-height: 48px; }
.primary { font-size: .875rem; letter-spacing: .05em; min-height: 54px; }
.eyebrow { font-size: .75rem; letter-spacing: .18em; }
.truth, .visual-status, .save-status, .story-note span, .story-note p { font-size: .8125rem; }
.act-nav { display: flex; gap: 28px; color: var(--quiet); font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; }
.act-nav span { position: relative; padding: 12px 0; }
.act-nav [aria-current="step"] { color: var(--ink); }
.act-nav [aria-current="step"]::after { content: ""; position: absolute; inset: auto 0 3px; height: 2px; background: #1268d6; }
.story-chapter { min-height: 96svh; content-visibility: auto; contain-intrinsic-size: auto 96svh; }
.story-intro { min-height: 100svh; }
.story-details { min-height: 88svh; }
.story-details .story-copy { margin-left: 18%; }
.story-details h2 { max-width: 14ch; }
.story-invitation { min-height: 84svh; background: #080a0d; }
.story h1, .story h2, .reveal h1 { font-weight: 300; }
.story h1 em, .story h2 em, .reveal h1 em { font-weight: 500; }
.story .lede { max-width: 39ch; }
.story-shade { background: linear-gradient(90deg, #000e 0%, #0009 45%, #0001 100%), linear-gradient(0deg, #0009, transparent 70%); }
.composer { grid-template-columns: minmax(0, 1.2fr) minmax(440px, .8fr); background: #080a0d; }
.visual-pane { contain: paint; background: #031329; }
.visual-pane > img { opacity: .8; }
.visual-wash { background: linear-gradient(0deg, #000d 0%, #0002 62%); }
.visual-caption { position: absolute; left: var(--gutter); right: 36px; bottom: 145px; }
.visual-caption > p:last-child { margin: 0; font-size: clamp(2rem, 3.8vw, 4rem); font-weight: 300; letter-spacing: -.04em; line-height: 1.12; }
.visual-caption em { font-style: normal; font-weight: 500; }
.visual-status { padding: 12px 0; border: 0; border-top: 1px solid #cbd4e14d; background: none; }
.decision-pane { padding-top: 100px; padding-bottom: calc(24px + var(--safe)); }
.journey-head { font-size: .75rem; letter-spacing: .05em; gap: 20px; }
.progress { overflow: hidden; }
.progress i { width: 100%; transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); background: #1268d6; }
.question { padding: 36px 0 24px; scroll-margin-top: 100px; }
.question h2 { font-size: clamp(2rem, 3.1vw, 3.4rem); line-height: 1.12; letter-spacing: -.035em; }
.question-hint { font-size: 1rem; line-height: 1.6; }
.visual-boundary { font-size: .8125rem; color: var(--quiet); margin-top: 16px; padding-left: 12px; border-left: 1px solid #607082; }
.options { gap: 0; padding: 0; border-top: 1px solid var(--line); margin-top: 28px; }
.option { position: relative; min-height: 90px; border: 0; border-bottom: 1px solid var(--line); padding: 18px 18px 18px 12px; background: transparent; transition: background .15s ease; }
.options .option:nth-child(odd) { border-right: 1px solid var(--line); }
.option strong { font-size: 1rem; padding-right: 16px; font-weight: 450; }
.option small { font-size: .8125rem; line-height: 1.5; color: var(--muted); }
.option small:empty { display: none; }
.option[data-coverage="none"] small { color: #bfc8d0; }
.option[aria-pressed="true"] { background: #071d36; box-shadow: inset 2px 0 #418ef0; }
.option[aria-pressed="true"]::after { content: "✓"; position: absolute; top: 18px; right: 10px; color: #b7d6ff; font-size: .875rem; }
.option:disabled { opacity: 1; cursor: wait; }
.option:focus-visible { z-index: 1; outline-offset: -3px; }
.swatch { height: 32px; width: 44px; border-radius: 50%; border-color: #ffffff55; }
.template-gate { gap: 0; border-top: 1px solid var(--line); }
.template-gate > p { border: 0; margin: 16px 0 8px; }
.gate__yes, .gate__no { font-size: .875rem; min-height: 76px; padding-right: 30px; }
.gate__yes { border-right: 1px solid var(--line); }
.gate__no[aria-pressed="true"] { background: #171a1e; box-shadow: inset 2px 0 #9da8b6; }
.gate__no[aria-pressed="true"]::after { color: #c2cbd6; }
.choice-status { min-height: 24px; margin: 14px 0 0; font-size: .875rem; color: #c2d7ee; line-height: 1.5; }
.choice-status:empty { display: none; }
.notice { background: none; padding: 0 0 0 12px; border-left-color: #667b92; font-size: .8125rem; color: #bcc8d5; }
.upload { border: 0; border-top: 1px solid var(--line); padding: 20px 0; background: none; }
.upload label, .upload input, .upload textarea { font-size: 1rem; }
.upload p, .beside { font-size: .8125rem; }
.upload textarea { background: #06080b; min-height: 136px; scroll-margin-top: 110px; }
.upload input::file-selector-button { background: #0b2748; font-size: .875rem; padding: 12px 16px; }
.upload-receipt { border-left: 2px solid #418ef0; padding: 8px 12px; overflow-wrap: anywhere; }
.decision-footer { margin-top: auto; padding-top: 20px; }
.journey-actions { gap: 16px; }
.save-status { margin-top: 12px; color: var(--quiet); }
.reveal { grid-template-columns: minmax(0, 1.2fr) minmax(340px, .8fr); gap: 64px; align-items: start; padding-top: 170px; }
.reveal-copy { position: sticky; top: 150px; }
.reveal h1 { font-size: clamp(3.5rem, 6vw, 7rem); }
.reveal-actions { flex-wrap: wrap; }
.save-next { font-size: .875rem; color: var(--muted); line-height: 1.6; max-width: 38ch; margin: 18px 0 0; }
.recap-panel { margin-top: 0; padding: 24px 28px; background: #05080be8; border-top: 1px solid #8e9aaa; }
.recap-head { display: flex; align-items: baseline; gap: 20px; justify-content: space-between; }
.recap-head span { font-size: .8125rem; color: var(--quiet); }
.recap-panel dl { grid-template-columns: 1fr; }
.recap-panel dl > div { padding: 16px 0; }
.recap-panel dt { font-size: .75rem; letter-spacing: .08em; }
.recap-panel dd { font-size: 1rem; }
.recap-panel [data-answer="declined"] dd, .recap-panel [data-answer="omitted"] dd { color: #aeb9c7; }
.fatal { background: #090f17; border-color: #647d99; }
.fatal p:not(.eyebrow) { font-size: 1rem; }
@media (hover: hover) and (pointer: fine) {
  .option:not(:disabled):hover { background: #101b28; }
  .option[aria-pressed="true"]:hover { background: #0c2948; }
}
@media (max-width: 1180px) { .act-nav { gap: 18px; } .reveal { gap: 32px; } }
@media (max-width: 1000px) and (orientation: portrait), (max-width: 760px) {
  .composer { display: block; }
  .act-nav { display: none; }
  .visual-pane { height: 30svh; min-height: 215px; max-height: 350px; }
  .visual-caption { display: none; }
  .visual-status { top: auto; bottom: 36px; font-size: .75rem; padding: 8px 0; }
  .decision-pane { background: #080a0d; min-height: 70svh; padding-top: 14px; padding-bottom: calc(32px + var(--safe)); border-radius: 20px 20px 0 0; }
  .question { padding: 24px 0; scroll-margin-top: 82px; }
  .question h2 { font-size: clamp(2rem, 5vw, 3rem); }
  .decision-footer { padding-top: 16px; }
  .story-details .story-copy { margin-left: 0; }
  .reveal { display: block; padding-top: 125px; }
  .reveal-copy { position: relative; top: auto; }
  .recap-panel { margin-top: 48px; }
  .recap-panel dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .site-head .text-action { font-size: .8125rem; letter-spacing: .02em; }
  .site-head { min-height: 72px; }
  .story-chapter { padding-top: 118px; }
  .story .eyebrow, .question .eyebrow { font-size: .75rem; letter-spacing: .14em; }
  .story .truth, .truth { font-size: .8125rem; }
  .story h1, .reveal h1 { font-size: clamp(3rem, 13vw, 5rem); }
  .story h2 { font-size: clamp(2.5rem, 11vw, 4rem); }
  .visual-pane { height: 27svh; min-height: 195px; }
  .visual-status { left: 20px; right: 20px; bottom: 34px; }
  .decision-pane { min-height: 73svh; padding: 10px 20px calc(152px + var(--safe)); }
  .journey-head { gap: 12px; font-size: .75rem; }
  .question .eyebrow { margin-bottom: 12px; }
  .question h2 { font-size: clamp(2rem, 8.5vw, 2.75rem); }
  .question-hint { font-size: 1rem; }
  .visual-boundary { margin-top: 14px; }
  .options { margin-top: 22px; gap: 0; }
  .option { min-height: 90px; padding: 16px 12px; }
  .option strong { font-size: 1rem; }
  .option small { font-size: .8125rem; }
  .option[aria-pressed="true"]::after { top: 16px; right: 9px; }
  .gate__yes, .gate__no { min-height: 76px; font-size: .875rem; padding-right: 27px; }
  .notice { font-size: .8125rem; }
  .upload { padding: 18px 0; }
  .decision-footer { position: fixed; z-index: 30; inset: auto 0 0; padding: 12px 20px calc(10px + var(--safe)); background: #080a0df5; border-top: 1px solid var(--line); }
  .journey-actions { display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; }
  .journey-actions .text-action { font-size: .875rem; letter-spacing: .01em; }
  .journey-actions .primary { font-size: .875rem; min-width: 0; width: 100%; grid-column: 2; grid-row: 1; padding: 14px 18px; }
  #skip { grid-column: 1 / -1; grid-row: 2; min-height: 36px; padding: 6px; }
  .save-status { margin: 6px 0 0; font-size: .75rem; text-align: right; }
  body[data-editing="true"] .decision-footer { position: static; margin: 0 -20px -120px; }
  .reveal-actions { gap: 6px; }
  .reveal-actions .primary { width: 100%; }
  .recap-panel { padding: 20px 0; background: transparent; }
  .recap-panel dl { grid-template-columns: 1fr; }
  .recap-panel dd { font-size: 1rem; }
  .fatal { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) { .progress i, .option { transition: none; } }

/* Editorial, native-scroll story. No product representation.
   The decorative viewport stays behind ordinary flowing document sections;
   the controller only reads scroll. No spacer, scroll trap, or input capture. */
#story { isolation: isolate; background: #06151a; }
.story-canvas {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(ellipse at 72% 34%, #24464a, #07131c 72%);
}
.story-canvas > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
  transform: translate3d(var(--story-x, 0%), var(--story-y, 0%), 0) scale(var(--story-scale, 1));
  transform-origin: center;
}
#story[data-story-motion="active"] .story-canvas > img { will-change: transform; }
#story[data-story-media="failed"] .story-canvas > img { visibility: hidden; }
.story-canvas-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #020b12b8 0%, #020b1250 36%, #020b1200 70%),
              linear-gradient(0deg, #020b12d9 0%, #020b122b 26%, transparent 58%);
}
#story .story-chapter {
  z-index: 1;
  min-height: 115svh;
  padding: 160px var(--gutter) 180px;
  align-items: center;
  border: 0;
  background: none;
  content-visibility: visible;
  contain-intrinsic-size: none;
  isolation: auto;
  overflow: visible;
  scroll-margin-top: 0;
}
#story .story-intro { min-height: 100svh; align-items: end; padding-bottom: clamp(138px, 19svh, 210px); }
#story .story-copy { width: 100%; max-width: 720px; margin: 0; }
#story h1, #story h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(4rem, 7.6vw, 7.8rem);
  letter-spacing: -.055em;
  line-height: 1.03;
  text-wrap: initial;
  max-width: none;
  text-shadow: 0 3px 28px #03121e35;
}
#story h2 { font-size: clamp(3.6rem, 6.6vw, 6.5rem); }
#story h1 em, #story h2 em { font-weight: 400; font-style: italic; color: #e3e9e7; }
#story .eyebrow { color: #e0e6e5; font-size: .6875rem; letter-spacing: .17em; margin-bottom: 30px; line-height: 1.7; }
#story .lede { max-width: 32ch; color: #e5e9e7; font-size: clamp(1rem, 1.3vw, 1.1875rem); margin: 26px 0 30px; line-height: 1.65; }
#story .truth { max-width: 41ch; color: #d0d9d9; }
.story-aside { font-size: .8125rem; line-height: 1.7; color: #c7d1d3; padding-left: 18px; border-left: 1px solid #d9e1de66; }
.story-explore {
  display: inline-flex;
  align-items: center;
  gap: 32px;
  min-height: 48px;
  padding: 12px 0;
  text-decoration: none;
  font-size: .8125rem;
  letter-spacing: .04em;
  border-bottom: 1px solid #dee7e570;
}
.story-explore span { font-size: 1.25rem; }
.story-contact { margin: 16px 0 0; font-size: .8125rem; line-height: 1.7; color: #d0d9d9; }
.story-contact a { display: inline-flex; align-items: center; min-height: 44px; color: #f1f4ef; }
.story-index { position: absolute; right: var(--gutter); bottom: 146px; color: #dee5e4; font-size: .6875rem; letter-spacing: .16em; }
.story-footer {
  position: fixed;
  z-index: 3;
  inset: auto 0 0;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  padding: 26px var(--gutter) calc(24px + var(--safe));
  background: linear-gradient(0deg, #020a12ed, #020a1280 68%, transparent);
}
.concept-label { margin: 0; font-size: .6875rem; line-height: 1.65; color: #c8d2d5; padding-bottom: 10px; }
.story-rail { position: relative; display: flex; justify-content: space-between; gap: 26px; }
.story-rail a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 0 14px; text-decoration: none; font-size: .75rem; color: #bdc9cd; }
.story-track { position: absolute; inset: auto 0 0; height: 1px; background: #dde7e340; }
.story-track i { display: block; height: 100%; background: #e4eeee; transform: scaleX(var(--story-progress, 0)); transform-origin: left; }
#story[data-story-chapter="0"] .story-rail a:nth-child(1),
#story[data-story-chapter="1"] .story-rail a:nth-child(2),
#story[data-story-chapter="2"] .story-rail a:nth-child(3),
#story[data-story-chapter="3"] .story-rail a:nth-child(4) { color: #fff; }
@media (hover: hover) { .story-rail a:hover, .story-explore:hover { color: #fff; } }
@media (max-width: 1000px) and (orientation: portrait) {
  #story .story-chapter { align-items: end; padding-bottom: 180px; }
  .story-canvas > img { object-position: 64% 50%; }
  .story-canvas-shade { background: linear-gradient(0deg, #020b12f2, #020b1277 38%, #020b1210 70%); }
}
@media (max-width: 760px) {
  #story .story-chapter { min-height: 110svh; padding: 160px 24px 152px; align-items: end; }
  #story .story-intro { min-height: 100svh; padding-bottom: 148px; }
  #story .story-copy { max-width: 500px; }
  #story h1 { font-size: clamp(3.4rem, 13vw, 5.5rem); }
  #story h2 { font-size: clamp(3.1rem, 12vw, 5rem); }
  #story .eyebrow { font-size: .625rem; letter-spacing: .13em; margin-bottom: 24px; }
  #story .lede { font-size: 1rem; line-height: 1.6; max-width: 30ch; margin: 22px 0 20px; }
  #story .truth { font-size: .75rem; max-width: 36ch; }
  #story .primary { padding: 17px 22px; min-height: 52px; font-size: .8125rem; }
  .story-canvas > img { object-position: 64% 50%; }
  .story-canvas-shade { background: linear-gradient(0deg, #020b12f5 0%, #020b12a3 32%, #020b1210 67%); }
  .story-index { display: none; }
  .story-footer { display: block; padding: 24px 24px calc(15px + var(--safe)); }
  .concept-label { padding-bottom: 2px; font-size: .625rem; }
  .story-rail { gap: 18px; }
  .story-rail a { font-size: .75rem; min-height: 44px; padding-bottom: 8px; }
}
@media (max-height: 600px) and (orientation: landscape) {
  #story .story-chapter { min-height: 125svh; padding: 126px var(--gutter) 125px; }
  #story h1, #story h2 { font-size: clamp(2.8rem, 6vw, 4.5rem); }
  #story .eyebrow { margin-bottom: 16px; }
  #story .lede { margin: 18px 0; }
  .story-footer { padding-top: 14px; padding-bottom: calc(12px + var(--safe)); }
}
@media (prefers-reduced-motion: reduce) {
  .story-canvas > img { transform: none !important; will-change: auto !important; }
}

/* Concept C: two genuinely different studies, with a native-scroll material reveal.
   Masked layers remain decorative. Every word and action stays in document flow. */
.story-material-frame { position: absolute; inset: 0; clip-path: inset(0 calc((1 - var(--story-detail, 0)) * 100%) 0 0); pointer-events: none; }
.story-material-frame > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transform: scale(var(--story-detail-scale, 1)); }
.story-material-shade { position: absolute; inset: 0; background: linear-gradient(0deg, #041319e8, #04131970 27%, transparent 58%), linear-gradient(90deg, #0310183d, transparent 60%); }
.story-aperture { position: absolute; inset: 0; border: solid #06151a; border-width: calc(var(--story-aperture, 0) * .5vh) calc(var(--story-aperture, 0) * .5vw); pointer-events: none; }
#story[data-story-motion="active"] .story-material-frame { will-change: clip-path; }
.story-water-word { position: absolute; z-index: -1; top: 15%; left: var(--gutter); color: transparent; -webkit-text-stroke: 1px #e4edec48; font: 400 clamp(7rem, 21vw, 24rem)/1 Georgia,serif; letter-spacing: -.065em; pointer-events: none; }
#story .story-details { align-items: end; padding-bottom: 150px; }
#story .story-details h2 { font-size: clamp(3.2rem, 5.7vw, 5.8rem); }
#story .story-details .lede { margin: 20px 0 18px; }
.material-key { position: absolute; right: var(--gutter); bottom: 155px; margin: 0; width: min(28vw, 330px); }
.material-key > div { border-top: 1px solid #d5e2df66; padding: 16px 0; }
.material-key dt { color: #b5c8c9; font-size: .625rem; text-transform: uppercase; letter-spacing: .15em; margin-bottom: 8px; }
.material-key dd { margin: 0; font: 400 1.6rem/1.2 Georgia,serif; color: #f4f1e9; }
.material-key dd span { display: block; margin-top: 8px; font: 400 .75rem/1.5 system-ui,sans-serif; color: #c2d0d0; }
.story-detail-static { width: 100%; height: auto; margin: 0 0 32px; border: 1px solid #ece3cf55; }
#story[data-story-motion="active"][data-story-detail="ready"] .story-detail-static { display: none; }
#story:not([data-story-motion="active"]) .story-details { display: block; background: #06151aea; }
#story:not([data-story-motion="active"]) .material-key { position: static; width: 100%; display: flex; gap: 28px; margin-top: 32px; }
#story:not([data-story-motion="active"]) .material-key > div { flex: 1; }
@media (max-width: 1000px) and (orientation: portrait), (max-width: 760px) {
  .story-material-frame > img { object-position: 48% 50%; }
  .story-material-shade { background: linear-gradient(0deg, #041319f5, #0413199c 28%, transparent 62%); }
  #story .story-details { padding-bottom: 145px; }
  #story .story-details h2 { font-size: clamp(2.8rem, 11vw, 4.8rem); }
  .material-key { position: static; width: 100%; display: flex; gap: 12px; margin: 26px 0 0; }
  .material-key > div { flex: 1; padding: 12px 0; }
  .material-key > div:last-child { display: none; }
  .material-key dd { font-size: 1.15rem; }
  .material-key dd span { display: none; }
  #story .story-details { display: flex; flex-direction: column; justify-content: end; align-items: stretch; }
  #story .story-details .story-aside { font-size: .6875rem; }
  .story-water-word { top: 18%; left: 20px; font-size: 26vw; }
}
@media (prefers-reduced-motion: reduce) {
  .story-material-frame, .story-aperture { display: none; }
  .story-water-word { display: none; }
}