/* =====================================================================
   THE SHARED DESIGN SYSTEM.

   Lifted verbatim out of the-formula.html so /formula and /reviews read
   from ONE file. Two pages that must look identical and carry their own
   copies of 105KB of CSS drift the first time either is touched, and
   the drift is invisible until someone opens both side by side.

   Nothing here was rewritten in the move.
   ===================================================================== */
/* ============================================================
   CHEMISTRY — THE FORMULA
   ------------------------------------------------------------
   Tokens below are the real ones, lifted from index.html.
   Everything on this page reads from :root, so this block is
   still the only place colours and fonts are defined.
   ============================================================ */

:root{
  /* --- page tokens, mapped to the site palette --- */
  --ink:#1A1A1A;        /* index.html --black */
  --paper:#FFF8ED;      /* index.html --cream */
  --paper-2:#F5ECDA;    /* tailwind cream-dark */
  --pink:#FF6B9D;       /* index.html --pink */
  --pink-deep:#FF3A7C;  /* tailwind pink-hot — 3.24:1 on --paper. Rules, borders and LARGE text only. */
  --pink-text:#C62D60;  /* same hue and saturation as --pink-deep, value 1.0 -> 0.78.
                           4.54:1 on --paper-2, 5.04:1 on --paper, 5.32:1 on --white.
                           Use wherever pink lands on small text. */
  --cyan:#8ECAE6;       /* index.html --blue */
  --acid:#FFF1A8;       /* index.html --yellow */
  --apricot:#FFD7B5;    /* THE PATTERN belief card. Black on it is 12.96:1;
                           1.18 against --acid so the two cards read as a
                           pair, 1.27 against --paper so the card still
                           separates from the band behind it. */
  --white:#FFFFFF;

  /* Channel values for the same two tokens, so the many rgba() borders
     and hairlines further down stay driven from here instead of being
     frozen at the old ink and paper. Keep in sync with --ink / --paper. */
  --ink-rgb:26,26,26;
  --paper-rgb:255,248,237;
  --ink-2:#262626;      /* one step off --ink, for the Rewire header cells */

  /* --- wheatpaste primitives, verbatim from the site's global.css ---
     The identity is flat colour, 2px black lines and HARD offset shadows
     with no blur. This page had drifted to hairlines and flat surfaces,
     which reads editorial rather than CHEMISTRY. */
  --line:2px solid var(--ink);
  --line-bold:2.5px solid var(--ink);
  --radius-card:20px;
  --radius-block:16px;
  --radius-tag:6px;
  --radius-pill:9999px;
  --shadow-sm:3px 3px 0 var(--ink);
  --shadow-md:5px 5px 0 var(--ink);
  --shadow-card:8px 9px 0 var(--ink);

  /* --- the site's own palette, verbatim from index.html --- */
  /* The nav and footer below are copied from the site unmodified and
     read from these names. --pink is shared and identical in both. */
  --blue:#8ECAE6;
  --mint:#A8E6CF;
  --orange:#FFAB76;
  --yellow:#FFF1A8;
  --lavender:#D4B8E0;
  --cream:#FFF8ED;
  --black:#1A1A1A;

  --w:1400px;         /* desktop cap */
  --w-narrow:1040px;  /* was 800px, which rendered at ~54% of a 1280 viewport */
  --gutter:clamp(20px,5vw,56px);

  --f-sans:'DM Sans',sans-serif;
  /* Hero only. The rest of the page stays on Anton/DM Sans. */
  --f-hero:'Archivo Black',Impact,sans-serif;
  --f-hero-body:'Archivo','DM Sans',sans-serif;
  --f-black:'Anton',sans-serif;
  --f-type:'Courier Prime',monospace;

  /* Two container widths, and only two. Reading measure for body copy
     and lists; wide for cards, graphics and grids. Anything that is not
     deliberately narrower picks one of these, so left edges line up. */
  /* Reading measure for the text column INSIDE a block. The block itself
     spans the section container; only its lines are capped. */
  --measure:720px;
  --measure-display:900px;
  --wide:1200px;
  /* One horizontal inset for every block in a section, boxed or not, so
     text starts at the same x whether or not it sits inside a card. */
  --inset:clamp(18px,2.2vw,30px);

  /* Vertical rhythm. Three steps, used everywhere: between sections,
     between blocks inside a section, between elements inside a block.
     Fluid so the page does not go rigid on a phone. */
  --sp-section:clamp(56px,7vw,96px);
  --sp-block:clamp(30px,3.6vw,48px);
  --sp-el:clamp(16px,1.8vw,24px);
}

*,*::before,*::after{ box-sizing:border-box; }
/* The rest of the site gets this from Tailwind's Preflight; this page loads
   no Tailwind, so it needs saying here or a wide image overflows a phone. */
img{ max-width:100%; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-sans); font-size:clamp(16px,1.05vw,17.5px);
  line-height:1.65; -webkit-font-smoothing:antialiased;
}
a{ color:inherit; }
h1,h2,h3{ margin:0; font-weight:400; }
/* Percentage first, cap second: sections take 90% of the viewport until they
   hit the desktop cap. The old rule was max-width + fixed padding, so content
   stopped growing at 1068px no matter how wide the display got. */
.wrap{ width:min(90%,var(--w)); margin-inline:auto; padding:0; }
.wrap--narrow{ width:min(90%,var(--w-narrow)); }


/* ---------- section conventions (eyebrow + sentence-case heading) ---------- */
.band{ padding:var(--sp-section) 0; }
.band--tight{ padding:clamp(46px,6vw,80px) 0; }
.band--rule{ border-top:var(--line-bold); }
.band--alt{ background:var(--paper-2); }
.band--ink{ background:var(--ink); color:var(--paper); }
.band--pink{ background:var(--pink); }
.band--cyan{ background:var(--cyan); }

.eyebrow{
  font-family:var(--f-type); font-size:.72rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; display:inline-block; margin-bottom:1.2em;
  background:var(--acid); color:var(--ink);
  border:var(--line); border-radius:var(--radius-pill);
  padding:.5em 1.1em; box-shadow:var(--shadow-sm);
}
.band--ink .eyebrow{ background:var(--cyan); }
.band--pink .eyebrow{ background:var(--paper); }
.band--cyan .eyebrow{ background:var(--paper); }
/* capped below .h-fold: the closing "STOP STARTING OVER" ran at 6.6rem against
   the hero's 3.6rem, so the biggest words on the page were not the hero's. */
.h-1{ font-family:var(--f-black); text-transform:uppercase; font-size:clamp(2.6rem,8vw,4.2rem); line-height:.9; letter-spacing:-.028em; text-wrap:balance; }
.h-2{ font-family:var(--f-black); font-size:clamp(2.1rem,5vw,3.6rem); line-height:1.2; letter-spacing:-.025em; text-wrap:balance; }
.h-3{ font-family:var(--f-black); font-size:clamp(1.3rem,2.5vw,1.85rem); line-height:1.08; letter-spacing:-.015em; text-wrap:balance; }

/* LEADING ON THE SECTION HEADINGS, matched to the hero by measurement.
   .h-2 ran at line-height 1, which is ZERO leading: at 1440 the type is
   57.6px and the lines were 57.6px apart, so they touched. The hero runs
   1.3, but copying that ratio is the wrong move, because leading is read
   in pixels and .h-2 is half again the hero's size. Matching the hero's
   ACTUAL leading is what 1.2 does:

     hero   375: 18.0px type, 5.4px leading   |  1440: 39.1px type, 11.7px
     .h-2   375: 28.0px type, 5.6px leading   |  1440: 57.6px type, 11.5px

   .trust__h is close to the hero in size, so there the hero's own ratio
   is the right one: at 1.15 it had 2.8px of leading at 375, and 1.3 puts
   it at 5.5px against the hero's 5.4px.

   .h-1 is deliberately left at 0.9. It sets one line at every width
   measured, so its line-height changes nothing about line spacing; it
   only pads the block.

   .trust__h's value is set on its own declaration further down this file,
   not here: that one is later and equally specific, so a rule at this
   point would never apply. */
.sub{ font-size:clamp(1.05rem,1.7vw,1.3rem); line-height:1.5; max-width:38ch; margin-top:1em; }
.copy{ max-width:60ch; } .copy p{ margin:0 0 1.05em; } .copy p:last-child{ margin-bottom:0; }
.copy strong{ font-weight:700; background:var(--acid); padding:0 .16em; }
.band--ink .copy strong{ color:var(--ink); }

/* ---------- cut-paper accent (from the Instagram identity, used sparingly) ---------- */
.cut{ display:inline-block; padding:.02em .18em .06em; background:var(--pink); box-shadow:3px 3px 0 rgba(var(--ink-rgb),.85); }
.cut--cyan{ background:var(--cyan); } .cut--acid{ background:var(--acid); }
.cut--ink{ background:var(--ink); color:var(--paper); }

/* ---------- buttons ---------- */
.btn{
  /* Reset, because every purchase CTA is now a <button> submitting the
     hidden #buy form rather than an <a>. Without this the UA border,
     background and font win and the pill stops looking like a pill. */
  border:0; font:inherit; color:inherit; cursor:pointer; -webkit-appearance:none;
  appearance:none; text-align:center;
  display:inline-block; font-family:var(--f-black); text-transform:uppercase;
  font-size:clamp(1rem,1.5vw,1.2rem); letter-spacing:.02em; text-decoration:none;
  background:var(--pink); color:var(--ink); padding:.85em 2.1em;
  border:var(--line-bold); border-radius:var(--radius-pill);
  box-shadow:var(--shadow-md);
  transition:transform .12s ease, box-shadow .12s ease, background .15s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:7px 7px 0 var(--ink); }
/* A real press. The shadow collapses as the button moves into it. */
.btn:active{ transform:translate(3px,3px); box-shadow:2px 2px 0 var(--ink); }
.btn:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }

/* --pink-text, not --pink-deep: this is small white text ON pink, which is
   the same problem inverted. White on --pink-deep is 3.42:1 at 16.8px and
   fails AA; on --pink-text it is 5.32:1. */
.btn--pink{ background:var(--pink); color:var(--ink); }
/* On the ink and pink bands the default pink button has nothing to sit
   against, so it flips to cream. */
.band--ink .btn, .band--pink .btn{ background:var(--paper); }
.band--ink .btn{ box-shadow:5px 5px 0 var(--paper); border-color:var(--paper); }
.band--ink .btn:hover{ box-shadow:7px 7px 0 var(--paper); }
.band--ink .btn:active{ box-shadow:2px 2px 0 var(--paper); }
:focus-visible{ outline:3px solid var(--pink-deep); outline-offset:3px; }

/* ---------- hero ---------- */
.hero{ padding:clamp(44px,6.5vw,84px) 0 clamp(20px,3vw,36px); }
.hero__title .cut:nth-child(1){ animation:paste .5s cubic-bezier(.2,1.25,.4,1) .05s backwards; }
.hero__title .cut:nth-child(2){ animation:paste .5s cubic-bezier(.2,1.25,.4,1) .17s backwards; }
@keyframes paste{ from{ opacity:0; transform:translateY(-14px) rotate(-6deg); } }
.hero__sub{ font-size:clamp(1.2rem,2.6vw,1.75rem); line-height:1.25; max-width:26ch; margin:clamp(20px,3vw,32px) 0 0; }
.hero__body{ margin:1.1em 0 0; max-width:54ch; }
.hero__meta{ display:flex; flex-wrap:wrap; gap:0; list-style:none; padding:0; margin:clamp(26px,3.2vw,36px) 0 clamp(24px,3vw,32px); border-top:1px solid rgba(var(--ink-rgb),.16); border-bottom:1px solid rgba(var(--ink-rgb),.16); }
.hero__meta li{ font-family:var(--f-type); font-size:.9rem; padding:.9em 1.6em .9em 0; }
.hero__meta li strong{ font-family:var(--f-black); font-weight:400; display:block; font-size:1.5rem; line-height:1.1; }

/* ---------- marquee (matches homepage) ---------- */
.marquee{ overflow:hidden; border-top:1px solid rgba(var(--ink-rgb),.16); border-bottom:1px solid rgba(var(--ink-rgb),.16); padding:.7em 0; background:var(--pink); }
/* Seamless ticker. .marquee__inner holds exactly two identical tracks, so
   translating it -50% lands copy two precisely where copy one began - there is
   no frame where the join is visible and no reset jump. The old version moved a
   single track -50% of its OWN width, which ran the content out at the right
   edge. A track must be at least as wide as the viewport or the tail of the loop shows
   blank band; 5 reps ~= 3270px, which clears any common display. */
.marquee__inner{ display:flex; width:max-content; animation:slide 72s linear infinite; }
.marquee__track{ flex:0 0 auto; white-space:nowrap; font-family:var(--f-black); text-transform:uppercase; font-size:.95rem; letter-spacing:.04em; }
/* separators recede so the + in "STRENGTH + PILATES + SCULPT" reads as a
   grouping rather than another item boundary. */
/* Roughly three spaces either side, set as margin rather than literal
   space characters: HTML collapses a run of whitespace to one, so
   "&nbsp;&nbsp;&nbsp;" would be the only markup way to do it and it
   would not scale with the type. */
.marquee__sep{ font-style:normal; opacity:.42; margin-inline:.85em; }
/* the arrow connects a pair, so it stays legible; the bullet only separates
   pairs, so it recedes further. */
.marquee__arw{ font-style:normal; opacity:.7; padding:0 .06em; }
/* Held on the first phrase until the band scrolls into view. The animation
   otherwise starts at page load, and the band sits ~1450px down, so by the
   time it is seen the clock has already run it mid-phrase. The class is added
   by script, never in the markup, so with JS off it simply runs from load. */
.marquee--wait .marquee__inner{ animation-play-state:paused; }
@media (prefers-reduced-motion:reduce){ .marquee__inner{ animation:none; } }
@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- philosophy-style list ---------- */
.principles{ list-style:none; margin:clamp(24px,3vw,36px) 0 0; padding:0; max-width:56ch; }
.principles li{ padding:.85em 0; border-bottom:1px solid rgba(var(--ink-rgb),.16); font-size:clamp(1.02rem,1.6vw,1.18rem); }
.band--ink .principles li{ border-bottom-color:rgba(var(--paper-rgb),.22); }

.turn{ font-family:var(--f-black); font-size:clamp(1.1rem,1.9vw,1.35rem); line-height:1.25; max-width:34ch; }
.turn:last-child{ margin-bottom:0; }

/* ---------- mechanism ---------- */
.mech{ display:grid; gap:16px; margin-top:clamp(26px,3.2vw,40px); }
@media(min-width:760px){ .mech{ grid-template-columns:1fr 1fr; } }
.mech__item{ border:2px solid var(--ink); padding:1.2em 1.3em; }
.mech__item:first-child{ background:var(--cyan); }
.mech__item:last-child{ background:var(--pink); }
.mech__item h3{ font-family:var(--f-black); font-size:1.15rem; margin-bottom:.4em; color:var(--ink); }
.mech__item p{ margin:0; font-size:.98rem; color:var(--ink); }
.echo{ font-family:var(--f-black); font-size:clamp(1.4rem,3.4vw,2.4rem); line-height:1.06; margin-top:clamp(28px,3.4vw,44px); }
.echo span{ display:block; }
.echo span:last-child{ color:var(--pink-text); } /* 2.91:1 on --paper-2 as --pink-deep, under the 3:1 large-text bar */
.band--ink .echo span:last-child{ color:var(--pink); }

/* ---------- cards (mirrors the four-class grid) ---------- */
.grid-3{ display:grid; gap:clamp(20px,2.6vw,30px); margin-top:clamp(30px,3.6vw,48px); }
@media(min-width:900px){ .grid-3{ grid-template-columns:repeat(3,1fr); } }
.card{ background:var(--white); border:var(--line); border-radius:var(--radius-card);
  box-shadow:var(--shadow-card); padding:clamp(24px,2.8vw,34px); display:flex; flex-direction:column; }
.card--pink{ background:var(--pink); border-color:var(--ink); }
.card--cyan{ background:var(--cyan); border-color:var(--ink); }
.card__kicker{ font-family:var(--f-type); font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; opacity:.75; margin-bottom:.9em; display:block; }
.card p{ margin:.8em 0 0; font-size:.97rem; }
.specs{ list-style:none; margin:1.4em 0 0; padding:1.1em 0 0; border-top:1px solid rgba(var(--ink-rgb),.22); display:flex; gap:1.8em; flex-wrap:wrap; }
.specs li{ font-family:var(--f-type); font-size:.83rem; }
.specs li strong{ display:block; font-family:var(--f-sans); font-weight:600; font-size:.95rem; }

/* ---------- weeks ---------- */
.weeks{ display:grid; gap:1px; background:rgba(var(--ink-rgb),.2); border:1px solid rgba(var(--ink-rgb),.2); margin-top:clamp(30px,3.6vw,48px); }
@media(min-width:760px){ .weeks{ grid-template-columns:repeat(4,1fr); } }
.week{ background:var(--paper); padding:clamp(22px,2.4vw,30px); }
.week:nth-child(3){ background:var(--pink); }
.week__num{ font-family:var(--f-type); font-size:.82rem; letter-spacing:.06em; display:block; margin-bottom:.9em; opacity:.75; }
.week__name{ font-family:var(--f-black); font-size:1.15rem; display:block; margin-bottom:.5em; }
.week p{ margin:0; font-size:.95rem; }

/* ---------- schedule ---------- */
.schedule{ display:grid; gap:1px; background:rgba(var(--ink-rgb),.2); border:1px solid rgba(var(--ink-rgb),.2); grid-template-columns:repeat(2,1fr); margin-top:clamp(26px,3vw,40px); }
@media(min-width:720px){ .schedule{ grid-template-columns:repeat(7,1fr); } }
.day{ background:var(--paper); padding:clamp(15px,1.8vw,20px) 12px; text-align:center; }
.day__abbr{ font-family:var(--f-type); font-size:.78rem; display:block; margin-bottom:.6em; opacity:.7; }
.day__what{ font-family:var(--f-black); font-size:.9rem; line-height:1.15; display:block; }
.day--f{ background:var(--pink); } .day--e{ background:var(--cyan); } .day--r{ background:var(--white); }
.note{ font-family:var(--f-type); font-size:.85rem; margin-top:1.1em; opacity:.8; }

/* ---------- two column ---------- */
.split{ display:grid; gap:clamp(26px,3.6vw,54px); align-items:start; }
@media(min-width:880px){ .split{ grid-template-columns:.9fr 1.1fr; } }
.split--even{ grid-template-columns:1fr; }
@media(min-width:880px){ .split--even{ grid-template-columns:1fr 1fr; } }

/* ---------- dashboard ---------- */
.dash{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(var(--paper-rgb),.28); border:1px solid rgba(var(--paper-rgb),.28); }
.dash li{ background:var(--ink); padding:.8em .9em; font-size:.88rem; }
/* odd item count left an empty cell in the 2-col grid; the last one spans. */
.dash li:last-child:nth-child(odd){ grid-column:1/-1; }
.staccato p{ margin:0 0 .2em; font-family:var(--f-black); font-size:1rem; }

/* ---------- outcomes ---------- */
.outcomes{ display:grid; gap:1px; background:rgba(var(--ink-rgb),.2); border:1px solid rgba(var(--ink-rgb),.2); margin-top:clamp(28px,3.4vw,46px); }
@media(min-width:700px){ .outcomes{ grid-template-columns:repeat(2,1fr); } }
.outcome{ background:var(--paper); padding:clamp(20px,2.4vw,30px); }
.outcome:nth-child(even){ background:var(--white); }
.outcome h3{ font-family:var(--f-black); font-size:1.02rem; margin-bottom:.45em; }
.outcome p{ margin:0; font-size:.95rem; }

/* ---------- testimonials (matches homepage pattern) ---------- */
.quotes{ display:grid; gap:clamp(20px,2.6vw,30px); margin-top:clamp(28px,3.4vw,46px); }
@media(min-width:880px){ .quotes{ grid-template-columns:repeat(3,1fr); } }
.quotes{ align-items:start; }
/* margin:0 is the fix, not a tidy-up. .quote is a <figure> and nothing
   had ever reset the UA default of `1em 40px`, so every card sat 40px
   inside its own grid column: 339px of card in a 419px track, and the
   row reading as pushed right of the heading above it. */
.quote{ margin:0; background:var(--white); border:1px solid rgba(var(--ink-rgb),.18); padding:clamp(22px,2.6vw,30px); }
/* The review's own headline, in the member's words and her capitals.
   Was .quote__obj, which named a rhetorical objection this page never
   shipped and which nothing referenced. No text-transform: "We never
   change a word" has to cover the shouting too. */
.quote__title{ display:block; font-family:var(--f-black); font-size:.95rem;
  line-height:1.3; color:var(--pink-text); margin:0 0 .9em; font-weight:400;
  text-wrap:balance; }
.quote__pic{ display:inline-grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--paper-2); border:1px solid rgba(var(--ink-rgb),.3); font-size:.55rem; margin-right:.7em; vertical-align:middle; }
.quote__ctx{ opacity:.75; }
.verify{ font-family:var(--f-type); font-size:.88rem; margin-top:clamp(20px,2.4vw,28px); }
.quote blockquote{ margin:0; font-size:.98rem; line-height:1.55; }
.quote cite{ display:block; font-style:normal; font-family:var(--f-type); font-size:.82rem; margin-top:1.3em; line-height:1.5; }

