/* ==========================================================================
   Landing page components.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO — centred, one idea, one CTA. The console is the only object.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: clamp(34px, 5vw, 64px) 0;
  overflow: hidden;                 /* clips the console's lower edge */
}

/* Vertical light shafts. A SIBLING of the console, never an ancestor —
   `filter` on an ancestor would rasterize the transformed console. */
.hero__shafts {
  position: absolute;
  inset: 0 0 auto;
  height: clamp(360px, 62vh, 620px);
  pointer-events: none;
  z-index: 0;
  filter: blur(22px);
  opacity: 0.85;
  background:
    linear-gradient(90deg, transparent 0 6%,  rgba(58,108,196,0.16) 6% 7.4%,  transparent 7.4% 14%),
    linear-gradient(90deg, transparent 0 21%, rgba(78,132,224,0.20) 21% 23.2%, transparent 23.2% 30%),
    linear-gradient(90deg, transparent 0 37%, rgba(96,150,240,0.26) 37% 40%,   transparent 40% 46%),
    linear-gradient(90deg, transparent 0 53%, rgba(78,132,224,0.22) 53% 55.6%, transparent 55.6% 62%),
    linear-gradient(90deg, transparent 0 69%, rgba(58,108,196,0.18) 69% 71%,   transparent 71% 78%),
    linear-gradient(90deg, transparent 0 86%, rgba(48, 96,176,0.14) 86% 87.6%, transparent 87.6% 94%);
  -webkit-mask-image: radial-gradient(ellipse 62% 100% at 50% 8%, #000 12%, transparent 78%);
          mask-image: radial-gradient(ellipse 62% 100% at 50% 8%, #000 12%, transparent 78%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
}
.hero__copy { position: relative; }

.hero__cover { position: relative; justify-self: center; }
.hero__cover img {
  width: clamp(180px, 26vw, 320px);
  height: auto;
  border: 1px solid var(--hairline-strong);
  box-shadow: 0 34px 80px -22px rgba(0,0,0,0.85);
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.hero__eyebrow-dot {
  width: 6px; height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
  animation: pulse 2.6s var(--ease) infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.hero__title {
  margin-top: 20px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-hero);
  line-height: 0.9;
  letter-spacing: -0.014em;
  text-transform: uppercase;
  color: var(--white);
}
.hero__title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.012em;
  color: var(--gold);
}

.hero__verses { max-width: 56ch; margin-top: clamp(20px, 3vw, 28px); }
.hero__verses > p + p { margin-top: 14px; }
.hero__verses p { color: var(--text-dim); line-height: 1.62; }
.hero__verses strong { color: var(--text); font-weight: 600; }
.hero__turn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 2vw, 21px);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--white) !important;
  padding-top: 4px;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: clamp(26px, 3.6vw, 36px);
}
.hero__quiet {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.hero__quiet:hover { color: var(--gold); border-bottom-color: rgba(212,168,76,0.5); }

/* --------------------------------------------------------------------------
   THE TILTED CONSOLE
   Perspective on the parent, transform on the child, hinged from the top so
   the lower edge falls under the fold. Real text — no image, no filter, and
   no will-change anywhere on this subtree.
   -------------------------------------------------------------------------- */

.hero-stage {
  position: relative;
  z-index: 1;
  perspective: 1600px;
  perspective-origin: 50% 0%;
  margin-top: clamp(26px, 3.6vw, 48px);
  /* the console is taller than what we show: the rest sits under the fold */
  height: clamp(310px, 52vh, 520px);
}

.console3d {
  --tilt: 7deg;
  transform: rotateX(var(--tilt)) rotateZ(-1.2deg);
  transform-origin: 50% 0;
  background: var(--navy-2);
  border: 1px solid var(--hairline-strong);
  border-top: 1px solid rgba(212,168,76,0.55);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.9);
  transition: transform 0.35s var(--ease);
}

