/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Lora Fallback";src:local("Georgia");font-weight:400;size-adjust:106.10%;ascent-override:94.81%;descent-override:25.82%;line-gap-override:0.00%}
@font-face{font-family:"Lora Fallback";src:local("Georgia Bold");font-weight:600 900;size-adjust:93.61%;ascent-override:107.46%;descent-override:29.27%;line-gap-override:0.00%}
@font-face{font-family:"Be Vietnam Pro Fallback";src:local("Arial");font-weight:400;size-adjust:110.97%;ascent-override:90.11%;descent-override:23.88%;line-gap-override:0.00%}
@font-face{font-family:"Be Vietnam Pro Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:106.17%;ascent-override:94.19%;descent-override:24.96%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* ==========================================================================
   Gelatidedaily - gelatidedaily.com
   Component system taken from the UI reference at thedigestflow.com: a
   full-width gradient band behind the hero with white copy on it, translucent
   hairline pills, big soft-cornered offer cards, a pill CTA, an accordion FAQ
   and a dark stacked footer.
   Colour is NOT taken from that reference. It is derived from the product
   bottle in assets/: the violet label flame and wordmark (#6b2fa0), the deep
   plum of the listing panels (#241038) and the amber glass of the dropper
   bottle, on a linen ground.
   Type: Lora (display serif) + Be Vietnam Pro (body sans).

   CHROME FOR THIS SITE, per the corrected batch-4 slot:
     - ground  : linen, with a dark band behind the hero
     - header  : a DARK header that merges into the hero with no visible seam,
                 menu right-aligned
     - footer  : a large seal band above a single centred row of links
   The seam is removed by giving the masthead a flat --band fill and starting
   the hero's linear gradient on exactly that colour at 0%, with the radial
   pushed down to 46% so it contributes nothing at the top edge. Nothing on the
   header carries a bottom border. Scrolled, the sticky masthead stays --band
   over content that is lighter, which is a deliberate edge rather than a seam.

   CONTRAST NOTE. This site now has dark chrome AND a dark hero, so it is the
   one most exposed to pitfall 57. Every colour used on a dark surface is
   declared as its own --on-dark-* token rather than reusing --muted or
   --faint, which are tuned for the linen ground and fail WCAG AA on a dark
   block. The composited values were measured on a laid-out page, not assumed.
   `.hero a` is deliberately NOT a blanket rule: it used to repaint the hero's
   solid CTA lavender-on-violet at 4.1:1, which is pitfall 57's second half, a
   context rule undoing what the component already got right.

   HERO BAND vs HERO MOTIF. hero_motifs.py rewrites the .hero background into
   the critical block below, and for this motif the gradient's outer stops are
   the site's light ground, which would turn a dark band into a lavender wash.
   The band is therefore re-asserted at `#hero`, an id selector, so it survives
   every re-run of that shared tool without the tool being edited. The motif's
   own contribution -- the slow dissolving glow behind the dropper -- is left
   completely intact, because that is the part the estate uses to tell the
   three Gelatide sisters apart.
   ========================================================================== */

/* ---- DESIGN TOKENS -------------------------------------------------------- */
:root{
  /* ---- ground: linen ---- */
  --paper:#f7f3ec;
  --paper-tint:#eee7db;
  --paper-card:#fffdf8;
  --paper-deep:#e0d8c9;

  /* ---- ink ---- */
  --ink:#1e1327;
  --ink-dk:#150c1c;
  --ink-soft:#33253f;
  --muted:#4c4356;
  --faint:#5f5769;
  --line:#ddd4c4;
  --line-soft:#ece5d9;

  /* ---- accent, from the violet flame and wordmark on the label ---- */
  --accent:#6b2fa0;
  --accent-deep:#451e68;
  --accent-tint:#f1e9f8;
  --accent-line:#d6c2e8;
  --accent-glow:rgba(107,47,160,.18);

  /* ---- the dark plum band: masthead and hero are one surface ---- */
  --band:#241038;
  --band-2:#170a24;

  /* ---- text ON the dark surfaces: measured, not guessed (pitfall 57) ---- */
  --on-dark:#ffffff;
  --on-dark-body:#e2d8ec;
  --on-dark-soft:#c4b6d5;
  --on-dark-accent:#c9a9f0;
  --on-dark-line:rgba(255,255,255,.22);
  --on-dark-fill:rgba(255,255,255,.08);

  /* ---- secondary, from the amber glass of the dropper bottle ---- */
  --gold:#8a6729;
  --gold-deep:#6e5220;
  --gold-soft:#f5ecd8;
  --gold-line:#dcc79c;
  --gold-lite:#d9b36a;

  /* ---- type ---- */
  --display:'Lora','Lora Fallback',Georgia,'Times New Roman',serif;
  --serif:'Lora','Lora Fallback',Georgia,'Times New Roman',serif;
  --sans:'Be Vietnam Pro','Be Vietnam Pro Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* ---- metrics ---- */
  --wrap:1120px;
  --measure:760px;
  --measure-wide:980px;
  --r:5px;
  --r-s:3px;
  --r-l:9px;
  --radius:5px;
  --shadow:0 12px 34px rgba(30,19,39,.10);
  --shadow-sm:0 2px 10px rgba(30,19,39,.06);
  --shadow-lg:0 26px 60px rgba(30,19,39,.18);
}

/* ---- RESET AND BASE ------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box;min-width:0}
html{scroll-behavior:smooth;font-size:16px;scroll-padding-top:110px}
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:1rem}
img,svg,table,video{max-width:100%}
img{height:auto;display:block}
a{color:var(--accent);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.22;
  font-weight:600;letter-spacing:-.004em}
b,strong{color:var(--ink-soft)}

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

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

/* ---- 1. UTILITY BAR: the top of one continuous dark stack ---------------- */
.util{background:var(--band-2);color:var(--on-dark-soft);font-size:0.9062rem}
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;
  padding-block:9px}
.util__item{white-space:nowrap}
.util__item b{color:var(--on-dark);font-weight:600}
.util__tel{margin-left:auto;color:var(--on-dark);font-weight:700;white-space:nowrap}
.util__tel:hover{color:var(--on-dark-accent)}

/* ---- 2. NAV: dark, seamless into the hero, menu right-aligned ------------ */
/* No bottom border and no shadow: the masthead and the hero are one surface,
   and a hairline between them is exactly the seam this slot rules out. */
.nav{position:sticky;top:0;z-index:900;background:var(--band);border-bottom:0}
.nav__row{display:flex;align-items:center;gap:26px;padding-block:12px;
  flex-wrap:nowrap}
.brand{display:flex;align-items:center;gap:0;flex:none;text-align:center;
  flex-direction:column;margin-right:auto}
.brand:hover{text-decoration:none}
.brand svg{width:29px;height:29px;margin-bottom:3px}
/* brand_marks.py draws every non-"bare" glyph in #fff. The "stack"
   construction has no filled container, only a stroked ring, so the glyph
   depends entirely on the surface behind it. On this dark masthead white is
   correct and legible, but the rule stays explicit so a future change of
   header colour cannot make the mark disappear silently, which is pitfall 64
   recurring for a construction the original fix did not cover. */
.brand svg [fill="#fff"],.brand svg [fill="#FFF"],
.brand svg [fill="#ffffff"]{fill:var(--on-dark)}
.brand svg circle[stroke]{stroke:var(--on-dark-accent)}
.brand__firm{display:block;font-family:var(--sans);font-size:0.6875rem;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--on-dark-soft)}
.brand__prod{display:block;font-family:var(--display);font-size:1.34rem;font-weight:600;
  color:var(--on-dark);line-height:1.1;letter-spacing:.015em;white-space:nowrap}
.brand__prod span{color:var(--on-dark-accent)}
.nav__tel{flex:none;font-weight:600;font-size:0.875rem;color:var(--on-dark);
  white-space:nowrap;border-bottom:2px solid var(--on-dark-line);padding-block:3px}
.nav__tel:hover{border-color:var(--on-dark-accent);text-decoration:none}
.nav__cta{flex:none}
.burger{display:none;background:none;border:0;cursor:pointer;width:44px;
  min-height:44px;padding:8px;flex:none}
.burger span{display:block;height:2px;background:var(--on-dark);margin:5px 0;
  border-radius:2px}

/* the menu sits at the right of the same dark row */
.nav__bar{flex:none;margin-left:auto}
.navmenus{display:flex;justify-content:flex-end}
.menu{display:flex;align-items:center;gap:22px;flex-wrap:nowrap}
.menu a{font-family:var(--sans);font-size:0.875rem;font-weight:500;
  color:var(--on-dark-body);white-space:nowrap;position:relative;padding-block:6px;
  letter-spacing:.012em}
.menu a:hover{color:var(--on-dark);text-decoration:none}
.menu a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--on-dark-accent);transition:right .22s ease}
.menu a:hover::after,.menu a[aria-current]::after{right:0}