/* ---------- instructor ---------- */
.bio{ display:grid; gap:clamp(26px,3.4vw,50px); align-items:center; }
@media(min-width:820px){ .bio{ grid-template-columns:1.2fr .8fr; } }
.bio__photo{ width:100%; aspect-ratio:4/5; object-fit:cover; border:1px solid rgba(var(--ink-rgb),.2); display:block; }
.bio__role{ font-family:var(--f-black); font-size:clamp(.95rem,1.5vw,1.1rem); line-height:1.35; margin:.6em 0 0; max-width:40ch; }
.bio__close{ font-family:var(--f-black); font-size:clamp(1rem,1.6vw,1.18rem); line-height:1.3; max-width:34ch; }
.creds{ list-style:none; margin:1.5em 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.creds li{ font-family:var(--f-type); font-size:.82rem; padding:.45em .8em; border:1px solid currentColor; }

/* ---------- offer ---------- */
.offer{ display:grid; gap:clamp(26px,3.4vw,44px); align-items:start; margin-top:clamp(28px,3.4vw,44px); }
@media(min-width:900px){ .offer{ grid-template-columns:1.1fr .9fr; } }
.stack{ list-style:none; margin:0; padding:0; }
.stack li{ display:flex; justify-content:space-between; gap:1.4em; align-items:baseline; padding:.8em 0; border-bottom:1px solid rgba(var(--ink-rgb),.22); }
.stack li span:last-child{ font-family:var(--f-type); font-size:.85rem; white-space:nowrap; opacity:.75; }
.stack li span:first-child{ display:block; }
.stack li strong{ display:block; font-weight:600; font-size:1rem; line-height:1.3; }
.stack li em{ display:block; font-style:normal; font-size:.9rem; line-height:1.45; opacity:.78; margin-top:.25em; }
.stack li em strong{ display:inline; font-size:inherit; background:var(--acid); padding:0 .15em; }
.stack__hero{ background:var(--white); border:var(--line) !important; border-radius:var(--radius-block);
  box-shadow:var(--shadow-sm); padding:1.1em 1.2em; margin:.7em 0; }
.pricebox{ background:var(--ink); color:var(--paper); padding:clamp(28px,3.2vw,40px);
  border:var(--line-bold); border-color:var(--ink); border-radius:var(--radius-card);
  box-shadow:10px 11px 0 var(--pink); }
.pricebox__proof{ border-bottom:1px solid rgba(var(--paper-rgb),.28); padding-bottom:1.2em; margin-bottom:1.4em; }
.pricebox__proof p{ margin:0; font-size:.92rem; line-height:1.5; }
.pricebox__proof cite{ font-style:normal; font-family:var(--f-type); font-size:.78rem; display:block; margin-top:.7em; opacity:.75; }
.price{ font-family:var(--f-black); font-size:clamp(2.8rem,7vw,4rem); line-height:.9; display:block; margin:.15em 0; }
.price-was{ font-family:var(--f-type); font-size:.92rem; opacity:.7; }
.price-note{ font-family:var(--f-type); font-size:.85rem; margin:.9em 0 1em; opacity:.85; }
.credit{ font-size:.92rem; line-height:1.5; margin:0 0 1.6em; padding:.85em .95em;
  border:1px solid rgba(var(--paper-rgb,247,244,239),.45); }
.credit strong{ font-family:var(--f-black); font-weight:400; }
.guarantee{ border:2px solid var(--ink); background:var(--acid); color:var(--ink); padding:1.2em 1.3em; margin-top:1.8em; }
.guarantee h3{ font-family:var(--f-black); font-size:1.02rem; margin-bottom:.4em; }
.guarantee p{ margin:0; font-size:.94rem; }

/* ---------- lists ---------- */
/* "The pattern" reads top-down in one column, centred on the page rather than
   pinned left with dead space at the right. Every block shares ONE left edge so
   the eye lands upper-left and drops straight through:
   headline -> recognition -> pattern -> solution -> CTA.
   Only the CTA centres; centring the prose would break that edge. */
/* One continuous persuasion block. The pattern and the answer to it are the same
   argument, so they share a section, a background and a single closing CTA, and
   run at the hero's width rather than a narrow centred column. */
/* Section content is centre-aligned. Constrained blocks also need their BOX
   centred (margin-inline:auto) or the text would centre inside a box that is
   still pinned left. Cards keep their own left alignment. */
/* Left-aligned by default. Centred body copy gave every line a different
   starting point; only the eyebrow, the H2s and the CTA centre now, and
   each does it explicitly below. */
.story .wrap{ text-align:left; }
.story .eyebrow{ display:block; width:max-content; margin-inline:auto; }
/* The H2 carried no bottom margin and the first block below it carried no
   top margin, so the two boxes met at exactly 0px and the heading's
   descenders sat on the card's top border. Both story H2s take the block
   step. */
.story .h-2{ text-align:center; margin-inline:auto; max-width:var(--wide);
  margin-bottom:var(--sp-block); }
/* The eyebrow is a small pill and the heading is a large block, so 14px
   between them reads as crowding on a phone. 24px is what .bioband and
   this section already use at 1440; this makes it the value at every
   width instead of only the wide one. */
.story .eyebrow{ margin-bottom:24px; }
.story .card{ text-align:left; }
.story .copy{ margin-inline:auto; max-width:var(--measure); }
.story__answer{ margin-inline:auto; }
/* The cycle fills the section edge to edge on desktop, so the two-column block
   beneath sits inside exactly the same bounds. Centred, it was 1014px in a
   1152px wrap and the columns overhung it by 69px on each side.
   Only above 900px: once it wraps to multiple rows, space-between would
   stretch a partial last row. */
.story .equation.equation--cycle{ justify-content:center; }
/* Punctuation beat, not a full section: it was 612px, of which 205 was section
   padding and another 102 was padding inside the CTA block. */
.turnband{ padding:clamp(30px,3.4vw,46px) 0; }
.turnband .h-2{ font-size:clamp(1.5rem,3vw,2.15rem); }
.turnband .sub{ font-size:clamp(.95rem,1.4vw,1.08rem); margin-top:.7em; }
/* The third line is detail, not argument, so it sits below the promise in
   the body face rather than competing with it. */
.turnband__detail{ font-size:clamp(.95rem,1.4vw,1.05rem); line-height:1.55;
  max-width:56ch; margin:.85em auto 0; opacity:.85; }
.turnband .midcta{ padding:clamp(16px,1.8vw,24px) 0 0; }


/* credibility: three small items in one row, deliberately quiet */

/* ---------- who this is for ---------- */
/* Two columns of equal weight. The disqualifying column is doing real
   work -- it is cheaper to lose the wrong buyer here than to refund her
   later -- so it gets the same card, the same padding and the same type
   as the qualifying one. Only the marker differs. */
.fit{ display:grid; gap:clamp(16px,1.8vw,26px); margin-top:clamp(20px,2.4vw,32px);
  align-items:stretch; }
@media(min-width:820px){ .fit{ grid-template-columns:1fr 1fr; } }
.fit__col{ background:var(--white); border:var(--line-bold);
  border-radius:var(--radius-card); box-shadow:var(--shadow-md);
  padding:clamp(22px,2.6vw,34px); text-align:left; }
.fit__h{ font-family:var(--f-black); font-weight:400; text-transform:uppercase;
  font-size:clamp(1.05rem,1.8vw,1.35rem); line-height:1.15; letter-spacing:-.005em;
  margin:0 0 .9em; padding-bottom:.7em;
  border-bottom:2px solid rgba(var(--ink-rgb),.25); }
.fit__list{ list-style:none; margin:0; padding:0; display:grid; gap:.75em; }
.fit__list li{ position:relative; padding-left:1.75em;
  font-size:clamp(.96rem,1.35vw,1.03rem); line-height:1.5; }
.fit__list li::before{ position:absolute; left:0; top:0;
  font-family:var(--f-black); font-size:1em; }
.fit__list--yes li::before{ content:"\2713"; color:var(--ink); }
/* Same glyph and same token as the Pattern section's refusal list. */
.fit__list--no li::before{ content:"\2715"; color:var(--pink-text); }
/* The 1:1 pointer. Not an <a> yet -- see the TODO in the markup. It is
   its own element only so wiring the anchor stays a one-line change; it
   carries no emphasis, because until it links somewhere it is body copy
   like the rest of the sentence. nowrap keeps "1:1 coaching" whole. */
.fit__see{ white-space:nowrap; }

/* ---------- faq accordion ---------- */
/* Two even columns, each expanding within itself. Thin rules, no cards, no
   shadows - the divider is the only chrome. */
.faq2{ display:grid; gap:0 clamp(28px,4vw,72px); margin-top:clamp(18px,2.2vw,30px); }
@media(min-width:900px){ .faq2{ grid-template-columns:1fr 1fr; align-items:start; } }
.faq2__item{ border-top:1px solid rgba(var(--ink-rgb),.26); }
.faq2__col{ border-bottom:1px solid rgba(var(--ink-rgb),.26); }

.faq2__h{ margin:0; }
/* <summary>: keyboard, focus, and open/closed state come from the element
   rather than from script, so every answer is in the HTML and readable
   with JS off. list-style:none plus the webkit marker rule removes the
   UA triangle; the + / - is ours. */
.faq2__q{ width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:1.2em; cursor:pointer; text-align:left; list-style:none;
  padding:clamp(15px,1.6vw,21px) 0; color:var(--ink);
  font-family:var(--f-black); font-size:clamp(1rem,1.45vw,1.14rem); line-height:1.25; }
.faq2__q::-webkit-details-marker{ display:none; }
.faq2__q:hover{ color:var(--pink-text); }
.faq2__q:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }
.faq2__icon{ flex:0 0 auto; display:grid; place-items:center; width:1.2em; height:1.2em;
  font-family:var(--f-sans); font-weight:600; font-size:1.2em; line-height:1;
  color:var(--pink-text); }
.faq2__icon::before{ content:"+"; }
.faq2__item[open] .faq2__icon::before{ content:"\2013"; }

/* No height animation: <details> shows or hides its own content, and the
   0fr->1fr trick needs a wrapper the element does not give us. Losing the
   slide is worth having the answers present without script. */
.faq2__a p{ margin:0; padding:0 0 clamp(15px,1.6vw,21px); max-width:56ch;
  font-size:1rem; line-height:1.6; }

/* ---------- the offer ---------- */
/* Pale yellow card on the warm neutral band, black kept as border and type only.
   Yellow is already this page's "important" colour, which leaves pink free to
   mean one thing here: the button. */
/* 750 / 48 / 450. Ratio units rather than pixels so the pair scales
   below 1248 instead of overflowing; capped at 1248 so at 1440 the
   columns land on exactly 750 and 450. Both cards stretch to the taller
   one. */
.offer{ display:grid; gap:48px; align-items:start;
  max-width:1248px; margin:clamp(18px,2vw,28px) auto 0; }
@media(min-width:900px){ .offer{ grid-template-columns:750fr 450fr; } }

.offer__list{ background:var(--white); border:var(--line-bold);
  border-radius:var(--radius-card); padding:clamp(24px,2.9vw,38px); margin:0; }
/* Section-level supporting line, above the two columns — it introduces the
   decision rather than the list, so it sits outside the white card. */
.offerband__sub{ font-size:clamp(1.02rem,1.5vw,1.18rem); line-height:1.5;
  max-width:56ch; margin:.85em 0 0; }

.offer__h{ font-family:var(--f-type); font-size:.88rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; opacity:1; margin:0 0 .95em;
  padding-bottom:.7em; border-bottom:2px solid rgba(var(--ink-rgb),.25); }
/* A second group heading needs air above it; the first does not, because
   the card's own padding already gives it. Keyed on following a list
   rather than on a modifier class, so any later group gets it too and
   the first never does. */
.offer__list .incl + .offer__h{ margin-top:clamp(26px,2.9vw,38px); }

/* Four labelled groups instead of eight ticks. The ticks repeated the
   BODY/MIND cards line for line; these summarise the same thing in four
   scannable claims, which is what a decision point needs rather than a
   second inventory. Rules between rather than tick glyphs — one device
   fewer, and the labels already carry the hierarchy. */
