/* Shared design system: collapse.html (the read) and kit.html (the kit).
   One file so the two pages cannot drift. */
:root{
  --ink:#080B16; --night:#0F1526; --raised:#171F36;
  --cream:#F4EDE3; --muted:#A7B0C8; --dim:#7C87A3;
  --gold:#E9B96B; --gold-hi:#F3CE8E; --dawn:#F0A278;
  --line:rgba(244,237,227,.13); --line-hi:rgba(233,185,107,.34);
  --arch:120px 120px 14px 14px;
  --pad:22px; --shell:min(560px, 100% - var(--pad)*2);
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
/* An author `display` on a view class outranks the UA stylesheet's
   [hidden]{display:none}, which silently un-hides a toggled view.
   .gateview sets display:flex and leaked the whole email step onto
   the landing page. Enforce the attribute for every future case. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink); color:var(--cream);
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:17px; line-height:1.55; letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
button{font:inherit; color:inherit; cursor:pointer}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:6px}

.shell{width:var(--shell); margin-inline:auto}
.stack>*+*{margin-top:var(--gap,18px)}

/* ── the five disguises: a swipeable strip, not a wall of text ── */
.strip{display:flex; gap:12px; margin-top:20px; padding:2px var(--pad) 6px;
  margin-inline:calc(var(--pad)*-1); overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.strip figure{flex:0 0 43%; margin:0; scroll-snap-align:center}
.strip img{width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; border-radius:70px 70px 12px 12px;
  box-shadow:inset 0 0 0 1px var(--line-hi)}
.strip figcaption{margin-top:11px}
.strip figcaption b{display:block; font-size:15px; font-weight:800; letter-spacing:-.02em; color:var(--cream)}
.strip figcaption span{display:block; margin-top:3px; font-size:13px; line-height:1.4; color:var(--dim)}
@media(min-width:620px){ .strip{overflow:visible} .strip figure{flex:1 1 0} }

/* ── his creed: twelve words that replace three paragraphs ── */
.creed{margin:34px 0 0; padding:20px 0 0; border-top:1px solid var(--line)}
/* Two columns so "what it is not" and "what it is" line up, and so the middle
   line cannot wrap and break the parallel structure. */
/* Stacked pairs on phones: two columns squeezed "From remembering." onto a
   second line and broke the parallel structure. Side by side from 480px up. */
.creed p{display:grid; gap:1px; letter-spacing:-.02em}
.creed p+p{margin-top:11px; padding-top:11px; border-top:1px solid var(--line)}
.creed p span{font-size:14px; font-weight:600; color:var(--dim)}
.creed p b{font-size:19px; font-weight:800; line-height:1.25; color:var(--gold-hi)}
@media(min-width:480px){
  .creed p{grid-template-columns:auto 1fr; gap:12px; align-items:baseline}
  .creed p span{font-size:16px}
}
.creed cite{display:block; margin-top:12px; font-size:12px; font-style:normal;
  font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--dim)}

/* ── his three phases ─────────────────────────────────── */
.phases{margin:18px 0 0; padding:0; list-style:none; counter-reset:ph}
.phases li{position:relative; padding:0 0 0 44px; counter-increment:ph}
.phases li+li{margin-top:16px}
.phases li::before{content:counter(ph); position:absolute; left:0; top:1px;
  width:29px; height:29px; border-radius:50%; display:grid; place-items:center;
  font-size:13px; font-weight:800; color:var(--gold);
  box-shadow:inset 0 0 0 1px var(--line-hi)}
.phases b{display:block; font-size:17px; font-weight:800; letter-spacing:-.02em; color:var(--cream)}
.phases span{display:block; margin-top:3px; font-size:15px; line-height:1.5; color:var(--muted)}

/* ── header ─────────────────────────────────────────── */
.top{padding:18px 0 6px}
.lockup{display:flex; align-items:center; gap:12px; min-height:44px; text-decoration:none; color:inherit}
.lockup img{width:42px; height:42px; border-radius:11px; flex:none}
.lockup .wm{display:block; font-size:17px; font-weight:800; letter-spacing:.24em; line-height:1; color:var(--cream)}
.lockup .sub{display:block; margin-top:6px; font-size:12px; font-weight:600; letter-spacing:.13em; color:var(--dim); line-height:1}

/* ── type scale ─────────────────────────────────────── */
h1,h2,h3{margin:0; font-weight:800; letter-spacing:-.035em; line-height:1.05}
h1{font-size:clamp(38px,10.6vw,54px)}
h2{font-size:clamp(27px,7.4vw,36px); line-height:1.12}
h3{font-size:19px; letter-spacing:-.02em; line-height:1.25}
p{margin:0}
.lede{font-size:18px; line-height:1.5; color:var(--muted)}
.eyebrow{font-size:12px; font-weight:700; letter-spacing:.2em; color:var(--gold); text-transform:uppercase}
.small{font-size:13.5px; line-height:1.5; color:var(--dim)}
b{font-weight:700; color:var(--gold-hi)}

/* ── arch: the signature shape, from Kevin's cover ──── */
.arch{position:relative; border-radius:var(--arch); overflow:hidden; background:var(--night);
      box-shadow:inset 0 0 0 1px var(--line-hi)}
.arch>img{width:100%; height:100%; object-fit:cover}
/* The image dissolves into the page instead of ending on a hard edge. Reaching
   full ink at 90% also buries the bottom of the inset hairline, so only the
   arch's top curve reads as a drawn edge. */
.arch::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom,rgba(8,11,22,0) 50%,rgba(8,11,22,.6) 76%,var(--ink) 90%)}

/* ── buttons ────────────────────────────────────────── */
.cta{display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  min-height:60px; padding:17px 24px; border:0; border-radius:999px;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold)); color:#1A1206;
  font-size:17px; font-weight:800; letter-spacing:-.015em; text-decoration:none;
  box-shadow:0 10px 30px -10px rgba(233,185,107,.5); transition:transform .15s, box-shadow .15s}
.cta:active{transform:scale(.985); box-shadow:0 6px 18px -10px rgba(233,185,107,.5)}
.cta .arrow{font-size:19px; line-height:1}
/* .ghost is a bordered pill, so the UA's default anchor underline reads as a
   rendering fault rather than a link affordance. The border is the affordance. */
.ghost{display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:11px 20px;
  background:none; border:1px solid var(--line); border-radius:999px; color:var(--muted);
  font-size:14px; font-weight:600; text-decoration:none}

