@import url("../fonts/fonts.css");

/* ============================================================
   Way of Fitness — gym system
   Black ground, white type, one hot accent sampled from the
   competition kettlebells Irvin actually lifts.
   black-on-orange 5.59:1 (AA) · orange-on-black 5.59:1 (AA)
   White on orange is 3.52:1 — large text only, never body copy.
   ============================================================ */

:root{
  --black:#0A0A0B;
  --black-2:#121214;      /* raised surface */
  --black-3:#232326;      /* hairline       */
  --white:#FFFFFF;
  --bone:#F2F0EC;         /* warm off-white, the light ground */
  --grey:#B9BABD;         /* body on black, 10.2:1 */
  --grey-2:#8E9095;       /* muted on black, 5.7:1 */
  /* There is no accent colour. Equinox and Third Space have none either.
     Every hint of colour on this site comes from the photography. */
  --orange:#F2F0EC;       /* legacy alias -> bone, so nothing renders hot */
  --orange-hot:#FFFFFF;
  --paper:#F2F0EC;

  --gut:clamp(1.25rem,4vw,3.25rem);
  --rule:1px solid var(--black-3);

  --s--1:clamp(.8rem,.77rem + .14vw,.88rem);
  --s-0:clamp(1rem,.96rem + .2vw,1.1rem);
  --s-1:clamp(1.15rem,1.06rem + .42vw,1.4rem);
  --s-2:clamp(1.5rem,1.28rem + 1vw,2.1rem);
  --s-3:clamp(2rem,1.55rem + 2.1vw,3.2rem);
  --s-4:clamp(2.1rem,1.5rem + 2.6vw,3.5rem);
  --s-5:clamp(2.5rem,1.5rem + 3.6vw,4.4rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  margin:0;background:var(--black);color:var(--grey);
  font-family:"Archivo",ui-sans-serif,system-ui,sans-serif;
  font-size:var(--s-0);line-height:1.6;
  font-variation-settings:"wdth" 100,"wght" 400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--orange);text-underline-offset:.2em}
a:hover{color:var(--orange-hot)}
:focus-visible{outline:2px solid var(--bone);outline-offset:3px}

/* ---------- type: heavy, tight, uppercase display ---------- */
h1,h2,h3,h4{color:var(--white);margin:0 0 .4em;text-wrap:balance}
h1,h2{
  font-family:"Spectral",Georgia,serif;
  font-weight:300;text-transform:none;letter-spacing:-.014em;line-height:1.02;
}
h1 em,h2 em{font-style:italic;font-weight:300}
h1{font-size:var(--s-5)}
h2{font-size:var(--s-4)}
h3{font-size:var(--s-2);font-family:"Spectral",Georgia,serif;font-weight:400;
   text-transform:none;letter-spacing:-.008em;line-height:1.12}
h4{font-size:var(--s-1);font-variation-settings:"wght" 600;line-height:1.2}
p{margin:0 0 1.05em;max-width:62ch}
.lede{font-size:var(--s-1);color:var(--grey);line-height:1.55;
  font-variation-settings:"wght" 400;max-width:56ch}
strong{color:var(--white);font-variation-settings:"wght" 700}
.kicker{display:inline-block;color:var(--grey-2);font-size:var(--s--1);
  font-variation-settings:"wght" 700;text-transform:uppercase;letter-spacing:.14em;margin-bottom:1rem}

.skip{position:absolute;left:-9999px;background:var(--orange);color:var(--black);
  padding:.75rem 1.2rem;z-index:200;font-variation-settings:"wght" 700}
.skip:focus{left:.5rem;top:.5rem}