.incl{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.incl li{ padding:.85em 0; border-top:1px solid rgba(var(--ink-rgb),.22); }
.incl li:first-child{ border-top:0; padding-top:0; }
.incl li:last-child{ padding-bottom:0; }
.incl b{ display:block; font-family:var(--f-black); font-weight:400;
  text-transform:uppercase; font-size:clamp(.92rem,1.35vw,1.05rem);
  line-height:1.2; letter-spacing:.005em; }
.incl span{ display:block; font-size:.95rem; line-height:1.5; margin-top:.28em;
  opacity:.78; }
/* Nested detail. Indented and rule-marked with an en dash rather than a
   bullet, so a sub-item never reads as a top-level inclusion. Quieter
   than the span above it -- this is the contents of a line item, not
   another promise. */
.incl__sub{ list-style:none; margin:.5em 0 0; padding:0 0 0 1.1em; display:grid; gap:.3em; }
.incl__sub li{ padding:0; border-top:0; position:relative; padding-left:1em;
  font-size:.9rem; line-height:1.45; opacity:.72; }
.incl__sub li:first-child{ padding-top:0; }
.incl__sub li:last-child{ padding-bottom:0; }
.incl__sub li::before{ content:"\2013"; position:absolute; left:0; opacity:.75; }
/* Sub-rows that carry a label and a detail line. (0,2,1) so the label
   does not inherit .incl b's Anton uppercase, which is the section
   heading's treatment and far too loud one level down. */
.incl .incl__sub--pairs b{ display:block; font-family:var(--f-hero-body);
  font-weight:700; text-transform:none; font-size:1em; line-height:1.35;
  letter-spacing:0; }
.incl .incl__sub--pairs span{ display:block; margin-top:.05em;
  font-size:1em; line-height:1.4; opacity:.85; }
.incl__sub--pairs{ gap:.55em; }

/* Fits its content and sits at the top; the white card sets the row
   height. */
.offercard{ align-self:start;
  background:var(--acid); border:var(--line-bold);
  border-radius:var(--radius-card); box-shadow:var(--shadow-card);
  padding:clamp(28px,3.3vw,44px); text-align:left; margin:0; }
/* The question the price answers. Body face at H3 scale, with the rule
   under it doing the same job as the ones above the guarantee and the
   discount link. */
.offercard__q{ text-align:center; margin:0 0 .85em; padding-bottom:.75em;
  border-bottom:2px solid rgba(var(--ink-rgb),.3);
  font-family:var(--f-hero-body); font-weight:700;
  font-size:clamp(1.2rem,2.2vw,1.6rem); line-height:1.2;
  letter-spacing:-.015em; text-wrap:balance; }
/* The price block centres as a unit — label, figure and the terms line
   under it. Centring the figure alone would leave its own caption
   hanging off the left edge. */
.offercard__label,
.offercard__price,
.offercard__note{ text-align:center; }
.offercard__label{ display:block; font-family:var(--f-type); font-size:.84rem;
  letter-spacing:.18em; text-transform:uppercase; opacity:.75; }
.offercard__price{ display:block; font-family:var(--f-black);
  font-size:clamp(4rem,8vw,5.8rem); line-height:.92; letter-spacing:-.03em;
  margin:.1em 0 .16em; }
.offercard__note{ font-size:.98rem; line-height:1.45; margin:0; }
.offercard__meta{ font-family:var(--f-type); font-size:.95rem; letter-spacing:.03em;
  line-height:1.5; margin:.8em 0 0; opacity:1; }

/* the CTA is the loudest thing in this column, by size and by being the only pink */
.offercard__cta{ margin:clamp(20px,2.4vw,30px) 0 0; }
.btn--wide{ display:block; width:100%; text-align:center; padding:1em 1.2em;
  font-size:clamp(1.02rem,1.5vw,1.18rem); }

/* Consent line. Sits with the action it applies to rather than only in
   the footer, so it is visible at the point money is committed. Quiet on
   purpose — it is a disclosure, not a selling point. */
.consent{ font-family:var(--f-type); font-size:.72rem; line-height:1.5;
  margin:.9em 0 0; opacity:.75; }
.consent a{ color:inherit; text-underline-offset:2px; }

/* Directly under the button, where the last objections are answered at the
   moment of the click. Centred to sit with the full-width CTA above it.
   Ink on acid, so it takes more opacity than the hero's row on cream. */
.fud--offer{ justify-content:center; gap:.35em 1.1em; margin-top:1em; }
.fud--offer li{ color:rgba(var(--ink-rgb),.85); }
.fud--offer li::before{ color:rgba(var(--ink-rgb),.7); }

/* guarantee lives inside the card and stays quieter than the CTA */
.offercard__gtee{ margin-top:1.4em; padding-top:1.2em;
  border-top:2px solid rgba(var(--ink-rgb),.3); }
.offercard__gtee h4{ font-family:var(--f-type); font-size:.74rem; letter-spacing:.12em;
  text-transform:uppercase; margin:0 0 .55em; opacity:.8; }
.offercard__gtee p{ font-size:.85rem; line-height:1.5; margin:0; opacity:.85; }

/* The support line under the two cards in "what's inside". It sits OUTSIDE
   the weekly list on purpose, so it needs its own spacing rather than the
   list's. Centred to read as a closing statement, not a fifth row. */
.tw__plus{ margin:clamp(20px,2.6vw,30px) auto 0; max-width:60ch;
  text-align:center; font-size:clamp(1rem,1.35vw,1.1rem); line-height:1.5; }

/* ---------- THE WHATSAPP LINE, SHAPED LIKE A VOICE MESSAGE ---------- */
/* Face, play, waveform, then the sentence: the order a voice note appears
   in on a phone, so the row is recognised before it is read. Every piece
   is a token already on this page, the 2px ink line and the hard offset
   and the pink, so nothing new enters the palette. Both glyphs are inline
   SVG: no icon font, no library, no extra request. */
.vm{ margin:clamp(22px,2.8vw,32px) auto 0; max-width:64ch;
  display:flex; align-items:center; justify-content:center;
  gap:clamp(13px,1.4vw,19px); }
/* The paragraph keeps .tw__plus so its type stays exactly what it was.
   Only what the flex row now owns is overridden. */
.vm .tw__plus{ margin:0; max-width:none; text-align:left; }

/* One object, never broken between the face and the waveform whatever
   the sentence beside it does. */
.vm__msg{ flex:0 0 auto; display:flex; align-items:center;
  gap:clamp(8px,.9vw,11px); }

.vm__face{ display:block; width:clamp(54px,4.4vw,64px); aspect-ratio:1;
  border-radius:50%; border:var(--line); box-shadow:var(--shadow-sm);
  background:var(--cream); overflow:hidden; }
.vm__face img{ display:block; width:100%; height:100%; object-fit:cover; }

/* Its own disc beside the photo rather than a badge over it: nothing
   covers her face. 128px of source across 64px at most, so the circle
   stays sharp on a 2x screen with nothing to spare, which is why the
   clamp tops out where it does. */
.vm__play{ display:grid; place-items:center; width:30px; height:30px;
  background:var(--pink); border:var(--line); border-radius:50%;
  box-shadow:2px 2px 0 var(--ink); }
/* A triangle's visual mass sits left of its bounding box, so it is nudged
   right to look centred in the disc. */
.vm__play svg{ display:block; width:10px; height:12px; margin-left:2px; }

.vm__wave svg{ display:block; width:clamp(44px,4.2vw,56px); height:20px; }

/* PHONES STACK. Measured, not guessed: on one row at 375 the cluster and
   its gutters take 172px of a 335px line, which leaves the sentence 163px,
   about 20 characters, and it sets to six lines against four. The cluster
   goes above and the sentence centres under it, which is how every other
   line in this band already reads. */
@media(max-width:600px){
  .vm{ flex-direction:column; gap:clamp(13px,3.4vw,17px); }
  .vm .tw__plus{ text-align:center; }
}

/* The closing band's risk row. Same component as the hero's, centred to match
   the band, and light on the pink. */
/* THE DOUBLED CLASS IS LOAD-BEARING. .fud caps itself at max-width:70ch,
   which is narrower than this band's wrap, so the list box sat flush left
   and justify-content:center centred the three items inside THAT box
   rather than under the button. .fud is declared ~1500 lines below this,
   so at equal specificity it won on source order and max-width:none here
   did nothing. .fud.fud--close outranks it wherever either one sits.

   .fud--offer never hit this: the offer card is narrower than 70ch, so
   the cap never binds there. */
.fud.fud--close{ justify-content:center; margin-top:1.1em; max-width:none; }

/* ---------- the checkout panel ---------- */
/* HIDDEN WITH VISIBILITY, NOT display OR hidden, and that is the whole
   reason this works. Stripe mounts into it on page load so that opening
   is instant, and an iframe in a display:none subtree has no box to lay
   out in and reports no height. visibility:hidden keeps the layout and
   takes away the pixels, so Stripe sizes itself correctly while the
   panel is still out of sight.

   z-index clears the sticky bar (60), the cookie notice (40) and the
   member cards (30). Those all sit behind the scrim while this is up,
   and the script marks them inert so nothing behind can be tabbed to. */
.comodal{ position:fixed; left:0; right:0; z-index:200;
  top:var(--comodal-top, 0px); height:var(--comodal-h, 100dvh);
  display:flex; align-items:center; justify-content:center;
  visibility:hidden; opacity:0; pointer-events:none;
  transition:opacity .18s ease; }
.comodal[data-state="open"]{ visibility:visible; opacity:1; pointer-events:auto; }

/* FIXED, not absolute. The container shrinks to the visual viewport when
   the keyboard is up, and an absolute scrim would shrink with it and
   leave the page lit below the panel. */
.comodal__scrim{ position:fixed; inset:0; background:rgba(var(--ink-rgb),.55); }

/* THE PANEL IS SIZED BY ITS CONTAINER, and the container is sized to the
   VISUAL viewport, which is the only thing that shrinks when the phone
   keyboard comes up. Centring inside a box that still believed it was
   812px tall is what put the pay button under the keys. */
.comodal__panel{ position:relative;
  width:min(560px, calc(100% - 32px));
  max-height:min(92%, 960px);
  background:var(--paper); border:var(--line-bold);
  border-radius:var(--radius-card); box-shadow:var(--shadow-card);
  display:flex; flex-direction:column; overflow:hidden; }

/* The close control sits over the panel rather than in a bar above it,
   so the checkout keeps the full width it was measured at. */
.comodal__x{ position:absolute; top:8px; right:8px; z-index:2;
  width:40px; height:40px; line-height:1; font-size:1.7rem;
  display:flex; align-items:center; justify-content:center;
  background:var(--white); border:var(--line); border-radius:var(--radius-pill);
  color:var(--ink); cursor:pointer; padding:0; }
.comodal__x:hover{ background:var(--paper-2); }
.comodal__x:focus-visible{ outline:3px solid var(--ink); outline-offset:2px; }

/* Stripe sizes its iframe to its full content, so the scrolling happens
   here rather than inside it. */
.comodal__body{ overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:52px 16px 20px; }

.checkout__help{ font-size:.9rem; line-height:1.5;
  text-align:center; margin:14px 0 0; opacity:.85; }

/* WAITING FOR THE CHECKOUT. Shown only when a buy button was pressed
   before Stripe had finished mounting. The panel is up and honest about
   what it is doing rather than sending her somewhere else for being
   quick. min-height keeps the panel from opening as a sliver and then
   jumping to full size a second later. */
.comodal__wait{ display:none; align-items:center; justify-content:center;
  gap:10px; min-height:220px; margin:0;
  font-size:.95rem; text-align:center; opacity:.85; }
.comodal[data-waiting] .comodal__wait{ display:flex; }
.comodal[data-waiting] .checkout__help{ display:none; }

.comodal__spin{ width:16px; height:16px; flex:0 0 auto; border-radius:50%;
  border:2px solid rgba(var(--ink-rgb),.25); border-top-color:var(--ink);
  animation:comodal-spin .7s linear infinite; }
@keyframes comodal-spin{ to{ transform:rotate(360deg); } }
@media(prefers-reduced-motion: reduce){
  .comodal__spin{ animation:none; border-top-color:rgba(var(--ink-rgb),.25); }
}

/* PHONES GET THE WHOLE SCREEN. A 560px card with margins around it wastes
   the width a card number needs, and the keyboard would leave almost
   nothing of it visible. */
@media(max-width:600px){
  .comodal__panel{ width:100%; height:100%; max-height:100%;
    border:0; border-radius:0; box-shadow:none; }
  .comodal__body{ padding:52px 12px 24px; }
}

/* Motion is the first thing to go. */
@media(prefers-reduced-motion: reduce){ .comodal{ transition:none; } }

/* ---------- meet ana ---------- */
/* Photo left, copy right. Cream base, same frame language as the hero image:
   bold rule, card radius, hard offset shadow. No card around the copy. */
/* mint: the one brand colour still unused here. Blue is the two proof
   sections, pink the CTA bands, yellow the offer card. */
/* Swapped with the challenge band: cream here, mint there, so the page
   runs cream -> mint -> cream -> blue rather than repeating mint twice
   in three bands. */
.bioband{ background:var(--paper); padding:clamp(44px,5vw,76px) 0; }
/* .band.challengeband, not .challengeband: a later @media re-declares
   .band's padding at (0,1,0), so a bare class here lost below 900 and
   the band rendered 44px of padding instead of 64. */
.challengeband{ background:var(--mint); }
.band.challengeband{ padding-block:48px; }
/* Painted-gap targets for this band: 48 under the H2, 24 between the two
   positioning lines and again before the sub-line, 64 before the
   "every week" label, 32 before the cards. Every number below is the
   margin that produced the target, measured. */
.challengeband .h-2{ margin-bottom:40px; }
.challengeband .diff__pos{ margin-top:0; }
.challengeband .diff__pos-b{ margin-top:14px; }
.challengeband .story__sub{ margin-top:21px; }
.challengeband .tw__when{ margin:43px 0 21px; }
/* .band.challengeband, not .challengeband: .story .midcta is declared
   later at the same (0,2,0) and was winning. */
.band.challengeband .midcta{ padding-top:32px; }
/* The turn no longer needs its own top rule and step: the band edge does
   that job now. */
.challengeband .story__turn{ margin-top:0; padding-top:0; border-top:0; }
/* ROW gap and COLUMN gap declared separately. They used to share one
   clamp, so widening the space between the photo and the text would have
   widened the space between the photo and the pill on a phone, where the
   grid is stacked and only the row gap is in play. Splitting them means
   the phone keeps exactly the gap it had.

   align-items:start, not center. Centring made sense when the text was
   shorter than the photo; the text is now taller at every desktop size,
   so centring pushed its first line ABOVE the top of the photo. */
.bioband__grid{ display:grid;
  row-gap:clamp(24px,3.2vw,56px); column-gap:clamp(40px,4.5vw,64px);
  align-items:start; }
/* A plain 38fr/62fr split, with no floor on the text track. The floor was
   here briefly and it worked, but it bought characters by taking them out
   of the photo: at 1024 the portrait fell to 239px wide and read as a
   thumbnail. The ratio holds the photo instead, and the body sits near 49
   characters at that one width. Above 1100 the 40rem cap governs anyway,
   so the floor changed nothing there. */
@media(min-width:900px){ .bioband__grid{ grid-template-columns:38fr 62fr; } }
.bioband__media{ margin:0; }
.bioband__media img{ display:block; width:100%; aspect-ratio:4/5; object-fit:cover;
  object-position:center; /* keeps head and the full pilates ring in the 4:5 crop */
  border:var(--line-bold); border-radius:var(--radius-card);
  box-shadow:var(--shadow-card); }
/* a 2:3 portrait at full mobile width is ~520px tall; the square keeps it compact */
@media(max-width:620px){ .bioband__media img{ aspect-ratio:1/1; } }

/* ONE measure for the whole column, back on the container. The
   per-element caps that were here briefly gave the lead a visibly
   narrower column than the body beneath it, which read as a stepped edge
   rather than a lead-in. Every paragraph, the closing line and the badges
   now fill the same width.

   rem not ch, deliberately: ch resolves against each element's OWN font,
   so a single ch value on a container holding three type sizes produces
   three different pixel widths. rem is one number for all of them. */
.bioband__copy{ text-align:left; max-width:min(100%,40rem); }
/* The eyebrow brings its own 1.2em bottom margin, which is a gap between a
   label and the headline it labels. Pulled back to the same .42em the
   Pattern section uses so the pair reads as one unit. */
.bioband .eyebrow{ margin-bottom:0; }
.bioband .eyebrow + .h-2{ margin-top:.42em; }
.bioband__hi{ margin-bottom:.55em; }

/* Wider paragraph spacing than the old .9em: three paragraphs at 1.6
   line-height need a gap clearly bigger than their own leading, or they
   read as one block of text. */
.bioband__copy p{ margin:0 0 1.15em; font-size:1rem; line-height:1.6; }

/* The lead identifies who this is for, so it is the one paragraph that has
   to be read. Set a step up from the other two — that is the whole
   emphasis; no colour block, because the band is already mint and a third
   pastel would be noise. */
/* max-width in the lead's OWN ch, so it is a character count and not a
   pixel width borrowed from smaller type.

   margin-bottom in rem, not em. 1.15em on a larger font is a LARGER gap:
   it measured 21px under the lead against 18px between the body
   paragraphs, which is why the lead read as separated rather than as the
   first of a set. 1.15rem is the body's gap exactly. */
/* THE LEAD IS NO LONGER TYPESET APART. It used to run a step larger than
   the paragraphs under it, which made the section read as one big opening
   followed by smaller body copy. It is now the same size, weight, family
   and leading as every other paragraph in the column, so .bioband__copy p
   alone governs all five and the rem margin override is unnecessary.

   The two rules that lived here are gone with the copy they served:
   .bioband__lead strong had no <strong> left to bold, and .nobreak held
   "high-achieving women" together, a phrase the rewrite removed. */

/* margin-top is untouched: the gap above this line stays as it was. No
   width of its own; the column governs it like everything else. */
.bioband__copy p.bioband__close{ font-family:var(--f-black); font-size:clamp(1.02rem,1.6vw,1.22rem);
  line-height:1.3; margin-top:1.4em !important; }

/* Credentials, stacked rather than run together on one line — three short
   lines scan in one pass where a middot-separated sentence has to be read.
   No text-transform: the caps are literal in the markup so "CEUs" keeps
   its lowercase s instead of rendering as CEUS. */

/* ---------- the results grid ---------- */
/* Was a two-row marquee whose testimonials only existed after JS ran and
   only appeared on hover. Now a plain static grid: every name, age, count
   and quote is in the HTML source, so it is readable by a crawler, by a
   screen reader, and by anyone who never hovers or taps. */
/* .band.results, not .results: a later @media block re-declares .band's
   padding, and at equal specificity the later rule wins. The extra class
   makes this order-independent. */
.band.results{ background:var(--cyan);
  padding:clamp(40px,4.6vw,68px) 0 clamp(30px,3.4vw,48px); }

/* 34ch was a two-column leftover: it left the header 373px wide, which
   forced the second half onto three lines and left the first half fitting
   its column to the pixel. */
/* No --measure on the lead. That token is 720px, a reading measure for
   body copy, and it was capping a 43px display heading into two lines
   inside a 1296px container. The heading now runs the full wrap and sets
   on one line at its own size, with no type reduction. .results__sub
   carries its own narrower cap, so the line under it is unaffected. */
/* CENTRED, on Ana's call 2026-09-23. It was left-aligned as part of the
   same change that took --measure off, which was about letting the
   heading run on one line rather than about which edge it sat on, so
   nothing here depended on left. .eyebrow is inline-block, so it centres
   with the text. .results__legal below sets its own centring and its own
   auto margins, so it is unaffected either way. */
.results__lead{ text-align:center; max-width:none; }

/* MORE FROM MEMBERS, PAUSED 2026-09-23 on Ana's instruction. The markup
   stays, so the six quotes are still in the page source and the sweep
   script still sees them; only the section stops rendering. Deleting
   this rule brings it back and nothing else has to change.

   WHAT WENT WITH IT: the last two quotes on the page that name the
   "10-minute Mini". Nothing outside this section uses that old name any
   more, the product having been renamed to Mini through Ana's own copy
   earlier the same day. */
.trust--paused{ display:none; }
.results .h-2{ font-size:clamp(1.6rem,3.4vw,2.7rem); text-wrap:balance; }
/* 76ch, not 44. This is one short line of standing type under a
   heading, not a paragraph, so the reading measure that suits body copy
   was the only thing breaking it: it needs 602px and 44ch gave it 363.
   The cap stays rather than going to none, so the line is still bounded
   if the wording grows. */
.results__sub{ font-family:var(--f-type); font-size:.86rem; line-height:1.5;
  margin:.9em 0 0; opacity:.75; max-width:76ch; }

/* Four across at 1200+, three at 900-1199, two at 600-899, one below.
   The cap tracks the column count so a card stays near 290px at every
   step rather than ballooning at the wider ones. Sources are 580px, so
   a 290px card is a 2x export. */
.rgrid{ display:grid; gap:clamp(14px,1.8vw,22px); margin:clamp(26px,3vw,42px) auto 0;
  max-width:300px; grid-template-columns:1fr; }
/* THREE COLUMNS IS THE CEILING, and the card count is why. Five cards
   across four columns reads 4+1, which strands one card alone on a row
   at 1100 to 1399px, a common laptop width. Three columns reads 3+2 at
   every width from 800px up, so the second row is never a single card.

   Capping here also keeps the photos honest: the sources are 580px and
   the note above works back from a 290px card being a 2x export. The old
   four and five column rules grew the grid to 1260px and 1580px, which
   pushed each card past 290px and upscaled a 580px source to fill it.

   .quotes does the same thing for the same reason and caps at three.
   The max-widths track the column count so the grid never stretches a
   short row across the whole container. */
@media(min-width:560px){ .rgrid{ grid-template-columns:repeat(2,1fr); max-width:620px; } }
@media(min-width:800px){ .rgrid{ grid-template-columns:repeat(3,1fr); max-width:940px; } }

.rcard{ margin:0; background:var(--paper); border:2px solid var(--ink);
  box-shadow:5px 5px 0 var(--ink); padding:10px 10px 14px;
  display:flex; flex-direction:column; }
.rcard img{ display:block; width:100%; height:auto; border:2px solid var(--ink);
  filter:contrast(1.08) saturate(.88) brightness(1.02); }
/* Grain sits over the photo only, not over the caption, so the type stays
   crisp. Wrapper rather than a filter on the card for the same reason. */
.rcard__shot{ position:relative; }
.rcard__shot::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  opacity:.2; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size:120px 120px; }

.rcard figcaption{ margin-top:12px; }
.rcard__who{ display:block; font-family:var(--f-black); font-size:1rem;
  letter-spacing:.005em; line-height:1.15; text-align:center; }
.rcard__who i{ font-style:normal; font-family:var(--f-type); font-size:.7rem;
  letter-spacing:.06em; text-transform:uppercase; opacity:.68;
  white-space:nowrap; }
.rcard blockquote{ margin:0; font-size:.86rem; line-height:1.5;
  text-wrap:pretty; }
/* The attribution moved under the quote, so the margin moved with it. */
.rcard__who{ margin-top:.8em; }

/* No measure cap: the 62ch cap was forcing this onto three lines. It runs
   ~110 characters, which holds one line in the full wrap on desktop. */
.results__legal{ font-family:var(--f-type); font-size:.72rem; line-height:1.55;
  opacity:.7; text-align:center; max-width:none; text-wrap:balance;
  margin:clamp(18px,2vw,26px) auto 0; }

/* trust strip: one thin band, no added height beyond the widget itself */
.trust{ background:var(--cyan); border-top:1px solid rgba(var(--ink-rgb),.16);
  border-bottom:1px solid rgba(var(--ink-rgb),.16); padding:clamp(22px,2.6vw,34px) 0; }
/* stretch, not the .quotes default of start: the three cards hold
   different amounts of text, so left alone they end at three different
   depths. Content still reads from the top of each card. */
.quotes--proof{ margin-top:0; gap:clamp(14px,1.6vw,20px); align-items:stretch; }

/* ---------- the WhatsApp screenshots --------------------------------
   These three testimonials are the actual conversations, shown as
   images. That is the point of them: a rebuilt-in-markup version looked
   the same as copy Ana wrote herself, which is the exact doubt a
   testimonial is there to remove. The picture is the evidence.

   The card holds nothing but the shot, the name and the badge, so the
   image gets the full width of the column at every size. The crop
   already removed the input bar and the side margins, so what scales
   down is the message and not the furniture around it. */
.quotes--wa{ margin-top:0; gap:clamp(14px,1.6vw,20px); align-items:start; }

