/* ============================================================
   BEYOND BOD FITNESS
   Brand tokens verbatim from Beyond-Bod-Fitness-Brand-Guidelines.pdf.
   Hard rules kept:
     - warm ivory is the page, never #fff
     - gold is accent only, never a headline, never a background fill
     - rose petal is never text
     - one Allura moment per screen, never under 24pt
     - the mark never sits on a dark ground
   Cheetah is her own request: a texture behind bands, never behind body
   copy or the logo, and removable in one line via --cheetah-display.
   ============================================================ */

:root{
  --berry:#93365C;
  --berry-deep:#6E2445;
  --berry-lift:#A83E69;
  --dusty-rose:#BA797D;
  --rose-petal:#F7DCD5;
  --orchid:#DFA3B7;
  --gold:#D4AF37;
  --gold-lift:#E8C55C;
  --ivory:#FAF7F2;
  --taupe:#D9CFC4;
  --ink:#2B2228;
  --ink-soft:#6A5A62;

  --f-title:"Playfair Display",Georgia,serif;
  --f-script:"Allura","Playfair Display",cursive;
  --f-body:"Montserrat",system-ui,-apple-system,sans-serif;

  --wrap:1160px;
  --pad:clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  --ease:cubic-bezier(.22,1,.36,1);

  --cheetah-display:block;
}

*,*::before,*::after{box-sizing:border-box}
blockquote,figure,figcaption{margin:0}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ivory); color:var(--ink);
  font-family:var(--f-body); font-weight:300; line-height:1.75;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}

h1,h2,h3{font-family:var(--f-title); font-weight:400; line-height:1.14; margin:0 0 .5em; letter-spacing:-.01em}
h1{font-size:clamp(2.6rem, 1.6rem + 4vw, 4.7rem)}
h2{font-size:clamp(1.95rem, 1.35rem + 2.3vw, 3.1rem); color:var(--berry)}
h3{font-family:var(--f-title); font-size:1.22rem; color:var(--berry); margin:0 0 .45rem}
p{margin:0 0 1rem}
em,i{font-style:normal}
h1 em{font-family:var(--f-script); font-size:1.32em; line-height:.8}

.script{font-family:var(--f-script); font-size:clamp(2.3rem, 1.5rem + 3vw, 4rem); line-height:1.1; color:var(--berry)}
.eyebrow{font-weight:600; font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--dusty-rose); margin:0 0 .9rem}
.wrap{width:min(var(--wrap), calc(100% - 2*var(--pad))); margin-inline:auto; position:relative; z-index:1}
section{padding:clamp(3.8rem, 2.4rem + 5vw, 7.5rem) 0; position:relative}
.lede{font-size:clamp(1.02rem, .96rem + .3vw, 1.16rem); max-width:50ch; color:var(--ink-soft)}

/* ---------- reveal (scoped to .js so a script failure never blanks the page) ---------- */
.js .rv{opacity:0; transform:translateY(20px); transition:opacity .85s var(--ease), transform .85s var(--ease)}
.js .rv.in{opacity:1; transform:none}
.js .rv:nth-child(2){transition-delay:.07s}
.js .rv:nth-child(3){transition-delay:.14s}
.js .rv:nth-child(4){transition-delay:.21s}
.js .rv:nth-child(5){transition-delay:.28s}
.js .rv:nth-child(6){transition-delay:.35s}

/* ---------- cheetah, her request ----------
   Texture, not pattern. Corner washes masked to nothing at the centre so
   it never sits under words. */
.cheetah{
  display:var(--cheetah-display);
  position:absolute; width:min(46%, 480px); aspect-ratio:1; z-index:0; pointer-events:none;
  background-image:url("../img/cheetah.webp"); background-size:220px;
  opacity:.26; mix-blend-mode:luminosity;
  -webkit-mask-image:radial-gradient(closest-side, #000 5%, rgba(0,0,0,.55) 45%, transparent 78%);
  mask-image:radial-gradient(closest-side, #000 5%, rgba(0,0,0,.55) 45%, transparent 78%);
}
.cheetah--tr{top:-9%; right:-7%}
.cheetah--bl{bottom:-12%; left:-8%}
.cheetah--tl{top:-8%; left:-8%}
/* on the pale bands it needs less lift or it turns into a pattern */
.quiz-sec .cheetah{opacity:.2; mix-blend-mode:multiply}
.hero .cheetah{opacity:.16; mix-blend-mode:multiply}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--berry); color:var(--ivory);
  padding:1.1rem 2.3rem; border-radius:3px; border:0; cursor:pointer;
  font-family:var(--f-body); font-size:.74rem; letter-spacing:.18em;
  text-transform:uppercase; font-weight:600; text-decoration:none;
  transition:background .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn:hover{background:var(--berry-deep); transform:translateY(-2px)}
/* primary CTA: a gold edge and a lifted berry so it never goes dull against pink */
.btn--gold{
  background:linear-gradient(135deg, var(--berry-lift), var(--berry));
  box-shadow:0 0 0 1px var(--gold), 0 12px 30px -12px rgba(110,36,69,.75);
  color:#fff;
}
.btn--gold:hover{
  background:linear-gradient(135deg, var(--berry), var(--berry-deep));
  box-shadow:0 0 0 1px var(--gold-lift), 0 18px 40px -14px rgba(110,36,69,.85);
}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--ivory) 88%, transparent);
  backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid color-mix(in srgb, var(--taupe) 55%, transparent);
}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; gap:1.4rem; padding:.8rem 0}
.site-header img{height:32px; width:auto}
.site-header .wrap > a:first-child{display:inline-flex; align-items:center; padding:.35rem 0}
.nav{display:flex; gap:1.7rem}
.nav a{color:var(--ink); text-decoration:none; position:relative; font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; font-weight:500}
.nav a::after{content:""; position:absolute; left:0; right:100%; bottom:-5px; height:1px; background:var(--gold); transition:right .4s var(--ease)}
.nav a:hover::after{right:0}
.header-cta{padding:.8rem 1.5rem; font-size:.66rem}

/* ============================================================ HERO ============================================================ */
.hero{padding:0; overflow:hidden}
.hero-photo{position:relative; width:100%; height:min(58vh, 470px); overflow:hidden; background:var(--berry-deep)}
.hero-photo img{width:100%; height:100%; object-fit:cover; object-position:center 15%}
.hero-photo::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(43,34,40,.16) 0%, transparent 40%, rgba(43,34,40,.45) 100%)}
.photo-badge{
  position:absolute; left:var(--pad); bottom:2.6rem; z-index:2;
  padding:.75rem 1.15rem; border-radius:12px; max-width:76%;
  background:rgba(43,34,40,.4);
  backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid rgba(250,247,242,.26); color:var(--ivory);
}
.photo-badge b{display:block; font-family:var(--f-title); font-size:1.02rem; line-height:1.2}
.photo-badge span{display:block; font-size:.68rem; color:var(--orchid); margin-top:.15rem}