.console3d__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  background: var(--navy-3);
  border-bottom: 1px solid var(--hairline);
}
.console3d__dots { display: inline-flex; gap: 6px; flex: none; }
.console3d__dots i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--hairline-strong);
}
.console3d__dots i:first-child { background: rgba(212,38,38,0.75); }
.console3d__dots i:nth-child(2) { background: rgba(212,168,76,0.75); }
.console3d__name {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-dim);
}
.console3d__live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.console3d__live::before {
  content: '';
  width: 5px; height: 5px;
  background: var(--gold);
  transform: rotate(45deg);
}

.console3d__feed {
  padding: clamp(20px, 2.6vw, 30px) clamp(18px, 2.6vw, 32px);
  font-family: var(--font-mono);
  font-size: clamp(12px, 1.15vw, 13.5px);
  line-height: 1.85;
}
.c3-line { color: var(--text-dim); }
.c3-line + .c3-line { margin-top: 10px; }
.c3-you { color: var(--text); }
.c3-caret { color: var(--gold); margin-right: 8px; }

.c3-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.c3-key {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.c3-dim { color: var(--text-mute); }

.c3-stage { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.c3-w {
  display: inline-block;
  min-width: 96px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
}
.c3-pause { color: var(--text-mute); }
.c3-k {
  display: inline-block;
  min-width: 96px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--gold);
}

@media (max-width: 760px) {
  /* perspective on a narrow screen reads as a rendering bug */
  .hero-stage { perspective: none; height: clamp(280px, 42vh, 380px); }
  .console3d { --tilt: 0deg; transform: none; }
  .c3-w, .c3-k { display: block; min-width: 0; margin-bottom: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .console3d { --tilt: 0deg; transition: none; }
  .hero__eyebrow-dot { animation: none; }
}

/* --------------------------------------------------------------------------
   THREE COLUMNS
   -------------------------------------------------------------------------- */

.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(26px, 3.6vw, 46px);
  margin-top: clamp(38px, 5vw, 58px);
}
.col { padding-top: 22px; border-top: 1px solid var(--hairline); }
.col__n {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--gold);
  margin-bottom: 14px;
}
.col h3 { margin-bottom: 12px; }
.col p { color: var(--text-dim); }

/* --------------------------------------------------------------------------
   THE 60-MINUTE DIAL
   r = 104 -> circumference 653.45; each quarter 163.36, less a 6px gap.
   -------------------------------------------------------------------------- */

.dial {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(30px, 5vw, 66px);
  margin-top: clamp(38px, 5vw, 58px);
}
.dial__face svg { width: 100%; height: auto; }
.dial__track { fill: none; stroke: var(--hairline); stroke-width: 1; }
.dial__seg {
  fill: none;
  stroke: var(--hairline-strong);
  stroke-width: 10;
  stroke-dasharray: 157.363 496.088;
  transform: rotate(-90deg);
  transform-origin: 130px 130px;
  transition: stroke 0.25s var(--ease), stroke-width 0.25s var(--ease);
}
.dial__seg[data-seg="1"] { stroke-dashoffset: -3; }
.dial__seg[data-seg="2"] { stroke-dashoffset: -166.363; }
.dial__seg[data-seg="3"] { stroke-dashoffset: -329.726; }
.dial__seg[data-seg="4"] { stroke-dashoffset: -493.089; }
.dial__seg.is-active { stroke: var(--gold); stroke-width: 13; }

.dial__big {
  fill: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 46px;
  text-anchor: middle;
}
.dial__unit, .dial__daily {
  fill: var(--text-dim);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-anchor: middle;
}
.dial__daily { fill: var(--gold); }

.dial__list { list-style: none; }
.dial__item {
  border-left: 2px solid var(--hairline);
  padding: 4px 0 4px 20px;
  transition: border-color 0.2s var(--ease);
}
.dial__item + .dial__item { margin-top: 18px; }
.dial__item.is-active { border-left-color: var(--gold); }

.dial__btn {
  display: flex;
  align-items: baseline;
  gap: 14px;
  width: 100%;
  min-height: 44px;                     /* touch target floor */
  text-align: left;
}
.dial__time {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-mute);
  flex: none;
  transition: color 0.2s var(--ease);
}
.dial__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 2vw, 21px);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color 0.2s var(--ease);
}
.dial__item.is-active .dial__name { color: var(--white); }
.dial__item.is-active .dial__time { color: var(--gold); }
.dial__body {
  margin-top: 6px;
  font-size: var(--fs-small);
  color: var(--text-dim);
  max-width: 60ch;
}