.trust .quote.wa{
  background:var(--paper-2,#F5ECDA);
  border:1px solid rgba(var(--ink-rgb),.14);
  padding:clamp(10px,1.2vw,14px) clamp(10px,1.2vw,14px) clamp(14px,1.6vw,18px);
}
/* width/height are on the element too, so the row reserves its space
   before the bytes land and the section below it does not jump. */
.wa__shot{
  display:block; width:100%; height:auto;
  border-radius:8px;
}
.trust .quote.wa cite{ margin-top:1em; }
/* The attribution link. It is the ONLY place "Verified on Trustpilot"
   appears, so the claim cannot exist without something to check it
   against. See the review template in the markup. */
.quote__src{ display:inline-block; margin-top:.9em; font-family:var(--f-type);
  font-size:.66rem; letter-spacing:.09em; text-transform:uppercase;
  color:inherit; opacity:.7; text-underline-offset:3px; }
.quote__src:hover{ opacity:1; }
.trust__h{ font-family:var(--f-black); font-weight:400; text-transform:uppercase;
  font-size:clamp(1.15rem,2.2vw,1.6rem); line-height:1.3; letter-spacing:-.01em;
  margin:0 0 clamp(14px,1.8vw,22px); }
.trust .quote{ background:var(--white); padding:clamp(16px,1.8vw,22px); }
.trust .quote blockquote{ font-size:.92rem; line-height:1.5; }
.quote__stars{ display:block; color:var(--pink-deep); font-size:.95rem;
  letter-spacing:.12em; margin-bottom:.6em; }
/* CENTRED, and so is the Results attribution. The badge under it was
   already centred, so a left-aligned name left every proof card on the
   page with a centred line under a flush-left one. Centring the name is
   the smaller change of the two and it matches the hero card, where the
   name and badge are both centred rows of the grid. */
.trust .quote cite{ margin-top:.9em; text-transform:uppercase; letter-spacing:.08em;
  font-size:.7rem; opacity:.65; text-align:center; }
/* Two-column editorial close to the section. The section itself is centred, so
   this block re-declares left alignment for both columns. The statement carries
   the weight (uppercase display type, wider column); the explanation answers it
   at body size. Sits tight under the cycle so it reads as continuous with it. */
/* One split editorial unit, not two paragraphs side by side. 40/60, both columns
   starting at the same y. The right side is a bordered card so the two halves
   read as connected - a card OR a divider, never both. Background stays cream
   throughout; the card is an outline, not a new colour block. */
/* The one explanation, under the cycle.
   Two faces total: Anton for the claim, DM Sans for the reasoning. No
   card, no rule, no accent block, no third column - the cycle above is
   the centrepiece and nothing down here competes with it.
   The measure is capped in ch so it stays a comfortable reading line
   whatever the viewport does; .story .wrap is already centred, so the
   auto margins are only doing the box centring. */
/* ---------- the pattern: four blocks around the cycle ---------- */
/* The section wrap is centre-aligned; every block here is a read, not a
   statement, so each one re-declares left. */
/* Every block in this section shares the section's own container — the
   same one the Body/Mind cards use — so all six have identical left and
   right edges. max-width:none rather than a number: it then tracks .wrap
   at every viewport instead of matching it at one.
   The inset is on .pat itself, not only on .pat--box, because otherwise
   boxed text started 30px in and unboxed text at 0. That is what made
   the cross list look indented against the closers. */
/* The transparent border is load-bearing: .pat--box adds a 2px one, so
   without a matching border on the unboxed blocks their text started 2px
   left of the boxed text. Same border box everywhere; --box only colours
   it in. */
.pat{ text-align:left; max-width:none; margin-inline:auto;
  padding-inline:var(--inset);
  border:var(--line); border-color:transparent; }
.pat + .pat{ margin-top:var(--sp-block); }
/* Row 1: the card on the left, the loop stacked over the dark block on
   the right. One stack below 900. The wrappers sit around the blocks
   where they already were, so the mobile reading order is the markup
   rather than a re-ordering. */
/* start, not stretch: each card is only as tall as its own content and
   the two columns hang from the same top edge. stretch made both cards
   the height of the taller one and then centring pushed the left card's
   heading into the middle of a tall yellow box, which read as an empty
   band above it. */
.pat-row{ display:grid; gap:48px; align-items:start; }
@media(min-width:900px){ .pat-row{ grid-template-columns:1fr 1fr; } }
/* margin:0 is load-bearing: .pat and .cycleband carry margin-inline:auto
   for the single-column stack, and auto side margins beat a grid item's
   default justify-self:stretch — the items shrink-wrapped their tracks
   (624/277 with a 222px gap) instead of filling them. */
.pat-row > .pat{ margin:0; }
.pat-row + .pat, .pat + .pat-row{ margin-top:var(--sp-block); }
.pat-row .pat p, .pat-row .pat__list, .pat-row .pat__intro{ max-width:none; }

/* Beat spacing below row 1. .pat carries a transparent border, so the
   painted gap runs 2px over the margin — 94 lands on 96. Measured, not
   assumed. Fluid below 900, where 96 would be too much. */
/* (0,2,0), not (0,1,0): .pat + .pat sets the default step at (0,2,0)
   and beats a bare modifier class. 64px of PAINTED gap below box 2. */
.pat-row + .pat{ margin-top:var(--sp-block); }
.pat-row + .pat__cta{ margin-top:64px; }
/* Full container, and no text-wrap:balance. Balance splits the lines
   evenly instead of filling the measure, which held them to ~741px in a
   1232px column and cost an extra line. Two lines at 36.8px is the
   trade you asked for over shrinking the type. */
/* (0,3,1). .pat p.pat__peak is (0,2,1) and beat the earlier (0,2,0)
   override, so max-width stayed 900 and text-wrap stayed balance —
   balance splits lines evenly instead of filling, holding them to 741px
   inside a 1232px column. `normal` is NOT a valid text-wrap value, so
   that declaration was dropped and balance survived it — `wrap` is the
   keyword that turns it off. */
.pat.pat--closer p.pat__peak{ max-width:none; margin-top:0;
  text-wrap:wrap; }
.pat--box{ border-color:var(--ink); box-shadow:var(--shadow-md);
  padding-block:clamp(14px,1.5vw,18px); }
.pat--acid{ background:var(--acid); }
/* "Higher contrast than block 1" — acid on cream is the quietest pairing
   on the page, so its answer is the loudest one the palette has. */
.pat--ink{ background:var(--ink); color:var(--paper); }
/* The block runs the full container; the text column does not. Without
   this a line of body copy ran the block's whole width (~1232px at
   1440), which is roughly twice a readable measure.
   margin-right:auto, never margin-inline:auto — centring the capped
   column would break the shared left edge that every block here is
   aligned on. */
.pat p, .pat__list, .pat__intro{ max-width:var(--measure); margin-right:auto; }
.pat p{ font-size:clamp(1rem,1.4vw,1.08rem); line-height:1.6; margin:0; }
.pat p + p{ margin-top:.85em; }
.pat strong{ font-weight:700; background:var(--acid); padding:0 .14em; }
/* MUST stay after .pat strong. Both selectors are (0,1,1), so at equal
   specificity source order decides — and with this rule above .pat
   strong, .pat strong won the background while an earlier color:acid
   survived. That gave acid text on an acid block: contrast 1.00, and
   the highlighted lines rendered as blank yellow bars. Highlighted text
   on the dark block is ink on acid; the rest inherits the block cream. */
.pat--ink strong{ background:var(--acid); color:var(--ink); }
/* Bold alone. The underline read as a hyperlink, and the acid highlight
   is invisible on an acid card, so weight is the only honest device
   left here. */
.pat--acid strong{ background:none; text-decoration:none; }

/* Title face and title scale. Anton at the .h-3 step -- the heading size
   for something inside a card, not the .h-2 section step, which at 57.6px
   would run four lines here and swamp the eight items below it.
   font-weight:400 because Anton ships one weight; there is no bold to
   apply, and asking for 700 would only invite a synthesised one. */
.pat p.pat__intro{ font-family:var(--f-black); font-weight:400;
  font-size:clamp(1.3rem,2.5vw,1.85rem); line-height:1.12;
  letter-spacing:-.015em; }

/* THE TWO COMPARISON IMAGES. Same grid as .pat-row--duo below, so the
   two columns match the cards they sit above and collapse at the same
   point. Every word is inside the pictures, so they carry their content
   in alt text rather than in markup. */
.patcompare{ display:grid; gap:clamp(18px,2.4vw,44px);
  margin:clamp(20px,2.6vw,38px) 0 0; }
.patcompare__item{ margin:0; position:relative; container-type:inline-size; }
/* NO BOX. Both files carry a real alpha channel, verified: min 0, max 255,
   mean 62 to 71 across the shipped WebP and the PNG fallback. The white
   card was CSS, not the artwork, and it was fighting the transparency the
   files already had. The pills now sit on the cream page. */
.patcompare__item img{ display:block; width:100%; height:auto; }

/* ============================================================
   THE SPEECH BUBBLES AS REAL TEXT.

   Baked into the artwork they rendered at 12px of x-height in a 1356px
   file, which came out at 2.6px on a phone. That is below the size at
   which letterforms exist, so the words were gone. As HTML they set
   their own size and hold at 5.7px on a phone and 6.8px on desktop.

   The layer sits over the picture at inset 0, so every position is a
   percentage of the image itself and holds at any rendered width. The
   numbers in the style attributes were measured off the 3375x4219
   master, not guessed.

   The artwork these sit on has the drawn bubbles cut out of it, so each
   line appears once. Nothing here is decorative: this is the only copy of
   those words on the page, which is why it is real text rather than being
   marked aria-hidden.
   ============================================================ */
.patbub{ position:absolute; inset:0; pointer-events:none; }
.patbub__b{ --bub:#000;
  position:absolute; top:var(--t); transform:translateY(-50%);
  display:inline-flex; align-items:center; min-height:var(--h);
  /* 2.8cqw of the image's own width, with a floor, so one rule serves the
     480px desktop render and the 297px phone render. */
  font:500 max(11px,2.8cqw)/1.2 var(--f-sans);
  color:#fff; background:var(--bub);
  border-radius:999px; padding:.36em .8em; white-space:nowrap; }
.patbub--new .patbub__b{ --bub:#009299; }
.patbub__b--r{ right:var(--x); }
.patbub__b--l{ left:var(--x); }
.patbub__b::after{ content:""; position:absolute; top:100%;
  border:.42em solid transparent; border-bottom:0;
  border-top-color:var(--bub); }
.patbub__b--tl::after{ left:.9em; }
.patbub__b--tr::after{ right:.9em; }

/* DESKTOP: 480px each rather than the 631px the column gave them.
   The source is 1356px wide, so 480 renders it at 35%. */
@media(min-width:900px){
  .patcompare{ grid-template-columns:repeat(2,minmax(0,480px));
    justify-content:center; }
}

/* PHONE: one row that scrolls, each image wide enough to read, with the
   next one peeking so the swipe is discoverable without a caption.

   The two half-width columns are gone, 2026-09-22. At 167px per image the
   card text measured 2.6px of x-height and the bubbles 1.5px, so the
   layout showed a picture of words rather than words. */
/* PHONE: THE SAME PAIR, STACKED. It used to be a horizontal scroller
   with the second picture peeking off the edge, which is a different
   thing from what desktop shows: two complete panels, side by side, on
   the page's own cream. Stacked is that same treatment turned ninety
   degrees, which is the only way two 4:5 panels fit a narrow screen
   without shrinking past reading.

   Each one now takes the full wrap rather than 86% of it, so the
   artwork renders 40px wider than it did in the scroller. */
@media(max-width:899.98px){
  .patcompare{ grid-template-columns:minmax(0,1fr);
    gap:clamp(20px,5vw,32px); }
}

/* The sub under the section heading, at the body size the page uses for
   reading copy rather than the heading face.

   NOT .story__sub, which was the obvious name and is already taken: that
   class is declared twice further down, the later one setting Anton and
   uppercase, and it belongs to the line under the challenge band's
   heading. A rule written here under that name is simply dead, which is
   how this was found. */
.patcompare__lede{ font-size:clamp(1rem,1.15vw,1.1rem); line-height:1.55;
  max-width:62ch; margin:.85em auto 0; text-align:center; }

/* No clear:left here any more -- the float it cleared was the headshot. */
.band.story .h-2 .h2-line{ display:block; text-wrap:balance; }

/* HER VOICE, not the page's. The question and the four answers she
   gives herself are set in italic and indented behind a rule, so the
   reader can see where the page stops talking and she starts. */
.pat p.pat__inner{ font-style:italic; margin:.45em 0 0;
  padding-left:1em; border-left:2px solid rgba(var(--ink-rgb),.28); }
.pat p.pat__inner + .pat__inner{ margin-top:.3em; }
/* The hinge of the section. */
.pat p.pat__turn{ font-family:var(--f-hero-body); font-weight:700;
  margin-top:1.15em; }
/* One notch heavier than the four lines above it, because it is the
   answer to them. */
.pat p.pat__come{ font-weight:700; }
.pat__list{ list-style:none; margin:1.15em 0 0; padding:0; }
/* Level 6, the body size, shared with .pat p and .diff__pos-a. */
.pat__list li{ position:relative; padding:0 0 0 1.6em; margin:0 0 var(--sp-el);
  font-size:clamp(1rem,1.4vw,1.08rem); line-height:1.5; }
.pat__list li:last-child{ margin-bottom:0; }
.pat__list li::before{ position:absolute; left:0; top:0;
  font-family:var(--f-black); font-size:.95em; }
/* Mint on the acid card is 1.24:1 -- two pale pastels, effectively
   invisible. Same fix the hero's ticks already use: keep the colour and
   give it an ink outline so the mark reads. */
.pat__list--yes li::before{ content:"\2713"; color:var(--mint);
  -webkit-text-stroke:1.2px var(--ink); }
/* The palette carries no true red. --pink-text is the deepest red-leaning
   token in it and the only one that clears 4.5:1 on cream, so the crosses
   read as refusals without dropping below contrast. */
.pat__list--no li::before{ content:"\2715"; color:var(--pink-text); }

/* Underline as emphasis. Thicker and further off the baseline than a
   link's, since underline usually means "clickable" -- there is nothing
   clickable in this box, but the mark should still not imitate one. */
.pat__ul{ text-decoration:underline; text-decoration-thickness:2px;
  text-underline-offset:4px; }
/* Level 4, shared with the equation and the positioning line. */
.pat__list--no li{ font-family:var(--f-black); text-transform:uppercase;
  letter-spacing:.005em; font-size:clamp(1rem,1.75vw,1.4rem); line-height:1.25; }

/* p.pat__answer, not .pat__answer: .pat p is (0,1,1) and beats the bare
   class, which is what once rendered this at body size.
   Level 4, the same step as the crosses it answers — it is the payoff to
   that list, not a headline, and the identity closer below has to stay
   the largest thing in the section. Set apart by case and by space
   rather than by size: the crosses are uppercase, this is not.
   sp-el above, not sp-block, so the list and its answer read as one
   thought. */
.pat p.pat__answer{ margin-top:22px; font-family:var(--f-black);
  font-size:clamp(1.05rem,1.75vw,1.4rem); line-height:1.25; }

/* The emotional peak. Was 62.4px over four lines — 399px, 44% of a
   900px viewport, which read as a display headline rather than the end
   of a paragraph. Two steps down: clear of body copy and of .h-3, well
   under .h-2. Qualified rather than !important, same specificity reason
   as .pat__answer. */
.pat p.pat__peak{ font-family:var(--f-black); font-weight:400;
  font-size:clamp(1.3rem,2.9vw,2.3rem); line-height:1.12;
  letter-spacing:-.018em; text-wrap:balance; margin-top:var(--sp-el);
  max-width:var(--measure-display); }
.pat__peak strong{ font-weight:400; background:none; padding:0;
  text-decoration:none; }

.pat__cta{ text-align:center; margin:var(--sp-block) auto 0; }
.pat__cta .faces{ justify-content:center; margin-top:clamp(12px,1.5vw,18px); }

.story .eyebrow + .h-2{ margin-top:.42em; }
.story .copy{ max-width:66ch; }
.story__copy{ margin-top:clamp(16px,1.8vw,22px); }
.story .copy p{ margin:0 0 .55em; }
.story .copy strong{ background:var(--acid); padding:0 .16em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone; }

/* The answer, not a new section: a pink rule ties it straight to the two lines
   above it instead of a gap that reads as a section break. */
.story__turn{ margin-top:var(--sp-section); padding-top:var(--sp-block);
  border-top:4px solid var(--pink); }
/* no measure cap: at .h-2 size the line needs 968px in a 1152px wrap, so it
   holds one line unaided. The 22ch cap was the only thing breaking it. */
.story__answer{ text-transform:uppercase; letter-spacing:-.022em;
  display:inline-block; background:var(--acid); padding:.1em .32em; }
/* Level 3, shared with p.pat__answer. Was 32px against its 30.4 — two
   sizes for the same job. */
.story__sub{ margin-inline:auto; font-family:var(--f-black); text-transform:uppercase;
  font-size:clamp(1.35rem,2.6vw,1.9rem);
  line-height:1.1; letter-spacing:-.015em; margin:.45em 0 0; color:var(--ink); }

.story .split{ margin-top:clamp(30px,3.4vw,48px); }
.story .midcta{ text-align:center; padding:var(--sp-block) 0 0; }

/* ---------- why it's different + what you get (one section) ---------- */
/* The whole turn is centred. text-align on the PARENT is what does it:
   .story__answer is display:inline-block (it carries the acid block), so
   its own text-align centres the words inside the highlight while the
   highlight itself is placed by the parent. Centring the h2 alone left
   it sitting at the container's left edge. */
.story__turn{ text-align:center; }
/* No measure cap: the claim has to hold one line, and it needs ~750px. */
.diff__pos{ max-width:none; margin:var(--sp-el) auto 0; text-align:center; }
.diff__pos-a, .diff__pos-b{ display:block; }
.diff__pos-a{ font-size:clamp(1rem,1.4vw,1.08rem); line-height:1.45; opacity:.7; }
/* wrap, not balance: balance splits an unwrapped line into two even
   ones, which is the opposite of holding it on one. */
.diff__pos-b{ font-size:clamp(1rem,1.75vw,1.4rem); font-weight:600; line-height:1.38;
  margin-top:.35em; text-wrap:wrap; max-width:none; }
.diff__pos-a{ text-wrap:balance; }

/* Weekly qualifier. Small, but it is the difference between "four sessions
   a week" and "four sessions in total". */
.tw__when{ text-align:center; font-family:var(--f-type); font-size:.72rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; opacity:.7;
  margin:clamp(30px,3.4vw,46px) 0 clamp(14px,1.6vw,20px); }

/* Mobile-first: one column, and only two once there is room for both to
   stay readable. */
.tw{ display:grid; gap:clamp(20px,2.4vw,32px); }
@media(min-width:900px){ .tw{ grid-template-columns:1fr 1fr; align-items:stretch; } }

/* NO margin-bottom here. Grid stretch sizes the MARGIN box, so a bottom
   margin on one card silently makes its border box shorter than the row. */
/* The story section is centre-aligned, and these cards inherit it. A
   centred list of deliverables is the opposite of scannable — the eye has
   no fixed left edge to run down — so the cards opt out. The headline and
   positioning statement above stay centred with the rest of the section. */
.tw__card{ text-align:left; display:flex; flex-direction:column; margin:0;
  background:var(--white); border:var(--line-bold); border-radius:var(--radius-card);
  box-shadow:var(--shadow-card); padding:0 clamp(16px,1.7vw,22px) clamp(18px,2vw,26px); }
/* The side padding comes in 4px from the 26px it used to carry. The row
   has to hold a 110px label, a 67px chip and a description that needs
   about 365px to stay on two lines, and at 1440 those did not all fit.
   Taken off the padding rather than the type or the gap, both of which
   had already given what they could. The bottom padding is unchanged,
   so the card's vertical rhythm is untouched. */

.tw__head{ align-self:flex-start; font-family:var(--f-black); font-weight:400;
  font-size:clamp(.82rem,1.2vw,.92rem); text-transform:uppercase; letter-spacing:.08em;
  border:var(--line); border-radius:var(--radius-pill); box-shadow:2px 2px 0 var(--ink);
  padding:.4em .9em; margin:0; transform:translateY(-.85em); }
.tw__card--body .tw__head{ background:var(--cyan); }
.tw__card--mind .tw__head{ background:var(--pink); }

.tw__list{ list-style:none; margin:0; padding:0; }
.tw__item{ display:grid; grid-template-columns:auto 1fr; gap:0 clamp(12px,1.4vw,18px);
  align-items:start; padding:clamp(13px,1.5vw,18px) 0;
  border-top:1px solid rgba(var(--ink-rgb),.22); }
.tw__item:first-child{ border-top:0; padding-top:.2em; }

/* The quantity is the thing to scan, so it gets the cut-paper treatment:
   flat accent, hard offset, no blur. Fixed min-width so 4x, 2x and 1x
   line up in a column instead of stepping in and out. */
.tw__qty{ display:grid; place-items:center; min-width:2.4em;
  font-family:var(--f-black); font-weight:400; font-size:clamp(1.35rem,2.4vw,1.75rem);
  line-height:1; letter-spacing:-.02em; padding:.28em .3em;
  border:var(--line); border-radius:var(--radius-tag); box-shadow:2px 2px 0 var(--ink); }
.tw__card--body .tw__qty{ background:var(--cyan); }
.tw__card--mind .tw__qty{ background:var(--pink); }

.tw__def{ display:block; }
.tw__name{ display:block; font-family:var(--f-black); font-weight:400;
  font-size:clamp(1rem,1.5vw,1.2rem); line-height:1.15; letter-spacing:-.01em;
  text-transform:uppercase; }
.tw__meta{ display:block; font-family:var(--f-type); font-size:.84rem; line-height:1.45;
  margin-top:.3em; opacity:.85; }


.story .tw__when + .tw{ margin-bottom:0; }

/* ---------- THE CHALLENGE BAND ---------- */
/* Three beats down the page: the week, the product, the button. The
   two-column version tied the mockup's column to the panels' height,
   which is why the leftover space kept growing as the copy grew. Here
   nothing has to match anything else's height. */
/* ~48px between the two panels, which is the gap asked for and wider
   than the .tw default this overrides.

   align-items:start, not the stretch .tw carries at 900 and up: THE
   REWIRE has three rows against THE TRAINING's four, and stretching it
   to the taller card left about 150px of white under its last row. Each
   card sizes to its own content now and both hang from the same top
   edge. (0,2,0) beats the media query's (0,1,0) whatever the order. */
.challengeband .tw{ gap:clamp(24px,3.4vw,48px); align-items:start; }
/* Full container width at its own aspect ratio, no card treatment: it
   is the product, not a panel. */
.chal__media{ margin:clamp(30px,3.6vw,48px) auto 0; }
.chal__media img{ display:block; width:100%; height:auto;
  border:0; box-shadow:none; border-radius:0; }

/* The definition splits into label and description instead of stacking
   them. Everything else about the row, the chip, the pill and the card
   is the original rule, untouched. */
/* The label column is sized to the labels, not to a share of the row.
   At 40% it was 169px while the widest label, THE FORMULA, needs 94px,
   so every row spent 75px on nothing and the description wrapped to
   three and four lines inside what was left. A clamp keeps one column
   for all rows, which is what holds the labels on a common left edge
   when each row is its own grid.

   The 118px ceiling is measured, not picked. 10-MINUTE MINI is the
   widest label at 110px, ahead of THE FORMULA's 94px, and Anton stops
   growing at 1.2rem above 1280, so 110px is the widest it ever needs.
   It was 100px while that row read 10-MIN MINI; the longer wording
   wrapped it to two lines, which is the thing the shorter label was
   introduced to fix.

   Those two requirements collide by a few pixels: the label needs 110px
   and THE SCIENCE's description needs about 360px, and the row only has
   so much. The 4px came out of the gutter between them rather than out
   of the type, which keeps both at one and two lines respectively. */
.tw__item--split .tw__def{ display:grid;
  grid-template-columns:clamp(86px,23%,112px) minmax(0,1fr);
  gap:0 clamp(10px,1.1vw,14px); align-items:baseline; }
/* Sans, not Courier, and this is a readability fix rather than a style
   preference. These descriptions are sentences now, up to 106
   characters, and Courier Prime is a monospace at roughly 0.6em a
   character against the sans's 0.5em, so the same words need about a
   fifth more line. Smaller than the label, which stays in the display
   face. The eyebrow and the labels keep Courier. */
.tw__item--split .tw__meta{ margin-top:0; font-family:var(--f-hero-body);
  font-size:clamp(.82rem,1.05vw,.9rem); line-height:1.45; opacity:.9; }
/* The tick chip is the same painted box as the counts beside it, so the
   label column is identical on all four rows. Nothing to align by hand:
   the width comes from .tw__qty's own min-width.

   The glyph sits on a ::before at its own size, and the chip keeps the
   font-size of every other chip. That is load-bearing: min-width is
   2.4em of the chip's OWN font size, so setting font-size on the chip
   to shrink the tick shrank the box with it, 56px against the 67px
   above, and the Mini label slid out of line. Anton carries no tick, so
   the glyph comes from the fallback and runs large at the same nominal
   size, hence the scale.

   transform, not font-size, for the same reason a second time over: at
   1.45rem the ::before set its own 23px line box and the chip came out
   43px tall against the numerals' 48px. A transform paints smaller and
   leaves the box at the chip's own font size, which is a clamp, so this
   holds at every viewport rather than only where the two happened to
   match. */
.tw__qty--tick{ letter-spacing:0; }
.tw__qty--tick::before{ content:"\2713"; display:block;
  transform:scale(.82); }
/* Under 560px the label and description stack: at that width a 40%
   label column leaves the description too narrow to read. */
@media(max-width:559.98px){
  .tw__item--split .tw__def{ grid-template-columns:1fr; }
  .tw__item--split .tw__meta{ margin-top:.3em; }
}
}

/* Compact cards: names only. The per-item paragraphs made card detail the
   heaviest thing in the section, which is not where the eye should stop. */
.card--compact{ padding:clamp(20px,2.1vw,27px); }
.card__head{ font-family:var(--f-black); font-size:clamp(1.02rem,1.55vw,1.22rem);
  line-height:1.18; letter-spacing:-.01em; text-wrap:balance; }
.pills{ list-style:none; margin:.95em 0 0; padding:.85em 0 0;
  border-top:1px solid rgba(var(--ink-rgb),.3);
  display:grid; grid-template-columns:1fr 1fr; gap:.42em 1.2em; }
.pills li{ font-family:var(--f-sans); font-weight:600; font-size:.94rem; line-height:1.3; }
@media(max-width:620px){ .pills{ grid-template-columns:1fr; gap:.34em; } }
.card__note{ font-family:var(--f-type); font-size:.8rem; line-height:1.45;
  margin:.95em 0 0; opacity:.78; }

/* The cycle spans nearly the whole section and must hold one line on desktop:
   smaller type and tighter arrow spacing than the general .equation. */
/* .equation is declared later in this sheet, so these need the extra class to
   win on specificity rather than on source order. */
/* no top rule: the capability row already closes with one, so .equation's own
   border stacked a second line directly beneath it. */
/* The cycle sits in its own contrasting band: white on the cream page, thin ink
   border, small hard offset shadow. Generous horizontally, compact vertically,
   so it reads as a diagnosis rather than another row of text. */
/* Same container and same inset as every other block. Hard corners and
   the same offset shadow as the card above it too — it had a 20px radius
   and a 3px shadow against the card's 0 and 5px, so the two adjacent
   boxes read as two different systems. */
.cycleband{ background:var(--white); border:var(--line);
  border-radius:0; box-shadow:var(--shadow-md);
  padding:0 var(--inset);
  max-width:none; margin:var(--sp-block) auto; }
.equation.equation--cycle{ max-width:var(--measure); border-top:0; padding-top:0;
  margin:0 auto 0 0;
  font-size:clamp(1rem,1.75vw,1.4rem); gap:.1em .26em; }
.equation.equation--cycle .equation__op{ font-size:1em; opacity:.55; }
/* two-step escalation, not a shout: guilt takes colour, start over takes the swatch */
.equation__em{ color:var(--pink-text); }

/* same clamp as .story .split above, so the cards have identical space on
   both sides: sub -> cards -> payoff */
.pattern__turn{ font-family:var(--f-black); font-size:clamp(1.05rem,1.9vw,1.3rem);
  line-height:1.3; max-width:38ch; }


/* ---------- THE PATTERN: one beat per block ---------- */
/* Story order: headline, strip, behaviour + belief, the turn, the crosses,
   the conclusion. This block MUST stay after the .pat rules above: several
   selectors here tie with those on specificity and win only on source
   order, which is how the older .pat__answer and .pat__lead rules used to
   beat their own overrides. */

/* More air under the headline than the shared .story step gives.
   :not(.challengeband) is load-bearing: the band below carries
   `class="band story challengeband"`, so a bare `.band.story .h-2` is
   (0,3,0) and beat its own `.challengeband .h-2{margin-bottom:40px}`
   (0,2,0), quietly moving a heading in a section this brief does not
   touch. Caught by the page height, which grew 25px more than the
   section did. */
.band.story:not(.challengeband) .h-2{ margin-bottom:clamp(38px,4.6vw,64px); }
/* AND NOTHING WHEN A SUB FOLLOWS IT. The offer band is the pattern: its
   heading carries no bottom margin and .offerband__sub sets the gap with
   its own .85em, which lands at 16px. Here the heading's 64px collapsed
   against the sub's 13px and won, so the sub never had a say.

   This sits HERE, and repeats the :not(.challengeband) it does not need,
   because the same rule written beside .story .h-2 further up was dead:
   that selector scores 0,3,0 and this one 0,4,0, so the line above won
   wherever both applied. Matching its shape and following it is what makes
   the override take. */
.band.story:not(.challengeband) .h-2:has(+ .patcompare__lede){ margin-bottom:0; }

/* --- 2. THE STRIP, its own full-width box --- */
.cycleband--strip{ --cyc-gap:.62em;
  margin-block:0 clamp(32px,3.8vw,52px);
  padding-block:clamp(13px,1.5vw,19px); }
/* One gap token used twice: the row gap falls between an arrow and the
   next phrase, the step gap between a phrase and its own arrow. Equal by
   construction rather than by eye. Flex drops white-space-only runs, so
   the indentation between the spans adds nothing to either side. */
.story .cycleband--strip .equation.equation--cycle{ display:flex;
  flex-wrap:wrap; align-items:baseline; justify-content:center;
  max-width:none; margin-inline:auto; gap:.36em var(--cyc-gap); }
.cyc__step{ display:inline-flex; align-items:baseline; gap:var(--cyc-gap);
  white-space:nowrap; }
.cycleband--strip .equation__op{ opacity:.55; }

/* --- 3. THE TWO CARDS --- */
/* stretch for equal height, align-content:start so the taller card's
   surplus stays at the bottom instead of centring the shorter card's
   text in its own box. */
.pat-row--duo{ gap:clamp(24px,3.2vw,44px); align-items:stretch;
  margin-bottom:0; }
.pat-row--duo > .pat{ display:grid; align-content:start;
  padding-block:clamp(20px,2.3vw,30px);
  padding-inline:clamp(20px,2.4vw,32px); }
.pat--apricot{ background:var(--apricot); }
/* Same emphasis treatment the acid card uses: weight, not a highlight
   that would be invisible on a card this pale. */
.pat--apricot strong{ background:none; text-decoration:none; }

/* Both headings on the same step, so the two cards start on one line. */
.pat-row--duo .pat__intro{ margin-top:0; }

/* The consequence, not a sixth tick: no marker, one notch up from the
   list it closes. */
.pat p.pat__close{ margin-top:clamp(15px,1.7vw,21px);
  font-family:var(--f-hero-body); font-weight:700;
  font-size:clamp(1.05rem,1.5vw,1.18rem); line-height:1.45;
  max-width:none; }

/* Belief card rhythm, matched to the tick list opposite it. The tick list
   carries more words than the five thoughts do, so the thoughts take the
   difference as air between them rather than as copy: measured at four
   widths, this holds the two cards inside 25px of each other.
   `+ p.pat__inner`, not `+ .pat__inner`: the existing
   `.pat p.pat__inner + .pat__inner` is (0,3,1) and was beating a (0,2,1)
   override, which left four of the five thoughts on the old .3em step
   while only the first one moved. */
.pat--apricot .pat__lead{ margin-top:clamp(18px,2vw,28px); }
.pat--apricot p.pat__inner{ margin-top:clamp(14px,1.45vw,17px);
  padding-block:.24em; }
.pat--apricot p.pat__inner + p.pat__inner{ margin-top:clamp(14px,1.45vw,17px); }

/* --- 4. THE TURN, THE CROSSES, THE CONCLUSION --- */
/* Nothing here sits inside .pat any more, so none of the .pat p rules
   reach it: every size and step this block needs is set here. */
.patturn{ text-align:center; margin-top:clamp(44px,5.4vw,76px); }
.patturn p{ margin:0 auto; max-width:640px;
  font-size:clamp(1rem,1.4vw,1.08rem); line-height:1.6; }
.patturn .pat__turn{ font-family:var(--f-hero-body); font-weight:700;
  font-size:clamp(1.2rem,2.2vw,1.65rem); line-height:1.3;
  letter-spacing:-.005em; text-wrap:balance; }
.patturn__lines{ margin-top:clamp(18px,2vw,26px); }
.patturn__lines p + p{ margin-top:.3em; }
.patturn .pat__come{ margin-top:clamp(16px,1.8vw,22px);
  font-family:var(--f-hero-body); font-weight:700;
  font-size:clamp(1.12rem,1.85vw,1.38rem); line-height:1.35; }
/* Centred as a group, left-aligned inside it, so the three crosses line
   up in one column instead of drifting with the ragged centre. */
.patturn .pat__list--no{ margin:clamp(32px,3.8vw,50px) auto 0;
  width:max-content; max-width:100%; text-align:left; }
.patturn .pat__list--no li{ margin-bottom:clamp(13px,1.5vw,19px); }
.patturn .pat__list--no li:last-child{ margin-bottom:0; }
/* The strongest moment in the section and the handover to the next one.
   Uppercased here rather than in the markup so the source keeps the
   sentence. Two steps under .h-2 so it closes this section without
   announcing a new one. */
.patturn p.pat__answer{ margin:clamp(44px,5.4vw,76px) auto clamp(6px,.8vw,12px);
  font-family:var(--f-black); font-weight:400; text-transform:uppercase;
  font-size:clamp(1.8rem,4.2vw,3rem); line-height:1.06;
  letter-spacing:-.02em; max-width:var(--measure-display);
  text-wrap:balance; }
.patturn + .pat__cta{ margin-top:clamp(38px,4.6vw,64px); }

/* --- 5. MOBILE --- */
/* The strip becomes a vertical list, one step per line, with the same
   glyph turned a quarter turn: one arrow character to keep in sync
   instead of two. */
@media(max-width:767.98px){
  .story .cycleband--strip .equation.equation--cycle{ flex-direction:column;
    align-items:center; gap:.34em; }
  .cyc__step{ flex-direction:column; align-items:center; gap:.2em;
    white-space:normal; text-align:center; }
  .cycleband--strip .equation__op{ display:block; transform:rotate(90deg);
    line-height:1; }
}
/* Single column: each card is its own grid row, so stretch resolves to
   its own content height. */
@media(max-width:899.98px){
  .pat-row--duo > .pat{ align-content:start; }
}

/* ---------- ONE CARD STRUCTURE FOR EVERY TESTIMONIAL ---------- */
/* Photo (where there is one), then quote, then the attribution pinned to
   the bottom. The quote is the only elastic part, so name lines and
   verified lines land on a common baseline across a row however long
   the quotes are. Short quotes show air above the attribution, which is
   the trade: deliberate space reads better than staggered names.

   ONE rule, reached by putting .tstack on whichever element is the
   column in each card. The three shapes are genuinely different, so a
   single selector could not have covered them: the blue-band card has
   no photo and is its own column, the results card keeps its column in
   a <figcaption> beside the photo, and the hero card is a two column
   grid whose text side needed a wrapper. Any future card inherits this
   by carrying the class. */
.tstack{ display:flex; flex-direction:column; height:100%; min-width:0; }
/* The quote absorbs the variation. Everything after it is pinned. */
.tstack > blockquote{ flex:1 1 auto; }
/* Nothing below the quote may stretch, or the pin comes undone. */
.tstack > cite,
.tstack > figcaption,
.tstack > .vbadge{ flex:0 0 auto; }

/* The column can only distribute height it has been given, so each
   card's own box has to be full height first. */
/* .rcard is already a flex column; its caption takes the space left
   under the photo. */
.rcard figcaption.tstack{ flex:1 1 auto; }
/* The hero rotator is deliberately NOT in this: it is a small overlay
   pinned to the corner of the photo, not a card in a row. Giving it the
   stack made it size to its tallest wrapped quote in a narrow column,
   which ran it the full height of the image. It keeps its own compact
   layout below. */

/* THE ONE BAND THE CEILING CANNOT HOLD. From 769 to 1024 the hero gives
   the photo a small share of the row, down to 30% at the narrow end, so
   the frame is about 216px wide and the card pinned inside it is 155px.
   The quote runs to seventeen lines at that width, far past 40% of the
   photo, and the cap was quietly cutting the bottom off it. 1024 is
   measured: content fits the ceiling from 1050 up and does not at 1000.

   .fold__media .tcard, not the bare class: the ceiling is declared 650
   lines further down, so at equal specificity it wins on source order.
   That is the fourth time this file has cost me that.

   Clipping a testimonial is not an option, and no width available
   inside a 216px frame makes the quote legible, so the cap is lifted
   here and the card sizes to its content as it did before the ceiling
   existed. It is tall in this band. That is a real trade and it is
   flagged rather than hidden: the alternatives are dropping the card at
   this size or moving it out from over the photo, and both are design
   calls rather than fixes. */
@media(min-width:769px) and (max-width:1024px){
  .fold__media .tcard{ max-height:none; overflow:visible; }
}

/* ---------- permission ---------- */
.nots{ margin-top:clamp(26px,3.2vw,42px); display:grid; gap:12px; max-width:60ch; }
.nots p{ margin:0; font-size:clamp(1.02rem,1.8vw,1.22rem); padding-left:1em; border-left:3px solid var(--pink-deep); }

/* ---------- faq ---------- */
/* ---------- wide-desktop layout ---------- */
/* Editorial two-column: the label and heading hold the left, prose runs right.
   Stacks below 900px, which is also the reading order. */
.duo{ display:grid; gap:clamp(18px,3vw,54px); align-items:start; }
@media(min-width:900px){ .duo{ grid-template-columns:.85fr 1.15fr; } }
.duo .copy{ max-width:62ch; }
.duo__head .h-2{ margin-top:.35em; }

/* FAQ pairs sit two-up on desktop. Each Q+A is one item so a column break
   can never separate a question from its answer. */
@media(min-width:900px){
  .faq{ display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(32px,4vw,64px); }
}
.faq__item{ break-inside:avoid; }

/* ---------- mobile ---------- */
@media(max-width:620px){
  .wrap, .wrap--narrow{ width:92%; }
  .btn{ display:block; width:100%; text-align:center; padding-inline:1em; }
  .midcta{ padding:clamp(24px,6vw,34px) 0; }
  .band{ padding:clamp(44px,9vw,66px) 0; }
  .h-1{ font-size:clamp(2.3rem,10.5vw,3.4rem); }
  .h-2{ font-size:clamp(1.75rem,7.4vw,2.4rem); }
  }
.faq{ max-width:76ch; margin-top:clamp(26px,3.2vw,42px); border-top:1px solid rgba(var(--ink-rgb),.2); }
.faq details{ border-bottom:1px solid rgba(var(--ink-rgb),.2); }
.faq summary{ cursor:pointer; list-style:none; padding:1.1em 2.4em 1.1em 0; position:relative; font-family:var(--f-black); font-size:clamp(.98rem,1.5vw,1.1rem); line-height:1.3; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:0; top:.9em; font-family:var(--f-black); font-size:1.4em; line-height:1; color:var(--pink-text); }
.faq details[open] summary::after{ content:"\2013"; }
.faq__a{ padding:0 0 1.4em; max-width:64ch; }
.faq__a p{ margin:0 0 .75em; } .faq__a p:last-child{ margin-bottom:0; }


/* ---------- diagnostic ---------- */
.quiz{ background:var(--white); border:2px solid var(--ink); padding:clamp(26px,3.2vw,42px); margin-top:clamp(28px,3.4vw,44px); max-width:820px; }
.quiz__q{ font-family:var(--f-black); font-size:clamp(1.15rem,2.2vw,1.5rem); line-height:1.15; margin:0 0 1.2em; }
.quiz__opts{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.quiz__opt{
  width:100%; text-align:left; cursor:pointer; font:inherit; font-size:1rem;
  background:var(--paper); border:1px solid rgba(var(--ink-rgb),.3); padding:1em 1.1em;
  transition:background .12s ease, border-color .12s ease;
}
.quiz__opt:hover{ background:var(--pink); border-color:var(--ink); }
.quiz__result{ display:none; }
.quiz__result.is-on{ display:block; }
.quiz__label{ font-family:var(--f-type); font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; opacity:.7; display:block; margin-bottom:.6em; }
.quiz__name{ font-family:var(--f-black); font-size:clamp(1.2rem,2.4vw,1.6rem); line-height:1.15; margin:0 0 .7em; }
.quiz__body p{ margin:0 0 1em; font-size:.98rem; }
.quiz__fix{ background:var(--acid); border:2px solid var(--ink); padding:1em 1.1em; margin:1.2em 0 1.4em; font-size:.95rem; }
.quiz__again{ background:none; border:none; padding:0; margin-top:1.2em; font:inherit; font-family:var(--f-type); font-size:.85rem; text-decoration:underline; cursor:pointer; opacity:.75; }

/* ---------- mid-page cta ---------- */
.midcta{ text-align:center; padding:var(--sp-block) 0; }
.midcta p{ font-family:var(--f-black); font-size:clamp(1.1rem,2.2vw,1.5rem); line-height:1.2; max-width:24ch; margin:0 auto 1.1em; }

/* ---------- pain -> outcome shift ---------- */
.shift{ display:grid; gap:1px; background:rgba(var(--ink-rgb),.25); border:1px solid rgba(var(--ink-rgb),.25); margin-top:clamp(28px,3.4vw,44px); }
@media(min-width:820px){ .shift{ grid-template-columns:1fr 1fr; } }
.shift__col{ padding:clamp(22px,2.6vw,32px); }
.shift__col--now{ background:var(--paper-2); }
.shift__col--then{ background:var(--pink); }
.shift__head{ font-family:var(--f-black); font-size:1.05rem; margin-bottom:1em; padding-bottom:.7em; border-bottom:1px solid rgba(var(--ink-rgb),.3); }
.shift__col ul{ list-style:none; margin:0; padding:0; }
.shift__col li{ position:relative; padding:.6em 0 .6em 1.6em; font-size:.95rem; line-height:1.45; }
.shift__col--now li::before{ content:"\00d7"; position:absolute; left:.15em; top:.6em; font-family:var(--f-black); opacity:.45; }
.shift__col--then li::before{ content:"/"; position:absolute; left:.15em; top:.6em; font-family:var(--f-black); }

/* ---------- how it works ---------- */
.how{ list-style:none; margin:1.2em 0 0; padding:0; }
.how li{ padding:.75em 0 .75em 1.7em; position:relative; border-bottom:1px solid rgba(var(--ink-rgb),.16); font-size:.96rem; }
.how li::before{ content:"\2192"; position:absolute; left:0; top:.75em; font-family:var(--f-black); color:var(--pink-text); }
.how li strong{ font-weight:600; }

/* ---------- the rewire grid ---------- */
.rewire{ margin-top:clamp(28px,3.4vw,46px); border:1px solid rgba(var(--paper-rgb),.3); }
.rewire__row{ display:grid; gap:1px; background:rgba(var(--paper-rgb),.22); }
@media(min-width:900px){ .rewire__row{ grid-template-columns:.7fr 1fr 1fr 1fr; } }
.rewire__row > span{ background:var(--ink); padding:clamp(16px,1.8vw,22px); font-size:.9rem; line-height:1.45; }
.rewire__row--head > span{ font-family:var(--f-black); font-size:.92rem; background:var(--ink-2); }
@media(max-width:899px){ .rewire__row--head{ display:none; } }
.rewire__row > span strong{ display:block; font-weight:600; font-size:.95rem; margin-bottom:.35em; }
.rewire__row > span{ color:var(--paper); }
.rewire__row > span strong + *{ opacity:.8; }
.rewire__wk{ font-family:var(--f-black); font-size:1.05rem; background:var(--ink-2) !important; }
.rewire__wk em{ display:block; font-style:normal; font-family:var(--f-type); font-size:.78rem; opacity:.7; margin-top:.35em; }
.rewire__note{ font-size:.85rem; line-height:1.6; opacity:.72; margin-top:1.4em; max-width:80ch; }

/* ---------- versus ---------- */
.versus{ display:grid; gap:1px; background:rgba(var(--ink-rgb),.25); border:1px solid rgba(var(--ink-rgb),.25); margin-top:clamp(26px,3.2vw,42px); }
@media(min-width:760px){ .versus{ grid-template-columns:1fr 1fr; } }
.versus__col{ background:var(--paper-2); padding:clamp(22px,2.6vw,32px); }
.versus__col--us{ background:var(--pink); }
.versus__head{ font-family:var(--f-black); font-size:1.05rem; margin-bottom:1em; padding-bottom:.7em; border-bottom:1px solid rgba(var(--ink-rgb),.3); }
.versus__col ul{ list-style:none; margin:0; padding:0; }
.versus__col li{ position:relative; padding:.65em 0 .65em 1.6em; font-size:.96rem; line-height:1.45; }
.versus__col li::before{ content:"\00d7"; position:absolute; left:.15em; top:.65em; font-family:var(--f-black); opacity:.45; }
.versus__col--us li::before{ content:"/"; opacity:1; }

/* ---------- transformations ---------- */
.transf{ display:grid; gap:clamp(20px,2.6vw,30px); margin-top:clamp(28px,3.4vw,44px); }
@media(min-width:820px){ .transf{ grid-template-columns:repeat(3,1fr); } }
.transf__card{ background:var(--white); border:1px solid rgba(var(--ink-rgb),.18); padding:clamp(18px,2vw,24px); }
.transf__pair{ display:grid; grid-template-columns:1fr 1fr; gap:2px; margin-bottom:1.1em; }
.transf__img{ aspect-ratio:3/4; background:var(--paper-2); border:1px solid rgba(var(--ink-rgb),.2);
  display:grid; place-items:center; font-family:var(--f-type); font-size:.75rem; opacity:.7; }
.transf__name{ font-family:var(--f-black); font-size:1.05rem; line-height:1.2; }
.transf__name span{ font-family:var(--f-type); font-size:.82rem; opacity:.7; }
.transf__did{ font-size:.92rem; margin:.5em 0 0; }
.transf__quote{ margin:.9em 0 0; padding-top:.9em; border-top:1px solid rgba(var(--ink-rgb),.18);
  font-size:.94rem; line-height:1.5; }
.transf__legal{ font-size:.82rem; line-height:1.6; opacity:.75; margin-top:clamp(20px,2.4vw,28px); max-width:80ch; }

/* ---------- compliance ---------- */
.smallprint p{ font-size:.88rem; line-height:1.6; opacity:.82; margin:1.1em 0 0; max-width:74ch; }
.smallprint p strong{ opacity:1; }
.smallprint a{ text-decoration:underline; }

/* ---------- close + footer ---------- */
/* .band.close, not .close: a later @media block re-declares .band's
   padding and would win at equal specificity — the same trap the results
   section hit. The extra class makes this order-independent.
   The band was running the full 116px section scale top and bottom for
   four short centred lines, which read as oversized rather than
   decisive. Roughly 60% of that now, and the gaps between the lines are
   tightened to match. */
.band.close{ text-align:center; padding:clamp(40px,5vw,72px) 0 clamp(34px,4.2vw,58px); }
.close .h-1{ margin-bottom:.3em; }
/* .midcta carries generous padding for mid-page CTAs that need separating
   from the copy on both sides. Here it is the last element in the last
   band, so its bottom padding was stacking on the section's own.
   Both sides are set here rather than only the bottom: the top padding
   comes from .midcta and from a later @media that re-declares it, and
   .close .midcta outranks both, so this is the one place the gap is
   decided. The closing line now leads straight into the button. */
.close .midcta{ padding:clamp(16px,1.8vw,22px) 0 0; }
.close__lines{ font-size:clamp(1.15rem,2.4vw,1.65rem); line-height:1.3;
  margin:0 auto clamp(14px,1.6vw,20px); max-width:26ch; }
/* Four lines, one statement each. The 22ch cap was sized for the old
   single running sentence and would have re-wrapped "Build a routine that
   survives real life." on its own line, so the measure comes off and each span
   sets its own width. */
.close__final{ font-family:var(--f-black); font-size:clamp(1.15rem,2.4vw,1.7rem);
  line-height:1.32; max-width:none; margin:0 auto; }
.close__final span{ display:block; }
/* ─── FOOTER (verbatim from index.html) ─── */
.site-footer {
  background: var(--cream);
  color: var(--black);
  padding: 40px 28px 34px;
  border-top: 2.5px solid var(--black);
}
.footer-row {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-links a,
.footer-links .cookie-settings,
.footer-social span {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--black);
  text-decoration: none;
}
.footer-links a,
.footer-links .cookie-settings { text-decoration: underline; text-underline-offset: 4px; }
.footer-social {
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer-social a { display: flex; color: var(--black); }
.footer-social svg { width: 22px; height: 22px; display: block; }
.footer-mark {
  max-width: 1400px;
  margin: 26px auto 0;
  text-align: center;
  font-family: 'Courier Prime', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--black);
}
@media (max-width: 620px) {
  .footer-row { flex-direction: column; align-items: flex-start; }
}

/* ---------- placeholders (delete the class when filled) ---------- */

/* ---------- ABOVE THE FOLD ----------
   The only section 100% of visitors see. Everything here earns its place:
   dream outcome, time to result, effort required, risk removed, proof. */
.fold{ padding:clamp(20px,3vw,48px) 0 clamp(28px,3.5vw,44px); }

/* DOM order is mobile order; desktop lifts the image into column two.
   No `order` anywhere, so a later CSS change cannot silently reshuffle
   the phone stack. */
.fold__col{ display:grid; gap:0; }
/* 769px, not 920px. The one-window target starts at 769px, and a
   single-column hero with a full-width photo can never meet it: the
   image alone is taller than the viewport. So the two-column layout and
   the mobile/desktop line are now the same number, matching .icard and
   .fold__by, which already hand over at 768/769. */
@media(min-width:769px){
  /* The whole fold is exactly one screen and its content is centred in
     it, so short viewports crop the padding rather than the button. */
  /* Asymmetric on purpose. The fold is centred, so the two paddings are
     minimums rather than the actual gaps, and the top one is the only
     thing that guarantees air above the lockup on a window short enough
     that centring has none to give. */
  .fold{ min-height:100svh; display:grid; align-content:center;
    padding-block:clamp(16px,min(2.4vw,3.4vh),56px)
                  clamp(8px,min(2.2vw,1.6vh),40px); }
  .fold__grid{ display:block; }
  /* THE COLUMN IS THE FRAME. It was 42% of the wrap, sized for a photo
     that filled whatever box it was given. The video keeps its own 9:16
     shape and is capped at 640px tall, so the width follows from the
     height and the track is that width exactly. Nothing is cropped and
     the text column takes everything left over. */
  .fold__col{
    --frame-h:min(66svh,520px);
    --frame-w:calc(var(--frame-h) * 0.5625);

    /* CARD GEOMETRY, IN ONE PLACE. Both cards overlap the frame by the
       same fraction and hang off it by the rest. */
    --creds-w:198px;
    --proof-w:264px;
    --card-overlap:.34;
    --card-gutter:12px;

    /* ROOM TO THE RIGHT OF THE FRAME, for the part of the credentials
       card that hangs off it.

       NO vw ANYWHERE. The previous version computed the page margin from
       100vw and left the card 2px inside the screen edge. 100vw includes
       the scrollbar and the layout box does not, so on any browser with a
       classic scrollbar the card landed outside the page, the document
       became wider than the window, and the whole page could be scrolled
       sideways. That is the bug where the headline was cut off on the
       left.

       A percentage cannot lie the same way: it resolves against this
       grid's real content box. The wrap is min(90%,1400px), so when the
       90% rule is live the page margin is exactly 5.5555% of the wrap,
       and when the 1400px cap is live the real margin is larger. Either
       way 5.5555% is a safe floor, and 24px of it is kept back as an
       actual margin rather than spent. */
    --creds-outside:calc(var(--creds-w) * (1 - var(--card-overlap)) + var(--card-gutter));

    grid-template-columns:minmax(0,1fr)
      calc(var(--frame-w) + max(0px, var(--creds-outside) - max(0px, 5.5555% - 24px)));
    grid-template-areas:
      "eyebrow media"
      "h1     media"
      "sub    media"
      "price  media"
      "cta    media"
      "fud    media"
      "by     media"
      "faces  media";
    column-gap:clamp(32px,3vw,48px);
    align-items:start;
  }
  .fold__eyebrow{ grid-area:eyebrow; }
  .fold__h1{ grid-area:h1; }
  .fold__sub{ grid-area:sub; }
  .fold__lede{ grid-area:sub; }
  /* .benefits had grid-area:ben and its element is gone. The row went
     with it, and .fold__by gets a real area at last: it had grid-area
     auto, so with "ben" left empty it auto-placed straight into that
     cell and the credit line jumped to the middle of the hero, between
     the sub-headline and the price. Named, it sits under the guarantees
     at every width, which is where the phone stack puts it too. */
  .fold__by{ grid-area:by; } .fold__price{ grid-area:price; }
  .fold__cta{ grid-area:cta; }
  .fud{ grid-area:fud; } .faces{ grid-area:faces; }
  .fold__media{ grid-area:media; align-self:center; }

  /* Tied to the viewport, not to the column. object-fit keeps the frame
     filled at any shape the column ends up. The photo is cropped chest up
     in the file now, so there is no longer a bad band for object-position
     to avoid: the overflow here is horizontal, and it is window either
     side of her. */
  /* The photo hands over to the video above this width. That rule lives
     further down the file, after .fold__img's own block, because a media
     query adds no specificity and source order is what decides. */
}

/* Trustpilot's own embed decides its height; this only reserves a line
   so the H1 does not jump when the script paints. */
/* Hero rhythm. Every number below is the margin that produced the
   PAINTED gap named beside it — measured from the acid highlight's own
   box, which paints past the glyphs, not from the element edge. */

/* Was 52ch, which broke the parenthetical over two lines and made the
   eyebrow three lines deep with the lockup. The line is 62 characters and
   tracked at .13em, so the cap has to clear both. */
.fold__eyebrow{ margin:0 0 clamp(10px,min(2.3vw,2.5vh),26px); max-width:78ch; }

/* The wordmark lockup. Anton caps in two cut blocks — the page's own
   wheatpaste device, so it matches the section headings rather than
   inventing a treatment. The shadow comes from .cut and is a hard
   offset with no blur, deliberately. */
.lockup{ display:block; font-family:var(--f-black); font-weight:400;
  text-transform:uppercase; letter-spacing:-.005em; line-height:1;
  font-size:clamp(1.3rem,min(3.4vw,4.6vh),2.15rem); }
/* Tighter than .cut's default: at display size its padding reads as a
   gap between the two blocks rather than as one lockup. */
.lockup .cut{ padding:.06em .16em .1em; }

.fold__eyebrow-rest{ display:block; font-family:var(--f-type);
  /* Up about 25%, 11.52px to 14.4px at the cap. Full ink rather than
     80% grey: at this size the tracking already thins it, and grey on
     top of that was making the one line that frames the whole offer
     the faintest thing above the fold.
     Tracking down from .13em to .02em to pay for the size. The line is
     70 characters and has to hold one line from 1280px up, where the
     text column is 630px. Measured at 1280x800: the line wants 642px
     with .02em tracking and 622px with none, so the tracking had to go
     entirely rather than partly. Courier is monospaced and already
     wide; at 14.4px caps it reads fine without it. */
  font-size:clamp(.775rem,min(1.31vw,1.8vh),.9rem); font-weight:700;
  letter-spacing:0; text-transform:uppercase; line-height:1.5;
  color:var(--ink);
  margin-top:clamp(8px,min(2vw,2.1vh),23px); }
/* The half of the line that names who this is for. */
.eyebrow-em{ color:var(--pink-deep); }

/* No shared cap any more. It used to live on a .fold-scoped --measure,
   which SHADOWED the global --measure (720px) that four other sections
   read; anything inside the fold reaching for the page token would have
   got the hero's number instead. The H1 now runs the column and the
   body elements carry their own 70ch. */

/* Wheatpaste: the acid block is the text's own background with hard
   edges and no radius, so it reads as paper pasted on, not a highlighter
   pen. box-decoration-break keeps every wrapped line boxed.

   ONE SIZE FOR THE WHOLE HEADLINE. Font, size, weight and line-height
   all live here and both spans inherit them, so the two halves cannot
   drift apart: there is only one declaration to change.

   Fill only now. The hard offset shadow was a per-line decoration, and
   at one size across five or six lines it stacked into what read as an
   underline under every line rather than one pasted block. */
.fold__h1{ font-family:var(--f-hero); font-weight:400;
  /* Re-searched after the .35em sentence gaps, which cost three gaps of
     real height and broke 1024x768 by 23px at the old numbers. Same two
     conditions as before: whole fold in one screen, first sentence
     unbroken. Ceilings measured now: 1024x768 32.8px, 1280x650 30.7px,
     1280x800 36.5px, 1440x900 42.6px, 1920x1080 49.3px. The values sit
     about a pixel under the tightest rather than on it. The vw term
     binds at 1024, the vh term everywhere else. */
  font-size:clamp(1.5rem,min(3.1vw,4.35vh),3rem);
  /* 1.3, not tighter. The acid box is about 1.15em of font plus .1em of
     padding, so at 1.3 the blocks clear each other by roughly .05em and
     no line can paint over the line above it. That is the whole
     descender fix at a single size: never let the boxes overlap. */
  line-height:1.3; letter-spacing:-.015em; margin:0;
  /* Her ask: no line ending on a single orphaned word. */
  text-wrap:balance;
  /* The headline runs the full text column, right up to the gap. */
  max-width:none; }
/* Two elements per line, and both are load-bearing. .h1-line is the
   BLOCK, which is the only thing that puts each sentence on its own
   line now that .h1-gap is gone. .h1-ink is the INLINE inside it, and
   the highlight has to live there: a background on the block would
   paint one rectangle behind a wrapped sentence instead of one pasted
   block per line, which is the whole device.

   The space that keeps textContent reading as prose sits between the
   two, inside .h1-line and outside .h1-ink, so it never extends the
   yellow. Trailing whitespace at the end of a line is dropped in
   layout, so it costs nothing visually either. */
.fold__h1 .h1-line{ display:block; }
/* The sentence gap has to be bigger than the leading INSIDE a sentence
   or the four sentences read as one run of eight lines. .35em against a
   1.3 line-height is the separation; line-height itself is untouched. */
.fold__h1 .h1-line + .h1-line{ margin-top:.35em; }

/* Every sentence shares the type. The padding is on all four, not just
   the marked ones, so the TEXT starts at the same x on every line and
   only the yellow changes. */
.fold__h1 .h1-ink{ display:inline; color:var(--ink);
  font:inherit; line-height:inherit; letter-spacing:inherit;
  border:0; box-shadow:none; border-radius:0; padding:0 .2em .1em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone; }
/* Only sentences 2 and 4 are marked. Two blocks of yellow in a stack of
   four read as emphasis; four read as a wall. */
.fold__h1 .h1-ink--mark{ background:var(--acid); }

/* The word has to stay readable UNDER the rule, so skip-ink is off (it
   would break the line around the descender of p and leave a gap that
   reads as damage rather than a strike) and the colour is the brand
   pink, which is a rules-and-large-text colour by definition. */
.h1-strike{ text-decoration:line-through;
  text-decoration-color:var(--pink-deep);
  text-decoration-thickness:.08em; text-decoration-skip-ink:none; }

/* HIDDEN BY DEFAULT, AND THAT IS LOAD-BEARING, NOT TIDINESS.
   .fold__col is a grid with grid-template-areas above 769px. A child
   with no assigned area does not sit out: it is auto-placed into a new
   implicit row and pulls the two-column hero apart. The phone block
   below turns it back on. */
.fold__video{ display:none; }   /* both frames; each breakpoint shows one */

/* The hero paragraph, at both widths. Desktop takes it through the grid's
   sub area; the phone block further down recentres it and tightens the
   space above. Sized off the body rather than the hero face, because it
   is reading copy and not a heading. */
.fold__lede{ font-size:1rem; line-height:1.55; margin:.9em 0 0;
  max-width:52ch; }
/* Same spacing the rest of the page gives stacked paragraphs, .pat being
   where that number comes from. */
.fold__lede p{ margin:0; }
.fold__lede p + p{ margin-top:.85em; }
/* The first line is what she buys; the second is what makes it different.
   Weight is the only thing separating them, so the eye takes the contents
   first and the argument second without a second type size in the hero.
   700 is a real DM Sans weight and is in the font request, so this is not
   a browser-synthesised bold. Same device as .pat__come. */
.fold__lede p.fold__what{ font-weight:700; }

/* ============================================================
   THE PHONE HERO, REBUILT TO THE REFERENCE. Everything here is
   inside max-width:768.98px and nothing in it reaches desktop,
   which keeps its two-column layout untouched.

   Order comes from the DOM, because .fold__col is a plain
   single-column grid on a phone with no `order` anywhere. So the
   paragraph sits after the heading and the video after that in the
   HTML, and that IS the phone order. Desktop reads the same HTML
   through grid-template-areas and ignores it.
   ============================================================ */
@media(max-width:768.98px){

  /* THE TRACK IS PINNED TO THE CONTAINER. .fold__col is a grid with one
     auto column, and an auto track is sized by its widest item's
     max-content, not by the container: the ticks below ask for
     width:max-content and grew the track to 442px inside a 345px column,
     which scrolled the whole page sideways. minmax(0,1fr) caps the track
     at the container and lets the items wrap inside it. */
  .fold__col{ grid-template-columns:minmax(0,1fr); }

  /* Centred, per the reference. The ticks are the exception and are
     handled further down. */
  .fold__eyebrow, .fold__h1, .fold__lede, .fold__price,
  .fold__cta, .fold__by{ text-align:center; }
  .fold__eyebrow{ display:flex; flex-direction:column; align-items:center; }

  /* SHOWN ON PHONES AGAIN, because the reason for hiding it has gone.
     This rule said the hero paragraph named the programme and its length
     anyway, so the two would say it twice. The new sub-headline does
     neither: it lists what she gets, not what this is. Without this line
     a phone never learns it is a 4-week strength and Pilates program at
     all, and that is the one thing the fold has to say. */


  /* ONE CONTINUOUS HEADLINE. Both sentences run together as flowing
     text rather than sitting on their own lines, which is what the
     reference does, so .h1-line goes inline and its block-level
     sentence gap stops applying. The yellow stays on the first
     sentence only; the second is the same size and the same weight
     and is not a sub-headline. */
  .fold__h1 .h1-line{ display:inline; }
  .fold__h1 .h1-line + .h1-line{ margin-top:0; }
  /* .h1-ink carries .2em of side padding so a yellow block sits off its
     text. Between two stacked lines that is invisible; run together as
     one paragraph it lands beside the word space and opens a double gap.
     The marked sentence keeps just enough for the highlight to clear. */
  .fold__h1 .h1-ink{ padding:0; }
  .fold__h1 .h1-ink--mark{ padding:0 .15em .05em; }

  /* THE HEADLINE COMES DOWN, 24px to 18px, and the body with it, 16px
     to 15px. It is set in Archivo Black, which is far heavier than the
     DM Sans body beside it, so it reads much larger than the measured
     ratio suggests. Reducing the size is the only lever that changes
     that without changing the typeface.

     The pair was chosen by measurement, not by taste. At 20/16 the
     merged paragraph ran 240px and pushed the video 44px behind the
     sticky bar. 18/15 is the only combination tried that clears the bar
     at 375, 390 and 360 and still leaves the video room to grow. */
  .fold__h1{ font-size:18px; }

  .fold__lede{
    font:400 15px/1.5 var(--f-sans); text-align:center;
    margin:.7em 0 0; }

  /* SIZED BY THE HEIGHT LEFT OVER, NOT BY A FIXED NUMBER, because a
     fixed one cannot clear the sticky bar on every phone. At 262x328 it
     cleared 360x800 by 3px and 375x812 by 15px, but ran 17px behind the
     bar on a 360x780 Pixel 5 and 130px behind it on a 375x667 iPhone SE.
     Those are short phones, not narrow ones, so no width cap can fix it.

     So the frame no longer tries. It is 280px wide at the source's own
     600 by 1066, which comes out 497px tall, and on a short phone it
     runs past the fold. That was the call: a frame that cleared the bar
     on every handset was too small to watch a face in for four and a
     half minutes. The height-driven version and its 477px budget are
     gone with it. */
  /* display:block is load-bearing. .fold__video is display:none further
     up the file so it cannot break the desktop grid, and the rule this
     replaced happened to say display:flex. Dropping that left the none
     standing and the video vanished on the phone. */
  /* THE FRAME IS SIZED BY HEIGHT, AND THE WIDTH FOLLOWS.

     A fixed 280px was 497px tall, and on a 375x812 phone the hero puts
     361px above it and the sticky bar takes 78px off the bottom, so
     132px of the picture was behind the bar or off the screen. The
     frame is what the phone can actually show, so the phone decides it:

       361 above + 78 bar + 8 clearance = 447px that is never the video

     Below the cap this trades width for a whole picture. At 375x812 it
     comes out 365 by 205 rather than 497 by 280. The 400px cap stops it
     running away on a tall phone, where the width would otherwise grow
     past what the column wants. */
  /* AND NOW IT IS A FIXED WIDTH AGAIN, because the sum above no longer
     holds and could not be made to hold.

     The 447 was "361px of hero above + 78px of bar + 8px clearance",
     measured off one headline on one phone. The button, the price and the
     guarantee row have moved above this frame, so the real figure is
     closer to 560 and it changes again with every rewrite of the headline
     — Ana is replacing the hero copy next. A constant that has to be
     re-measured whenever a word changes is a constant that will be wrong.

     It does not need to be right any more. The frame was sized to clear
     the sticky bar because it was the last thing in the fold that
     mattered; the BUTTON is now, and the button is near the top. So the
     video takes the width it wants, runs past the fold, and is scrolled
     to — which is what the earlier fixed-width build did and what the
     comment above it already argued for: a frame small enough to fit any
     handset was too small to watch a face in. */
  .fold__video--phone{
    display:block; position:relative;
    width:min(280px,100%); height:auto;
    aspect-ratio:600/1066; margin:.7em auto 0;
    border:2px solid var(--ink); background:var(--ink); }
  .fold__video-el{ display:block; width:100%; height:100%;
    object-fit:cover; }


  /* THE TICKS STAY LEFT, AND THAT IS DELIBERATE TWICE OVER.

     Visually: centring ragged list items behind a tick reads as broken
     alignment, not as a centred list. The column is already centred in
     the screen, so a full-width list sits centred as a block while each
     line stays flush against its own marker.

     Mechanically: the shrink-wrap that would centre it, width:max-content,
     cannot be used here. .benefits is redeclared further down this file
     with its own margin shorthand, which resets any auto margins set
     here, and its max-content is 442px against a 345px column, so it
     also blew the page sideways. Leaving it a plain block avoids both. */
  .fud{ justify-content:center; }
}

/* Desktop carries its own floor, 28px against the phone's 24px. */
@media(min-width:769px){
  .fold__h1{ font-size:clamp(1.75rem,min(3.1vw,4.35vh),3rem); }
}
/* The H2 is display:none under 769px, not removed. It stays in the HTML
   and stays the document's only H2, so the outline and every assistive
   reading of the page are exactly what they were; only the visual
   layout drops it. */
@media(max-width:768.98px){ .fold__sub{ display:none; } }

/* Now a real <h2>, and the only one in the hero. Hidden under 769px:
   still in the HTML and still the document's only H2, so the outline
   and every assistive reading of the page are unchanged. Only the
   visual layout drops it. */
.fold__sub{ font-family:var(--f-hero-body);
  font-size:clamp(1rem,min(1.5vw,2.1vh),1.15rem);
  font-weight:400; line-height:1.5; max-width:70ch; text-wrap:pretty;
  margin:clamp(10px,min(3.4vw,2.2vh),37px) 0 0; }

/* DELIVERABLES. Bigger tick, full ink, generous line — this row has to
   out-weigh the FUD row below it or the two blur into one list. */
.benefits{ list-style:none; margin:clamp(9px,min(3vw,2vh),32px) 0 0; padding:0;
  display:grid; gap:clamp(.3em,min(.6vw,.8vh),.5em); max-width:70ch; }
.benefits li{ position:relative; padding-left:1.9em;
  font-family:var(--f-hero-body); font-size:clamp(1rem,min(1.4vw,1.95vh),1.1rem);
  font-weight:600; line-height:1.4; text-wrap:pretty; }
/* One step down in weight and a touch of grey: these qualify the line
   above them, so they must not read as equal claims. Same size, because
   16px is the floor and this is still body copy. */
.benefits__add{ display:block; font-weight:500; color:rgba(var(--ink-rgb),.82);
  margin-top:.15em; }
.benefits li::before{ content:"\2713"; position:absolute; left:0; top:-.02em;
  font-size:1.25em; line-height:1.15; color:var(--acid);
  -webkit-text-stroke:1.4px var(--ink); }

.fold__media{ position:relative; margin:clamp(22px,3vw,30px) 0 0; }
@media(min-width:769px){ .fold__media{ margin:0; } }
/* 640px is the last frame height that still picks 720x1280 at 3.07Mbps.
   645 jumps to 1080x1920 at 7.84. Measured, not assumed. */
@media(min-width:1101px){ .fold__col{ --frame-h:min(76svh,640px); } }
/* The credentials card is display:none below 1280, so no room is kept
   for it down there. The track is the frame's own width. */
@media(max-width:1279.98px){
  .fold__col{ grid-template-columns:minmax(0,1fr) var(--frame-w); }
}
.fold__img{ display:block; width:100%; aspect-ratio:4/5; object-fit:cover;
  /* WAS 50% 20%, AND THAT NUMBER BELONGED TO A DIFFERENT PHOTO. The old
     hero was a tall frame with the brain at the top and floor at the
     bottom, so the crop had to be weighted upward to stay off the subject.

     This photo is 1320x1300, near square, and already cropped chest up
     before it reaches the page. Against a 4/5 box it is the WIDTH that
     overflows, not the height, so the Y value no longer does anything and
     the X value is the only one that matters. She sits at 52% of the
     frame, so 52% keeps her centred while the window trims evenly. */
  object-position:52% 50%;
  border:var(--line-bold); border-radius:var(--radius-card);
  box-shadow:var(--shadow-card); }

/* THE PLAY BUTTON AND THE FAILURE LINE, AT EVERY WIDTH. These lived
   inside the phone media query, which was fine while there was one frame.
   With a second frame in the desktop column the button fell back to
   static inline-block: a 6px stub sitting under the video, adding a 29px
   line box to the column and leaving the desktop frame with no way to
   start the video. They belong to .fold__video, which is hidden unless
   its own breakpoint is showing, so they need no breakpoint of their own.

   ONE affordance over the poster. The video carries no controls until the
   first play, so this button is the only thing to press, and it is a real
   button rather than a click handler on the frame. */
/* BOTTOM-LEFT, NOT CENTRED, AND THAT IS ABOUT THE POSTER FRAME.
   Centred, the 64px button sits dead on Ana's face. The phone frame is
   only 205x365 at 375x812, so the button covered 41-59% of its height
   and landed on her mouth; on desktop the frame is larger, so the same
   button clipped her chin instead. Bottom-left clears her at both sizes
   and is where a play affordance is looked for anyway.
   box-sizing is border-box here, so the padding insets the button
   rather than growing the hit area past the frame. */
.fold__play{
  position:absolute; inset:0; width:100%; height:100%;
  display:grid; place-items:end start;
  box-sizing:border-box; padding:12px; border:0; background:none;
  cursor:pointer; -webkit-tap-highlight-color:transparent; }
.fold__play-ico{
  display:block; position:relative; width:64px; height:64px;
  border-radius:50%; background:var(--white);
  border:2px solid var(--ink); box-shadow:0 4px 0 var(--ink); }
.fold__play-ico::after{
  content:""; position:absolute; top:50%; left:55%;
  transform:translate(-50%,-50%);
  border:13px solid transparent; border-right:0;
  border-left:21px solid var(--ink); }
.fold__play:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }
/* A class beats the browser's own [hidden] rule, so display:grid above
   was keeping this button on screen and over the controls after the
   script set hidden. */
.fold__play[hidden]{ display:none; }

/* SHE PAID FOR THIS WITH HER EMAIL, SO SAY SO WHERE THE PRICE IS.
   The reveal loop for [data-promo-note] existed and matched nothing:
   no element in the page ever carried the attribute, so the note has
   never appeared for anybody and a returning buyer had her credit
   applied in silence. Two of them now, at the hero price and the offer
   card, because someone can convert from the hero without ever
   scrolling to the card and a single note would be invisible to half
   the people it is for.
   Mint rather than pink: the buttons are pink, and a note that reads
   as a button is a note that gets tapped. */
.promo-note{
  display:inline-block; margin:.6em 0 0;
  font:500 clamp(.85rem,2.6vw,.95rem)/1.35 var(--f-sans);
  color:var(--ink); background:var(--mint);
  border:2px solid var(--ink); border-radius:var(--radius-tag,6px);
  padding:.45em .7em; transform:rotate(-1deg); }
.promo-note strong{ font-weight:700; }
/* A class beats the browser's own [hidden] rule, the same trap the play
   button hit above, so this has to name it explicitly. */
.promo-note[hidden]{ display:none; }


/* Shown only if the stream fails, so the frame says something rather than
   sitting black. Same [hidden] trap as the button above. */
.fold__video-err{
  position:absolute; left:0; right:0; bottom:0; margin:0;
  padding:.6em .8em; background:var(--ink); color:var(--white);
  font:500 12px/1.4 var(--f-sans); text-align:center; }
.fold__video-err[hidden]{ display:none; }

/* THE HANDOVER. Above 769px the frame is the video and the photo is gone;
   below it the photo is the frame and the video sits higher up the stack.
   This block has to come after .fold__img above, which sets display:block:
   a media query carries no extra specificity, so the later rule wins and
   the same three lines placed earlier in the file did nothing. */
@media(min-width:769px){
  .fold__img{ display:none; }
  /* Its own width, not the track's. The track is wider now, so writing
     100% here would stretch the frame and break the 9:16. Sitting at the
     track's left edge is what shifts the frame left on screen. */
  .fold__video--desk{ display:block; position:relative;
    width:var(--frame-w); aspect-ratio:9/16;
    border:2px solid var(--ink); background:var(--ink); }
  .fold__video--desk .fold__video-el{ display:block; width:100%; height:100%; }
}

/* Overlaps the lower-left corner. Hard offset only. */
/* Both overlays share one geometry. The 16px radius went: hard edges
   with a hard offset is the page's language, and leaving one overlay
   rounded and one square on the same photo would put two systems on one
   image. */
.tcard,.icard{ position:absolute; margin:0; background:var(--white);
  border:var(--line-bold); border-radius:0; box-shadow:var(--shadow-md); }
/* About 30% wider than the single card it replaces, 268px to 348px, and
   the type goes with it. It still has to clear Ana's face, which starts
   around 46% down the frame, so the card is checked against the photo
   rather than just sized. */
/* A NOTE PINNED TO THE PHOTO, not a second panel. 42% of the frame is
   the cap, and it governs wherever the photo is wide enough for 42% to
   still be a card: 229px at 1440, 247px at 1920.

   THE 200px FLOOR IS NOT A PREFERENCE. A card holds a fixed amount of
   text, so narrowing it makes it taller, and a flat 42% of a 313px
   photo is a 132px card, a 28px photo column and 444px of height,
   which is 83% of the frame and straight through Ana's face. Below
   about 1400px the cap and the height limit cannot both hold; the
   floor keeps the card readable and the report says what percentage
   each size actually lands on. */
/* max-height is a ceiling, not a layout: the card sizes to its longest
   slide and the excerpts keep that well under the cap. It is here so a
   longer quote can never again run the card down the photo. The
   percentage resolves against .fold__media, which is the image's own
   box, so 40% means 40% of the picture at every breakpoint.

   WIDER IS SHORTER, which is the same rule the narrow bands below
   already run on: a card holds a fixed amount of text, so widening it
   cuts the line count and the height with it. 42% to 63% took the quote
   from nine lines to five, and 63% is the floor: measured at 1440, 62%
   is 337px and already puts Danielle's quote onto a sixth line. A
   scale-down of 10 to 15% was asked for and is not available at this
   type size, so the width stayed and only the position moved. The photo
   is 40fr of the card's own grid, so it scales with the card and needs
   no separate number.

   bottom:-44px, from -14px: the card hangs further past the frame so it
   clips the bottom-left corner rather than sitting inside the lower-left
   quadrant over the model's legs.

   The vertical padding came down from .6em to .5em to pay for it. At
   1024 the photo is only 538px tall, so 40% is 215px against 213px of
   content, and the badge's last line was being clipped by 3px. A cap
   that silently cuts a real woman's testimonial is worse than no cap,
   so the content was made to fit rather than the overflow left to hide
   it. */
.tcard{ left:0; bottom:-44px; width:clamp(264px,55%,348px);
  max-height:40%; overflow:hidden;
  padding:.5em .7em; }

/* MIRRORED OVERHANG, only where there is something to mirror: .icard is
   display:none below 1280, so below that the card keeps left:0.

   The vertical is the easy half. .icard hangs 14px above the frame at
   every width, so bottom:-14px is an exact mirror.

   The horizontal is not one number. .icard is positioned left:71% and
   sized by its own content, so its right overhang is
   (its width - 29% of the frame) and it SHRINKS as the frame widens:
   58px at 1280, 41px at 1440, 30px at 1920, reaching zero near a 684px
   frame. A fixed px value would only match at one window size, so the
   mirror is computed from the same geometry instead.

   --icard-w must track .icard's rendered width. It is max-content, so
   editing her name or credentials changes it and this number with it. */
/* THE PROOF CARD, OFF THE FRAME'S LEFT EDGE.

   Mirrors the credentials card: its right edge stops 12px short of the
   frame's left edge, so it covers no video and cannot reach the scrubber
   when the controls appear at the foot of the frame.

   The cost is on the other side. There is no page margin to the left,
   only the column gap and then the hero copy, so the card reaches into
   the text column. The report says by how much at each width. Nothing
   here decides whether that trade is worth making. */


/* BELOW 1280 THE CARDS CANNOT SIT BESIDE ANYTHING. The credentials card
   is already display:none down here. The proof card goes under the frame
   instead, at the frame's own width, which is the only place it fits: in
   this band the frame is 293px at its widest and the card's floor is
   264px, so an overlay would be 90% of the picture. That is the state
   this band was in and it is why it looked broken. */

/* Every slide in the same grid cell. The card is therefore as tall as
   the LONGEST slide and does not resize as it rotates, which absolute
   positioning could not do without a hard-coded height. align-items
   centres the shorter ones in that height instead of hanging them from
   the top. */
.tcard__slides{ display:grid; align-items:center; }

/* SEQUENTIAL, NOT CROSSFADED. The outgoing slide runs 0 to .35s and the
   incoming one is delayed by exactly that, so there is no moment with
   two quotes on screen at partial opacity. visibility flips on the same
   boundary, which also keeps the hidden slide out of the a11y tree and
   out of the float layout. */
.tcard__slide{ grid-area:1/1; margin:0; opacity:0; visibility:hidden;
  transition:opacity .35s ease, visibility 0s linear .35s; }
.tcard__slide.is-on{ opacity:1; visibility:visible;
  transition:opacity .35s ease .35s, visibility 0s linear .35s; }
.tcard__who{ margin-top:.5em; }
.tcard__dots{ display:flex; justify-content:center; gap:.4em; margin-top:.35em; }
.tcard__dot{ width:9px; height:9px; padding:0; border:1.5px solid var(--ink);
  border-radius:50%; background:transparent; cursor:pointer;
  -webkit-appearance:none; appearance:none; }
.tcard__dot.is-on{ background:var(--ink); }
.tcard__dot:focus-visible{ outline:2px solid var(--pink-deep); outline-offset:2px; }

/* ============================================================
   44x44 TAP TARGETS ON TOUCH, AND THE GEOMETRY THAT FORCES THE REST.

   The dot is 9px and the dots sit 15px apart centre to centre, all five
   spanning 70px. A 44px target on each would overlap its neighbours by
   about 28px a side, so the wrong dot would answer the tap: worse than a
   small target, because it is a small target that lies.

   Non-overlapping 44px targets therefore REQUIRE 44px between centres,
   which is 35px of gap against the 9px dot. Five of them span 220px,
   inside a 248px card, so it fits. The dots do not change: same 9px,
   same border, same fill. Only the space between them opens up.

   SCOPED TO pointer:coarse, so this is a phone-only change. A mouse is
   precise and does not need it, and the desktop card keeps the tight
   grouping exactly as it was.

   The target is a pseudo-element rather than padding, so it expands the
   hit area without touching layout. It overflows the card by about 15px
   below, which is empty space in the hero column with nothing tappable
   under it. Nothing above is interactive either: the verified badge is
   a span. ============================================================ */
@media (pointer: coarse) {
  .tcard__dots{ gap:35px; }
  .tcard__dot{ position:relative; }
  .tcard__dot::after{
    content:''; position:absolute; top:50%; left:50%;
    width:44px; height:44px; transform:translate(-50%,-50%);
  }
}
/* No auto-advance for anyone who asked for less motion. The dots still
   work, so the content is never unreachable. */
@media(prefers-reduced-motion:reduce){
  .tcard__slide{ transition:none; }
}

/* MEASURED AGAINST THE PHOTO, not guessed. Sampling the source frame
   band by band, the subject runs from about 33% to 71% of the image
   width across the whole brain-and-face region, and out to 74% at the
   wristbands.

   So the card is pinned to the clear line rather than to the frame:
   left:71% is where the brain stops, and the card grows RIGHTWARD from
   there to whatever its three lines need, overhanging the photo. That
   is the only way to have all three at their minimum sizes and no line
   wraps, because the strip inside the frame is narrower than the
   longest credential. */
/* 34% ON THE FRAME, 66% OFF IT. The card is pinned to a width rather
   than left to max-content, because the geometry either side of it is
   arithmetic on that number and a webfont that loads late would move it.
   z-index keeps it over the video, so the overlapping third is visible
   rather than hidden behind the picture. */
.icard{ left:calc(var(--frame-w, 100%) - var(--creds-w) * var(--card-overlap));
  right:auto; top:-14px; z-index:2;
  width:var(--creds-w); max-width:none; padding:.55em .65em; }

.icard__label{ display:block; font-family:var(--f-type); font-size:.6rem;
  font-weight:700; letter-spacing:.16em; text-transform:uppercase; opacity:.7; }
/* Sans, not Courier, and at her floors: 16px name, 13px credentials.
   nowrap is the requirement, not a nicety: the card is sized by its
   content, so a wrap would mean the width calculation had failed. */
.icard__name{ display:block; font-family:var(--f-hero-body); font-weight:700;
  font-size:1rem; line-height:1.25; letter-spacing:-.01em; margin-top:.25em;
  white-space:nowrap; }
/* The name line is now the card's first child, so its top margin has
   nothing to separate it from and would only pad the card unevenly. */
.icard > :first-child{ margin-top:0; }
/* No text-transform: the credentials are sentence case and uppercasing
   them would fight the tiny Courier size. */
.icard__creds{ display:block; font-family:var(--f-hero-body);
  font-size:.8125rem; line-height:1.35; margin-top:.2em; opacity:.85;
  white-space:nowrap; }
.icard__name + .icard__creds{ margin-top:.45em; }
/* Handover point for the credit, now 1280px rather than 768px. Below
   it the photo column is too narrow for the card to clear the brain AND
   stay on screen once it is wide enough for three unwrapped lines, so
   the card goes and .fold__by takes over inline. The two breakpoints
   are the same number on purpose: never both, never neither. */
@media(max-width:1279.98px){ .icard{ display:none; } }

/* Mobile-only credit line. Fine print, not body copy: it sits one step
   under .fud's 13.76px so the guarantee row above it keeps the weight. */
.fold__by{ margin:.6em 0 0; font-family:var(--f-type); font-size:.8rem;
  line-height:1.5; color:rgba(var(--ink-rgb),.7); }
@media(min-width:1280px){ .fold__by{ display:none; } }
/* 1.28, not 1.34. At 1024 the photo is only 538px tall, so the card's
   40% ceiling is 215px against content that wanted 218. Six lines at
   the tighter leading give the 5px back, so the ceiling never has to
   clip anything. */
.tcard blockquote{ margin:0; font-size:.8125rem; line-height:1.28; }
/* Thumb + attribution on one row. The card is 268px wide and sits over the
   hero photo, so a full-width before/after would make it ~440px tall and
   swallow the image it is pasted onto. At this size it reads as a proof
   chip attached to the quote. */
/* HALF AND HALF, replacing the float. Four rows: photo and quote side
   by side in two equal columns, then the name, the badge and the dots
   each spanning both. The quote is centred against the photo rather
   than hanging from its top, which is what the float could not do. */
/* 30/70, not 40/60. Narrowing the card and the thumbnail by the SAME
   amount leaves the quote column the width it had, so the card shrinks
   without the quote wrapping further. That is the whole trick: at 63%
   the quote column was 181px and 62% broke it, so the width could only
   come down if the photo gave the space up. */
.tcard__slide{ display:grid; grid-template-columns:30fr 70fr;
  column-gap:14px; align-content:center; }
.tcard__shot{ grid-column:1; grid-row:1; width:100%; height:auto;
  aspect-ratio:580/725; object-fit:cover; margin:0;
  border:2px solid var(--ink); display:block;
  filter:contrast(1.08) saturate(.88) brightness(1.02); }
.tcard__slide blockquote{ grid-column:2; grid-row:1; align-self:center;
  margin:0; }
.tcard__who{ grid-column:1 / -1; text-align:center; }
.tcard__slide .vbadge{ grid-column:1 / -1; }
/* "The Formula" is a product name; a break between the two words reads
   as two things, so the space between them is non-breaking. */

/* PHONE FALLBACK, and the threshold is lower than the 320px card width
   in the brief because stacking measured WORSE: at 360px it took the
   card from about 280px tall to 378px and put it through Ana's face,
   where two 138px columns did not. So it applies only below 355px,
   where the columns really are too narrow to set type in. */
@media(max-width:354.98px){
  .tcard__slide{ grid-template-columns:1fr; }
  .tcard__shot{ grid-column:1; grid-row:1; width:60%; justify-self:center; }
  .tcard__slide blockquote{ grid-column:1; grid-row:2; margin-top:.7em;
    text-align:center; }
}
.tcard__meta{ min-width:0; }
/* .68rem, because one line is a requirement and the card is now 42% of
   a 544px photo: 206px of inner width against a 44-character name.
   Measured, not chosen: 10.6px is the largest size that holds one line
   on all four names, so this is one notch under it. */
.tcard__who{ display:block; font-family:var(--f-black); font-size:.65rem;
  text-transform:uppercase; letter-spacing:.01em; line-height:1.25; }
.tcard__who i{ font-style:normal; color:var(--pink-text); padding:0 .15em; }
.tcard__src{ display:flex; align-items:center; flex-wrap:wrap; gap:.15em .45em;
  font-family:var(--f-type); font-size:.64rem;
  letter-spacing:.03em; margin-top:.35em; opacity:.8; }
.tcard__stars{ display:inline-flex; gap:1px; }
.tcard__stars svg{ width:.82em; height:.82em; fill:var(--pink-deep); display:block; }
.tcard__srctxt{ white-space:nowrap; }

/* .fold__price and .fold__cta each used to be declared twice, here and
   again further down, and the later copy silently won. Only the live
   copy is left; what stays here is the separator, which nothing else
   declares. */
.fold__price i{ font-style:normal; color:var(--pink-text); padding:0 .18em; }

/* The button is the one thing that must never be the reason the fold
   overflows, so its type and its padding both track the short axis. */
.fold__cta .btn{ font-size:clamp(.92rem,min(1.5vw,2.05vh),1.2rem);
  padding:clamp(.6em,min(1.1vw,1.5vh),.85em) clamp(1.4em,min(2.6vw,3.4vh),2.1em); }
.fold__cta .btn{ display:block; width:100%; text-align:center; }
@media(min-width:560px){ .fold__cta .btn{ display:inline-block; width:auto; } }

/* Objection removal, not value. Smaller, newsprint grey, thinner tick —
   deliberately a different weight class from .benefits. */
.fud{ list-style:none; margin:clamp(7px,min(2vw,1.4vh),20px) 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.35em 1.4em; max-width:70ch; }
/* One step up from .76rem/.62: at that size the guarantee and the credit
   were too faint to read at a glance, and both are load-bearing. Still
   well under .benefits' 17.6px semibold, so the row above keeps the
   hierarchy. */
.fud li{ position:relative; padding-left:1.15em; font-family:var(--f-type);
  font-size:clamp(.78rem,min(.95vw,1.3vh),.86rem); line-height:1.5;
  color:rgba(var(--ink-rgb),.78); }
.fud li::before{ content:"\2713"; position:absolute; left:0;
  color:rgba(var(--ink-rgb),.62); }

/* Keeps a measurement whole across a line break. */
.nbr{ white-space:nowrap; }

/* One badge, four card types: the hero rotator, the Results grid and
   both review sections. The tick is a ::before rather than a character
   in the markup, which is how every other tick on this page is done:
   it is decoration, so it stays out of textContent and out of anything
   read aloud, and the words carry the claim on their own. */
.vbadge{ display:block; clear:both; text-align:center;
  font-family:var(--f-hero-body); font-size:.8125rem; font-weight:500;
  line-height:1.4; color:var(--ink); margin-top:.4em; }
.vbadge::before{ content:"\2713"; color:var(--pink-deep);
  font-weight:700; margin-right:.35em; }

/* THESE TWO BLOCKS LIVE HERE, AFTER THE BASE RULES, AND THAT IS THE
   WHOLE POINT. A media query carries no extra specificity: .fud li
   inside one still ties with .fud li outside it, so source order
   decides. Declared up beside the grid, every override below lost
   silently to the base rule further down the file. */
/* SHORT WINDOWS. The third checkmark line the new week structure needs
   costs about two lines of body copy, and at 650px tall that is 26px
   the fold did not have. Every number here is spacing, not type: the
   H1 is already sitting on its 28px floor at this height and the
   checkmarks are on their 16px floor, so neither can give anything
   back. The sentence gap comes down from .35em to .26em, which is
   still comfortably more than the leading inside a sentence.

   820px, not 700: 1280x720 and 1024x768 were over by 6px and 2px, and
   a band that stops at 700 leaves exactly the two common laptop
   heights outside it. */
@media(min-width:769px) and (max-height:820px){
  .fold{ padding-block:8px; }
  .fold__h1 .h1-line + .h1-line{ margin-top:.26em; }
  .benefits__add{ margin-top:.08em; }
  /* The eyebrow grew 25% in the same pass, and below 1280px it wraps to
     two lines, so its own spacing pays for the extra line here. */
  .fold__eyebrow{ margin-bottom:clamp(8px,1.4vh,18px); }
  .fold__eyebrow-rest{ margin-top:clamp(6px,1.2vh,14px); }
  /* "and emotional regulation" put the second checkmark onto a second
     line, 13px more than 1280x650 had. Four gaps give back three or
     four pixels each rather than one gap giving back thirteen, which
     would have been visible as a single collapsed step. */
  .fold__sub{ margin-top:clamp(8px,1.5vh,20px); }
  .benefits{ margin-top:clamp(8px,1.4vh,20px); }
  .fold__price{ margin-top:clamp(8px,1.5vh,22px); }
  .fold__cta{ margin-top:clamp(6px,1.2vh,20px); }
  .fud{ margin-top:clamp(5px,1vh,18px); }
  .benefits{ gap:clamp(.22em,.55vh,.5em); }
  .fold__eyebrow{ margin-bottom:clamp(6px,1.2vh,18px); }
}

/* 769 to 1279. The credit is the inline .fold__by line at these widths
   rather than the card, so the text column carries one extra line that
   it does not carry above 1280. The top pad gives that line back rather
   than letting it push the guarantee row off the screen. */
@media(min-width:769px) and (max-width:1279.98px){
  .fold{ padding-block:10px 8px; }
}

/* THE CARD IS SIZED BY ITS CLEAR ZONE, not by taste. It sits at
   bottom:-14px, so its top edge is imageHeight + 14 - cardHeight, and
   that has to land BELOW where Ana's face starts. Where the hero image
   is short (a 650px window) or narrow (a phone), the zone shrinks and
   the card has to shrink with it. One step of type, measured against
   the photo at each size rather than guessed. */
@media(max-height:820px), (max-width:768.98px){
  /* Hanging the card further past the frame bottom pushes its TOP down
     by the same amount. It is the one lever that buys clearance without
     taking anything off the type. */
  /* WIDER HERE, which is the counterintuitive part: a card holds a
     fixed amount of text, so widening it makes it SHORTER, and height
     is what puts it through Ana's face on a short or narrow window.
     The 42% cap cannot hold at these sizes. The report says what
     percentage each one actually lands on. */
  .tcard{ width:min(72%,300px); padding:.6em .66em; bottom:-30px; }
  .tcard blockquote{ font-size:.8125rem; }
  .tcard__who{ font-size:.74rem; }
  /* 12px rather than 13, still inside her range. The badge added 23px
     to every card and that was enough to put 1280x720 six pixels into
     Ana's face. 760 rather than 700 for the same reason: 720 is a real
     laptop height and it sat just outside the old band. */
  .vbadge{ font-size:.75rem; margin-top:.3em; }
}
/* A second step at the narrowest phones. At 360px the photo is 331x414
   and the clear zone below Ana's face is 238px; one step left the card
   at 255 and 17px into her face. */
@media(max-width:400px){
  .tcard blockquote{ font-size:.75rem; }
  .tcard__who{ font-size:.69rem; }
  .vbadge{ font-size:.72rem; margin-top:.2em; }
  /* 360px is the tightest frame on the page: a 331x414 photo leaves
     238px below Ana's face, and the badge had taken the card to 245. */
  .tcard{ width:min(72%,300px); padding:.55em .62em; bottom:-30px; }
  .tcard__who{ margin-top:.42em; }
  /* The last two pixels come from the overhang rather than the type:
     six more pixels past the frame bottom pushes the card's TOP six
     pixels down, which is the only lever left that costs no legibility. */
}

/* Narrow desktops and tablets. The photo keeps 44% of a wide window, but
   at 769px that leaves the text 377px, and copy this long wraps into
   more lines than the height budget has room for. The floors are fixed
   at 22px and 16px by design, so width is the only variable left: give
   the text the room and the line count comes down instead of the type. */
@media(min-width:769px) and (max-width:1100px){
  .fold__col{ column-gap:clamp(18px,2.4vw,32px); }
  /* The 78ch cap was set for the eyebrow at its full size. Down here the
     type is at its floor, so 78ch lands BELOW the column width and
     orphans the last word onto a second line that costs 18px for four
     characters. The column is the only cap needed. */
  .fold__eyebrow{ max-width:none; }
  /* The photo has to stay TALL here, and the reason is the proof card
     rather than the photo. At 4:5 in a 313px column the image is only
     392px high, and the card, which grew when the quote started
     wrapping around a 40% photo, then reaches into Ana's face and the
     brain with nowhere else to go. Height tied to the viewport gives
     the card a clear zone to sit in.
     The side crop this reintroduces was measured, not assumed: the
     subject spans 29% to 74% of the frame and the visible window keeps
     all of it, so nothing that matters is cut. */
  .tcard{ width:min(72%,300px); padding:.6em .66em; }
  .tcard blockquote{ font-size:.8125rem; }
}
@media(min-width:769px) and (max-width:920px){
  .fold__col{ column-gap:16px; }
  /* Three tracked uppercase lines of eyebrow cost more here than they
     are worth; the leading comes down, the size does not. */
  .fold__eyebrow-rest{ line-height:1.35; letter-spacing:.05em; }
  /* The guarantee row is fine print, not the 16px body floor, and one
     step down is what keeps both items on a single row here. Two rows
     cost 24px, which is most of the budget this width is short. */
  .fud{ gap:.35em 1em; }
  .fud li{ font-size:.72rem; }
  /* Last few pixels. Spacing, not type: the floors on the headline, the
     subhead and the checkmarks are untouched. */
  .fold{ padding-block:5px; }
}

.faces{ display:flex; align-items:center; gap:.7em; flex-wrap:wrap;
  margin:clamp(16px,2vw,22px) 0 0; }
.faces__pile{ display:inline-flex; }
.faces__pile img{ width:34px; height:34px; border-radius:50%;
  object-fit:cover; border:2px solid var(--ink); background:var(--paper-2); }
.faces__pile img + img{ margin-left:-11px; }
.faces__text{ font-family:var(--f-hero-body); font-size:.86rem; font-weight:600;
  line-height:1.35; }

.creds{ list-style:none; display:flex; flex-wrap:wrap; gap:6px;
  margin:clamp(14px,1.8vw,18px) 0 0; padding:0; }
/* No text-transform. It rendered "NASM + AFAA CEUs" as "NASM + AFAA
   CEUS", which is not the credential. The caps are literal in the markup
   instead, so the one intentional lowercase letter survives. */
.creds li{ font-family:var(--f-type); font-size:.64rem; font-weight:700;
  letter-spacing:.09em;
  border:1px solid rgba(var(--ink-rgb),.4); border-radius:var(--radius-pill);
  padding:.34em .7em; opacity:.8; }
/* Sits under the closing line rather than beside it, with the block step
   above so it reads as a footer to the bio, not another paragraph. */
/* 1.5x the body paragraph gap, which is 1.15rem, so 1.725rem. Was
   --sp-block at 48px, nearly three times the body gap, and it detached
   the badges from the line they belong under. */
.bioband__creds{ margin-top:1.725rem; }

/* effort + time, stated before the ask */
.effort{ display:flex; flex-wrap:wrap; gap:0 26px; list-style:none; padding:1.1em 0; margin:1.4em 0 0;
  border-top:1px solid rgba(var(--ink-rgb),.18); border-bottom:1px solid rgba(var(--ink-rgb),.18); }
.effort li{ font-family:var(--f-type); font-size:.86rem; }
.effort li strong{ display:block; font-family:var(--f-black); font-weight:400; font-size:1.15rem; line-height:1.2; }

/* The price is a statement now, not a meta line, so it is set in the
   headline face and reads as an instruction: start today, for this much.
   $69 carries the page's acid highlight because the number is the single
   thing here that has to be impossible to miss. */
.fold__price{ font-family:var(--f-black); font-weight:400; text-transform:uppercase;
  font-size:clamp(1.15rem,min(2.3vw,3vh),1.85rem); line-height:1.15;
  letter-spacing:-.015em; max-width:70ch;
  margin:clamp(9px,min(3.6vw,2.1vh),41px) 0 0; }
.fold__price strong{ font-weight:400; background:var(--acid);
  box-shadow:3px 3px 0 rgba(var(--ink-rgb),.85); padding:.04em .22em;
  margin-left:.12em; display:inline-block; }

/* The discount confirmation. Not muted like the terms line above it —
   this is the one note on the page that is good news, so it takes the
   acid marker the page already uses for "pay attention to this". */
.promonote{ display:inline-block; font-family:var(--f-type); font-size:.8rem;
  font-weight:700; letter-spacing:.01em; line-height:1.4; margin:.7em 0 0;
  background:var(--acid); border:var(--line); border-radius:var(--radius-tag);
  padding:.3em .6em; }

/* Terms stay quiet: they remove an objection, they do not make the case. */

.fold__cta{ margin-top:clamp(7px,min(2.6vw,1.6vh),29px); }

/* risk reversal, directly under the button */
.badges{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:1.1em 0 0; }
.badges li{ font-family:var(--f-type); font-size:.8rem; padding:.42em .75em; border:1px solid rgba(var(--ink-rgb),.35); background:var(--white); }

/* proof, above the fold */
.proofbar{ margin-top:clamp(18px,2.2vw,26px); padding-top:1.2em; border-top:1px solid rgba(var(--ink-rgb),.18); }
.proofbar p{ margin:0; font-size:.94rem; line-height:1.5; }
.proofbar cite{ font-style:normal; font-family:var(--f-type); font-size:.8rem; display:block; margin-top:.5em; opacity:.8; }
.proofbar__creds{ font-family:var(--f-type); font-size:.78rem; letter-spacing:.03em; text-transform:uppercase; opacity:.75; margin-top:1em; }


/* ---------- sticky mobile CTA ---------- */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; align-items:center; gap:14px;
  padding:10px 16px; background:var(--ink); color:var(--paper);
  border-top:2px solid var(--pink);
}
/* THE BAR IS THE BUTTON. It held a price label and a separate button, so
   the price was the one thing on it that could not be pressed. One child
   now, and it takes the width: the tap target is the full bar, which is
   the easiest thing on the page to hit with a thumb.
   justify-content is gone with the second child — space-between on a
   single item does nothing, and flex:1 is what actually sizes it. */