/* ── landing ────────────────────────────────────────── */
.hero{margin-top:10px}
.hero .arch{aspect-ratio:1/1}
.hero-copy{position:relative; margin-top:-34px; text-align:center}
.hero h1 .em{color:var(--gold-hi)}
.hero .lede{margin-top:13px}
.hero-act{margin-top:24px}
.reassure{display:flex; flex-wrap:wrap; gap:6px 16px; justify-content:center; margin-top:14px}
.reassure span{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--dim)}
.dot{width:4px; height:4px; border-radius:50%; background:var(--gold); flex:none}

.tried{margin-top:34px; padding:20px; border:1px solid var(--line); border-radius:20px; background:var(--night)}
.tried .eyebrow{color:var(--dim)}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.chips i{font-style:normal; font-size:13px; font-weight:600; color:var(--muted);
  padding:7px 13px; border:1px solid var(--line); border-radius:999px}
.tried p{margin-top:14px; font-size:16px; line-height:1.45; color:var(--cream); font-weight:600}

.who{display:flex; align-items:center; gap:14px; margin-top:30px; padding:16px 18px;
  border:1px solid var(--line); border-radius:20px; background:var(--night)}
.who img{width:52px; height:52px; border-radius:50%; flex:none; box-shadow:0 0 0 1px var(--line-hi)}
.who .n{font-size:15px; font-weight:700}
.who .r{font-size:13px; color:var(--dim); margin-top:2px}

/* ── quiz ───────────────────────────────────────────── */
.quiz-wrap{min-height:100svh; display:flex; flex-direction:column; padding-bottom:calc(20px + var(--safe-b))}
.quiz-top{padding:16px 0 20px}
.bar{display:flex; align-items:center; gap:14px}
.icon-btn{width:44px; height:44px; flex:none; display:grid; place-items:center;
  background:none; border:1px solid var(--line); border-radius:50%; color:var(--muted)}
.track{flex:1; height:5px; border-radius:99px; background:rgba(244,237,227,.09); overflow:hidden}
.fill{height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg,var(--gold),var(--dawn)); transition:width .45s cubic-bezier(.4,0,.2,1)}
.count{font-size:12px; font-weight:700; letter-spacing:.1em; color:var(--dim); flex:none; min-width:38px; text-align:right}
/* Anchored to the top rather than centred. Centring split every difference in
   answer-block height between the top and bottom offsets, so the tap targets
   walked a few px up and down between questions. With a fixed title reserve and
   a viewport-proportional top pad, the answer list lands at the same y every
   time and only the empty space below changes. */
.quiz-main{flex:1; display:flex; flex-direction:column; justify-content:flex-start;
  padding-top:clamp(16px,17svh,150px); padding-bottom:8px}
/* Two title lines reserved, not three: every stem now fits two lines at 375px, so
   the answer block keeps a constant y between questions without wasting a line. */
.q-title{min-height:2.25em; display:flex; align-items:flex-end; font-size:clamp(26px,6.9vw,34px)}
.q-title:focus{outline:none}
/* Route-change focus targets: announced, not ringed. */
h1[tabindex='-1']:focus,h1[tabindex='-1']:focus-visible{outline:none}
.answers{margin-top:26px; display:flex; flex-direction:column; gap:12px}
.answer{display:flex; align-items:center; gap:14px; width:100%; min-height:66px; text-align:left;
  padding:14px 18px; background:var(--night); border:1px solid var(--line); border-radius:17px;
  font-size:17px; font-weight:600; line-height:1.3; color:var(--cream);
  transition:border-color .18s, background .18s, transform .12s}
.answer .ltr{width:26px; height:26px; flex:none; display:grid; place-items:center; border-radius:50%;
  border:1.5px solid rgba(244,237,227,.22); font-size:0; transition:all .18s}