.pull {
  margin-top: clamp(44px, 6vw, 70px);
  padding: clamp(24px, 3vw, 34px) 0 0;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(18px, 2.4vw, 24px);
  line-height: 1.45;
  color: var(--text-dim);
  text-align: center;
}
.pull strong { color: var(--gold); font-style: normal; font-weight: 700; }

/* --------------------------------------------------------------------------
   INSIDE THE CODE
   -------------------------------------------------------------------------- */

.parts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: clamp(38px, 5vw, 58px);
  list-style: none;
}
.part {
  display: flex;
  flex-direction: column;
  padding: 26px 24px;
  background: var(--navy-2);
  border: 1px solid var(--hairline);
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.part:hover { border-color: var(--hairline-strong); transform: translateY(-2px); }
.part--accent { border-left: 3px solid var(--gold); }
.part__n {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.part__t {
  margin-top: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--white);
}
.part__b { margin-top: 10px; font-size: var(--fs-small); color: var(--text-dim); flex: 1; }
.part__c {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-mute);
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1px;
  margin-top: 40px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  list-style: none;
}
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 26px 12px;
  background: var(--navy);
  text-align: center;
}
.stat__n {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1;
  color: var(--gold);
}
.stat__l {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* --------------------------------------------------------------------------
   THE OBJECTION CONSOLE
   -------------------------------------------------------------------------- */

.console {
  margin-top: clamp(38px, 5vw, 56px);
  background: var(--navy-2);
  border: 1px solid var(--hairline-strong);
}
.console__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--navy-3);
  border-bottom: 1px solid var(--gold);
}
.console__dot {
  width: 7px; height: 7px;
  background: var(--gold);
  transform: rotate(45deg);
  flex: none;
}
.console__title {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text);
}
.console__badge {
  margin-left: auto;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--text-dim);
  padding: 3px 9px;
}
.console__body { padding: clamp(20px, 3vw, 30px); }

.console__label {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 10px;
}
.console__row { display: flex; flex-wrap: wrap; gap: 10px; }
.console__input {
  flex: 1 1 260px;
  min-height: 50px;
  padding: 0 16px;
  color: var(--white);
  background: var(--navy);
  border: 1px solid var(--hairline-strong);
  transition: border-color 0.18s var(--ease);
}
.console__input::placeholder { color: var(--text-mute); }
.console__input:focus { border-color: var(--gold); }
.console__go { flex: none; min-height: 50px; }

.console__help { margin-top: 18px; font-size: 13px; color: var(--text-dim); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; list-style: none; }
.chip {
  min-height: 44px;                     /* touch target floor */
  padding: 0 14px;
  font-size: 13px;
  color: var(--text-dim);
  background: var(--navy);
  border: 1px solid var(--hairline);
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.chip:hover { color: var(--gold); border-color: var(--gold); }
.chip--static {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  cursor: default;
}
.chips--static { margin-top: 24px; }

/* result */
.console__out:empty { display: none; }
.console__out { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--hairline); }

.res__said {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(19px, 2.4vw, 25px);
  line-height: 1.35;
  color: var(--white);
}
.res__pattern {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin-top: 16px;
}
.res__pattern-l {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.res__pattern-v {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 2vw, 20px);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold);
}
.res__tell { margin-top: 8px; font-size: var(--fs-small); color: var(--text-dim); }

.stages { margin-top: 20px; list-style: none; }
.console-cta { padding: 28px 0; max-width: 720px; }
.console-cta p { color: var(--text-dim); margin: 12px 0 20px; }
.console-cta > a:last-child { display: block; margin-top: 18px; color: var(--gold); }
.hero { padding-bottom: 48px; }
.stage {
  padding: 18px 0 18px 0;
  border-top: 1px solid var(--hairline);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.stage.is-in { opacity: 1; transform: none; }
.stage__h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.stage__letter {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  color: var(--gold);
  flex: none;
  width: 20px;
}
.stage__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
}
.stage__sub {
  font-size: 12.5px;
  color: var(--text-dim);
  font-style: italic;
}
.stage__b { margin-top: 8px; padding-left: 32px; color: var(--text-dim); max-width: 68ch; }