.sticky-cta__btn{ flex:1; text-align:center; }
.sticky-cta .btn{ padding:.85em 1.2em; font-size:.9rem; background:var(--pink); color:var(--ink); }
/* Same handover line as .icard, .fold__by and the two-column hero. Left
   at 900px the bar would have covered the bottom 70px of a fold that is
   meant to fit exactly one screen from 769px up. */
@media(min-width:769px){ .sticky-cta{ display:none; } }
@media(max-width:768.98px){ body{ padding-bottom:70px; } }


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


/* ---------- /reviews ----------
   The page borrows the whole system; these are the only rules that do
   not already exist for /formula. */
.rev__h1{ font-family:var(--f-hero); font-weight:400; font-size:1rem;
  line-height:1.15; letter-spacing:-.015em; margin:clamp(14px,2vw,22px) 0 0; }
/* The acid block is declared under .fold__h1, so it does not reach a
   heading outside the fold. Same three properties, same device. */
.rev__h1 .h1-ink{ display:inline; color:var(--ink); border:0; box-shadow:none;
  border-radius:0; padding:0 .2em .1em; line-height:1.15;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  font-size:clamp(2rem,min(5vw,7vh),3.4rem); }
.rev__h1 .h1-ink--mark{ background:var(--acid); }
.rev__lead{ font-family:var(--f-hero-body);
  font-size:clamp(1rem,min(1.5vw,2.1vh),1.15rem); line-height:1.5;
  max-width:70ch; text-wrap:pretty; margin:clamp(12px,1.8vw,20px) 0 0; }