.proof{
  position:relative; z-index:5; margin:-1.9rem auto 0; max-width:330px;
  background:var(--ivory); border-radius:14px; padding:.85rem 1.2rem;
  display:flex; align-items:center; gap:.9rem;
  box-shadow:0 18px 44px -18px rgba(43,34,40,.4);
  border:1px solid color-mix(in srgb, var(--taupe) 60%, transparent);
}
.proof-num{font-family:var(--f-title); font-size:1.5rem; color:#fff; background:var(--berry); border-radius:9px; padding:.4rem .75rem; line-height:1}
.proof p{margin:0; font-size:.72rem; line-height:1.4; color:var(--ink-soft)}
.proof p b{display:block; color:var(--ink); font-size:.8rem; font-weight:600}

.hero-copy{padding:2.4rem 0 clamp(2.8rem, 2rem + 3vw, 4.5rem)}
/* names the category before anything else, so nobody has to guess what this is */
.hero-kick{
  margin:0 0 .9rem; font-size:.7rem; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--berry);
  display:inline-flex; align-items:center; gap:.55rem;
}
.hero-kick::before{content:""; width:22px; height:1px; background:var(--gold)}
.hero-copy .lede{font-size:1.1rem}
.facts{display:flex; flex-wrap:wrap; gap:.5rem; margin:1.5rem 0 2rem; padding:0; list-style:none}
.facts li{
  font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  color:var(--berry); border:1px solid color-mix(in srgb, var(--dusty-rose) 55%, transparent);
  border-radius:100px; padding:.5rem 1rem; background:rgba(247,220,213,.45);
}

@media (min-width:900px){
  .hero{padding:clamp(2rem, 1rem + 3vw, 3.5rem) 0 0}
  .hero .wrap{display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(2.5rem, 1rem + 5vw, 5rem); align-items:center}
  .hero-media{order:2}
  .hero-photo{height:auto; aspect-ratio:4/5; max-height:620px; border-radius:6px}
  .hero-photo img{object-position:center 12%}
  .photo-badge{left:1.4rem; bottom:1.4rem; max-width:78%}
  .hero-copy{order:1; padding:0 0 clamp(2.5rem, 1rem + 4vw, 4rem)}
  .proof{margin:0 0 1.8rem}
}

/* ============================================================ QUIZ
   Berry ground on purpose. The card used to be a pale glass panel on a pale
   pink band, which is why nothing popped. Dark ground, light card, gold rule. */
.quiz-sec{overflow:hidden; text-align:center}
.quiz-sec .eyebrow{color:var(--orchid)}
.quiz-sec h2{max-width:16ch; margin-inline:auto; color:var(--ivory)}
.quiz{max-width:780px; margin:2.8rem auto 0; text-align:left}
.quiz-shell{
  position:relative; overflow:hidden;
  background:linear-gradient(168deg, rgba(255,255,255,.97), rgba(250,247,242,.9));
  backdrop-filter:blur(26px) saturate(1.5); -webkit-backdrop-filter:blur(26px) saturate(1.5);
  border:1px solid rgba(255,255,255,.9);
  border-radius:18px; padding:clamp(1.7rem, 1rem + 2.8vw, 3.4rem);
  box-shadow:0 50px 110px -50px rgba(0,0,0,.7), 0 0 0 1px rgba(212,175,55,.35), inset 0 1px 0 #fff;
}
/* a soft gold sheen across the top edge so it reads as a real pane of glass */
.quiz-shell::before{
  content:""; position:absolute; inset:0 0 auto 0; height:40%;
  background:linear-gradient(180deg, rgba(212,175,55,.1), transparent);
  pointer-events:none;
}
.quiz-shell > *{position:relative}
.qbar{height:3px; background:rgba(147,54,92,.12); border-radius:3px; overflow:hidden; margin-bottom:2rem}
.qfill{height:100%; width:0; background:linear-gradient(90deg, var(--gold), var(--gold-lift)); transition:width .6s var(--ease)}
.qcount{font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; font-weight:600; color:var(--dusty-rose); margin:0 0 .2rem}
.qq{font-family:var(--f-title); font-size:clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem); line-height:1.25; margin:.6rem 0 1.6rem; color:var(--berry)}
.opts{display:grid; gap:.7rem}
.opt{
  text-align:left; font-family:var(--f-body); font-size:.95rem; color:var(--ink);
  background:#fff; border:1px solid rgba(147,54,92,.14);
  border-radius:8px; padding:1.1rem 1.3rem; cursor:pointer;
  box-shadow:0 2px 8px -4px rgba(43,34,40,.18);
  transition:border-color .28s var(--ease), background .28s var(--ease), transform .28s var(--ease), box-shadow .28s var(--ease);
}
.opt:hover{border-color:var(--berry); transform:translateX(5px); box-shadow:0 10px 22px -12px rgba(147,54,92,.5)}
.opt.is-on{border-color:var(--berry); background:var(--rose-petal)}
.qback{background:none; border:0; cursor:pointer; margin-top:1.4rem; padding:.4rem 0; color:var(--ink-soft); font-family:var(--f-body); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase}
.qback:hover{color:var(--berry)}
.result{text-align:center; padding:1.2rem 0 1.4rem; border-bottom:1px solid rgba(147,54,92,.14)}
.result .badge{font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--dusty-rose); font-weight:600}
.result h3{font-size:clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem); margin:.45rem 0 .4rem}
.result p{font-size:.94rem; color:var(--ink-soft); max-width:44ch; margin-inline:auto}
/* the "why you are a fit" block, between the result and the application */
.fit{
  margin:1.4rem 0 0; padding:1.3rem 1.4rem; border-radius:12px;
  background:var(--rose-petal); border-left:2px solid var(--gold);
}
.fit-lead{margin:0; font-size:.95rem; line-height:1.75; color:var(--ink)}
.apply-note{
  margin:0 0 1.5rem; font-size:.84rem; line-height:1.7; color:var(--ink-soft); max-width:52ch;
}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:.9rem}
.field{display:grid; gap:.35rem; margin-bottom:.9rem}
.field label{font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--ink-soft)}
.field input{font-family:var(--f-body); font-size:.95rem; padding:.9rem 1rem; color:var(--ink); background:#fff; border:1px solid rgba(147,54,92,.18); border-radius:5px}
.field input:focus{outline:none; border-color:var(--berry); box-shadow:0 0 0 3px rgba(147,54,92,.12)}
.consent{display:flex; gap:.7rem; align-items:flex-start; font-size:.74rem; color:var(--ink-soft); margin:.6rem 0 1.3rem; line-height:1.6}
.consent input{margin-top:.28rem; accent-color:var(--berry)}
.err{color:#B3261E; font-size:.8rem; min-height:1.2em; margin:.7rem 0 0}
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}

/* ============================================================ HER STORY
   Condensed on purpose. A wide shot, not a towering portrait, with her
   numbers carrying the proof underneath.
   ============================================================ */
.story-head{max-width:60ch}
.story-head .lede{max-width:56ch}
.story-head .lede b{color:var(--ink); font-weight:600}
.story-line{
  font-family:var(--f-title); font-size:clamp(1.15rem, 1rem + .7vw, 1.55rem);
  line-height:1.35; color:var(--berry); margin:1.6rem 0 1.4rem; max-width:34ch;
}
.story-line b{font-weight:400; color:var(--ink)}
.story-more{
  display:inline-block; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  font-weight:600; color:var(--berry); text-decoration:none;
  border-bottom:1px solid var(--gold); padding-bottom:.3rem;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.story-more:hover{color:var(--berry-deep); border-color:var(--berry)}
.story-shot{position:relative; margin:2.6rem 0 0; border-radius:10px; overflow:hidden;
  box-shadow:0 30px 70px -38px rgba(43,34,40,.55)}
.story-shot img{width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; object-position:center 32%; display:block}
/* the uniform shot, inset over the wide one. Eleven years in the Corps is the
   credential that matters to her audience, so it should be visible without
   adding a paragraph to say it. */
.story-shot .story-inset{
  position:absolute; z-index:2;
  left:clamp(.9rem,2vw,1.8rem); bottom:clamp(.9rem,2vw,1.8rem);
  width:clamp(110px, 15vw, 190px); height:auto; aspect-ratio:3/4;
  object-fit:cover; object-position:center 18%;
  border-radius:8px; border:3px solid var(--ivory);
  box-shadow:0 22px 46px -20px rgba(43,34,40,.6);
}
.story-shot figcaption{
  position:absolute; right:clamp(.9rem,2vw,1.8rem); bottom:clamp(.9rem,2vw,1.8rem);
  background:rgba(250,247,242,.86);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.9); border-left:2px solid var(--gold);
  padding:.75rem 1.1rem; border-radius:10px; max-width:72%;
  font-family:var(--f-title); font-size:clamp(.9rem,.85rem + .3vw,1.05rem); color:var(--berry); line-height:1.3;
}
.story-stats{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:1.6rem clamp(2.5rem, 1rem + 6vw, 6rem); margin-top:2.6rem;
  border-top:1px solid color-mix(in srgb, var(--taupe) 60%, transparent); padding-top:2rem;
  text-align:center;
}
.story-stats > div{min-width:120px}
.story-stats b{display:block; font-family:var(--f-title); font-weight:400; font-size:clamp(1.7rem,1.3rem + 1.4vw,2.4rem); color:var(--berry); line-height:1}
.story-stats span{display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); font-weight:500; margin-top:.4rem}