/* ---- 3. BUTTONS ---------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-weight:600;font-size:0.9375rem;line-height:1.2;
  padding:13px 28px;border-radius:999px;border:1px solid transparent;
  cursor:pointer;text-align:center;transition:transform .2s ease,box-shadow .2s ease,
  background .2s ease,color .2s ease}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn--cta{background:var(--accent);color:#fff;box-shadow:0 8px 24px var(--accent-glow)}
.btn--cta:hover{background:var(--accent-deep);color:#fff;
  box-shadow:0 14px 32px var(--accent-glow)}
.btn--ghost{background:transparent;color:var(--accent-deep);border-color:var(--accent-line)}
.btn--ghost:hover{border-color:var(--accent);background:var(--accent-tint)}
.btn--gold{background:var(--gold);color:#fff}
.btn--gold:hover{background:var(--gold-deep);color:#fff}
.btn--lg{padding:16px 34px;font-size:1.02rem}
.btn--block{display:flex;width:100%}

/* buttons sitting ON a dark surface */
.nav .btn--cta,.hero .btn--cta{background:var(--on-dark);color:var(--band-2);
  box-shadow:none}
.nav .btn--cta:hover,.hero .btn--cta:hover{background:var(--on-dark-accent);
  color:var(--band-2)}
.nav .btn--ghost,.hero .btn--ghost,footer .btn--ghost,
.promo .btn--ghost,.final .btn--ghost{color:var(--on-dark);
  border-color:var(--on-dark-line);background:var(--on-dark-fill)}
.nav .btn--ghost:hover,.hero .btn--ghost:hover,footer .btn--ghost:hover,
.promo .btn--ghost:hover,.final .btn--ghost:hover{border-color:var(--on-dark);
  background:rgba(255,255,255,.14);color:var(--on-dark)}

/* ---- 4. HERO: the same dark band, continued ----------------------------- */
/* The band is declared at #hero, an id, so the shared hero-motif tool can
   overwrite `.hero` on every run without the band coming off. The linear
   gradient opens on exactly the masthead's colour, and the radial sits at 46%
   so it adds nothing at the top edge: that is what removes the seam. */
.hero{position:relative;overflow-x:clip;overflow-y:visible;color:var(--on-dark-body);border-top:0}
#hero{background:
  radial-gradient(720px 520px at 74% 46%,rgba(107,47,160,.5),transparent 68%),
  linear-gradient(180deg,#241038 0%,#2c1444 34%,#170a24 100%)}
.hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;
  align-items:start;padding-block:46px 68px}
.hero h1,.hero h2,.hero h3{color:var(--on-dark)}
.hero p{color:var(--on-dark-body)}
.hero b,.hero strong{color:var(--on-dark)}
/* Scoped deliberately. A blanket `.hero a` beats `.btn--cta` on specificity
   and repainted the solid CTA lavender on violet at 4.1:1. */
.hero p a,.hero li a,.hero .answer a,.hero figcaption a{color:var(--on-dark-accent)}

.pill{display:inline-flex;align-items:center;gap:8px;background:var(--on-dark-fill);
  border:1px solid var(--on-dark-line);color:var(--on-dark);font-weight:600;
  font-size:0.8438rem;padding:7px 17px;border-radius:999px;letter-spacing:.05em;
  text-transform:uppercase}
.hero h1{font-size:clamp(2.05rem,4.2vw,3.1rem);margin:20px 0 0;font-weight:600;
  line-height:1.12}
.hero h1 span{color:var(--on-dark-accent)}
.hero h1 small{display:block;font-family:var(--sans);font-size:0.9375rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-soft);margin-top:13px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 0}
.hero__sub{margin:18px 0 0;font-size:1.02rem;max-width:58ch}

.ticks{margin:22px 0 0;display:grid;gap:10px}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-size:1.0625rem;
  color:var(--on-dark-body)}
.ck{flex:none;width:21px;height:21px;border-radius:50%;background:var(--accent);
  color:#fff;display:inline-flex;align-items:center;justify-content:center;
  font-size:.66rem;font-weight:700;margin-top:4px}
.hero .ck{background:var(--on-dark-accent);color:var(--band-2)}

.pay{display:flex;align-items:center;gap:13px;margin:20px 0 0;
  font-size:0.9062rem;color:var(--on-dark-soft)}
.pay img{width:200px;height:35px;object-fit:contain}

.factpills{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0 0}
.factpills li{background:var(--on-dark-fill);border:1px solid var(--on-dark-line);
  border-radius:999px;padding:7px 16px;font-size:0.9062rem;color:var(--on-dark-body)}
.factpills li b{color:var(--on-dark)}

.figures{display:grid;grid-template-columns:repeat(3,1fr);margin:26px 0 0;
  border-radius:var(--r);background:var(--on-dark-fill);overflow:hidden;
  border:1px solid var(--on-dark-line)}
.figures div{padding:16px 18px}
.figures div+div{border-left:1px solid var(--on-dark-line)}
.figures b{display:block;font-family:var(--display);font-size:1.78rem;line-height:1;
  color:var(--on-dark)}
.figures span{display:block;margin-top:6px;font-size:0.9062rem;color:var(--on-dark-body)}

.hero__media{position:relative}
.hero__stick{position:relative;display:block}
.hero__card{background:transparent;border-radius:var(--r-l);padding:10px;
  text-align:center}
.hero__card img{margin-inline:auto;max-width:100%;
  filter:drop-shadow(0 26px 40px rgba(0,0,0,.55))}
.hero__tag{position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);
  background:var(--on-dark);color:var(--band-2);font-size:0.9062rem;font-weight:700;
  letter-spacing:.09em;padding:7px 18px;border-radius:999px;white-space:nowrap}
.floaty{position:absolute;background:var(--band-2);border:1px solid var(--on-dark-line);
  border-radius:var(--r);padding:11px 16px;
  box-shadow:var(--shadow-lg);font-size:.95rem;font-weight:600;color:var(--on-dark);
  z-index:2;line-height:1.25}