.trust--tp{ background:var(--paper-2); }
/* The empty-state line sits in the flow with the intro now, so it needs
   type, not padding. */
.rev__empty{ font-family:var(--f-type); font-size:.95rem; opacity:.75; }
/* .midcta carries a full block of padding for a mid-page CTA on a long
   page. Here the button follows two short lines and that padding read as
   a hole. */
.midcta--tight{ padding-top:clamp(14px,2vw,22px); }

.rev__summary{ font-family:var(--f-type); font-size:.9rem; line-height:1.5;
  opacity:.8; margin:clamp(8px,1.2vw,14px) 0 0; }
.rev__summary[hidden]{ display:none; }


/* ---------- cookie notice, /formula only ---------- */
/* Bottom right on desktop: the hero CTA and the price sit in the left
   column, and a bottom-left card lands on the button at 1440x900. On
   phones it is full width and sits ABOVE the sticky bar, measured from
   the bar's own height, so the $69 CTA is never covered. */
.cbar{ position:fixed; z-index:40; left:16px; right:16px; bottom:16px;
  background:var(--paper); color:var(--ink);
  border:var(--line-bold); border-radius:var(--radius-card);
  box-shadow:var(--shadow-md); padding:11px 14px; }
/* 440px so the sentence sets on two lines rather than three. At 390 it
   ran to three and the card stood 133px tall against a 100px target. */