.answer .ltr::after{content:''; width:9px; height:9px; border-radius:50%; background:transparent; transition:background .18s}
.answer .tx{flex:1}
.answer:active{transform:scale(.99)}
.answer.chosen{border-color:var(--gold); background:rgba(233,185,107,.11)}
.answer.chosen .ltr{border-color:var(--gold)}
.answer.chosen .ltr::after{background:var(--gold)}
.answer.chosen .ltr{background:var(--gold); color:#1A1206}
@media (hover:hover){.answer:hover{border-color:var(--line-hi)}}
.q-stage{animation:rise .34s cubic-bezier(.2,.7,.3,1) both}
@keyframes rise{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}

/* ── result ─────────────────────────────────────────── */
.rhero{margin-top:10px}
.rhero .arch{aspect-ratio:1/1}
.rhero .cap{position:relative; margin-top:-34px; text-align:center}
.rhero .eyebrow{margin-bottom:9px; display:block}
.rhero h1{font-size:clamp(40px,11.4vw,58px)}
.rhero .line{margin-top:13px; font-size:17px; line-height:1.45; color:var(--muted)}
.meta{margin-top:16px; font-size:12.5px; line-height:1.5; color:var(--dim); text-align:center}

section.blk{padding:44px 0}
section.blk+section.blk{border-top:1px solid var(--line)}

.recog{display:flex; flex-direction:column; gap:10px; margin-top:18px}
.recog p{display:flex; gap:12px; padding:15px 17px; background:var(--night); border-radius:16px;
  border:1px solid var(--line); font-size:15.5px; line-height:1.45; color:#DDE3F0}
.recog p::before{content:''; width:7px; height:7px; margin-top:8px; flex:none; border-radius:50%;
  background:var(--gold); box-shadow:0 0 0 4px rgba(233,185,107,.14)}
.mech{margin-top:16px; display:flex; flex-direction:column; gap:13px}
.mech p{font-size:16.5px; line-height:1.55; color:var(--muted)}
.stance{margin-top:22px; padding:18px 20px; border-radius:18px; border:1px solid var(--line-hi);
  background:linear-gradient(150deg,rgba(233,185,107,.12),rgba(240,162,120,.05));
  font-size:16.5px; line-height:1.45; font-weight:600; color:var(--cream)}

/* ── the kit preview: show it, don't describe it ────── */
/* The two note cards sit in front of the phone (z-index 3) and overlap its
   edge by ~22px. In front, not behind: tucking them behind let the phone clip
   their own text. They are seated clear of the play button and the caption. */
.kit-stage{position:relative; margin:26px auto 0; width:min(330px,100%); aspect-ratio:1/1;
  display:grid; place-items:center}
.phone{position:relative; width:138px; aspect-ratio:9/17.5; border-radius:24px; z-index:2;
  background:var(--ink); box-shadow:0 0 0 2px rgba(244,237,227,.2), 0 26px 50px -18px rgba(0,0,0,.9);
  overflow:hidden; transform:rotate(-4deg); animation:float 7s ease-in-out infinite}
.phone img{width:100%; height:100%; object-fit:cover; opacity:.78}
.phone .scrim{position:absolute; inset:0; background:linear-gradient(to bottom,rgba(8,11,22,.1),rgba(8,11,22,.85))}
.phone .play{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:46px; height:46px; border-radius:50%; background:var(--gold); display:grid; place-items:center;
  box-shadow:0 0 0 8px rgba(233,185,107,.16)}
.phone .play svg{width:16px; height:16px; margin-left:2px; fill:#1A1206}
.phone .lbl{position:absolute; left:12px; right:12px; bottom:12px; font-size:9px; font-weight:700;
  letter-spacing:.06em; color:var(--cream); line-height:1.35}
.pcard{position:absolute; width:118px; padding:12px 13px; border-radius:14px; z-index:3;
  background:linear-gradient(160deg,#FBF4E9,#EFE2CE); color:#221A0E;
  box-shadow:0 18px 34px -14px rgba(0,0,0,.85)}
.pcard .t{font-size:10px; font-weight:800; letter-spacing:.1em; color:#6E4E12; text-transform:uppercase}
.pcard .d{margin-top:5px; font-size:11.5px; font-weight:600; line-height:1.3}
.pcard.a{left:0; top:12%; transform:rotate(-11deg)}
/* bottom:26% keeps card b above the phone's caption. It never meets the play
   button because the two do not overlap horizontally at any supported width. */
.pcard.b{right:0; bottom:26%; transform:rotate(8deg)}
@keyframes float{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(-4deg) translateY(-9px)}}

.kit-list{margin-top:26px; display:flex; flex-direction:column; gap:11px}
.kit-list li{display:flex; gap:13px; align-items:flex-start; list-style:none;
  padding:14px 16px; border:1px solid var(--line); border-radius:16px; background:var(--night)}
.kit-list .num{width:26px; height:26px; flex:none; display:grid; place-items:center; border-radius:50%;
  background:rgba(233,185,107,.16); color:var(--gold-hi); font-size:12px; font-weight:800}
.kit-list .h{font-size:15px; font-weight:700; line-height:1.3}
.kit-list .s{margin-top:3px; font-size:13.5px; line-height:1.45; color:var(--dim)}

/* ── the return kit panel ──────────────────────────────
   The page inverts to cream here. Every other section on the site is ink, so
   this one physically interrupts the scroll instead of joining it. It is the
   only block a skimming visitor cannot slide past without noticing. */
.kitpanel{margin-top:10px; padding:14px 0 48px; color:#1B1509;
  background:linear-gradient(172deg,#FBF4E9,#EFE0C9)}
.kitpanel .eyebrow{color:#7A5000}
.kitpanel h2{color:#15100A}
.kitpanel .sub{margin-top:12px; font-size:16.5px; line-height:1.5; color:#5B4A2E}
/* A torn top edge: the cream sheet reads as laid over the page, not as another
   band in the same stack. */
.kitpanel::before{content:''; display:block; height:5px; margin-bottom:30px;
  background:linear-gradient(90deg,var(--gold),var(--dawn))}
.kitpanel .kit-stage{margin-top:24px}
/* Inverted for the cream ground: cream-on-cream note cards disappeared. */
.kitpanel .pcard{background:linear-gradient(158deg,#141B2E,#0A0F1E); color:var(--cream);
  box-shadow:0 18px 32px -14px rgba(27,21,9,.6)}
.kitpanel .pcard .t{color:var(--gold)}
.kitpanel .phone{box-shadow:0 0 0 2px rgba(27,21,9,.24), 0 26px 48px -18px rgba(27,21,9,.65)}
.kitpanel .kit-list li{background:rgba(255,255,255,.66); border-color:rgba(27,21,9,.13)}
.kitpanel .kit-list .num{background:#15100A; color:var(--gold-hi)}
.kitpanel .kit-list .h{color:#15100A}
.kitpanel .kit-list .s{color:#5F4E32}
.kitpanel input[type=email]{background:#fff; border-color:rgba(27,21,9,.2); color:#15100A}
.kitpanel input[type=email]::placeholder{color:#8B7A5C}
.kitpanel input[type=email]:focus{border-color:#15100A; background:#fff}
.kitpanel .cta{background:linear-gradient(180deg,#241A08,#100A02); color:var(--gold-hi);
  box-shadow:0 14px 30px -12px rgba(27,21,9,.55)}
.kitpanel .note{color:#6B5A3C}
.kitpanel .err{color:#96280A}
.kitpanel :focus-visible{outline-color:#15100A}

/* Two real client messages, sat next to the ask they support. */
.vouch{margin-top:24px; display:flex; flex-direction:column; gap:10px}
.vouch figure{margin:0; padding:14px 16px; border-radius:15px;
  background:rgba(255,255,255,.6); border:1px solid rgba(27,21,9,.12)}
.vouch blockquote{margin:0; font-size:14.5px; line-height:1.5; color:#2A2110}
.vouch figcaption{margin-top:8px; font-size:12px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:#8A5A00}

form{margin-top:24px}
.field{display:flex; flex-direction:column; gap:11px}
input[type=email]{width:100%; min-height:60px; padding:16px 19px; font-size:16px; font-weight:500;
  color:var(--cream); background:var(--night); border:1px solid var(--line); border-radius:16px;
  font-family:inherit; -webkit-appearance:none}
input[type=email]::placeholder{color:var(--dim)}
input[type=email]:focus{outline:none; border-color:var(--gold); background:var(--raised)}
.err{display:none; font-size:13.5px; color:var(--dawn)}
.err.on{display:block}
.note{margin-top:12px; font-size:12.5px; line-height:1.5; color:var(--dim); text-align:center}

.sent{display:none; padding:18px 20px; border-radius:18px; border:1px solid var(--line-hi);
  background:rgba(233,185,107,.09)}
.sent.on{display:block}
.sent .h{font-size:16px; font-weight:700}
.sent .s{margin-top:6px; font-size:14px; line-height:1.5; color:var(--muted); overflow-wrap:anywhere}
.linkish{display:inline-flex; align-items:center; min-height:44px; background:none; border:0; padding:0;
  font-size:14px; font-weight:600; color:var(--gold); text-decoration:underline; text-underline-offset:3px}

.delivery{display:none}
.delivery.on{display:block}
.player{margin-top:16px; border-radius:16px; overflow:hidden; background:#000; aspect-ratio:16/9;
  box-shadow:0 0 0 1px var(--line)}
.player iframe{width:100%; height:100%; border:0; display:block}
.rcard{margin-top:16px; padding:20px; border-radius:18px;
  background:linear-gradient(160deg,#FBF4E9,#EFE2CE); color:#221A0E}
.rcard .t{font-size:12px; font-weight:800; letter-spacing:.15em; color:#6E4E12; text-transform:uppercase}
.rcard h3{margin-top:4px; color:#221A0E}
.rcard .row{margin-top:14px}
.rcard .row+.row{padding-top:14px; border-top:1px solid rgba(34,26,14,.14)}
.rcard .k{font-size:12px; font-weight:800; letter-spacing:.1em; color:#6B4B10; text-transform:uppercase}
.rcard .v{margin-top:5px; font-size:15px; line-height:1.45; font-weight:500}

/* ── offer ──────────────────────────────────────────── */
.offer{padding:44px 0 0}
.price{display:flex; align-items:baseline; gap:9px; margin-top:16px}
.price .n{font-size:40px; font-weight:800; letter-spacing:-.04em}
.price .p{font-size:14px; color:var(--dim)}
.incl{margin-top:20px; display:flex; flex-direction:column; gap:10px; padding:0}
.incl li{display:flex; gap:11px; list-style:none; font-size:15.5px; line-height:1.45; color:#DDE3F0}
.incl li::before{content:''; width:18px; height:18px; margin-top:2px; flex:none; border-radius:50%;
  background:rgba(233,185,107,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E9B96B' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat}
.terms{margin-top:20px; padding:16px 18px; border:1px solid var(--line); border-radius:16px; background:var(--night)}
.terms p{font-size:13px; line-height:1.55; color:var(--dim)}
.terms p+p{margin-top:8px}
.disclose{margin-top:16px; font-size:12.5px; line-height:1.55; color:var(--dim)}
.offer-act{margin-top:20px}

/* The fallback offer. Deliberately quieter than the block above it: no gold
   rule, no filled button, smaller heading. A second offer at equal weight is
   not a ladder, it is a fork, and a fork on a page this long loses both. */
.alt{margin-top:30px; padding:20px; border:1px dashed var(--line); border-radius:18px}
.alt .eyebrow{display:block; color:var(--dim)}
.alt h3{margin-top:8px; font-size:19px; font-weight:700; letter-spacing:-.02em; color:var(--cream)}
.alt p{margin-top:9px; font-size:14.5px; line-height:1.55; color:var(--muted)}
.alt .ghost{margin-top:15px}

footer{margin-top:44px; padding:24px 0 calc(30px + var(--safe-b)); border-top:1px solid var(--line)}
.frow{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px 18px}
.frow a,.frow button{display:inline-flex; align-items:center; min-height:44px; padding:0 4px;
  font-size:13px; color:var(--dim); text-decoration:none}
.frow a:hover{color:var(--muted)}
.ph{margin-top:8px; text-align:center; font-size:12.5px; line-height:1.5; color:#8A94AE}

.badge{display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px;
  border:1px solid var(--line); font-size:12px; font-weight:700; letter-spacing:.09em;
  color:var(--dim); text-transform:uppercase}

.reveal{opacity:0; transform:translateY(18px)}
.reveal.in{opacity:1; transform:none; transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important}
  .reveal{opacity:1; transform:none}
}
@media (min-width:620px){
  :root{--pad:32px}
  body{font-size:18px}
  .hero .arch,.rhero .arch{aspect-ratio:1/1}
  .kit-stage{width:340px}
}

/* ══ kit.html ══════════════════════════════════════════
   The delivery page. Its own URL, its own Back step, and nothing on screen
   competing with the session the visitor just asked for. */
.kithead{padding:20px 0 0}
.delivered{display:flex; align-items:center; gap:10px; margin-top:22px; padding:13px 16px;
  border-radius:14px; border:1px solid var(--line-hi); background:rgba(233,185,107,.09)}
.delivered .tick{width:22px; height:22px; flex:none; border-radius:50%; background:var(--gold);
  display:grid; place-items:center}
.delivered .tick svg{width:12px; height:12px; stroke:#1A1206; stroke-width:3.6; fill:none}
.delivered .t{font-size:14px; line-height:1.4; color:var(--muted); overflow-wrap:anywhere}
.delivered .t b{color:var(--cream); font-weight:700}

.kitmain{padding:26px 0 8px}
.kitmain h1{font-size:clamp(31px,8.2vw,42px)}
.kitmain .player{margin-top:20px}

/* ── proof: real messages, swipe one at a time ────────
   Full-width cards rather than a grid of thumbnails. A 43% tile is unreadable
   on a phone, and an unreadable receipt proves nothing. */
.proof{padding:44px 0}
.pulls{display:flex; flex-direction:column; gap:10px; margin-top:18px}
.pulls figure{margin:0; padding:16px 18px; border-radius:16px; background:var(--night);
  border:1px solid var(--line)}
.pulls blockquote{margin:0; font-size:16px; line-height:1.5; color:#DDE3F0}
.pulls figcaption{margin-top:9px; font-size:12px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dim)}
.shots{display:flex; gap:12px; margin-top:22px; padding:2px var(--pad) 8px;
  margin-inline:calc(var(--pad)*-1); overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none}
.shots::-webkit-scrollbar{display:none}
/* Cards share a WIDTH, and height follows the message. Normalising every receipt
   to 4:5 upstream meant a screenshot whose message ended at 0.93 got trimmed a
   second time by object-fit, which cut "positivity." off mid-thought. Levelling
   on height instead would squeeze a long conversation into a narrow column and
   shrink its text below reading size. Uniform width keeps type legible at the
   same scale on every card and lets each message end where it actually ends. */
/* Uniform width means heights differ (353px to 595px here), and the scroller is
   as tall as its tallest card. Aligned to the start, a short receipt left up to
   240px of dead space beneath it that read as a clipped tile. Centred, the slack
   splits above and below and reads as deliberate framing. */
.shots{align-items:center}
.shots figure{flex:0 0 88%; margin:0; scroll-snap-align:center}
/* Some receipts are dark-mode screenshots, which otherwise dissolve into the page
   and stop reading as a separate object. The ring plus drop keeps every card an
   edged thing you can see the boundary of, light or dark. */
.shots img{display:block; width:100%; height:auto;
  border-radius:16px; border:1px solid rgba(244,237,227,.18);
  box-shadow:0 10px 28px rgba(0,0,0,.45)}
.shots figcaption{margin-top:10px; font-size:13px; line-height:1.45; color:var(--dim)}
.shotnav{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:6px}
.dots{display:flex; gap:6px; flex-wrap:wrap}
.dots i{width:6px; height:6px; border-radius:50%; background:rgba(244,237,227,.24); transition:background .2s}
.dots i.on{background:var(--gold)}
.shotcount{font-size:12px; font-weight:700; letter-spacing:.1em; color:var(--dim); flex:none}
.consent{margin-top:18px; font-size:12.5px; line-height:1.55; color:#8A94AE}

/* ── the ask, at the bottom, after the value has landed ── */
.kitoffer{padding:44px 0 0; border-top:1px solid var(--line)}
@media (min-width:620px){ .shots figure{flex:0 0 62%} }

/* ══════════════════════════════════════════════════════════
   THE LONG LANDER (story.html)
   A second cold-traffic route alongside the quiz. Same tokens,
   same components; what is new here is the video block, the FAQ,
   and a wider reading measure for long-form argument.
   ══════════════════════════════════════════════════════════ */

/* Long-form reads better slightly wider than the quiz's 560px. */
.lander{--shell:min(620px, 100% - var(--pad)*2)}

/* Section rhythm. Alternating hairlines rather than boxes, so the page
   reads as one continuous argument instead of a stack of cards. */
.lander section.blk{padding:46px 0; border-top:1px solid var(--line)}
.lander section.blk:first-of-type{border-top:0}

/* Numbered section marks — the evidence spine, carried over. */
.mark{display:flex; align-items:center; gap:10px; margin-bottom:14px}
.mark i{font-style:normal; font-size:12px; font-weight:800; letter-spacing:.16em;
  color:var(--ink); background:linear-gradient(160deg,var(--gold-hi),var(--gold));
  border-radius:5px; padding:3px 7px; flex:none}
.mark span{font-size:12px; font-weight:800; letter-spacing:.19em;
  text-transform:uppercase; color:var(--dim)}

/* ── video testimonial block ───────────────────────────── */
.vid{margin-top:20px}
.vid figure{margin:0}
.vidframe{position:relative; border-radius:16px; overflow:hidden;
  border:1px solid var(--line-hi); background:#0A0D18;
  box-shadow:0 16px 40px rgba(0,0,0,.5)}
/* aspect-ratio on the wrapper, not the video, so the box never collapses
   before metadata loads and never jumps when it does. */
.vidframe{aspect-ratio:16/9}
.vidframe video{width:100%; height:100%; display:block; object-fit:cover; background:#0A0D18}

/* The native control bar is drawn over the poster while the clip is paused,
   and it occupies roughly 55%-90% of the frame height. These are Zoom windows,
   so the speaker sits low: on Aida's clip the bar landed straight across her
   eyes and mouth, which is the whole point of a testimonial thumbnail. Ship
   the poster clean behind one large play target and hand control back to the
   browser the moment the clip starts. */
/* The affordance sits in the bottom-left corner, never the middle. A centred
   disc is the convention, but every one of these clips is a video call framed
   on one speaker, so the middle of the frame IS the face. A translucent disc
   there reads as a redaction blur, which is the opposite of what a testimonial
   thumbnail is for. The whole frame stays tappable; only the visual marker
   moves out of the way. */
.vplay{position:absolute; inset:0; width:100%; height:100%; border:0; padding:0;
  cursor:pointer; color:var(--cream);
  background:linear-gradient(180deg,rgba(6,8,14,0) 52%,rgba(6,8,14,.72) 100%)}
/* No backdrop-filter: it promotes ::before into the positioned-descendants
   paint layer, which draws it over the static ::after and swallows the
   triangle entirely. */
.vplay::before{content:""; position:absolute; left:13px; bottom:13px;
  width:54px; height:36px; border-radius:999px;
  background:linear-gradient(180deg,#F6C86A,#E0A63C);
  box-shadow:0 6px 18px rgba(0,0,0,.5)}
.vplay::after{content:""; position:absolute; left:33px; bottom:23px;
  width:0; height:0;
  border-left:13px solid #0B0E16;
  border-top:8px solid transparent; border-bottom:8px solid transparent}
.vplay:hover::before{background:linear-gradient(180deg,#FFD98A,#EDB44C)}
.vplay:focus-visible{outline:3px solid var(--gold); outline-offset:-3px}
.vidframe.playing .vplay{display:none}
@media (prefers-reduced-motion:reduce){.vplay{transition:none}}
.vidmeta{display:flex; align-items:flex-start; gap:11px; margin-top:13px}
.vidmeta .who2{flex:1; min-width:0}
.vidmeta .who2 b{display:block; font-size:15px; font-weight:800; letter-spacing:-.02em; color:var(--cream)}
.vidmeta .who2 span{display:block; margin-top:2px; font-size:13px; line-height:1.45; color:var(--dim)}
.vidmeta .len{flex:none; font-size:12.5px; font-weight:800; letter-spacing:.1em;
  color:var(--dim); border:1px solid var(--line); border-radius:999px; padding:4px 9px}

/* The pulled line sits above the player: the visitor should know what they
   are about to hear before deciding to spend ninety seconds on it. */
.vpull{margin:0 0 16px; padding:0 0 0 16px; border-left:2px solid var(--gold);
  font-size:19px; line-height:1.42; font-weight:600; letter-spacing:-.02em; color:var(--gold-hi)}
.vpull cite{display:block; margin-top:8px; font-size:12.5px; font-style:normal;
  font-weight:700; letter-spacing:.06em; color:var(--dim)}
@media (min-width:560px){ .vpull{font-size:21px} }

/* ── video wall ────────────────────────────────────────────
   Stacked video proof. One column on a phone so a clip is never
   smaller than it needs to be to read a face; two up once there is
   room. Each card carries its own pulled line, because a visitor
   decides whether to spend thirty seconds before they press play. */
.vwall{display:grid; gap:26px; margin-top:22px}
@media (min-width:680px){
  .vwall{grid-template-columns:1fr 1fr; gap:24px; grid-template-rows:auto auto auto}
  /* Side by side, the two pull-quotes wrap to different line counts, so the
     videos started 26px apart and the row read as sloppy. Subgrid hands the
     card's three parts to the parent's rows, so quote/frame/meta each share a
     baseline across both columns. Without subgrid support this is ignored and
     the layout falls back to today's behaviour rather than breaking. */
  .vcard{display:grid; grid-row:span 3; grid-template-rows:subgrid; gap:0}
}
.vcard{margin:0; min-width:0}
.vcard .vpull{font-size:17px; margin-bottom:13px}
@media (min-width:560px){ .vcard .vpull{font-size:18px} }
.vcard .vidmeta{margin-top:11px}
/* Same source, two moments. Saying so on the card is more honest than letting
   two clips of one person imply two people. */
.vsame{margin-top:14px; font-size:12.5px; line-height:1.55; color:#8A94AE}

/* The honest capture slot is defined once, further down with the lander's
   components; inside a vwall column it only needs to relax its fixed 16:9 so
   the brief is not clipped when the column is narrow. */
.vwall .vidslot{aspect-ratio:auto; min-height:190px}
.vwall .vfull{grid-column:1/-1}

/* ── public posts ──────────────────────────────────────────
   Facebook posts are landscape, so they cannot ride in the receipt
   strip without being cropped to a column. They get their own block
   at natural ratio. Light cards on a dark page, as they appear. */
.posts{display:grid; gap:14px; margin-top:20px}
.posts figure{margin:0}
.posts img{display:block; width:100%; height:auto; border-radius:12px;
  border:1px solid rgba(244,237,227,.16); box-shadow:0 10px 28px rgba(0,0,0,.45)}
.posts figcaption{margin-top:9px; font-size:13px; line-height:1.45; color:var(--dim)}

/* ── FAQ ───────────────────────────────────────────────── */
.faq{margin-top:8px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; padding:16px 34px 16px 0; position:relative;
  font-size:16.5px; font-weight:700; letter-spacing:-.02em; color:var(--cream)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:''; position:absolute; right:6px; top:50%; width:9px; height:9px;
  margin-top:-6px; border-right:2px solid var(--gold); border-bottom:2px solid var(--gold);
  transform:rotate(45deg); transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg); margin-top:-2px}
.faq .a{padding:0 0 18px; font-size:15.5px; line-height:1.6; color:var(--muted)}
.faq .a p+p{margin-top:10px}

/* ── mid-page route into the quiz ──────────────────────── */
.route{margin-top:22px; padding:20px; border-radius:14px;
  background:linear-gradient(165deg,rgba(233,185,107,.10),rgba(233,185,107,.03));
  border:1px solid var(--line-hi)}
.route p{margin:0 0 14px; font-size:16px; line-height:1.5; color:var(--cream)}
.route .cta{width:100%}

/* ── closing ask ───────────────────────────────────────── */
.close-ask{padding:46px 0 0; border-top:1px solid var(--line)}

/* Sticky bar: on a page this long the CTA must never be more than a thumb away.
   Appears only after the visitor has passed the first proof block. */
.stickycta{position:fixed; left:0; right:0; bottom:0; z-index:40;
  padding:10px var(--pad) calc(10px + var(--safe-b));
  background:linear-gradient(to top,rgba(8,11,22,.98) 62%,rgba(8,11,22,0));
  transform:translateY(120%); transition:transform .28s ease; pointer-events:none}
.stickycta.on{transform:translateY(0); pointer-events:auto}
.stickycta .cta{width:min(620px,100% - 0px); margin-inline:auto; display:flex}
@media (prefers-reduced-motion:reduce){ .stickycta{transition:none} }

/* Honest empty state for footage Kevin has not recorded yet. Deliberately not
   a fake player: a play button that does nothing teaches the visitor the page
   is broken, and teaches Kevin the slot is already filled. */
.vidslot{aspect-ratio:16/9; border-radius:16px; display:flex; flex-direction:column;
  align-items:flex-start; justify-content:center; gap:9px; padding:24px;
  border:1px dashed rgba(233,185,107,.42);
  background:repeating-linear-gradient(135deg,rgba(244,237,227,.028) 0 12px,transparent 12px 24px),#0A0D18}
.vidslot .t{margin:0; font-size:19px; font-weight:800; letter-spacing:-.02em; color:var(--cream)}
.vidslot .d{margin:0; font-size:14.5px; line-height:1.5; color:var(--muted); max-width:44ch}

/* ══ THE GATE ═══════════════════════════════════════════
   Q5 now ends here rather than on the result. The visitor has answered
   five questions, so the screen owes them proof that a specific answer
   exists before it asks for anything. The seal shows their own matched
   image behind glass: the shape is visible, the name is not. */
.gateview{min-height:100svh; display:flex; flex-direction:column}
.gatepanel{flex:1; padding:16px 0 calc(40px + var(--safe-b)); color:#1B1509;
  background:radial-gradient(120% 80% at 50% 0%,#FBF6EE,#EFE5D6 62%,#E7DAC7)}
.gatepanel::before{content:''; display:block; height:5px; margin-bottom:24px;
  background:linear-gradient(90deg,var(--gold),var(--dawn))}
.gatepanel .eyebrow{color:#7A5000}
.gatepanel h1{color:#15100A; font-size:clamp(31px,8.2vw,40px); margin-top:9px}
.gatepanel .sub{margin-top:12px; font-size:16.5px; line-height:1.5; color:#5B4A2E}

/* The seal. The matched image is blurred rather than replaced, so what is
   waiting is genuinely theirs and not a stock lock icon. */
.seal{position:relative; margin:24px auto 0; width:min(268px,74%); aspect-ratio:4/5;
  border-radius:78px 78px 14px 14px; overflow:hidden; background:#1A2136;
  box-shadow:0 0 0 1px rgba(27,21,9,.16), 0 26px 52px -20px rgba(27,21,9,.6)}
/* The pattern art is deliberately dark: mean luminance is 27/255. Blur averages
   its one warm highlight away, so at the source exposure the seal renders as a
   black slab and the whole "your image is behind this" idea is invisible. The
   image is lifted hard here to buy back a readable shape. */
.seal img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:blur(10px) saturate(1.35) brightness(2.1) contrast(.92); transform:scale(1.18)}
/* The scrim is a centred vignette, not a blanket. It only has to carry the
   text in the middle; a full-bleed wash would re-crush the edges that are
   doing the work of showing a figure is there. */
.seal .grain{position:absolute; inset:0;
  background:radial-gradient(72% 52% at 50% 52%,rgba(8,11,22,.82),rgba(8,11,22,.5) 62%,rgba(8,11,22,.16) 100%)}
.seal .tag{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:grid; justify-items:center; gap:9px; width:100%; padding:0 16px; text-align:center}
.seal .ring{width:44px; height:44px; display:grid; place-items:center; border-radius:50%;
  background:var(--gold); box-shadow:0 8px 22px -8px rgba(0,0,0,.75)}
.seal .ring svg{width:20px; height:20px; fill:none; stroke:#1A1206; stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round}
.seal .t{font-size:13px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-hi)}
.seal .d{font-size:13px; line-height:1.4; color:#D8DEEE; max-width:19ch}
@media (prefers-reduced-motion:no-preference){
  .seal{animation:sealIn .5s cubic-bezier(.2,.7,.3,1) both}
}
@keyframes sealIn{from{opacity:0; transform:translateY(14px) scale(.97)} to{opacity:1; transform:none}}

/* Form and list treatment matches the cream kit panel, which already has a
   full set of light-ground overrides. */
.gatepanel .kit-list li{background:rgba(255,255,255,.66); border:1px solid rgba(27,21,9,.13)}
.gatepanel .kit-list .num{background:#15100A; color:var(--gold-hi)}
.gatepanel .kit-list .h{color:#15100A}
.gatepanel .kit-list .s{color:#5F4E32}
.gatepanel input[type=email]{background:#fff; border-color:rgba(27,21,9,.2); color:#15100A}
.gatepanel input[type=email]::placeholder{color:#8B7A5C}
.gatepanel input[type=email]:focus{border-color:#15100A; background:#fff}
.gatepanel .cta{background:linear-gradient(180deg,#241A08,#100A02); color:var(--gold-hi);
  box-shadow:0 12px 26px -14px rgba(27,21,9,.85)}
.gatepanel .note{color:#6B5A3C}
.gatepanel .err{color:#96280A}
.gatepanel :focus-visible{outline-color:#15100A}
.gatepanel .backlink{display:inline-flex; align-items:center; min-height:44px; margin-top:6px;
  font-size:13.5px; font-weight:600; color:#6B5A3C; background:none; border:0; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px}

/* ══ ONE SOURCE, TWO MOMENTS ════════════════════════════
   Two clips of one person, stacked without a header, read as two
   testimonials. That overstates the evidence. The source is named once,
   above both, and the clips sit inside it as moments. */
.person{margin-top:22px; padding:18px; border:1px solid var(--line);
  border-radius:20px; background:var(--night)}
.person>.hd{display:flex; align-items:center; gap:13px}
.person .av{width:46px; height:46px; flex:none; border-radius:50%; object-fit:cover;
  box-shadow:0 0 0 1px var(--line-hi)}
.person .nm{font-size:16px; font-weight:800; letter-spacing:-.02em; color:var(--cream)}
.person .rl{margin-top:3px; font-size:13px; line-height:1.4; color:var(--dim)}
.person .moments{margin-top:18px; display:grid; gap:22px}
@media (min-width:680px){ .person{padding:22px} }
.moment{margin:0; min-width:0}
.moment .mno{display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold)}
.moment .vpull{margin-top:10px; margin-bottom:13px; font-size:17px}
.moment .cap{margin-top:10px; font-size:13.5px; line-height:1.5; color:var(--dim)}

/* One client joined from a phone, so her video is 9:16 inside the recording.
   Forced into the 16/9 frame, object-fit:cover threw her face away. The frame
   takes her real ratio instead, capped so a portrait clip never towers over the
   landscape ones above it. */
.vidframe.tall{aspect-ratio:9/16; max-width:288px; margin-inline:auto}

/* Three sources stacked need to read as three people, not one long block. The
   rule is the separator; the name row is already the heading. */
.person + .person{margin-top:18px}
.person .prov{margin-top:14px; padding-top:13px; border-top:1px solid var(--line);
  font-size:12.5px; line-height:1.55; color:#8A94AE}
.person .prov b{color:var(--dim); font-weight:800}

/* ══ BRIDGE TO THE OFFER ════════════════════════════════
   The kit page delivers something free. Putting a price block directly
   under it reads as a toll on a gift, so the ask lives on its own page
   and this is the door to it.

   It was a bordered box of prose, which on a page already made of bordered
   boxes of prose read as more page and got scrolled past. It now opens on
   the door art and says plainly what is behind the click. A bridge is
   answered by knowing what the next page contains, not by more persuasion. */
.bridge{margin-top:38px; border-radius:22px; overflow:hidden;
  border:1px solid var(--line-hi); background:linear-gradient(168deg,#1B2138,#111829)}
.bridge .art{position:relative; margin:0}
.bridge .art img{width:100%; height:auto; aspect-ratio:3/2; object-fit:cover}
/* The art is dark at its edges already. This carries its bottom into the panel
   colour so the image reads as part of the card, not pasted onto it. */
.bridge .art::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom,rgba(27,33,56,.12) 42%,#1B2138)}
.bridge .body{position:relative; margin-top:-46px; padding:0 20px 24px}
.bridge .eyebrow{display:block}
.bridge h2{margin-top:9px; font-size:clamp(25px,6.6vw,31px)}
.bridge p{margin-top:12px; font-size:16px; line-height:1.55; color:var(--muted)}
.bhas{margin:20px 0 0; padding:17px 0 0; list-style:none; border-top:1px solid var(--line)}
.bhas li{display:flex; gap:11px; align-items:flex-start;
  font-size:15px; line-height:1.45; color:var(--cream)}
.bhas li+li{margin-top:10px}
.bhas li::before{content:''; width:6px; height:6px; margin-top:8px; flex:none;
  border-radius:50%; background:var(--gold)}
.bridge .cta{margin-top:22px}
.bridge .fine{margin-top:12px; font-size:12.5px; line-height:1.5; color:#98A2B8; text-align:center}

/* ══ SCENE ART ══════════════════════════════════════════
   Section imagery for the long offer page, which was an unbroken column of
   type from the hero to the FAQ. Each is a photograph of a space, with
   nobody identifiable in frame, so none of it implies a person or a claim. */
.scene{position:relative; margin:24px 0 0; border-radius:20px; overflow:hidden;
  background:var(--night); box-shadow:0 0 0 1px var(--line), 0 22px 44px -26px #000}
.scene img{width:100%; height:auto; aspect-ratio:16/9; object-fit:cover}
.scene::after{content:''; position:absolute; inset:auto 0 0 0; height:44%; pointer-events:none;
  background:linear-gradient(to bottom,rgba(8,11,22,0),rgba(8,11,22,.8))}
.scene figcaption{position:absolute; left:16px; right:16px; bottom:13px; z-index:1;
  font-size:12.5px; line-height:1.45; color:#C2CADE}
/* The caption sits on the picture, so its legibility depends on image pixels,
   which computed-style contrast checking cannot see. On a phone the scene is
   about a quarter the height it is on desktop while the caption stays the same
   size and wraps to two lines, so the text reaches much further up into lit
   parts of the frame. Measured over its own floor, section 03's caption was
   2.95:1 at 390px against 11.46:1 at 1280px. Deepen the scrim where the
   picture is small rather than shrink the type. */
@media(max-width:640px){
  .scene::after{height:64%;
    background:linear-gradient(to bottom,rgba(8,11,22,0),rgba(8,11,22,.5) 40%,rgba(8,11,22,.93))}
}

/* Identify / Collapse / Return is the spine of the method, so on the offer
   page the three steps carry their marks instead of plain counters. */
.phases.glyphed li{padding-left:58px}
.phases.glyphed li::before{content:none}
.phases.glyphed .gl{position:absolute; left:0; top:-3px; width:42px; height:42px;
  border-radius:12px; background:#05070E; box-shadow:0 0 0 1px var(--line)}

/* The duration badge was scoped to .vidmeta. Inside a moment caption it needs
   the same treatment, set inline with the sentence rather than on its own row. */
.moment .cap .len{display:inline-block; margin-left:6px; font-size:12px; font-weight:800;
  letter-spacing:.1em; color:var(--dim); border:1px solid var(--line);
  border-radius:999px; padding:3px 8px; vertical-align:1px}
@media (min-width:680px){
  /* Two moments side by side, with subgrid so the quote, player and caption
     each share a baseline across the columns. Quotes wrap to different line
     counts, which otherwise leaves the two players 20px out of step. */
  /* Only pair up when there is genuinely a second moment. With one child the
     two-column rule left the player at half width beside a dead column.
     Kevin still owes a second filmed client, so the pairing stays available. */
  .person .moments:has(.moment:nth-child(2)){grid-template-columns:1fr 1fr; gap:24px; grid-template-rows:auto auto auto auto}
  .moments:has(.moment:nth-child(2)) .moment{display:grid; grid-row:span 4; grid-template-rows:subgrid; gap:0}
  .moments:has(.moment:nth-child(2)) .moment .vpull{margin-bottom:0; align-self:end}
  .moments:has(.moment:nth-child(2)) .moment .vidframe{margin-top:13px}
}

/* The earlier line from the same recording, carried as text. It is the second
   thing she said, not a second piece of proof, so it is set quieter than the
   quote above the player and never competes with it. */
.vearlier{margin-top:16px; padding-left:13px; border-left:2px solid var(--line);
  font-size:14px; line-height:1.6; color:var(--dim)}
.vearlier q{color:var(--cream); font-style:italic}

/* ══ THE PROOF WALL ══════════════════════════════════════════════════
   Seventeen receipts in an x-scroller showed one at a time, so a visitor
   who did not swipe saw 1/17 of the evidence and the section read as a
   single testimonial. Volume is the argument here, so it has to be
   visible without interaction.

   Split by job: four heroes at full reading width carry the actual
   sentences, and the remaining thirteen tile as a wall whose point is
   the count, not the copy. Tapping any tile opens it at reading size,
   so nothing is merely decorative. */
.pheroes{margin-top:22px; display:grid; gap:20px}
.pheroes figure{margin:0}
.pheroes img{display:block; width:100%; height:auto; border-radius:16px;
  border:1px solid rgba(244,237,227,.18); box-shadow:0 10px 28px rgba(0,0,0,.45)}
.pheroes figcaption{margin-top:10px; font-size:13px; line-height:1.45; color:var(--dim)}
@media (min-width:820px){ .pheroes{grid-template-columns:1fr 1fr; gap:24px} }

.wallhead{margin-top:34px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.wallhead b{font-size:15px; font-weight:800; color:var(--cream); letter-spacing:-.01em}
.wallhead span{font-size:13px; color:var(--dim)}
/* CSS columns give a masonry wall without measuring anything in JS. The
   receipts have wildly different heights, so a grid would leave gaps. */
.pwall{margin-top:14px; columns:2; column-gap:10px}
@media (min-width:560px){ .pwall{columns:3} }
@media (min-width:900px){ .pwall{columns:4; column-gap:14px} }
.pwall button{display:block; width:100%; padding:0; margin:0 0 10px; border:0;
  background:none; cursor:zoom-in; break-inside:avoid; -webkit-column-break-inside:avoid;
  border-radius:10px}
.pwall button:focus-visible{outline:3px solid var(--gold); outline-offset:3px}
.pwall img{display:block; width:100%; height:auto; border-radius:10px;
  border:1px solid rgba(244,237,227,.14); box-shadow:0 6px 16px rgba(0,0,0,.4);
  transition:transform .18s ease, border-color .18s ease}
.pwall button:hover img{transform:translateY(-2px); border-color:rgba(226,178,90,.5)}
.wallnote{margin-top:6px; font-size:12.5px; color:var(--dim)}

/* Reading size for a wall tile. Fixed overlay so the page behind cannot
   scroll away underneath it on iOS. */
.lbox{position:fixed; inset:0; z-index:80; display:none; padding:16px;
  background:rgba(8,10,16,.94); overflow-y:auto; overscroll-behavior:contain}
.lbox[open]{display:block}
.lbox .lbin{max-width:560px; margin:0 auto; padding:44px 0 40px}
.lbox img{display:block; width:100%; height:auto; border-radius:14px;
  border:1px solid rgba(244,237,227,.2)}
.lbox .lbcap{margin-top:12px; font-size:14px; line-height:1.5; color:var(--dim)}
.lbclose{position:fixed; top:10px; right:10px; width:48px; height:48px; border-radius:50%;
  border:1px solid rgba(244,237,227,.25); background:rgba(20,24,34,.9); color:var(--cream);
  font-size:22px; line-height:1; cursor:pointer}
.lbclose:focus-visible{outline:3px solid var(--gold); outline-offset:2px}
@media (prefers-reduced-motion:reduce){ .pwall img{transition:none} }