.floaty small{display:block;color:var(--on-dark-accent);font-size:0.9062rem;
  letter-spacing:.09em;text-transform:uppercase;font-weight:700;margin-top:4px}
.floaty--tl{top:6px;left:-16px}
.floaty--br{bottom:30px;right:-16px}

/* The hero copy column is tall, so a statically placed shot strands itself
   beside the bottom of it. A sticky rail keeps the dropper next to whatever
   the reader is on. Offset by the masthead rather than by 0, and capped by
   height so it SCALES on a short laptop instead of being switched off by a
   min-height query (pitfalls #4 and #15). */
@media(min-width:1025px){
  .hero__media{position:sticky;top:112px;align-self:start;
    height:calc(100vh - 124px);min-height:340px;
    display:flex;align-items:flex-start;justify-content:center}
  .hero__stick{max-height:calc(100vh - 160px)}
  .hero__stick img{max-height:calc(100vh - 320px);min-height:180px;
    width:auto;object-fit:contain}
}

.hero__rating{display:flex;align-items:center;gap:10px;margin:18px 0 0;
  font-size:0.9375rem;color:var(--on-dark-soft);flex-wrap:wrap}
.hero__rating b{color:var(--on-dark)}
.rev__stars{color:var(--gold-deep);letter-spacing:1px}
.hero .rev__stars{color:var(--gold-lite)}

/* ---- 5. QUICK ANSWER (AEO) ---------------------------------------------- */
.answer{background:var(--paper-card);border-radius:var(--r);
  border:1px solid var(--line);border-top:3px solid var(--accent);
  padding:20px 24px;margin:22px 0 0}
/* In the hero the answer is not a card: the reference runs it as flowing copy
   under the H1. The wrapper stays -- it is the speakable selector -- but the
   card styling comes off so the dark band reads as one surface. */
.hero .answer{background:none;border:0;border-left:3px solid var(--on-dark-accent);
  border-radius:0;padding:2px 0 2px 20px;margin:20px 0 0}
.hero .answer .qtag{display:block;color:var(--on-dark-accent)}
.hero .answer p{font-size:1.0625rem;color:var(--on-dark-body);margin:0 0 .8em;
  max-width:56ch}
.hero .answer p:last-child{margin-bottom:0}
.hero .answer p b{color:var(--on-dark)}
.answer .qtag{display:block;font-family:var(--sans);font-weight:700;font-size:0.8438rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:.55em}
.answer p{margin:0;font-size:1.0625rem}

/* ---- 6. TRUST ROW -------------------------------------------------------- */
.trust{background:var(--paper-card);border-bottom:1px solid var(--line)}
.trust__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:26px 42px;padding-block:22px}
.trust__row figure{text-align:center;max-width:136px}
.trust__row img{margin-inline:auto}
.trust__row figcaption{font-size:0.9062rem;color:var(--faint);margin-top:8px;
  letter-spacing:.06em;text-transform:uppercase;font-weight:600}

/* ---- ABOVE-THE-FOLD RESPONSIVE -------------------------------------------
   The nav collapse and the hero's phone ordering decide what the first paint
   looks like, so they sit ABOVE the critical marker and are inlined into every
   page head. Below it, a phone would paint the hero in DOM order until the
   async stylesheet landed, which is a visible jump on the one screen that
   matters most. Everything else responsive is at the foot of this file.

   The row SHEDS rather than wraps (pitfall 16): gaps tighten twice, the phone
   goes at 1240, the menu collapses to the panel at 1120, the CTA goes at 430.
   Nav height must read the same at 1180 / 1260 / 1360 / 1500. */
@media(max-width:1440px){.menu{gap:18px}.menu a{font-size:0.8438rem}
  .nav__row{gap:20px}}
@media(max-width:1340px){.menu{gap:14px}.menu a{font-size:0.8125rem}
  .nav__row{gap:16px}}
@media(max-width:1240px){.nav__tel{display:none}}
@media(max-width:1120px){
  .nav__row{justify-content:space-between;gap:14px}
  /* flex-direction is deliberately NOT set here: brand_marks.py appends an
     unconditioned .brand{flex-direction:column} for the "stack" construction
     at the foot of this file, so a row here would be dead CSS. The mark stays
     stacked at every width, which is what the construction is for. */
  .brand{margin-right:0;gap:2px;align-items:center;text-align:center}
  .nav__bar{position:fixed;inset:0 0 0 auto;width:min(320px,86vw);
    background:var(--band-2);padding:86px 24px 26px;transform:translateX(102%);
    transition:transform .28s ease;z-index:940;box-shadow:var(--shadow-lg);
    overflow-y:auto;margin-left:0}
  .nav__bar.open{transform:translateX(0)}
  .navmenus{display:block}
  .menu{flex-direction:column;align-items:flex-start;gap:2px}
  .menu a{font-size:1rem;padding-block:11px;width:100%;color:var(--on-dark-body)}
  .menu a::after{display:none}
  .burger{display:block;order:3}
}
@media(max-width:920px){
  .hero__grid{grid-template-columns:1fr;gap:26px;padding-block:30px 52px}
  /* 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;justify-self:start}
  .hero__copy>h1{order:2}
  .hero__media{order:3}
  .hero__copy>.answer{order:4}
  .hero__copy>.hero__cta{order:5}
  .hero__copy>.hero__rating{order:6}
  .hero__copy>.pay{order:7}
  .hero__copy>.hero__sub{order:8}
  .hero__copy>.ticks{order:9}
  .hero__copy>.factpills{order:10}
  .hero__copy>.figures{order:11}
  .hero__card img{max-width:232px}
  .floaty{display:none}
  .util__item:nth-child(3),.util__item:nth-child(4){display:none}
}
@media(max-width:700px){
  .hero h1{font-size:2rem}
  .figures{grid-template-columns:1fr}
  .figures div+div{border-left:0;border-top:1px solid var(--on-dark-line)}
}
@media(max-width:430px){
  .nav__cta .btn{display:none}
  .util__item:nth-child(2){display:none}
}


/* ---- hero motif -- slow-dissolve ---------------------------------------- */
.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(118% 88% at 68% 32%,#461f68,#2c183d 54%,#1e1327)}.hero__media::before{content:'';position:absolute;left:50%;top:0;width:150%;aspect-ratio:1;translate:-50% -25%;border-radius:50%;background:radial-gradient(50% 50% at 50% 50%,rgba(107,47,160,0.58),transparent 70%);filter:blur(20px);animation:gdDissolve 17s ease-in-out infinite;z-index:1}@keyframes gdDissolve{0%,100%{scale:.88;opacity:.34}50%{scale:1.12;opacity:.72}}
@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. */
@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 PAGE ONLY, box-moving half. Scope is body:has(.hero): .hero is on
   index.html and on no other page of this site, while .btn, .card, .tier,
   the masthead and the footer are on ~30 others that must not move.
   Everything here changes geometry, so it sits above the critical marker and
   is inlined into every page head at build time; it simply matches nothing
   away from the home page. Slot: settle / card 18 / control 12 / single soft
   lift / corner flag. */

/* MOTIF -- "settle": one very slow halo that breathes in and comes to rest.
   It lives on a pseudo-element of the media column, never on the hero <img>,
   which is the preloaded LCP element. Sized at 168% of that column so it
   reads OUTSIDE the product card instead of being hidden under it. The
   keyframe name is new: gdDissolve is already taken by the band motif on
   ::before, which is what tells the three Gelatide sisters apart and is left
   untouched. transform + opacity only. */
body:has(.hero) .hero__media::after{content:'';position:absolute;left:50%;top:50%;
  width:168%;aspect-ratio:1;max-width:none;border-radius:50%;pointer-events:none;
  z-index:0;opacity:.62;transform:translate(-50%,-50%) scale(1);
  background:radial-gradient(closest-side,transparent 50%,rgba(201,169,240,.22) 66%,
  rgba(107,47,160,.34) 79%,rgba(107,47,160,.06) 90%,transparent 97%);
  filter:blur(18px);
  animation:gdHaloSettle 11s cubic-bezier(.17,.62,.26,1) both}
@keyframes gdHaloSettle{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.78)}
  44%{opacity:.92;transform:translate(-50%,-50%) scale(1.10)}
  76%{opacity:.54;transform:translate(-50%,-50%) scale(.985)}
  100%{opacity:.62;transform:translate(-50%,-50%) scale(1)}}
