/* Shared styles for thebodyweightmastery.com. Edited by hand, linked by both
   the homepage and /records/. The media kit at /brands/ has its own inline CSS
   and must never be touched. */

*,*::before,*::after{box-sizing:border-box}
:root{
  --bg:#000;--bg2:#0a0a0a;--bg3:#131313;
  --tx:#fff;--dim:rgba(255,255,255,.62);--faint:rgba(255,255,255,.38);
  --bd:rgba(255,255,255,.10);--bds:rgba(255,255,255,.22);
  --ac:#A5DDE6;--r:14px;--mw:1280px;
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0;background:var(--bg);color:var(--tx)}
body{font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
/* height:auto is load-bearing. Images carry width/height attributes for
   layout stability, and without this the browser takes width from CSS but
   HEIGHT FROM THE ATTRIBUTE, stretching them vertically. */
img{max-width:100%;height:auto;display:block}
::selection{background:var(--ac);color:#000}
:focus-visible{outline:2px solid var(--ac);outline-offset:3px}
.wrap{max-width:var(--mw);margin:0 auto;padding:0 32px}
@media(max-width:720px){.wrap{padding:0 20px}}
.display{font-family:'Bebas Neue',Inter,sans-serif;font-weight:400;letter-spacing:.01em;line-height:.95;text-transform:uppercase}
.eyebrow{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);font-weight:500}
.sec-label{font-family:'Bebas Neue',sans-serif;font-size:14px;letter-spacing:.32em;text-transform:uppercase;color:var(--ac)}

/* nav */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:rgba(0,0,0,.72);border-bottom:1px solid var(--bd)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:62px;gap:20px}
.brand{font-family:'Bebas Neue',sans-serif;font-size:21px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
/* min-width:0 is load-bearing: a flex item with overflow-x:auto still refuses
   to shrink below its content width without it. */
.nav-links{display:flex;gap:26px;align-items:center;font-size:14px;color:var(--dim);overflow-x:auto;scrollbar-width:none;min-width:0}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a{white-space:nowrap;transition:color .15s}
.nav-links a:hover{color:var(--tx)}
.nav-links a.hi{color:var(--ac)}

/* hero */
.hero{padding:clamp(40px,7vw,84px) 0 clamp(40px,6vw,72px);border-bottom:1px solid var(--bd)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:32px}}
/* Hero type matches the media kit hero exactly: same face throughout, the accent
   word only turns italic + accent-coloured. Swapping the accent to another family
   is what made the old hero read as two typefaces stuck together.
   --h1max lets a page with longer words cap the scale without forking the rule. */
