:root {
  --paper: #fcfbf8;
  --white: #fff;
  --ink: #111;
  --soft: #585858;
  --terracotta: #c66d3f;
  --terracotta-deep: #a95227;
  --blue: #5bd7ff;
  --blue-deep: #1479d3;
  --blue-mist: #eaf8ff;
  --line: rgba(17, 17, 17, .13);
  --shell: min(1420px, calc(100vw - 80px));
  --body: "DM Sans", system-ui, sans-serif;
  --display: "Outfit", var(--body);
  --accent: "Instrument Sans", var(--body);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; }
a { color: inherit; }
a:focus-visible, video:focus-visible { outline: 3px solid var(--blue-deep); outline-offset: 5px; }
.skip-link { position: fixed; top: -80px; left: 20px; z-index: 100; padding: 10px 16px; color: #fff; background: var(--ink); }
.skip-link:focus { top: 20px; }
.shell { width: var(--shell); margin-inline: auto; }
.chapter { position: relative; overflow: hidden; }

.site-nav {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: var(--shell);
  padding-top: 28px;
  transform: translateX(-50%);
}
.brand { display: inline-flex; }
.brand img { display: block; width: 181px; height: auto; }

.button {
  display: inline-flex;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px 28px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--display);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: transform .18s ease, background .18s ease;
}
.button:hover { transform: translateY(-2px); }
.button-dark { color: #fff; background: var(--ink); }
.button-dark:hover { background: var(--terracotta-deep); }
.button-small { min-height: 52px; padding: 14px 25px; font-size: .88rem; }
.text-link { font-family: var(--display); font-size: .92rem; font-weight: 600; text-underline-offset: 5px; }

.eyebrow {
  margin: 0 0 20px;
  color: var(--terracotta-deep);
  font-family: var(--display);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .19em;
  line-height: 1.2;
  text-transform: uppercase;
}
.eyebrow span { color: #9b9b9b; }
.eyebrow-light { color: #f2a176; }
h1, h2, p { margin-top: 0; }
h1, h2 { margin-bottom: 28px; font-family: var(--display); letter-spacing: -.055em; }
h1 em, h2 em { color: var(--terracotta); font-family: var(--accent); font-weight: 500; letter-spacing: -.07em; }
h2 { font-size: clamp(3.2rem, 6vw, 6.8rem); line-height: .94; }

.hero { min-height: 100svh; background: var(--white); }
.hero-shell { position: relative; z-index: 5; display: flex; min-height: 100svh; align-items: center; padding: 112px 0 48px; }
.hero-copy { position: relative; width: 55%; max-width: 780px; }
.hero h1 { max-width: 820px; margin-bottom: 30px; font-size: clamp(4.1rem, 5.8vw, 6.35rem); font-weight: 800; line-height: .88; }
.hero h1 em { font-size: 1.04em; white-space: nowrap; }
.hero-lede { max-width: 650px; margin-bottom: 26px; color: var(--soft); font-size: clamp(1.05rem, 1.25vw, 1.2rem); line-height: 1.7; }
.hero-reading-block { position: relative; }
.hero-actions { display: flex; align-items: center; gap: 24px; }
.hero-support { max-width: 600px; margin: 13px 0 0; color: #747474; font-size: .82rem; }
.hero-neural-field {
  --neural-core-from: .64;
  --neural-core-to: .82;
  --neural-bloom-from: .18;
  --neural-bloom-to: .34;
  position: absolute;
  top: 3%;
  right: -2%;
  bottom: 0;
  z-index: 0;
  width: 54%;
  pointer-events: none;
}
.hero-neural-video {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.04) contrast(1.02);
}
.hero-neural-field::before,
.hero-neural-field::after {
  position: absolute;
  inset: 0;
  content: "";
  background: url("../assets/hero-neural-field-v1.png") 76% center / cover no-repeat;
}
.hero-neural-field::before {
  opacity: var(--neural-core-to);
  filter: saturate(1.28) brightness(1.08) drop-shadow(0 0 3px rgba(91,215,255,.95)) drop-shadow(0 0 10px rgba(24,143,230,.72));
  animation: neural-core 6s ease-in-out infinite alternate;
}
.hero-neural-field::after {
  opacity: var(--neural-bloom-to);
  filter: blur(10px) saturate(1.55) brightness(1.15) drop-shadow(0 0 18px rgba(91,215,255,.95));
  transform: scale(1.012);
  animation: neural-bloom 7.5s ease-in-out infinite alternate;
}
.hero-scene-2 .hero-neural-field { top: -5%; right: -3%; width: 63%; }
.hero-scene-2 .hero-neural-field::before,
.hero-scene-2 .hero-neural-field::after { background-image: url("../assets/neural-orbit-v1.png"); background-position: 90% center; }
.hero-scene-2 .hero-neural-field::before { animation: neural-orbit 11s ease-in-out infinite alternate; }
.hero-scene-2 .hero-neural-field::after { animation: neural-orbit-bloom 8s ease-in-out infinite alternate; }

.hero-scene-3 .hero-neural-field { top: -4%; right: -7%; width: 70%; }
.hero-scene-3 .hero-neural-field::before,
.hero-scene-3 .hero-neural-field::after { background-image: url("../assets/neural-ribbons-v1.png"); background-position: 94% center; }
.hero-scene-3 .hero-neural-field::before { animation: neural-flow 9s ease-in-out infinite alternate; }
.hero-scene-3 .hero-neural-field::after { animation: neural-flow-bloom 7s ease-in-out infinite alternate; }

.hero-scene-4 .hero-neural-field { top: -7%; right: -5%; width: 67%; }
.hero-scene-4 .hero-neural-field::before,
.hero-scene-4 .hero-neural-field::after { background-image: url("../assets/neural-halo-v1.png"); background-position: 92% center; }
.hero-scene-4 .hero-neural-field::before { animation: neural-halo 10s ease-in-out infinite alternate; }
.hero-scene-4 .hero-neural-field::after { animation: neural-halo-bloom 7.5s ease-in-out infinite alternate; }

.alignment-core,
.signal-node,
.electric-pulse { display: none; position: absolute; pointer-events: none; }

.hero-scene-5 .hero-neural-field,
.hero-scene-6 .hero-neural-field,
.hero-scene-7 .hero-neural-field {
  top: -8%;
  right: -6%;
  width: 70%;
  height: 108%;
}

.hero-scene-5 .hero-neural-field {
  background: radial-gradient(circle at 56% 34%, rgba(247,174,105,.12), transparent 8%), radial-gradient(circle at 57% 37%, rgba(54,167,239,.1), transparent 38%);
}
.hero-scene-5 .hero-neural-field::before {
  background-image: url("../assets/neural-halo-v1.png");
  background-position: 91% center;
  opacity: .64;
  filter: saturate(.92) brightness(1.08) drop-shadow(0 0 9px rgba(68,177,240,.42));
  animation: signal-arrive 2.1s cubic-bezier(.2,.82,.22,1) both, quiet-signal 10s 2.1s ease-in-out infinite alternate;
}
.hero-scene-5 .hero-neural-field::after {
  background-image: url("../assets/neural-orbit-v1.png");
  background-position: 92% center;
  opacity: .13;
  filter: blur(5px) saturate(1.08);
  animation: signal-bloom-arrive 2.8s cubic-bezier(.2,.82,.22,1) both, quiet-bloom 11s 2.8s ease-in-out infinite alternate;
}

.hero-scene-6 .hero-neural-field {
  background: radial-gradient(circle at 55% 34%, rgba(247,174,105,.18), transparent 7%), radial-gradient(circle at 56% 38%, rgba(47,171,246,.18), transparent 44%);
}
.hero-scene-6 .hero-neural-field::before {
  background-image: url("../assets/neural-orbit-v1.png");
  background-position: 90% center;
  opacity: .8;
  filter: saturate(1.38) brightness(1.1) drop-shadow(0 0 9px rgba(74,190,255,.75));
  animation: field-arrive 2.25s cubic-bezier(.16,.86,.22,1) both, living-field 8.5s 2.25s ease-in-out infinite alternate;
}
.hero-scene-6 .hero-neural-field::after {
  background-image: url("../assets/neural-halo-v1.png");
  background-position: 92% center;
  opacity: .3;
  filter: blur(9px) saturate(1.65) brightness(1.13) drop-shadow(0 0 17px rgba(66,184,255,.8));
  animation: signal-bloom-arrive 2.7s cubic-bezier(.2,.82,.22,1) both, living-bloom 7.2s 2.7s ease-in-out infinite alternate;
}

.hero-scene-7 .hero-neural-field {
  inset: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(90deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.72) 24%, rgba(255,255,255,.44) 42%, rgba(255,255,255,.12) 62%, rgba(255,255,255,.02) 100%), url("../assets/neural-ribbons-v1.png"), radial-gradient(circle at 66% 32%, rgba(255,176,96,.28), transparent 7%), radial-gradient(circle at 68% 40%, rgba(34,173,255,.27), transparent 50%);
  background-position: 0 0, 52% 48%, 66% 32%, 68% 40%;
  background-size: 100% 100%, cover, auto, auto;
  background-repeat: no-repeat;
  animation: none;
}
.hero-scene-7 .hero-neural-field::before {
  background-image: url("../assets/neural-halo-v1.png");
  background-position: 82% 48%;
  opacity: .96;
  filter: saturate(1.62) brightness(1.14) drop-shadow(0 0 8px rgba(102,221,255,.95)) drop-shadow(0 0 24px rgba(22,141,236,.82));
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.2) 30%, #000 54%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.2) 30%, #000 54%);
  animation: none;
}
.hero-scene-7 .hero-neural-field::after {
  background-image: url("../assets/neural-orbit-v1.png");
  background-position: 78% 50%;
  opacity: .48;
  filter: blur(7px) saturate(1.9) brightness(1.22) drop-shadow(0 0 23px rgba(94,216,255,.98));
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.12) 26%, #000 51%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.12) 26%, #000 51%);
  animation: none;
}

.hero-scene-8 .hero-neural-field,
.hero-scene-9 .hero-neural-field,
.hero-scene-10 .hero-neural-field {
  inset: 0;
  width: 100%;
  height: 100%;
  background: #fff;
}
.hero-scene-8 .hero-neural-field::before,
.hero-scene-9 .hero-neural-field::before,
.hero-scene-10 .hero-neural-field::before {
  z-index: 2;
  opacity: 1;
  background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.98) 27%, rgba(255,255,255,.87) 39%, rgba(255,255,255,.45) 52%, rgba(255,255,255,.08) 72%, transparent 100%);
  filter: none;
  animation: none;
}
.hero-scene-9 .hero-neural-field::before {
  background: linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.94) 20%, rgba(255,255,255,.78) 36%, rgba(255,255,255,.38) 53%, rgba(255,255,255,.08) 72%, transparent 100%);
}
.hero-scene-8 .hero-neural-field::after,
.hero-scene-9 .hero-neural-field::after,
.hero-scene-10 .hero-neural-field::after { display: none; }
.hero-scene-8 .hero-neural-video-a,
.hero-scene-9 .hero-neural-video-b,
.hero-scene-10 .hero-neural-video-c { display: block; }
.hero-scene-8 .hero-portrait,
.hero-scene-9 .hero-portrait,
.hero-scene-10 .hero-portrait { top: 2px; right: -1%; width: 72%; }

.hero-scene-9 .hero-copy > .eyebrow {
  position: relative;
  padding-left: 40px;
}
.hero-scene-9 .hero-copy > .eyebrow::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 11px;
  height: 11px;
  border: 2px solid rgba(31,154,224,.72);
  border-radius: 50%;
  content: "";
  box-shadow: 0 0 0 4px rgba(91,215,255,.09), 0 0 15px rgba(39,173,239,.5);
  transform: translateY(-50%);
  animation: hero-entry-node 8.4s ease-in-out infinite;
}
.hero-scene-9 .hero-copy > .eyebrow::after {
  position: absolute;
  top: 50%;
  left: 13px;
  width: 20px;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, rgba(45,172,237,.82), rgba(198,109,63,.44));
  transform: translateY(-50%);
}
.hero-scene-9 .hero h1 em {
  position: relative;
  display: inline-block;
  color: var(--terracotta);
  animation: whole-life-signal 8.4s ease-in-out infinite;
}
.hero-scene-9 .hero h1 em::before {
  position: absolute;
  right: .02em;
  bottom: -.03em;
  left: .02em;
  height: 2px;
  border-radius: 999px;
  content: "";
  opacity: .52;
  background: linear-gradient(90deg, rgba(198,109,63,.12), rgba(198,109,63,.9) 22%, rgba(91,215,255,.88) 76%, rgba(20,121,211,.12));
}
.hero-scene-9 .hero h1 em::after {
  position: absolute;
  bottom: -.085em;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  content: "";
  opacity: 0;
  background: #f9fdff;
  box-shadow: 0 0 7px #fff, 0 0 16px rgba(91,215,255,.95), 0 0 28px rgba(20,121,211,.62);
  animation: whole-life-travel 8.4s cubic-bezier(.3,.05,.18,1) infinite;
}