@media(prefers-reduced-motion:reduce){
  body:has(.hero) .hero__media::after{animation:none;opacity:.62;
    transform:translate(-50%,-50%) scale(1)}}

/* THE BUY BUTTON ON THE FIRST SCREEN. Measured at 1440 wide: the hero CTA
   ran 882 -> 936, so 36px of the button hung below a 900px fold and the
   money page's first screen had nothing whole to click. The DOM order was
   already eyebrow / headline / quick answer / buttons, so the fix is type
   and not sequence: the 3.1rem H1 set FIVE lines in a 565px column, which is
   where the 900px went. At 2.85rem it sets four, the Quick Answer runs at
   16px, and the three gaps above the button tighten. Measured again:
   737 -> 790, with the secondary whole at 802 -> 856.
   Selectors that start .hero / .hero__ are home-only on this site by
   construction -- index.html is the only page carrying that markup.
   Desktop only: below 921px the phone hero is composed separately with
   display:contents and is left exactly as it was. */
@media(min-width:921px){
  .hero__grid{padding-block:32px 68px}
  .hero h1{font-size:clamp(2.05rem,4.2vw,2.85rem);margin-top:14px}
  .hero .answer{margin-top:16px}
  .hero .answer p{font-size:1rem}
  .hero__cta{margin-top:18px}
  /* Reading order: eyebrow, headline, quick answer, THE BUTTONS, the payment
     line, then the evidence. Only .pay actually moves; the column has to be
     a flex box for order to apply at all, and the pill has to keep its own
     width once it is a flex item rather than an inline-flex box on a line. */
  .hero__copy{display:flex;flex-direction:column;align-items:stretch}
  .hero__copy>.pill{order:1;align-self:flex-start}
  .hero__copy>h1{order:2}
  .hero__copy>.answer{order:3}
  .hero__copy>.hero__cta{order:4}
  .hero__copy>.pay{order:5;margin-top:16px}
  .hero__copy>.hero__rating{order:6}
  .hero__copy>.factpills{order:7}
  .hero__copy>.figures{order:8}
  .hero__copy>.ticks{order:9}
}

/* PRICING -- the recommended tier is raised with a negative margin-top and
   NOT with transform: the reveal pass sets transform:none on .in, and the
   grid is align-items:stretch, so a negative top margin lifts the head while
   the bottom edge stays put and all three Add To Cart buttons keep the one
   baseline pack_cards.py engineered. Reset where the grid stacks. */
body:has(.hero) .tier--feature{margin-top:-16px}
body:has(.hero) .tier__rows span+span{border-top:1px dashed var(--line);
  padding-top:6px}
@media(max-width:920px){body:has(.hero) .tier--feature{margin-top:0}}

/* The corner flag's offsets and padding. Absolutely positioned, so it
   reflows nothing, but it is geometry and is kept on this side of the
   marker with the rest of it. It hangs OFF the top-right corner rather than
   sitting inside it: measured at 1440, an inside flag ran from x=210 to the
   card edge and covered 36px of the "Three bottles" and "Six bottles"
   headings. At top:-13px the flag clears the h3 by 7px on both cards. */
body:has(.hero) .tier__flag{top:-13px;left:auto;right:-9px;transform:none;
  padding:6px 15px 6px 19px}
/*!SITE-HOME-CRIT-END*/

/*!CRITICAL-END*/

/* ---- 7. SECTIONS --------------------------------------------------------- */
.sec{padding-block:64px}
.sec--tight{padding-block:40px}
.sec--tint{background:var(--paper-tint)}
.sec--white{background:var(--paper-card)}
.sec--center .sec__head{text-align:center;margin-inline:auto}
.sec__head{max-width:var(--measure-wide);margin-bottom:34px}
.eyebrow{display:inline-block;font-family:var(--sans);font-size:0.8438rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.rule{display:block;width:46px;height:3px;background:var(--gold);border-radius:2px;
  margin-bottom:14px}
.sec--center .rule{margin-inline:auto}
.sec h2{font-size:clamp(1.6rem,2.9vw,2.26rem);margin-bottom:12px}
.sec h3{font-size:1.2rem;margin-bottom:8px}
.lead{font-size:1.07rem;color:var(--muted)}
.note{font-size:0.9062rem;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>ul,.sec>.wrap>ol{padding-left:0}
.sec ol{counter-reset:n;display:grid;gap:11px}
.sec>.wrap>ol>li{position:relative;padding-left:34px;counter-increment:n}
.sec>.wrap>ol>li::before{content:counter(n);position:absolute;left:0;top:2px;
  width:24px;height:24px;border-radius:50%;background:var(--accent-tint);
  color:var(--accent-deep);font-size:1.0625rem;font-weight:700;display:flex;
  align-items:center;justify-content:center;font-family:var(--sans)}
.dropcap::first-letter{float:left;font-family:var(--display);font-size:3.3rem;
  line-height:.88;font-weight:600;color:var(--accent);padding:6px 12px 0 0}

.pullquote{border-left:3px solid var(--gold);padding:6px 0 6px 22px;margin:26px auto}
.pullquote p{font-family:var(--display);font-size:1.22rem;color:var(--ink);
  line-height:1.45}
.pullquote cite{display:block;margin-top:9px;font-style:normal;font-size:0.8438rem;
  color:var(--faint);letter-spacing:.06em;text-transform:uppercase;font-weight:600}

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

/* ---- 8. CARDS, GRIDS ----------------------------------------------------- */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--paper-card);border-radius:var(--r);padding:26px 24px;
  border:1px solid var(--line);border-top:3px solid var(--accent-line);
  transition:border-color .22s ease}
.card:hover{border-top-color:var(--accent)}
.card h3{font-size:1.14rem}
.card p{font-size:1.0625rem;color:var(--faint)}
.card p+p{margin-top:.8em}

.steps{display:grid;gap:16px;counter-reset:s}
.step{background:var(--paper-card);border-radius:var(--r);padding:24px 26px 24px 70px;
  position:relative;border:1px solid var(--line);counter-increment:s}
.step__n{position:absolute;left:22px;top:24px;width:34px;height:34px;border-radius:50%;
  background:var(--accent);color:#fff;display:flex;align-items:center;
  justify-content:center;font-family:var(--display);font-weight:600;font-size:1rem}
.step__n::before{content:counter(s)}
.step h3{font-size:1.1rem}
.step p{font-size:1.0625rem;color:var(--faint)}