@media(min-width:769px){ .cbar{ left:auto; right:24px; bottom:24px; width:440px; } }
/* BACK ABOVE THE STICKY BAR ON PHONES, and the hero reorder is what makes
   that safe. The note this replaces said the card had to go to the top
   because a bottom card "sits exactly where the hero CTA sits" — true
   then, and the hero CTA has since moved up to just under the
   sub-headline. What the card lands on now is the video frame, which has
   nothing to press but a play button in its middle.

   The top was worse than the problem it solved: the phone hero has the
   wordmark and then the headline, so a 100px card at top:12px sat on the
   headline. That is the audit finding this fixes.

   Measured off the bar rather than guessed, the same way .mtoast is, so a
   bar that grows a line does not end up underneath it. */
@media(max-width:768.98px){
  .cbar{ top:auto; bottom:calc(var(--mstickyh,78px) + 12px); }
}
.cbar[hidden]{ display:none !important; }
/* 14px floor. .8rem resolved to 12.8px at every width, which is below
   what this page asks of any other body text and below what a consent
   notice should ask anyone to read on a phone. The notice grows a line
   at some widths and that is the right trade. */
.cbar__p{ font-family:var(--f-hero-body); font-size:.875rem; line-height:1.38; margin:0 0 .62em; }
.cbar__p a{ color:var(--pink-text); }
.cbar__row{ display:flex; gap:9px; }
/* Same size, same shape, same hit area. Decline is not a link and not a
   cross: it has to be as easy to press as accept. */