.stage__pause {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0 14px 32px;
  border-top: 1px solid var(--hairline);
  font-size: 13px;
  color: var(--text-mute);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.stage__pause.is-in { opacity: 1; }
.stage__pause.is-done { color: var(--text-mute); opacity: 0.45; }
.stage__pause-k {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--gold);
  border: 1px solid rgba(212, 168, 76, 0.4);
  padding: 2px 8px;
  flex: none;
}

.res__next {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 8px;
  padding: 16px 0 0;
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-small);
  color: var(--text-dim);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.res__next.is-in { opacity: 1; }
.res__next-l {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

.console__foot {
  padding: 16px 18px;
  border-top: 1px solid var(--hairline);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-mute);
}
.console__foot a { color: var(--gold); text-underline-offset: 3px; white-space: nowrap; }

.ai-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(24px, 3.4vw, 42px);
  margin-top: clamp(38px, 5vw, 56px);
}
.ai-point { padding-top: 20px; border-top: 1px solid var(--hairline); }
.ai-point h3 { margin-bottom: 10px; }
.ai-point p { font-size: var(--fs-small); color: var(--text-dim); }

/* --------------------------------------------------------------------------
   AUTHOR
   -------------------------------------------------------------------------- */

.author {
  display: grid;
  grid-template-columns: minmax(220px, 360px) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 60px);
  margin-top: clamp(38px, 5vw, 56px);
  align-items: start;
}
.author__photo img {
  width: 100%;
  border: 1px solid var(--hairline-strong);
}
.author__body .lede { margin-top: 0; }
.author__body p { color: var(--text-dim); }
.author__body strong { color: var(--text); }

/* --------------------------------------------------------------------------
   CAPTURE
   -------------------------------------------------------------------------- */

.capture {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(30px, 5vw, 64px);
  padding: clamp(30px, 4.5vw, 56px);
  background: var(--navy-2);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--red);
}
.capture__text .lede { margin-top: 18px; }
.capture__form { display: flex; flex-direction: column; gap: 12px; }
.capture__input {
  min-height: 54px;
  padding: 0 16px;
  color: var(--white);
  background: var(--navy);
  border: 1px solid var(--hairline-strong);
  transition: border-color 0.18s var(--ease);
}
.capture__input::placeholder { color: var(--text-mute); }
.capture__input:focus { border-color: var(--gold); }
.capture__go { min-height: 54px; }
.capture__note { font-size: 12.5px; color: var(--text-mute); }
.capture__msg:empty { display: none; }
.capture__msg { font-size: 13px; }
.capture__msg.is-error { color: #FF8080; }
.capture__msg.is-pending { color: var(--gold); }

/* --------------------------------------------------------------------------
   FINAL CTA
   -------------------------------------------------------------------------- */

.final { padding-block: clamp(56px, 8vw, 110px); text-align: center; }
.final__h {
  margin-top: clamp(24px, 4vw, 44px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(46px, 9vw, 108px);
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--white);
}
.final__sub {
  margin-top: 22px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(17px, 2.2vw, 22px);
  color: var(--text-dim);
}
.formats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  max-width: 780px;
  margin: clamp(36px, 5vw, 56px) auto 0;
  list-style: none;
}
.format {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 26px 20px;
  background: var(--navy-2);
  border: 1px solid var(--hairline);
}
.format__t {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white);
}
.format__p {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  color: var(--gold);
  line-height: 1.1;
}
.format__d {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-dim);
}
.format__b { margin-top: 14px; width: 100%; }
.final__note { margin-top: 30px; font-size: var(--fs-small); color: var(--text-dim); }
.final__note a { color: var(--gold); text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */

.foot {
  padding-block: 36px;
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-small);
  color: var(--text-mute);
}
.foot__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 26px;
}
.foot__brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.foot__brand span { color: var(--red); }
.foot__line { font-family: var(--font-serif); font-style: italic; color: var(--text-dim); }

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__cover { order: -1; justify-self: start; }
  .hero__cover img { width: clamp(150px, 40vw, 210px); }
  .dial { grid-template-columns: 1fr; }
  .dial__face { max-width: 260px; margin-inline: auto; }
  .author { grid-template-columns: 1fr; }
  .author__photo { max-width: 320px; }
  .capture { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .board { border-left-width: 2px; }
  .board__vals text { font-size: 13px; }
  .board__months text { font-size: 9.5px; letter-spacing: 0.1em; }
  .stage__b { padding-left: 0; }
  .stage__pause { padding-left: 0; }
  .console__go, .capture__go { width: 100%; }
}