.hero h1{margin:24px 0 0;font-size:clamp(56px,8vw,var(--h1max,112px));line-height:.92;letter-spacing:.005em}
.hero h1 em{font-style:italic;color:var(--ac)}
.hero p.lede{margin:22px 0 0;max-width:52ch;font-size:clamp(16px,1.7vw,18px);color:var(--dim)}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.fig{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--bd)}
.fig img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.fig .chip{position:absolute;top:16px;left:16px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;padding:7px 13px;border-radius:999px;background:rgba(0,0,0,.62);backdrop-filter:blur(8px);border:1px solid var(--bds)}
.btn{display:inline-flex;align-items:center;gap:9px;padding:14px 26px;border-radius:999px;font-weight:600;font-size:15px;transition:transform .12s,background .15s,border-color .15s}
.btn:active{transform:scale(.97)}
.btn-p{background:var(--ac);color:#000}
.btn-p:hover{background:#fff}
.btn-g{border:1px solid var(--bds);color:var(--tx)}
.btn-g:hover{border-color:var(--ac);color:var(--ac)}

/* credential tiles */
.creds{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;background:var(--bd);border-bottom:1px solid var(--bd)}
.cred{background:var(--bg);padding:26px 22px 30px}
.cred b{display:block;font-family:'Bebas Neue',sans-serif;font-size:30px;letter-spacing:.02em;color:var(--ac);line-height:1}
.cred span{display:block;margin-top:9px;font-size:14px;color:var(--dim);line-height:1.45}

/* sections */
section.blk{padding:clamp(52px,8vw,96px) 0;border-bottom:1px solid var(--bd)}
.head{margin-bottom:34px}
.head h2{margin:12px 0 0;font-size:clamp(30px,5vw,54px)}
.head p{margin:14px 0 0;max-width:60ch;color:var(--dim);font-size:16px}

/* click-to-play facades */
.ytf{position:relative;width:100%;padding:0;overflow:hidden;border-radius:var(--r);background:var(--bg3);display:block}
.ytf img{width:100%;height:100%;object-fit:cover;opacity:.82;transition:opacity .2s,transform .3s}
.ytf:hover img{opacity:1;transform:scale(1.04)}
.ytf .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:rgba(0,0,0,.55);border:1.5px solid rgba(255,255,255,.85);backdrop-filter:blur(4px);transition:background .15s,transform .15s}
.ytf:hover .play{background:var(--ac);border-color:var(--ac);transform:translate(-50%,-50%) scale(1.06)}
.ytf .play::after{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #fff}
.ytf:hover .play::after{border-left-color:#000}
.ytf.big .play{width:78px;height:78px}
.ytf.big .play::after{border-width:12px 0 12px 20px}
.ytf .v-title{position:absolute;left:0;right:0;bottom:0;padding:34px 14px 12px;font-size:13px;font-weight:500;text-align:left;line-height:1.3;background:linear-gradient(transparent,rgba(0,0,0,.9));display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ytf.big .v-title{padding:56px 22px 20px;font-size:17px;font-weight:600}
.ytf .v-meta{position:absolute;top:10px;left:10px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;padding:4px 8px;border-radius:6px;background:rgba(0,0,0,.7);color:var(--ac)}
.ytf.big .v-meta{top:16px;left:16px;font-size:11px;padding:6px 12px;letter-spacing:.14em}
.ytf iframe{width:100%;height:100%;border:0;border-radius:var(--r);display:block}
/* One row that scrolls sideways. flex-basis (not width) sets the card size,
   because .ytf carries width:100% and flex-basis is what wins on the main axis. */
.wall-wrap{position:relative}
.wall{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px}
.wall::-webkit-scrollbar{display:none}
.wall>.ytf{flex:0 0 clamp(168px,19vw,220px);scroll-snap-align:start}
.wall-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:46px;height:46px;border-radius:50%;background:rgba(0,0,0,.72);border:1px solid var(--bds);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;font-size:30px;line-height:0;padding-bottom:4px;transition:background .15s,color .15s,border-color .15s,opacity .2s}
.wall-nav:hover{background:var(--ac);color:#000;border-color:var(--ac)}
.wall-nav.prev{left:-14px}
.wall-nav.next{right:-14px}
/* Hidden rather than greyed at the ends, so the control never looks broken. */
.wall-nav[disabled]{opacity:0;pointer-events:none}
/* Touch devices already swipe; arrows would just cover a thumbnail. */
@media(hover:none),(max-width:720px){.wall-nav{display:none}}

/* tutorials: player left, menu right */
.tuts{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,3.5vw,44px);align-items:start}
@media(max-width:960px){.tuts{grid-template-columns:1fr}}
#stage{position:sticky;top:86px}
@media(max-width:960px){#stage{position:static}}
.stage-now{margin-top:14px;font-size:14px;color:var(--dim)}
.stage-now b{color:var(--tx);font-weight:600}
.lib{display:flex;flex-direction:column;gap:26px}
.lib-group h3{margin:0;font-family:'Bebas Neue',sans-serif;font-size:24px;letter-spacing:.04em;text-transform:uppercase}
.lib-blurb{margin:5px 0 12px;font-size:13.5px;color:var(--faint)}
.lib-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;background:var(--bd);border-top:1px solid var(--bd);border-bottom:1px solid var(--bd)}
.tut{width:100%;background:var(--bg);display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 2px;text-align:left;transition:background .15s,padding .15s}
.tut:hover,.tut[aria-current="true"]{background:var(--bg3);padding-left:10px;padding-right:10px}
.tut-name{font-size:14.5px}
.tut:hover .tut-name,.tut[aria-current="true"] .tut-name{color:var(--ac)}
.tut-meta{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--faint);white-space:nowrap}

/* image band */
.band{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,64px);align-items:center}
.band.flip{grid-template-columns:1.1fr .9fr}
.band.flip .band-fig{order:2}
@media(max-width:900px){.band,.band.flip{grid-template-columns:1fr;gap:28px}.band.flip .band-fig{order:0}}
.band h2{margin:12px 0 0;font-size:clamp(28px,4.4vw,46px)}
.band p{margin:16px 0 0;color:var(--dim);max-width:48ch}
.band-stats{display:flex;flex-wrap:wrap;gap:34px;margin-top:28px}
.band-stats div b{display:block;font-family:'Bebas Neue',sans-serif;font-size:34px;line-height:1;letter-spacing:.02em}
.band-stats div span{display:block;margin-top:6px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
/* The certificate is a tall portrait scan on a white ground, so it needs a
   ceiling or it visually swallows the section it is evidence for. */
/* Matches the /brands treatment Alex approved: the FULL certificate, portrait,
   in a clean white frame. Cropping it small read as worse, not better. */
.cert{border-radius:var(--r);overflow:hidden;background:#fff;padding:16px;border:1px solid var(--bd);max-width:440px;width:100%;margin-inline:auto}
.cert img{width:100%;border-radius:4px}
.record-vid{margin-top:30px;max-width:520px}

/* email */
.mail{background:var(--bg2)}
.mail-in{display:grid;grid-template-columns:1.1fr 1fr;gap:44px;align-items:center}
@media(max-width:860px){.mail-in{grid-template-columns:1fr;gap:28px}}
.mail h2{margin:12px 0 0;font-size:clamp(28px,4.4vw,44px)}
.mail p{margin:14px 0 0;color:var(--dim);max-width:46ch}
form.sub{display:flex;gap:10px;flex-wrap:wrap}
form.sub input{flex:1 1 240px;min-width:0;padding:15px 18px;border-radius:999px;border:1px solid var(--bds);background:var(--bg);color:var(--tx);font-size:15px;font-family:inherit}
form.sub input::placeholder{color:var(--faint)}
form.sub input:focus{outline:none;border-color:var(--ac)}
/* Honeypot. Hidden off-screen rather than display:none on purpose: the better
   form-fillers skip display:none and visibility:hidden fields, but they do fill
   one that is merely positioned away. Selector must be form.sub input.hp, not
   .hp, or `form.sub input` above (0-1-2) outranks it and the trap renders as a
   real second box in the flex row. */
form.sub input.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.sub-note{margin-top:12px;font-size:12.5px;color:var(--faint)}
.sub-msg{margin-top:12px;font-size:14px;min-height:20px}
.sub-msg.ok{color:var(--ac)}
.sub-msg.err{color:#ff9c8a}

/* gear */
.gears{display:grid;grid-template-columns:1fr;gap:22px}
.gear{border:1px solid var(--bd);border-radius:var(--r);padding:20px;transition:border-color .18s}
.gear:hover{border-color:var(--ac)}
.gear-media{display:grid;gap:14px;align-items:start}
/* 81/256 = 0.3164. At that fraction of the 16:9 video's width, the 9:16 clip
   comes out exactly the same height, so the pair sits on one clean baseline. */
.gear-right .gear-media{grid-template-columns:1fr .3164fr}
.gear-left .gear-media{grid-template-columns:.3164fr 1fr}
.gear-clip{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:var(--r);display:block;background:var(--bg3)}
.gear-body{display:flex;flex-direction:column;align-items:flex-start;margin-top:18px}
.gear-tag{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.gear-name{margin-top:8px;font-family:'Bebas Neue',sans-serif;font-size:24px;letter-spacing:.03em}
.gear-what{margin-top:6px;font-size:14px;color:var(--dim)}
/* The card's copy stays left aligned but the CTA centres itself and runs bigger
   than a stock .btn, so it reads as the one thing to do on the card. */
.gear-shop{margin-top:22px;align-self:center;padding:17px 40px;font-size:17px}
@media(max-width:640px){
  .gear-right .gear-media,.gear-left .gear-media{grid-template-columns:1fr}
  /* Stacked, the video leads on both cards; a lone vertical clip at full width
     would eat the whole screen before the product is even named. */
  .gear-left .gear-media>.ytf{order:-1}
  .gear-clip{max-width:230px;margin:0 auto}
}
.disclosure{margin-top:26px;font-size:12.5px;color:var(--faint);max-width:70ch}

/* events teaser + records page */
.ev{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,56px);align-items:center}
@media(max-width:900px){.ev{grid-template-columns:1fr;gap:28px}}
/* These h2s sit outside .head, so they need the display scale explicitly or
   they fall back to the browser default and read as sub-headings. */
.ev h2{margin:12px 0 0;font-size:clamp(28px,4.4vw,46px)}
.ev p{margin:16px 0 0;color:var(--dim);max-width:48ch}
.steps{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:1px;background:var(--bd);border-top:1px solid var(--bd);border-bottom:1px solid var(--bd)}
.steps li{background:var(--bg);display:grid;grid-template-columns:42px 1fr;gap:16px;padding:16px 2px;align-items:baseline}
.steps b{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ac)}
.steps span{font-size:15px;color:var(--dim)}
.steps span i{color:var(--tx);font-style:normal;font-weight:600}
.evgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:8px}
.evcard{border:1px solid var(--bd);border-radius:var(--r);padding:24px 22px 26px}
.evcard h3{margin:0;font-family:'Bebas Neue',sans-serif;font-size:23px;letter-spacing:.04em;text-transform:uppercase}
.evcard p{margin:9px 0 0;font-size:14.5px;color:var(--dim)}
.reel-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:720px){.reel-pair{grid-template-columns:1fr}}

/* photo strip */
.strip{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
@media(max-width:1080px){.strip{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.strip{grid-template-columns:repeat(2,1fr)}}
.strip figure{margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--bd);background:var(--bg3)}
.strip img{width:100%;aspect-ratio:2/3;object-fit:cover;opacity:.9;transition:opacity .25s,transform .5s}
.strip figure:hover img{opacity:1;transform:scale(1.05)}

/* newsletter popup */
.pop-veil{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.72);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:22px;opacity:0;pointer-events:none;transition:opacity .28s}
.pop-veil.on{opacity:1;pointer-events:auto}
.pop{position:relative;max-width:520px;width:100%;background:var(--bg2);border:1px solid var(--bds);border-radius:20px;padding:clamp(26px,4vw,40px);transform:translateY(14px) scale(.98);transition:transform .28s}
.pop-veil.on .pop{transform:none}
.pop h2{margin:12px 0 0;font-size:clamp(27px,4.6vw,38px)}
.pop p{margin:13px 0 0;color:var(--dim);font-size:15px}
.pop form.sub{margin-top:22px}
.pop-x{position:absolute;top:12px;right:14px;width:34px;height:34px;border-radius:50%;color:var(--faint);font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;transition:color .15s,background .15s}
.pop-x:hover{color:var(--tx);background:rgba(255,255,255,.08)}
.pop-later{margin-top:14px;font-size:13px;color:var(--faint);text-decoration:underline;text-underline-offset:3px}
.pop-later:hover{color:var(--dim)}

/* footer */
footer{padding:52px 0 64px}
.foot{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;align-items:flex-start}
.foot-links{display:flex;flex-wrap:wrap;gap:22px;font-size:14px;color:var(--dim)}
.foot-links a:hover{color:var(--ac)}
.copy{margin-top:34px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;color:var(--faint)}

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

/* --- Brand vertical pages: /brands/gear|tech|apparel ----------------------- */
/* Every clip on these pages is a self-hosted MP4, never a YouTube embed, and
   carries NO view count. Reason in the header of verticals.py: several of these
   did hundreds of thousands on Instagram and a few thousand on YouTube, so a
   YouTube number understates the work and sends the reader off-site to check. */
.vhero{padding:88px 0 64px;border-bottom:1px solid var(--bd)}
.vhero .eyebrow{margin-bottom:18px}
/* The size clamp lives on `.hero h1`, scoped to the homepage hero, so a .display
   heading anywhere else falls back to the browser default 32px. That is what was
   happening here. Restated rather than rescoped so the homepage cannot regress. */
/* No `max-width` in ch here. Bebas Neue is condensed, so its `ch` unit is narrow:
   15ch measured just 432px at 72px and forced a third line the <br> never asked
   for. The explicit <br> owns the break; --h1max owns the size. */
.vhero h1{margin:22px 0 0;line-height:.92;letter-spacing:.005em;
  font-size:clamp(44px,6.2vw,var(--h1max,88px))}
/* .hero h1 em is scoped to .hero, so the accent rule is restated here. ONE
   typeface: italic + colour only, never a font-family switch (that was the
   root cause of the rejected homepage hero). */
.vhero h1 em{font-style:italic;color:var(--ac)}
.band h2 em{font-style:italic;color:var(--ac)}
.vhero p{color:var(--dim);max-width:56ch;margin:20px 0 0;font-size:17px;line-height:1.6}
.vstats{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.vstat{border:1px solid var(--bd);border-radius:999px;padding:8px 16px;font-size:13px;color:var(--dim)}
.vstat b{color:var(--tx);font-weight:600}
.vswitch{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}
.vswitch a{border:1px solid var(--bd);border-radius:999px;padding:9px 16px;font-size:13px;
  color:var(--dim);text-decoration:none;transition:border-color .15s,color .15s}
.vswitch a:hover{border-color:var(--bds);color:var(--tx)}
.vswitch a[aria-current]{border-color:var(--ac);color:var(--ac)}

.vgroup{padding:64px 0;border-bottom:1px solid var(--bd);scroll-margin-top:72px}
/* scroll-margin-top clears the sticky nav: without it a jump link parks the
   heading underneath the bar and the section looks like it starts mid-grid. */
.vjump{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:26px;
  padding-top:22px;border-top:1px solid var(--bd)}
.vjump span{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint)}
.vjump a{font-size:13px;color:var(--dim);text-decoration:none;border-bottom:1px solid transparent}
.vjump a:hover{color:var(--tx);border-bottom-color:var(--ac)}
.vgroup h2{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
  font-weight:600;margin:0 0 6px}
.vgroup .vnote{color:var(--dim);font-size:15px;margin:0 0 30px;max-width:60ch}

/* One sliding row per group, not a wrapping grid. Alex, 2026-08-02: the grid
   "splitted" each section, so a group of two sat as a stub next to a group of
   six and the page read as debris. Same mechanics as the homepage shorts wall.
   ⚠️ Cards use flex-basis, not width: .vcard sits in a flex row and flex-basis
   is what wins on the main axis. */
.vrail-wrap{position:relative}
/* Centre-focus rail: the middle card is full size and lit, everything either
   side steps down in scale and brightness, so sliding promotes the next card
   into the centre. --vc is declared here (not inline on the card) because the
   side padding has to be computed from it, otherwise the first and last cards
   can never physically reach the centre of the track. */
.vrail{--vc:clamp(180px,17vw,240px);
  display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;padding:14px 0 18px;
  padding-inline:calc(50% - var(--vc) / 2)}
.vrail::-webkit-scrollbar{display:none}
.vrail>.vcard{flex:0 0 var(--vc);scroll-snap-align:center;
  transform-origin:center center;
  transition:transform .28s cubic-bezier(.22,.61,.36,1),opacity .28s ease,border-color .18s}
.vrail>.vcard.is-centre{border-color:var(--ac);box-shadow:0 18px 46px rgba(0,0,0,.55)}
@media(prefers-reduced-motion:reduce){.vrail>.vcard{transition:none}}
.vrail-nav{position:absolute;top:44%;transform:translateY(-50%);z-index:5;width:46px;height:46px;
  border-radius:50%;background:rgba(0,0,0,.72);border:1px solid var(--bds);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;
  justify-content:center;font-size:30px;line-height:0;padding-bottom:4px;color:var(--tx);
  cursor:pointer;transition:background .15s,color .15s,border-color .15s,opacity .2s}
.vrail-nav:hover{background:var(--ac);color:#000;border-color:var(--ac)}
.vrail-nav.prev{left:-14px}
.vrail-nav.next{right:-14px}
.vrail-nav[disabled]{opacity:0;pointer-events:none}
@media(hover:none),(max-width:720px){.vrail-nav{display:none}}

.vcard{border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;background:var(--bg2);
  cursor:pointer;transition:border-color .18s}
.vcard:hover,.vcard:focus-visible{border-color:var(--bds);outline:none}
.vcard:focus-visible{box-shadow:0 0 0 2px var(--ac)}
.vcard-media{position:relative}
.vcard video,.vcard img{width:100%;height:auto;display:block;aspect-ratio:9/16;object-fit:cover}
.vplay{position:absolute;left:10px;bottom:10px;width:34px;height:34px;border-radius:50%;
  background:rgba(0,0,0,.55);border:1px solid var(--bds);transition:opacity .18s;pointer-events:none}
.vplay:after{content:"";position:absolute;left:13px;top:10px;
  border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}
.vcard.is-playing .vplay{opacity:0}
/* Photo cards carry no player, so no badge and no pointer. */
.vcard.photo{cursor:default}
.vcard.photo:hover{border-color:var(--bd)}
.vcap{padding:11px 13px 14px;font-size:13px;line-height:1.45;color:var(--dim)}

/* Long-form sits full width above its group's grid: it is the piece that sells,
   and a 16:9 review squeezed into a 9:16 column reads as an afterthought. */
/* Capped, not full-bleed. At the wrap's full 1280px a 16:9 player is 720px tall
   and eats the whole screen before a single clip is visible. */
.vlong{max-width:900px;margin:0 0 30px;border:1px solid var(--bd);border-radius:var(--r);
  overflow:hidden;background:var(--bg2)}
.vlong-media{position:relative;width:100%;aspect-ratio:16/9;background:#000}
.vlong-media video{width:100%;height:100%;display:block;object-fit:contain}
.vlong-btn{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;cursor:pointer;
  background:#000;display:block}
.vlong-btn img{width:100%;height:100%;object-fit:cover;opacity:.66;transition:opacity .2s}
.vlong-btn:hover img{opacity:.82}
.vlong-btn .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:66px;height:66px;border-radius:50%;background:rgba(0,0,0,.55);border:1px solid var(--bds)}
.vlong-btn .play:after{content:"";position:absolute;left:26px;top:21px;
  border-left:20px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent}
.vlong .vcap{font-size:14px;padding:14px 16px 16px}
.vlong-tag{display:block;font-family:'JetBrains Mono',monospace;font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:7px}
.vlong-txt{display:block}

/* Long-form rail. Alex 2026-08-03: all four long-form pieces on every page, with
   this page's one highlighted. Landscape cards, so it needs its own --vc: the
   default 240px column is sized for 9:16 and would render a 16:9 player 135px
   tall. ⚠️ .vlong carries max-width and a bottom margin for the old stacked
   layout; both have to be unset or flex-basis loses to max-width. */
.vrail.longs{--vc:clamp(280px,42vw,600px)}
.vrail.longs>.vlong{flex:0 0 var(--vc);max-width:none;margin:0;scroll-snap-align:center;
  transform-origin:center center;
  transition:transform .28s cubic-bezier(.22,.61,.36,1),opacity .28s ease,border-color .18s}
/* ⛔ The centre card must NOT take the accent border here. On every other rail
   accent means "centred"; on this one accent means "this page's piece", and two
   meanings on one colour reads as neither. Scale and brightness already show
   what is centred. */
.vrail.longs>.vlong.is-centre{border-color:var(--bd);box-shadow:0 18px 46px rgba(0,0,0,.55)}
.vrail.longs>.vlong.is-mine{border-color:var(--ac)}
.vrail.longs>.vlong.is-mine .vlong-tag{color:var(--ac)}
.vrail.longs>.vlong.is-mine .vlong-tag:after{content:" · this page"}
@media(prefers-reduced-motion:reduce){.vrail.longs>.vlong{transition:none}}

.ideas{display:grid;gap:16px;grid-template-columns:1fr 1fr}
.idea{border:1px solid var(--bd);border-radius:var(--r);padding:24px;background:var(--bg2)}
.idea h3{font-size:17px;margin:0 0 10px;font-weight:600}
.idea p{color:var(--dim);font-size:15px;line-height:1.6;margin:0}
/* ── "How we start" steps ─────────────────────────────────────────────────
   Cards with looping SVG artwork, NOT the flat .steps list (which /records/
   still uses, so it must not be touched). Alex 2026-08-03: "this could have a
   better design, make it cooler, maybe some animations next to each step."
   Every animation is written so the PLAIN CSS state is the finished picture and
   only the keyframes take things away. That way prefers-reduced-motion can drop
   the animation entirely and still leave a complete drawing rather than a blank
   box, which is what happens when you animate 0 -> 1 opacity from a base of 0. */
.vsteps{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:16px;
  grid-template-columns:repeat(3,1fr)}
.vsteps li{border:1px solid var(--bd);border-radius:var(--r);background:var(--bg2);
  padding:0 24px 26px;overflow:hidden;transition:border-color .2s,background .2s}
.vsteps li:hover{border-color:var(--bds);background:var(--bg3)}
.vstep-art{height:136px;margin:0 -24px 20px;display:flex;align-items:center;justify-content:center;
  border-bottom:1px solid var(--bd);
  background:radial-gradient(120% 96% at 50% 0%,rgba(165,221,230,.09),transparent 72%)}
.vsteps b{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.18em;color:var(--ac)}
.vsteps h3{margin:9px 0 0;font-family:'Bebas Neue',Inter,sans-serif;font-weight:400;
  font-size:25px;letter-spacing:.03em;text-transform:uppercase;line-height:1.04}
.vsteps p{margin:10px 0 0;font-size:14.5px;color:var(--dim);line-height:1.6}
@media(max-width:900px){.vsteps{grid-template-columns:1fr}.vstep-art{height:120px}}

.sart{width:100%;max-width:216px;height:auto}
/* transform-box:fill-box is load-bearing on every scaled SVG shape below. An SVG
   child's default transform-origin is the origin of the whole viewBox, not of
   the shape, so scaleY on a bar would pivot off the top-left of the canvas and
   fly the bar across the frame instead of growing it in place. */
.sart-bar,.sart-line,.sart-total{transform-box:fill-box}

/* 01 — the email thread, with the two people having it.
   ⛔ DO NOT try a handshake here again. Six attempts, all rejected: a smooth
   silhouette on a bar reads as a joint, a bandage or a barbell; scalloped arcs
   read as arches, not fingers; even separate finger capsules with a thumb only
   got to "a hand", never to "two hands shaking". Alex, 2026-08-03: "the
   handshake isn't working, go back to the email thread, maybe add two shapes of
   faces as if they were talking to each other." A person glyph plus tailed
   speech bubbles reads instantly at 216px; an anatomical drawing does not.
   The tail is what attributes each bubble to a person, which is what turns two
   avatars and three pills into a conversation. Left person and their two
   messages are neutral, the right person and their reply take the accent, so
   the alternation is visible without reading the order. */
.sart-p{fill:rgba(255,255,255,.20);stroke:rgba(255,255,255,.45);stroke-width:1.5}
.sart-p.ac{fill:rgba(165,221,230,.18);stroke:var(--ac);stroke-width:1.6}
.sart-b{fill:rgba(255,255,255,.045);stroke:rgba(255,255,255,.30);stroke-width:1.5}
.sart-b.ac{fill:rgba(165,221,230,.10);stroke:var(--ac);stroke-width:1.6}
.sart-d{fill:rgba(255,255,255,.55);animation:sartDot 1.2s ease-in-out infinite}
.sart-d.d2{animation-delay:.15s}
.sart-d.d3{animation-delay:.3s}
.sart-bub.b1{animation:sartBub1 5.4s ease-out infinite}
.sart-bub.b2{animation:sartBub2 5.4s ease-out infinite}
.sart-bub.b3{animation:sartBub3 5.4s ease-out infinite}
/* transform-box:view-box (not fill-box) so transform-origin is read in viewBox
   user units and each person scales about their own centre. */
.sart-per{transform-box:view-box}
.sart-per.pl{transform-origin:24px 60px;animation:sartTalkL 5.4s ease-in-out infinite}
.sart-per.pr{transform-origin:196px 60px;animation:sartTalkR 5.4s ease-in-out infinite}
@keyframes sartBub1{0%,3%{opacity:0;transform:translate(-10px,4px)}13%,100%{opacity:1;transform:none}}
@keyframes sartBub2{0%,26%{opacity:0;transform:translate(10px,4px)}36%,100%{opacity:1;transform:none}}
@keyframes sartBub3{0%,54%{opacity:0;transform:translate(-10px,4px)}64%,100%{opacity:1;transform:none}}
@keyframes sartDot{0%,100%{opacity:.3}50%{opacity:1}}
/* Whoever just spoke gives a small nudge, so the eye follows the thread. */
@keyframes sartTalkL{0%,2%{transform:scale(1)}7%{transform:scale(1.07)}15%,52%{transform:scale(1)}
  58%{transform:scale(1.07)}66%,100%{transform:scale(1)}}
@keyframes sartTalkR{0%,25%{transform:scale(1)}31%{transform:scale(1.07)}39%,100%{transform:scale(1)}}

/* 02 — the audit sweep */
.sart-base{stroke:var(--bd);stroke-width:1}
.sart-bar{fill:rgba(255,255,255,.11);transform-origin:bottom;transform:scaleY(var(--h));
  animation:sartGrow 4.6s cubic-bezier(.2,.85,.25,1) infinite,sartLit 4.6s linear infinite}
.sart-bar.k1{--h:.42;animation-delay:0s,0s}
.sart-bar.k2{--h:.68;animation-delay:0s,.67s}
.sart-bar.k3{--h:.34;animation-delay:0s,1.42s}
.sart-bar.k4{--h:.86;animation-delay:0s,2.16s}
.sart-bar.k5{--h:.55;animation-delay:0s,2.90s}
.sart-bar.k6{--h:.74;animation-delay:0s,3.65s}
.sart-scan{stroke:var(--ac);stroke-width:1.5;fill:rgba(165,221,230,.06);
  animation:sartScan 4.6s cubic-bezier(.45,0,.55,1) infinite}
@keyframes sartGrow{0%{transform:scaleY(.05)}16%,100%{transform:scaleY(var(--h))}}
@keyframes sartLit{0%,4%{fill:rgba(255,255,255,.11)}9%{fill:var(--ac)}22%,100%{fill:rgba(255,255,255,.11)}}
@keyframes sartScan{0%{transform:translateX(0);opacity:0}8%{opacity:1}
  92%{opacity:1;transform:translateX(156px)}100%{transform:translateX(156px);opacity:0}}

/* 03 — the plan */
.sart-sheet{stroke:var(--bds);stroke-width:1.5;fill:rgba(255,255,255,.03)}
.sart-tick{stroke:var(--ac);stroke-width:1.5;fill:var(--ac);fill-opacity:.85;
  animation:sartTick 5.2s ease-out infinite}
.sart-line{fill:rgba(255,255,255,.17);transform-origin:left;
  animation:sartLine 5.2s cubic-bezier(.3,.9,.3,1) infinite}
.sart-row.r2 .sart-tick,.sart-row.r2 .sart-line{animation-delay:.85s}
.sart-row.r3 .sart-tick,.sart-row.r3 .sart-line{animation-delay:1.7s}
.sart-total{fill:var(--ac);opacity:.92;transform-origin:left;
  animation:sartTotal 5.2s cubic-bezier(.3,.9,.3,1) infinite;animation-delay:2.6s}
@keyframes sartLine{0%{transform:scaleX(0)}17%,100%{transform:scaleX(1)}}
@keyframes sartTick{0%{fill-opacity:0;stroke:var(--bds)}6%{fill-opacity:0;stroke:var(--bds)}
  17%,100%{fill-opacity:.85;stroke:var(--ac)}}
@keyframes sartTotal{0%{transform:scaleX(0);opacity:0}6%{opacity:.92}
  20%,100%{transform:scaleX(1);opacity:.92}}

@media(prefers-reduced-motion:reduce){
  .sart-bub,.sart-d,.sart-per,.sart-bar,.sart-scan,.sart-tick,.sart-line,
  .sart-total{animation:none}
  .sart-scan{opacity:0}
}

.vcta{padding:76px 0 88px}
.vcta h2{margin:12px 0 0;font-size:clamp(34px,4.6vw,var(--h1max,60px));line-height:.95;letter-spacing:.005em}
.vcta h2 em{font-style:italic;color:var(--ac)}
.vcta p{margin:18px 0 0;color:var(--dim);max-width:52ch;line-height:1.6}
/* .partners / .partner deleted 2026-08-03: the chip list repeated the marquee.
   The marquee is now the only place the partner names appear. */

@media(max-width:860px){.ideas{grid-template-columns:1fr}}
@media(max-width:640px){
  .vhero{padding:60px 0 40px}
  .vgroup{padding:48px 0}
  .vcta{padding:52px 0 64px}
  .vrail{gap:10px}
  .vrail>.vcard{flex:0 0 clamp(150px,44vw,180px)}
  .vcap{font-size:12px;padding:9px 11px 12px}
}

/* --- Brand vertical pages, design pass 2 ---------------------------------- */
/* Alex 2026-08-02: "make a cooler design... each page should have the stats and
   all that too since we are using this landings to reach out to brands." The
   numbered section labels, the marquee and the platform cards all mirror the
   /brands/ media kit, which is the design he already signed off on. */

.vhero{padding:0;border-bottom:1px solid var(--bd)}
.vhero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,72px);
  align-items:center;padding:76px 0 72px}
.vhero-fig{position:relative;margin:0;border-radius:var(--r);overflow:hidden;
  aspect-ratio:4/5;background:var(--bg3)}
.vhero-fig img,.vhero-fig video{width:100%;height:100%;object-fit:cover;display:block}
/* The hero clip is 9:16 inside a 4:5 box, so cover throws away about 15% top and
   bottom. Biasing to 20% keeps the burned "SHOT WITH HOVER AIR X1" credit in
   frame at the top and pushes the TikTok caption off the bottom, which is the
   right trade on a page a brand manager is reading. */
.vhero-fig video{object-position:center 20%}
.vhero-fig:after{content:"";position:absolute;inset:0;
  background:linear-gradient(140deg,rgba(0,0,0,.42),transparent 46%,rgba(0,0,0,.30))}

.sec-num{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint);margin-bottom:14px}
.vgroup h2{font-size:clamp(26px,3.2vw,38px);letter-spacing:.005em;line-height:1;
  text-transform:none;font-family:'Bebas Neue',Inter,sans-serif;font-weight:400;
  color:var(--tx);margin:0 0 8px}