.chips{display:grid;gap:10px;margin:18px 0 0}
.chips li{display:flex;gap:11px;align-items:flex-start;font-size:0.9688rem}
.chips .ck{background:var(--gold);color:#fff;font-size:0.8125rem}

.callout{background:var(--accent-tint);border-left:4px solid var(--accent);
  border-radius:0 var(--r) var(--r) 0;padding:18px 22px;margin:24px auto;
  font-size:.97rem}
.callout p+p{margin-top:.8em}
.alert{background:var(--gold-soft);border-left:4px solid var(--gold);
  border-radius:0 var(--r) var(--r) 0;padding:18px 22px;margin:24px auto;
  font-size:.96rem}
.alert p+p{margin-top:.8em}
.flag{display:inline-block;background:var(--gold);color:#fff;font-size:0.8438rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 11px;
  border-radius:999px}

/* ---- 9. TABLES ----------------------------------------------------------- */
.tablewrap{overflow-x:auto;background:var(--paper-card);border-radius:var(--r);
  border:1px solid var(--line);margin:22px auto}
table.dtable{width:100%;border-collapse:collapse;font-size:1rem;min-width:520px}
.dtable caption{text-align:left;padding:16px 20px 0;font-family:var(--display);
  font-weight:600;color:var(--ink);font-size:1.02rem}
.dtable th,.dtable td{padding:12px 20px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line-soft)}
.dtable thead th{background:var(--accent-tint);color:var(--accent-deep);
  font-size:0.9062rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
  font-family:var(--sans)}
.dtable tbody tr:last-child td{border-bottom:0}
.dtable td b{color:var(--ink)}

/* ---- 10. SPLIT ----------------------------------------------------------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:42px;align-items:center}
.split--rev{grid-template-columns:.95fr 1.05fr}
.split__media{text-align:center}
.split__media img{margin-inline:auto;border-radius:var(--r)}

/* ---- 11. SHOTS: images that carry content -------------------------------- */
.shots{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:8px}
.shots--wide{grid-template-columns:repeat(3,1fr)}
.shots figure{background:var(--paper-card);border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line)}
.shots img{width:100%}
.shots figcaption{padding:18px 20px;font-size:0.9062rem;color:var(--faint)}
.shots figcaption b{display:block;font-family:var(--display);font-size:1.05rem;
  color:var(--ink);margin-bottom:6px}

/* ---- 12. PROMO / STATS / BADGEWALL --------------------------------------- */
.promo{background:var(--band);color:var(--on-dark-body);
  border-radius:var(--r-l);padding:30px 34px;display:grid;
  grid-template-columns:1fr auto;gap:24px;align-items:center}
.promo p{margin:0;color:var(--on-dark-body)}
.promo b{color:var(--on-dark)}
.promo a{color:var(--on-dark-accent)}
.promo .btn--gold{color:#fff}
.stats{background:var(--band);border-radius:var(--r-l);padding:34px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;text-align:center}
.stats b{display:block;font-family:var(--display);font-size:2.1rem;color:var(--on-dark);
  line-height:1}
.stats span{display:block;margin-top:8px;font-size:0.9062rem;color:var(--on-dark-body)}
.badgewall{display:grid;grid-template-columns:repeat(5,1fr);gap:22px}
.badgewall figure{background:var(--paper-card);border-radius:var(--r);padding:20px 14px;
  text-align:center;border:1px solid var(--line)}
.badgewall img{margin:0 auto 10px}
.badgewall figcaption{font-size:0.8438rem;color:var(--faint)}
.badgewall figcaption b{display:block;color:var(--ink);font-size:.88rem;
  margin-bottom:4px;font-family:var(--display)}

/* ---- 13. WHY / WHOFOR ---------------------------------------------------- */
.whygrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.whycard{background:var(--paper-card);border-radius:var(--r);padding:26px 24px;
  border:1px solid var(--line);border-top:3px solid var(--accent)}
.whycard h3{font-size:1.1rem}
.whycard p{font-size:1.0625rem;color:var(--faint)}
.whofor{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.forlist{background:var(--paper-card);border-radius:var(--r);padding:26px;
  border:1px solid var(--line)}
.forlist h3{font-size:1.1rem;margin-bottom:12px}
.forlist li{display:flex;gap:10px;font-size:1.0625rem;margin-bottom:9px}
.forlist li::before{content:"\2022";color:var(--accent);font-weight:700}

/* ---- 14. INGREDIENTS / FACTS PANEL --------------------------------------- */
.ing{display:grid;gap:22px}
.ingcard{background:var(--paper-card);border-radius:var(--r);padding:28px;
  border:1px solid var(--line);position:relative}
.ingcard h3{font-size:1.24rem;margin-bottom:4px}
.ingcard .ingsub{font-size:0.9062rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);font-weight:700;margin-bottom:12px;display:block}
.ingcard p{font-size:1.0625rem}
.ingcard p+p{margin-top:.85em}
.ingthumbs{display:flex;flex-wrap:wrap;gap:14px;margin-top:18px}
.ingthumbs img{border-radius:var(--r-s)}
.facts{background:var(--paper-card);border-radius:var(--r);border:1px solid var(--line);
  overflow:hidden;max-width:560px;margin-inline:auto}
.facts__h{background:var(--ink);color:#fff;padding:14px 22px;font-family:var(--display);
  font-size:1.16rem;font-weight:600}
.facts__h a{color:var(--on-dark-accent)}
.facttab{width:100%;border-collapse:collapse;font-size:1rem}
.facttab th,.facttab td{padding:11px 22px;border-bottom:1px solid var(--line-soft);
  text-align:left}
.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}

/* ---- 15. QA record sheet ------------------------------------------------- */
.qa{background:var(--paper-card);border-radius:var(--r);border:1px solid var(--line);
  overflow:hidden;max-width:900px;margin-inline:auto}
.qa__h{background:var(--accent-tint);padding:16px 24px;font-family:var(--display);
  font-weight:600;font-size:1.06rem;color:var(--ink)}
.qa dl{margin:0;display:grid;grid-template-columns:32% 1fr}
.qa dt,.qa dd{padding:13px 24px;border-bottom:1px solid var(--line-soft);margin:0}
.qa dt{font-weight:700;color:var(--ink);font-size:1.0625rem;letter-spacing:.07em;
  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}

/* ---- 16. PRICING --------------------------------------------------------- */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.tier{background:var(--paper-card);border-radius:var(--r);padding:30px 24px;
  text-align:center;position:relative;border:1px solid var(--line);
  display:flex;flex-direction:column}
.tier--feature{border-color:var(--accent);border-width:2px;
  box-shadow:0 18px 44px var(--accent-glow)}
.tier__flag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--accent);color:#fff;font-size:0.8438rem;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;padding:5px 15px;border-radius:999px;
  white-space:nowrap}
.tier h3{font-size:1.36rem;margin-bottom:2px}
.tier__supply{font-size:0.8438rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);font-weight:600;margin-bottom:14px}
.tier img{margin:0 auto 14px}
.tier__price{font-family:var(--display);font-size:1.6rem;font-weight:600;
  color:var(--accent-deep);line-height:1.25;margin-bottom:6px}
.tier__price small{display:block;font-family:var(--sans);font-size:0.9062rem;
  font-weight:600;color:var(--faint);letter-spacing:.04em;margin-top:4px}
.tier__rows{font-size:0.9062rem;color:var(--faint);margin-bottom:18px;
  display:grid;gap:5px}
