/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Plus Jakarta Sans Fallback";src:local("Arial");font-weight:400;size-adjust:106.04%;ascent-override:97.88%;descent-override:20.93%;line-gap-override:0.00%}
@font-face{font-family:"Plus Jakarta Sans Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:100.87%;ascent-override:102.90%;descent-override:22.01%;line-gap-override:0.00%}
@font-face{font-family:"Lato Fallback";src:local("Arial");font-weight:400;size-adjust:98.07%;ascent-override:100.64%;descent-override:21.72%;line-gap-override:0.00%}
@font-face{font-family:"Lato Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:92.78%;ascent-override:106.38%;descent-override:22.96%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* ==========================================================================
   AQUAFIT - aquafitdaily.com
   Component system taken from the alphaereces.com reference: centred section
   heads, pill fact chips, circular-marker check lists, a left-ruled Quick
   Answer, a sticky product rail, ribboned plan cards, a gradient closing CTA.
   Palette re-derived from the bottle: a deep indigo-navy wordmark, a mid blue
   figure, a cyan highlight dot, white label. Nothing crimson survives from the
   reference; colour always comes from the product.
   Type: Plus Jakarta Sans (display) + Lato (body).
   Chrome for this site: no utility bar, outlined nav CTA, a single centred
   footer column with a seals row beneath it, 14px radii, borderless cards
   carrying a soft shadow, a light hero on one large soft radial, and card
   scale-in as the only motion. The hero never moves.
   ========================================================================== */

/* ---- 1. DESIGN TOKENS ---------------------------------------------------- */
:root{
  /* pale aqua ground + ink */
  --paper:      #f3fafd;
  --tint:       #e7f4fa;
  --tint2:      #d9ebf6;
  --card:       #ffffff;
  --ink:        #17223f;
  --ink-dk:     #0d1630;
  --muted:      #56628a;
  --faint:      #676e83;
  --line:       #d8e7f1;
  --line-soft:  #e9f3f9;

  /* the wordmark navy - the lead */
  --navy:       #1d2b6e;
  --navy-dk:    #121a4a;
  --navy-dp:    #0a1033;

  /* the figure blue - the action colour */
  --blue:       #2f5ccf;
  --blue-dk:    #21419e;
  --blue-lt:    #e9effc;
  --blue-line:  #c5d4f4;

  /* the cyan highlight dot on the label figure */
  --aqua:       #35a6dc;
  --aqua-dk:    #1b76a1;
  --aqua-lt:    #e3f4fc;
  --aqua-line:  #b7e1f3;

  /* a warm signal colour, from the gold money-back roundel */
  --gold:       #c08a2e;
  --gold-lt:    #fdf5e6;
  --gold-line:  #efdcb4;

  --shadow:    0 20px 46px -24px rgba(18,26,74,.40);
  --shadow-sm: 0 10px 26px -18px rgba(18,26,74,.34);
  --shadow-lift:0 26px 54px -26px rgba(18,26,74,.46);
  --ease:      cubic-bezier(.22,1,.36,1);

  /* 14px is this site's signature radius */
  --r-s: 10px; --r: 14px; --r-l: 20px;

  --display:'Plus Jakarta Sans','Plus Jakarta Sans Fallback',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --sans:'Lato','Lato Fallback',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --wrap: 1180px; --prose: 68ch; --measure: 760px; --measure-wide: 980px;
}

/* ---- 2. RESET / BASE ----------------------------------------------------- */
*{box-sizing:border-box;min-width:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:86px}
body{
  margin:0;font-family:var(--sans);font-size:17px;line-height:1.75;
  color:var(--ink);background:var(--paper);overflow-x:clip;max-width:100%;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg,video,iframe,table,figure{max-width:100%}
img{height:auto;display:block}
a{color:var(--blue-dk);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--display);color:var(--navy-dk);font-weight:700;
  line-height:1.18;letter-spacing:-.018em;margin:0 0 .5em}
h1{font-size:clamp(2.05rem,4.8vw,3.25rem)}
h2{font-size:clamp(1.62rem,3.3vw,2.32rem)}
h3{font-size:1.24rem;line-height:1.3}
h4{font-size:1.02rem}
p{margin:0 0 1.12em}
strong,b{font-weight:700}
hr{border:0;border-top:1px solid var(--line);margin:0}
::selection{background:var(--aqua-lt)}
table{border-collapse:collapse}
section[id]{scroll-margin-top:86px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
.prose{max-width:var(--prose)}
.center{text-align:center}
.center .prose{margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;background:#fff;color:var(--blue-dk);
  padding:10px 16px;border-radius:var(--r-s);z-index:2000}
.skip:focus{left:12px;top:12px}

/* ---- 3. SHARED ATOMS ----------------------------------------------------- */
.eyebrow{display:inline-block;font-family:var(--display);font-weight:700;font-size:0.8438rem;
  letter-spacing:.17em;text-transform:uppercase;color:var(--aqua-dk);margin-bottom:.9rem}
.note{font-size:0.9062rem;color:var(--faint);line-height:1.64}
.lead{font-size:1.16rem;line-height:1.66;color:var(--muted)}

.pill{display:inline-flex;align-items:center;gap:8px;background:var(--navy);color:#d7e2ff;
  font-family:var(--display);font-weight:700;font-size:0.8438rem;letter-spacing:.1em;
  text-transform:uppercase;padding:9px 16px;border-radius:999px;margin-bottom:18px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--display);font-weight:700;font-size:1rem;padding:.92em 1.7em;
  border-radius:var(--r);cursor:pointer;border:1.5px solid transparent;min-height:46px;
  transition:transform .14s var(--ease),background .2s ease,box-shadow .2s ease,color .2s ease;
  text-decoration:none;line-height:1;text-align:center}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn--cta{background:var(--blue);color:#fff;box-shadow:0 12px 26px -14px rgba(47,92,207,.85)}
.btn--cta:hover{background:var(--blue-dk);color:#fff}
.btn--ghost{background:transparent;color:var(--navy);border-color:var(--blue-line)}
.btn--ghost:hover{background:var(--blue-lt);color:var(--navy-dk);border-color:var(--blue)}
.btn--dark{background:var(--navy-dk);color:#fff}
.btn--dark:hover{background:var(--navy-dp);color:#fff}
.btn--lg{font-size:1.06rem;padding:1.02em 2em}
.btn--block{display:flex;width:100%}

.sec{padding:76px 0}
.sec--tint{background:var(--tint)}
.sec--aqua{background:linear-gradient(168deg,var(--aqua-lt) 0%,var(--tint2) 100%)}
.sec--tight{padding:52px 0}
.sec__head{max-width:var(--prose);margin-bottom:36px}
.sec--center .sec__head{margin-inline:auto;text-align:center}

/* ---- 4. NAV (no utility bar on this site) -------------------------------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(243,250,253,.94);
  backdrop-filter:saturate(150%) blur(9px);border-bottom:1px solid var(--line);
  transition:box-shadow .3s ease}
.nav--stuck{box-shadow:var(--shadow-sm)}
@media(max-width:920px){
  .nav{transition:transform .28s var(--ease),box-shadow .3s ease;will-change:transform}
  .nav--away{transform:translateY(-100%)}
}
@media(prefers-reduced-motion:reduce){.nav{transition:none}}
.nav__row{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding-block:14px;flex-wrap:nowrap}
/* the wordmark is a text node plus a span; a flex gap would split it */
.brand{display:inline-flex;align-items:center;gap:0;font-family:var(--display);
  font-weight:800;font-size:1.4rem;letter-spacing:-.025em;color:var(--navy-dk);
  flex:none;white-space:nowrap}
.brand:hover{text-decoration:none}
.brand span{color:var(--aqua-dk);font-weight:600}
.brand svg{width:30px;height:30px;flex:none;margin-right:9px}
.menu{display:flex;align-items:center;gap:23px;list-style:none;margin:0;padding:0;flex-wrap:nowrap}
.menu a{font-size:.92rem;font-weight:700;color:var(--muted);white-space:nowrap}
.menu a:hover,.menu a[aria-current="page"]{color:var(--blue-dk);text-decoration:none}
.nav__cta{display:flex;align-items:center;gap:12px;flex:none}
.nav__cta .btn{border-radius:var(--r);font-size:.93rem;padding:.72em 1.3em;min-height:42px}
.burger{display:none;background:none;border:0;flex-direction:column;gap:5px;cursor:pointer;padding:6px}
.burger span{width:22px;height:2px;background:var(--navy);display:block;border-radius:2px}
/* the row sheds rather than wraps */
@media(max-width:1400px){.menu{gap:19px}.menu a{font-size:.89rem}}
@media(max-width:1300px){.menu{gap:15px}.menu a{font-size:.86rem}}
@media(max-width:1120px){
  .menu{display:none;gap:0}
  .menu.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    background:var(--paper);border-bottom:1px solid var(--line);padding:8px 22px;
    box-shadow:var(--shadow);max-height:78vh;overflow:auto}
  .menu.open li{border-top:1px solid var(--line-soft)}
  .menu.open a{display:block;padding:13px 0;min-height:44px}
  .burger{display:flex;min-height:44px;min-width:44px;align-items:center;justify-content:center}
}
@media(max-width:430px){.nav__cta .btn{display:none}}

/* ---- 5. STICKY BUY BAR --------------------------------------------------- */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--navy-dk);color:#fff;
  transform:translateY(105%);transition:transform .3s var(--ease);box-shadow:0 -6px 24px rgba(0,0,0,.22)}
.buybar.show{transform:translateY(0)}
.buybar__in{display:flex;align-items:center;justify-content:space-between;gap:16px;
  max-width:var(--wrap);margin-inline:auto;padding:11px 22px}
.buybar__t{font-size:.95rem;line-height:1.32}
.buybar__t b{font-family:var(--display);font-size:1.03rem;display:block}
.buybar__t .from{color:#8fd4f2;font-weight:700}
.buybar .btn{white-space:nowrap}
@media(max-width:560px){.buybar__t{font-size:0.9062rem}.buybar__t b{font-size:.93rem}}

/* ---- 6. HERO (light ground, one large soft radial, no motion) ------------ */
.hero{background:var(--paper);position:relative;overflow-x:clip;overflow-y:visible}
/* the single large soft radial this site's hero is built on */
.hero::before{content:"";position:absolute;z-index:0;top:-46%;right:-12%;width:74%;height:190%;
  background:radial-gradient(closest-side circle,var(--aqua-lt) 0%,rgba(227,244,252,.58) 55%,rgba(227,244,252,0) 100%);
  pointer-events:none}
.hero__grid{display:grid;grid-template-columns:1.06fr .94fr;gap:46px;align-items:start;
  padding-block:58px 70px;position:relative;z-index:1}
.hero h1 span{color:var(--blue-dk)}
.hero h1 small{display:block;margin-top:.34em;font-size:.37em;font-weight:600;
  letter-spacing:0;line-height:1.32;color:var(--muted)}
@media(max-width:560px){.hero h1 small{font-size:.46em}}
@media(max-width:430px){.hero__card img{max-width:196px}}
.hero__sub{font-size:1.12rem;color:var(--muted);margin:0 0 22px;max-width:52ch}
.ticks{list-style:none;padding:0;margin:20px 0 26px;display:grid;gap:11px}
.ticks li{display:flex;gap:11px;align-items:flex-start;font-weight:400}
.ticks .ck{flex:0 0 22px;height:22px;border-radius:50%;background:var(--blue);color:#fff;
  display:grid;place-items:center;font-size:.74rem;margin-top:4px;font-weight:700;
  box-shadow:0 0 0 4px rgba(47,92,207,.14)}
.hero__cta{display:flex;gap:13px;flex-wrap:wrap;align-items:center}
.pay{display:flex;align-items:center;gap:14px;margin-top:20px;flex-wrap:wrap}
.pay img{height:23px;width:auto}
.pay span{font-size:0.9062rem;color:var(--aqua-dk);font-weight:700}

.hero__media{position:relative;text-align:center}
.hero__stick{position:relative;display:inline-block}
.hero__card{background:#fff;border-radius:var(--r-l);padding:24px 30px;
  box-shadow:var(--shadow-lift);display:inline-block;position:relative;z-index:1}
.hero__card img{margin:0 auto;filter:drop-shadow(0 20px 28px rgba(18,26,74,.20))}
.hero__tag{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);background:var(--navy);
  color:#dbe6ff;font-family:var(--display);font-weight:700;font-size:0.9062rem;letter-spacing:.09em;
  text-transform:uppercase;padding:8px 16px;border-radius:999px;white-space:nowrap;z-index:2}
.floaty{position:absolute;background:#fff;border-radius:var(--r-s);
  padding:10px 14px;box-shadow:var(--shadow);font-family:var(--display);font-weight:700;
  font-size:0.9062rem;line-height:1.2;color:var(--navy-dk);z-index:2}
.floaty small{display:block;color:var(--aqua-dk);font-size:0.9062rem;letter-spacing:.07em;
  text-transform:uppercase;font-weight:700;margin-top:2px}
.floaty--tl{top:8px;left:-10px}
.floaty--br{bottom:34px;right:-10px}

/* the sticky rail: offset by the header, never gated on viewport height */
@media(min-width:1025px){
  .hero__media{position:sticky;top:90px;align-self:start;height:calc(100vh - 90px);
    min-height:360px;display:flex;align-items:center;justify-content:center}
  .hero__stick{max-height:calc(100vh - 120px)}
  .hero__stick img{max-height:calc(100vh - 320px);min-height:170px;width:auto;object-fit:contain}
}
@media(max-width:920px){
  .hero__grid{grid-template-columns:1fr;gap:20px;padding-block:40px 50px}
  /* display:contents promotes the copy column's children to grid items so the
     phone order can be set individually. DOM order is untouched: the Quick
     Answer still follows the H1 for parsers and for the speakable selector. */
  .hero__copy{display:contents}
  .hero__copy > .pill{order:1}
  .hero__copy > h1{order:2}
  .hero__copy > .answer{order:4}
  .hero__media{order:3}
  .hero__copy > .hero__cta{order:6}
  /* display:contents promotes the rating line too; with no order it would
     default to 0 and jump above the eyebrow (hero.md). */
  .hero__copy > .hero__rating{order:6}
  .hero__copy > .pay{order:8}
  .hero__copy > .ticks{order:5}
  .hero__card{padding:14px 16px}
  .hero__card img{max-width:216px}
  .floaty{display:none}
}

/* ---- 7. QUICK ANSWER (AEO) ----------------------------------------------- */
.answer{background:#fff;border-left:4px solid var(--aqua);border-radius:0 var(--r) var(--r) 0;
  box-shadow:var(--shadow-sm);padding:21px 25px;margin:22px 0 0}
.answer .qtag{display:block;font-family:var(--display);font-weight:800;font-size:0.8438rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--aqua-dk);margin-bottom:.55em}
.answer p{margin:0;font-size:1.062rem}
.answer p.first{color:var(--navy-dk);font-weight:700;margin-bottom:.7em}

/* In the hero the answer is not a card: the approved layout runs it as two
   flowing paragraphs under the H1. The wrapper stays because it is the
   speakable selector and the AEO block; only the card styling and the label
   come off. Colours are this site's own tokens. */
.hero .answer{background:none;border:0;box-shadow:none;padding:0;margin:18px 0 0}
.hero .answer .qtag{display:none}
.hero .answer p{font-size:1.062rem;color:var(--muted);margin:0 0 .85em;max-width:56ch}
.hero .answer p:last-child{margin-bottom:0}
.hero .answer p b{color:var(--ink-dk)}
.hero__rating{display:flex;align-items:center;gap:9px;margin:16px 0 0;
  font-size:.95rem;color:var(--muted)}
.hero__rating b{color:var(--ink-dk)}


/* ---- hero motif -- ripple-out ---------------------------------------- */
.hero{position:relative;overflow-x:clip;overflow-y:visible}
:where(.hero__media){position:relative}
.hero__card{position:relative;z-index:2}
.hero__card img{position:relative;z-index:3}
.hero{background:radial-gradient(110% 80% at 26% 12%,#d1ebf7,#f3fafd 58%,#f3fafd)}.hero__media::before,.hero__media::after{content:'';position:absolute;left:50%;top:0;width:146%;aspect-ratio:1;translate:-50% -23%;border-radius:50%;border:1.5px solid rgba(53,166,220,0.40);animation:btRipple 7s ease-out infinite;z-index:1}.hero__media::after{animation-delay:3.5s}@keyframes btRipple{0%{scale:.6;opacity:.75}100%{scale:1.7;opacity:0}}
@media(prefers-reduced-motion:reduce){.hero__card,.hero__media::before,.hero__media::after{animation:none!important}}

/* --- hero responsive rules, copied into the critical block
   A phone painted the desktop hero from the inline block and then
   jumped when the async sheet arrived -- 692px on one site, CLS 0.95.
   These are COPIES: the originals stay below, so the cascade is
   unchanged and the first paint is already correct.
   REGENERATED ON EVERY BUILD from the rules below the marker. Edit
   the originals; never this copy, which is overwritten. */
@media (min-width: 981px){
  .hero__media{position: sticky; top: calc(var(--navh, 88px) + 14px); align-self: start; min-height: calc(100vh - var(--navh, 88px) - 28px); min-height: calc(100svh - var(--navh, 88px) - 28px); display: flex; flex-direction: column; align-items: center; justify-content: center;}
}
@media (prefers-reduced-motion: reduce){
  .hero__media{position: relative; top: 0; min-height: 0;}
}
@media (max-width:920px){
  /* Stacked: the copy sits directly above and below the column, so the halo must not grow vertically or it washes over the H1. It grows sideways instead -- the card is ~250px inside a ~346px column, so the ring lands in the free band beside it -- and the outer one comes off entirely. */ body:has(.hero) .hero__media::before{width:120%;height:104%}
  body:has(.hero) .hero__media::after{display:none}
}
/* --- end of the copied hero responsive rules --- */

/*!SITE-HOME-CRIT-START*/
/* --- home hero, DESKTOP reading order -----------------------------------
   Measured at 1440x900 before this block: .hero__cta sat at y=1001, i.e. 101px
   BELOW the fold, because the four-line evidence list sat between the Quick
   Answer and the buttons. On desktop the copy column becomes a flex column so
   the order can be set: eyebrow, headline, Quick Answer, BUTTONS, payment
   line, then the evidence. DOM order is untouched -- the Quick Answer still
   follows the H1 for parsers and for the speakable selector.

   Gated at min-width:921px on purpose: below that the phone order is composed
   separately with display:contents (section 6) and must not be touched.

   Flex does not collapse adjacent margins, so the three gaps that used to
   collapse are restated here rather than left to double. Layout, so it lives
   above the critical marker and the site is rebuilt. */
@media(min-width:921px){
  .hero .hero__copy{display:flex;flex-direction:column}
  /* the eyebrow is an inline-flex pill; as a flex ITEM it would stretch to
     the full column width and read as a bar, so it keeps fit-content */
  .hero .hero__copy>.pill{order:1;align-self:flex-start}
  .hero .hero__copy>h1{order:2;margin-bottom:.3em}
  .hero .hero__copy>.answer{order:3;margin:0}
  .hero .hero__copy>.hero__sub{order:4;margin:14px 0 0}
  .hero .hero__copy>.hero__cta{order:5;margin-top:24px}
  .hero .hero__copy>.pay{order:6;margin-top:16px}
  .hero .hero__copy>.hero__rating{order:7;margin-top:12px}
  .hero .hero__copy>.ticks{order:8;margin:26px 0 0}
}
/*!SITE-HOME-CRIT-END*/

/*!CRITICAL-END*/
/* ---- 7b. QUICK FACTS TABLE ----------------------------------------------- */
.qa{background:#fff;border-radius:var(--r);box-shadow:var(--shadow-sm);overflow:hidden;
  max-width:var(--measure-wide);margin:0 auto}
.qa__h{background:var(--aqua-lt);padding:15px 22px;font-family:var(--display);font-weight:800;
  font-size:1rem;color:var(--navy-dk)}
.qa dl{margin:0;display:grid;grid-template-columns:34% 1fr}
.qa dt,.qa dd{padding:13px 22px;border-bottom:1px solid var(--line-soft);margin:0}
.qa dt{font-weight:700;color:var(--navy-dk)}
.qa dd{color:var(--muted)}
.qa dl>:nth-last-child(-n+2){border-bottom:0}
@media(max-width:620px){
  .qa dl{grid-template-columns:1fr}
  .qa dt{padding-bottom:0;border-bottom:0}
  .qa dd{padding-top:4px}
}

/* ---- 8. CARDS / GRIDS (borderless, soft shadow) -------------------------- */
.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:940px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card{background:var(--card);border-radius:var(--r);padding:27px 26px;box-shadow:var(--shadow-sm)}
.card .ic{width:56px;height:56px;border-radius:var(--r-s);background:var(--aqua-lt);
  display:grid;place-items:center;margin-bottom:15px;overflow:hidden}
.card .ic img{height:38px;width:38px;object-fit:contain}
.card h3{margin-bottom:.4em}
.card p{margin:0;color:var(--muted);font-size:1.062rem}
.card .num{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:var(--r-s);
  background:var(--blue-lt);color:var(--blue-dk);font-family:var(--display);font-weight:800;
  font-size:.92rem;margin-bottom:12px}

/* ---- 9. SPLIT / STEPS / BAND --------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.split--rev .split__media{order:2}
.split__media img{border-radius:var(--r);box-shadow:var(--shadow);margin:0 auto}
@media(max-width:880px){.split{grid-template-columns:1fr;gap:28px}.split--rev .split__media{order:0}}
.chips{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:10px}
.chips li{display:flex;gap:10px}
.chips .ck{color:var(--aqua-dk);font-weight:800;flex:none}

.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;counter-reset:s}
.step{background:#fff;border-radius:var(--r);box-shadow:var(--shadow-sm);padding:27px 25px}
.step__n{counter-increment:s;width:40px;height:40px;border-radius:var(--r-s);background:var(--blue);
  color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:800;
  margin-bottom:14px}
.step__n::before{content:counter(s)}
@media(max-width:880px){.steps{grid-template-columns:1fr}}

.band{max-width:980px;margin:0 auto;border-radius:var(--r-l);overflow:hidden;
  box-shadow:var(--shadow);background:#fff}
.band img{width:100%;display:block}
.band--sm{max-width:var(--measure-wide)}
.band__cap{padding:15px 22px;font-size:.87rem;color:var(--muted);background:var(--tint)}

/* ---- 10. SHOTS (image + heading + copy, never a bare grid) --------------- */
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.shots--wide{grid-template-columns:repeat(3,minmax(0,1fr))}
.shots figure{margin:0;background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm)}
.shots img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--tint)}
.shots figcaption{padding:19px 21px}
.shots figcaption b{display:block;font-family:var(--display);font-size:1.03rem;
  color:var(--navy-dk);margin-bottom:.35em}
.shots figcaption span{font-size:.92rem;color:var(--muted)}
@media(max-width:940px){.shots--wide{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.shots,.shots--wide{grid-template-columns:1fr}}

/* ---- 11. INGREDIENTS ----------------------------------------------------- */
.inglist{display:grid;gap:20px}
.ing{background:#fff;border-radius:var(--r);padding:25px 27px;box-shadow:var(--shadow-sm)}
.ing__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 14px;margin-bottom:.7em}
.ing__top h3{margin:0}
.ing__dose{font-family:var(--display);font-weight:700;font-size:0.8438rem;background:var(--blue-lt);
  color:var(--blue-dk);border-radius:999px;padding:5px 12px}
.ing__lat{font-size:0.9062rem;color:var(--faint);font-style:italic}
.ing p{margin:0 0 .8em}
.ing__cite{font-size:.86rem;color:var(--muted)}
.ingthumbs{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-bottom:26px}
.ingthumbs img{border-radius:var(--r-s);box-shadow:var(--shadow-sm)}

/* ---- 12. PRICING --------------------------------------------------------- */
.prices,.pricing{display:grid;grid-template-columns:1fr 1.12fr 1fr;gap:22px;align-items:center;padding-top:18px}
.price,.tier{background:#fff;border-radius:var(--r-l);padding:28px 22px 24px;text-align:center;
  box-shadow:var(--shadow-sm);position:relative;display:flex;flex-direction:column}
.price--best,.tier--feature{padding:36px 26px 30px;
  background:linear-gradient(180deg,#fff 0%,var(--aqua-lt) 100%);
  box-shadow:0 32px 64px -28px rgba(47,92,207,.62);transform:translateY(-10px);z-index:1}
.price__badge,.tier__flag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--blue);color:#fff;font-family:var(--display);font-weight:800;font-size:0.9062rem;
  letter-spacing:.12em;text-transform:uppercase;padding:7px 15px;border-radius:999px;
  white-space:nowrap;box-shadow:0 8px 18px -8px rgba(33,65,158,.7)}
.price--ordered .price__badge{background:var(--aqua-dk);box-shadow:none;font-size:0.9062rem}
.price img{margin:0 auto 14px;height:auto}
.price h3{margin-bottom:.2em}
.price--best h3{font-size:1.55rem}
.price__supply{font-size:.88rem;color:var(--faint);margin-bottom:.9em}
.price__each,.tier__price{font-family:var(--display);font-weight:800;font-size:1.5rem;
  color:var(--navy);line-height:1.2}
.price--best .price__each{font-size:1.72rem}
.price__each small{font-size:0.9062rem;font-weight:600;color:var(--muted);display:block;margin-top:6px}
.price__tot,.tier__rows{font-weight:700;margin:.5em 0 1em}
.price__save{display:inline-block;background:var(--aqua-lt);color:var(--aqua-dk);
  border-radius:999px;font-family:var(--display);font-weight:800;font-size:0.8438rem;letter-spacing:.06em;
  text-transform:uppercase;padding:4px 10px;margin-left:6px;vertical-align:2px}
.price .btn--block{margin-top:auto}
.price__ship{font-size:0.9062rem;color:var(--aqua-dk);font-weight:700;margin-top:.8em;margin-bottom:0}
.guarantee{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:center;
  background:#fff;border-radius:var(--r-l);padding:34px;box-shadow:var(--shadow-sm)}
@media(max-width:820px){.guarantee{grid-template-columns:minmax(0,1fr);gap:22px;text-align:center}
  .guarantee img{margin-inline:auto}}
@media(max-width:1040px){.prices,.pricing{grid-template-columns:1fr 1.1fr 1fr;gap:14px}
  .price,.tier{padding:24px 16px 20px}
  .price--best,.tier--feature{padding:30px 18px 24px}}
@media(max-width:860px){.prices,.pricing{grid-template-columns:1fr;gap:26px;align-items:stretch;
    max-width:430px;margin-inline:auto}
  .price,.tier{padding:28px 22px 24px}
  .price--best,.tier--feature{transform:none;padding:34px 24px 28px;order:1}
  .price--ordered{order:2}
  .price--basic{order:3}}

/* ---- 13. REVIEWS / STATS ------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.stat{background:#fff;border-radius:var(--r);padding:23px;text-align:center;box-shadow:var(--shadow-sm)}
.stat b{display:block;font-family:var(--display);font-weight:800;font-size:2.1rem;
  color:var(--blue-dk);line-height:1.1}
.stat span{font-size:0.9062rem;color:var(--muted)}
@media(max-width:880px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

.rbars{display:grid;gap:9px;max-width:460px}
.rbar{display:grid;grid-template-columns:44px 1fr 46px;align-items:center;gap:11px;font-size:.9rem}
.rbar .track{height:9px;background:var(--tint2);border-radius:999px;overflow:hidden}
.rbar .fill{height:100%;background:var(--blue);border-radius:999px}

.rev,.tcard{background:#fff;border-radius:var(--r);padding:23px 25px;box-shadow:var(--shadow-sm)}
.rev__top{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:baseline;margin-bottom:.6em}
.rev__who{font-family:var(--display);font-weight:700;color:var(--navy-dk)}
.rev__meta{font-size:0.9062rem;color:var(--faint)}
.rev__stars{color:var(--gold);letter-spacing:.08em}
.rev p{margin:0;color:var(--muted)}
.tgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
@media(max-width:820px){.tgrid{grid-template-columns:1fr}}
.tlife img{border-radius:var(--r);box-shadow:var(--shadow-sm)}
.dist{display:grid;gap:10px}

/* ---- 14. FAQ ------------------------------------------------------------- */
.faq{display:grid;gap:12px;max-width:860px;margin-inline:auto}
.faq details{background:#fff;border-radius:var(--r); padding: 0 23px;box-shadow:var(--shadow-sm)}
.faq summary{font-family:var(--display);font-weight:700;color:var(--navy-dk);cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--blue);font-weight:800;flex:none;font-size:1.2rem;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq .faq__b{padding-top:.9em;color:var(--muted)}
.faq .faq__b p:last-child{margin-bottom:0}

/* ---- 15. CALLOUTS / ALERTS ----------------------------------------------- */
.callout{background:#fff;border-left:4px solid var(--blue);border-radius:0 var(--r) var(--r) 0;
  padding:23px 27px;box-shadow:var(--shadow-sm)}
.callout p:last-child{margin-bottom:0}
.alert{background:var(--gold-lt);border:1px solid var(--gold-line);border-left:4px solid var(--gold);
  border-radius:0 var(--r) var(--r) 0;padding:23px 27px}
.alert p:last-child{margin-bottom:0}
.flag{display:inline-block;font-family:var(--display);font-weight:700;font-size:0.8438rem;
  letter-spacing:.11em;text-transform:uppercase;background:var(--blue-lt);color:var(--blue-dk);
  border-radius:999px;padding:5px 12px;margin-bottom:1rem}

/* ---- 16. TABLES ---------------------------------------------------------- */
.tablewrap{overflow-x:auto;border-radius:var(--r);background:#fff;box-shadow:var(--shadow-sm)}
.dtable{width:100%;font-size:1rem;min-width:520px}
.dtable th,.dtable td{padding:13px 18px;text-align:left;border-bottom:1px solid var(--line-soft);
  vertical-align:top}
.dtable thead th{background:var(--aqua-lt);font-family:var(--display);font-weight:800;
  color:var(--navy-dk);font-size:0.9062rem;letter-spacing:.06em;text-transform:uppercase}
.dtable tbody tr:last-child td{border-bottom:0}
.facttab{width:100%;font-size:.94rem}
.facttab th,.facttab td{padding:12px 0;text-align:left;border-bottom:1px solid var(--line-soft)}
.facttab th{width:38%;font-weight:700;color:var(--navy-dk)}
.facts{background:#fff;border-radius:var(--r);padding:26px 28px;box-shadow:var(--shadow-sm)}

/* ---- 17. FORMS ----------------------------------------------------------- */
.formcard{background:#fff;border-radius:var(--r-l);padding:30px;box-shadow:var(--shadow-sm)}
.form__row{display:grid;gap:16px;margin-bottom:16px}
@media(min-width:660px){.form__row--2{grid-template-columns:1fr 1fr}}
.form label{display:block;font-weight:700;font-size:0.9062rem;margin-bottom:6px;color:var(--navy-dk)}
.form input,.form select,.form textarea{width:100%;font-family:inherit;font-size:1rem;
  padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--paper);
  color:var(--ink)}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--blue);
  outline-offset:1px;background:#fff}
.form textarea{min-height:130px;resize:vertical}
.form__hint{font-size:0.9062rem;color:var(--faint);margin-top:6px}
.form__msg{margin-top:14px;padding:12px 16px;border-radius:var(--r-s);background:var(--blue-lt);
  font-size:.92rem;display:none}
.form__msg.show{display:block}

/* ---- 18. TRUST STRIP ----------------------------------------------------- */
.trust{background:#fff}
.trust__row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:24px 40px;
  padding-block:24px}
.trust__item{display:flex;align-items:center;gap:10px;font-size:0.9062rem;font-weight:700;color:var(--muted)}
.trust__item img{height:42px;width:auto}
.badgewall{display:flex;flex-wrap:wrap;gap:20px;justify-content:center}
.badgewall img{height:64px;width:auto}
.promo{background:var(--navy-dk);color:#c9d6f3}
.promo h2,.promo h3{color:#fff}
.promo .eyebrow{color:#8fd4f2}

/* ---- 19. FINAL CTA ------------------------------------------------------- */
.final{background:linear-gradient(152deg,var(--navy) 0%,var(--navy-dp) 100%);color:#cfdcfb;
  border-radius:var(--r-l);padding:48px 44px;position:relative;overflow:hidden}
.final h2{color:#fff}
.final p{color:#c2d1f2;max-width:56ch;margin:0 auto 1.5em}
.final b,.final strong{color:#fff}
.final--media{display:grid;grid-template-columns:.8fr 1.2fr;gap:40px;align-items:center;text-align:left}
.final--media h2{text-align:left}
.final--media p{margin:0 0 1.4em;max-width:54ch}
.final--media .final__img img{width:100%;max-width:320px;height:auto;margin-inline:auto;
  filter:drop-shadow(0 20px 34px rgba(0,0,0,.44))}
.final__price{font-family:var(--display);font-weight:800;font-size:1.28rem;color:#8fd4f2;margin:.2em 0 .8em}
@media(max-width:880px){
  .final--media{grid-template-columns:1fr;gap:26px;text-align:center;padding:0}
  .final--media h2{text-align:center}
  .final--media p{margin-inline:auto}
  .final{padding:38px 24px}
}

/* ---- 20. RELATED / BYLINE / REFS ----------------------------------------- */
.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.rel a{background:#fff;border-radius:var(--r);padding:22px 24px;box-shadow:var(--shadow-sm);
  text-align:left;display:block;color:var(--ink);transition:transform .18s var(--ease),box-shadow .18s ease}
.rel a:hover{text-decoration:none;transform:translateY(-3px);box-shadow:var(--shadow)}
.rel b{display:block;font-family:var(--display);color:var(--navy-dk);margin-bottom:.35em}
.rel span{font-size:.92rem;color:var(--muted)}
@media(max-width:880px){.rel{grid-template-columns:1fr}}

.byline{display:flex;gap:16px;align-items:flex-start;background:#fff;border-radius:var(--r);
  padding:21px 25px;margin-top:2.4em;box-shadow:var(--shadow-sm)}
.byline img{flex:0 0 68px;border-radius:50%}
.byline b{display:block;font-family:var(--display);color:var(--navy-dk);margin-bottom:.4em}
.byline p{margin:0;font-size:0.9062rem;color:var(--muted)}

.refs{font-size:.88rem;color:var(--muted)}
.refs ol{padding-left:1.3em;display:grid;gap:.6em}
.refs a{word-break:break-word}

.crumbs{font-size:0.9062rem;color:var(--faint);padding:14px 0 0;margin:0}
.crumbs a{color:var(--muted)}

.article{max-width:var(--prose);margin-inline:auto}
.article h2{margin-top:1.65em}
.article h3{margin-top:1.3em}
.dropcap::first-letter{float:left;font-family:var(--display);font-weight:800;font-size:3.1rem;
  line-height:.86;padding:.06em .1em 0 0;color:var(--blue-dk)}
.pullquote{border-left:4px solid var(--aqua);padding-left:20px;margin:1.6em 0;
  font-family:var(--display);font-size:1.14rem;color:var(--navy-dk)}
.pullquote p{margin:0 0 .4em}
.pullquote cite{display:block;font-family:var(--sans);font-style:normal;font-weight:700;
  font-size:.86rem;color:var(--muted);letter-spacing:.02em}

/* ---- 21. FOOTER (single centred column, seals row beneath) --------------- */
footer{background:var(--navy-dp);color:#b9c6e6;padding:56px 0 30px;font-size:.92rem;text-align:center}
footer h4{color:#fff;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.9em}
footer a{color:#dbe6ff}
footer a:hover{color:#fff}
.fbrand{font-family:var(--display);font-weight:800;font-size:1.6rem;color:#fff;margin-bottom:.35em}
.fbrand span{color:#8fd4f2;font-weight:600}
.fcol{max-width:760px;margin-inline:auto}
.fcol p{margin:0 0 1.1em}
.flinks{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-wrap:wrap;
  justify-content:center;gap:10px 22px;font-weight:700;font-size:.9rem}
.flinks--sub{font-weight:400;font-size:.85rem;gap:8px 18px}
.fsection{border-top:1px solid rgba(255,255,255,.13);padding-top:26px;margin-top:26px}
.fseals{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:4px 0 0}
.fseals img{height:44px;width:auto;background:#fff;border-radius:var(--r-s);padding:4px}
.fnap{font-size:0.9062rem;line-height:1.78}
.fpay{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  padding:20px 0;border-top:1px solid rgba(255,255,255,.13);margin-top:24px;font-size:0.9062rem}
.fpay img{height:23px;width:auto}
.disc{border-top:1px solid rgba(255,255,255,.13);margin-top:22px;padding-top:22px;
  font-size:0.9062rem;line-height:1.72;color:#9fabcc;text-align:left;max-width:940px;
  margin-inline:auto}
.disc p{margin-bottom:.9em}
.copy{color:#8492b8;text-align:center}

/* ---- 22. BLOG ------------------------------------------------------------ */
.postmeta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0 0 1.8em;
  padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-size:0.9062rem;color:var(--muted)}
.postmeta b{color:var(--navy-dk)}
.postmeta .sep{color:var(--line)}
.postmeta time{white-space:nowrap}

.toc{background:var(--tint);border-radius:var(--r);padding:23px 27px;margin:0 0 2.2em}
.toc h2{font-family:var(--display);font-size:.75rem!important;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:var(--aqua-dk);margin:0 0 1em}
.toc ol{margin:0;padding-left:1.25em;display:grid;gap:.45em;font-size:.95rem}
.toc a{color:var(--ink)}
.toc a:hover{color:var(--blue-dk)}

.article figure{margin:2em 0}
.article figure img{width:100%;border-radius:var(--r)}
.article figcaption{margin-top:.7em;font-size:0.9062rem;color:var(--faint);text-align:center}
.article figure.portrait img{width:100%;max-width:var(--figw,440px);margin-inline:auto}

.keypoints{background:var(--aqua-lt);border-left:4px solid var(--aqua);
  border-radius:0 var(--r) var(--r) 0;padding:23px 27px;margin:0 0 2em}
.keypoints>b{display:block;font-family:var(--display);font-size:0.8438rem;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;color:var(--aqua-dk);margin-bottom:1em}
.keypoints ul{margin:0;padding-left:1.2em;display:grid;gap:.5em}
.keypoints li b{color:var(--blue-dk)}

.article .final--media{grid-template-columns:168px minmax(0,1fr);gap:24px;padding:30px 28px}
.article .final--media .final__img img{max-width:168px}
.article .final--media h2{font-size:1.55rem;line-height:1.22;margin:0 0 .5em}
.article .final--media .final__price{font-size:1.16rem;margin:.3em 0 .7em}
@media(max-width:620px){
  .article .final--media{grid-template-columns:1fr;text-align:center;padding:30px 22px}
  .article .final--media h2{text-align:center;font-size:1.4rem}
}

.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.posts article{background:var(--card);border-radius:var(--r-l);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--shadow-sm)}
.posts img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:center 38%;background:var(--tint)}
.posts .pbody{padding:24px 26px;display:flex;flex-direction:column;flex:1}
.posts h3{margin:0 0 .45em;font-size:1.1rem}
.posts h3 a{color:var(--navy-dk)}
.posts h3 a:hover{color:var(--blue-dk)}
.posts p{margin:0 0 1em;color:var(--muted);font-size:1.062rem}
.posts .pmeta{margin-top:auto;font-size:0.9062rem;color:var(--faint)}
@media(max-width:900px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.posts{grid-template-columns:1fr}}

/* ---- 23. MOTION: gentle scale-in on cards, nothing in the hero ----------- */
.reveal{opacity:0;transform:scale(.972);transition:opacity .58s var(--ease),transform .58s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---- 24. SINGLE-COLUMN MEASURE ------------------------------------------
   --measure is px, not ch: `ch` resolves against each element's own font-size,
   so one token produced a different pixel edge on .note, .lead and .pullquote.
   Single-column content gets the measure and is centred; multi-column
   components are excluded by not being listed and keep the full wrap. */
.sec > .wrap > h2,
.sec > .wrap > h3,
.sec > .wrap > h4,
.sec > .wrap > p,
.sec > .wrap > ul,
.sec > .wrap > ol,
.sec > .wrap > .sec__head,
.sec > .wrap > .callout,
.sec > .wrap > .alert,
.sec > .wrap > .byline,
.sec > .wrap > .refs,
.sec > .wrap > .pullquote,
.sec > .wrap > blockquote{max-width:var(--measure);margin-inline:auto}

.sec > .wrap > .tablewrap,
.sec > .wrap > .faq,
.sec > .wrap > .steps{max-width:var(--measure-wide);margin-inline:auto}

.sec > .wrap > [style*="max-width"]{margin-inline:auto}
.sec--center > .wrap > .sec__head{margin-inline:auto}

@media(max-width:1060px){
  .sec > .wrap > h2,.sec > .wrap > h3,.sec > .wrap > h4,.sec > .wrap > p,
  .sec > .wrap > ul,.sec > .wrap > ol,.sec > .wrap > .sec__head,
  .sec > .wrap > .callout,.sec > .wrap > .alert,.sec > .wrap > .byline,
  .sec > .wrap > .refs,.sec > .wrap > .pullquote,.sec > .wrap > blockquote,
  .sec > .wrap > .tablewrap,.sec > .wrap > .faq,.sec > .wrap > .steps{
    max-width:100%}
}
/* brand mark: underline construction */
.brand{position:relative}.brand::after{content:'';position:absolute;left:0;right:0;bottom:-5px;height:3px;border-radius:2px;background:#35a6dc}


/* ---- hero: sticky, centred product column ------------------------------
   The product column holds its place, vertically centred, until the hero has
   fully scrolled past.

   --navh is measured and published by site.js: nav heights run 66-99px across
   the estate and change when a bar compacts, and a hardcoded offset tucks the
   product under the bar on the taller ones.

   min-height makes the sticky box a full screen tall so the shot can be
   CENTRED inside it. Without it the box is only as tall as the image and
   `top` merely pins it under the header, which is what the old house rule did.

   Requires .hero NOT to clip on the block axis -- any non-visible overflow on
   an ancestor becomes the scrollport sticky resolves against. See pitfall 65,
   whose first fix got this wrong. */
@media (min-width: 981px) {
  .hero__grid { align-items: start; }
  .hero__media {
    position: sticky;
    top: calc(var(--navh, 88px) + 14px);
    align-self: start;
    min-height: calc(100vh - var(--navh, 88px) - 28px);
    min-height: calc(100svh - var(--navh, 88px) - 28px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
/* Cancelling the sticky column must NOT cancel the containing block. Every
   hero motif sizes its .hero__media pseudo-elements in PERCENT, so they
   resolve against the nearest positioned ancestor; `static` re-parents them to
   a box several times wider -- measured at 1800px against a 523px column --
   and the ring lands across the headline. Worse, the same query stops it
   animating, so it SITS there: ask for less motion, get the one broken hero.

   `relative` lays out identically to `static` and keeps the containing block.
   `top:0` is not decoration: the rule above sets a top offset of one nav height
   plus 14px, which a relative box would apply for real and push the plate
   ~110px down the page (pitfall 65). Written WITHOUT naming that custom
   property in the usual var() form on purpose -- preflight's undefined-variable
   check reads comments too, so a property named here is a property it believes
   the sheet uses. Measured on 7 sites before and after (pitfall 107). */
@media (prefers-reduced-motion: reduce) {
  .hero__media { position: relative; top: 0; min-height: 0; }
}

/* The FAQ click target is <summary>, not <details>. Keeping the
   vertical padding on details made the row LOOK ~56px and respond
   as ~30px, under the 44px minimum. Moving it here changes nothing
   visually and makes the whole row tappable. */
.faq summary{padding:19px 0}

/* --- pack cards read as one repeated object ----------------------------
   A pricing row is three cards that have to share their edges, their image
   slot and their button baseline. The vendor product shots are different
   shapes (one site shipped 200x243, 200x105 and 200x65 side by side) and the
   blurbs are different lengths, so without these three rules the images
   render at three sizes and the three CTAs sit at three heights.

   The height lives here and not on the <img> attributes on purpose: those
   must keep stating each file's true ratio, or fix_img_dims.py rewrites them
   and CLS gets worse. Override per site with --pack-img. */
.card--pack{display:flex;flex-direction:column}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,168px);
  object-fit:contain;margin-inline:auto;margin-bottom:14px}
.card--pack>.btn{margin-top:auto}

/* --- the recommended pack is visibly the recommended pack ---------------
   A pricing row needs a focal point and each button needs to say what it
   buys. Three identical "Select this pack" buttons did neither. The accent
   falls back through the per-site token names because the palettes do not
   agree on one (--blue here, --accent there). */
.card--pack{position:relative;border:2px solid transparent}
.card--pack.card--best{border-color:var(--blue,var(--accent,var(--gold,#333)))}
.card--pack .tier__flag{display:block;width:fit-content;margin:0 auto 12px;
  background:var(--blue,var(--accent,var(--gold,#333)));color:#fff;
  font-size:0.8438rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  padding:5px 13px;border-radius:999px}
.card--pack .tier__supply{margin:0 0 .55em;font-weight:700;
  color:var(--ink,#222);font-size:1.02rem}

/* The footer column link is the thing you tap, and it was 17px tall in
   35px of row pitch -- under the 24px WCAG AA floor. The padding grows the
   hit area to ~33px and the negative margin gives the space straight back,
   so the footer renders identically. inline-block (not block) keeps the
   hover underline the width of the words. See fix_footer_tap.py. */
footer li a{display:inline-block;padding-block:4px;margin-block:-4px}

/* ==== directional chrome (fix_chrome_scroll.py) ==== */
.nav--away{transform:translateY(-100%)}
html.chrome-up .buybar{transform:translateY(105%)}
/* ==== end directional chrome ==== */

/* ==== tables never fade (reveal_skip_tables.py) ==== */
/* A comparison table is reference content the reader scrolled to on
   purpose. Fading it in leaves it illegible for half a second at exactly
   that moment, which reads as broken text rather than as motion. The
   reveal stays on cards and callouts, which are decorative arrivals. */
.tablewrap[data-reveal],.tablewrap.reveal{opacity:1;transform:none;transition:none}
/* ==== end tables never fade ==== */

/*!SITE-HOME-PAINT-START*/
/* ======================================================================
   HOME PAGE SURFACE + HERO MOTIF -- aquafitdaily.com
   Paint only below this point: radius, shadow, gradient, transform,
   transition. Nothing here moves a box on a page other than the home page,
   and every selector is scoped to body:has(.hero) -- class="hero" is on
   index.html and nowhere else on this site, so the header, the buy bar, the
   footer and the pack cards (which also appear on pricing.html) keep their
   current treatment everywhere else.

   body:has(.hero) is also what beats modern_surface.py and footer_type.py:
   both re-append their blocks AFTER this one on every build, so this block
   wins on specificity (0,2,1+ against their 0,1,0) and never on source order.

   Slot for this site: radius_card 18 / radius_control 12, a SINGLE soft lift
   (0 12px 30px) with no contact stop, tinted with this site's own ink
   (23,34,63) and never neutral black, a corner-flag ribbon, and a "settle"
   hero motif.
   ====================================================================== */
body:has(.hero){
  --aq-rc:18px;                                   /* cards and panels */
  --aq-rk:12px;                                   /* buttons and controls */
  --aq-lift:0 12px 30px rgba(23,34,63,.10);       /* one stop, no contact shadow */
  --aq-lift-hi:0 18px 40px rgba(23,34,63,.16);
  --aq-lift-hero:0 22px 56px rgba(23,34,63,.15);
}

/* --- panels ------------------------------------------------------------ */
body:has(.hero) .card,
body:has(.hero) .qa,
body:has(.hero) .faq,
body:has(.hero) .callout,
body:has(.hero) .alert,
body:has(.hero) .keypoints,
body:has(.hero) .tablewrap,
body:has(.hero) .byline,
body:has(.hero) .step,
body:has(.hero) .final,
body:has(.hero) .split__media img{border-radius:var(--aq-rc);box-shadow:var(--aq-lift)}
body:has(.hero) .hero__card{border-radius:var(--aq-rc);box-shadow:var(--aq-lift-hero)}
body:has(.hero) .floaty{border-radius:var(--aq-rk);box-shadow:var(--aq-lift)}
body:has(.hero) .qa{overflow:hidden}

/* --- controls ----------------------------------------------------------
   12px on every control, a gradient on the BUYING call to action only, and
   the secondary button left solid so the pair reads as two weights. */
body:has(.hero) .btn{border-radius:var(--aq-rk);
  transition:transform .18s var(--ease),box-shadow .22s ease,background-color .22s ease,
             color .22s ease,border-color .22s ease}
body:has(.hero) .btn--cta{
  background:linear-gradient(135deg,var(--aqua-dk) 0%,var(--blue) 44%,var(--navy) 100%);
  box-shadow:var(--aq-lift)}
body:has(.hero) .btn--cta:hover{
  background:linear-gradient(135deg,var(--aqua-dk) 0%,var(--blue-dk) 44%,var(--navy-dk) 100%);
  box-shadow:var(--aq-lift-hi);transform:translateY(-2px)}
body:has(.hero) .btn--ghost:hover,
body:has(.hero) .btn--dark:hover{transform:translateY(-2px);box-shadow:var(--aq-lift)}
body:has(.hero) a:focus-visible,
body:has(.hero) button:focus-visible,
body:has(.hero) summary:focus-visible{outline:3px solid var(--aqua);outline-offset:3px}
@media(prefers-reduced-motion:reduce){
  body:has(.hero) .btn--cta:hover,
  body:has(.hero) .btn--ghost:hover,
  body:has(.hero) .btn--dark:hover{transform:none}
}

/* --- hero motif: SETTLE ------------------------------------------------
   A soft halo that breathes once, very slowly, and settles -- this is a
   supplement taken daily for weeks, not an energy drink. It lives on the
   media column's pseudo-elements, never on the <img> (that is the LCP
   element and it is preloaded), and only transform and opacity move.

   It is deliberately TALLER than the product card, AND its bright band is a
   RING rather than a filled centre. Measured at 1440x900: the card is 598px
   tall inside an 810px column, so its edges sit at 66% of the halo's vertical
   radius -- a filled radial gradient puts everything from 0-66% behind an
   opaque white card and leaves only its faintest 5%-alpha tail on show, which
   is the "renders nothing" failure. The colour stop therefore peaks at 78%,
   which lands 50px above the card's top edge and 60px below its bottom, and
   the halo stays narrow enough (104% of the column) to keep clear of the copy
   column to its left.

   The base state IS the settled state, so the reduced-motion rule below
   (and the site's existing *{animation:none} one) shows the finished halo
   rather than an invisible one. */
body:has(.hero) .hero__media::before,
body:has(.hero) .hero__media::after{
  content:'';position:absolute;left:50%;top:50%;translate:-50% -50%;
  aspect-ratio:auto;border:0;border-radius:50%;pointer-events:none;z-index:0}
body:has(.hero) .hero__media::before{
  width:104%;height:112%;opacity:.94;
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(53,166,220,0) 0%,rgba(53,166,220,0) 56%,rgba(53,166,220,.16) 68%,
    rgba(53,166,220,.32) 78%,rgba(53,166,220,.10) 92%,rgba(53,166,220,0) 100%);
  animation:aqHaloSettle 13s cubic-bezier(.22,1,.36,1) both}
body:has(.hero) .hero__media::after{
  width:112%;height:122%;opacity:.82;
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(29,43,110,0) 0%,rgba(29,43,110,0) 72%,rgba(29,43,110,.09) 87%,
    rgba(29,43,110,0) 100%);
  animation:aqRingSettle 17s cubic-bezier(.22,1,.36,1) both}
@keyframes aqHaloSettle{0%{opacity:0;scale:.88}58%{opacity:1;scale:1.045}100%{opacity:.94;scale:1}}
@keyframes aqRingSettle{0%{opacity:0;scale:.92}62%{opacity:1;scale:1.03}100%{opacity:.82;scale:1}}
@media(max-width:920px){
  /* Stacked: the copy sits directly above and below the column, so the halo
     must not grow vertically or it washes over the H1. It grows sideways
     instead -- the card is ~250px inside a ~346px column, so the ring lands
     in the free band beside it -- and the outer one comes off entirely. */
  body:has(.hero) .hero__media::before{width:120%;height:104%}
  body:has(.hero) .hero__media::after{display:none}
}
@media(prefers-reduced-motion:reduce){
  body:has(.hero) .hero__media::before,
  body:has(.hero) .hero__media::after{animation:none}
}

/* --- pack cards --------------------------------------------------------
   The row is engineered so the three Add To Cart buttons share ONE baseline:
   fixed image box, .btn{margin-top:auto}, and the cards stretched to equal
   height by the grid. That is left alone. The recommended card is raised with
   a NEGATIVE margin-top, never a transform (the reveal pass sets
   transform:none): in a stretched grid row a -14px top margin grows the card
   by 14px, so the top edge rises and the BOTTOM edge -- and with it the
   button -- does not move. Measured after applying: all three still match. */
body:has(.hero) .card--pack{border-radius:var(--aq-rc);
  border:2px solid rgba(29,43,110,.09);box-shadow:var(--aq-lift);
  transition:box-shadow .22s ease,transform .22s ease}
body:has(.hero) .card--pack:hover{box-shadow:var(--aq-lift-hi);transform:translateY(-2px)}
body:has(.hero) .card--pack.card--best{margin-top:-14px;border-color:var(--aqua);
  background:linear-gradient(180deg,#fff 0%,var(--aqua-lt) 100%);
  box-shadow:var(--aq-lift-hi)}
body:has(.hero) .card--pack.card--best:hover{transform:translateY(-2px);
  box-shadow:0 24px 54px rgba(23,34,63,.20)}
@media(prefers-reduced-motion:reduce){
  body:has(.hero) .card--pack:hover,
  body:has(.hero) .card--pack.card--best:hover{transform:none}
}

/* the ribbon for this slot is a CORNER FLAG, not the centred pill the
   stylesheet gives .tier__flag. It is absolutely positioned, so moving it
   moves no other box. */
body:has(.hero) .card--pack .tier__flag{
  position:absolute;top:16px;right:-7px;left:auto;transform:none;margin:0;
  width:auto;max-width:74%;text-align:center;
  border-radius:var(--aq-rk) 0 0 var(--aq-rk);
  background:linear-gradient(135deg,var(--aqua-dk) 0%,var(--navy) 100%);
  box-shadow:0 8px 18px rgba(23,34,63,.22)}
body:has(.hero) .card--pack .tier__flag::after{
  content:'';position:absolute;right:0;bottom:-7px;width:0;height:0;
  border:7px solid transparent;border-right-width:0;border-top-color:var(--navy-dp)}

/* dashed separators between the rows of a pack card. All three cards carry
   both rules, so the added height is identical across the row and the shared
   button baseline survives. */
body:has(.hero) .card--pack .tier__supply{
  border-bottom:1px dashed var(--line);padding-bottom:.62em;margin-bottom:.9em}
body:has(.hero) .card--pack>p:not(.tier__supply){
  border-bottom:1px dashed var(--line-soft);padding-bottom:1.05em;margin-bottom:1.05em}
/*!SITE-HOME-PAINT-END*/
/* ==== modern surface (modern_surface.py) ==== */
/* House rule 11. This stylesheet had 45 box-shadow declaration(s)
   and 0 of them layered, so every panel read flat however generous
   the radius was. Two stops -- a tight contact shadow and a wide
   ambient one -- is what makes a surface look raised. The tint is
   this site's own ink (23,34,63), not neutral black.

   Paint only: border-radius, box-shadow and transform change no
   geometry, so this is safe below the critical marker and needs a
   restamp rather than a rebuild. */
:root{
  --r:16px;
  --shadow:0 1px 2px rgba(23,34,63,.06), 0 6px 18px rgba(23,34,63,.07);
  --lift:0 2px 6px rgba(23,34,63,.09), 0 16px 34px rgba(23,34,63,.14);
}

.card,
.step,
.keypoints,
.callout,
.alert,
.toc,
.byline,
.posts article,
.shots figure,
.tablewrap,
.faq,
.final,
.answer,
.tier,
.article figure{box-shadow:var(--shadow)}

/* These panels declared no radius of their own, so raising
   the token alone left them square. House rule 11 is a
   floor: it outranks a slot that chose square corners. */
.keypoints,
.callout,
.alert,
.faq,
.answer,
.article figure{border-radius:var(--r)}

/* A surface a reader can click answers the pointer. 2px
   registers without reflowing the row beside it. */
.rel a,
.posts article,
.shots figure,
.card--pack,
.tier,
.posts h3 a{transition:box-shadow .2s ease, transform .2s ease}
.rel a:hover,
.posts article:hover,
.shots figure:hover,
.card--pack:hover,
.tier:hover,
.posts h3 a:hover{box-shadow:var(--lift);transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){
.rel a:hover,
.posts article:hover,
.shots figure:hover,
.card--pack:hover,
.tier:hover,
.posts h3 a:hover{transform:none}
}
/* ==== end modern surface ==== */

/* ==== footer type floor (footer_type.py) ==== */
/* The footer carried the smallest text on the page -- the legal pages,
   the guarantee and the contact routes, set as fine print. Running text
   and links sit at 16px, column headings at 15px (uppercase and
   letter-spaced, so they read larger than the number). Last in the file
   on purpose: it outranks the phone breakpoints that shrank them. */
footer{font-size:16px}
footer h4{font-size:15px}
footer .disc{font-size:16px}
footer .flinks{font-size:16px}
footer .flinks--sub{font-size:16px}
footer .fnap{font-size:16px}
footer .fpay{font-size:16px}
footer .note{font-size:16px}
/* ==== end footer type floor ==== */
.review-label{margin:12px 0 0;padding:10px 12px;border:2px solid currentColor;font-size:.92rem;line-height:1.45;max-width:22rem}.review-label a{font-weight:600}body.home .hero__tile--c{display:none}
.review-foot{margin:0;padding:.6rem 0;font-size:.92rem}.review-foot a{font-weight:600}