/* --------------------------------------------------------------------------
   BOARD placement inside section 01 (moved out of the hero)
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   COVER in the final CTA — the one place the book is bought
   -------------------------------------------------------------------------- */

.final__cover { margin-top: clamp(28px, 4vw, 44px); }
.final__cover img {
  width: clamp(170px, 24vw, 260px);
  margin-inline: auto;
  border: 1px solid var(--hairline-strong);
  box-shadow: 0 30px 70px -22px rgba(0, 0, 0, 0.8);
}

/* --------------------------------------------------------------------------
   HERO VIDEO
   Two stacked copies of the same clip, crossfaded on a period equal to the
   clip duration and offset by half, so each copy's own loop cut is always
   hidden behind the other. Neither source was authored as a seamless loop.

   --loop is set per variant from the real measured duration.
   -------------------------------------------------------------------------- */

.hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  /* painted before the video decodes, so the hero never flashes black */
  background:
    radial-gradient(ellipse 90% 70% at 50% 30%, #16305c 0%, #0b1a33 45%, var(--navy) 78%);
}
.hero__vid {
  position: absolute;
  top: 50%; left: 50%;
  min-width: 100%; min-height: 100%;
  width: auto; height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  opacity: 0;
  animation: heroLoop var(--loop, 6s) linear infinite;
}
@keyframes heroLoop {
  0%   { opacity: 0; }
  12%  { opacity: 1; }
  50%  { opacity: 1; }
  62%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Contrast veil. The headline sits over the darkest part of this, which is
   what keeps white text at AA over moving video. */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Three layers, top to bottom:
     1. a scrim anchored under the copy column — guarantees contrast where the
        text actually is, so the video can stay visible on the right
     2. vertical falloff into the page background
     3. horizontal falloff, darkest at the left edge
     Worst case (a pure-white video pixel) measured through all three:
     gold eyebrow 7.4:1, --text-dim 5.8:1, white 16.3:1. All pass AA. */
  background:
    radial-gradient(ellipse 72% 88% at 22% 42%, rgba(7,16,32,0.75) 0%, rgba(7,16,32,0.30) 55%, transparent 74%),
    linear-gradient(180deg, rgba(7,16,32,0.78) 0%, rgba(7,16,32,0.42) 34%, rgba(7,16,32,0.66) 72%, var(--navy) 100%),
    linear-gradient(90deg, rgba(7,16,32,0.86) 0%, rgba(7,16,32,0.18) 52%, rgba(7,16,32,0.55) 100%);
}

.has-video .hero { position: relative; }
.has-video .hero__inner,
.has-video .hero-stage { position: relative; z-index: 2; }

/* No video: the ambient field carries it, no veil needed. */
.no-video .hero__veil { display: none; }

@media (prefers-reduced-motion: reduce) {
  /* Do not autoplay motion behind text. The gradient stands in. */
  .hero__vid { display: none; }
  .hero__veil {
    background: linear-gradient(180deg, rgba(7,16,32,0.72), rgba(7,16,32,0.92) 70%, var(--navy));
  }
}

/* --------------------------------------------------------------------------
   THE MATH — compounding, stated as two outcomes rather than one stat
   -------------------------------------------------------------------------- */