.vgroup .vnote{color:var(--dim);font-size:15px;margin:0 0 30px;max-width:60ch}

/* Marquee of real partners. Duplicated track so the loop has no seam. */
.vmarq{overflow:hidden;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);
  padding:18px 0;background:var(--bg2)}
.vmarq-track{display:flex;gap:0;width:max-content;animation:vmarq 34s linear infinite}
.vmarq-item{display:flex;align-items:center;gap:26px;padding:0 26px;white-space:nowrap;
  font-family:'Bebas Neue',sans-serif;font-size:23px;letter-spacing:.04em;color:var(--dim)}
.vmarq-item i{width:5px;height:5px;border-radius:50%;background:var(--ac);display:block;flex:none}
@keyframes vmarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.vmarq-track{animation:none}}

/* Platform cards. ⭐ A PORT of the /brands/ media kit Statistics section, not a
   variation of it. Alex 2026-08-03: "this part should be in each section with
   the same colors and animation." The earlier flattened version used the same
   numbers but no brand colours, no counters and no ring, which made his own
   figures read weaker here than on the kit. Chip colours, delta colours, sizes
   and copy all match the kit; if one changes, change both. */
.statgrid{display:grid;gap:20px;grid-template-columns:repeat(4,1fr)}
.statcard{border:1px solid var(--bd);border-radius:var(--r);background:var(--bg2);padding:28px;
  display:flex;flex-direction:column;transition:border-color .3s,transform .3s,opacity .5s;
  opacity:0;transform:translateY(14px)}