.tier .btn{margin-top:auto}
.guarantee{display:grid;grid-template-columns:.6fr 1.4fr;gap:34px;align-items:center;
  background:var(--paper-card);border-radius:var(--r);padding:30px;
  border:1px solid var(--line)}
.guarantee img{margin-inline:auto}
.guarantee h3{font-size:1.4rem;margin-bottom:12px}

/* ---- 17. REVIEWS --------------------------------------------------------- */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tcard{background:var(--paper-card);border-radius:var(--r);padding:24px;
  border:1px solid var(--line)}
.tcard .stars{color:var(--gold-deep);letter-spacing:1px;font-size:.92rem}
.tcard b{display:block;margin-top:8px;font-family:var(--display);font-size:1.04rem;
  color:var(--ink)}
.tcard span{font-size:0.9062rem;color:var(--faint)}
.tcard p{font-size:1.0625rem;margin-top:10px}
.tlife{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tlife figure{background:var(--paper-card);border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line)}
.tlife figcaption{padding:14px 16px;font-size:0.9062rem;color:var(--faint)}
.bars{display:grid;gap:9px;max-width:460px}
.bar{display:grid;grid-template-columns:58px 1fr 52px;gap:12px;align-items:center;
  font-size:0.9062rem;color:var(--faint)}
.bar__t{height:9px;background:var(--paper-deep);border-radius:5px;overflow:hidden}
.bar__f{display:block;height:100%;background:var(--accent);border-radius:5px}
.dist{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;
  background:var(--paper-card);border-radius:var(--r);padding:28px;
  border:1px solid var(--line)}

/* ---- 18. FAQ ------------------------------------------------------------- */
.faq{display:grid;gap:11px;text-align:left}
.faq details{background:var(--paper-card);border-radius:var(--r);
  border:1px solid var(--line);overflow:hidden}
.faq summary{padding:16px 22px;font-family:var(--display);font-weight:600;
  color:var(--ink);cursor:pointer;font-size:1.04rem;list-style:none;
  display:flex;justify-content:space-between;gap:14px;align-items:center;
  min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-size:1.4rem;flex:none}
.faq details[open] summary::after{content:"\2013"}
.faq__b{padding:0 22px 18px;font-size:.95rem}
.faq__b p+p{margin-top:.8em}

/* ---- 19. REFS, BYLINE ---------------------------------------------------- */
.refs{background:var(--paper-card);border-radius:var(--r);padding:24px 26px;
  border:1px solid var(--line)}
.refs h2{font-size:1.16rem;margin-bottom:12px}
.refs ol{counter-reset:r;display:grid;gap:9px}
.refs li{counter-increment:r;position:relative;padding-left:28px;font-size:1.0625rem;
  color:var(--faint);line-height:1.6}
.refs li::before{content:counter(r) ".";position:absolute;left:0;font-weight:700;
  color:var(--accent)}
.refs a{word-break:break-word}
.byline{display:grid;grid-template-columns:auto 1fr;gap:20px;
  background:var(--paper-card);border-radius:var(--r);padding:24px 26px;
  border:1px solid var(--line);margin:26px auto 0}
.byline img{border-radius:50%;flex:none}
.byline b{font-family:var(--display);font-size:1.06rem;color:var(--ink);display:block;
  margin-bottom:7px}
.byline p{font-size:0.9062rem;color:var(--faint)}

/* ---- 20. FORMS ----------------------------------------------------------- */
.form{display:grid;gap:22px;grid-template-columns:repeat(2,1fr)}
.formcard{background:var(--paper-card);border-radius:var(--r);padding:26px;
  border:1px solid var(--line)}
.formcard h3{font-size:1.14rem;margin-bottom:6px}
.formcard label{display:block;font-size:0.8438rem;font-weight:600;color:var(--ink-soft);
  margin:14px 0 5px}
.formcard input,.formcard textarea,.formcard select{width:100%;padding:11px 14px;
  border:1px solid var(--line);border-radius:var(--r-s);font-family:var(--sans);
  font-size:1rem;color:var(--ink);background:var(--paper)}
.formcard textarea{min-height:120px;resize:vertical}
.formcard .btn{margin-top:18px}

/* ---- 21. FINAL CTA / RELATED --------------------------------------------- */
.final{background:var(--band);border-radius:var(--r-l);padding:38px 40px;
  color:var(--on-dark-body)}
.final h2{color:var(--on-dark);font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:12px}
.final p{color:var(--on-dark-body)}
.final--media{display:grid;grid-template-columns:300px minmax(0,1fr);gap:34px;
  align-items:center}
.final--media .final__img img{width:100%;height:auto;margin-inline:auto}
.final__price{font-family:var(--display);font-size:1.28rem;color:var(--on-dark);
  margin:14px 0 18px}
.final .btn--cta{background:var(--on-dark);color:var(--band-2)}
.final .btn--cta:hover{background:var(--on-dark-accent);color:var(--band-2)}
.final p a{color:var(--on-dark-accent)}
.rel{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;text-align:left}
.rel a{background:var(--paper-card);border-radius:var(--r);padding:22px;display:block;
  border:1px solid var(--line);transition:border-color .2s ease,transform .2s ease}
.rel a:hover{transform:translateY(-4px);border-color:var(--accent);text-decoration:none}
.rel b{display:block;font-family:var(--display);font-size:1.06rem;color:var(--ink);
  margin-bottom:6px}
.rel span{font-size:.88rem;color:var(--faint)}

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

/* ---- 23. FOOTER: a large seal band above one centred row of links -------- */
footer{background:var(--band-2);color:var(--on-dark-soft);padding-block:0 22px;
  font-size:0.9062rem}
footer a{color:var(--on-dark-body)}
footer a:hover{color:var(--on-dark)}
.fseal{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:16px;padding-block:52px 44px;border-bottom:1px solid var(--on-dark-line);
  margin-bottom:34px}
.fseal img{margin-inline:auto}
.fseal__t{max-width:660px}
.fseal__t b{display:block;font-family:var(--display);font-size:1.62rem;
  color:var(--on-dark);margin-bottom:10px;line-height:1.25}
.fseal__t p{font-size:1.0625rem;color:var(--on-dark-body)}
.fbrand{font-family:var(--display);font-size:1.62rem;color:var(--on-dark);
  text-align:center;margin-bottom:6px}
.fbrand span{color:var(--on-dark-accent)}
.frole{text-align:center;font-size:0.9062rem;color:var(--on-dark-soft);
  margin-bottom:24px}
.flinks{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;
  padding-bottom:26px;border-bottom:1px solid var(--on-dark-line);
  margin:0 auto;max-width:960px}
.flinks li{font-size:1.062rem;line-height:1.5}
.flinks a{white-space:nowrap}
.fbadges{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
  padding-block:24px}
.fnap{padding-block:20px;border-top:1px solid var(--on-dark-line);
  border-bottom:1px solid var(--on-dark-line);font-size:0.9062rem;line-height:1.75;
  text-align:center}
.fnap strong{color:var(--on-dark)}
.fpay{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:16px;padding-block:18px;font-size:0.9062rem;text-align:center}
.disc{padding-top:18px;font-size:0.9062rem;line-height:1.68;color:var(--on-dark-soft)}
.disc p{margin-bottom:.9em}
.disc b{color:var(--on-dark)}
.disc a{color:var(--on-dark-accent)}
.disc .copy{margin-top:16px;color:var(--on-dark-soft);text-align:center}

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