.math {
  margin-top: clamp(44px, 6vw, 76px);
  padding-top: clamp(28px, 3.4vw, 40px);
  border-top: 1px solid var(--hairline);
}
.math__lead {
  max-width: 62ch;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(18px, 2.2vw, 23px);
  line-height: 1.45;
  color: var(--text);
}
.math__pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  margin-top: clamp(24px, 3vw, 34px);
  background: var(--hairline);
  border: 1px solid var(--hairline);
  list-style: none;
}
.math__side {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(22px, 3vw, 32px);
  background: var(--navy-2);
}
.math__delta {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}
.math__val {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(46px, 7vw, 78px);
  line-height: 0.95;
  letter-spacing: -0.01em;
}
.math__side--up   .math__val { color: var(--gold); }
.math__side--down .math__val { color: var(--red-hot); }   /* 46px+ — large-text contrast */
.math__note {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
}
.math__foot {
  margin-top: clamp(20px, 2.6vw, 28px);
  max-width: 66ch;
  color: var(--text-dim);
}
.math__foot strong { color: var(--white); font-weight: 600; }

/* --------------------------------------------------------------------------
   WHAT YOU ACTUALLY GET
   -------------------------------------------------------------------------- */

.inside2 {
  margin-top: clamp(38px, 5vw, 56px);
  padding-top: clamp(26px, 3.2vw, 36px);
  border-top: 1px solid var(--hairline);
}
.inside2__h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 22px;
}
.inside2__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 14px clamp(28px, 4vw, 52px);
  list-style: none;
}
.inside2__list li {
  position: relative;
  padding-left: 24px;
  color: var(--text-dim);
  font-size: var(--fs-small);
  line-height: 1.6;
}
.inside2__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 5px; height: 5px;
  background: var(--gold);
  transform: rotate(45deg);
}
.inside2__list strong { color: var(--text); font-weight: 600; }

/* --------------------------------------------------------------------------
   FINAL CTA additions
   -------------------------------------------------------------------------- */

.final__whether {
  max-width: 68ch;
  margin: clamp(24px, 3.4vw, 40px) auto 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(18px, 2.3vw, 24px);
  line-height: 1.5;
  color: var(--text-dim);
}
.final__commit {
  margin-top: clamp(28px, 3.6vw, 40px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(16px, 2vw, 20px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Fallback when the browser will not run a second decoder: one copy, dipping
   to the gradient across its own loop cut. Set by site.js, never by hand. */
.hero__bg.is-single .hero__vid--a { animation-name: heroDip; }
@keyframes heroDip {
  0%   { opacity: 0.12; }
  7%   { opacity: 1; }
  93%  { opacity: 1; }
  100% { opacity: 0.12; }
}

/* Kit signup: native POST fallback, matching the existing site. */
#capture-form .formkit-fields { display: grid; gap: 12px; }
#capture-form .formkit-field { min-width: 0; }
#capture-form .capture__input { width: 100%; }
#capture-form .formkit-alert:empty { display: none; }
#capture-form .formkit-alert { padding: 16px; margin-bottom: 16px; list-style: none; border: 1px solid var(--gold); color: var(--text); background: var(--navy-2); }
#capture-form .formkit-alert-error:not(:empty) { border-color: var(--red); }
#capture-form .formkit-submit[data-active] { opacity: .75; cursor: wait; }
#capture-form .formkit-submit[data-active] span::after { content: ' …'; }
#capture-form .capture__kit { display: inline-block; margin-top: 12px; color: var(--text-dim); font-size: .875rem; }
#capture-form :focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }

/* Crop the scanned cover edge; draw one even border at every display size. */
.book-frame {
  display: block;
  position: relative;
  width: clamp(180px, 26vw, 320px);
  aspect-ratio: 5 / 8;
  overflow: hidden;
  border: 1px solid var(--white);
  box-shadow: 0 34px 80px -22px rgba(0,0,0,.85);
}
.hero__cover .book-frame img,
.final__cover .book-frame img {
  position: absolute;
  top: -.75%;
  left: -.75%;
  width: 101.5%;
  max-width: none;
  height: 101.5%;
  border: 0;
  margin: 0;
  box-shadow: none;
}
.final__cover .book-frame {
  width: clamp(170px, 24vw, 260px);
  margin-inline: auto;
}
@media (max-width: 900px) {
  .hero__cover .book-frame { width: clamp(150px, 40vw, 210px); }
}