.neural-sequence {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 6;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero-scene-7 .neural-sequence { display: block; }

.hero-scene-5 .alignment-core,
.hero-scene-6 .alignment-core,
.hero-scene-7 .alignment-core {
  display: block;
  top: 12%;
  left: 31%;
  z-index: 3;
  width: min(38vw, 640px);
  aspect-ratio: 1;
  border: 1px solid rgba(59,173,241,.22);
  border-radius: 50%;
  background: radial-gradient(circle, transparent 52%, rgba(74,190,255,.07) 64%, transparent 72%);
  box-shadow: inset 0 0 55px rgba(82,195,255,.08), 0 0 65px rgba(53,169,241,.12);
  animation: core-arrive 2.15s cubic-bezier(.16,.84,.22,1) both, core-breathe 6.8s 2.15s ease-in-out infinite alternate;
}
.hero-scene-5 .alignment-core::before,
.hero-scene-6 .alignment-core::before,
.hero-scene-7 .alignment-core::before {
  position: absolute;
  top: 17%;
  right: 10%;
  width: 10px;
  height: 10px;
  border: 2px solid rgba(255,255,255,.94);
  border-radius: 50%;
  content: "";
  background: #f5a25c;
  box-shadow: 0 0 10px #fff, 0 0 24px rgba(245,162,92,.95), 0 0 44px rgba(56,181,250,.8);
  animation: governing-pulse 3.2s 1.8s ease-in-out infinite;
}
.hero-scene-7 .alignment-core {
  top: 11%;
  left: 48%;
  width: min(42vw, 720px);
  border-color: rgba(86,206,255,.42);
  box-shadow: inset 0 0 80px rgba(80,200,255,.14), 0 0 90px rgba(42,165,242,.24);
  animation: electric-core-in 1.1s ease-out both, electric-core-drift 9s 1.1s ease-in-out infinite alternate;
}
.hero-scene-7 .alignment-core::before { animation: neuron-fire 3.4s 1.1s ease-in-out infinite; }

.hero-scene-5 .signal-node,
.hero-scene-6 .signal-node,
.hero-scene-7 .signal-node {
  display: block;
  z-index: 4;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 50%;
  background: #55c8ff;
  box-shadow: 0 0 8px #fff, 0 0 20px rgba(62,187,255,.88), 0 0 38px rgba(19,133,223,.56);
  opacity: 0;
  animation: node-load .6s var(--node-delay) cubic-bezier(.18,.82,.24,1) forwards, node-breathe 3.8s calc(var(--node-delay) + .6s) ease-in-out infinite alternate;
}
.signal-node-1 { top: 17%; left: 30%; --node-delay: .35s; }
.signal-node-2 { top: 22%; right: 12%; --node-delay: .62s; }
.signal-node-3 { top: 47%; right: 3%; --node-delay: .89s; }
.signal-node-4 { right: 18%; bottom: 13%; --node-delay: 1.16s; }
.signal-node-5 { bottom: 7%; left: 30%; --node-delay: 1.43s; }
.signal-node-6 { top: 52%; left: 8%; --node-delay: 1.7s; }
.hero-scene-5 .signal-node { width: 5px; height: 5px; opacity: .65; box-shadow: 0 0 6px #fff, 0 0 14px rgba(62,187,255,.58); }
.hero-scene-7 .signal-node {
  width: 9px;
  height: 9px;
  box-shadow: 0 0 10px #fff, 0 0 26px rgba(62,197,255,.98), 0 0 52px rgba(16,135,229,.86);
  animation: electric-node-in .45s var(--node-delay) ease-out forwards, neuron-fire 3.6s calc(var(--node-delay) + .45s) ease-in-out infinite;
}

.hero-scene-7 .electric-pulse {
  display: block;
  z-index: 5;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: 0;
  background: #fff;
  box-shadow: 0 0 8px #fff, 0 0 18px #5fd8ff, 0 0 34px rgba(30,145,239,.92);
  offset-rotate: 0deg;
}
.hero-scene-7 .electric-pulse-1 { offset-path: ellipse(31% 42% at 69% 48%); animation: pulse-travel 6.8s .4s linear infinite; }
.hero-scene-7 .electric-pulse-2 { width: 4px; height: 4px; offset-path: ellipse(39% 52% at 68% 50%); animation: pulse-travel 9.2s 2.1s linear infinite reverse; }
.hero-scene-7 .electric-pulse-3 { width: 5px; height: 5px; offset-path: ellipse(25% 34% at 70% 45%); animation: pulse-travel 5.7s 3.4s linear infinite; }
.hero-scene-7 .alignment-core,
.hero-scene-7 .signal-node,
.hero-scene-7 .electric-pulse { display: none; animation: none; }

.hero-portrait { position: absolute; top: 24px; right: -4%; bottom: 0; z-index: 1; width: 68%; pointer-events: none; }
.hero-portrait::before { position: absolute; inset: 0; z-index: 2; content: ""; background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.98) 10%, rgba(255,255,255,.48) 30%, transparent 56%); }
.hero-portrait img { width: 100%; height: 100%; object-fit: contain; object-position: right bottom; }