.cbar__btn{ flex:1 1 0; font-family:var(--f-black); text-transform:uppercase;
  font-size:.74rem; letter-spacing:.03em; padding:.62em .5em; cursor:pointer;
  border:var(--line-bold); border-radius:var(--radius-pill); background:var(--white);
  color:var(--ink); box-shadow:3px 3px 0 var(--ink); }
.cbar__btn--yes{ background:var(--pink); }
.cbar__btn:hover{ transform:translateY(-1px); box-shadow:4px 4px 0 var(--ink); }
.cbar__btn:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.cbar__btn:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }
/* The footer entry point. It is a button because it opens the notice
   rather than going anywhere, and it has to read as one of the links
   beside it.

   THE TYPOGRAPHY IS NOT HERE. It comes from the .footer-links rule above,
   which the button is now named in, so the three items can never drift
   apart: change the links and the button follows. What is left here is
   the browser's own button chrome being taken back off.

   `font: inherit` used to sit here and was the whole bug. A button
   inherits from its PARENT, which is the flex row, so it picked up the
   body's 16px regular and none of the 11px bold uppercase the sibling
   links get from their own rule.

   line-height is the one that would still bite after that: a button does
   not inherit it, browsers set `normal`, and the row would sit on two
   different baselines. */
.footer-links .cookie-settings{
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  line-height: inherit;
  cursor: pointer;
}


/* ---------- member proof cards, /formula only ---------- */
/* BOTTOM LEFT on desktop, because the cookie notice holds the bottom
   right. They can both be on screen and they never share a corner.

   z-index below the notice: if the two ever raced, the decision the
   visitor has not made yet should win. In practice the script will not
   render while the notice is open. */
.mtoast{ position:fixed; z-index:30; left:16px; right:16px; bottom:16px;
  background:var(--paper); color:var(--ink);
  border:var(--line-bold); border-radius:var(--radius-card);
  box-shadow:var(--shadow-md); padding:13px 34px 12px 15px; }
@media(min-width:769px){ .mtoast{ right:auto; left:24px; bottom:24px; width:330px; } }
/* Above the sticky bar on phones, never over it. */
@media(max-width:768.98px){ .mtoast{ bottom:calc(var(--mstickyh,78px) + 12px); } }
.mtoast[hidden]{ display:none !important; }
.mtoast__q{ margin:0 0 .55em; font-family:var(--f-hero-body);
  font-size:.82rem; line-height:1.4; }
.mtoast__who{ margin:0; font-family:var(--f-type); font-size:.66rem;
  font-weight:700; letter-spacing:.06em; text-transform:uppercase; opacity:.75; }
.mtoast__who i{ font-style:normal; color:var(--pink-text); padding:0 .15em; }
.mtoast__badge{ margin:.3em 0 0; text-align:left; font-size:.72rem; }
.mtoast__x{ position:absolute; top:6px; right:8px; width:24px; height:24px;
  padding:0; line-height:1; font-size:1.05rem; background:none; border:0;
  color:var(--ink); opacity:.55; cursor:pointer; }
.mtoast__x:hover{ opacity:1; }
.mtoast__x:focus-visible{ outline:3px solid var(--ink); outline-offset:2px; }
/* Motion is a slide and a fade, and it is the first thing to go. With
   reduced motion the card simply appears and disappears. */
.mtoast{ opacity:0; transform:translateY(8px);
  transition:opacity .3s ease, transform .3s ease; }
.mtoast.is-on{ opacity:1; transform:none; }
@media(prefers-reduced-motion: reduce){
  .mtoast{ transition:none; transform:none; opacity:1; }
  .mtoast.is-on{ transform:none; }
}


/* ============================================================
   THE TWO HERO CARDS ARE PAUSED, 2026-09-23.

   Not deleted. Every rule that places them is still below, and the
   markup is still in the page, so bringing them back is deleting this
   one block. Ana's instruction: ship a clean hero now and design the
   cards properly later. See docs/formula-todo.md.

   What this hides: .icard, the "Created by Ana Celis" credit card, and
   .tcard, the rotating before-and-after proof card. Both only ever
   existed inside .fold__media, so nothing else on the page is touched.

   THE CREDENTIALS DO NOT GO WITH THEM. .icard carried "Certified
   Pilates instructor" and "ISSA-certified personal trainer" above
   1280, and .fold__by carried the same line below 1280, never both.
   With the card paused, .fold__by now runs at every width so the
   credential line stays in the hero on desktop as well.
   ============================================================ */
.fold__media .icard,
.fold__media .tcard{ display:none; }

/* The bio section is paused on phones only, same date, same reason. It
   stays on desktop, where it is the page's other home for the
   credentials. */
@media(max-width:768.98px){ .bioband--paused{ display:none; } }

/* THE HERO PORTRAIT, PAUSED ON PHONES, 2026-09-23.

   .fold__media is the box that carried the photo above 769px until the
   video took that job, and below 769px it still sat at the foot of the
   hero column, under the credit line, as a full width portrait. Ana
   asked for it off the phone with the rest.

   The whole box goes rather than the <img> alone, because the box brings
   its own top margin and the only other things inside it are the desktop
   video frame, which is display:none down here anyway, and the two cards,
   which are paused. Worth knowing if the cards come back: they live
   inside this box, so this rule would hide them on phones too. */
@media(max-width:768.98px){ .fold__media{ display:none; } }

/* Was: hidden at 1280 and up, because .icard took over there. */
@media(min-width:1280px){ .fold__by{ display:block; } }


/* ============================================================
   THE HERO CARDS, LAST IN THE FILE AND FOR A REASON.

   Three rules further up set .tcard to width:min(72%,300px), and one of
   them is keyed on max-height:820px, which matches most laptop screens.
   Two of them also set bottom:-30px, which is back over the control bar.
   A media query carries no extra specificity, so wherever this block is
   written earlier in the file those rules win. Written last, it wins.

   This file has now taught the same lesson four separate times in one
   day: the photo handover, the play button, the card width, and this.
   If a rule here ever stops working, look for a later one before
   anything else.
   ============================================================ */
/* THE PROOF CARD, 34% ON THE FRAME AND LIFTED CLEAR OF THE CONTROLS.

   34% is the number that clips nothing at any width. Less overlap pushes
   the card further left into the hero copy, which is the opposite of
   what it looks like it should do: the card's far edge is what reaches
   the text, so a bigger overlap is the safer one. At 25% it clipped a
   paragraph by 40px at 1280.

   THE VERTICAL POSITION, AND THERE IS LESS ROOM THAN IT LOOKS.

   Measured on a 560px frame with the controls up: the topmost control
   ink, the top edge of the play triangle, sits 60px above the frame's
   bottom. The scrubber is 24px above it and the timer sits beside the
   play button. So 60px is the floor: at bottom:60px this card's lower
   edge touches the play button.

   bottom:64px leaves 4px of clearance, which is as low as the card can
   sit and still be clear. It came down from 72px, so the whole move is
   8px. Chrome's bar is the tallest of the three that matter, so a figure
   that clears Chrome clears Safari and Firefox as well.

   The centred play button before playback is clear as well: the card
   stops 49px short of it at 1280. */
@media(min-width:1000px){
  .tcard{ left:calc(var(--proof-w) * (var(--card-overlap) - 1));
    right:auto; bottom:64px; z-index:2;
    width:var(--proof-w); max-width:none; }
}

/* BELOW 1000 THE CARD LEAVES THE HERO. At 900 it renders 728px tall
   against a 462px frame, because the narrow-band rules shrink its type
   and the quote wraps to many more lines. Nothing of that shape fits
   beside a frame that size. The trust strip directly under the hero
   carries the proof instead. Phones are untouched: below 769 the card
   sits under the photo in the hero stack, where it always has. */
@media(min-width:769px) and (max-width:999.98px){
  .tcard{ display:none; }
}