/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Instrument Serif Fallback";src:local("Georgia");font-weight:400;size-adjust:76.91%;ascent-override:128.71%;descent-override:40.30%;line-gap-override:0.00%}
@font-face{font-family:"Jost Fallback";src:local("Arial");font-weight:400;size-adjust:95.70%;ascent-override:111.81%;descent-override:39.19%;line-gap-override:0.00%}
@font-face{font-family:"Jost Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:97.63%;ascent-override:109.60%;descent-override:38.41%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
:root{
  /* ---- ground: ivory stone, from the bottle's white body warmed to stone ---- */
  --paper:#f4f1ea;
  --paper-tint:#eae4d8;
  --paper-card:#ffffff;
  --paper-deep:#ddd5c4;

  /* ---- ink ---- */
  --ink:#16252e;
  --ink-dk:#0e1a21;
  --ink-soft:#263b47;
  --muted:#465966;
  --faint:#64757f;
  --line:#ddd6c6;
  --line-soft:#ebe5d9;

  /* ---- accent: the cyan band on the Liv Pure label ---- */
  --accent:#0b8dae;
  --accent-deep:#075a73;
  --accent-tint:#e2f1f6;
  --accent-line:#a6d6e3;
  --accent-glow:rgba(11,141,174,.22);

  /* ---- the slate-blue glass panel the bottle stands on ---- */
  --slate:#3b5468;
  --slate-2:#294053;
  --slate-3:#1d3142;
  --slate-ink:#dbe6ee;
  --glass:rgba(59,84,104,.92);

  /* ---- secondary: the copper-gold swash and the tree roundel ---- */
  --gold:#b8863f;
  --gold-deep:#7a5722;
  --gold-soft:#f6eede;
  --gold-line:#e0c79a;

  /* ---- type ---- */
  --display:'Instrument Serif','Instrument Serif Fallback',Georgia,'Times New Roman',serif;
  --serif:'Instrument Serif','Instrument Serif Fallback',Georgia,'Times New Roman',serif;
  --sans:'Jost','Jost Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* ---- metrics ---- */
  --wrap:1180px;
  --measure:760px;
  --measure-wide:980px;
  --r:3px;
  --r-s:2px;
  --r-l:6px;
  --radius:3px;
  --figw:440px;
  --navh:112px;
  --shadow:0 14px 34px rgba(29,49,66,.10);
  --shadow-sm:0 2px 10px rgba(29,49,66,.06);
  --shadow-lg:0 26px 62px rgba(29,49,66,.20);
}

/* ==========================================================================
   Getlivpure - getlivpure.com          design slot: batch5_assignments row 30
   --------------------------------------------------------------------------
   COMPONENT SYSTEM from the UI reference at alkatidde.com: a sticky blurred
   masthead, pill eyebrows, a Quick Answer card with an accent edge, tinted
   section bands, a card-per-pack price row, a closing dark band.

   THE ARRANGEMENT IS NOT THE REFERENCE'S. The reference puts its product on
   the right over a diagonal two-tone split. This site splits the hero ground
   down the MIDDLE: a slate-blue glass panel fills the left half, the bottle
   stands free on a stone plinth on it with a gold hairline arc behind, and
   the copy sits on the ivory half to its right.

   COLOUR IS NOT THE REFERENCE'S either. It is read off the bottle art in
   assets/: the cyan label band (#0b8dae), the copper-gold swash and tree
   roundel (#b8863f), on an ivory stone ground.

   SEPARATION FROM glprodaily.com, which is the other teal-and-gold site on
   the estate: that one is mint-white with an olive gold and a dark TEAL hero
   panel, a floating capsule nav and a two-band footer. This one is ivory
   stone with a copper gold and a SLATE-BLUE panel, a tall split masthead and
   a centred seal over a two-column footer with a legal rail. Different type
   (editorial serif + geometric sans, against one sans superfamily) and square
   2-3px edges against 12-14px rounded ones.
   ========================================================================== */

/* ---- RESET AND BASE ------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box;min-width:0}
html{scroll-behavior:smooth;font-size:16px;scroll-padding-top:128px}
html,body{overflow-x:clip}
body{font-family:var(--sans);background:var(--paper);color:var(--muted);
  line-height:1.72;-webkit-font-smoothing:antialiased;font-size:1.0625rem}
img,svg,table,video{max-width:100%}
img{height:auto;display:block}
a{color:var(--accent-deep);text-decoration:none}
a:hover{text-decoration:underline}
ul,ol{list-style:none}
h1,h2,h3,h4,h5{font-family:var(--display);color:var(--ink);line-height:1.1;
  font-weight:400;letter-spacing:.002em}
b,strong{color:var(--ink-soft);font-weight:600}

.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;
  padding:10px 16px;z-index:9999}
.skip:focus{left:0}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:24px}

/* ---- 0. THE TOPLINE TRUST STRIP (house .util component) ------------------
   Role, lot, count and supply, guarantee, order phone, above the masthead so
   the masthead does not have to carry them (hero.md). It stays ABOVE the
   CRITICAL-END marker: it is the first thing painted, and from the async half
   of the sheet it would flash unstyled at the very top of the page.

   Set as a dateline, because that is this site's register: an editorial serif
   masthead, 2-3px corners, hairline rules. The strip is the only WHITE band
   on an ivory-stone page, opened by a 3px copper rule at the very top edge --
   the swash colour off the bottle art -- and closed by the same hairline the
   masthead sits on. There are no dividers between the facts: they are spaced
   apart and told apart by weight, the numbers in --ink against --muted prose,
   which is how the rest of this site sets a run of figures. ONE rule in the
   row, a copper hairline, and it stands the order line off from the facts.

   Nothing here is getexitide's strip recoloured: that one is a dark bar of
   equal cells divided by borders on a graphite page. */
.util{background:var(--paper-card);color:var(--muted);font-size:.9063rem;
  border-top:3px solid var(--gold);border-bottom:1px solid var(--line)}
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:0;
  padding-block:8px}
.util__item{white-space:nowrap;padding-right:26px}
.util__item b{color:var(--ink);font-weight:600}
.util__tel{margin-left:auto;color:var(--accent-deep);font-weight:600;
  white-space:nowrap;padding-left:26px;border-left:1px solid var(--gold-line)}
.util__tel:hover{color:var(--accent)}
/* The facts measure about 1,040px in a 1,132px row, so they hold one line to
   1180 and shed below it: the lot at 1120 (batch-verify.html prints it again
   and the hero tag carries it under the bottle), the count at 940 (the Quick
   Answer opens with it). At 700 -- the measured width where the role, the
   guarantee and the order line stop sharing a row, not a round number -- the
   strip splits the way the masthead does: the role on its own line, then the
   guarantee at the left margin and the order line pushed to the right, with
   its copper rule dropped so a hairline is never the last thing on a row. */
@media(max-width:1120px){.util__item:nth-child(2){display:none}}
@media(max-width:940px){.util__item:nth-child(3){display:none}}
@media(max-width:700px){
  .util__row{padding-block:7px}
  .util__item:first-child{flex:0 0 100%;padding-right:0}
  .util__item:nth-child(4){padding-right:0}
  .util__tel{padding-left:0;border-left:0}
}
/* Below 420 the second row runs 316px of text into a 312px gutter-to-gutter
   row, and "money-back" is the one phrase in the strip that states nothing
   the rest of the line does not. */
@media(max-width:420px){.util__long{display:none}}

/* ---- 1. MASTHEAD: a tall wordmark block with the menu stacked beside it ----
   Not a single row of links. The brand is a block the full height of the bar,
   ruled off on its right edge; the seven menu items sit beside it as TWO short
   stacked columns, with the CTA at the far right. Nothing in the row wraps --
   the columns shed to a dropdown at 1100px (pitfall 16). */
.nav{position:sticky;top:0;z-index:900;background:rgba(244,241,234,.97);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
/* Sized so the whole bar lands at ~112px: the two menu columns are four rows
   of ~23px, and the wordmark block is built to match rather than to exceed
   them. site.js publishes the MEASURED height as --navh, so the sticky hero
   rail and every anchor offset follow the real number, not this comment. */
.nav__row{display:flex;align-items:stretch;justify-content:space-between;gap:30px;
  padding-block:0;flex-wrap:nowrap;position:relative;min-height:104px}
.brand{display:flex;flex-direction:column;justify-content:center;gap:0;flex:none;
  color:var(--ink);padding-right:30px;border-right:1px solid var(--line);
  padding-block:14px}
.brand:hover{text-decoration:none}
.brand svg{width:30px;height:30px;flex:none;margin-bottom:6px}
.brand__t{display:flex;flex-direction:column;line-height:1}
.brand__prod{font-family:var(--display);font-size:1.95rem;font-weight:400;
  color:var(--ink);letter-spacing:.005em;white-space:nowrap}
.brand__prod span{color:var(--accent)}
.brand__firm{font-family:var(--sans);font-size:.7rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--faint);margin-top:7px;
  white-space:nowrap}