/* ---- 25. BLOG ------------------------------------------------------------ */
.article{max-width:768px}
.article h1{font-size:clamp(1.9rem,3.8vw,2.66rem);margin-bottom:14px}
.article h2{font-size:1.5rem;margin:1.9em 0 .6em;scroll-margin-top:110px}
.article h3{font-size:1.16rem;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:22px;margin-bottom:8px}
.article ul li::before{content:"\2022";position:absolute;left:4px;color:var(--accent);
  font-weight:700}
.article ol{counter-reset:ai}
.article ol li{position:relative;padding-left:30px;margin-bottom:8px;counter-increment:ai}
.article ol li::before{content:counter(ai) ".";position:absolute;left:0;
  color:var(--accent);font-weight:700}
.article figure{margin:1.6em 0}
.article figure img{width:100%;border-radius:var(--r)}
.article figure.portrait img{width:100%;max-width:var(--figw,440px);margin-inline:auto}
.article figcaption{font-size:0.9062rem;color:var(--faint);margin-top:9px;
  border-left:2px solid var(--gold);padding-inline-start:12px}
.postmeta{display:flex;flex-wrap:wrap;gap:8px 12px;font-size:0.9062rem;
  color:var(--faint);padding-block:12px;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);margin-bottom:26px}
.postmeta b{color:var(--ink-soft)}
.postmeta .sep{color:var(--faint)}
.toc{background:var(--paper-card);border-radius:var(--r);padding:20px 24px;
  margin-bottom:26px;border:1px solid var(--line)}
.toc h2{font-size:0.8438rem;letter-spacing:.18em;text-transform:uppercase;
  font-family:var(--sans);color:var(--accent);margin:0 0 10px}
.toc ol{counter-reset:t;display:grid;gap:6px}
.toc li{counter-increment:t;position:relative;padding-left:26px;font-size:1.0625rem}
.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);
  border-radius:0 var(--r) var(--r) 0;padding:20px 24px;margin-bottom:24px}
.keypoints>b{display:block;font-family:var(--sans);font-size:0.8438rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.keypoints li b{color:var(--accent-deep)}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.posts article{background:var(--paper-card);border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);transition:transform .2s ease,border-color .2s ease}
.posts article:hover{transform:translateY(-4px);border-color:var(--accent)}
.posts img{width:100%}
.posts .pbody{padding:20px 22px}
.posts h3{font-size:1.1rem;margin-bottom:8px}
.posts p{font-size:1.0625rem;color:var(--faint)}
.posts .pmeta{font-size:0.9062rem;color:var(--faint);margin-top:12px;
  letter-spacing:.05em;text-transform:uppercase;font-weight:600}
/* A shared component in a narrower column is a new component (pitfall 24).
   The prose column is 768px where the page wrap is 1120px, so the closing CTA
   needs its own geometry here, and a third set again on a phone. */
.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.6rem;line-height:1.22;margin-top:0}
@media(max-width:760px){
  .article .final--media{grid-template-columns:1fr;gap:16px;padding:24px 22px;
    text-align:center}
  .article .final--media .final__img img{max-width:128px;margin-inline:auto}
  .article .final--media h2{font-size:1.32rem}
  .article .final--media .btn{width:100%}
}
/* A later context rule at equal specificity repaints a dark block (pitfall 57),
   so the dark CTA re-asserts itself with its container as an ancestor. */
.final p,.article .final p{color:var(--on-dark-body)}
.final__price,.article .final .final__price{color:var(--on-dark)}
.article .refs{margin-top:2em}
.article .refs h2{margin-top:0}