.design-picker {
  position: absolute;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px;
  border: 1px solid rgba(17,17,17,.12);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255,255,255,.9);
  box-shadow: 0 12px 38px rgba(17,17,17,.12);
  backdrop-filter: blur(18px);
}
.design-picker > span { padding: 0 9px; color: #777; font-family: var(--display); font-size: .58rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.design-picker button {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: 0;
  border-radius: 999px;
  color: #5b5b5b;
  background: transparent;
  font: 600 .65rem/1 var(--body);
  cursor: pointer;
}
.design-picker button b { color: var(--terracotta-deep); font-family: var(--display); font-size: .58rem; letter-spacing: .06em; }
.design-picker button[aria-pressed="true"] { color: #fff; background: var(--ink); }
.design-picker button[aria-pressed="true"] b { color: var(--blue); }
.design-picker button:focus-visible { outline: 2px solid var(--blue-deep); outline-offset: 2px; }
.design-picker-hero { top: 24px; right: max(2.8vw, 26px); }
.design-picker-responsive { display: none; right: 50%; bottom: 18px; transform: translateX(50%); }
.design-picker-mobile { display: none; }
.embedded-review .design-picker { display: none !important; }

.trust-mark { display: flex; align-items: center; gap: 13px; }
.trust-mark strong, .trust-mark small { display: block; }
.trust-mark strong { font-family: var(--display); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.trust-mark small { margin-top: 2px; color: #6f6f6f; font-size: .72rem; }


.chapter-cinema { min-height: 100svh; color: #fff; background: #111; }
.fragment-photo { position: absolute; inset: 0; background: url("../assets/context-the-why-v1.png") 62% center / cover no-repeat; transform: scale(1.025); animation: context-cinema 12s ease-in-out infinite alternate; }
.context-scene-2 .fragment-photo { background-image: url("../assets/context-private-vault-v1.png"); background-position: 64% center; }
.context-scene-3 .fragment-photo { background-image: url("../assets/context-locked-memory-v1.png"); background-position: 63% center; }
.fragment-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,5,5,.92) 0%, rgba(5,5,5,.72) 43%, rgba(5,5,5,.2) 71%, rgba(5,5,5,.44) 100%), linear-gradient(0deg, rgba(5,5,5,.48), transparent 45%); }
.context-glow { position: absolute; top: 9%; right: 16%; z-index: 1; width: 29vw; height: 29vw; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(91,215,255,.2), rgba(20,121,211,.07) 35%, transparent 69%); filter: blur(9px); animation: context-glow 4.8s ease-in-out infinite alternate; mix-blend-mode: screen; }
.context-scene-2 .context-glow { top: 11%; right: 18%; }
.context-scene-3 .context-glow { top: 9%; right: 20%; }
.design-picker-context { right: 28px; bottom: 24px; color: #fff; border-color: rgba(255,255,255,.18); background: rgba(8,8,8,.76); }
.design-picker-context > span { color: rgba(255,255,255,.58); }
.design-picker-context button { color: rgba(255,255,255,.68); }
.design-picker-context button[aria-pressed="true"] { color: var(--ink); background: #fff; }
.fragment-shell { position: relative; z-index: 3; display: flex; min-height: 100svh; align-items: center; padding: 110px 0; }
.fragment-copy { width: 56%; max-width: 780px; }
.fragment h2 { max-width: 850px; margin-bottom: 24px; }
.fragment h2 em { color: #f1a077; }
.fragment-lede { max-width: 630px; color: rgba(255,255,255,.75); font-size: 1.2rem; }
.fragment-lines { display: grid; grid-template-columns: 1fr 1fr; max-width: 690px; margin: 38px 0; border-top: 1px solid rgba(255,255,255,.2); border-left: 1px solid rgba(255,255,255,.2); }
.fragment-lines p { margin: 0; padding: 16px 18px; border-right: 1px solid rgba(255,255,255,.2); border-bottom: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.72); }
.fragment-lines span { color: #fff; font-weight: 700; }
.fragment-rule { max-width: 680px; margin-bottom: 0; padding-left: 20px; border-left: 2px solid var(--blue); font-size: 1.08rem; }

.section-lede { color: var(--soft); font-size: clamp(1.08rem, 1.5vw, 1.28rem); line-height: 1.58; }

/* Deep Work */
.deep-work { min-height: 105svh; background: #e7e8e4; }
.deep-work-photo { position: absolute; inset: 0; background: url("../assets/place-deepwork-pause.png") center / cover no-repeat; }
.deep-work-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(246,246,242,.94) 0%, rgba(246,246,242,.72) 48%, rgba(246,246,242,.18) 73%, rgba(246,246,242,.36) 100%); }
.deep-work-shell { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, .8fr); gap: clamp(50px, 8vw, 130px); min-height: 105svh; align-items: center; padding: 110px 0; }
.deep-work-copy { max-width: 700px; }
.deep-work-copy h2 { font-size: clamp(3.4rem, 5.9vw, 6.4rem); }
.deep-work-copy > p:not(.eyebrow) { max-width: 620px; }
.deep-work-copy .button { margin-top: 10px; }
.governing-brief { position: relative; overflow: hidden; padding: 32px; border: 1px solid rgba(17,17,17,.18); background: rgba(255,255,255,.84); box-shadow: 0 26px 90px rgba(22,26,24,.14); backdrop-filter: blur(14px); }
.governing-brief::before { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; content: ""; background: linear-gradient(var(--terracotta), var(--blue)); }
.brief-heading { display: flex; justify-content: space-between; padding-bottom: 21px; border-bottom: 1px solid var(--line); font-family: var(--display); }
.brief-heading span { font-weight: 700; }
.brief-heading small { color: #777; }
.life-questions { margin: 0; padding: 0; list-style: none; }
.life-questions li { display: grid; grid-template-columns: 58px 1fr; gap: 18px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--line); }
.life-questions b { color: var(--terracotta); font-family: var(--accent); font-size: 2rem; font-style: italic; font-weight: 500; }
.life-questions p { margin: 0; font-size: .96rem; line-height: 1.45; }
.brief-output { margin: 24px 0 0; font-size: .82rem; line-height: 1.55; }
.brief-output span { display: block; margin-bottom: 5px; color: var(--blue-deep); font-family: var(--display); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

/* The electric brain */
.brain { min-height: 112svh; background: #fff; }
.brain-art { position: absolute; inset: 0; }
.brain-art::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.98) 27%, rgba(255,255,255,.8) 42%, rgba(255,255,255,.08) 68%, rgba(255,255,255,.38) 100%); }
.brain-art img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; animation: breathe 8s ease-in-out infinite alternate; }
.brain-shell { position: relative; z-index: 3; display: flex; min-height: 112svh; flex-direction: column; justify-content: center; padding: 120px 0 80px; }
.brain-copy { width: 46%; max-width: 680px; }
.brain-copy h2 { font-size: clamp(3.5rem, 5.8vw, 6.6rem); }
.brain-copy > p:not(.eyebrow) { max-width: 610px; }
.brain-definition { margin-top: 28px; padding: 22px 0 0 22px; border-top: 1px solid var(--line); border-left: 2px solid var(--blue); font-size: .94rem; }
.brain-definition span { display: block; margin-bottom: 5px; color: var(--blue-deep); font-family: var(--display); font-weight: 700; }
.brain-inputs { position: absolute; right: 6%; bottom: 8%; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; width: 36%; }
.brain-inputs span { padding: 8px 13px; border: 1px solid rgba(20,121,211,.3); border-radius: 999px; color: #0b63a7; background: rgba(255,255,255,.8); font-size: .72rem; font-weight: 600; box-shadow: 0 0 20px rgba(91,215,255,.17); }
.trust-mark-brain { position: absolute; bottom: 7%; left: 0; }

/* Grounded decision */
.decision { min-height: 115svh; }
.decision-photo { position: absolute; inset: 0; background: url("../assets/place-offers-decision.png") center / cover no-repeat; }
.decision-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,10,11,.92) 0%, rgba(8,10,11,.78) 55%, rgba(8,10,11,.55) 100%); }
.decision-shell { position: relative; z-index: 3; min-height: 115svh; padding: 112px 0 90px; }
.decision-heading { max-width: 1040px; }
.decision-heading h2 { font-size: clamp(3.3rem, 5.5vw, 6rem); }
.decision-heading h2 em { color: #f1a077; }
.decision-path { display: grid; grid-template-columns: .72fr 1fr 1.25fr 1fr; margin-top: 58px; border-top: 1px solid rgba(255,255,255,.22); border-left: 1px solid rgba(255,255,255,.22); background: rgba(0,0,0,.18); backdrop-filter: blur(16px); }
.decision-path > div { min-height: 235px; padding: 25px; border-right: 1px solid rgba(255,255,255,.22); border-bottom: 1px solid rgba(255,255,255,.22); }
.decision-path span { display: block; margin-bottom: 32px; color: #f2a176; font-family: var(--display); font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.decision-path strong { display: block; font-family: var(--display); font-size: 1.45rem; line-height: 1.2; }
.decision-path small { display: block; margin-top: 14px; color: rgba(255,255,255,.58); }
.context-check ul { margin: 0; padding: 0; list-style: none; }
.context-check li { padding: 5px 0; color: rgba(255,255,255,.78); font-size: .9rem; }
.context-check li::before { margin-right: 9px; color: var(--blue); content: "+"; }
.answer-grounded { box-shadow: inset 0 -2px 0 var(--blue); }
.example-note { margin: 12px 0 0; color: rgba(255,255,255,.5); font-size: .72rem; }

/* Legacy */
.legacy { min-height: 110svh; background: linear-gradient(180deg, #fbfaf7, #f4f0ea); }
.legacy-shell { min-height: 110svh; display: flex; flex-direction: column; justify-content: center; padding: 110px 0 80px; }
.legacy-heading { max-width: 1120px; }
.legacy-heading h2 { font-size: clamp(3.4rem, 5.9vw, 6.6rem); }
.legacy-heading .section-lede { max-width: 680px; }
.legacy-transfer { display: grid; grid-template-columns: 1fr .9fr 1fr; margin-top: 50px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.legacy-transfer > * { min-height: 280px; padding: 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.legacy-person { position: relative; padding-top: 76px; }
.person-node { position: absolute; top: 30px; left: 30px; width: 20px; height: 20px; border: 2px solid var(--terracotta); border-radius: 50%; background: #fff; }
.legacy-daughter .person-node { border-color: var(--blue-deep); box-shadow: 0 0 18px rgba(91,215,255,.65); }
.legacy-person small, .legacy-memory > span { color: #8a8177; font-family: var(--display); font-size: .68rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.legacy-person h3 { max-width: 420px; margin: 9px 0 13px; font-family: var(--display); font-size: clamp(1.65rem, 2.3vw, 2.5rem); line-height: 1.05; letter-spacing: -.04em; }
.legacy-person p { max-width: 390px; margin: 0; color: var(--soft); font-size: .88rem; }
.legacy-memory { position: relative; display: flex; flex-direction: column; justify-content: center; background: rgba(255,255,255,.65); }
.legacy-memory::before, .legacy-memory::after { position: absolute; top: 50%; width: 30px; height: 1px; content: ""; background: var(--blue); box-shadow: 0 0 7px var(--blue); }
.legacy-memory::before { left: -15px; }
.legacy-memory::after { right: -15px; }
.legacy-memory ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 21px 0 0; padding: 0; list-style: none; }
.legacy-memory li { padding: 7px 11px; border: 1px solid rgba(20,121,211,.22); border-radius: 999px; color: #3e687e; background: #fff; font-size: .72rem; }
.legacy-note { margin: 16px 0 0; color: #8c877f; font-size: .7rem; }

/* Relief */
.relief { min-height: 105svh; }
.relief-photo { position: absolute; inset: 0; background: url("../assets/place-brain-install.png") center / cover no-repeat; }
.relief-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,10,11,.9) 0%, rgba(7,10,11,.74) 47%, rgba(7,10,11,.18) 72%, rgba(7,10,11,.36) 100%); }
.relief-shell { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr .75fr; gap: 80px; min-height: 105svh; align-items: center; padding: 110px 0; }
.relief-copy { max-width: 780px; }
.relief-copy h2 { font-size: clamp(3.5rem, 6.1vw, 6.7rem); }
.relief-copy h2 em { color: #f1a077; }
.relief-copy > p:not(.eyebrow) { max-width: 650px; color: rgba(255,255,255,.73); }
.relief-seat { padding-top: 22px; border-top: 1px solid rgba(255,255,255,.22); }
.relief-seat strong { color: #fff; }
.open-loops { display: grid; gap: 8px; }
.open-loops div { position: relative; display: flex; justify-content: space-between; gap: 20px; padding: 17px 18px; border: 1px solid rgba(255,255,255,.18); background: rgba(5,8,10,.55); backdrop-filter: blur(12px); }
.open-loops div::after { position: absolute; top: 0; right: 0; bottom: 0; width: 2px; content: ""; background: var(--blue); box-shadow: 0 0 9px var(--blue); }
.open-loops span { color: rgba(255,255,255,.62); font-size: .82rem; }
.open-loops b { color: #fff; font-size: .8rem; }

/* Ownership and trust */
.ownership { min-height: 120svh; background: #fff; }
.ownership-shell { padding: 120px 0 100px; }
.ownership-heading { max-width: 1100px; }
.ownership-heading h2 { font-size: clamp(3.5rem, 6.1vw, 6.8rem); }
.ownership-heading .section-lede { max-width: 730px; }
.data-path { display: grid; grid-template-columns: 1fr 50px 1fr 50px 1fr 50px 1fr; align-items: stretch; margin: 62px 0; }
.data-place { min-height: 180px; padding: 24px; border: 1px solid var(--line); background: var(--paper); }
.data-place small, .data-place strong, .data-place span { display: block; }
.data-place small { margin-bottom: 30px; color: var(--terracotta); font-family: var(--display); font-weight: 700; }
.data-place strong { font-family: var(--display); font-size: 1.15rem; }
.data-place span { margin-top: 8px; color: var(--soft); font-size: .78rem; }
.data-path > i { position: relative; align-self: center; height: 1px; background: var(--blue); box-shadow: 0 0 8px var(--blue); }
.data-path > i::after { position: absolute; top: -4px; right: 0; width: 8px; height: 8px; border-top: 1px solid var(--blue); border-right: 1px solid var(--blue); content: ""; transform: rotate(45deg); }
.trust-promises { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.trust-promises article { min-height: 180px; padding: 22px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust-promises b { display: block; margin-bottom: 25px; color: var(--terracotta); font-family: var(--accent); font-size: 1.4rem; font-style: italic; font-weight: 500; }
.trust-promises strong { display: block; font-family: var(--display); font-size: 1rem; }
.trust-promises p { margin: 7px 0 0; color: var(--soft); font-size: .78rem; line-height: 1.5; }
.data-detail { margin-top: 30px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.data-detail summary { padding: 19px 0; cursor: pointer; font-family: var(--display); font-weight: 600; }
.data-detail > div { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 0 0 24px; color: var(--soft); font-size: .82rem; }
.data-detail p { margin: 0; }

/* Proof */
.proof { background: #fff; }
.proof-top { padding: 110px 0 90px; }
.proof-copy { max-width: 1050px; }
.proof-copy h2 { font-size: clamp(3.4rem, 5.8vw, 6.4rem); }
.answer-gate { display: grid; grid-template-columns: 1fr 45px 1fr 45px 1fr 45px 1fr; align-items: center; margin-top: 48px; }
.answer-gate div { min-height: 135px; padding: 21px; border: 1px solid var(--line); }
.answer-gate span, .answer-gate small { display: block; }
.answer-gate span { font-family: var(--display); font-weight: 700; }
.answer-gate small { margin-top: 10px; color: var(--soft); font-size: .74rem; }
.answer-gate i { height: 1px; background: var(--blue); box-shadow: 0 0 8px var(--blue); }
.answer-gate .human-gate { border-color: var(--terracotta); background: #fff9f5; box-shadow: inset 0 3px 0 var(--terracotta); }
.testimonial-cinema { display: grid; grid-template-columns: minmax(0, 1fr) 340px; width: min(1580px, calc(100vw - 48px)); min-height: 760px; margin: 0 auto 100px; overflow: hidden; border-radius: 36px; color: #fff; background: #0b0d0f; box-shadow: 0 35px 100px rgba(0,0,0,.25); }
.cinema-player { position: relative; min-height: 760px; overflow: hidden; background: #000; }
.cinema-player::after { position: absolute; inset: 0; z-index: 1; content: ""; pointer-events: none; background: linear-gradient(0deg, rgba(0,0,0,.86) 0%, transparent 55%); }
.cinema-player video { width: 100%; height: 100%; min-height: 760px; object-fit: contain; background: #000; }
.cinema-caption { position: absolute; right: 7%; bottom: 5%; left: 7%; z-index: 2; pointer-events: none; }
.cinema-caption p { margin-bottom: 8px; color: #f2a176; font-family: var(--display); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.cinema-caption h3 { margin: 0; font-family: var(--display); font-size: clamp(2.6rem, 4.5vw, 5rem); letter-spacing: -.05em; line-height: .95; }
.cinema-caption > span { color: rgba(255,255,255,.6); font-size: .8rem; }
.cinema-caption blockquote { max-width: 800px; margin: 21px 0 0; font-size: clamp(1.25rem, 2vw, 2rem); line-height: 1.3; }
.cinema-list { padding: 32px 20px; background: #101316; }
.cinema-list > p { margin: 0 12px 18px; color: rgba(255,255,255,.5); font-family: var(--display); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.cinema-list button { display: grid; grid-template-columns: 54px 1fr; gap: 14px; width: 100%; align-items: center; margin: 0 0 5px; padding: 13px; border: 1px solid transparent; border-radius: 14px; color: #fff; background: transparent; text-align: left; cursor: pointer; }
.cinema-list button:hover, .cinema-list button.is-active { border-color: rgba(242,161,118,.55); background: rgba(198,109,63,.12); }
.cinema-list img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; }
.cinema-list span, .cinema-list b, .cinema-list small { display: block; }
.cinema-list b { font-family: var(--display); font-size: .9rem; }
.cinema-list small { margin-top: 3px; color: rgba(255,255,255,.46); font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; }

/* Guide */
.guide { min-height: 100svh; color: #fff; background: #111; }
.guide-photo { position: absolute; inset: 0; background: url("../assets/james-library.png") 72% center / cover no-repeat; filter: grayscale(1); }
.guide-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,4,4,.94) 0%, rgba(4,4,4,.76) 49%, rgba(4,4,4,.12) 74%, rgba(4,4,4,.28) 100%); }
.guide-shell { position: relative; z-index: 3; display: flex; min-height: 100svh; align-items: center; padding: 110px 0; }
.guide-copy { max-width: 800px; }
.guide-copy h2 { font-size: clamp(3.5rem, 6vw, 6.7rem); }
.guide-copy > p:not(.eyebrow) { max-width: 620px; color: rgba(255,255,255,.72); }
.guide-rule { padding-top: 23px; border-top: 1px solid rgba(255,255,255,.22); color: #fff !important; font-size: 1.08rem; }

/* Final horizon */
.final { min-height: 100svh; color: #fff; background: #111; }
.final-photo { position: absolute; inset: 0; background: url("../assets/place-final-horizon.png") center / cover no-repeat; }
.final-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,8,9,.9) 0%, rgba(6,8,9,.68) 47%, rgba(6,8,9,.22) 73%, rgba(6,8,9,.38) 100%); }
.final-shell { position: relative; z-index: 3; display: flex; min-height: 100svh; align-items: center; padding: 110px 0; }
.final-copy { max-width: 900px; }
.final-copy h2 { font-size: clamp(4rem, 7vw, 8rem); }
.final-copy h2 em { color: #f1a077; }
.final-copy > p:not(.eyebrow) { max-width: 660px; color: rgba(255,255,255,.76); font-size: 1.13rem; }
.final-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.button-light { color: var(--ink); background: #fff; }
.button-light:hover { color: #fff; background: var(--terracotta); }
.button-ghost { color: #fff; border-color: rgba(255,255,255,.55); background: rgba(0,0,0,.15); }
.button-ghost:hover { background: rgba(255,255,255,.12); }
.trust-mark-final { width: fit-content; margin-top: 35px; color: #fff; }
.trust-mark-final small { color: rgba(255,255,255,.6); }
.trust-mark-final .trust-symbol { background: rgba(0,0,0,.22); }

@keyframes neural-core {
  from { opacity: var(--neural-core-from); filter: saturate(1.18) brightness(1.04) drop-shadow(0 0 2px rgba(91,215,255,.78)) drop-shadow(0 0 7px rgba(24,143,230,.58)); }
  to { opacity: var(--neural-core-to); filter: saturate(1.4) brightness(1.12) drop-shadow(0 0 4px rgba(205,247,255,1)) drop-shadow(0 0 12px rgba(24,143,230,.92)); }
}
@keyframes neural-bloom {
  from { opacity: var(--neural-bloom-from); filter: blur(8px) saturate(1.35) brightness(1.08) drop-shadow(0 0 14px rgba(91,215,255,.68)); }
  to { opacity: var(--neural-bloom-to); filter: blur(12px) saturate(1.7) brightness(1.18) drop-shadow(0 0 24px rgba(91,215,255,1)); }
}
@keyframes neural-orbit {
  from { opacity: .66; filter: saturate(1.1) brightness(1.04) drop-shadow(0 0 8px rgba(38,155,235,.52)); transform: translate3d(1.5%, -1%, 0) scale(1.02) rotate(-.6deg); }
  to { opacity: .9; filter: saturate(1.42) brightness(1.12) drop-shadow(0 0 18px rgba(91,215,255,.92)); transform: translate3d(-1%, 1%, 0) scale(1.06) rotate(.8deg); }
}
@keyframes neural-orbit-bloom {
  from { opacity: .18; filter: blur(9px) saturate(1.35); transform: scale(1.01); }
  to { opacity: .38; filter: blur(16px) saturate(1.75); transform: scale(1.08); }
}
@keyframes neural-flow {
  from { opacity: .62; filter: saturate(1.12) brightness(1.02); transform: translate3d(2.5%, -.8%, 0) scale(1.02); }
  to { opacity: .9; filter: saturate(1.48) brightness(1.14) drop-shadow(0 0 14px rgba(91,215,255,.8)); transform: translate3d(-2%, 1%, 0) scale(1.055); }
}
@keyframes neural-flow-bloom {
  from { opacity: .15; filter: blur(8px) saturate(1.3); transform: translateX(1.5%) scale(1.02); }
  to { opacity: .34; filter: blur(14px) saturate(1.8); transform: translateX(-1.5%) scale(1.07); }
}
@keyframes neural-halo {
  from { opacity: .62; filter: saturate(1.15) brightness(1.02); transform: scale(.99) rotate(-.5deg); }
  to { opacity: .92; filter: saturate(1.5) brightness(1.15) drop-shadow(0 0 18px rgba(91,215,255,.9)); transform: scale(1.06) rotate(.7deg); }
}
@keyframes neural-halo-bloom {
  from { opacity: .15; filter: blur(10px) saturate(1.35); transform: scale(1); }
  to { opacity: .4; filter: blur(17px) saturate(1.8); transform: scale(1.09); }
}
@keyframes signal-arrive {
  from { opacity: 0; transform: scale(.82) rotate(-2.2deg); }
  to { opacity: .64; transform: scale(1) rotate(0); }
}
@keyframes signal-bloom-arrive {
  from { opacity: 0; transform: scale(.74) rotate(3deg); }
  to { opacity: .3; transform: scale(1.01) rotate(0); }
}
@keyframes field-arrive {
  from { opacity: 0; transform: scale(.76) rotate(-3deg); }
  to { opacity: .8; transform: scale(1) rotate(0); }
}
@keyframes electric-arrive {
  from { opacity: 0; filter: saturate(.7) brightness(1.4) blur(7px); background-position: 88% 45%; }
  to { opacity: .96; filter: saturate(1.62) brightness(1.14) drop-shadow(0 0 8px rgba(102,221,255,.95)) drop-shadow(0 0 24px rgba(22,141,236,.82)); background-position: 82% 48%; }
}
@keyframes electric-layer-in { from { opacity: 0; background-position: 84% 47%; } to { opacity: .48; background-position: 78% 50%; } }
@keyframes electric-core-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes electric-core-drift { from { translate: -5px -2px; } to { translate: 7px 4px; } }
@keyframes electric-node-in { from { opacity: 0; } to { opacity: .35; } }
@keyframes neuron-fire {
  0%, 18%, 30%, 100% { opacity: .26; filter: brightness(.82); box-shadow: 0 0 6px rgba(255,255,255,.65), 0 0 13px rgba(60,184,250,.44); }
  21% { opacity: 1; filter: brightness(1.65); box-shadow: 0 0 12px #fff, 0 0 28px #5fd8ff, 0 0 54px rgba(30,145,239,.95); }
  24% { opacity: .56; filter: brightness(1.12); box-shadow: 0 0 8px #fff, 0 0 18px rgba(68,190,250,.72); }
  27% { opacity: .96; filter: brightness(1.48); box-shadow: 0 0 11px #fff, 0 0 25px #5fd8ff, 0 0 44px rgba(30,145,239,.78); }
}
@keyframes pulse-travel {
  0% { offset-distance: 0%; opacity: 0; }
  5% { opacity: .95; }
  44% { opacity: .55; }
  68% { opacity: 1; }
  96% { opacity: .7; }
  100% { offset-distance: 100%; opacity: 0; }
}
@keyframes core-arrive {
  from { opacity: 0; transform: scale(.7); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes node-load {
  from { opacity: 0; transform: scale(.1); }
  60% { opacity: 1; transform: scale(1.9); }
  to { opacity: .92; transform: scale(1); }
}
@keyframes node-breathe { from { filter: brightness(.9); transform: scale(.86); } to { filter: brightness(1.45); transform: scale(1.34); } }
@keyframes governing-pulse { 0%, 100% { transform: scale(.72); opacity: .65; } 45% { transform: scale(1.5); opacity: 1; } }
@keyframes core-breathe { from { transform: scale(.98) rotate(-.35deg); } to { transform: scale(1.035) rotate(.45deg); } }
@keyframes quiet-signal { from { opacity: .54; transform: scale(.99) rotate(-.25deg); } to { opacity: .72; transform: scale(1.025) rotate(.35deg); } }
@keyframes quiet-bloom { from { opacity: .08; transform: scale(.99); } to { opacity: .18; transform: scale(1.045); } }
@keyframes living-field { from { opacity: .7; transform: scale(.98) rotate(-.5deg); } to { opacity: .9; transform: scale(1.045) rotate(.65deg); } }
@keyframes living-bloom { from { opacity: .18; transform: scale(.98); } to { opacity: .4; transform: scale(1.065); } }
@keyframes electric-bed {
  from { filter: saturate(1.12) brightness(1.02); background-position: 0 0, 52% 48%, 66% 32%, 68% 40%; }
  to { filter: saturate(1.42) brightness(1.1); background-position: 0 0, 58% 52%, 66% 32%, 68% 40%; }
}
@keyframes electric-ring { from { opacity: .78; background-position: 82% 48%; } to { opacity: 1; background-position: 76% 51%; } }
@keyframes electric-bloom { from { opacity: .31; background-position: 78% 50%; } to { opacity: .55; background-position: 83% 47%; } }
@keyframes context-cinema {
  from { transform: scale(1.025) translate3d(0, 0, 0); filter: saturate(.94) contrast(1.02); }
  to { transform: scale(1.065) translate3d(-.8%, -.6%, 0); filter: saturate(1.08) contrast(1.06); }
}
@keyframes context-glow {
  from { opacity: .54; transform: scale(.88); }
  to { opacity: 1; transform: scale(1.12); }
}
@keyframes breathe { from { transform: scale(1); filter: saturate(.92) brightness(1); } to { transform: scale(1.018); filter: saturate(1.08) brightness(1.03); } }

@keyframes hero-entry-node {
  0%, 50%, 76%, 100% { border-color: rgba(31,154,224,.66); box-shadow: 0 0 0 4px rgba(91,215,255,.08), 0 0 13px rgba(39,173,239,.42); }
  58% { border-color: rgba(255,255,255,.96); box-shadow: 0 0 0 5px rgba(91,215,255,.18), 0 0 11px #fff, 0 0 24px rgba(43,185,247,.96); }
  66% { border-color: rgba(198,109,63,.88); box-shadow: 0 0 0 4px rgba(198,109,63,.1), 0 0 17px rgba(198,109,63,.58); }
}
@keyframes whole-life-signal {
  0%, 50%, 76%, 100% { color: var(--terracotta); text-shadow: none; }
  59% { color: #d9875d; text-shadow: 0 0 16px rgba(198,109,63,.14); }
  65% { color: #38b8ef; text-shadow: 0 0 8px rgba(255,255,255,.92), 0 0 22px rgba(91,215,255,.42); }
  71% { color: var(--terracotta); text-shadow: 0 0 15px rgba(198,109,63,.12); }
}
@keyframes whole-life-travel {
  0%, 54% { left: 0; opacity: 0; }
  58% { left: 0; opacity: 1; }
  68% { left: calc(100% - 9px); opacity: 1; }
  72%, 100% { left: calc(100% - 9px); opacity: 0; }
}

@media (max-width: 1050px) {
  :root { --shell: min(100% - 48px, 920px); }
  .hero-shell { align-items: center; padding: 108px 0 42px; }
  .hero-copy { width: 60%; }
  .hero h1 { margin-bottom: 24px; font-size: clamp(3.65rem, 7vw, 5.1rem); }
  .hero-lede { max-width: 540px; margin-bottom: 22px; font-size: 1rem; line-height: 1.56; }
  .hero-actions { gap: 16px; }
  .hero-actions .button { min-height: 54px; padding: 15px 22px; font-size: .9rem; }
  .hero-portrait { right: -15%; width: 79%; opacity: 1; }
  .hero-scene-8 .hero-portrait,
  .hero-scene-9 .hero-portrait,
  .hero-scene-10 .hero-portrait { top: 3%; right: -15%; width: 80%; }
  .hero-scene-9 .hero-neural-video { object-position: 66% center; }
  .hero-scene-9 .hero-neural-field::before { background: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.95) 28%, rgba(255,255,255,.8) 44%, rgba(255,255,255,.34) 62%, rgba(255,255,255,.04) 83%, transparent 100%); }
  .design-picker-hero { display: none; }
  .design-picker-responsive { display: flex; }
  .design-picker-hero > span { display: none; }
  .design-picker-hero button { min-height: 31px; padding: 6px 9px; font-size: .59rem; }

  .responsive-layout-2 .hero-neural-field { inset: 0; width: 100%; height: 100%; }
  .responsive-layout-2.hero-scene-9 .hero-neural-field::before {
    background: linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.9) 29%, rgba(255,255,255,.52) 50%, rgba(255,255,255,.08) 75%, transparent 100%), linear-gradient(180deg, rgba(255,255,255,.08), transparent 60%);
  }
  .responsive-layout-2 .hero-copy { width: 58%; }
  .responsive-layout-2.hero-scene-9 .hero-portrait { top: 1%; right: -8%; width: 85%; }

  .responsive-layout-3 { min-height: max(900px, 100svh); }
  .responsive-layout-3 .hero-shell { min-height: max(900px, 100svh); align-items: flex-start; padding: 112px 0 410px; }
  .responsive-layout-3 .hero-copy { width: 100%; max-width: 760px; margin-inline: auto; text-align: center; }
  .responsive-layout-3 .hero-copy > .eyebrow { width: fit-content; margin-right: auto; margin-left: auto; }
  .responsive-layout-3 .hero h1 { max-width: 760px; margin-right: auto; margin-left: auto; }
  .responsive-layout-3 .hero-lede { max-width: 650px; margin-right: auto; margin-left: auto; }
  .responsive-layout-3 .hero-actions { justify-content: center; }
  .responsive-layout-3 .hero-support { margin-right: auto; margin-left: auto; }
  .responsive-layout-3 .hero-neural-field { top: auto; bottom: 0; height: 52%; }
  .responsive-layout-3.hero-scene-9 .hero-neural-field::before { background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.86) 13%, rgba(255,255,255,.38) 35%, rgba(255,255,255,.04) 62%, transparent 100%); }
  .responsive-layout-3.hero-scene-9 .hero-portrait { top: auto; right: 50%; bottom: 0; width: 100%; height: 52%; transform: translateX(50%); }
  .responsive-layout-3 .hero-portrait img { object-fit: cover; object-position: 64% 7%; }
  .responsive-layout-3 .hero-portrait::before { background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.48) 18%, transparent 46%); }
  .fragment-copy { width: 68%; }
  .deep-work-shell { grid-template-columns: 1fr .82fr; gap: 35px; }
  .brain-copy { width: 54%; }
  .decision-path { grid-template-columns: 1fr 1fr; }
  .legacy-transfer { grid-template-columns: 1fr; }
  .legacy-memory::before, .legacy-memory::after { display: none; }
  .relief-shell { gap: 36px; }
  .data-path { grid-template-columns: 1fr; }
  .data-path > i { width: 1px; height: 30px; justify-self: center; }
  .data-path > i::after { top: auto; right: -3px; bottom: 0; transform: rotate(135deg); }
  .testimonial-cinema { grid-template-columns: 1fr 290px; }
}

@media (min-width: 721px) and (max-width: 900px) {
  :root { --shell: min(100% - 64px, 760px); }
  .site-nav { padding-top: 24px; }
  .hero { min-height: max(980px, 100svh); }
  .hero-shell { min-height: max(980px, 100svh); align-items: flex-start; padding: 128px 0 470px; }
  .hero-copy { width: 88%; max-width: 690px; }
  .hero h1 { max-width: 690px; margin-bottom: 26px; font-size: clamp(4rem, 9vw, 5rem); line-height: .9; }
  .hero-lede { max-width: 610px; font-size: 1.04rem; line-height: 1.58; }
  .hero-actions { gap: 20px; }
  .hero.hero-scene-8 .hero-neural-field,
  .hero.hero-scene-9 .hero-neural-field,
  .hero.hero-scene-10 .hero-neural-field { top: auto; bottom: 0; height: 50%; }
  .hero.hero-scene-8 .hero-neural-field::before,
  .hero.hero-scene-9 .hero-neural-field::before,
  .hero.hero-scene-10 .hero-neural-field::before { background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.91) 12%, rgba(255,255,255,.46) 32%, rgba(255,255,255,.08) 58%, transparent 100%); }
  .hero-scene-9 .hero-neural-video { object-position: 71% center; }
  .hero-scene-8 .hero-portrait,
  .hero-scene-9 .hero-portrait,
  .hero-scene-10 .hero-portrait { top: auto; right: -5%; bottom: 0; width: 110%; height: 51%; }
  .hero-scene-8 .hero-portrait img,
  .hero-scene-9 .hero-portrait img,
  .hero-scene-10 .hero-portrait img { object-fit: cover; object-position: 64% 8%; }
  .hero-portrait::before { background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.55) 17%, transparent 45%); }
  .design-picker-hero { top: auto; right: 24px; bottom: 20px; left: 24px; justify-content: center; }

  .responsive-layout-2.hero-scene-9 .hero-neural-field { inset: 0; width: 100%; height: 100%; }
  .responsive-layout-2.hero-scene-9 .hero-neural-field::before { background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.93) 36%, rgba(255,255,255,.6) 53%, rgba(255,255,255,.13) 73%, transparent 100%); }
  .responsive-layout-2 .hero-copy { width: 90%; }
  .responsive-layout-2.hero-scene-9 .hero-portrait { top: auto; right: -8%; bottom: 0; width: 118%; height: 57%; }
  .responsive-layout-2.hero-scene-9 .hero-portrait img { object-fit: cover; object-position: 63% 7%; }

  .responsive-layout-3 .hero-shell { padding-top: 126px; padding-bottom: 490px; }
  .responsive-layout-3 .hero-copy { width: 100%; }
  .responsive-layout-3 .hero h1 { font-size: clamp(3.9rem, 8.7vw, 4.8rem); }
  .responsive-layout-3 .hero-neural-field { height: 51%; }
  .responsive-layout-3.hero-scene-9 .hero-portrait { width: 112%; height: 51%; }
}

@media (max-width: 720px) {
  :root { --shell: calc(100vw - 32px); }
  body { font-size: 16px; }
  .site-nav { padding-top: 18px; }
  .brand img { width: 145px; }
  .button-small { min-height: 44px; padding: 12px 16px; font-size: .75rem; }
  .hero { min-height: max(900px, 100svh); }
  .hero-shell { min-height: max(900px, 100svh); align-items: flex-start; padding: 98px 0 350px; }
  .hero-copy { width: 100%; }
  .hero-copy > .eyebrow { margin-bottom: 15px; font-size: .67rem; }
  .hero-scene-9 .hero-copy > .eyebrow { padding-left: 34px; }
  .hero h1 { margin-bottom: 22px; font-size: clamp(3.05rem, 14vw, 3.45rem); line-height: .88; }
  .hero-lede { max-width: 100%; margin-bottom: 20px; font-size: .93rem; line-height: 1.5; }
  .hero-actions { align-items: center; flex-direction: row; gap: 11px; }
  .hero-actions .button { min-height: 50px; padding: 14px 18px; font-size: .82rem; white-space: nowrap; }
  .hero-actions .text-link { font-size: .75rem; white-space: nowrap; }
  .hero-support { display: none; }
  .hero-neural-field { --neural-core-from: .68; --neural-core-to: .88; --neural-bloom-from: .18; --neural-bloom-to: .36; top: auto; right: -10%; bottom: 0; width: 92%; height: 45%; }
  .hero.hero-scene-2 .hero-neural-field,
  .hero.hero-scene-3 .hero-neural-field,
  .hero.hero-scene-4 .hero-neural-field,
  .hero.hero-scene-5 .hero-neural-field,
  .hero.hero-scene-6 .hero-neural-field,
  .hero.hero-scene-7 .hero-neural-field { top: auto; right: -10%; bottom: 0; width: 98%; height: 47%; }
  .hero.hero-scene-7 .hero-neural-field {
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.78) 45%, rgba(255,255,255,.44) 64%, rgba(255,255,255,.04) 100%), url("../assets/neural-ribbons-v1.png"), radial-gradient(circle at 72% 68%, rgba(255,176,96,.24), transparent 8%), radial-gradient(circle at 69% 72%, rgba(34,173,255,.24), transparent 50%);
    background-size: 100% 100%, cover, auto, auto;
  }
  .hero.hero-scene-8 .hero-neural-field,
  .hero.hero-scene-9 .hero-neural-field,
  .hero.hero-scene-10 .hero-neural-field {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 47%;
    background: #fff;
  }
  .hero.hero-scene-8 .hero-neural-field::before,
  .hero.hero-scene-9 .hero-neural-field::before,
  .hero.hero-scene-10 .hero-neural-field::before {
    display: block;
    background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.92) 13%, rgba(255,255,255,.5) 31%, rgba(255,255,255,.1) 55%, transparent 100%);
  }
  .hero-scene-8 .hero-neural-video,
  .hero-scene-9 .hero-neural-video,
  .hero-scene-10 .hero-neural-video { object-position: 74% center; }
  .hero-neural-field::before,
  .hero-neural-field::after { background-position: 82% center; }
  .hero-portrait { top: auto; right: -13%; bottom: 0; width: 106%; height: 47%; opacity: 1; }
  .hero-scene-8 .hero-portrait,
  .hero-scene-9 .hero-portrait,
  .hero-scene-10 .hero-portrait { top: auto; right: -7%; bottom: 0; width: 114%; height: 48%; }
  .hero-scene-8 .hero-portrait img,
  .hero-scene-9 .hero-portrait img,
  .hero-scene-10 .hero-portrait img { object-fit: cover; object-position: 64% 8%; }
  .hero-portrait::before { background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.58) 17%, transparent 47%); }
  .hero-scene-5 .alignment-core,
  .hero-scene-6 .alignment-core,
  .hero-scene-7 .alignment-core { top: 5%; left: 22%; width: 72vw; }
  .signal-node-1 { top: 8%; left: 26%; }
  .signal-node-2 { top: 15%; right: 8%; }
  .signal-node-3 { top: 50%; right: 1%; }
  .signal-node-4 { right: 10%; bottom: 8%; }
  .signal-node-5 { bottom: 4%; left: 24%; }
  .signal-node-6 { top: 53%; left: 3%; }
  .design-picker { gap: 2px; max-width: calc(100% - 24px); overflow-x: auto; border-radius: 18px; scrollbar-width: none; }
  .design-picker::-webkit-scrollbar { display: none; }
  .design-picker > span { display: none; }
  .design-picker button { flex: 0 0 auto; min-height: 31px; padding: 6px 8px; font-size: .56rem; }
  .design-picker-hero { top: auto; right: 12px; bottom: 12px; left: 12px; justify-content: center; max-width: none; }
  .design-picker-responsive { right: 12px; bottom: 12px; left: 12px; justify-content: center; max-width: none; transform: none; }
  .design-picker-responsive button { padding-inline: 9px; }
  .responsive-layout-3 .design-picker-responsive { display: none; }
  .responsive-layout-3 .design-picker-mobile { right: 10px; bottom: 10px; left: 10px; display: flex; justify-content: center; max-width: none; }
  .design-picker-mobile button { padding-inline: 8px; }
  .design-picker-context { right: 12px; bottom: 12px; left: 12px; }

  .responsive-layout-2.hero-scene-9 .hero-neural-field { inset: 0; width: 100%; height: 100%; }
  .responsive-layout-2.hero-scene-9 .hero-neural-field::before { background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.94) 39%, rgba(255,255,255,.65) 55%, rgba(255,255,255,.17) 73%, transparent 100%); }
  .responsive-layout-2 .hero-copy { width: 100%; }
  .responsive-layout-2.hero-scene-9 .hero-portrait { top: auto; right: -10%; bottom: 0; width: 120%; height: 43%; }
  .responsive-layout-2.hero-scene-9 .hero-portrait img { object-fit: cover; object-position: 63% 6%; }

  .responsive-layout-3 { min-height: max(920px, 100svh); }
  .responsive-layout-3 .hero-shell { min-height: max(920px, 100svh); padding: 100px 0 385px; }
  .responsive-layout-3 .hero-copy { width: 100%; text-align: center; }
  .responsive-layout-3 .hero-copy > .eyebrow { width: fit-content; margin-right: auto; margin-left: auto; }
  .responsive-layout-3 .hero h1 { max-width: 390px; margin-right: auto; margin-left: auto; font-size: clamp(2.95rem, 13.2vw, 3.35rem); }
  .responsive-layout-3 .hero-lede { max-width: 98%; margin-right: auto; margin-left: auto; }
  .responsive-layout-3 .hero-actions { justify-content: center; }
  .responsive-layout-3.hero-scene-9 .hero-neural-field { top: auto; bottom: 0; height: 47%; }
  .responsive-layout-3.hero-scene-9 .hero-portrait { top: auto; right: 50%; bottom: 0; width: 116%; height: 48%; transform: translateX(50%); }
  .responsive-layout-3.hero-scene-9 .hero-portrait img { object-fit: cover; object-position: 64% 7%; }

  .responsive-layout-3.mobile-style-1 { min-height: max(960px, 100svh); }
  .responsive-layout-3.mobile-style-1 .hero-shell { min-height: max(960px, 100svh); padding-bottom: 395px; }
  .responsive-layout-3.mobile-style-1 .hero-lede { max-width: 360px; font-size: 1rem; line-height: 1.58; }
  .responsive-layout-3.mobile-style-1 .hero-actions .button { font-size: .84rem; }
  .responsive-layout-3.mobile-style-1 .hero-actions .text-link { font-size: .79rem; }

  .responsive-layout-3.mobile-style-2 { min-height: max(1020px, 100svh); }
  .responsive-layout-3.mobile-style-2 .hero-shell { min-height: max(1020px, 100svh); padding: 96px 0 400px; }
  .responsive-layout-3.mobile-style-2.hero-scene-9 .hero-neural-field { inset: 0; width: 100%; height: 100%; }
  .responsive-layout-3.mobile-style-2.hero-scene-9 .hero-neural-field::before { background: linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.7) 50%, rgba(255,255,255,.08) 78%, transparent 100%); }
  .responsive-layout-3.mobile-style-2 .hero-copy { padding: 22px 18px 24px; border: 1px solid rgba(20,121,211,.13); border-radius: 28px; background: rgba(255,255,255,.89); box-shadow: 0 18px 54px rgba(19,70,106,.12); backdrop-filter: blur(16px); }
  .responsive-layout-3.mobile-style-2 .hero h1 { font-size: clamp(2.72rem, 12.4vw, 3.08rem); }
  .responsive-layout-3.mobile-style-2 .hero-lede { max-width: 340px; font-size: 1rem; line-height: 1.58; }
  .responsive-layout-3.mobile-style-2 .hero-actions { align-items: center; flex-direction: column; gap: 14px; }
  .responsive-layout-3.mobile-style-2 .hero-actions .text-link { font-size: .84rem; }
  .responsive-layout-3.mobile-style-2.hero-scene-9 .hero-portrait { height: 45%; }

  .responsive-layout-3.mobile-style-3 { min-height: max(1030px, 100svh); }
  .responsive-layout-3.mobile-style-3 .hero-shell { min-height: max(1030px, 100svh); padding: 100px 0 390px; }
  .responsive-layout-3.mobile-style-3 .hero h1 { margin-bottom: 28px; }
  .responsive-layout-3.mobile-style-3 .hero-reading-block { padding: 20px 18px 22px; border: 1px solid rgba(17,17,17,.08); border-top: 3px solid var(--blue-deep); border-radius: 22px; text-align: left; background: rgba(255,255,255,.97); box-shadow: 0 16px 44px rgba(17,17,17,.1); }
  .responsive-layout-3.mobile-style-3 .hero-lede { max-width: none; margin-bottom: 18px; font-size: 1rem; line-height: 1.58; }
  .responsive-layout-3.mobile-style-3 .hero-actions { justify-content: flex-start; }
  .responsive-layout-3.mobile-style-3 .hero-actions .button { padding-inline: 17px; }
  .responsive-layout-3.mobile-style-3 .hero-actions .text-link { font-size: .77rem; }
  .responsive-layout-3.mobile-style-3.hero-scene-9 .hero-neural-field { height: 50%; }
  .responsive-layout-3.mobile-style-3.hero-scene-9 .hero-portrait { height: 46%; }

  .responsive-layout-3.mobile-style-4 { min-height: max(990px, 100svh); color: #fff; background: #07101a; }
  .responsive-layout-3.mobile-style-4 .hero-shell { min-height: max(990px, 100svh); padding: 100px 0 385px; }
  .responsive-layout-3.mobile-style-4.hero-scene-9 .hero-neural-field { inset: 0; width: 100%; height: 100%; background: #07101a; }
  .responsive-layout-3.mobile-style-4.hero-scene-9 .hero-neural-field::before { background: linear-gradient(180deg, rgba(5,13,23,.88) 0%, rgba(5,13,23,.81) 51%, rgba(5,13,23,.36) 73%, rgba(5,13,23,.12) 100%); }
  .responsive-layout-3.mobile-style-4 .hero-copy > .eyebrow { color: #8adfff; }
  .responsive-layout-3.mobile-style-4 .hero-copy > .eyebrow span { color: rgba(255,255,255,.55); }
  .responsive-layout-3.mobile-style-4 .hero h1 { color: #fff; }
  .responsive-layout-3.mobile-style-4 .hero-lede { max-width: 360px; color: rgba(255,255,255,.86); font-size: 1rem; line-height: 1.58; }
  .responsive-layout-3.mobile-style-4 .hero-actions .button { color: #07101a; background: #fff; }
  .responsive-layout-3.mobile-style-4 .hero-actions .text-link { color: #fff; font-size: .79rem; }
  .responsive-layout-3.mobile-style-4.hero-scene-9 .hero-portrait { height: 47%; }
  body:has(.responsive-layout-3.mobile-style-4) .brand img { filter: invert(1); }
  .trust-mark small { max-width: 250px; }
  .fragment-photo { background-position: 63% center; }
  .fragment-shade { background: linear-gradient(90deg, rgba(5,5,5,.94), rgba(5,5,5,.62)), linear-gradient(0deg, rgba(5,5,5,.55), transparent); }
  .fragment-shell { min-height: auto; padding: 100px 0 90px; }
  .fragment-copy { width: 100%; }
  .fragment h2 { font-size: clamp(3rem, 13vw, 4.8rem); }
  .fragment-lede { font-size: 1.05rem; }
  .fragment-lines { grid-template-columns: 1fr; }
  .deep-work-shell { display: block; min-height: auto; padding: 90px 0; }
  .deep-work-shade { background: linear-gradient(rgba(246,246,242,.94), rgba(246,246,242,.74)); }
  .governing-brief { margin-top: 45px; padding: 23px; }
  .life-questions li { grid-template-columns: 48px 1fr; padding: 19px 0; }
  .brain { min-height: auto; }
  .brain-art { position: relative; height: 54vw; min-height: 300px; margin-top: 48px; }
  .brain-art::after { background: linear-gradient(0deg, #fff 0%, transparent 35%, rgba(255,255,255,.22) 75%, #fff 100%); }
  .brain-art img { object-position: center; }
  .brain-shell { min-height: auto; padding: 50px 0 92px; }
  .brain-copy { width: 100%; }
  .brain-copy h2 { font-size: clamp(3.1rem, 13vw, 4.8rem); }
  .brain-inputs { position: static; width: 100%; justify-content: flex-start; margin-top: 28px; }
  .trust-mark-brain { position: static; margin-top: 32px; }
  .decision-shell { min-height: auto; padding: 90px 0; }
  .decision-heading h2 { font-size: clamp(3rem, 12vw, 4.7rem); }
  .decision-path { grid-template-columns: 1fr; }
  .decision-path > div { min-height: auto; }
  .legacy { min-height: auto; }
  .legacy-shell { min-height: auto; padding: 90px 0; }
  .legacy-heading h2 { font-size: clamp(3rem, 12vw, 4.7rem); }
  .legacy-transfer { margin-top: 36px; }
  .legacy-transfer > * { min-height: 0; }
  .relief-shell { display: block; min-height: auto; padding: 90px 0; }
  .relief-copy h2 { font-size: clamp(3rem, 12vw, 4.7rem); }
  .open-loops { margin-top: 42px; }
  .ownership { min-height: auto; }
  .ownership-shell { padding: 90px 0; }
  .ownership-heading h2 { font-size: clamp(3rem, 12vw, 4.7rem); }
  .data-path { margin: 42px 0; }
  .data-place { min-height: 0; }
  .trust-promises { grid-template-columns: 1fr 1fr; }
  .data-detail > div { grid-template-columns: 1fr; gap: 18px; }
  .proof-top { padding: 90px 0 60px; }
  .proof-copy h2 { font-size: clamp(3rem, 12vw, 4.7rem); }
  .answer-gate { grid-template-columns: 1fr; }
  .answer-gate i { width: 1px; height: 28px; justify-self: center; }
  .testimonial-cinema { grid-template-columns: 1fr; width: calc(100vw - 24px); min-height: 0; margin-bottom: 70px; border-radius: 22px; }
  .cinema-player, .cinema-player video { min-height: 580px; }
  .cinema-caption h3 { font-size: 2.8rem; }
  .cinema-caption blockquote { font-size: 1.2rem; }
  .cinema-list { display: grid; grid-template-columns: 1fr 1fr; }
  .cinema-list > p { grid-column: 1 / -1; }
  .cinema-list button { grid-template-columns: 42px 1fr; padding: 9px; }
  .cinema-list img { width: 42px; height: 42px; }
  .guide-shell, .final-shell { min-height: 100svh; padding: 90px 0; }
  .guide-photo { background-position: 64% center; }
  .guide-copy h2, .final-copy h2 { font-size: clamp(3.2rem, 13vw, 5rem); }
  .final-actions { align-items: stretch; flex-direction: column; }
  .final-actions .button { width: 100%; }
}

/* Clarity review: a reversible narrative pass enabled with ?story=clarity. */
.clarity-only { display: none; }
.story-clarity .design-picker { display: none; }
.story-clarity main > .chapter:not(.hero) { box-shadow: inset 0 1px rgba(63,177,235,.3); }
.story-clarity #relief,
.story-clarity .answer-gate,
.story-clarity .trust-promises article:nth-child(n+5) { display: none; }
.story-clarity .trust-promises { grid-template-columns: repeat(4, 1fr); }
.story-clarity .proof-top { padding-bottom: 52px; }
.story-clarity .proof-copy { max-width: 820px; }
.story-clarity .clarity-lede { max-width: 720px; color: rgba(255,255,255,.76); }
.story-clarity .fragment h2,
.story-clarity .deep-work-copy h2,
.story-clarity .brain-copy h2,
.story-clarity .decision-heading h2,
.story-clarity .legacy-heading h2,
.story-clarity .ownership-heading h2,
.story-clarity .proof-copy h2,
.story-clarity .guide-copy h2 { font-size: clamp(3.2rem, 5.15vw, 5.65rem); line-height: .94; }
.story-clarity .legacy-heading { max-width: 1050px; }
.story-clarity .ownership { min-height: auto; }
.story-clarity .ownership-shell { padding-top: 105px; }
.story-clarity .guide-copy { max-width: 860px; }
.story-clarity .guide-copy h2 { max-width: 820px; }

/* Clarity review infographics: fragmented context, connected intelligence, and client control. */
.story-clarity .offer-boundary,
.story-clarity .current-capability,
.story-clarity .access-boundary,
.story-clarity .final-boundary { display: block; }

.story-clarity .offer-boundary {
  max-width: 620px;
  margin: 17px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(17,17,17,.12);
  color: #6a6a6a;
  font-size: .77rem;
  line-height: 1.48;
}
.story-clarity .offer-boundary strong { color: #292929; }

.story-clarity #why-now {
  min-height: auto;
  background:
    radial-gradient(circle at 77% 43%, rgba(45,177,245,.18), transparent 25%),
    radial-gradient(circle at 86% 24%, rgba(198,109,63,.1), transparent 18%),
    linear-gradient(135deg, #050b12 0%, #07131e 52%, #08101a 100%);
}
.story-clarity #why-now::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  opacity: .32;
  background-image: linear-gradient(rgba(91,215,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(91,215,255,.08) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(circle at 77% 45%, #000, transparent 58%);
  mask-image: radial-gradient(circle at 77% 45%, #000, transparent 58%);
}
.story-clarity #why-now .fragment-photo,
.story-clarity #why-now .fragment-shade,
.story-clarity #why-now .context-glow,
.story-clarity #why-now .fragment-lines { display: none; }
.story-clarity #why-now .fragment-shell {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 860px;
  grid-template-columns: minmax(0, .92fr) minmax(520px, .88fr);
  align-items: center;
  gap: clamp(55px, 7vw, 120px);
  padding: 120px 0;
}
.story-clarity #why-now .fragment-copy { width: auto; max-width: 720px; }
.story-clarity #why-now .fragment-rule {
  max-width: 650px;
  padding: 24px 0 0 26px;
  border-top: 1px solid rgba(255,255,255,.15);
  border-left: 2px solid var(--blue);
  color: rgba(255,255,255,.82);
}

.story-clarity .context-system {
  position: relative;
  display: block;
  min-height: 620px;
  border: 1px solid rgba(105,213,255,.18);
  border-radius: 38px;
  background: radial-gradient(circle at 50% 45%, rgba(50,176,241,.18), transparent 32%), rgba(3,12,21,.58);
  box-shadow: inset 0 0 80px rgba(51,167,229,.06), 0 34px 90px rgba(0,0,0,.28);
}
.context-system::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 290px;
  height: 290px;
  border: 1px solid rgba(87,207,255,.18);
  border-radius: 50%;
  content: "";
  box-shadow: 0 0 55px rgba(43,174,241,.13), inset 0 0 45px rgba(43,174,241,.07);
  transform: translate(-50%, -52%);
}
.context-source,
.context-owner,
.context-gap { position: absolute; z-index: 2; }
.context-source {
  display: flex;
  width: 170px;
  min-height: 82px;
  flex-direction: column;
  justify-content: center;
  padding: 14px 17px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  color: #fff;
  background: rgba(255,255,255,.055);
  box-shadow: 0 16px 36px rgba(0,0,0,.18);
  backdrop-filter: blur(12px);
}
.context-source small,
.context-owner small { color: #7fdaff; font-size: .64rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.context-source strong { margin-top: 4px; font-family: var(--display); font-size: 1rem; }
.context-source::before {
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  content: "";
  background: #a8eaff;
  box-shadow: 0 0 8px #fff, 0 0 22px rgba(73,195,255,.9);
  transform: translateY(-50%);
}
.context-source-crm { top: 7%; left: 5%; }
.context-source-inbox { top: 7%; right: 5%; }
.context-source-books { top: 37%; left: 5%; }
.context-source-files { top: 37%; right: 5%; }
.context-source-crm::before,
.context-source-books::before { right: -4px; }
.context-source-inbox::before,
.context-source-files::before { left: -4px; }
.context-owner {
  top: 30%;
  left: 50%;
  display: flex;
  width: 210px;
  height: 210px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 28px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 50%;
  color: #fff;
  text-align: center;
  background: radial-gradient(circle at 48% 36%, rgba(80,204,255,.27), rgba(8,30,48,.96) 64%);
  box-shadow: 0 0 0 14px rgba(79,200,255,.035), 0 0 58px rgba(45,174,239,.24), inset 0 0 42px rgba(53,185,250,.18);
  transform: translateX(-50%);
}
.context-owner strong { margin-top: 9px; font: 700 1.45rem/1.05 var(--display); }
.context-gap {
  right: 8%;
  bottom: 7%;
  left: 8%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid rgba(242,161,118,.28);
  border-radius: 16px;
  color: rgba(255,255,255,.86);
  background: rgba(198,109,63,.1);
  font-size: .87rem;
}
.context-gap span { width: 10px; height: 10px; flex: 0 0 auto; border: 2px solid #f2a176; border-radius: 50%; box-shadow: 0 0 18px rgba(242,161,118,.62); }
.context-wire {
  position: absolute;
  z-index: 1;
  height: 1px;
  overflow: visible;
  background: linear-gradient(90deg, rgba(91,215,255,.18), rgba(91,215,255,.75), rgba(91,215,255,.18));
  transform-origin: left center;
}
.context-wire::after {
  position: absolute;
  top: -3px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  content: "";
  background: #fff;
  box-shadow: 0 0 8px #fff, 0 0 20px #5bd7ff;
  animation: diagram-signal 4.8s ease-in-out infinite;
}
.context-wire-1 { top: 22%; left: 33%; width: 18%; transform: rotate(31deg); }
.context-wire-2 { top: 22%; left: 68%; width: 18%; transform: rotate(149deg); }
.context-wire-3 { top: 50%; left: 32%; width: 19%; transform: rotate(-11deg); }
.context-wire-4 { top: 50%; left: 68%; width: 19%; transform: rotate(191deg); }
.context-wire-2::after { animation-delay: -1.1s; }
.context-wire-3::after { animation-delay: -2.2s; }
.context-wire-4::after { animation-delay: -3.3s; }

.story-clarity #brain {
  min-height: auto;
  background:
    radial-gradient(circle at 76% 46%, rgba(75,198,255,.19), transparent 31%),
    linear-gradient(180deg, #fff 0%, #f4fbff 58%, #fff 100%);
}
.story-clarity #brain .brain-art,
.story-clarity #brain .brain-inputs,
.story-clarity #brain .trust-mark-brain { display: none; }
.story-clarity #brain .brain-shell {
  display: grid;
  min-height: 930px;
  grid-template-columns: minmax(0, .82fr) minmax(650px, 1.08fr);
  align-items: center;
  gap: clamp(55px, 6vw, 105px);
  padding: 115px 0;
}
.story-clarity #brain .brain-copy { width: auto; max-width: 680px; }
.story-clarity #brain .brain-definition {
  padding: 19px 21px;
  border: 1px solid rgba(20,121,211,.15);
  border-radius: 18px;
  background: rgba(255,255,255,.7);
  box-shadow: 0 16px 40px rgba(20,121,211,.07);
}
.story-clarity .current-capability {
  margin: 16px 0 0;
  padding-left: 21px;
  border-left: 2px solid var(--blue-deep);
  color: #626b72;
  font-size: .88rem;
  line-height: 1.55;
}
.story-clarity .current-capability strong { display: block; margin-bottom: 3px; color: #14202a; font-family: var(--display); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }

.story-clarity .brain-system {
  position: relative;
  display: grid;
  min-height: 650px;
  grid-template-columns: 170px 230px minmax(175px, 1fr);
  grid-template-rows: repeat(5, 1fr);
  align-items: center;
  gap: 13px 34px;
  padding: 35px;
  border: 1px solid rgba(20,121,211,.13);
  border-radius: 42px;
  background:
    radial-gradient(circle at 53% 49%, rgba(91,215,255,.2), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,.9), rgba(235,249,255,.82));
  box-shadow: 0 30px 90px rgba(28,120,181,.12), inset 0 0 70px rgba(91,215,255,.06);
}
.brain-system::before {
  position: absolute;
  inset: 20px;
  border: 1px solid rgba(20,121,211,.06);
  border-radius: 32px;
  content: "";
  pointer-events: none;
}
.brain-source {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 72px;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(17,17,17,.09);
  border-radius: 15px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 12px 28px rgba(25,100,150,.07);
}
.brain-source small { color: var(--terracotta-deep); font: 700 .63rem var(--display); letter-spacing: .08em; }
.brain-source strong { font: 600 .94rem var(--display); }
.brain-source-email { grid-area: 1 / 1; }
.brain-source-calls { grid-area: 2 / 1; }
.brain-source-customers { grid-area: 3 / 1; }
.brain-source-billing { grid-area: 4 / 1; }
.brain-source-decisions { grid-area: 5 / 1; }
.brain-source::after {
  position: absolute;
  top: 50%;
  left: calc(100% + 1px);
  width: 110px;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, rgba(20,121,211,.18), rgba(63,177,235,.72), rgba(63,177,235,.16));
  transform-origin: left center;
}
.brain-source-email::after { transform: rotate(28deg); }
.brain-source-calls::after { transform: rotate(15deg); }
.brain-source-billing::after { transform: rotate(-15deg); }
.brain-source-decisions::after { transform: rotate(-28deg); }
.brain-core {
  position: relative;
  z-index: 3;
  display: flex;
  width: 225px;
  height: 225px;
  grid-area: 1 / 2 / 6 / 3;
  align-self: center;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 50%;
  color: #fff;
  text-align: center;
  background: radial-gradient(circle at 42% 33%, #67dfff 0%, #178fd8 34%, #075b9e 69%, #06385f 100%);
  box-shadow: 0 0 0 14px rgba(91,215,255,.08), 0 0 72px rgba(38,162,231,.3), inset 0 0 44px rgba(255,255,255,.18);
}
.brain-core::after {
  position: absolute;
  top: 50%;
  left: calc(100% + 14px);
  width: 72px;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, rgba(63,177,235,.78), rgba(198,109,63,.55));
}
.brain-core small { color: rgba(255,255,255,.78); font: 700 .65rem var(--display); letter-spacing: .13em; text-transform: uppercase; }
.brain-core strong { margin-top: 8px; font: 700 1.68rem/.98 var(--display); letter-spacing: -.035em; }
.brain-core-signal {
  position: absolute;
  top: 14%;
  right: 18%;
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #f29a65;
  box-shadow: 0 0 10px #fff, 0 0 24px rgba(242,154,101,.9), 0 0 42px rgba(91,215,255,.85);
  animation: core-signal 3.6s ease-in-out infinite;
}
.brain-answer {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 188px;
  grid-area: 2 / 3 / 5 / 4;
  justify-content: center;
  flex-direction: column;
  padding: 24px;
  border: 1px solid rgba(198,109,63,.22);
  border-radius: 22px;
  background: rgba(255,255,255,.93);
  box-shadow: 0 18px 45px rgba(84,102,112,.11);
}
.brain-answer small { color: var(--terracotta-deep); font: 700 .63rem var(--display); letter-spacing: .12em; text-transform: uppercase; }
.brain-answer strong { margin: 8px 0 9px; font: 700 1.38rem var(--display); }
.brain-answer span { color: #69747b; font-size: .76rem; line-height: 1.4; }
.brain-system-wire { display: none; }

.story-clarity .legacy-rail { display: none; }

.story-clarity .data-path,
.story-clarity .trust-promises { display: none; }
.story-clarity .control-infographic {
  display: grid;
  grid-template-areas: "one seal two" "three seal four";
  grid-template-columns: minmax(0, 1fr) 260px minmax(0, 1fr);
  align-items: stretch;
  gap: 22px;
  margin: 55px 0 28px;
}
.control-promise {
  position: relative;
  display: flex;
  min-height: 170px;
  justify-content: center;
  flex-direction: column;
  padding: 26px 29px;
  border: 1px solid rgba(17,17,17,.1);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(17,17,17,.055);
}
.control-promise b { margin-bottom: 20px; color: var(--terracotta); font: 700 .68rem var(--display); letter-spacing: .12em; }
.control-promise strong { font: 700 1.2rem var(--display); }
.control-promise span { margin-top: 7px; color: #6a6a6a; font-size: .82rem; line-height: 1.5; }
.control-promise-1 { grid-area: one; }
.control-promise-2 { grid-area: two; }
.control-promise-3 { grid-area: three; }
.control-promise-4 { grid-area: four; }
.control-seal {
  position: relative;
  display: flex;
  width: 250px;
  height: 250px;
  grid-area: seal;
  align-self: center;
  justify-self: center;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 1px solid rgba(20,121,211,.24);
  border-radius: 50%;
  text-align: center;
  background: radial-gradient(circle, #fff 43%, #eefaff 70%, #dff5ff 100%);
  box-shadow: 0 0 0 12px rgba(91,215,255,.08), 0 0 60px rgba(36,162,228,.18), inset 0 0 36px rgba(36,162,228,.08);
}
.control-seal::before,
.control-seal::after {
  position: absolute;
  border: 1px dashed rgba(20,121,211,.28);
  border-radius: 50%;
  content: "";
}
.control-seal::before { inset: 15px; }
.control-seal::after { inset: 27px; border-style: solid; border-color: rgba(198,109,63,.18); }
.control-seal > span {
  width: 12px;
  height: 12px;
  margin-bottom: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--blue-deep);
  box-shadow: 0 0 0 5px rgba(91,215,255,.17), 0 0 20px rgba(20,121,211,.48);
}
.control-seal small { color: var(--terracotta-deep); font: 700 .62rem var(--display); letter-spacing: .11em; text-transform: uppercase; }
.control-seal strong { margin: 8px 0; font: 800 1.18rem/.94 var(--display); letter-spacing: -.02em; }
.control-seal em { color: #57707e; font-size: .72rem; font-style: normal; }
.story-clarity .access-boundary {
  max-width: 820px;
  margin: 0 auto 30px;
  padding: 17px 21px;
  border: 1px solid rgba(20,121,211,.13);
  border-radius: 14px;
  color: #64717a;
  text-align: center;
  background: rgba(234,248,255,.55);
  font-size: .8rem;
}
.story-clarity .access-boundary strong { color: #16242d; }

.story-clarity .proof-pull {
  display: block;
  max-width: 720px;
  margin: 30px 0 0;
  padding: 20px 24px;
  border-left: 3px solid var(--terracotta);
  color: #202020;
  background: #f7f4ef;
  font: 500 clamp(1.15rem, 1.7vw, 1.5rem)/1.35 var(--accent);
}
.proof-pull cite { display: block; margin-top: 9px; color: #78716c; font: 600 .68rem var(--display); letter-spacing: .1em; text-transform: uppercase; }

.story-clarity .fit { display: block; min-height: auto; background: #f5f8fa; }
.fit-shell { display: grid; grid-template-columns: minmax(0, .8fr) minmax(620px, 1fr); align-items: center; gap: clamp(55px, 7vw, 110px); padding: 105px 0; }
.fit-heading h2 { max-width: 700px; font-size: clamp(3.1rem, 5vw, 5.5rem); line-height: .94; }
.fit-heading .section-lede { max-width: 600px; color: #62686d; }
.fit-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.fit-columns article { padding: 30px 28px; border: 1px solid rgba(20,121,211,.13); border-radius: 24px; background: #fff; box-shadow: 0 18px 45px rgba(22,72,104,.06); }
.fit-columns article > span { display: block; margin-bottom: 22px; color: var(--blue-deep); font: 700 .7rem var(--display); letter-spacing: .13em; text-transform: uppercase; }
.fit-columns ul { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.fit-columns li { position: relative; padding-left: 24px; color: #3e464b; font-size: .9rem; line-height: 1.5; }
.fit-columns li::before { position: absolute; top: .62em; left: 0; width: 8px; height: 8px; border-radius: 50%; content: ""; background: var(--blue); box-shadow: 0 0 12px rgba(20,121,211,.28); }
.fit-columns .fit-not-yet { border-color: rgba(198,109,63,.13); }
.fit-columns .fit-not-yet > span { color: var(--terracotta-deep); }
.fit-columns .fit-not-yet li::before { border: 1px solid var(--terracotta); background: transparent; box-shadow: none; }

.story-clarity .guide-credentials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 36px;
  border-top: 1px solid rgba(255,255,255,.2);
  border-bottom: 1px solid rgba(255,255,255,.2);
}
.guide-credentials span { padding: 20px 22px; border-right: 1px solid rgba(255,255,255,.16); }
.guide-credentials span:first-child { padding-left: 0; }
.guide-credentials span:last-child { border-right: 0; }
.guide-credentials strong,
.guide-credentials small { display: block; }
.guide-credentials strong { color: #fff; font: 700 1rem var(--display); }
.guide-credentials small { margin-top: 4px; color: rgba(255,255,255,.62); font-size: .68rem; }

.story-clarity .final-boundary {
  max-width: 660px;
  margin: 18px 0 0;
  color: rgba(255,255,255,.64);
  font-size: .76rem;
  line-height: 1.5;
}
.story-clarity .final-boundary strong { color: rgba(255,255,255,.92); }

@keyframes diagram-signal {
  0%, 12% { left: 0; opacity: 0; }
  25% { opacity: 1; }
  76% { opacity: .9; }
  88%, 100% { left: calc(100% - 7px); opacity: 0; }
}
@keyframes core-signal {
  0%, 64%, 100% { opacity: .46; transform: scale(.76); }
  72% { opacity: 1; transform: scale(1.35); }
  80% { opacity: .72; transform: scale(.92); }
}

.story-map {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr 72px 1fr 72px 1fr;
  align-items: center;
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 24px 0;
  color: #3c3c3c;
  background: #fff;
}
.story-map::before,
.story-map::after { position: absolute; right: 0; left: 0; height: 1px; content: ""; background: var(--line); }
.story-map::before { top: 0; }
.story-map::after { bottom: 0; }
.story-map div { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
.story-map span { color: var(--orange); font-size: .68rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.story-map span b { margin-right: 8px; color: var(--blue-deep); }
.story-map strong { font-family: var(--display); font-size: 1rem; }
.story-map i { position: relative; height: 1px; background: linear-gradient(90deg, rgba(20,121,211,.14), rgba(59,197,255,.8)); }
.story-map i::after { position: absolute; top: 50%; right: -1px; width: 6px; height: 6px; border-radius: 50%; content: ""; background: var(--blue); box-shadow: 0 0 12px rgba(63,177,235,.8); transform: translateY(-50%); }

@media (max-width: 720px) {
  .story-map { grid-template-columns: repeat(3, 1fr); width: calc(100% - 28px); gap: 10px; padding: 18px 0; }
  .story-map i { display: none; }
  .story-map span { font-size: .56rem; letter-spacing: .06em; }
  .story-map span b { display: block; margin: 0 0 3px; }
  .story-map strong { font-size: .76rem; line-height: 1.2; }
  .story-clarity .fragment h2,
  .story-clarity .deep-work-copy h2,
  .story-clarity .brain-copy h2,
  .story-clarity .decision-heading h2,
  .story-clarity .legacy-heading h2,
  .story-clarity .ownership-heading h2,
  .story-clarity .proof-copy h2,
  .story-clarity .guide-copy h2 { font-size: clamp(2.75rem, 11.5vw, 3.75rem); line-height: .96; }
  .story-clarity .trust-promises { grid-template-columns: 1fr; }
  .story-clarity .proof-top { padding-bottom: 36px; }
}

@media (max-width: 1180px) {
  .story-clarity #why-now .fragment-shell,
  .story-clarity #brain .brain-shell,
  .fit-shell {
    grid-template-columns: 1fr;
    gap: 55px;
  }
  .story-clarity #why-now .fragment-shell,
  .story-clarity #brain .brain-shell { min-height: auto; }
  .story-clarity #why-now .fragment-copy,
  .story-clarity #brain .brain-copy { max-width: 780px; }
  .story-clarity .context-system,
  .story-clarity .brain-system { width: min(760px, 100%); margin-inline: auto; }
  .story-clarity #brain .brain-shell { padding-top: 100px; }
  .fit-shell { padding: 90px 0; }
  .fit-heading { max-width: 800px; }
}

@media (max-width: 720px) {
  .story-clarity .offer-boundary {
    margin-top: 13px;
    padding: 10px 11px;
    border: 1px solid rgba(17,17,17,.09);
    border-radius: 12px;
    text-align: center;
    background: rgba(255,255,255,.92);
    box-shadow: 0 8px 24px rgba(18,71,106,.05);
    font-size: .67rem;
    line-height: 1.38;
  }
  .story-clarity #why-now .fragment-shell,
  .story-clarity #brain .brain-shell {
    gap: 38px;
    padding: 82px 0;
  }
  .story-clarity #why-now .fragment-rule { padding: 19px 0 0 18px; }
  .story-clarity .context-system {
    display: grid;
    min-height: 0;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 17px;
    border-radius: 25px;
  }
  .context-system::before,
  .context-wire { display: none; }
  .context-source,
  .context-owner,
  .context-gap {
    position: relative;
    inset: auto;
    width: auto;
    transform: none;
  }
  .context-source {
    min-height: 78px;
    padding: 13px 12px;
    border-radius: 13px;
  }
  .context-source::before { display: none; }
  .context-source small { font-size: .56rem; }
  .context-source strong { font-size: .84rem; }
  .context-owner {
    width: 180px;
    height: 180px;
    grid-column: 1 / -1;
    justify-self: center;
    margin: 15px 0;
  }
  .context-owner strong { font-size: 1.25rem; }
  .context-gap {
    grid-column: 1 / -1;
    padding: 15px;
    font-size: .75rem;
    line-height: 1.4;
  }

  .story-clarity #brain .brain-definition { padding: 16px; }
  .story-clarity .current-capability { padding-left: 16px; font-size: .8rem; }
  .story-clarity .brain-system {
    display: grid;
    min-height: 0;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 10px;
    padding: 17px;
    border-radius: 25px;
  }
  .brain-system::before,
  .brain-source::after,
  .brain-core::after { display: none; }
  .brain-source,
  .brain-source-email,
  .brain-source-calls,
  .brain-source-customers,
  .brain-source-billing,
  .brain-source-decisions { grid-area: auto; min-height: 64px; padding: 12px; }
  .brain-source small { font-size: .55rem; }
  .brain-source strong { font-size: .8rem; }
  .brain-source-decisions { grid-column: 1 / -1; width: calc(50% - 5px); justify-self: center; }
  .brain-core {
    width: 190px;
    height: 190px;
    grid-area: auto;
    grid-column: 1 / -1;
    justify-self: center;
    margin: 18px 0;
  }
  .brain-core strong { font-size: 1.45rem; }
  .brain-answer {
    min-height: 0;
    grid-area: auto;
    grid-column: 1 / -1;
    padding: 20px;
    text-align: center;
  }

  .story-clarity .legacy-rail {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 30px 0 12px;
    padding: 12px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .legacy-rail span { display: flex; min-width: 0; flex: 1; flex-direction: column; color: #464646; font: 600 .65rem/1.25 var(--display); }
  .legacy-rail span b { margin-bottom: 3px; color: var(--terracotta); font-size: .55rem; }
  .legacy-rail i { width: 13px; height: 1px; flex: 0 0 auto; background: var(--blue-deep); }
  .legacy-rail i::after { display: none; }

  .story-clarity .control-infographic {
    grid-template-areas: "seal seal" "one two" "three four";
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 38px;
  }
  .control-seal { width: 205px; height: 205px; margin: 6px 0 19px; }
  .control-promise { min-height: 158px; padding: 18px 16px; border-radius: 17px; }
  .control-promise b { margin-bottom: 12px; }
  .control-promise strong { font-size: .93rem; }
  .control-promise span { font-size: .69rem; line-height: 1.4; }
  .story-clarity .access-boundary { padding: 15px; text-align: left; font-size: .72rem; }

  .story-clarity .proof-pull { margin-top: 23px; padding: 17px 18px; font-size: 1.08rem; }
  .proof-pull cite { font-size: .58rem; line-height: 1.35; }

  .fit-shell { grid-template-columns: 1fr; gap: 35px; padding: 82px 0; }
  .fit-heading h2 { font-size: clamp(2.75rem, 11.5vw, 3.75rem); }
  .fit-columns { grid-template-columns: 1fr; }
  .fit-columns article { padding: 24px 22px; }

  .story-clarity .guide-credentials { grid-template-columns: repeat(3, 1fr); margin-top: 27px; }
  .guide-credentials span { padding: 15px 9px; }
  .guide-credentials span:first-child { padding-left: 0; }
  .guide-credentials strong { font-size: .78rem; line-height: 1.15; }
  .guide-credentials small { font-size: .55rem; line-height: 1.3; }

  .story-clarity .final-boundary { font-size: .68rem; }
}

/* Final copy and responsive polish for the clarity narrative. */
.story-clarity .hero-support { display: none; }
.story-clarity .offer-boundary {
  max-width: 650px;
  margin-top: 14px;
  padding: 0;
  border: 0;
  color: #747474;
  font-size: .76rem;
  line-height: 1.45;
}

.story-clarity .fragment h2 { font-size: clamp(3.25rem, 4.65vw, 5.1rem); }
.story-clarity .deep-work-copy h2,
.story-clarity .decision-heading h2,
.story-clarity .guide-copy h2 { font-size: clamp(3.15rem, 4.45vw, 4.9rem); }
.story-clarity .brain-copy h2 { font-size: clamp(3.2rem, 4.75vw, 5.2rem); }
.story-clarity .legacy-heading h2,
.story-clarity .ownership-heading h2,
.story-clarity .proof-copy h2 { font-size: clamp(3rem, 4.15vw, 4.55rem); }

.story-clarity .brain-setup {
  display: grid;
  grid-template-columns: auto 24px auto 24px auto;
  align-items: center;
  gap: 10px;
  margin-top: 21px;
  padding-top: 18px;
  border-top: 1px solid rgba(20,121,211,.14);
}
.brain-setup span { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.brain-setup b { color: var(--terracotta-deep); font: 700 .57rem var(--display); }
.brain-setup strong { color: #26333b; font: 600 .72rem var(--display); }
.brain-setup i { height: 1px; background: linear-gradient(90deg, rgba(20,121,211,.15), rgba(20,121,211,.65)); }
.brain-setup small { grid-column: 1 / -1; color: #75818a; font-size: .72rem; }

.story-clarity .legacy-rail {
  align-items: center;
  gap: 12px;
  margin: 34px 0 22px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.story-clarity .legacy-rail span {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: 9px;
  color: #464646;
  font: 600 .72rem/1.3 var(--display);
}
.story-clarity .legacy-rail span b { color: var(--terracotta); font-size: .58rem; }
.story-clarity .legacy-rail i { position: relative; width: 36px; height: 1px; flex: 0 0 auto; background: var(--blue-deep); }
.story-clarity .legacy-rail i::after {
  position: absolute;
  top: 50%;
  right: -1px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  content: "";
  background: var(--blue);
  box-shadow: 0 0 9px rgba(63,177,235,.7);
  transform: translateY(-50%);
}

.story-clarity .testimonial-cinema { min-height: 680px; margin-bottom: 72px; }
.story-clarity .cinema-caption h3 { max-width: 760px; }

@media (min-width: 721px) and (max-width: 1180px) {
  .story-clarity .legacy-rail { display: flex; }
  .story-clarity .legacy-transfer { margin-top: 16px; }
}

@media (min-width: 721px) and (max-width: 1050px) {
  .story-clarity .hero,
  .story-clarity .responsive-layout-3,
  .story-clarity .responsive-layout-3 .hero-shell {
    min-height: max(720px, 100svh);
  }
  .story-clarity .responsive-layout-3 .hero-shell {
    align-items: center;
    padding: 92px 0 58px;
  }
  .story-clarity .responsive-layout-3 .hero-copy {
    width: 55%;
    max-width: 520px;
    margin: 0;
    text-align: left;
  }
  .story-clarity .responsive-layout-3 .hero-copy > .eyebrow {
    width: fit-content;
    margin: 0 0 13px;
  }
  .story-clarity .responsive-layout-3 .hero h1 {
    max-width: 520px;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 18px;
    font-size: clamp(3.15rem, 6.4vw, 4.15rem);
  }
  .story-clarity .responsive-layout-3 .hero-lede {
    max-width: 470px;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 17px;
    font-size: .92rem;
    line-height: 1.48;
  }
  .story-clarity .responsive-layout-3 .hero-actions { justify-content: flex-start; }
  .story-clarity .responsive-layout-3 .offer-boundary { margin-right: 0; margin-left: 0; text-align: left; }
  .story-clarity .responsive-layout-3 .hero-neural-field {
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .story-clarity .responsive-layout-3.hero-scene-9 .hero-neural-field::before {
    background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.98) 42%, rgba(255,255,255,.82) 56%, rgba(255,255,255,.28) 74%, rgba(255,255,255,.04) 100%);
  }
  .story-clarity .responsive-layout-3.hero-scene-9 .hero-portrait {
    inset: 0 -27% 0 auto;
    width: 110%;
    height: 100%;
    transform: none;
  }
  .story-clarity .responsive-layout-3 .hero-portrait img {
    object-fit: contain;
    object-position: right bottom;
  }
  .story-clarity .responsive-layout-3 .hero-portrait::before {
    background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.93) 16%, rgba(255,255,255,.43) 37%, rgba(255,255,255,.06) 60%, transparent 76%);
  }
  .story-clarity .context-system,
  .story-clarity .brain-system { max-width: 690px; }
}

@media (max-width: 720px) {
  .story-clarity .hero,
  .story-clarity .responsive-layout-3,
  .story-clarity .responsive-layout-3.mobile-style-1,
  .story-clarity .responsive-layout-3 .hero-shell,
  .story-clarity .responsive-layout-3.mobile-style-1 .hero-shell {
    min-height: max(800px, 100svh);
  }
  .story-clarity .responsive-layout-3 .hero-shell,
  .story-clarity .responsive-layout-3.mobile-style-1 .hero-shell {
    padding: 82px 0 270px;
  }
  .story-clarity .responsive-layout-3 .hero-copy > .eyebrow { margin-bottom: 10px; }
  .story-clarity .responsive-layout-3 .hero h1 {
    max-width: 360px;
    margin-bottom: 15px;
    font-size: clamp(2.72rem, 12.5vw, 3.04rem);
    line-height: .88;
  }
  .story-clarity .responsive-layout-3.mobile-style-1 .hero-lede,
  .story-clarity .responsive-layout-3 .hero-lede {
    max-width: 360px;
    margin-bottom: 15px;
    font-size: .84rem;
    line-height: 1.4;
  }
  .story-clarity .responsive-layout-3 .hero-actions { gap: 10px; }
  .story-clarity .responsive-layout-3 .hero-actions .button {
    min-height: 46px;
    padding: 12px 16px;
    font-size: .76rem;
  }
  .story-clarity .responsive-layout-3 .hero-actions .text-link { font-size: .68rem; }
  .story-clarity .offer-boundary {
    max-width: 330px;
    margin: 9px auto 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: .65rem;
    line-height: 1.35;
  }
  .story-clarity .responsive-layout-3.hero-scene-9 .hero-neural-field,
  .story-clarity .responsive-layout-3.hero-scene-9 .hero-portrait { height: 35%; }
  .story-clarity .responsive-layout-3.hero-scene-9 .hero-portrait { width: 110%; }
  .story-clarity .responsive-layout-3.hero-scene-9 .hero-neural-field::before {
    background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.93) 15%, rgba(255,255,255,.53) 38%, rgba(255,255,255,.08) 65%, transparent 100%);
  }

  .story-clarity .fragment h2,
  .story-clarity .brain-copy h2 { font-size: clamp(2.7rem, 10.8vw, 3.45rem); }
  .story-clarity .deep-work-copy h2,
  .story-clarity .decision-heading h2,
  .story-clarity .legacy-heading h2,
  .story-clarity .ownership-heading h2,
  .story-clarity .proof-copy h2,
  .story-clarity .guide-copy h2 { font-size: clamp(2.55rem, 10.2vw, 3.25rem); }

  .story-clarity .brain-setup { grid-template-columns: 1fr 12px 1fr 12px 1.2fr; gap: 5px; }
  .brain-setup span { justify-content: center; flex-direction: column; gap: 2px; text-align: center; white-space: normal; }
  .brain-setup strong { font-size: .62rem; line-height: 1.2; }
  .brain-setup small { margin-top: 4px; text-align: center; font-size: .65rem; }

  .story-clarity #brain .brain-shell { gap: 28px; padding: 72px 0; }
  .story-clarity .brain-system { gap: 8px; padding: 14px; }
  .brain-source,
  .brain-source-email,
  .brain-source-calls,
  .brain-source-customers,
  .brain-source-billing,
  .brain-source-decisions { min-height: 52px; padding: 9px 11px; }
  .brain-source-decisions { width: calc(50% - 4px); }
  .brain-core { width: 158px; height: 158px; margin: 12px 0; }
  .brain-core small { font-size: .54rem; }
  .brain-core strong { font-size: 1.22rem; }
  .brain-answer { padding: 16px; }
  .brain-answer strong { margin: 5px 0; font-size: 1.12rem; }
  .brain-answer span { font-size: .68rem; }

  .story-clarity .legacy-rail { margin-top: 24px; gap: 6px; }
  .story-clarity .legacy-rail span { align-items: flex-start; flex-direction: column; gap: 1px; font-size: .6rem; }
  .story-clarity .legacy-rail i { width: 11px; }

  .story-clarity .proof-top { padding-top: 76px; padding-bottom: 28px; }
  .story-clarity .proof-pull { margin-top: 18px; }
  .story-clarity .testimonial-cinema { min-height: 0; margin-bottom: 54px; }
  .story-clarity .cinema-player,
  .story-clarity .cinema-player video { min-height: 560px; }
  .story-clarity .cinema-player video { object-fit: cover; object-position: center; }
  .story-clarity .cinema-list {
    display: grid;
    grid-auto-columns: minmax(185px, 62vw);
    grid-auto-flow: column;
    grid-template-columns: none;
    gap: 7px;
    overflow-x: auto;
    padding: 14px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }
  .story-clarity .cinema-list > p { display: none; }
  .story-clarity .cinema-list button {
    grid-template-columns: 38px 1fr;
    min-width: 0;
    margin: 0;
    scroll-snap-align: start;
  }
  .story-clarity .cinema-list img { width: 38px; height: 38px; }
  .story-clarity .cinema-list b { font-size: .76rem; }
  .story-clarity .cinema-list small { font-size: .56rem; }
}

/* Mobile chest-overlap studies. Copy enters across the torso, never the face. */
@media (max-width: 720px) {
  .story-clarity .responsive-layout-3:is(.mobile-style-1, .mobile-style-2, .mobile-style-3, .mobile-style-4),
  .story-clarity .responsive-layout-3:is(.mobile-style-1, .mobile-style-2, .mobile-style-3, .mobile-style-4) .hero-shell {
    min-height: max(850px, 100svh);
  }

  .story-clarity .responsive-layout-3:is(.mobile-style-1, .mobile-style-2, .mobile-style-3, .mobile-style-4) {
    overflow: hidden;
    isolation: isolate;
  }

  .story-clarity .responsive-layout-3:is(.mobile-style-1, .mobile-style-2, .mobile-style-3, .mobile-style-4).hero-scene-9 .hero-neural-field {
    inset: 0;
    width: 100%;
    height: 100%;
    background: #dff5ff;
  }

  .story-clarity .responsive-layout-3:is(.mobile-style-1, .mobile-style-2, .mobile-style-3, .mobile-style-4) .hero-neural-video {
    object-fit: cover;
    object-position: 72% center;
    filter: saturate(1.13) contrast(1.035) brightness(.98);
  }

  .story-clarity .responsive-layout-3:is(.mobile-style-1, .mobile-style-2, .mobile-style-3, .mobile-style-4).hero-scene-9 .hero-portrait {
    inset: 0 auto auto 50%;
    z-index: 3;
    width: 148%;
    height: clamp(430px, 56svh, 490px);
    transform: translateX(-50%);
  }

  .story-clarity .responsive-layout-3:is(.mobile-style-1, .mobile-style-2, .mobile-style-3, .mobile-style-4).hero-scene-9 .hero-portrait img {
    object-fit: contain;
    object-position: center top;
  }

  .story-clarity .responsive-layout-3:is(.mobile-style-1, .mobile-style-2, .mobile-style-3, .mobile-style-4) .hero-shell {
    z-index: 6;
    align-items: flex-start;
    padding: clamp(250px, 32svh, 280px) 0 30px;
  }

  .story-clarity .responsive-layout-3:is(.mobile-style-1, .mobile-style-2, .mobile-style-3, .mobile-style-4) .hero-copy {
    width: 100%;
    max-width: 390px;
    margin-inline: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    text-align: left;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .story-clarity .responsive-layout-3:is(.mobile-style-1, .mobile-style-2, .mobile-style-3, .mobile-style-4) .hero-reading-block {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .story-clarity .responsive-layout-3:is(.mobile-style-1, .mobile-style-2, .mobile-style-3, .mobile-style-4) .hero-copy > .eyebrow {
    width: fit-content;
    margin: 0 0 10px;
    font-size: .58rem;
  }

  .story-clarity .responsive-layout-3:is(.mobile-style-1, .mobile-style-2, .mobile-style-3, .mobile-style-4) .hero h1 {
    max-width: 100%;
    margin: 0 0 14px;
    font-size: clamp(2.18rem, 9.8vw, 2.46rem);
    line-height: .88;
  }

  .story-clarity .responsive-layout-3:is(.mobile-style-1, .mobile-style-2, .mobile-style-3, .mobile-style-4) .hero-lede {
    max-width: 360px;
    margin: 0 0 15px;
    font-size: .79rem;
    line-height: 1.4;
  }

  .story-clarity .responsive-layout-3:is(.mobile-style-1, .mobile-style-2, .mobile-style-3, .mobile-style-4) .hero-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 9px;
  }

  .story-clarity .responsive-layout-3:is(.mobile-style-1, .mobile-style-2, .mobile-style-3, .mobile-style-4) .hero-actions .button {
    width: 100%;
    min-height: 48px;
    padding: 12px 18px;
    font-size: .76rem;
  }

  .story-clarity .responsive-layout-3:is(.mobile-style-1, .mobile-style-2, .mobile-style-3, .mobile-style-4) .hero-actions .text-link {
    align-self: center;
    font-size: .7rem;
  }

  .story-clarity .responsive-layout-3:is(.mobile-style-1, .mobile-style-2, .mobile-style-3, .mobile-style-4) .offer-boundary,
  .story-clarity .responsive-layout-3:is(.mobile-style-1, .mobile-style-2, .mobile-style-3, .mobile-style-4) .hero-support {
    display: none;
  }

  body:has(.story-clarity .responsive-layout-3) .site-nav { z-index: 30; }
  body:has(.story-clarity .responsive-layout-3) .brand img { filter: drop-shadow(0 1px 9px rgba(255,255,255,.98)); }

  /* 01: A white atmosphere rises through the chest into readable copy. */
  .story-clarity .responsive-layout-3.mobile-style-1 { color: var(--ink); background: #fff; }
  .story-clarity .responsive-layout-3.mobile-style-1.hero-scene-9 .hero-neural-field::before {
    display: block;
    z-index: 2;
    background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, transparent 25%, rgba(255,255,255,.34) 43%, rgba(255,255,255,.88) 58%, #fff 70%);
  }
  .story-clarity .responsive-layout-3.mobile-style-1.hero-scene-9 .hero-portrait::before {
    background: linear-gradient(180deg, transparent 0%, transparent 49%, rgba(255,255,255,.18) 60%, rgba(255,255,255,.9) 79%, #fff 100%);
  }
  .story-clarity .responsive-layout-3.mobile-style-1 .hero-copy { padding-top: 12px; }
  .story-clarity .responsive-layout-3.mobile-style-1 .hero-copy > .eyebrow {
    color: #fff;
    text-shadow: 0 2px 12px rgba(0,0,0,.72);
  }
  .story-clarity .responsive-layout-3.mobile-style-1 .hero-copy > .eyebrow span { color: rgba(255,255,255,.72); }
  .story-clarity .responsive-layout-3.mobile-style-1 .hero-lede { color: #4c5961; }

  /* 02: Full electric portrait with a cinematic midnight reading gradient. */
  .story-clarity .responsive-layout-3.mobile-style-2 { color: #fff; background: #07101a; }
  .story-clarity .responsive-layout-3.mobile-style-2.hero-scene-9 .hero-neural-field::before {
    display: block;
    z-index: 2;
    background: linear-gradient(180deg, rgba(4,12,22,.02) 0%, rgba(4,12,22,.08) 25%, rgba(4,12,22,.62) 48%, #07101a 69%, #07101a 100%);
  }
  .story-clarity .responsive-layout-3.mobile-style-2.hero-scene-9 .hero-portrait::before {
    background: linear-gradient(180deg, transparent 0%, transparent 43%, rgba(4,12,22,.28) 57%, rgba(7,16,26,.92) 82%, #07101a 100%);
  }
  .story-clarity .responsive-layout-3.mobile-style-2 .hero-copy { padding-top: 10px; }
  .story-clarity .responsive-layout-3.mobile-style-2 .hero-copy > .eyebrow { color: #8adfff; }
  .story-clarity .responsive-layout-3.mobile-style-2 .hero h1 { color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.36); }
  .story-clarity .responsive-layout-3.mobile-style-2 .hero h1 em { color: #ff9f77; }
  .story-clarity .responsive-layout-3.mobile-style-2 .hero-lede { color: rgba(255,255,255,.82); }
  .story-clarity .responsive-layout-3.mobile-style-2 .hero-actions .button { color: #07101a; background: #fff; }
  .story-clarity .responsive-layout-3.mobile-style-2 .hero-actions .text-link { color: #fff; }

  /* 03: The portrait remains cinematic while a solid lower stage carries the story. */
  .story-clarity .responsive-layout-3.mobile-style-3 { color: var(--ink); background: #edf9ff; }
  .story-clarity .responsive-layout-3.mobile-style-3.hero-scene-9 .hero-neural-field::before {
    display: block;
    z-index: 2;
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.08) 38%, rgba(237,249,255,.8) 69%, #edf9ff 100%);
  }
  .story-clarity .responsive-layout-3.mobile-style-3.hero-scene-9 .hero-portrait::before {
    background: linear-gradient(180deg, transparent 0%, transparent 63%, rgba(237,249,255,.42) 82%, #edf9ff 100%);
  }
  .story-clarity .responsive-layout-3.mobile-style-3 .hero-shell { padding-top: clamp(272px, 35svh, 300px); }
  .story-clarity .responsive-layout-3.mobile-style-3 .hero-copy {
    padding: 20px 18px 30px;
    border-radius: 28px 28px 0 0;
    background: #fff;
    box-shadow: 0 -18px 55px rgba(15,76,116,.14);
  }
  .story-clarity .responsive-layout-3.mobile-style-3 .hero-lede { color: #4c5961; }

  /* 04: The headline sits on the torso and the explanation locks into a clean card below it. */
  .story-clarity .responsive-layout-3.mobile-style-4 { color: #fff; background: #07101a; }
  .story-clarity .responsive-layout-3.mobile-style-4.hero-scene-9 .hero-neural-field::before {
    display: block;
    z-index: 2;
    background: linear-gradient(180deg, rgba(4,12,22,.02) 0%, rgba(4,12,22,.12) 31%, rgba(4,12,22,.66) 58%, #07101a 86%);
  }
  .story-clarity .responsive-layout-3.mobile-style-4.hero-scene-9 .hero-portrait::before {
    background: linear-gradient(180deg, transparent 0%, transparent 42%, rgba(4,12,22,.32) 62%, rgba(7,16,26,.9) 94%);
  }
  .story-clarity .responsive-layout-3.mobile-style-4 .hero-copy > .eyebrow { color: #8adfff; }
  .story-clarity .responsive-layout-3.mobile-style-4 .hero h1 { color: #fff; text-shadow: 0 3px 25px rgba(0,0,0,.58); }
  .story-clarity .responsive-layout-3.mobile-style-4 .hero h1 em { color: #ff9f77; }
  .story-clarity .responsive-layout-3.mobile-style-4 .hero-reading-block {
    padding: 17px 16px 19px;
    border: 1px solid rgba(255,255,255,.58);
    border-radius: 22px;
    color: var(--ink);
    background: rgba(255,255,255,.96);
    box-shadow: 0 18px 50px rgba(0,0,0,.2);
  }
  .story-clarity .responsive-layout-3.mobile-style-4 .hero-lede { color: #44515a; }
  .story-clarity .responsive-layout-3.mobile-style-4 .hero-actions .text-link { color: var(--ink); }

  body:has(.story-clarity .responsive-layout-3:is(.mobile-style-1, .mobile-style-2, .mobile-style-3, .mobile-style-4)) .brand img {
    filter: drop-shadow(0 1px 9px rgba(255,255,255,.98)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .hero-scene-8 .hero-neural-video,
  .hero-scene-9 .hero-neural-video,
  .hero-scene-10 .hero-neural-video { display: none; }
  .hero-scene-8 .hero-neural-field,
  .hero-scene-9 .hero-neural-field,
  .hero-scene-10 .hero-neural-field { background: #fff url("../assets/hero-neural-video-seed-desktop-v1.jpg") center / cover no-repeat; }
}