/* The two menu columns hold 4 links and 3. With `align-content:center` on each
   column, the shorter one was centred against the taller one, so its rows sat
   exactly half a row (17px) below the other column's -- a staircase that reads
   as a mistake rather than as a two-column masthead. Both columns now start at
   the same y. Measured at 1180/1260/1360/1440/1500/1920 after the change:
   column tops equal at every width. */
.navmenus{display:flex;align-items:center;gap:34px;flex-wrap:nowrap;flex:1}
.menu{display:grid;gap:2px 0;align-content:start;align-self:start;flex:none}
.menu li{flex:none}
.menu a{display:block;font-family:var(--sans);font-size:.9063rem;font-weight:500;
  color:var(--ink-soft);white-space:nowrap;padding-block:3px;
  border-bottom:1px solid transparent}
.menu a:hover,.menu a[aria-current]{color:var(--accent-deep);text-decoration:none;
  border-bottom-color:var(--gold)}
.nav__cta{flex:none;display:flex;align-items:center}
.burger{display:none;background:#fff;border:1px solid var(--line);cursor:pointer;
  width:44px;height:44px;padding:10px;flex:none;border-radius:var(--r-s);
  align-self:center}
.burger span{display:block;height:2px;background:var(--ink);margin:4px 0}

/* ---- 2. BUTTONS: square shoulders, uppercase, a gold keyline on hover ----- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--sans);font-weight:600;font-size:.9688rem;line-height:1.2;
  padding:15px 28px;border-radius:var(--r-s);border:1px solid transparent;
  cursor:pointer;text-align:center;letter-spacing:.09em;text-transform:uppercase;
  transition:background .18s ease,color .18s ease,box-shadow .18s ease}
.btn:hover{text-decoration:none}
.btn--cta{background:var(--accent);color:#fff}
.btn--cta:hover{background:var(--accent-deep);color:#fff;
  box-shadow:0 0 0 1px var(--gold),0 0 0 5px rgba(184,134,63,.18)}
.btn--ghost{background:transparent;color:var(--accent-deep);border-color:var(--accent-line)}
.btn--ghost:hover{border-color:var(--accent-deep);color:var(--accent-deep)}
.btn--gold{background:var(--gold-soft);color:var(--gold-deep);border-color:var(--gold-line)}
.btn--gold:hover{border-color:var(--gold)}
.btn--lg{padding:17px 32px;font-size:1rem}
.btn--block{display:flex;width:100%}

/* ---- 3. HERO: the ground split down the middle ---------------------------
   .hero__split is the slate-blue glass panel filling the LEFT half of the
   viewport, edge to edge, with one hard vertical line down the centre. The
   bottle stands on .hero__plinth, a stone slab, with a gold hairline arc
   drawn behind it by .hero__stick::before. None of that touches
   .hero__media::before / ::after, which hero_motifs.py owns. */
.hero{position:relative;background:var(--paper);overflow-x:clip;overflow-y:visible;
  border-bottom:1px solid var(--line)}
.hero__split{position:absolute;left:0;top:0;bottom:0;width:50%;z-index:0;
  background:linear-gradient(168deg,var(--slate) 0%,var(--slate-2) 58%,var(--slate-3) 100%)}
.hero__split::after{content:"";position:absolute;right:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,transparent,var(--gold) 22%,var(--gold) 78%,transparent);
  opacity:.7}
.hero__grid{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:58px;
  align-items:start;padding-block:52px 68px}
/* The copy column has to START right of the split, or the first inch of every
   headline sits as dark ink on the dark slate panel. Measured before the fix:
   the panel ends at 50vw (720px at 1440, 960 at 1920, 512 at 1024) while the
   copy began at 674 / 914 / 477 -- an overlap of 46, 46 and 35px, so the left
   edge of every line of the H1 and the Quick Answer was unreadable.
   The split stays at exactly 50%, because that hard centre line is the design;
   the copy moves instead. 56px clears the widest measured overlap at every
   width above the breakpoint where .hero__split is hidden (920px). */
@media(min-width:921px){.hero__copy{padding-left:56px}}
.pill{display:inline-flex;align-items:center;gap:9px;background:#fff;
  border:1px solid var(--line);color:var(--accent-deep);font-weight:600;
  font-size:.8438rem;letter-spacing:.14em;text-transform:uppercase;
  padding:7px 16px;border-radius:999px}
.pill::before{content:"";width:7px;height:7px;background:var(--gold)}
.hero h1{font-size:clamp(2.5rem,5vw,4rem);margin:20px 0 0;font-weight:400;
  line-height:1.02;letter-spacing:.002em}
.hero h1 span{color:var(--accent-deep)}
.hero h1 small{display:block;font-family:var(--sans);font-size:1rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-top:16px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0}
.hero__sub{margin:18px 0 0;font-size:.9688rem;color:var(--faint);
  display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.hero__sub span{white-space:nowrap}

.ticks{margin:24px 0 0;display:grid;gap:11px}
.ticks li{display:flex;gap:13px;align-items:flex-start;font-size:.9688rem;
  color:var(--ink-soft)}
.ck{flex:none;width:21px;height:21px;background:var(--accent-tint);
  color:var(--accent-deep);display:inline-flex;align-items:center;
  justify-content:center;font-size:.8rem;font-weight:600;margin-top:3px;
  border:1px solid var(--accent-line)}

.pay{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:20px 0 0;
  font-size:.9063rem;color:var(--faint)}
.pay img{width:210px;height:37px;object-fit:contain}

.factpills{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0}
.factpills li{background:#fff;border:1px solid var(--line);
  padding:6px 13px;font-size:.9063rem;color:var(--faint)}
.factpills li b{color:var(--ink)}

.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  margin:20px 0 0;background:var(--line);border:1px solid var(--line)}
.figures div{background:#fff;padding:14px 16px;text-align:center}
.figures b{display:block;font-family:var(--display);font-size:1.85rem;
  font-weight:400;color:var(--ink);line-height:1}
.figures span{display:block;margin-top:5px;font-size:.9063rem;color:var(--faint)}

.hero__rating{display:flex;align-items:center;gap:9px;margin:18px 0 0;
  font-size:.9688rem;color:var(--faint);flex-wrap:wrap}
.hero__rating b{color:var(--ink-soft)}
.rev__stars{color:var(--gold-deep);letter-spacing:1px}

.hero__media{position:relative}
.hero__stick{position:relative;display:block;padding-block:20px 56px}
/* the gold hairline arc, drawn behind the bottle */
.hero__stick::before{content:"";position:absolute;left:50%;top:6%;
  width:min(390px,96%);aspect-ratio:1;translate:-50% 0;border-radius:50%;
  border:1px solid rgba(184,134,63,.62);
  border-bottom-color:transparent;border-left-color:rgba(184,134,63,.2);
  z-index:1;pointer-events:none}
.hero__card{background:transparent;text-align:center;padding:8px;position:relative;
  z-index:2}
.hero__card img{margin-inline:auto;max-width:100%;
  filter:drop-shadow(0 30px 34px rgba(8,20,30,.45))}
/* the stone plinth the bottle stands on */
.hero__plinth{position:absolute;left:50%;bottom:34px;translate:-50% 0;
  width:min(320px,82%);height:26px;border-radius:50%;z-index:1;
  background:radial-gradient(60% 100% at 50% 42%,var(--paper-deep),rgba(221,213,196,.18) 78%,transparent);
  box-shadow:0 8px 22px rgba(8,20,30,.42)}
.hero__tag{position:absolute;left:50%;bottom:0;transform:translateX(-50%);z-index:4;
  background:var(--slate-3);color:var(--slate-ink);font-size:.9063rem;font-weight:500;
  letter-spacing:.1em;padding:7px 16px;white-space:nowrap;
  border:1px solid rgba(224,199,154,.45)}
.floaty{position:absolute;background:#fff;padding:12px 16px;
  box-shadow:var(--shadow-lg);font-family:var(--sans);font-size:.9688rem;font-weight:600;
  color:var(--ink);z-index:4;line-height:1.2;display:flex;align-items:center;gap:11px;
  border-left:3px solid var(--gold)}
.floaty img{width:44px;height:44px;flex:none}
.floaty small{display:block;color:var(--accent-deep);font-family:var(--sans);
  font-size:.9063rem;font-weight:500;margin-top:3px}
.floaty--tl{top:28px;right:-14px}
.floaty--br{bottom:70px;left:-16px}

/* The copy column runs well over a screen. A sticky rail keeps the bottle
   beside whatever the reader is on, offset by the measured header height and
   CAPPED by height so it scales on a short laptop instead of switching off
   (pitfalls #4 and #15). */
@media(min-width:1025px){
  .hero__media{position:sticky;top:calc(var(--navh,96px) + 14px);align-self:start;
    height:calc(100vh - var(--navh,96px) - 28px);min-height:380px;
    display:flex;align-items:center;justify-content:center}
  .hero__stick{max-height:calc(100vh - var(--navh,96px) - 44px)}
  .hero__stick .hero__card img{max-height:calc(100vh - 320px);min-height:200px;
    width:auto;object-fit:contain}
}

/* ---- 4. QUICK ANSWER (AEO) ------------------------------------------------ */
.answer{background:#fff;border-left:4px solid var(--accent);
  box-shadow:var(--shadow-sm);padding:20px 26px;margin:24px 0 0}
.answer .qtag{display:block;font-family:var(--sans);font-weight:600;font-size:.8438rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:.55em}
.answer p{margin:0;font-size:1.0625rem;color:var(--ink-soft)}
.answer p+p{margin-top:.75em}
.hero .answer p{font-size:1.1rem;line-height:1.66}
.hero .answer::before{content:"Quick answer";display:block;font-family:var(--sans);
  font-weight:600;font-size:.8438rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-deep);margin-bottom:.5em}