/* ---- 26. MOTION: reveal on scroll ---------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(16px)}
[data-reveal].in{opacity:1;transform:none;
  transition:opacity .55s ease,transform .55s ease}
@media(prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal].in{opacity:1;transform:none;transition:none}
  .btn:hover,.card:hover,.rel a:hover,.posts article:hover{transform:none}
  html{scroll-behavior:auto}
}

/* ---- 27. RESPONSIVE ------------------------------------------------------ */
@media(max-width:1060px){
  .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>.tablewrap,.sec>.wrap>.faq,.sec>.wrap>.steps{max-width:none}
}
@media(max-width:1024px){
  .badgewall{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:920px){
  .split,.split--rev,.guarantee,.dist,.form{grid-template-columns:1fr;gap:26px}
  .promo{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .g3,.g4,.whygrid,.tgrid,.tlife,.rel,.posts{grid-template-columns:repeat(2,1fr)}
  .pricing{grid-template-columns:1fr;max-width:430px;margin-inline:auto}
  .pricing .tier:nth-child(1){order:3}
  .pricing .tier:nth-child(2){order:1}
  .pricing .tier:nth-child(3){order:2}
  .tier--feature{transform:none}
  .final--media{grid-template-columns:1fr;gap:22px}
  .fseal{padding-block:40px 34px}
}
@media(max-width:700px){
  .sec{padding-block:46px}
  .g2,.g3,.g4,.whygrid,.whofor,.tgrid,.tlife,.rel,.posts,.shots,.shots--wide,
  .badgewall{grid-template-columns: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:28px 24px}
  .fseal__t b{font-size:1.36rem}
}
/* Tap target: a button on a phone must be reachable with a thumb. */
@media(max-width:600px){.btn{min-height:44px}}
/* brand mark: stack construction */
.brand{flex-direction:column;align-items:center;gap:4px;text-align:center}.brand svg{width:26px;height:26px;margin-right:0!important}


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

/* --- 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 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,#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 PAGE ONLY, paint half: radius, shadow, gradient, colour, transition,
   focus. Same body:has(.hero) scope as the block above the critical marker.

   The tokens are redeclared on <body> rather than on :root on purpose.
   modern_surface.py and footer_type.py re-append their own blocks after this
   one on every build, and modern_surface sets --radius/--shadow/--lift in a
   :root block. A declaration on <body> is nearer in the inheritance chain
   than one on <html>, so every descendant resolves these values without this
   block having to win on source order. */
body:has(.hero){
  --radius:18px;      /* slot radius_card  */
  --r-ctl:12px;       /* slot radius_control */
  --shadow:0 12px 30px rgba(30,19,39,.11);   /* slot depth: one soft lift, */
  --lift:0 18px 40px rgba(30,19,39,.18);     /* no contact stop, own ink   */
}

/* Controls at 12px. This template shipped every button as a 999px pill. */
body:has(.hero) .btn{border-radius:var(--r-ctl)}
body:has(.hero) input,
body:has(.hero) select,
body:has(.hero) textarea{border-radius:var(--r-ctl)}

/* One gradient, on the buying CTA only; the secondary is left a flat outline
   so the pair reads as two weights. Two families, because four of these sit
   on the dark plum band where the CTA is white and has to stay white --
   a purple fill there would land dark text on a dark ground. */
body:has(.hero) .btn--cta{
  background-image:linear-gradient(135deg,#8845c4 0%,var(--accent) 48%,var(--accent-deep) 100%);
  box-shadow:0 12px 30px rgba(107,47,160,.30)}
body:has(.hero) .btn--cta:hover{
  background-image:linear-gradient(135deg,#7a37b3 0%,var(--accent-deep) 100%);
  box-shadow:0 18px 40px rgba(107,47,160,.38)}
body:has(.hero) .nav .btn--cta,
body:has(.hero) .hero .btn--cta,
body:has(.hero) .final .btn--cta,
body:has(.hero) .buybar .btn--cta{
  background-image:linear-gradient(135deg,#fff 0%,#f3eafd 58%,#e6d7f9 100%);
  box-shadow:0 12px 30px rgba(0,0,0,.34)}
body:has(.hero) .nav .btn--cta:hover,
body:has(.hero) .hero .btn--cta:hover,
body:has(.hero) .final .btn--cta:hover,
body:has(.hero) .buybar .btn--cta:hover{
  background-image:linear-gradient(135deg,#fff 0%,#eaddfb 55%,#d7bff4 100%);
  box-shadow:0 18px 40px rgba(0,0,0,.42)}
body:has(.hero) .btn--ghost{background-image:none;box-shadow:none}

/* A clickable surface answers the pointer, and the keyboard gets the same
   ring the mouse gets. The lift itself is 2px and already lives on .btn and
   on modern_surface's hover list, which now resolves --lift from here. */
body:has(.hero) .btn{transition:transform .22s ease,box-shadow .22s ease,
  background-color .22s ease,background-image .22s ease,color .22s ease}
body:has(.hero) .floaty,
body:has(.hero) .tier{transition:transform .22s ease,box-shadow .22s ease}
body:has(.hero) a:focus-visible,
body:has(.hero) .btn:focus-visible,
body:has(.hero) button:focus-visible,
body:has(.hero) summary:focus-visible{outline:2px solid var(--accent);
  outline-offset:3px}
body:has(.hero) .nav a:focus-visible,
body:has(.hero) .nav button:focus-visible,
body:has(.hero) .hero a:focus-visible,
body:has(.hero) .final a:focus-visible,
body:has(.hero) .buybar a:focus-visible,
body:has(.hero) footer a:focus-visible{outline-color:var(--on-dark-accent)}

/* Hero furniture: the flat 5px boxes on the dark band become soft glass. */
body:has(.hero) .hero .pill{
  background:linear-gradient(120deg,rgba(255,255,255,.17),rgba(255,255,255,.05));
  box-shadow:0 8px 22px rgba(0,0,0,.26)}
body:has(.hero) .hero .answer{
  background:linear-gradient(90deg,rgba(201,169,240,.13),rgba(201,169,240,0) 64%);
  border-radius:0 14px 14px 0}
body:has(.hero) .figures{border-radius:14px;
  background:linear-gradient(140deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
  box-shadow:0 12px 30px rgba(0,0,0,.28)}
body:has(.hero) .floaty{border-radius:14px;
  background:linear-gradient(160deg,#2e1547,#170a24);
  box-shadow:0 14px 34px rgba(0,0,0,.44)}
/* The lot tag has no z-index of its own, so in tree order it would paint
   under the new halo pseudo-element. 3 puts it back on top of the bottle. */
body:has(.hero) .hero__tag{z-index:3}

/* Panels: the slot's 18px corner and the one soft lift, tinted with this
   site's own ink (30,19,39) rather than neutral black. */
body:has(.hero) .card,
body:has(.hero) .tier,
body:has(.hero) .keypoints,
body:has(.hero) .callout,
body:has(.hero) .alert,
body:has(.hero) .ingcard,
body:has(.hero) .whycard,
body:has(.hero) .step,
body:has(.hero) .faq,
body:has(.hero) .tablewrap,
body:has(.hero) .byline,
body:has(.hero) .final,
body:has(.hero) .guarantee,
body:has(.hero) .rel a{border-radius:var(--radius);box-shadow:var(--shadow)}

/* The recommended tier is coloured away from its neighbours as well as
   raised, so the raise is not the only thing carrying it. */
body:has(.hero) .tier--feature{
  background:linear-gradient(180deg,#f6eefc 0%,var(--paper-card) 44%);
  border-color:var(--accent);
  box-shadow:0 22px 48px rgba(107,47,160,.26)}
body:has(.hero) .tier--feature:hover{box-shadow:0 26px 56px rgba(107,47,160,.32)}

/* Slot ribbon: a corner flag with a pennant notch, not the centred pill.
   The depth is a drop-shadow filter and not a box-shadow: clip-path clips a
   box-shadow away with the box, so the shadow would simply not render. */
body:has(.hero) .tier__flag{border-radius:0 4px 4px 0;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%,8px 50%);
  background:linear-gradient(135deg,#8845c4,#552482);
  filter:drop-shadow(0 8px 14px rgba(30,19,39,.30))}
/* The second flag is the amber of the dropper glass, not a second violet.
   Both stops are dark enough to carry white 13.5px bold: #8a6729 is 5.18:1
   and #6e5220 is 7.4:1. #9d7a35, which is what this gradient wanted to open
   on, measures 3.99:1 and was dropped for that reason. */
body:has(.hero) .tier:not(.tier--feature) .tier__flag{
  background:linear-gradient(135deg,var(--gold),var(--gold-deep))}

@media(prefers-reduced-motion:reduce){
  body:has(.hero) .btn,
  body:has(.hero) .floaty,
  body:has(.hero) .tier{transition:none}
  body:has(.hero) .btn:hover,
  body:has(.hero) .tier:hover,
  body:has(.hero) .card--pack:hover,
  body:has(.hero) .rel a:hover{transform:none}
}
/*!SITE-HOME-PAINT-END*/
/*!MOBILE-MENU-FIX-START*/
/* ==========================================================================
   MOBILE MENU FIX - the panel clipped its own last link
   --------------------------------------------------------------------------
   Measured at 412x924: the open panel is 264px tall with 270px of content
   inside it, so the last link is cut by 6px with no way to scroll to it. The
   panel is static inside a 924px-tall parent, so there is room; it simply
   never got a scroller. Six pixels is not a cosmetic amount when it is the
   bottom of a tap target.
   ========================================================================== */
@media (max-width:1024px){
  .navmenus{max-height:100svh;overflow-y:auto;overscroll-behavior:contain}
}
/*!MOBILE-MENU-FIX-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 .btn{font-size:16px}
footer .disc{font-size:16px}
footer .fnap{font-size:16px}
footer .fpay{font-size:16px}
footer .frole{font-size:15px}
/* ==== end footer type floor ==== */

/* ==== modern surface (modern_surface.py) ==== */
/* House rule 11. This stylesheet had 17 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 (30,19,39), 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(30,19,39,.06), 0 6px 18px rgba(30,19,39,.07);
  --lift:0 2px 6px rgba(30,19,39,.09), 0 16px 34px rgba(30,19,39,.14);
}

.card,
.step,
.keypoints,
.callout,
.alert,
.toc,
.byline,
.posts article,
.shots figure,
.badgewall figure,
.tablewrap,
.faq,
.ingcard,
.final,
.answer,
.whycard,
.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. */
.card,
.step,
.keypoints,
.callout,
.alert,
.toc,
.byline,
.posts article,
.shots figure,
.badgewall figure,
.tablewrap,
.faq,
.ingcard,
.final,
.answer,
.whycard,
.tier,
.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,
.card--pack,
.badgewall figure,
.tier{transition:box-shadow .2s ease, transform .2s ease}
.rel a:hover,
.posts article:hover,
.shots figure:hover,
.card--pack:hover,
.badgewall figure:hover,
.tier: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,
.badgewall figure:hover,
.tier:hover{transform:none}
}
/* ==== end modern surface ==== */
.review-foot{margin:0;padding:.6rem 0;font-size:.92rem}.review-foot a{font-weight:600}