/* the sections carrying a watermark must clip it, or it widens the document */
.story,#coaching,#faq{overflow:hidden}

/* on the dark band the mark goes ivory, which her guide allows */
.mark-wm--ivory{left:-5%; right:auto; top:38%; width:min(34%, 300px); opacity:.05}
#reviews{position:relative}
#reviews::after{
  content:""; position:absolute; z-index:0; right:-6%; top:-18%;
  width:min(40vw, 460px); aspect-ratio:1; border-radius:50%;
  border:1px solid rgba(250,247,242,.11); pointer-events:none;
}
#reviews > .wrap,#reviews > .rev-fade{position:relative; z-index:1}

/* her mark, huge and barely there, so light bands are not flat colour */
.mark-wm{
  position:absolute; z-index:0; pointer-events:none; user-select:none;
  right:-3%; top:50%; transform:translateY(-50%);
  width:min(38%, 340px); height:auto; opacity:.055;
}
.mark-wm--l{right:auto; left:-4%; opacity:.045}

/* ---------- berry bands ---------- */
.band-berry{background:var(--berry); color:var(--ivory); position:relative; overflow:hidden}
.band-berry h2{color:var(--ivory)}
.band-berry .eyebrow{color:var(--orchid)}
.band-berry .lede{color:color-mix(in srgb, var(--ivory) 80%, transparent)}
.band-berry::before{
  content:""; position:absolute; inset:-30% -10% auto -10%; height:95%;
  background:radial-gradient(52% 62% at 26% 0%, rgba(223,163,183,.24), transparent 70%);
  pointer-events:none;
}
/* a short band reads lopsided with one corner glow, so centre it there */
.band-berry.band-centred::before{
  background:radial-gradient(60% 70% at 50% 0%, rgba(223,163,183,.2), transparent 72%);
}

/* ============================================================ COACHING ============================================================ */
.inc-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1px; margin-top:3rem;
  background:color-mix(in srgb, var(--taupe) 55%, transparent); border:1px solid color-mix(in srgb, var(--taupe) 55%, transparent)}