/* ---------- layout ---------- */
.wrap{width:min(100% - var(--gut)*2,1280px);margin-inline:auto}
.narrow{width:min(100% - var(--gut)*2,820px);margin-inline:auto}
section{padding-block:clamp(3.5rem,8vw,7rem)}
.tight{padding-block:clamp(2.5rem,5vw,4rem)}
.on-white{background:var(--paper);color:#3B3B3F}
.on-white h1,.on-white h2,.on-white h3,.on-white h4{color:var(--black)}
.on-white strong{color:var(--black)}
.on-white a{color:#B03A0E}
/* On the light ground the bone button would be invisible — invert it. */
.on-white .btn{background:var(--black);border-color:var(--black);color:var(--bone)}
.on-white .btn:hover{background:#000;border-color:#000;color:#fff}
.on-white .lede{color:var(--black)}
.on-white p,.on-white .checks li{color:#4A4A4F}
.on-white .note{color:#5C5C62}
.on-white figcaption{color:#5C5C62}

/* ---------- nav: dense, hard CTA right ---------- */
.nav{position:sticky;top:0;z-index:100;background:rgba(11,11,12,.94);
  backdrop-filter:blur(8px);border-bottom:var(--rule)}
.nav-in{display:flex;align-items:center;gap:1.4rem;min-height:64px;padding-block:.55rem}
.nav-logo{display:flex;align-items:center;gap:.55rem;margin-right:auto;text-decoration:none}
.nav-logo img{width:32px}
.nav-logo span{font-variation-settings:"wdth" 100,"wght" 500;color:var(--white);
  font-size:.82rem;text-transform:uppercase;letter-spacing:.34em;line-height:1}
.nav-links{display:flex;gap:1.5rem;align-items:center;list-style:none;margin:0;padding:0}
.nav-links a{color:var(--grey);text-decoration:none;font-size:.74rem;
  font-variation-settings:"wght" 500;text-transform:uppercase;letter-spacing:.17em}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--white)}
.nav-links a.btn,.nav-links a.btn:hover{color:var(--black)}
.nav-toggle{display:none;background:none;border:1px solid var(--black-3);color:var(--white);
  padding:.5rem .75rem;font:inherit;font-size:.78rem;text-transform:uppercase;
  letter-spacing:.08em;font-variation-settings:"wght" 700;cursor:pointer}
@media (max-width:900px){
  .nav-toggle{display:block}
  .nav-links{position:absolute;inset:64px 0 auto;flex-direction:column;align-items:stretch;gap:0;
    background:var(--black);border-bottom:var(--rule);padding:.25rem var(--gut) 1.25rem}
  .nav-links[hidden]{display:none}
  .nav-links li{border-top:var(--rule)}
  .nav-links a{display:block;padding:.95rem 0;font-size:.95rem}
  .nav-links .btn{margin-top:1rem;text-align:center}
}

/* ---------- buttons: solid, chunky, uppercase ---------- */
.btn{display:inline-block;background:var(--bone);color:var(--black);
  padding:1rem 2.1rem;border:1px solid var(--bone);
  text-decoration:none;font-size:.76rem;text-transform:uppercase;
  letter-spacing:.16em;font-variation-settings:"wght" 600;cursor:pointer;
  transition:background .16s ease,color .16s ease,border-color .16s ease}
.btn:hover{background:#fff;border-color:#fff;color:var(--black)}
.btn-ghost{background:transparent;color:var(--white);border-color:rgba(242,240,236,.42)}
.btn-ghost:hover{background:var(--white);border-color:var(--white);color:var(--black)}
.on-white .btn-ghost{background:transparent;color:var(--black);border-color:rgba(10,10,11,.32)}
.on-white .btn-ghost:hover{background:var(--black);color:var(--bone);border-color:var(--black)}
.btn-lg{padding:1.2rem 2.8rem;font-size:.8rem}

/* ---------- hero: full-bleed action, type over the bottom ---------- */
.hero{position:relative;min-height:min(90vh,880px);display:grid;align-items:end;
  overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 38%}
.hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,10,11,.92) 0%,rgba(10,10,11,.74) 30%,
             rgba(10,10,11,.5) 58%,rgba(10,10,11,.32) 82%,rgba(10,10,11,.42) 100%)}
.hero-in{position:relative;z-index:2;padding-block:clamp(2.5rem,6vw,4.5rem)}
.hero h1{max-width:22ch;text-shadow:0 2px 28px rgba(0,0,0,.72),0 1px 4px rgba(0,0,0,.5)}
.hero .lede{text-shadow:0 1px 16px rgba(0,0,0,.8),0 1px 3px rgba(0,0,0,.6)}
.hero .lede{margin-bottom:1.9rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.85rem}
.hero-sub{min-height:min(60vh,520px)}

/* ---------- figures rail under the hero ---------- */
.statbar{background:var(--black);border-block:1px solid var(--black-3)}
.statbar ul{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  list-style:none;margin:0;padding:0;background:var(--black-3)}
@media (min-width:820px){.statbar ul{grid-template-columns:repeat(4,1fr)}}
.statbar li{background:var(--black);padding:1.7rem var(--gut)}
.statbar b{display:block;font-family:"Spectral",Georgia,serif;font-weight:300;
  font-size:clamp(1.9rem,3.2vw,2.6rem);line-height:1;color:var(--white);letter-spacing:-.02em}
.statbar span{display:block;font-size:.68rem;text-transform:uppercase;
  letter-spacing:.2em;color:var(--grey-2);font-variation-settings:"wght" 500;margin-top:.6rem}

/* ---------- editorial split ---------- */
.split{display:grid;gap:clamp(1.75rem,4vw,3.25rem);align-items:center}
@media (min-width:920px){
  .split{grid-template-columns:1fr 1fr}
  .split.wide-media{grid-template-columns:.9fr 1.1fr}
  .split.media-first>figure{order:-1}
}
.split figure{margin:0}
figcaption{margin-top:.55rem;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--grey-2);font-variation-settings:"wght" 600}

/* ---------- the seven days ---------- */
.days{display:grid;gap:1px;background:var(--black-3);border:1px solid var(--black-3)}
@media (min-width:620px){.days{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.days{grid-template-columns:repeat(3,1fr)}}
.day{background:var(--black);padding:2rem 1.7rem;display:flex;flex-direction:column;gap:.5rem;
  border-top:1px solid transparent;transition:border-color .15s ease,background .15s ease}
.day:hover{border-top-color:var(--bone);background:var(--black-2)}
.day .n{font-size:.68rem;letter-spacing:.22em;color:var(--grey-2);
  text-transform:uppercase;font-variation-settings:"wght" 500}
.day h3{font-size:var(--s-1);margin:0}
.day p{font-size:.92rem;margin:0;color:var(--grey)}
.day.final{background:var(--black-2);border-top-color:var(--black-3)}
@media (min-width:980px){.day.final{grid-column:span 3;flex-direction:row;align-items:baseline;gap:1.4rem}}
.day.final p{max-width:62ch}
.days.pillars{grid-template-columns:1fr}
@media (min-width:620px){.days.pillars{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.days.pillars{grid-template-columns:repeat(4,1fr)}}
.on-white .days{background:#D8D8DC;border-color:#D8D8DC}
.on-white .day{background:var(--paper)}
.on-white .day:hover{background:#EAEAEC}
.on-white .day.final{background:#EAEAEC}
.on-white .day h3{color:var(--black)}
.on-white .day p{color:#4A4A4F}
.on-white .day .n{color:#B03A0E}

/* ---------- lists ---------- */
.checks{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.checks li{position:relative;padding-left:1.75rem;max-width:62ch}
.checks li::before{content:"";position:absolute;left:0;top:.72em;
  width:1.1rem;height:1px;background:var(--grey-2)}

/* ---------- price ---------- */
.offer{background:var(--black-2);border:1px solid var(--black-3);padding:clamp(1.6rem,4vw,2.75rem)}
.on-white .offer{background:#EAEAEC;border-color:#D8D8DC}
.price{display:flex;align-items:baseline;gap:.7rem;margin:0 0 .35rem}
.price b{font-size:clamp(3rem,7vw,4.75rem);color:var(--white);line-height:.9;
  font-variation-settings:"wdth" 108,"wght" 800;letter-spacing:-.03em}
.on-white .price b{color:var(--black)}
.price span{color:var(--grey-2);font-size:.78rem;text-transform:uppercase;
  letter-spacing:.1em;font-variation-settings:"wght" 700}
.on-white .price span{color:#5C5C62}

/* ---------- credential figures ---------- */
.figures{display:grid;gap:1px;background:var(--black-3);border:1px solid var(--black-3)}
@media (min-width:600px){.figures{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.figures{grid-template-columns:repeat(4,1fr)}}
.figure{background:rgba(11,11,12,.86);padding:1.5rem 1.35rem}
.figure b{display:block;font-size:clamp(2.4rem,4.4vw,3.4rem);color:var(--white);
  font-family:"Spectral",Georgia,serif;font-weight:300;line-height:.9;letter-spacing:-.03em;margin-bottom:.55rem}
.figure span{display:block;font-size:.86rem;line-height:1.35;color:var(--white);
  font-variation-settings:"wght" 500}

/* ---------- band ---------- */
.band{position:relative;min-height:clamp(420px,56vw,660px);display:grid;align-items:center;
  overflow:hidden;border-block:1px solid var(--black-3)}
.band-media{position:absolute;inset:0}
.band-media img{width:100%;height:100%;object-fit:cover;object-position:center 38%}
.band-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(95deg,rgba(11,11,12,.95) 0%,rgba(11,11,12,.86) 44%,
             rgba(11,11,12,.55) 76%,rgba(11,11,12,.42) 100%)}
@media (max-width:820px){.band-media::after{background:rgba(11,11,12,.86)}}
.band-in{position:relative;z-index:2;padding-block:clamp(2.5rem,6vw,4rem)}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--black-3)}
.faq details{border-bottom:1px solid var(--black-3)}
.faq summary{cursor:pointer;padding:1.2rem 2.5rem 1.2rem 0;position:relative;color:var(--white);
  font-variation-settings:"wght" 700;font-size:var(--s-0);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.4rem;top:50%;transform:translateY(-50%);
  color:var(--grey-2);font-size:1.5rem;line-height:1;font-variation-settings:"wght" 700}
.faq details[open] summary::after{content:"\2013"}
.faq .a{padding:0 0 1.4rem;color:var(--grey)}
.faq .a p:last-child{margin-bottom:0}
.on-white .faq{border-top-color:#D8D8DC}
.on-white .faq details{border-bottom-color:#D8D8DC}
.on-white .faq summary{color:var(--black)}
.on-white .faq .a{color:#4A4A4F}

/* ---------- quote ---------- */
.quote{border-left:1px solid var(--grey-2);padding-left:clamp(1.1rem,2.5vw,1.8rem);max-width:54ch}
.quote p{font-size:var(--s-2);line-height:1.24;color:var(--white);
  font-family:"Spectral",Georgia,serif;font-weight:300;font-style:italic;letter-spacing:-.01em}
.on-white .quote p{color:var(--black)}

/* ---------- form ---------- */
label{display:block;margin-bottom:.3rem;font-size:.74rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--grey-2);font-variation-settings:"wght" 700}
input,textarea,select{width:100%;background:var(--black);border:1px solid var(--black-3);
  color:var(--white);padding:.85rem .9rem;font:inherit;font-size:1rem}
input:focus,textarea:focus{border-color:var(--bone);outline:none}
.field{margin-bottom:1.1rem}
.err{color:#FF9A80;font-size:.92rem;margin-top:.5rem}
.note{font-size:.85rem;color:var(--grey-2)}
.rule-top{border-top:1px solid var(--black-3);padding-top:1.5rem}

/* ---------- footer ---------- */
.foot{background:var(--black);border-top:1px solid var(--black-3);padding-block:3rem 2rem;font-size:.92rem}
.foot-grid{display:grid;gap:2rem}
@media (min-width:780px){.foot-grid{grid-template-columns:1.5fr 1fr 1fr}}
.foot h4{font-size:.7rem;text-transform:uppercase;letter-spacing:.22em;color:var(--grey-2);
  font-variation-settings:"wght" 500;margin-bottom:.9rem}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.foot a{color:var(--grey);text-decoration:none}
.foot a:hover{color:var(--white)}
.foot-base{margin-top:2.4rem;padding-top:1.3rem;border-top:1px solid var(--black-3);
  display:flex;flex-wrap:wrap;gap:.8rem 1.5rem;justify-content:space-between;
  color:var(--grey-2);font-size:.8rem}
.foot-base p{margin:0;max-width:none}

/* ---------- utility ---------- */
.mt-lg{margin-top:clamp(2rem,4vw,3.25rem)}
.stack>*+*{margin-top:1.05rem}
:target,[id]{scroll-margin-top:82px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============================================================
   Funnel page — one door, no site navigation, one repeated CTA.
   Lifestyle imagery per the audit spec, deliberately warmer and
   less severe than the rest of the site.
   ============================================================ */
.funnel-hero{min-height:min(84vh,780px)}
.funnel-hero h1{max-width:24ch;font-size:clamp(2.3rem,1.4rem + 3.1vw,3.9rem)}
.funnel-hero .hero-media img{object-position:center 42%}
.funnel-hero .funnel-hero .hero-media::after{
  background:linear-gradient(to top,rgba(11,11,12,.92) 0%,rgba(11,11,12,.76) 30%,
             rgba(11,11,12,.5) 60%,rgba(11,11,12,.3) 84%,rgba(11,11,12,.4) 100%)}

.ps{border-left:1px solid var(--grey-2);padding:1rem 0 1rem 1.4rem;background:var(--black-2)}
.ps p{margin:0;padding-right:1.2rem;color:var(--white)}
.on-white .ps{background:#EAEAEC}
.on-white .ps p{color:var(--black)}

.foot-min{border-top:1px solid var(--black-3);padding-block:2rem 1.75rem}
.foot-min .foot-base{color:var(--grey-2)}
.foot-min a{color:var(--grey)}

/* sticky buy bar — appears once the reader is past the hero */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:120;background:rgba(10,10,11,.96);
  backdrop-filter:blur(10px);color:var(--grey);border-top:1px solid var(--black-3);
  transform:translateY(100%);transition:transform .24s ease}
.buybar.show{transform:translateY(0)}
.buybar[hidden]{display:block}
.buybar-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-block:.7rem;flex-wrap:wrap}
.buybar p{margin:0;max-width:none;font-size:.95rem}
.buybar strong{color:var(--white);font-variation-settings:"wght" 600}
.buybar span{font-variation-settings:"wght" 600}
.buybar .btn{padding:.78rem 1.6rem}
@media (max-width:560px){
  .buybar-in{justify-content:center;text-align:center}
  .buybar p{width:100%}
}
@media (prefers-reduced-motion:reduce){.buybar{transition:none}}

/* ---------- funnel: post-purchase steps ---------- */
.confirmed{border-left:1px solid var(--grey-2);background:var(--black-2);padding:1rem 1.3rem}
.confirmed p{margin:0;color:var(--white)}
.decline{margin:1.3rem 0 0}
.decline a{color:var(--grey-2);font-size:.92rem;text-decoration:underline}
.decline a:hover{color:var(--white)}
ol.numbered{counter-reset:n;list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
ol.numbered li{counter-increment:n;position:relative;padding-left:2.4rem;max-width:62ch}
ol.numbered li::before{content:counter(n);position:absolute;left:0;top:-.05em;color:var(--grey-2);
  font-variation-settings:"wght" 800;font-size:1.15rem;line-height:1.4}

/* ---------- trust rail: the reassurances a $9 buyer looks for ---------- */
.trustrail{background:var(--black-2);border-bottom:1px solid var(--black-3);
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grey-2)}
.trustrail ul{display:flex;flex-wrap:wrap;gap:.4rem 2.2rem;justify-content:center;
  list-style:none;margin:0;padding:.62rem 0;font-variation-settings:"wght" 500}
.trustrail li{white-space:nowrap}
@media (max-width:620px){
  .trustrail li:nth-child(n+3){display:none}
  .trustrail ul{justify-content:space-around;gap:1.2rem}
}

/* ---------- product preview: show what $9 actually buys ---------- */
.preview{display:grid;gap:1px;background:var(--black-3);border:1px solid var(--black-3)}
@media (min-width:760px){.preview{grid-template-columns:repeat(3,1fr)}}
.preview figure{margin:0;background:var(--black-2);padding:1.5rem}
.preview img{width:100%;box-shadow:0 18px 44px rgba(0,0,0,.55)}
.preview figcaption{margin-top:.95rem;text-align:center}
.on-white .preview{background:#D8D5CE;border-color:#D8D5CE}
.on-white .preview figure{background:#E8E5DF}

/* ---------- video ---------- */
figure.vid{margin:0}
figure.vid video{width:100%;height:auto;display:block;background:var(--black-2)}

/* ============================================================
   Funnel transition steps — micro-commitments between sections.
   Nothing gates: every section reads whether or not you answer.
   ============================================================ */
.step{border-block:1px solid var(--black-3);background:var(--black-2)}
.wrap-step{width:min(100% - var(--gut)*2,900px);margin-inline:auto;
  padding-block:clamp(2rem,4vw,3rem)}
.step-q{margin:0 0 1.25rem;color:var(--white);font-family:"Spectral",Georgia,serif;
  font-weight:300;font-size:var(--s-2);line-height:1.15;max-width:32ch}
.opts{display:flex;flex-wrap:wrap;gap:.6rem}
.opt{background:transparent;color:var(--grey);border:1px solid var(--black-3);
  padding:.8rem 1.25rem;font:inherit;font-size:.95rem;cursor:pointer;text-align:left;
  transition:border-color .14s ease,color .14s ease,background .14s ease}
.opt:hover{border-color:var(--grey-2);color:var(--white)}
.opt.on{background:var(--bone);border-color:var(--bone);color:var(--black);
  font-variation-settings:"wght" 600}
.step-note{margin:1rem 0 0;font-size:.85rem;color:var(--grey-2);max-width:56ch}
.step-done{margin-top:1.1rem}
.on-white .step{background:#E8E5DF;border-color:#D8D5CE}
.on-white .step-q{color:var(--black)}

/* the line the next section opens with, written from the reader's answer */
.echo{margin:0 0 1rem;padding-left:.9rem;border-left:2px solid var(--grey-2);
  color:var(--white);font-size:.95rem;max-width:52ch}
.on-white .echo{color:var(--black);border-left-color:#8A8A90}

/* their own checks float to the front of the grid */
.day.lead{border-top-color:var(--bone)}

/* the catch for people not buying today */
.catch{border-block:1px solid var(--black-3);background:var(--black)}
.catch-row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:stretch;max-width:520px}
.catch-row input{flex:1 1 240px}
.catch-row .btn{flex:0 0 auto;white-space:nowrap}
.catch-form label{margin-bottom:.45rem}
.catch-inline{max-width:none}
.catch-inline .catch-row input{background:#fff;border-color:#D5D2CB;color:var(--black)}
#gate-next{border-top:1px solid #D8D5CE;padding-top:1.6rem}

/* step progress */
.step-prog{display:flex;align-items:center;gap:.6rem;margin:0 0 1.1rem;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--grey-2)}
.step-num{color:var(--white);font-variation-settings:"wght" 600}
.step-bar{flex:0 0 120px;height:2px;background:var(--black-3);position:relative;overflow:hidden}
.step-bar i{position:absolute;inset:0 auto 0 0;background:var(--bone);display:block}
.on-white .step-num{color:var(--black)}
.on-white .step-bar{background:#D8D5CE}
.on-white .step-bar i{background:var(--black)}
.echo-band{padding-block:clamp(1.4rem,3vw,2.2rem)}
.echo-band:not(:has(.echo:not([hidden]))){padding-block:0;display:none}
.echo-band .echo:empty,.echo-band .echo[hidden]{display:none}
.terms{margin:1.1rem 0 0;font-size:.88rem;color:var(--white);max-width:46ch;
  text-shadow:0 1px 12px rgba(0,0,0,.8)}

/* ============================================================
   Funnel scenes — one screen at a time, cross-faded.
   The page has no site chrome; this is the whole surface.
   ============================================================ */
main.bare{min-height:100dvh;display:flex;flex-direction:column}
.funnel-top{display:flex;align-items:center;gap:1rem;padding:1rem var(--gut);
  position:sticky;top:0;z-index:20;background:var(--black)}
.fback{background:none;border:0;color:var(--grey);font-size:1.35rem;line-height:1;
  cursor:pointer;padding:.35rem .55rem;margin-left:-.55rem}
.fback:hover{color:var(--white)}
.fmark{margin-inline:auto;color:var(--white);text-decoration:none;font-size:.72rem;
  letter-spacing:.3em;text-transform:uppercase;font-variation-settings:"wght" 500}
.fspace{width:2rem}

#funnel{position:relative;flex:1;display:grid}
.scene{grid-area:1/1;display:flex;align-items:flex-start;justify-content:center;
  padding:clamp(1rem,4vw,2.5rem) var(--gut) 4rem;
  opacity:0;transform:translateY(10px);transition:opacity .24s ease,transform .24s ease}
.scene.here{opacity:1;transform:none}
.scene.out{opacity:0;transform:translateY(-10px);pointer-events:none}
.scene.out-back{opacity:0;transform:translateY(10px);pointer-events:none}
.scene.in-back{transform:translateY(-10px)}
@media (prefers-reduced-motion:reduce){
  .scene,.scene.out,.scene.out-back,.scene.in-back{transition:none;transform:none}
}
.scene-in{width:min(100%,640px)}
.scene h1{font-size:clamp(2rem,1.4rem + 2.6vw,3.2rem);margin-bottom:.5em}
.scene h2{font-size:clamp(1.5rem,1.15rem + 1.5vw,2.2rem);margin-bottom:.55em;outline:none}
.scene h1:focus-visible,.scene h2:focus-visible{outline:none}
.scene-lede{font-size:var(--s-1);color:var(--grey);line-height:1.55;max-width:46ch;margin-bottom:1.9rem}
.scene-sub{color:var(--grey);max-width:48ch;margin-bottom:1.5rem}
.scene-note{margin-top:1rem;font-size:.84rem;color:var(--grey-2);max-width:44ch}

/* Sits under the funnel chrome on every scene, so the count never blinks out between
   a question and the line that answers it. */
.fprog{display:flex;align-items:center;gap:.7rem;padding:0 var(--gut) .9rem;max-width:var(--wrap);
  margin-inline:auto;width:100%}
.fprog[hidden]{display:none}
.fprog-bar{flex:1 1 auto;height:3px;background:var(--black-3);position:relative;overflow:hidden;
  border-radius:2px}
.fprog-bar b{position:absolute;inset:0 auto 0 0;background:var(--bone);display:block;width:0;
  transition:width .32s ease}
.fprog-label{flex:0 0 auto;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey-2);font-variation-settings:"wght" 500}
@media (prefers-reduced-motion:reduce){.fprog-bar b{transition:none}}

.scene .opts{display:grid;gap:.65rem;margin-bottom:1.4rem}
.scene .opt{width:100%;background:transparent;color:var(--grey);border:1px solid var(--black-3);
  padding:1.05rem 1.25rem;font:inherit;font-size:1rem;text-align:left;cursor:pointer;
  transition:border-color .14s ease,color .14s ease,background .14s ease}
.scene .opt:hover{border-color:var(--grey-2);color:var(--white)}
.scene .opt.on{background:var(--bone);border-color:var(--bone);color:var(--black);
  font-variation-settings:"wght" 600}

.scene-say .say{font-family:"Spectral",Georgia,serif;font-weight:300;
  font-size:clamp(1.5rem,1.15rem + 1.5vw,2.15rem);line-height:1.25;color:var(--white);
  max-width:22ch;margin:0 0 2rem}

.fform{display:grid;gap:.35rem;max-width:420px}
.fform label{margin-top:.9rem}
.fform .btn{margin-top:1.3rem;justify-self:start}
.ferr{color:#FF9A80;font-size:.92rem;margin:.7rem 0 0}

.scene-work .stages{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:1rem;max-width:420px}
.scene-work .stages li{display:flex;align-items:center;gap:.85rem;color:var(--grey-2);
  opacity:.4;transition:opacity .3s ease,color .3s ease}
.scene-work .stages li i{width:16px;height:16px;border:1px solid var(--black-3);flex:0 0 auto;
  position:relative;border-radius:50%}
.scene-work .stages li.doing{opacity:1;color:var(--white)}
.scene-work .stages li.doing i{border-color:var(--bone);
  animation:pulse 1s ease-in-out infinite}
.scene-work .stages li.done{opacity:1;color:var(--grey)}
.scene-work .stages li.done i{background:var(--bone);border-color:var(--bone);animation:none}
.scene-work .stages li.done i::after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;
  border:solid var(--black);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
@keyframes pulse{0%,100%{opacity:.45}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.scene-work .stages li.doing i{animation:none}}

/* The plan screen states what the week IS without listing it; the protocol is the product. */
.planfacts{list-style:none;margin:0 0 1.6rem;padding:0;display:grid;gap:1px;
  background:var(--black-3);border:1px solid var(--black-3)}
.planfacts li{background:var(--black);padding:.95rem 1.15rem;display:grid;
  grid-template-columns:minmax(118px,auto) 1fr;gap:.15rem 1.15rem;align-items:baseline}
.planfacts li b{color:var(--white);font-variation-settings:"wght" 600;font-size:.95rem}
.planfacts li span{font-size:.88rem;color:var(--grey-2)}
@media (max-width:520px){.planfacts li{grid-template-columns:1fr}}

/* The plan stays on the same black ground as the rest of the funnel. What marks it as
   the arrival is the photography and the rows landing in sequence, not a change of ground. */
.scene-plan h2{font-size:clamp(1.75rem,1.2rem + 2.1vw,2.7rem)}

/* Photography on the plan screen. Selector is .planshot img, not .planshot > img:
   the <picture> wrapper would break a direct-child rule. */
.planshot{margin:0 0 1.6rem}
.planshot img{display:block;width:100%;height:auto}

/* Each line lands rather than appearing all at once. No opacity:0 in the base rule —
   if animation never runs the rows must still be readable. */
.scene-plan .planfacts li{animation:planin .44s cubic-bezier(.2,.7,.3,1) both}
.scene-plan .planfacts li:nth-child(1){animation-delay:.05s}
.scene-plan .planfacts li:nth-child(2){animation-delay:.13s}
.scene-plan .planfacts li:nth-child(3){animation-delay:.21s}
.scene-plan .planfacts li:nth-child(4){animation-delay:.29s}
.scene-plan .buy{animation:planin .5s cubic-bezier(.2,.7,.3,1) .42s both}
@keyframes planin{from{opacity:0;transform:translateY(7px)}}
@media (prefers-reduced-motion:reduce){
  .scene-plan .planfacts li,.scene-plan .buy{animation:none}
}

.startpick{margin:0 0 2rem}
.startpick input{max-width:220px;margin-top:.35rem}
.buy{border-top:1px solid var(--black-3);padding-top:1.6rem}
.buy .price{margin-bottom:.9rem}
.fform select{width:100%;background:var(--black);border:1px solid var(--black-3);color:var(--white);
  padding:.85rem .9rem;font:inherit;font-size:1rem}
.fform .chk{display:flex;gap:.7rem;align-items:flex-start;margin-top:1.3rem;
  text-transform:none;letter-spacing:0;font-size:.95rem;color:var(--grey);font-variation-settings:"wght" 400}
.fform .chk input{width:auto;flex:0 0 auto;margin-top:.25rem}