/* ---- 5. TRUST ROW --------------------------------------------------------- */
.trust{background:#fff;border-bottom:1px solid var(--line)}
.trust__note{max-width:320px;font-size:.9063rem;line-height:1.55;color:var(--faint)}
.trust__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:22px 40px;padding-block:22px}
.trust__row figure{text-align:center;max-width:132px}
.trust__row img{margin-inline:auto}
.trust__row figcaption{font-size:.9063rem;color:var(--faint);margin-top:8px;font-weight:500}

/* ---- ABOVE-THE-FOLD RESPONSIVE -------------------------------------------
   The masthead collapse and the hero's phone ordering decide the first paint,
   so they sit above the critical marker and are inlined into every head. */
@media(max-width:1330px){.navmenus{gap:26px}.menu a{font-size:.8875rem}}
@media(max-width:1180px){.navmenus{gap:20px}.brand__prod{font-size:1.85rem}}
@media(max-width:1100px){
  .burger{display:block}
  .nav__row{min-height:78px;align-items:center}
  .brand{border-right:0;padding-right:0;padding-block:12px;margin-right:auto}
  .brand svg{margin-bottom:5px}
  .navmenus{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    align-items:stretch;gap:0;background:#fff;border:1px solid var(--line);
    box-shadow:var(--shadow);padding-block:6px 10px;max-height:76vh;overflow-y:auto;
    z-index:20}
  .navmenus.open{display:flex}
  .menu{grid-template-columns:1fr;gap:0}
  .menu a{display:block;padding:13px 24px;border-bottom:1px solid var(--line-soft);
    font-size:1rem}
  .menu a:hover,.menu a[aria-current]{border-bottom-color:var(--line-soft);
    background:var(--accent-tint)}
}
@media(max-width:920px){
  .hero__split{width:100%;height:auto;top:auto;bottom:auto;display:none}
  .hero__grid{grid-template-columns:1fr;gap:22px;padding-block:28px 48px}
  /* display:contents promotes the copy column's children to grid items so the
     phone order can be set one by one. 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;justify-self:start}
  .hero__copy>h1{order:2}
  .hero__media{order:3;
    background:linear-gradient(168deg,var(--slate),var(--slate-3));
    padding-inline:12px}
  .hero__copy>.answer{order:4}
  .hero__copy>.ticks{order:5}
  .hero__copy>.hero__cta{order:6}
  .hero__copy>.hero__rating{order:7}
  .hero__copy>.pay{order:8}
  .hero__copy>.hero__sub{order:9}
  .hero__copy>.factpills{order:10}
  .hero__copy>.figures{order:11}
  .hero__card img{max-width:280px}
  .floaty{display:none}
}
@media(max-width:700px){
  .hero h1{font-size:2.35rem}
  .hero__card img{max-width:230px}
  .figures{grid-template-columns:1fr}
}
@media(max-width:480px){
  .nav__cta .btn{padding:12px 15px;font-size:.9rem;letter-spacing:.05em}
  .brand__firm{display:none}
  .brand__prod{font-size:1.6rem}
}
@media(max-width:380px){.nav__cta .btn{display:none}}


/* ---- hero motif -- filter-drip ---------------------------------------- */
.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:linear-gradient(200deg,#cadfdf,#f4f1ea 46%,#f4f1ea)}.hero__media::before,.hero__media::after{content:'';position:absolute;top:-14%;width:34%;height:128%;border-radius:999px;background:linear-gradient(180deg,transparent,rgba(11,141,174,0.34) 42%,transparent);filter:blur(12px);z-index:1;pointer-events:none}.hero__media::before{left:16%;animation:lpDrip 13s ease-in-out infinite}.hero__media::after{right:14%;animation:lpDrip 13s ease-in-out infinite;animation-delay:6.5s;scale:.8}@keyframes lpDrip{0%,100%{transform:translateY(-12%);opacity:.35}50%{transform:translateY(10%);opacity:.8}}
@media(prefers-reduced-motion:reduce){.hero__card,.hero__media::before,.hero__media::after{animation:none!important}}

/* ---- hero stage: what the product is FOR, moving around the bottle ----
   A liver formula's subject is filtration, so the motion descends and
   CLEARS: droplets fall past the bottle and fade out as they reach the
   plinth, rather than rising or circulating. The mask does the work -- the
   field is solid at the top and gone by the bottom, so the eye reads
   "something passing through and coming out clean" without a single word.
   .hero__stick::before is the gold hairline arc in the design, so the drops
   take ::after. .hero__media's two pseudo-elements belong to hero_motifs.py
   and are untouched (pitfall 65: a motif that wrote to the media column
   removed the sticky product column on 14 sites).
   Transform, opacity and background-position only; nothing sets position on
   .hero__media and no ancestor becomes a scroll container. */
.hero__stick{isolation:isolate}
.hero__stick::after{content:"";position:absolute;inset:-6% 6% 8%;z-index:1;
  pointer-events:none;opacity:.55;
  background-image:radial-gradient(circle,var(--accent) 2.4px,transparent 3px),
    radial-gradient(circle,var(--accent-line) 1.6px,transparent 2.1px);
  background-size:150px 210px,104px 158px;background-position:20px 0,72px 54px;
  -webkit-mask-image:linear-gradient(to bottom,#000 6%,rgba(0,0,0,.45) 54%,transparent 92%);
  mask-image:linear-gradient(to bottom,#000 6%,rgba(0,0,0,.45) 54%,transparent 92%);
  animation:lpFilter 21s linear infinite}
.hero__card::before{content:"";position:absolute;left:50%;top:50%;width:72%;
  aspect-ratio:1;translate:-50% -50%;border-radius:50%;z-index:0;
  pointer-events:none;
  background:radial-gradient(closest-side,var(--accent-tint),transparent 72%);
  animation:lpClear 11s ease-in-out infinite}
.hero__card{animation:lpRest 10s ease-in-out infinite}
@keyframes lpFilter{to{background-position:20px 420px,72px 370px}}
@keyframes lpClear{0%,100%{transform:scale(.92);opacity:.45}
  50%{transform:scale(1.05);opacity:.85}}
@keyframes lpRest{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media(prefers-reduced-motion:reduce){
  .hero__stick::after,.hero__card::before,.hero__card{animation:none!important}}

/* .btn.btn--cta, not .btn--cta: an equal-specificity rule appended at the
   end of the file did not win, and chasing why through the CSSOM was a
   waste -- two class selectors beat one and the question stops being
   about source order. */
.btn.btn--cta{background:#0a809d;color:#fff}
.btn.btn--cta:hover{background:#086b84;color:#fff}

/* --- 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. */
@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;}
}







/*!SITE-HOME-CRIT-START*/
/* ---- home first screen (desktop) ------------------------------------------
   Measured 1440x900 before this block: the hero buy pair opened at y=1053,
   153px under the fold, so the money page's first screen had nothing to
   click. The desktop copy column is re-ordered to eyebrow, headline, quick
   answer, BUTTONS, payment line, then the evidence, and the display type and
   hero padding are tightened enough to carry the pair above 900.
   The phone order at <=920px is composed separately with display:contents
   and is deliberately NOT touched: this block starts at 921px.
   Layout, so it lives above the marker and the site is rebuilt. */
@media(min-width:921px){
  .hero .hero__copy{display:flex;flex-direction:column;align-items:stretch}
  .hero .hero__copy>.pill{order:1;align-self:flex-start}
  .hero .hero__copy>h1{order:2}
  .hero .hero__copy>.answer{order:3}
  .hero .hero__copy>.hero__cta{order:4}
  .hero .hero__copy>.pay{order:5}
  .hero .hero__copy>.hero__rating{order:6}
  .hero .hero__copy>.ticks{order:7}
  .hero .hero__copy>.hero__sub{order:8}
  .hero .hero__copy>.factpills{order:9}
  .hero .hero__copy>.figures{order:10}
  .hero .hero__grid{padding-block:32px 60px}
  .hero h1{font-size:clamp(2.35rem,3.3vw,3.15rem);margin-top:14px;line-height:1.06}
  .hero .answer{padding:17px 22px;margin-top:18px}
  .hero .answer p{font-size:1.0313rem;line-height:1.6}
  .hero .hero__cta{margin-top:20px}
  .hero .pay{margin-top:15px}
  .hero .ticks{margin-top:20px}
}
/* Dashed separators between the pack feature rows. Every one of the three
   cards carries exactly four perks, so all three grow by the same 27px and
   the shared Add To Cart baseline is preserved (measured after the build).
   Home only: .hero is on index.html alone. */
body:has(.hero) .buy__perks li+li{padding-top:8px;border-top:1px dashed var(--line)}
/*!SITE-HOME-CRIT-END*/

/*!CRITICAL-END*/

/* ---- 6. SECTIONS ---------------------------------------------------------- */
.sec{padding-block:76px}
.sec--tight{padding-block:42px}
.sec--tint{background:var(--paper-tint)}
.sec--white{background:#fff}
.sec--center .sec__head{text-align:center;margin-inline:auto}
.sec__head{max-width:var(--measure-wide);margin-bottom:36px}
.sec__head--center{text-align:center;margin-inline:auto}
.eyebrow{display:inline-flex;align-items:center;gap:11px;font-family:var(--sans);
  font-size:.8438rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-deep);margin-bottom:12px}
.eyebrow::before{content:"";width:9px;height:9px;background:var(--gold);flex:none}
.rule{display:none}
.sec h2{font-size:clamp(1.95rem,3.4vw,2.7rem);margin-bottom:14px;line-height:1.08}
.sec h3{font-size:1.32rem;margin-bottom:9px}
.lead{font-size:1.12rem;color:var(--muted)}
.note{font-size:.9063rem;color:var(--faint)}
.sec p+p,.sec p+ul,.sec p+ol,.sec ul+p,.sec ol+p{margin-top:1em}
.sec>.wrap>p,.sec>.wrap>h2,.sec>.wrap>h3,.sec>.wrap>h4,
.sec>.wrap>ul,.sec>.wrap>ol,.sec>.wrap>.sec__head,.sec>.wrap>.callout,
.sec>.wrap>.alert,.sec>.wrap>.byline,.sec>.wrap>.refs,.sec>.wrap>.answer,
.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>h1{max-width:var(--measure);margin-inline:auto;
  font-size:clamp(2.25rem,4.4vw,3.2rem);font-weight:400;line-height:1.06}
.sec>.wrap>.eyebrow{display:flex;max-width:var(--measure);margin-inline:auto}
.sec ul li{position:relative}
.sec>.wrap>ul>li{padding-left:23px;margin-bottom:.5em}
.sec>.wrap>ul>li::before{content:"";position:absolute;left:2px;top:.68em;width:7px;
  height:7px;background:var(--accent)}
.sec ol{counter-reset:n;display:grid;gap:12px}
.sec>.wrap>ol>li{position:relative;padding-left:38px;counter-increment:n}
.sec>.wrap>ol>li::before{content:counter(n);position:absolute;left:0;top:1px;
  width:27px;height:27px;background:var(--accent-tint);border:1px solid var(--accent-line);
  color:var(--accent-deep);font-size:1.062rem;font-weight:600;display:flex;
  align-items:center;justify-content:center;font-family:var(--sans)}
.dropcap::first-letter{float:left;font-family:var(--display);font-size:4rem;
  line-height:.78;font-weight:400;color:var(--accent-deep);padding:8px 14px 0 0}

.pullquote{border-left:3px solid var(--gold);padding:8px 0 8px 24px;margin:28px auto}
.pullquote p{font-family:var(--display);font-size:1.6rem;font-weight:400;color:var(--ink);
  line-height:1.24}
.pullquote cite{display:block;margin-top:11px;font-style:normal;font-size:.8438rem;
  color:var(--faint);letter-spacing:.1em;text-transform:uppercase;font-weight:600}

.crumbs{font-size:.9063rem;color:var(--faint);padding-block:18px 0}
.crumbs a{color:var(--faint)}

/* ---- 7. CARDS, GRIDS ------------------------------------------------------ */
.grid{display:grid;gap:22px}
.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))}
.card{background:#fff;border:1px solid var(--line-soft);border-top:2px solid var(--slate);
  padding:28px 26px;transition:border-top-color .2s ease,box-shadow .2s ease}
.card:hover{border-top-color:var(--gold);box-shadow:var(--shadow-sm)}
.card h3{font-size:1.26rem}
.card p{font-size:1.0625rem;color:var(--muted)}
.card p+p{margin-top:.8em}

.steps{display:grid;gap:15px;counter-reset:s}
.step{background:#fff;border:1px solid var(--line-soft);
  padding:26px 28px 26px 80px;position:relative;counter-increment:s}
.step__n{position:absolute;left:24px;top:24px;width:38px;height:38px;
  background:var(--slate-3);color:#fff;display:flex;align-items:center;
  justify-content:center;font-family:var(--display);font-weight:400;font-size:1.2rem}
.step__n::before{content:counter(s,decimal-leading-zero)}
.step h3{font-size:1.2rem}
.step p{font-size:1.0625rem;color:var(--muted)}

.chips{display:grid;gap:11px;margin:18px 0 0}
.chips li{display:flex;gap:12px;align-items:flex-start;font-size:.9688rem}
.chips .ck{background:var(--gold-soft);color:var(--gold-deep);border-color:var(--gold-line)}

.callout{background:var(--accent-tint);border-left:4px solid var(--accent);
  padding:20px 26px;margin:26px auto;font-size:1.0625rem}
.callout p+p{margin-top:.8em}
.alert{background:var(--gold-soft);border-left:4px solid var(--gold);
  padding:20px 26px;margin:26px auto;font-size:1.0625rem}
.alert p+p{margin-top:.8em}
.flag{display:inline-block;background:var(--gold-soft);color:var(--gold-deep);
  font-size:.8438rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 11px;border:1px solid var(--gold-line)}

/* ---- 8. TABLES ------------------------------------------------------------ */
.tablewrap{overflow-x:auto;background:#fff;border:1px solid var(--line-soft);
  margin:24px auto}
table.dtable{width:100%;border-collapse:collapse;font-size:1rem;min-width:520px}
.dtable caption{text-align:left;padding:18px 22px 0;font-family:var(--display);
  font-weight:400;color:var(--ink);font-size:1.28rem}
.dtable th,.dtable td{padding:13px 22px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line-soft)}
.dtable thead th{background:var(--slate-3);color:#fff;font-size:.9063rem;
  letter-spacing:.1em;text-transform:uppercase;font-weight:600;font-family:var(--sans)}
.dtable tbody tr:nth-child(even) td{background:#faf8f3}
.dtable tbody tr:last-child td{border-bottom:0}
.dtable td b{color:var(--ink)}

/* ---- 9. SPLIT ------------------------------------------------------------- */
.split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:46px;
  align-items:center}
.split--rev{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
.split__media{text-align:center}
.split__media img{margin-inline:auto}

/* ---- 10. SHOTS: images that carry content --------------------------------- */
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;margin-top:8px}
.shots--wide{grid-template-columns:repeat(3,minmax(0,1fr))}
.shots figure{background:#fff;border:1px solid var(--line-soft);overflow:hidden}
.shots img{width:100%}
.shots figcaption{padding:20px 22px;font-size:.9688rem;color:var(--muted)}
.shots figcaption b{display:block;font-family:var(--display);font-size:1.2rem;
  font-weight:400;color:var(--ink);margin-bottom:7px}

/* ---- 11. PROMO / STATS / BADGEWALL: the slate bands ----------------------- */
.promo{background:linear-gradient(140deg,var(--slate-2),var(--slate-3));
  color:var(--slate-ink);padding:34px 38px;display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:26px;align-items:center;
  border-left:3px solid var(--gold)}
.promo p{margin:0}
.promo b{color:#fff}
.stats{background:linear-gradient(140deg,var(--slate-2),var(--slate-3));
  padding:36px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;
  text-align:center}
.stats b{display:block;font-family:var(--display);font-size:2.6rem;font-weight:400;
  color:#fff;line-height:1}
.stats span{display:block;margin-top:8px;font-size:.9063rem;color:var(--slate-ink)}
.badgewall{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
.badgewall figure{background:#fff;border:1px solid var(--line-soft);
  padding:22px 14px;text-align:center}
.badgewall img{margin:0 auto 12px}
.badgewall figcaption{font-size:.9063rem;color:var(--muted)}
.badgewall figcaption b{display:block;color:var(--ink);font-size:1.02rem;
  margin-bottom:5px;font-family:var(--display);font-weight:400}

/* ---- 12. WHY / WHOFOR ----------------------------------------------------- */
.whygrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.whycard{background:#fff;border:1px solid var(--line-soft);padding:28px 26px;
  position:relative;overflow:hidden}
.whycard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--accent),var(--gold))}
.whycard h3{font-size:1.24rem}
.whycard p{font-size:1.0625rem;color:var(--muted)}
.whofor{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.forlist{background:#fff;border:1px solid var(--line-soft);padding:28px}
.forlist h3{font-size:1.24rem;margin-bottom:14px}
.forlist li{display:flex;gap:11px;font-size:1.0625rem;margin-bottom:10px}
.forlist li::before{content:"";flex:none;width:7px;height:7px;margin-top:.66em;
  background:var(--accent)}
.forlist--no li::before{background:var(--gold)}

/* ---- 13. INGREDIENT CARDS AND THE LABEL PANEL ----------------------------- */
.ing{display:grid;gap:24px}
.inglist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.ingthumbs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.ingthumbs figure{text-align:center}
.ingthumbs img{margin-inline:auto;border:1px solid var(--line-soft)}
.ingthumbs figcaption{font-size:.9063rem;color:var(--faint);margin-top:8px;font-weight:500}
.ingcard{background:#fff;border:1px solid var(--line-soft);padding:30px;
  position:relative}
.ingcard h3{font-size:1.36rem;margin-bottom:4px}
.ingcard .ingsub{font-size:0.9062rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-deep);font-weight:600;margin-bottom:14px;display:block}
.ingcard .ing__dose{font-size:.9688rem;color:var(--faint);margin-bottom:10px}
.ingcard p{font-size:1.0625rem}
.ingcard p+p{margin-top:.85em}
.facts{background:#fff;border:2px solid var(--ink);overflow:hidden;
  max-width:580px;margin-inline:auto}
.facts__h{background:var(--ink);color:#fff;padding:15px 24px;font-family:var(--display);
  font-size:1.35rem;font-weight:400}
.facttab{width:100%;border-collapse:collapse;font-size:1rem}
.facttab th,.facttab td{padding:12px 24px;border-bottom:1px solid var(--line);
  text-align:left}
.facttab th{font-weight:600;color:var(--ink-soft);font-size:1rem}
.facttab td:last-child{text-align:right;font-weight:600;color:var(--ink)}
.facttab tr:last-child th,.facttab tr:last-child td{border-bottom:0}

/* ---- 14. QA record sheet -------------------------------------------------- */
.qa{background:#fff;border:1px solid var(--line-soft);overflow:hidden;
  max-width:940px;margin-inline:auto}
.qa__h{background:var(--slate-3);color:#fff;padding:17px 26px;font-family:var(--display);
  font-weight:400;font-size:1.3rem}
.qa dl{margin:0;display:grid;grid-template-columns:32% minmax(0,1fr)}
.qa dt,.qa dd{padding:14px 26px;border-bottom:1px solid var(--line-soft);margin:0}
.qa dt{font-weight:600;color:var(--ink);font-size:1.062rem;letter-spacing:.08em;
  text-transform:uppercase;font-family:var(--sans)}
.qa dd{color:var(--muted);font-size:1.0625rem}
.qa dl>:nth-last-child(-n+2){border-bottom:0}

/* ---- 15. ADD-TO-CART PANEL ------------------------------------------------
   Three pack cards sharing one image slot and one button baseline. Every card
   carries border:2px solid transparent so the featured one can change only the
   colour -- a border added to one card alone steals 2px from its content box
   under border-box and drops its button out of line (responsive.md). */
.buy{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;
  align-items:stretch;margin-top:8px}
.buy__card{background:#fff;border:2px solid transparent;outline:1px solid var(--line);
  outline-offset:-1px;display:flex;flex-direction:column;text-align:center}
.buy__card--feature{border-color:var(--accent);outline-color:var(--accent);
  margin-top:-14px}
.buy__head{background:var(--slate-3);color:#fff;padding:18px 18px 15px;position:relative}
.buy__card--feature .buy__head{background:linear-gradient(140deg,var(--accent),var(--accent-deep))}
.buy__flag{display:inline-block;background:var(--gold-soft);color:var(--gold-deep);
  font-size:.8438rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 12px;margin-bottom:9px}
.sec .buy__name{color:#fff;font-size:2rem;font-weight:400;margin:0;
  font-family:var(--display)}
.buy__supply{color:var(--slate-ink);font-size:.9063rem;font-weight:500;margin-top:3px;min-height:3.3em}
.buy__body{padding:20px 24px 24px;display:flex;flex-direction:column;flex:1}
.buy__img{display:block;width:100%;max-width:230px;height:180px;object-fit:contain;
  margin:0 auto 12px}
.buy__price{font-family:var(--display);font-size:3.6rem;font-weight:400;color:var(--ink);
  line-height:1;display:flex;align-items:flex-start;justify-content:center;gap:2px}
.buy__cur{font-size:1.5rem;margin-top:8px}
.buy__per{font-family:var(--sans);font-size:1rem;font-weight:500;color:var(--faint);
  align-self:flex-end;margin:0 0 8px 7px}
.buy__total{font-size:1.0625rem;color:var(--muted);margin:11px 0 15px}
.buy__total b{color:var(--ink);font-size:1.2rem}
.buy__total s{color:var(--faint);margin-left:6px}
.buy__perks{display:grid;gap:8px;text-align:left;margin:0 auto 18px;font-size:1rem;
  color:var(--ink-soft)}
.buy__perks li{position:relative;padding-left:27px}
.buy__perks li::before{content:"\2713";position:absolute;left:0;top:1px;width:19px;
  height:19px;background:var(--accent-tint);color:var(--accent-deep);font-size:1.062rem;
  font-weight:600;display:flex;align-items:center;justify-content:center}
/* Pack-card alignment, fixed by measurement 18 Sep 2026. Two separate
   causes, both invisible to every automated check:
   1. The Add To Cart button is NOT the last element in a card -- payment
      art and a note follow it -- so `margin-top:auto` absorbed whatever
      space those trailing blocks left over, which differs per card. The
      buttons landed on three different baselines. The body now packs from
      the top, and min-height keeps a two-line label level with a one-line
      one.
   2. The supply line wraps to two lines on the larger packs at some widths,
      which pushed the whole card body down on those cards only. It now
      reserves two lines at every width.
   pack_cards.py is the tool that should guarantee this and cannot: its
   matcher is `\bcard`, which cannot match `buy__card`, because an
   underscore is a word character. */
.buy__add{font-size:1rem;padding-block:16px;margin-top:14px;min-height:73px;display:flex;align-items:center;justify-content:center}
.buy__cart{flex:none}
.buy__card--feature .buy__add{background:var(--slate-3)}
.buy__card--feature .buy__add:hover{background:var(--accent-deep)}
.buy__pay{display:block;width:180px;height:auto;margin:14px auto 0;opacity:.9}
.buy__why{font-size:.9375rem;color:var(--faint);text-align:left;margin-top:15px;
  padding-top:13px;border-top:1px dashed var(--line)}
.buy__foot{max-width:var(--measure-wide);margin:28px auto 0;text-align:center}
.guarantee{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr);gap:36px;
  align-items:center;background:#fff;border:1px solid var(--line-soft);padding:34px}
.guarantee img{margin-inline:auto}
.guarantee h3{font-size:1.5rem;margin-bottom:13px}

/* ---- 16. REVIEWS ---------------------------------------------------------- */
.tgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.tcard{background:#fff;border:1px solid var(--line-soft);padding:26px}
.tcard .stars{color:var(--gold-deep);letter-spacing:1px;font-size:1rem}
.tcard b{display:block;margin-top:9px;font-family:var(--display);font-size:1.22rem;
  font-weight:400;color:var(--ink)}
.tcard span{font-size:.9063rem;color:var(--faint)}
.tcard p{font-size:1.0625rem;margin-top:11px}
.bars{display:grid;gap:10px;max-width:470px}
.bar{display:grid;grid-template-columns:62px minmax(0,1fr) 52px;gap:12px;
  align-items:center;font-size:.9063rem;color:var(--faint)}
.bar__t{height:9px;background:var(--paper-deep);overflow:hidden}
.bar__f{display:block;height:100%;background:var(--accent)}
.dist{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;
  align-items:center;background:#fff;border:1px solid var(--line-soft);padding:30px}
.bigscore{font-family:var(--display);font-size:3.4rem;font-weight:400;color:var(--ink);
  line-height:1}
.bigscore small{font-size:1rem;color:var(--faint);font-weight:500}
.tlife{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}

/* ---- 17. FAQ -------------------------------------------------------------- */
.faq{display:grid;gap:11px;text-align:left}
.faq details{background:#fff;border:1px solid var(--line-soft);overflow:hidden}
.faq details[open]{border-color:var(--accent-line)}
.faq summary{padding:18px 24px;font-family:var(--display);font-weight:400;
  color:var(--ink);cursor:pointer;font-size:1.28rem;list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:center;line-height:1.24}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:28px;height:28px;
  background:var(--accent-tint);color:var(--accent-deep);font-size:1.2rem;
  display:flex;align-items:center;justify-content:center;font-family:var(--sans)}
.faq details[open] summary::after{content:"\2013";background:var(--accent);color:#fff}
.faq__b{padding:0 24px 20px;font-size:1.0625rem}
.faq__b p+p{margin-top:.8em}

/* ---- 18. REFS, BYLINE ----------------------------------------------------- */
.refs{background:#fff;border:1px solid var(--line-soft);padding:26px 28px}
.refs h2{font-size:1.4rem;margin-bottom:14px}
.refs ol{counter-reset:r;display:grid;gap:10px}
.refs li{counter-increment:r;position:relative;padding-left:30px;font-size:1.062rem;
  color:var(--muted);line-height:1.6}
.refs li::before{content:counter(r) ".";position:absolute;left:0;font-weight:600;
  color:var(--accent-deep)}
.refs a{word-break:break-word}
.byline{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;background:#fff;
  border:1px solid var(--line-soft);border-left:3px solid var(--gold);padding:26px 28px;
  margin:28px auto 0}
.byline img{flex:none}
.byline svg{width:60px;height:60px;flex:none}
.byline b{font-family:var(--display);font-size:1.28rem;font-weight:400;color:var(--ink);
  display:block;margin-bottom:8px}
.byline p{font-size:.9688rem;color:var(--muted)}

/* ---- 19. FORMS ------------------------------------------------------------ */
.form{display:grid;gap:24px;grid-template-columns:repeat(2,minmax(0,1fr))}
.formcard{background:#fff;border:1px solid var(--line-soft);padding:28px}
.formcard h3{font-size:1.26rem;margin-bottom:7px}
.formcard label{display:block;font-size:.9063rem;font-weight:600;color:var(--ink-soft);
  margin:15px 0 6px}
/* 16px minimum: anything smaller makes iOS Safari zoom the page on focus and
   never zoom back (pitfall 86). */
.formcard input,.formcard textarea,.formcard select{width:100%;padding:13px 15px;
  border:1px solid var(--line);font-family:var(--sans);font-size:1rem;color:var(--ink);
  background:var(--paper);border-radius:var(--r-s)}
.formcard textarea{min-height:120px;resize:vertical}
.formcard .btn{margin-top:20px}

/* ---- 20. FINAL CTA / RELATED ---------------------------------------------- */
.final{background:linear-gradient(140deg,var(--slate-2),var(--slate-3));
  padding:42px 44px;color:var(--slate-ink);position:relative;overflow:hidden;
  border-top:3px solid var(--gold)}
.final::after{content:"";position:absolute;right:-90px;top:-90px;width:280px;height:280px;
  border-radius:50%;border:1px solid rgba(224,199,154,.4)}
.final h2{color:#fff;font-size:clamp(1.8rem,3.2vw,2.5rem);margin-bottom:14px}
.final--media{display:grid;grid-template-columns:300px minmax(0,1fr);gap:38px;
  align-items:center}
.final--media .final__img img{width:100%;height:auto;margin-inline:auto;
  filter:drop-shadow(0 22px 28px rgba(0,0,0,.4))}
.final__price{font-family:var(--display);font-size:1.5rem;font-weight:400;color:#fff;
  margin:16px 0 20px}
.final .btn--cta{background:#fff;color:var(--slate-3)}
.final .btn--cta:hover{background:var(--gold-soft);color:var(--slate-3)}
.final p,.article .final p{color:var(--slate-ink)}
.final__price,.article .final .final__price{color:#fff}
.final a:not(.btn){color:#fff;text-decoration:underline}
.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;text-align:left}
.rel a{background:#fff;border:1px solid var(--line-soft);border-top:2px solid var(--slate);
  padding:24px;display:block;transition:border-top-color .2s ease}
.rel a:hover{border-top-color:var(--gold);text-decoration:none}
.rel b{display:block;font-family:var(--display);font-size:1.22rem;font-weight:400;
  color:var(--ink);margin-bottom:7px}
.rel span{font-size:.9688rem;color:var(--muted)}

/* ---- 21. LEGAL ------------------------------------------------------------ */
.legal h2{margin-top:1.5em}
.legal h3{margin-top:1.2em}
.meta{font-size:.9063rem;color:var(--faint)}

/* ---- 22. FOOTER ----------------------------------------------------------
   The slot's shape: a CENTRED GUARANTEE SEAL band on stone, then a wide
   two-column split on slate -- brand and desks left, the link wall centre --
   with a narrow LEGAL RAIL pinned to the far right. */
.fseal{background:var(--paper-tint);border-top:1px solid var(--line);
  padding-block:44px}
.fseal__in{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:14px;max-width:660px;margin-inline:auto}
.fseal img{margin-inline:auto}
.fseal b{font-family:var(--display);font-size:1.7rem;font-weight:400;color:var(--ink);
  line-height:1.16}
.fseal p{font-size:1.062rem;color:var(--muted)}
.fdesk{background:#fff;border-top:1px solid var(--line);padding-block:36px}
.fdesk__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.fdesk__card{background:var(--paper);border:1px solid var(--line-soft);
  border-top:2px solid var(--slate);padding:22px 24px}
.fdesk__card b{display:block;font-family:var(--display);font-size:1.2rem;font-weight:400;
  color:var(--ink);margin-bottom:5px}
.fdesk__card p{font-size:1.062rem;color:var(--muted)}
.fdesk__card .flag{margin-bottom:11px}
footer{background:var(--slate-3);color:rgba(219,230,238,.8);padding-block:48px 26px;
  font-size:.9375rem}
footer a{color:#fff}
footer a:hover{color:var(--gold-line)}
.fgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) 210px;gap:38px;
  padding-bottom:30px;border-bottom:1px solid rgba(255,255,255,.14)}
.fgrid h4{color:var(--gold-line);font-family:var(--sans);font-size:.8438rem;
  letter-spacing:.18em;text-transform:uppercase;margin-bottom:13px;font-weight:600}
.fgrid li{margin-bottom:8px;font-size:1.062rem;line-height:1.5}
.fcols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
.fbrand{font-family:var(--display);font-size:2rem;font-weight:400;color:#fff;
  margin-bottom:12px}
.fbrand span{color:#7cc6dd}
.fbadges{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.fbadges img{background:#fff;border-radius:50%;padding:2px}
.flegal{border-left:1px solid rgba(255,255,255,.14);padding-left:26px}
.flegal li{margin-bottom:9px}
.fnap{padding-block:24px;border-bottom:1px solid rgba(255,255,255,.14);
  font-size:.9375rem;line-height:1.75}
.fnap strong{color:#fff}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding-block:20px;
  font-size:.9063rem}
.fpay img{background:#fff;padding:5px 7px}
.disc{padding-top:20px;font-size:.9063rem;line-height:1.66;color:rgba(219,230,238,.74)}
.disc p{margin-bottom:.9em}
.disc b{color:#fff}
.disc .copy{margin-top:18px;color:rgba(219,230,238,.62)}

/* ---- 23. BUY BAR ---------------------------------------------------------- */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:950;background:var(--slate-3);
  color:#fff;transform:translateY(110%);transition:transform .3s ease;
  border-top:2px solid var(--gold)}
.buybar.show{transform:translateY(0)}
.buybar__in{max-width:var(--wrap);margin-inline:auto;padding:12px 24px;display:flex;
  align-items:center;gap:18px;justify-content:space-between;flex-wrap:wrap;
  font-size:.9375rem}
.buybar__t b{color:#fff}
.buybar .from{color:var(--gold-line)}
.buybar .btn{padding:11px 22px}

/* ---- 24. BLOG ------------------------------------------------------------- */
.article{max-width:780px;margin-inline:auto}
.article h1{font-size:clamp(2.1rem,4.2vw,3rem);margin-bottom:16px;font-weight:400}
.article h2{font-size:1.85rem;margin:1.9em 0 .6em;scroll-margin-top:140px}
.article h3{font-size:1.28rem;margin:1.5em 0 .5em}
.article p{margin-bottom:1em}
.article ul,.article ol{margin:0 0 1.2em}
.article ul li{position:relative;padding-left:23px;margin-bottom:9px}
.article ul li::before{content:"";position:absolute;left:3px;top:.68em;width:7px;
  height:7px;background:var(--accent)}
.article ol{counter-reset:ai}
.article ol li{position:relative;padding-left:31px;margin-bottom:9px;counter-increment:ai}
.article ol li::before{content:counter(ai) ".";position:absolute;left:0;
  color:var(--accent-deep);font-weight:600}
.article figure{margin:1.6em 0}
.article figure img{width:100%}
.article figure.portrait img{width:100%;max-width:var(--figw,440px);margin-inline:auto}
.article figcaption{font-size:.9375rem;color:var(--faint);margin-top:10px;
  border-left:2px solid var(--gold);padding-inline-start:13px}
.postmeta{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:.9063rem;color:var(--faint);
  padding-block:13px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin-bottom:28px}
.postmeta b{color:var(--ink-soft)}
.postmeta .sep{color:var(--line)}
.toc{background:#fff;border:1px solid var(--line-soft);padding:22px 26px;
  margin-bottom:28px}
.toc h2{font-size:.8438rem;letter-spacing:.2em;text-transform:uppercase;
  font-family:var(--sans);color:var(--accent-deep);margin:0 0 12px;font-weight:600}
.toc ol{counter-reset:t;display:grid;gap:7px}
.toc li{counter-increment:t;position:relative;padding-left:29px;font-size:1.062rem}
.toc li::before{content:counter(t) ".";position:absolute;left:0;color:var(--faint);
  font-weight:600}
.keypoints{background:var(--accent-tint);border-left:4px solid var(--accent);
  padding:22px 26px;margin-bottom:26px}
.keypoints>b{display:block;font-family:var(--sans);font-size:.8438rem;
  letter-spacing:.19em;text-transform:uppercase;color:var(--accent-deep);
  margin-bottom:11px;font-weight:600}
.keypoints li b{color:var(--accent-deep)}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.posts article{background:#fff;border:1px solid var(--line-soft);
  border-top:2px solid var(--slate);overflow:hidden;transition:border-top-color .2s ease}
.posts article:hover{border-top-color:var(--gold)}
.posts img{width:100%}
.posts .pbody{padding:22px 24px}
.posts h3{font-size:1.28rem;margin-bottom:9px}
.posts p{font-size:1.062rem;color:var(--muted)}
.posts .pmeta{font-size:0.9062rem;color:var(--faint);margin-top:13px;letter-spacing:.07em;
  text-transform:uppercase;font-weight:600}
/* A shared component in a narrower column is a new component (pitfall 24). */
.article .final--media{grid-template-columns:168px minmax(0,1fr);gap:26px;
  padding:32px 30px}
.article .final--media .final__img img{max-width:168px}
.article .final--media h2{font-size:1.7rem;line-height:1.2;margin-top:0}
@media(max-width:760px){
  .article .final--media{grid-template-columns:1fr;gap:16px;padding:26px 22px;
    text-align:center}
  .article .final--media .final__img img{max-width:128px;margin-inline:auto}
  .article .final--media h2{font-size:1.44rem}
  .article .final--media .btn{width:100%}
}
.article .refs{margin-top:2em}
.article .refs h2{margin-top:0}

/* ---- 25. MOTION: rise on entry -------------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(16px)}
[data-reveal].in{opacity:1;transform:none;
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
@media(prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal].in{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---- 26. RESPONSIVE ------------------------------------------------------- */
@media(max-width:1080px){
  .sec>.wrap>p,.sec>.wrap>h2,.sec>.wrap>h3,.sec>.wrap>h4,
  .sec>.wrap>ul,.sec>.wrap>ol,.sec>.wrap>.sec__head,.sec>.wrap>.callout,
  .sec>.wrap>.alert,.sec>.wrap>.byline,.sec>.wrap>.refs,.sec>.wrap>.answer,
  .sec>.wrap>.pullquote,.sec>.wrap>blockquote,.sec>.wrap>h1,.sec>.wrap>.eyebrow,
  .sec>.wrap>.tablewrap,.sec>.wrap>.faq,.sec>.wrap>.steps{max-width:none}
  .badgewall{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ingthumbs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fgrid{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:30px}
  .flegal{grid-column:1 / -1;border-left:0;border-top:1px solid rgba(255,255,255,.14);
    padding-left:0;padding-top:22px}
  .flegal ul{display:flex;flex-wrap:wrap;gap:8px 26px}
}
@media(max-width:920px){
  .split,.split--rev,.guarantee,.dist,.form{grid-template-columns:1fr;gap:28px}
  .promo{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3,.g4,.whygrid,.tgrid,.tlife,.rel,.posts,.fdesk__grid,.inglist{
    grid-template-columns:repeat(2,minmax(0,1fr))}
  .buy{grid-template-columns:1fr;max-width:450px;margin-inline:auto;gap:20px}
  .buy .buy__card:nth-child(1){order:3}
  .buy .buy__card:nth-child(2){order:1}
  .buy .buy__card:nth-child(3){order:2}
  .buy__card--feature{margin-top:0}
  .final--media{grid-template-columns:1fr;gap:24px}
  .final--media .final__img img{max-width:240px}
}
@media(max-width:700px){
  .sec{padding-block:52px}
  .g2,.g3,.g4,.whygrid,.whofor,.tgrid,.tlife,.rel,.posts,.shots,.shots--wide,
  .badgewall,.fdesk__grid,.fgrid,.fcols,.inglist{grid-template-columns:1fr}
  .ingthumbs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qa dl{grid-template-columns:1fr}
  .qa dt{padding-bottom:0;border-bottom:0}
  .qa dd{padding-top:4px}
  .stats{grid-template-columns:1fr}
  .final{padding:30px 22px}
  .step{padding:24px 20px 24px 70px}
  .step__n{left:16px}
  .promo{padding:28px 22px}
  .guarantee{padding:26px 22px}
}
/* Tap target: a button on a phone must be reachable with a thumb (44px). */
@media(max-width:600px){.btn{min-height:44px}}


/* ---- 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 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}

/* --- the primary CTA needs 4.5:1 with its own label ----------------------
   `.btn--cta` ran white 16px text on --accent #0b8dae: 3.86:1, under the
   4.5:1 AA needs for normal-size text. Darkened along the same hue to
   #0a809d (4.60:1) for the button only -- the token keeps its value
   everywhere else, so nothing that merely tints with the accent moves. */

/* ==== fix_layout_breaks.py ==== */
/* A figure alone on its row, and components whose own
   background fights the band they sit in. Appended: each
   rule below is correct in isolation and only their
   combination fails, so the originals stay as written. */
.shots>figure:last-child:nth-child(odd){grid-column:1/-1;max-width:calc((100% - 26px) / 2);margin-inline:auto}
/* ==== end fix_layout_breaks.py ==== */

/* ==== directional chrome (fix_chrome_scroll.py) ==== */
.nav,#nav{transition:transform .28s ease}
@media(prefers-reduced-motion:reduce){.nav,#nav{transition:none}}
.nav--away{transform:translateY(-100%)}
html.chrome-up .buybar{transform:translateY(110%)}
/* ==== 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 SURFACE + HERO BLOOM                       design slot: bloom / 14 / 8
   --------------------------------------------------------------------------
   Paint only -- radius, shadow, background, transform, transition -- so this
   sits below the critical marker and needs a restamp, not a rebuild.

   Scope: .hero is on index.html and nowhere else, so any selector beginning
   ".hero " is home-only by construction. The shared components (#pricing,
   .buy__card, the masthead CTA, the sticky buy bar) live on other pages too
   and are reached through body:has(.hero).

   modern_surface.py and footer_type.py re-append their blocks BELOW this one
   on every build, so nothing here relies on source order: every rule carries
   at least two classes, and the tokens are this site's own names rather than
   --radius, which modern_surface re-declares on :root.
   ========================================================================== */
:root{
  --lp-rc:14px;   /* cards and panels */
  --lp-rk:8px;    /* buttons and controls */
  /* three stops -- contact, mid, wide -- tinted with this site's ink
     (22,37,46), never neutral black */
  --lp-d1:0 1px 2px rgba(22,37,46,.07),0 6px 14px rgba(22,37,46,.09),
          0 20px 44px rgba(22,37,46,.10);
  --lp-d2:0 1px 2px rgba(22,37,46,.10),0 6px 14px rgba(22,37,46,.14),
          0 20px 44px rgba(22,37,46,.20);
  /* the same three stops for a card standing on the slate panel */
  --lp-dk:0 1px 2px rgba(8,20,30,.24),0 6px 14px rgba(8,20,30,.26),
          0 20px 44px rgba(8,20,30,.34);
}

/* ---- controls: 8px, one gradient, one solid ------------------------------
   The buying CTA is the only gradient on the page; the secondary stays a
   solid white panel so the pair reads as two weights rather than two
   buttons. 4px shoulders and a single flat hairline were the dated part. */
.hero .btn,
body:has(.hero) .buy__add,
body:has(.hero) .nav__cta .btn,
body:has(.hero) .buybar .btn{border-radius:var(--lp-rk);
  transition:background-color .18s ease,background-image .18s ease,
             color .18s ease,box-shadow .22s ease,transform .22s ease}

.hero .btn.btn--cta,
body:has(.hero) .buy__add.btn--cta{
  background-image:linear-gradient(142deg,#12a3c6 0%,var(--accent) 48%,var(--accent-deep) 100%);
  box-shadow:var(--lp-d1)}
.hero .btn.btn--cta:hover,
body:has(.hero) .buy__add.btn--cta:hover{
  background-image:linear-gradient(142deg,var(--accent) 0%,var(--accent-deep) 78%);
  box-shadow:var(--lp-d2);transform:translateY(-2px)}

.hero .btn.btn--ghost{background-color:var(--paper-card);
  border-color:var(--accent-line);box-shadow:0 1px 2px rgba(22,37,46,.07)}
.hero .btn.btn--ghost:hover{background-color:#fff;border-color:var(--accent-deep);
  box-shadow:0 1px 2px rgba(22,37,46,.09),0 6px 14px rgba(22,37,46,.10);
  transform:translateY(-2px)}

.hero .btn:focus-visible,
body:has(.hero) .buy__add:focus-visible,
body:has(.hero) .nav__cta .btn:focus-visible{outline:2px solid var(--accent-deep);
  outline-offset:3px}
body:has(.hero) a:focus-visible{outline:2px solid var(--accent-deep);outline-offset:2px}

/* ---- hero panels --------------------------------------------------------- */
.hero .answer{border-radius:var(--lp-rc);box-shadow:var(--lp-d1)}
.hero .floaty{border-radius:var(--lp-rc);box-shadow:var(--lp-dk)}
.hero .floaty img{border-radius:8px}
.hero .hero__tag{border-radius:999px}
.hero .factpills li{border-radius:999px}
.hero .ticks .ck{border-radius:7px}
.hero .pill{box-shadow:0 1px 2px rgba(22,37,46,.07)}
.hero .figures{border-radius:var(--lp-rc);overflow:hidden;box-shadow:var(--lp-d1)}

/* ---- hero motif: a bloom opening from behind the bottle ------------------
   Slot family "bloom". It lives on the two pseudo-elements of the media
   column (hero_motifs.py wrote a blurred drip pair there; these rules carry
   two classes and replace it outright, resetting every property that pass
   set rather than leaving half of it behind). Nothing is written to the
   .hero__media box itself, so the sticky product column survives.

   Sized at ~148% of the media column -- about 683px against a 393x596 product
   card -- so it opens OUTSIDE the card rather than behind an opaque panel.
   The mask holds the centre EMPTY and puts every lit pixel between 44% and
   76% of the radius, which is the ring the bottle does not cover: a bloom
   whose light all landed behind the product would render as nothing, which
   is how the first version of this pass shipped looking flat.
   Transform and opacity only, 30 and 38 seconds: this is a capsule taken
   daily for weeks, not an energy drink. No blur is animated. */
.hero .hero__media::before,
.hero .hero__media::after{content:"";position:absolute;left:50%;right:auto;
  top:50%;width:min(148%,720px);height:auto;aspect-ratio:1;
  translate:-50% -50%;scale:1;border-radius:50%;filter:none;
  z-index:-1;pointer-events:none;will-change:transform,opacity}

/* the petals: cyan off the label band, with a narrower copper lobe from the
   swash between every pair */
.hero .hero__media::before{
  background:
    repeating-conic-gradient(from 12deg at 50% 50%,
      rgba(11,141,174,0) 0deg,rgba(11,141,174,.40) 9deg,
      rgba(11,141,174,0) 18deg,rgba(11,141,174,0) 45deg),
    repeating-conic-gradient(from 34deg at 50% 50%,
      rgba(184,134,63,0) 0deg,rgba(184,134,63,.26) 5deg,
      rgba(184,134,63,0) 10deg,rgba(184,134,63,0) 45deg),
    radial-gradient(circle at 50% 50%,
      rgba(11,141,174,.30) 0%,rgba(11,141,174,.12) 46%,rgba(11,141,174,0) 74%);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,rgba(0,0,0,0) 0 20%,
    rgba(0,0,0,.75) 40%,#000 56%,rgba(0,0,0,.45) 70%,rgba(0,0,0,0) 84%);
  mask-image:radial-gradient(circle at 50% 50%,rgba(0,0,0,0) 0 20%,
    rgba(0,0,0,.75) 40%,#000 56%,rgba(0,0,0,.45) 70%,rgba(0,0,0,0) 84%);
  opacity:.9;animation:lpBloomOpen 30s ease-in-out infinite}

.hero .hero__media::after{
  background:
    radial-gradient(circle at 50% 50%,rgba(0,0,0,0) 0 45.6%,
      rgba(224,199,154,.34) 46% 47%,rgba(0,0,0,0) 47.4%),
    radial-gradient(circle at 50% 50%,rgba(0,0,0,0) 0 61.6%,
      rgba(166,214,227,.26) 62% 62.9%,rgba(0,0,0,0) 63.3%);
  opacity:.55;animation:lpBloomHalo 38s ease-in-out infinite}

@keyframes lpBloomOpen{
  0%,100%{transform:scale(.88);opacity:.55}
  50%{transform:scale(1.06);opacity:.95}}
@keyframes lpBloomHalo{
  0%,100%{transform:scale(.74);opacity:0}
  42%{opacity:.6}
  100%{transform:scale(1.16)}}

/* ---- pack cards ----------------------------------------------------------
   The engineering that shares ONE Add To Cart baseline across the three
   cards -- the fixed head, the fixed image box, the per-item min-height and
   the featured card raised with margin-top rather than transform -- is NOT
   touched here. Radius, shadow and colour only. */
/* The transition list repeats the reveal's own opacity and transform legs.
   `transition` is a shorthand and this selector outranks [data-reveal].in,
   so declaring box-shadow alone here would have quietly cancelled the
   rise-on-entry for exactly these three cards. */
body:has(.hero) .buy__card{border-radius:var(--lp-rc);box-shadow:var(--lp-d1);
  transition:box-shadow .25s ease,opacity .6s ease,
             transform .6s cubic-bezier(.2,.7,.2,1)}
body:has(.hero) .buy__card:hover{box-shadow:var(--lp-d2)}
body:has(.hero) .buy__head{border-radius:12px 12px 0 0}
/* the recommended tier: raised already, now a different colour as well --
   an accent wash falling out of the head into the body */
body:has(.hero) .buy__card--feature{box-shadow:var(--lp-d2);
  background-image:linear-gradient(180deg,var(--accent-tint) 0,var(--paper-card) 190px)}
body:has(.hero) .buy__card--feature .buy__add{
  background-image:linear-gradient(142deg,var(--slate-2) 0%,var(--slate-3) 55%,#12384c 100%)}
body:has(.hero) .buy__card--feature .buy__add:hover{
  background-image:linear-gradient(142deg,var(--accent) 0%,var(--accent-deep) 80%)}

/* ribbon, slot treatment "inset pill on a rule": the flag becomes a pill and
   a hairline runs the width of the head through its middle. The pill keeps
   its own box -- the ring is an inset shadow, not a border -- so no geometry
   moves and the card baselines are untouched. */
body:has(.hero) .buy__flag{position:relative;z-index:1;border-radius:999px;
  background:var(--gold-soft);color:var(--gold-deep);
  box-shadow:inset 0 0 0 1px var(--gold-line)}
body:has(.hero) .buy__card--feature .buy__flag{background:rgba(255,255,255,.94);
  color:var(--accent-deep);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
/* 34px is the measured centre of the flag pill inside the head, so the rule
   runs THROUGH it rather than near it. */
body:has(.hero) .buy__head::after{content:"";position:absolute;left:18px;right:18px;
  top:34px;height:1px;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(224,199,154,0),rgba(224,199,154,.5) 14%,
    rgba(224,199,154,.5) 86%,rgba(224,199,154,0))}
body:has(.hero) .buy__card--feature .buy__head::after{
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.45) 14%,
    rgba(255,255,255,.45) 86%,rgba(255,255,255,0))}

/* ---- the sticky buy bar and the masthead CTA on this page ---------------- */
body:has(.hero) .buybar{box-shadow:0 -1px 2px rgba(8,20,30,.18),
  0 -6px 14px rgba(8,20,30,.22),0 -20px 44px rgba(8,20,30,.26)}

@media(prefers-reduced-motion:reduce){
  .hero .hero__media::before,
  .hero .hero__media::after{animation:none!important;transform:none!important}
  .hero .btn:hover,
  body:has(.hero) .buy__add:hover,
  .hero .btn.btn--ghost:hover{transform:none!important}
  /* and hand the reveal's own reduced-motion rule back its authority */
  body:has(.hero) .buy__card{transition:none}
}
/*!SITE-HOME-PAINT-END*/
/* ==== 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 .disc{font-size:16px}
footer .fgrid h4{font-size:15px}
footer .fnap{font-size:16px}
footer .fpay{font-size:16px}
/* ==== end footer type floor ==== */

/* ==== modern surface (modern_surface.py) ==== */
/* House rule 11. This stylesheet had 20 box-shadow declaration(s)
   and 2 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 (22,37,46), 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{
  --radius:16px;
  --shadow:0 1px 2px rgba(22,37,46,.06), 0 6px 18px rgba(22,37,46,.07);
  --lift:0 2px 6px rgba(22,37,46,.09), 0 16px 34px rgba(22,37,46,.14);
}

/* 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. */
.card,
.step,
.keypoints,
.callout,
.alert,
.toc,
.byline,
.posts article,
.shots figure,
.badgewall figure,
.tablewrap,
.faq,
.ingcard,
.final,
.answer,
.whycard,
.article figure{border-radius:var(--radius)}

/* A surface a reader can click answers the pointer. 2px
   registers without reflowing the row beside it. */
.rel a,
.posts article,
.shots figure,
.badgewall figure{transition:box-shadow .2s ease, transform .2s ease}
.rel a:hover,
.posts article:hover,
.shots figure:hover,
.badgewall figure:hover{box-shadow:var(--lift);transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){
.rel a:hover,
.posts article:hover,
.shots figure:hover,
.badgewall figure:hover{transform:none}
}
/* ==== end modern surface ==== */
.review-foot{margin:0;padding:.6rem 0;font-size:.92rem}.review-foot a{font-weight:600}