.inc{background:var(--ivory); padding:2.1rem 1.8rem; transition:background .4s var(--ease)}
.inc-ico{
  display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
  background:var(--rose-petal); color:var(--berry); margin-bottom:1rem;
  transition:background .4s var(--ease), transform .4s var(--ease), color .4s var(--ease);
}
.inc-ico svg{width:19px; height:19px}
.inc:hover .inc-ico{background:var(--berry); color:var(--ivory); transform:translateY(-3px)}
.inc:hover{background:#fff}
.inc p{margin:0; font-size:.9rem; line-height:1.75; color:var(--ink-soft)}

/* ============================================================ THE APP
   A real device this time. The screens advance as the section moves through
   the viewport, so it reads as a product tour rather than decoration. The
   content stays deliberately stylised: she is on the standard app, not a
   white label, so nothing in here may pass for a screenshot of it.
   ============================================================ */
.appsec{
  position:relative; overflow:hidden;
  /* Deep on purpose. Four light sections ran back to back here, and the ivory
     phone had nothing to push against. On a dark ground the screen and the
     glass panel both read as lit objects. */
  background:
    radial-gradient(58% 52% at 78% 18%, rgba(223,163,183,.26), transparent 66%),
    radial-gradient(48% 48% at 10% 84%, rgba(212,175,55,.14), transparent 70%),
    linear-gradient(166deg, #7A2A4B 0%, var(--berry-deep) 52%, #571C38 100%);
  color:var(--ivory);
}
/* a soft ring behind the device so it is not floating on nothing */
.appsec::after{
  content:""; position:absolute; z-index:0; right:6%; top:50%;
  width:min(46vw, 520px); aspect-ratio:1; transform:translateY(-50%);
  border-radius:50%; border:1px solid rgba(250,247,242,.13);
  box-shadow:0 0 0 clamp(20px, 3vw, 42px) rgba(250,247,242,.035);
  pointer-events:none;
}
.appsec > .wrap{position:relative; z-index:1}
.app-grid{display:grid; gap:clamp(2.2rem, 1rem + 4vw, 4.5rem); align-items:center}
@media (min-width:900px){ .app-grid{grid-template-columns:1.05fr .95fr} }
.app-copy{
  position:relative; padding:clamp(1.7rem, 1rem + 2.2vw, 2.8rem);
  border-radius:18px;
  background:linear-gradient(165deg, rgba(255,255,255,.97), rgba(250,247,242,.9));
  backdrop-filter:blur(20px) saturate(1.35); -webkit-backdrop-filter:blur(20px) saturate(1.35);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 44px 90px -46px rgba(0,0,0,.6), 0 0 0 1px rgba(212,175,55,.22);
}
.app-copy .lede{color:var(--ink); font-weight:400}
.app-list{list-style:none; margin:1.8rem 0 0; padding:0; display:grid; gap:.5rem; max-width:46ch}
.app-tab{
  position:relative; width:100%; text-align:left; cursor:pointer;
  font-family:var(--f-body); font-size:.94rem; font-weight:400; color:var(--ink-soft);
  background:none; border:0; border-radius:8px;
  padding:.72rem .9rem .72rem 2rem;
  transition:color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease);
}
.app-tab::before{
  content:""; position:absolute; left:.9rem; top:1.32em; width:10px; height:1px;
  background:var(--gold); transition:width .35s var(--ease), left .35s var(--ease);
}
.app-tab:hover{color:var(--ink); background:rgba(255,255,255,.5)}
.app-tab[aria-selected="true"]{
  color:var(--berry); font-weight:500; background:rgba(255,255,255,.86);
  box-shadow:0 10px 26px -16px rgba(110,36,69,.5);
}
.app-tab[aria-selected="true"]::before{width:16px; background:var(--berry)}
.app-tab:focus-visible{outline:2px solid var(--gold); outline-offset:3px}

.phone-wrap{position:relative; display:flex; justify-content:center; padding-block:1rem}
.phone{
  position:relative; width:min(100%, 296px); aspect-ratio:1/1.9;
  border-radius:clamp(34px, 4.4vw, 46px); padding:11px;
  background:linear-gradient(160deg, #7E2C4C 0%, #4A1730 46%, #6E2445 100%);
  box-shadow:
    0 0 0 1px rgba(212,175,55,.4),
    0 50px 90px -34px rgba(74,23,48,.7),
    inset 0 2px 0 rgba(255,255,255,.22),
    inset 0 -2px 0 rgba(0,0,0,.25);
}
.phone-glare{
  position:absolute; inset:0; z-index:4; pointer-events:none;
  border-radius:inherit; overflow:hidden;
}
.phone-glare::after{
  content:""; position:absolute; top:-40%; left:-60%; width:60%; height:180%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transform:rotate(18deg);
  animation:glare 7s var(--ease) 1.4s infinite;
}
@keyframes glare{0%{left:-60%} 55%{left:130%} 100%{left:130%}}

.phone-screen{
  position:relative; height:100%; border-radius:clamp(26px, 3.4vw, 36px); overflow:hidden;
  background:linear-gradient(180deg, #FFFDFB 0%, var(--ivory) 55%, #F6EFE9 100%);
}
.notch{position:absolute; left:50%; top:21px; transform:translateX(-50%); width:34%; height:16px; border-radius:100px; background:#4A1730; z-index:5}

.pscr{
  position:absolute; inset:0; padding:50px 18px 24px;
  display:flex; flex-direction:column; align-items:stretch; justify-content:center;
  opacity:0; transform:translateY(12px) scale(.99); pointer-events:none;
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.pscr[data-on="1"]{opacity:1; transform:none}

.p-head{display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.9rem}
.p-lab{font-size:.56rem; letter-spacing:.24em; text-transform:uppercase; font-weight:600; color:var(--dusty-rose)}
.p-pill{
  font-size:.55rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
  color:var(--berry); background:var(--rose-petal); border-radius:100px; padding:.3rem .6rem;
}
.p-big{font-family:var(--f-title); font-weight:400; font-size:1.55rem; line-height:1.1; color:var(--berry); margin:.15rem 0 .2rem}
.p-sub{font-size:.7rem; color:var(--ink-soft)}

/* week strip */
.p-week{display:flex; gap:4px; margin-bottom:1rem}
.p-week span{
  flex:1; aspect-ratio:1; display:grid; place-items:center; border-radius:8px;
  font-size:.56rem; font-weight:600; letter-spacing:.02em;
  color:var(--ink-soft); background:rgba(147,54,92,.06);
}
.p-week .done{background:var(--berry); color:var(--ivory)}
.p-week .now{background:transparent; color:var(--berry); box-shadow:inset 0 0 0 1.5px var(--berry)}

/* the session, typeset rather than bar-charted */
.p-lifts{list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:0}
.p-lifts li{
  display:flex; align-items:baseline; justify-content:space-between; gap:.6rem;
  padding:.6rem 0; border-bottom:1px solid rgba(147,54,92,.09);
  opacity:0; transform:translateY(6px);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.p-lifts li:last-child{border-bottom:0}
.pscr[data-on="1"] .p-lifts li{opacity:1; transform:none}
.pscr[data-on="1"] .p-lifts li:nth-child(2){transition-delay:.07s}
.pscr[data-on="1"] .p-lifts li:nth-child(3){transition-delay:.14s}
.pscr[data-on="1"] .p-lifts li:nth-child(4){transition-delay:.21s}
.p-lifts em{font-family:var(--f-title); font-size:.85rem; color:var(--ink)}
.p-lifts i{font-size:.66rem; color:var(--dusty-rose); letter-spacing:.06em; white-space:nowrap}

/* macros as three quiet columns */
.p-macros{display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; margin-top:1.4rem}
.p-macros > div{display:grid; justify-items:center; gap:.4rem}
.mbar{
  width:100%; height:90px; border-radius:10px; position:relative; overflow:hidden;
  background:rgba(147,54,92,.07); display:block;
}
.mbar i{
  position:absolute; inset:auto 0 0 0; height:0; border-radius:10px;
  background:linear-gradient(180deg, var(--dusty-rose), var(--berry));
  transition:height .95s var(--ease) .15s;
}
.pscr[data-on="1"] .mbar i{height:var(--h,50%)}
.p-macros em{font-family:var(--f-title); font-size:.95rem; color:var(--berry); line-height:1}
.p-macros small{font-size:.52rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}

/* check-in: numbers, then her, actually saying something */
.p-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin:.4rem 0 1.1rem}
.p-stats span{
  display:grid; justify-items:center; gap:.2rem; padding:.7rem .3rem; border-radius:10px;
  background:rgba(147,54,92,.05);
}
.p-stats em{font-family:var(--f-title); font-size:1rem; color:var(--berry); line-height:1}
.p-stats small{font-size:.5rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft)}
.p-msg{
  display:flex; gap:.7rem; align-items:flex-start; margin-top:1.2rem;
  background:#fff; border:1px solid rgba(147,54,92,.1); border-radius:14px;
  padding:.85rem .9rem; box-shadow:0 12px 26px -18px rgba(43,34,40,.4);
}
.p-msg img{width:34px; height:34px; border-radius:50%; object-fit:cover; object-position:center 12%; flex:none}
.p-msg b{display:block; font-family:var(--f-title); font-weight:400; font-size:.8rem; color:var(--berry)}
.p-msg p{margin:.15rem 0 0; font-size:.7rem; line-height:1.55; color:var(--ink-soft)}

/* guides */
.p-cards{margin-top:1.2rem; display:grid; gap:.5rem}
.p-cards span{
  display:flex; align-items:center; gap:.65rem;
  padding:.7rem .8rem; border-radius:11px; font-size:.72rem; color:var(--ink);
  background:#fff; border:1px solid rgba(147,54,92,.1);
  opacity:0; transform:translateX(-8px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.g-ico{display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--rose-petal); color:var(--berry); flex:none}
.g-ico svg{width:14px; height:14px}
.pscr[data-on="1"] .p-cards span{opacity:1; transform:none}
.pscr[data-on="1"] .p-cards span:nth-child(2){transition-delay:.08s}
.pscr[data-on="1"] .p-cards span:nth-child(3){transition-delay:.16s}
.pscr[data-on="1"] .p-cards span:nth-child(4){transition-delay:.24s}

/* the row exists only for mobile; on desktop it vanishes from layout so the
   two chips keep floating off the phone exactly as before */
.pchip-row{display:contents}
.pchip{
  position:absolute; z-index:6; padding:.7rem 1rem; border-radius:12px;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:0 20px 44px -20px rgba(74,23,48,.45);
  white-space:nowrap;
}
.pchip i{display:block; font-size:.54rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600; color:var(--dusty-rose)}
.pchip b{display:block; font-family:var(--f-title); font-size:1rem; color:var(--berry)}
.pchip-a{left:-2%; top:16%; animation:floaty 9s ease-in-out infinite}
.pchip-b{right:-2%; bottom:20%; animation:floaty 11s ease-in-out 1.2s infinite}
@keyframes floaty{0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)}}

.phone-dots{display:flex; gap:.4rem; justify-content:center; position:absolute; bottom:-.4rem; left:0; right:0}
.phone-dots span{width:6px; height:6px; border-radius:50%; background:color-mix(in srgb, var(--dusty-rose) 55%, transparent); transition:background .4s var(--ease), transform .4s var(--ease)}
.phone-dots span.on{background:var(--berry); transform:scale(1.3)}

/* ============================================================ TRANSFORMATIONS + REVIEWS, both side scrollers ============================================================ */
.tf{overflow:hidden}
.tf-rows{margin-top:3rem; display:grid; gap:1.1rem}
.tf-row,.rev-track{display:flex; gap:1.1rem; width:max-content; animation:drift var(--dur,64s) linear infinite; animation-direction:var(--dir,normal)}
.tf-row:hover,.rev-track:hover,.tf-rows:focus-within .tf-row{animation-play-state:paused}
@keyframes drift{from{transform:translateX(0)} to{transform:translateX(-50%)}}

.tf-card{
  flex:none; width:clamp(230px, 24vw, 300px); border-radius:5px; overflow:hidden; background:#fff;
  border:1px solid color-mix(in srgb, var(--taupe) 65%, transparent);
  box-shadow:0 14px 34px -22px rgba(43,34,40,.5);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.tf-card:hover{transform:translateY(-5px); box-shadow:0 22px 46px -20px rgba(43,34,40,.45)}
.tf-card img{width:100%; height:auto; aspect-ratio:6/5; object-fit:cover; object-position:center 30%}
.tf-meta{padding:.85rem 1rem 1.05rem; text-align:center}
.tf-meta .nm{font-family:var(--f-title); font-size:.98rem; color:var(--berry)}
.tf-meta .wk{font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dusty-rose); font-weight:600}
.tf-meta .num{margin-top:.4rem; font-size:.8rem}
.tf-meta .num b{font-weight:600}
.tf-meta .num i{color:var(--dusty-rose); padding:0 .35rem}

.tf-fade,.rev-fade{position:relative}
.tf-fade::before,.tf-fade::after,.rev-fade::before,.rev-fade::after{
  content:""; position:absolute; top:0; bottom:0; width:clamp(34px,7vw,130px); z-index:2; pointer-events:none;
}
.tf-fade::before{left:0; background:linear-gradient(90deg, var(--ivory), transparent)}
.tf-fade::after{right:0; background:linear-gradient(270deg, var(--ivory), transparent)}
.rev-fade{margin-top:3rem}
.rev-fade::before{left:0; background:linear-gradient(90deg, var(--berry), transparent)}
.rev-fade::after{right:0; background:linear-gradient(270deg, var(--berry), transparent)}
.rev-track{--dur:88s; align-items:stretch}
.rev{
  flex:none; width:clamp(280px, 30vw, 380px); position:relative;
  padding:2.1rem 1.8rem 1.7rem; border-radius:14px;
  background:rgba(250,247,242,.1);
  backdrop-filter:blur(18px) saturate(1.35); -webkit-backdrop-filter:blur(18px) saturate(1.35);
  border:1px solid rgba(250,247,242,.22);
  box-shadow:0 24px 54px -30px rgba(0,0,0,.7);
  transition:transform .5s var(--ease), background .5s var(--ease), border-color .5s var(--ease);
}
.rev:hover{transform:translateY(-6px); background:rgba(250,247,242,.16); border-color:rgba(212,175,55,.5)}
.rev::before{content:"\201C"; position:absolute; top:.3rem; left:1.4rem; font-family:var(--f-title); font-size:3.4rem; color:var(--gold); opacity:.6; line-height:1}
.rev{display:flex; flex-direction:column}
.rev p{position:relative; margin:.6rem 0 1.2rem; font-size:.9rem; line-height:1.75; color:color-mix(in srgb, var(--ivory) 90%, transparent)}
.rev-foot{margin-top:auto}
.rev .who{font-family:var(--f-title); font-size:1rem; color:var(--ivory)}
.rev .role{font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--orchid); font-weight:600; margin-top:.15rem}
/* the score is the proof, so it gets its own gold-ruled line */
.rev-result{
  margin-top:1rem; padding-top:.9rem; border-top:1px solid rgba(212,175,55,.4);
  font-family:var(--f-title); font-size:1rem; line-height:1.3; color:var(--gold-lift);
}
.rev-result span{
  display:block; font-family:var(--f-body); font-size:.55rem; letter-spacing:.24em;
  text-transform:uppercase; font-weight:600; color:var(--orchid); margin-bottom:.3rem;
}

/* ---------- a real cheetah band, visible, as a section divider ---------- */
/* A true border. It sits ON the seam between two sections rather than being
   a section of its own, so it reads as trim rather than another band. */
.cheetah-band{
  position:relative; z-index:3;
  height:clamp(24px, 2.6vw, 34px); margin-block:calc(clamp(24px, 2.6vw, 34px) / -2);
  background-image:url("../img/cheetah-band.webp");
  background-size:auto 190%; background-position:center; background-repeat:repeat-x;
  border-block:1px solid color-mix(in srgb, var(--dusty-rose) 55%, transparent);
  box-shadow:0 10px 30px -14px rgba(43,34,40,.28);
}

/* ============================================================ FAQ ============================================================ */
.faq-list{max-width:820px; margin:3rem auto 0; border-top:1px solid color-mix(in srgb, var(--taupe) 60%, transparent)}
.faq-item{border-bottom:1px solid color-mix(in srgb, var(--taupe) 60%, transparent)}
.faq-q{width:100%; text-align:left; background:none; border:0; cursor:pointer;
  font-family:var(--f-title); font-size:clamp(1rem, .95rem + .4vw, 1.22rem); color:var(--berry);
  padding:1.35rem 3rem 1.35rem 0; position:relative; line-height:1.35}
.faq-q::after{content:""; position:absolute; right:.4rem; top:50%; width:11px; height:11px;
  border-right:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold);
  transform:translateY(-70%) rotate(45deg); transition:transform .4s var(--ease)}
.faq-item.open .faq-q::after{transform:translateY(-30%) rotate(225deg)}
.faq-a{max-height:0; overflow:hidden; transition:max-height .55s var(--ease)}
.faq-a p{padding:0 2rem 1.5rem 0; margin:0; font-size:.92rem; color:var(--ink-soft); line-height:1.8}
.faq-cta{margin:3rem 0 0; text-align:center}

/* ============================================================ FOOTER
   Shaped like Leira's: lockup, one line about her, social icons, then a
   quiet bottom bar. Her photo sits behind it zoomed and radial-masked, the
   same treatment as Leira's manifesto ghost, rather than a cut-out.
   The lockup is the IVORY version: her guide allows "berry and gold, ivory,
   or one solid brand colour", and on a dark ground the gold could not read.
   ============================================================ */
.foot{position:relative; overflow:hidden; background:var(--berry-deep); color:var(--ivory);
  padding:clamp(3rem, 2.2rem + 2.4vw, 4.6rem) 0 clamp(1.4rem, 1rem + 1vw, 2rem)}
.foot-ghost{
  /* she is taller than the band, so cover-crop from near the top rather than
     centring, or her head gets cut off */
  position:absolute; z-index:0; right:14%; top:0; bottom:0;
  width:min(430px, 38%); height:100%; object-fit:cover; object-position:center top;
  pointer-events:none;
  opacity:.3; filter:grayscale(.45) contrast(1.06);
  -webkit-mask-image:radial-gradient(closest-side, #000 26%, rgba(0,0,0,.45) 60%, transparent 100%);
  mask-image:radial-gradient(closest-side, #000 26%, rgba(0,0,0,.45) 60%, transparent 100%);
}
.foot::before{
  content:""; position:absolute; inset:-40% -10% auto -10%; height:130%; z-index:0;
  background:radial-gradient(45% 55% at 20% 8%, rgba(223,163,183,.18), transparent 70%);
  pointer-events:none;
}
.foot .wrap{position:relative; z-index:2}
.foot-top{display:flex; flex-wrap:wrap; gap:2rem; align-items:flex-start; justify-content:space-between}
.foot-brand img{width:min(300px, 62vw); height:auto}
.foot-brand p{margin:1.1rem 0 0; max-width:42ch; font-size:.86rem; line-height:1.75;
  color:color-mix(in srgb, var(--ivory) 70%, transparent)}
.foot-soc{list-style:none; display:flex; align-items:center; gap:.7rem; margin:0; padding:0}
.foot-soc a{
  display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
  color:var(--ivory); border:1px solid rgba(250,247,242,.3);
  transition:background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.foot-soc a:hover{background:rgba(250,247,242,.12); border-color:var(--gold); transform:translateY(-2px)}
.foot-soc svg{width:18px; height:18px}
.foot-start{margin-left:.4rem}
.foot-start a{
  width:auto; height:auto; border-radius:100px; padding:.85rem 1.5rem;
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600;
  text-decoration:none; border:1px solid var(--gold); color:var(--ivory);
}
.foot-bar{
  display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; justify-content:space-between; align-items:center;
  margin-top:clamp(2rem, 1.5rem + 1.5vw, 3rem); padding-top:1.3rem;
  border-top:1px solid rgba(250,247,242,.16);
  font-size:.68rem; color:color-mix(in srgb, var(--ivory) 55%, transparent); line-height:1.7;
}
.foot-bar a{color:color-mix(in srgb, var(--ivory) 78%, transparent); text-decoration:none}
.foot-bar a:hover{color:var(--gold-lift)}
.foot-legal{display:flex; gap:1.4rem}

/* the swipe affordance only shows where the rail exists (mobile) */
.swipe-hint{display:none; margin-top:1.1rem; text-align:center; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dusty-rose); font-weight:600}

/* ============================================================ MOBILE
   Same flow as Coach Em's: she lands first, a card straddles the edge, then
   everything centres up. Anything the photo already says is removed rather
   than repeated, and long stacks become sliders so nobody scrolls forever.
   ============================================================ */
@media (max-width:900px){
  .nav{display:none}
}
@media (max-width:760px){
  section{padding:clamp(3rem, 2.4rem + 2.6vw, 4.4rem) 0}

  /* hero: give the headline room under the proof card, and cut the two
     things the photo badge already tells you */
  .hero-copy{padding:2.9rem 0 2.8rem; text-align:center}
  .hero-copy .lede{display:none}          /* the badge already says Marine Corps */
  .facts{display:none}                     /* numbers live in the story section */
  .hero-copy h1{margin:2.2rem 0 1.6rem}
  .proof{margin:-1.9rem auto 0}
  /* the proof card sat neck and neck with the category line under it */
  .hero-kick{margin-top:1.9rem}
  .hero-photo{height:min(54vh, 430px)}
  .photo-badge{bottom:2.9rem; max-width:84%}
  h1{font-size:clamp(2.4rem, 1.7rem + 3.4vw, 3.3rem)}

  .eyebrow{text-align:center}
  h2{text-align:center; margin-inline:auto}
  .app-copy{text-align:center}
  .lede{margin-inline:auto; text-align:left}
  .story-head{text-align:center}
  .app-list{margin-inline:auto; text-align:left}

  /* coaching becomes a swipeable rail instead of six stacked blocks */
  .inc-grid{
    display:flex; gap:.9rem; margin-top:2.2rem; background:none; border:0;
    overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    padding:0 var(--pad) .4rem; margin-inline:calc(var(--pad) * -1);
  }
  .inc-grid::-webkit-scrollbar{display:none}
  .inc{
    flex:none; width:min(76vw, 300px); scroll-snap-align:center;
    border:1px solid color-mix(in srgb, var(--taupe) 60%, transparent);
    border-radius:10px; padding:1.7rem 1.4rem;
  }
  .swipe-hint{display:block}

  .tf-card{width:clamp(190px, 56vw, 240px)}
  .tf-rows{gap:.8rem; margin-top:2.2rem}
  .rev{width:min(78vw, 320px); padding:1.7rem 1.4rem 1.5rem}
  .tf-fade::before,.tf-fade::after,.rev-fade::before,.rev-fade::after{width:26px}
  .quiz{margin-top:2rem}
  .quiz-shell{padding:1.6rem 1.25rem; border-radius:14px}
  .opt{padding:1rem 1.1rem; font-size:.9rem}
  .phone{width:min(78%, 260px)}
  .pchip-a{left:-3%; top:14%}
  .pchip-b{right:-3%; bottom:18%}
  .faq-list{margin-top:2.2rem}
  .faq-q{font-size:1rem; padding:1.2rem 2.4rem 1.2rem 0}
  .cheetah{width:70%}

  /* footer stacks and she moves behind the whole band */
  .foot-top{flex-direction:column; gap:1.6rem}
  .foot-ghost{right:-18%; width:min(320px, 62%); opacity:.22}
  .foot-bar{flex-direction:column; align-items:flex-start}
  .story-shot img{aspect-ratio:4/3}
  /* the caption goes full width down here, so the inset moves out of its way */
  .story-shot figcaption{max-width:none; left:.7rem; right:.7rem; bottom:.7rem}
  .story-shot .story-inset{top:.7rem; right:.7rem; left:auto; bottom:auto; width:clamp(84px, 26vw, 124px)}
  .story-stats{gap:1rem .9rem; margin-top:2rem; padding-top:1.6rem}
  .story-stats > div{min-width:0; flex:1}
  .story-stats b{font-size:clamp(1.35rem, 1rem + 2.4vw, 1.9rem)}
  .story-stats span{font-size:.6rem; letter-spacing:.1em}
  .mark-wm{width:64%; opacity:.04}
  .appsec::after{display:none}
}
@media (max-width:560px){
  .grid2{grid-template-columns:1fr}
  .header-cta{padding:.7rem 1.05rem; font-size:.6rem; letter-spacing:.11em}
  .site-header img{height:26px}
  .btn{padding:1rem 1.6rem; font-size:.68rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1; transform:none; transition:none}
  .tf-row,.rev-track{animation:none; width:100%; overflow-x:auto}
  .phone-glare::after,.pchip{animation:none}
  .pscr{transition:none}
}


/* ============================================================
   RECEIPTS
   Her best-performing content format is "scores on screen", and she asked for
   the records on the site. They are photographs of a service record, so they
   are framed as evidence rather than polished graphics, and every number is
   repeated in brand type underneath so the claim reads even if the photo does
   not.
   ============================================================ */
.receipt{
  margin:2.4rem 0; background:#fff; border-radius:10px; overflow:hidden;
  border:1px solid color-mix(in srgb, var(--taupe) 70%, transparent);
  box-shadow:0 26px 60px -34px rgba(43,34,40,.55);
  transform:rotate(-.5deg);
}
.receipt img,
.receipt video{width:100%; height:auto; display:block; background:#EDEDED; border-bottom:1px solid color-mix(in srgb, var(--taupe) 60%, transparent)}
.receipt figcaption{padding:1.1rem 1.3rem 1.2rem; background:var(--ivory)}
.receipt-lab{
  display:block; font-size:.56rem; letter-spacing:.24em; text-transform:uppercase;
  font-weight:600; color:var(--dusty-rose); margin-bottom:.35rem;
}
.receipt figcaption b{display:block; font-family:var(--f-title); font-weight:400; font-size:1.15rem; color:var(--berry); line-height:1.25}
.receipt figcaption i{display:block; font-size:.76rem; color:var(--ink-soft); margin-top:.25rem}

/* Her fastest three mile. She asked for it in writing because, in her words,
   people buy the program off the back of this number, so it gets its own line
   under a rule rather than sitting third in a grey run-on. */
.receipt-pr{
  display:flex; align-items:baseline; gap:.55rem; flex-wrap:wrap;
  margin-top:.75rem; padding-top:.65rem;
  border-top:1px solid color-mix(in srgb, var(--taupe) 70%, transparent);
  font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  font-weight:600; color:var(--dusty-rose);
}
.receipt figcaption .receipt-pr b{
  display:inline; font-family:var(--f-title); font-weight:400; font-size:1.3rem;
  letter-spacing:0; text-transform:none; color:var(--berry); line-height:1;
}

/* the client sheet, inside a testimonial card */
.rev-receipt{
  margin:0 0 1.2rem; border-radius:8px; overflow:hidden;
  border:1px solid rgba(250,247,242,.28); background:rgba(250,247,242,.06);
}
.rev-receipt img{width:100%; height:auto; display:block}
.rev-receipt figcaption{
  padding:.5rem .7rem; font-size:.58rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:600; color:var(--gold-lift); background:rgba(0,0,0,.16);
}
@media (max-width:760px){ .receipt{transform:none; margin:2rem 0} }

/* ============================================================
   FIRED UP BY NOWFIT
   Same stamp, same proportions and opacities as the other coach
   sites (EVOLVE, R3nacer). Only the two colours are hers.
   ============================================================ */
.nowfit-stamp{background:var(--berry-deep); padding:14px 0; text-align:center}
.nowfit-stamp-link{
  display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  opacity:.5; transition:opacity .3s;
}
.nowfit-stamp-link:hover{opacity:1}
.nowfit-flame{font-size:13px; filter:grayscale(1); transition:filter .3s}
.nowfit-stamp-link:hover .nowfit-flame{filter:grayscale(0)}
.nowfit-text{
  font-family:var(--f-body); font-size:10px; font-weight:400; letter-spacing:1.5px;
  text-transform:uppercase; color:rgba(250,247,242,.4); transition:color .3s;
}
.nowfit-brand{
  font-family:var(--f-body); font-size:10px; font-weight:700; letter-spacing:1.5px;
  text-transform:uppercase; color:rgba(250,247,242,.6); transition:color .3s;
}
.nowfit-stamp-link:hover .nowfit-text{color:rgba(250,247,242,.6)}
.nowfit-stamp-link:hover .nowfit-brand{color:var(--ivory)}

/* ============================================================
   THE APP SECTION ON MOBILE
   Stacked, the four full-sentence tabs stood 264px tall and pushed the
   phone almost entirely below the fold, so tapping one changed a screen
   you could not see. On narrow screens they collapse to a single
   scrollable row of short chips sitting directly on top of the phone,
   and the phone comes in a little so the answer lands in view.
   ============================================================ */
.tab-short{display:none}
@media (max-width:899.98px){
  .app-tab .tab-long{display:none}
  .app-tab .tab-short{display:inline}

  /* a flex row wider than its parent will stretch the parent unless the
     parent is allowed to shrink, which silently pushed the copy off-screen */
  .app-copy{min-width:0}
  /* the copy card, the chip row and the grid each contributed padding, and
     stacked they put 82px between the chips and the device, which is room the
     phone needs if the whole thing is to stay inside one screen */
  .app-grid{gap:1.05rem}
  .app-copy{padding-bottom:.85rem}
  .app-list{
    display:flex; gap:.45rem; max-width:100%; min-width:0;
    margin:1.05rem 0 .5rem; padding:.2rem 0 .45rem;
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .app-list::-webkit-scrollbar{display:none}
  .app-list li{flex:0 0 auto; scroll-snap-align:start}

  .app-tab{
    width:auto; white-space:nowrap; border-radius:999px;
    padding:.6rem 1.05rem; font-size:.8rem;
    background:rgba(255,255,255,.55);
    border:1px solid color-mix(in srgb, var(--taupe) 70%, transparent);
  }
  .app-tab::before{display:none}
  .app-tab:hover{background:rgba(255,255,255,.75)}
  .app-tab[aria-selected="true"]{
    color:var(--ivory); font-weight:500; background:var(--berry);
    border-color:var(--berry); box-shadow:0 10px 24px -14px rgba(110,36,69,.8);
  }

  /* The badges get their own row element rather than sharing the phone's
     layout. Sizing them as siblings of the phone let the phone's max-content
     (four screens wide, since overflow only zeroes min-content) drive the
     track widths and stretch the badges to 320px, off the side of the page. */
  .phone-wrap{
    display:flex; flex-direction:column; align-items:center;
    gap:1rem; padding-block:0; min-width:0;
  }
  .phone{width:min(100%, 280px)}
  .pchip-row{display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; max-width:100%}
  .pchip{
    position:static; animation:none; margin-top:0;
    display:inline-flex; align-items:baseline; gap:.42rem;
    padding:.42rem .85rem; border-radius:999px; box-shadow:none;
    background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.9);
  }
  .pchip i{font-size:.52rem}
  .pchip b{font-size:.82rem}
  /* the chips above already show which screen is open */
  .phone-dots{display:none}
}

/* ============================================================
   THE PHONE BECOMES SWIPEABLE ON MOBILE
   Tap-a-tab-then-look-elsewhere is a desktop interaction. On a phone the
   native gesture for "more of the same" is a swipe, so the four screens
   become a scroll-snapped track you drag with your thumb. The chips above
   stay in sync both ways: tap one and the track slides, swipe the track
   and the chip follows. Same pattern as tabs over swipeable panes in any
   native app. Falls back to plain tapping if scroll-snap is unsupported.
   ============================================================ */
@media (max-width:899.98px){
  .phone-screen{
    display:flex; overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .phone-screen::-webkit-scrollbar{display:none}
  .pscr{
    position:static; flex:0 0 100%; scroll-snap-align:start;
    opacity:1; transform:none; pointer-events:auto; transition:none;
  }
  /* the whole track is the drag surface, so let the browser own the axis */
  .phone-wrap{touch-action:pan-y}
  .phone-screen{touch-action:pan-x pan-y}
}

/* ============================================================
   THE PHONE NOW SHOWS REAL PRODUCT SCREENS
   A screenshot is a real handset shape, so the frame takes the true
   phone aspect (576x1279) rather than the squatter 1/1.9 the drawn
   screens used. The screens carry their own status bar, so the drawn
   notch is gone from the markup.
   ============================================================ */
/* The aspect belongs to the SCREEN, not the frame. Putting 576/1279 on
   .phone measured the outer box, and the 11px bezel then left the inner
   screen at 0.4313 against a 0.4504 screenshot, so object-fit:cover was
   quietly shaving ~12px off the app's width. Give the screen the ratio and
   let the frame take its height from its content, and nothing crops at any
   width. Bigger, too: a real screenshot needs the room to read. */
.phone{aspect-ratio:auto}
/* widths live in their own queries, because this block sits after the mobile
   media query and a bare .phone rule here would silently outrank it */
@media (min-width:900px){ .phone{width:min(100%, 340px)} }
/* 300px is the widest the frame goes on a phone while the chips and the whole
   device still land inside one 812px screen, which is the point of the swipe */
@media (max-width:899.98px){ .phone{width:min(100%, 300px)} }
.phone-screen{aspect-ratio:576/1279; height:auto; background:#0A0A0B}
.pscr{padding:0}
.pscr img{width:100%; height:100%; object-fit:cover; display:block}