.statcard.in{opacity:1;transform:none;transition-delay:var(--rd,0ms)}
.statcard:hover{border-color:var(--bds);transform:translateY(-3px)}
.statcard .head{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px}
.statcard .chip{background:var(--bg3);border:1px solid var(--bd);padding:6px 12px;border-radius:999px;
  font-size:12px;display:inline-flex;align-items:center;gap:6px;line-height:1}
.statcard .chip svg{display:block}
.statcard .date{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--faint);
  letter-spacing:.1em}
.statcard .big{font-family:'Bebas Neue',sans-serif;font-size:clamp(38px,3.6vw,68px);line-height:1;
  letter-spacing:.005em;font-variant-numeric:tabular-nums}
.statcard .sub{color:var(--dim);font-size:14px;margin-top:4px}
.statcard .delta{color:#62E4A1;font-family:'JetBrains Mono',monospace;font-size:12px;
  margin-top:8px;letter-spacing:.04em}
.statcard .delta.down{color:#FF6B9D}
/* ⛔ This MUST NOT be called `.foot`. `.foot` is already the PAGE FOOTER
   (`display:flex;flex-wrap:wrap;align-items:flex-start`, line ~223) and a stat
   card footer picked all three up. Specificity kept `flex-direction:column`, so
   the bug did not look like a collision at all: it surfaced as two unrelated
   symptoms — the label/value rows shrank to fit instead of spreading (that is
   `align-items:flex-start` on a column flex container) and the donut legend
   dropped below the ring (that is the inherited `flex-wrap:wrap`). Measured, not
   guessed: computed `flex-wrap` came back "wrap" when nothing here sets it. */
.statcard .statfoot{margin-top:auto;padding-top:20px;border-top:1px solid var(--bd);
  font-size:13px;color:var(--dim)}
.statcard .rows{display:flex;flex-direction:column;gap:14px}
.statcard .rows>div{display:flex;justify-content:space-between;gap:10px}
.statcard .rows .v{color:var(--tx);font-weight:500;white-space:nowrap}
.statcard .rows .v em{color:#62E4A1;font-style:normal;font-size:11px;margin-left:8px}
.donut-wrap{display:flex;align-items:center;gap:24px}
.donut{width:100px;height:100px;flex:none}
/* The sweep is a transition on stroke-dasharray, set by STATS_JS when the card
   scrolls in. Declaring the final dasharray in the markup would render the ring
   already complete before anyone has seen it move. */
.donut-arc{transition:stroke-dasharray 1.2s ease}
.donut-legend{display:flex;flex-direction:column;gap:10px;font-size:12px}
.donut-legend .row{display:flex;align-items:center;gap:8px;color:var(--dim)}
.donut-legend .sw{width:10px;height:10px;border-radius:2px;flex:none}
.statsrc{margin-top:20px;font-size:12px;color:var(--faint)}
@media(prefers-reduced-motion:reduce){
  .statcard{opacity:1;transform:none;transition:none}
  .donut-arc{transition:none}
}

@media(max-width:980px){
  .vhero-grid{grid-template-columns:1fr;padding:56px 0 48px}
  .vhero-fig{aspect-ratio:16/10;max-height:340px}
  .statgrid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){.statgrid{grid-template-columns:1fr}}

/* ---------------------------------------------------------------------------
   /how-to-backflip/ — the first page on this domain built to be FOUND rather
   than to be sent to someone. Everything is prefixed bf so nothing can collide
   with .steps (shared with /records/) or .foot (the page footer), both of which
   have caused real bugs here before.
   --------------------------------------------------------------------------- */
.bfsafe{border:1px solid var(--bds);border-left:3px solid var(--ac);border-radius:var(--r);padding:28px 32px;background:var(--bg2)}
.bfsafe h2{font-family:'Bebas Neue',sans-serif;font-size:30px;letter-spacing:.02em;margin:0 0 10px}
.bfsafe p{color:var(--dim);margin:0 0 16px;max-width:70ch}
.bfsafe ol{margin:0;padding-left:22px;color:var(--dim)}
.bfsafe li{margin-bottom:10px}
.bfsafe li b{color:var(--tx)}

.bfstep{display:grid;grid-template-columns:88px 1fr;gap:24px;padding:30px 0;border-top:1px solid var(--bd)}
.bfstep:first-of-type{border-top:0}
.bfnum{font-family:'Bebas Neue',sans-serif;font-size:52px;line-height:1;color:var(--ac);opacity:.55}
.bfstep h3{font-family:'Bebas Neue',sans-serif;font-size:28px;letter-spacing:.02em;margin:0 0 8px}
.bfstep p{color:var(--dim);margin:0 0 10px;max-width:70ch}
.bfcue,.bfready{font-size:14.5px}
.bfcue b,.bfready b{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;margin-right:10px}
.bfcue b{color:var(--ac)}
.bfready b{color:var(--faint)}

.bfmistake{padding:22px 0;border-top:1px solid var(--bd)}
.bfmistake:first-of-type{border-top:0}
.bfmistake h3{font-family:'Bebas Neue',sans-serif;font-size:24px;letter-spacing:.02em;margin:0 0 6px}
.bfmistake p{color:var(--dim);margin:0;max-width:70ch}

.bfvids{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}

.bffaq{border-top:1px solid var(--bd);padding:18px 0}
.bffaq summary{cursor:pointer;font-weight:600;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.bffaq summary::-webkit-details-marker{display:none}
/* The +/- is generated, so the marker cannot fall out of sync with the state. */
.bffaq summary::after{content:"+";color:var(--ac);font-family:'Bebas Neue',sans-serif;font-size:24px;line-height:1}
.bffaq[open] summary::after{content:"\2013"}
.bffaq p{color:var(--dim);margin:12px 0 0;max-width:70ch}

@media(max-width:640px){
  .bfstep{grid-template-columns:1fr;gap:6px}
  .bfnum{font-size:38px}
  .bfsafe{padding:22px 20px}
}
/* .display carries NO font-size in this codebase: the clamp lives on `.hero h1`.
   A .display heading outside the hero therefore falls back to the browser default
   32px. Restate the clamp on the new scope, never rescope .hero h1. */
.bfh2{margin:12px 0 0;font-size:clamp(30px,5vw,54px)}
.bfh2+.lede{margin:16px 0 8px;max-width:60ch;color:var(--dim)}

/* --- /coaching/ pricing tiers -----------------------------------------------
   Two cards only. A third tier turns a decision into shopping, and nobody
   knowingly buys the bronze. The featured card is the 2-call tier because its
   second call costs only $150 more, so per call it is the better buy and the
   ladder should point at it.

   .cotier is a column flex with margin-top:auto on the button, so the two CTAs
   stay on the same line even when one tier's call description wraps to two
   lines. Do not swap that for a min-height, which breaks at the next font size. */
/* The nav is position:sticky at 62px, so a jump link parks its target underneath
   it. Same fix and same value as .vgroup. #how also exists on /records/, which
   has the identical latent bug, so this repairs both. */
#pricing,#how{scroll-margin-top:72px}
.cotiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin-top:8px}
.cotier{position:relative;display:flex;flex-direction:column;align-items:flex-start;background:var(--bg);border:1px solid var(--bd);border-radius:var(--r);padding:32px 26px 28px}
.cotier.feat{border-color:var(--ac);background:var(--bg2)}
.cobadge{position:absolute;top:-11px;left:26px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;padding:5px 12px;border-radius:999px;background:var(--ac);color:#000}
/* The term sits ABOVE the tier name and the price. Alex, 2026-08-17: he wants
   the timeframe read before the number, so "6 WEEKS" has to come first in the
   DOM, not be recovered later from the small print under the price. */
.coterm{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ac);margin-bottom:10px}
.cotier h3{margin:0;font-family:'Bebas Neue',sans-serif;font-size:23px;letter-spacing:.04em;text-transform:uppercase}
/* Quiet second action under a primary Pay button. Underlined rather than a
   second .btn so it never competes with checkout for the eye. */
.colink{margin-top:14px;font-size:14px;color:var(--dim);text-decoration:underline;text-underline-offset:3px}
.colink:hover{color:var(--ac)}
.coprice{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:clamp(46px,6vw,64px);line-height:1;letter-spacing:.01em;color:var(--ac);margin:14px 0 0}
/* The per-week figure is the number that softens the total, so it has to be
   READ, not whispered. Bumped off --dim and the figure itself is full white.
   ⛔ Do not put this back on --faint: 38% white on black measures ~3.4:1,
   under the 4.5:1 floor. Alex flagged it as unreadable and he was right. */
.coper{margin-top:10px;font-size:15px;color:rgba(255,255,255,.74)}
.coper b{color:var(--tx);font-weight:600}
.cocalls{width:100%;margin:20px 0 22px;padding-top:18px;border-top:1px solid var(--bd);font-size:15.5px;font-weight:600}
.cotier .btn{margin-top:auto}
.coafter{margin-top:14px;font-size:13.5px;color:rgba(255,255,255,.66)}
.coincl{margin-top:36px;padding-top:26px;border-top:1px solid var(--bd)}
/* Explicit 2 columns, not auto-fit: there are four inclusions, and auto-fit
   lays them out 3+1 at 1280px, which reads as a mistake. 2x2 is the only clean
   shape for an even list this short. */
.colist{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 40px}
.colist li{position:relative;padding-left:26px;font-size:15px;line-height:1.5;color:rgba(255,255,255,.78)}
.colist li::before{content:"";position:absolute;left:0;top:.52em;width:9px;height:9px;border-radius:50%;background:var(--ac)}
.conote{margin:28px 0 0;max-width:72ch;font-size:14.5px;color:rgba(255,255,255,.74)}
/* Type scale for /coaching/, scoped to body.copage so /records/ and the homepage
   keep theirs. Alex, 2026-08-18: the page read as "too much tiny text". The site
   defaults (14 to 15px body) are tuned for a browsing page; this one has to be
   read once, on a phone, by someone deciding whether to spend $2,500. Every step
   here is one notch, not a redesign. */
/* Must out-specify `.hero p.lede` (0-0-2-1), which carries the shared
   clamp(16px,1.7vw,18px). A plain `.copage .lede` loses to it silently. */
.copage .hero p.lede{font-size:clamp(17px,1.9vw,20px);line-height:1.6;color:rgba(255,255,255,.84);max-width:54ch}
.copage .head p{font-size:17px}
.copage .cred span{font-size:14.8px}
.copage .steps span{font-size:16px}
.copage .evcard p{font-size:15.5px;line-height:1.55}
.copage .colist li{font-size:15.5px}
.copage .conote{font-size:15px}
.copage .bffaq summary{font-size:17.5px}
.copage .bffaq p{font-size:15.5px;line-height:1.6}
.copage .mail p{font-size:16.5px}

/* Landing-page footer: identity and the safety line, and deliberately not a
   single link. The page has no nav either, so there is nowhere to wander off to. */
.cofoot{padding:44px 0 40px;border-top:1px solid var(--bd)}
.cofoot .eyebrow{margin-top:8px}
.cofoot .copy{margin-top:22px;font-size:12.5px;color:var(--faint);max-width:80ch}
/* No sticky nav on this page, so an anchor jump needs no offset. */
.colanding{padding-top:56px}
@media(max-width:720px){.cotier{padding:30px 20px 24px}.cobadge{left:20px}.colist{grid-template-columns:1fr}.colanding{padding-top:34px}}