/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Vollkorn Fallback";src:local("Georgia");font-weight:400;size-adjust:99.09%;ascent-override:96.08%;descent-override:44.51%;line-gap-override:0.00%}
@font-face{font-family:"Vollkorn Fallback";src:local("Georgia Bold");font-weight:600 900;size-adjust:91.97%;ascent-override:103.51%;descent-override:47.95%;line-gap-override:0.00%}
@font-face{font-family:"Catamaran Fallback";src:local("Arial");font-weight:400;size-adjust:93.25%;ascent-override:117.97%;descent-override:57.91%;line-gap-override:0.00%}
@font-face{font-family:"Catamaran Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:91.63%;ascent-override:120.05%;descent-override:58.93%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
:root{
  /* ---- ground: ivory, washed with sea glass. No bands anywhere: the
         hero tint, the card edges and the white cards carry the depth. ---- */
  --paper:#f7f6f0;
  --paper-tint:#eef3ee;
  --paper-card:#ffffff;
  --paper-deep:#e4ece5;

  /* ---- ink ---- */
  --ink:#17322c;
  --ink-soft:#2a4740;
  --muted:#3e5a53;
  --faint:#5a716b;
  --line:#d7e0d9;
  --line-soft:#e9efea;

  /* ---- accent, read off the Gluco6 bottle: the sea-green label band and
         the jade hexagon around the 6 ---- */
  --accent:#14795f;
  --accent-deep:#0d5442;
  --accent-mid:#3f9d84;
  --accent-tint:#e6f2ee;
  --accent-line:#bcdcd0;
  --accent-glow:rgba(20,121,95,.20);

  /* ---- secondary, from the cinnamon bark and capsule shells in the
         vendor artwork. Deliberately less saturated than the accent ---- */
  --sand:#b39a72;
  --sand-deep:#6d5733;
  --sand-soft:#f6f1e6;
  --sand-line:#e2d5bb;

  /* ---- deep green, used only for the topline, the closing plate and the
         footer legal tier. Never as a full-width section band ---- */
  --deep:#0e2a24;
  --deep-2:#16453a;
  --deep-ink:#cfe3da;

  /* ---- type: Vollkorn for headings, Catamaran for everything read ---- */
  --display:'Vollkorn','Vollkorn Fallback',Georgia,'Times New Roman',serif;
  --serif:'Vollkorn','Vollkorn Fallback',Georgia,'Times New Roman',serif;
  --sans:'Catamaran','Catamaran Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* ---- metrics ---- */
  --wrap:1180px;
  --measure:760px;
  --measure-wide:980px;
  --r:16px;
  --r-s:10px;
  --r-l:30px;
  --r-frame:34px;
  --radius:16px;
  --figw:440px;
  --shadow:0 14px 34px rgba(14,42,36,.10);
  --shadow-sm:0 3px 14px rgba(14,42,36,.07);
  --shadow-lg:0 28px 64px rgba(14,42,36,.20);
}

/* ==========================================================================
   Gluco6formula - gluco6formula.com
   Component system after the UI reference at memohonney.com: a light
   full-width bar, a soft rounded product frame, benefit cards in even rows
   and a long question-led scroll. The ARRANGEMENT is not the reference's:
   the reference centres its product over a coloured wash, this site stands
   the bottle on the LEFT inside a rounded frame that crops its base and
   bleeds past the section's left edge, with the copy to its right.
   Colour is NOT from the reference. It is read off the product bottle in
   assets/: the sea-green label band and the jade hexagon, over ivory.
   Type: Vollkorn (headings) + Catamaran (reading text).
   ========================================================================== */

/* ---- RESET AND BASE ------------------------------------------------------ */
*{margin:0;padding:0;box-sizing:border-box;min-width:0}
html{scroll-behavior:smooth;font-size:16px;scroll-padding-top:120px}
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);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.2;
  font-weight:700;letter-spacing:-.005em}
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-s) 0}
.skip:focus{left:0}

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

/* ---- 1. TOPLINE: the five trust facts, above the navigation --------------
   Role, lot, dose and count, guarantee, order phone. It exists so the nav
   does not have to carry them. Its rules live in the critical section,
   above the end-of-critical marker, because this is the first strip the
   browser paints and it would otherwise flash unstyled at the very top of
   the page. Do not write that marker's literal text into a comment: CSS
   comments do not nest, so the closing delimiter ends the comment early
   AND the build's critical-CSS split then cuts the file here. */
.util{background:var(--deep);color:var(--deep-ink);font-size:.9063rem}
.util__row{display:flex;align-items:center;justify-content:space-between;
  gap:10px 20px;padding-block:8px;flex-wrap:wrap}
.util__item{white-space:nowrap}
.util__item b{color:#fff;font-weight:700}
.util__tel{color:#8fd3ba;font-weight:700;white-space:nowrap}
.util__tel:hover{color:#fff;text-decoration:none}

/* ---- 2. NAV: wordmark left with a stacked sub-label, menu right, and a
   slim guarantee rule under the whole bar ---------------------------------- */
.nav{position:sticky;top:0;z-index:900;background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.nav__row{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-block:12px;flex-wrap:nowrap;position:relative}
.brand{display:inline-flex;align-items:center;gap:0;flex:none;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand svg{width:38px;height:38px;margin-right:12px;flex:none}
.brand__t{display:flex;flex-direction:column;line-height:1.02}
.brand__prod{font-family:var(--display);font-size:1.62rem;font-weight:800;
  color:var(--ink);letter-spacing:-.018em;white-space:nowrap}
.brand__prod span{color:var(--accent)}
.brand__firm{font-family:var(--sans);font-size:.7rem;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:var(--faint);margin-top:4px;
  white-space:nowrap}
.navmenus{display:flex;align-items:center;gap:24px;flex-wrap:nowrap;margin-left:auto}
.menu{display:flex;align-items:center;gap:24px;flex-wrap:nowrap}
.menu li{flex:none}
.menu a{font-family:var(--sans);font-size:.95rem;font-weight:600;color:var(--ink-soft);
  white-space:nowrap;padding-block:7px;border-bottom:2px solid transparent}
.menu a:hover,.menu a[aria-current]{color:var(--accent);text-decoration:none;
  border-bottom-color:var(--accent)}
.nav__cta{flex:none;margin-left:22px}
.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);margin-left:14px}
.burger span{display:block;height:2px;background:var(--ink);margin:4px 0;border-radius:2px}

/* The slim guarantee rule. One line, full bleed, under the whole bar. */
.nav__rule{background:var(--accent-tint);border-top:1px solid var(--accent-line);
  color:var(--accent-deep);font-size:.9063rem;font-weight:600}
.nav__rule .wrap{display:flex;align-items:center;justify-content:center;gap:8px 18px;
  padding-block:6px;flex-wrap:wrap;text-align:center}
.nav__rule b{color:var(--accent-deep);font-weight:800}
.nav__rule .dot{color:var(--accent-line)}

/* ---- 3. BUTTONS: soft pill, no arrow ------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--sans);font-weight:700;font-size:1rem;line-height:1.2;
  padding:14px 28px;border-radius:999px;border:2px solid transparent;
  cursor:pointer;text-align:center;letter-spacing:.005em;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn--cta{background:var(--accent);color:#fff;box-shadow:0 10px 24px var(--accent-glow)}
.btn--cta:hover{background:var(--accent-deep);color:#fff}
.btn--ghost{background:#fff;color:var(--accent-deep);border-color:var(--accent-line)}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent-deep)}
.btn--gold{background:var(--sand-soft);color:var(--sand-deep);border-color:var(--sand-line)}
.btn--gold:hover{border-color:var(--sand)}
.btn--lg{padding:17px 34px;font-size:1.06rem}
.btn--block{display:flex;width:100%}

/* ---- 4. HERO: bottle LEFT in a soft rounded frame, copy right ------------
   The frame crops the bottle's base so the bottle is lifted off the tint
   rather than standing on a line, and it bleeds past the section's left
   edge on wide screens. The frame is translucent, so the drifting grains
   behind it (the hero motif) show faintly through it. */
.hero{position:relative;background:var(--paper);overflow-x:clip;overflow-y:visible;
  border-bottom:1px solid var(--line)}
.hero__grid{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:52px;
  align-items:start;padding-block:44px 60px}

.hero__media{position:relative}
.hero__stick{position:relative;display:block;width:100%;
  max-width:390px;margin-inline:auto;padding-bottom:34px}
.hero__card{position:relative;overflow:hidden;
  border-radius:var(--r-frame) var(--r-frame) 46px 46px;
  /* Tinted, not white: the bottle is white and would otherwise sink into its
     own frame. Translucent so the grains keep falling behind it. */
  background:linear-gradient(176deg,rgba(255,255,255,.94),rgba(214,233,225,.70));
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 30px 60px rgba(14,42,36,.16),inset 0 1px 0 rgba(255,255,255,.9);
  padding:26px 22px 0;text-align:center;
  animation:g6Float 8.5s ease-in-out infinite}
.hero__card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64px;
  background:linear-gradient(180deg,rgba(214,233,225,0),rgba(214,233,225,.85));
  pointer-events:none}
/* The crop: the bottle runs off the bottom of its frame. */
.hero__card img{margin-inline:auto;max-width:100%;width:100%;
  margin-bottom:-9%;
  filter:drop-shadow(0 22px 26px rgba(14,42,36,.22))}
@keyframes g6Float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media(prefers-reduced-motion:reduce){.hero__card{animation:none}}

.hero__tag{position:absolute;left:50%;bottom:0;transform:translateX(-50%);z-index:4;
  background:#fff;color:var(--ink);font-size:.9063rem;font-weight:700;
  letter-spacing:.05em;padding:8px 18px;border-radius:999px;white-space:nowrap;
  border:1px solid var(--accent-line);box-shadow:var(--shadow-sm)}
.floaty{position:absolute;background:#fff;border-radius:var(--r);padding:11px 15px;
  box-shadow:var(--shadow-lg);font-family:var(--display);font-size:1.02rem;font-weight:700;
  color:var(--ink);z-index:4;line-height:1.18;display:flex;align-items:center;gap:11px}
/* The vendor's 'icon' files are small square PHOTOGRAPHS. A circular crop
   reads as a deliberate thumbnail; a square one reads as a blob. */
.floaty img{width:42px;height:42px;flex:none;border-radius:50%;object-fit:cover}
.floaty small{display:block;color:var(--accent-deep);font-family:var(--sans);
  font-size:.9063rem;font-weight:700;margin-top:3px}
.floaty--tl{top:26px;left:-44px}
.floaty--br{bottom:64px;right:-46px}

.hero__copy{min-width:0}
.pill{display:inline-flex;align-items:center;gap:9px;background:#fff;
  border:1px solid var(--accent-line);color:var(--accent-deep);font-weight:700;
  font-size:.8438rem;letter-spacing:.14em;text-transform:uppercase;
  padding:7px 16px;border-radius:999px;box-shadow:var(--shadow-sm)}
.pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 4px var(--accent-tint)}
.hero h1{font-size:clamp(2.15rem,3.9vw,3.1rem);margin:20px 0 0;font-weight:800;
  line-height:1.08;letter-spacing:-.018em;color:var(--ink)}
.hero h1 span{color:var(--accent)}
.hero h1 small{display:block;font-family:var(--sans);font-size:1rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--faint);margin-top:14px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0}
.hero__sub{margin:18px 0 0;font-size:1rem;color:var(--faint);
  display:flex;flex-wrap:wrap;gap:6px 10px}
.hero__sub span{white-space:nowrap}

.ticks{margin:24px 0 0;display:grid;gap:11px}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-size:1.0625rem;
  color:var(--ink-soft)}
.ck{flex:none;width:23px;height:23px;border-radius:50%;background:var(--accent-tint);
  color:var(--accent-deep);display:inline-flex;align-items:center;justify-content:center;
  font-size:.82rem;font-weight:800;margin-top:3px}

/* The hero seal row: made in, GMP, non-GMO, guarantee. */
.heroseals{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin:22px 0 0}
.heroseals figure{display:flex;align-items:center;gap:9px}
.heroseals img{width:38px;height:38px;flex:none}
.heroseals figcaption{font-size:.9063rem;font-weight:700;color:var(--faint);line-height:1.3}

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

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

.figures{display:flex;flex-wrap:wrap;gap:12px 34px;margin:22px 0 0}
.figures div{min-width:92px}
.figures b{display:block;font-family:var(--display);font-size:2rem;font-weight:800;
  color:var(--accent-deep);line-height:1}
.figures span{display:block;font-size:.9063rem;color:var(--faint);margin-top:4px}

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

/* ---- 5. QUICK ANSWER (AEO) ------------------------------------------------ */
.answer{background:#fff;border:1px solid var(--accent-line);border-left:5px solid var(--accent);
  border-radius:0 var(--r) var(--r) 0;box-shadow:var(--shadow-sm);
  padding:20px 26px;margin:22px 0 0}
.answer .qtag{display:block;font-family:var(--sans);font-weight:800;font-size:.8438rem;
  letter-spacing:.17em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:.5em}
.answer p{margin:0;font-size:1.0625rem;color:var(--ink-soft)}
.answer p+p{margin-top:.7em;color:var(--muted)}
.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:800;font-size:.8438rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--accent-deep);margin-bottom:.45em}

/* ---- 6. TRUST ROW -------------------------------------------------------- */
.trust{background:#fff;border-bottom:1px solid var(--line)}
.trust__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:20px 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:7px;font-weight:700}
.trust__note{max-width:320px;font-size:.9063rem;line-height:1.55;color:var(--faint)}

/* ---- ABOVE-THE-FOLD RESPONSIVE -------------------------------------------
   The nav shedding order and the hero's phone ordering decide the first
   paint, so they sit above the critical marker and are inlined per page. */
@media(max-width:1400px){.menu{gap:19px}.menu a{font-size:.92rem}.navmenus{gap:19px}}
@media(max-width:1300px){.menu{gap:15px}.menu a{font-size:.89rem}.floaty--tl{left:-24px}
  .floaty--br{right:-26px}}
@media(max-width:1180px){
  .burger{display:block}
  .navmenus{display:none;position:absolute;top:calc(100% + 12px);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;background:#fff;
    border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
    box-shadow:var(--shadow);padding-block:6px 10px;max-height:76vh;overflow-y:auto;
    margin-left:0}
  .navmenus.open{display:flex}
  .menu{flex-direction:column;align-items:stretch;gap:0}
  .menu a{display:block;padding:13px 22px;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)}
  .nav__row .brand{margin-right:auto}
  .floaty{display:none}
}
@media(max-width:980px){
  .hero__grid{grid-template-columns:1fr;gap:20px;padding-block:26px 44px}
  /* 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;margin:6px 0 16px}
  /* The stacked order is hero.md's, not the desktop order rearranged: the
     shot goes directly after the H1 so a buyer from an ad sees the label
     before reading, and the CTA follows the Quick Answer. Measured at 390x844
     with the ticks and the seal row in between, the CTA landed at y=1797
     against a target of ~1100. */
  .hero__copy>.answer{order:4}
  .hero__copy>.hero__cta{order:5}
  .hero__copy>.hero__sub{order:6}
  .hero__copy>.ticks{order:7}
  .hero__copy>.pay{order:8}
  .hero__copy>.heroseals{order:9}
  .hero__copy>.factpills{order:10}
  .hero__copy>.figures{order:11}
  .hero__copy>.hero__rating{order:12}
  .hero__stick{max-width:320px;padding-bottom:30px}
}
/* The header has to SHED on a phone, or it eats the fold. Measured at 390x844
   before this block: the topline wrapped to three lines and the guarantee rule
   to three more, the header stood 223px tall, and the H1 landed at y=439 with
   the product shot at 673 and the Quick Answer at 1037. hero.md's targets are
   H1 above 300, the shot visible by ~600 and the answer above ~850.

   So below 780px the guarantee rule goes (the topline already carries the same
   60-day fact) and the topline drops the lot and the dose line, keeping role,
   guarantee and phone. */
@media(max-width:780px){
  .nav__rule{display:none}
}
@media(max-width:700px){
  .hero h1{font-size:2.05rem}
  /* Every pixel between the H1 and the CTA is measured on a 390x844 screen.
     The shot stays big enough to read the label; the Quick Answer drops to the
     body size and loses some of its padding. Together these lift the CTA by
     about 130px. */
  .hero__stick{max-width:246px;padding-bottom:26px}
  .hero__grid{padding-block:18px 40px;gap:14px}
  .hero .answer{padding:18px 20px;margin-top:18px}
  .hero .answer p{font-size:1.0625rem;line-height:1.62}
  .hero__cta{margin-top:20px}
  .util{font-size:0.9062rem}
  .util__row{justify-content:center;gap:2px 14px;padding-block:6px}
  .util__item:nth-child(2),.util__item:nth-child(3){display:none}
}
@media(max-width:480px){
  .nav__row{padding-block:9px}
  .brand svg{width:32px;height:32px;margin-right:9px}
  .brand__prod{font-size:1.42rem}
  .brand__firm{display:none}
}
/* The CTA is the last thing in the row and the first thing to go: below 470px
   the brand, the button and the burger together are wider than the viewport,
   and the burger was measured hanging off the right edge at 390. */
@media(max-width:470px){.nav__cta{display:none}}


/* ---- hero motif -- grain-drift ---------------------------------------- */
.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(120% 92% at 30% 14%,#cee0d6,#f7f6f0 54%,#f7f6f0)}.hero__media::before{content:'';position:absolute;inset:-8% -14% -2%;z-index:1;pointer-events:none;opacity:.6;background-image:radial-gradient(circle,rgba(20,121,95,0.34) 2px,transparent 2.6px),radial-gradient(circle,rgba(20,121,95,0.26) 1.3px,transparent 1.8px);background-size:112px 150px,76px 108px;background-position:0 0,38px 44px;-webkit-mask-image:linear-gradient(to bottom,#000 8%,rgba(0,0,0,.4) 58%,transparent 94%);mask-image:linear-gradient(to bottom,#000 8%,rgba(0,0,0,.4) 58%,transparent 94%);animation:g6Grain 23s linear infinite}.hero__media::after{content:'';position:absolute;left:50%;top:54%;width:84%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;z-index:1;pointer-events:none;background:radial-gradient(closest-side,rgba(20,121,95,0.20),transparent 72%);animation:g6Hold 10s ease-in-out infinite}@keyframes g6Grain{to{background-position:0 300px,38px 260px}}@keyframes g6Hold{0%,100%{scale:.9;opacity:.45}50%{scale:1.05;opacity:.85}}
@media(prefers-reduced-motion:reduce){.hero__card{animation:none!important}.hero__media::before,.hero__media::after{animation:none!important;opacity:0!important}}

/* --- hero responsive rules, copied into the critical block
   A phone painted the desktop hero from the inline block and then
   jumped when the async sheet arrived -- 692px on one site, CLS 0.95.
   These are COPIES: the originals stay below, so the cascade is
   unchanged and the first paint is already correct.
   REGENERATED ON EVERY BUILD from the rules below the marker. Edit
   the originals; never this copy, which is overwritten. */
@media (min-width:1181px){
  .hero__media{margin-left:calc(-1 * clamp(20px,3.2vw,58px))}
}
@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;}
}
/* --- end of the copied hero responsive rules --- */

/*!SITE-HOME-CRIT-START*/
/* ---- HOME HERO: desktop reading order -----------------------------------
   Measured at 1440x900 before this block: the Order button sat at y=1094,
   194px below the fold, because the four ticks and the seal row stood
   between the Quick Answer and the buttons. The copy column becomes a flex
   column so the buying pair can be lifted to just under the Quick Answer:
   eyebrow, headline, quick answer, BUTTONS, payment line, then the evidence.
   DOM order is untouched, so the Quick Answer still follows the H1 for
   parsers and for the speakable selector.
   Desktop only. Below 981px .hero__copy is display:contents and the phone
   order is composed separately, above; nothing here touches it. */
@media(min-width:981px){
  .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>.ticks{order:6}
  .hero .hero__copy>.heroseals{order:7}
  .hero .hero__copy>.factpills{order:8}
  .hero .hero__copy>.figures{order:9}
  .hero .hero__copy>.hero__rating{order:10}
  .hero .hero__copy>.hero__sub{order:11}
}
/*!SITE-HOME-CRIT-END*/

/*!CRITICAL-END*/

/* ---- 7. SECTIONS --------------------------------------------------------
   No colour bands. Sections are separated by whitespace and a hairline, and
   the contrast comes from white cards on the ivory ground. */
.sec{padding-block:72px;border-top:1px solid var(--line-soft)}
.sec:first-child{border-top:0}
.sec--tight{padding-block:40px}
.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:34px}
.sec__head--center{text-align:center;margin-inline:auto}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);
  font-size:.8438rem;font-weight:800;letter-spacing:.17em;text-transform:uppercase;
  color:var(--accent-deep);margin-bottom:10px}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--sand)}
.rule{display:none}
.sec h2{font-size:clamp(1.7rem,3vw,2.4rem);margin-bottom:12px;font-weight:700}
.sec h3{font-size:1.25rem;margin-bottom:8px}
.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,.sec>.wrap>.keypoints{
  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(2rem,3.8vw,2.85rem);font-weight:800;letter-spacing:-.016em}
.sec>.wrap>.eyebrow{display:flex;max-width:var(--measure);margin-inline:auto}
.sec ul li{position:relative}
.sec>.wrap>ul>li{padding-left:24px;margin-bottom:.45em}
.sec>.wrap>ul>li::before{content:"";position:absolute;left:2px;top:.66em;width:9px;height:9px;
  border-radius:50%;background:var(--accent-mid)}
.sec ol{counter-reset:n;display:grid;gap:11px}
.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;border-radius:50%;background:var(--accent-tint);
  color:var(--accent-deep);font-size:1.0625rem;font-weight:800;display:flex;
  align-items:center;justify-content:center;font-family:var(--display)}
.dropcap::first-letter{float:left;font-family:var(--display);font-size:3.6rem;
  line-height:.84;font-weight:800;color:var(--accent);padding:6px 13px 0 0}

.pullquote{border-left:4px solid var(--sand);padding:8px 0 8px 24px;margin:26px auto}
.pullquote p{font-family:var(--display);font-size:1.34rem;font-weight:600;color:var(--ink);
  line-height:1.44}
.pullquote cite{display:block;margin-top:9px;font-style:normal;font-size:.9063rem;
  color:var(--faint);letter-spacing:.07em;text-transform:uppercase;font-weight:700}

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

/* ---- 8. 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-radius:var(--r);
  padding:28px 26px;box-shadow:var(--shadow-sm);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--accent-line)}
.card h3{font-size:1.18rem}
.card p{font-size:1.0625rem;color:var(--muted)}
.card p+p{margin-top:.8em}
.card img{border-radius:var(--r-s);margin-bottom:14px}

.steps{display:grid;gap:14px;counter-reset:s}
.step{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);
  padding:24px 26px 24px 80px;position:relative;box-shadow:var(--shadow-sm);
  counter-increment:s}
.step__n{position:absolute;left:22px;top:22px;width:40px;height:40px;border-radius:50%;
  background:var(--accent);color:#fff;display:flex;align-items:center;
  justify-content:center;font-family:var(--display);font-weight:800;font-size:1.05rem}
.step__n::before{content:counter(s,decimal-leading-zero)}
.step h3{font-size:1.14rem}
.step p{font-size:1.0625rem;color:var(--muted)}

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

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

/* ---- 9. TABLES ----------------------------------------------------------- */
.tablewrap{overflow-x:auto;background:#fff;border:1px solid var(--line-soft);
  border-radius:var(--r);box-shadow:var(--shadow-sm);margin:22px auto}
table.dtable{width:100%;border-collapse:collapse;font-size:1rem;min-width:520px}
.dtable caption{text-align:left;padding:16px 22px 0;font-family:var(--display);
  font-weight:700;color:var(--ink);font-size:1.08rem}
.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(--accent-deep);color:#fff;font-size:.9063rem;
  letter-spacing:.08em;text-transform:uppercase;font-weight:700;font-family:var(--sans)}
.dtable tbody tr:nth-child(even) td{background:#f7faf8}
.dtable tbody tr:last-child td{border-bottom:0}
.dtable td b{color:var(--ink)}

/* ---- 10. SPLIT ----------------------------------------------------------- */
.split{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:46px;
  align-items:center}
.split--rev{grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr)}
.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,minmax(0,1fr));gap:24px;margin-top:8px}
.shots--wide{grid-template-columns:repeat(3,minmax(0,1fr))}
/* One figure does not want a two-column grid behind it. */
.shots--one{grid-template-columns:minmax(0,640px);justify-content:center}
.shots figure{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--shadow-sm)}
.shots img{width:100%}
/* A 200px vendor icon under `width:100%` painted at 550px and read as a
   blurred wall. Icons keep their own size and sit on the tint instead. */
.shots figure.icon img{width:auto;max-width:112px;margin:26px auto 4px;
  background:var(--accent-tint);border-radius:50%;padding:10px}
/* A portrait shot at column width runs ~850px tall and buries its caption. */
.shots figure.tall img{width:auto;max-width:300px;margin:22px auto 0}
.shots figcaption{padding:18px 22px;font-size:.9688rem;color:var(--muted)}
.shots figcaption b{display:block;font-family:var(--display);font-size:1.1rem;
  color:var(--ink);margin-bottom:6px}

/* ---- 12. PROMO / STATS / BADGEWALL --------------------------------------
   Plates, not bands: a bordered card on the ivory ground with an accent
   left edge, so the page never breaks into stripes. */
.promo{background:#fff;border:1px solid var(--accent-line);
  border-left:6px solid var(--accent);border-radius:0 var(--r-l) var(--r-l) 0;
  padding:30px 36px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:26px;
  align-items:center;box-shadow:var(--shadow-sm)}
.promo p{margin:0}
.promo b{color:var(--ink)}
.stats{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);
  padding:34px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;
  text-align:center;box-shadow:var(--shadow-sm)}
.stats b{display:block;font-family:var(--display);font-size:2.3rem;font-weight:800;
  color:var(--accent-deep);line-height:1}
.stats span{display:block;margin-top:8px;font-size:.9063rem;color:var(--faint)}
.badgewall{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
.badgewall figure{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);
  padding:20px 14px;text-align:center;box-shadow:var(--shadow-sm)}
.badgewall img{margin:0 auto 10px}
.badgewall figcaption{font-size:.9063rem;color:var(--muted)}
.badgewall figcaption b{display:block;color:var(--ink);font-size:1rem;margin-bottom:4px;
  font-family:var(--display)}

/* ---- 13. WHY / WHOFOR ---------------------------------------------------- */
.whygrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.whycard{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);
  padding:28px 26px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.whycard::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--accent),var(--accent-mid) 60%,var(--sand))}
.whycard h3{font-size:1.16rem}
.whycard p{font-size:1.0625rem;color:var(--muted)}
.whofor{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.forlist{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);
  padding:28px;box-shadow:var(--shadow-sm)}
.forlist h3{font-size:1.16rem;margin-bottom:12px}
.forlist li{display:flex;gap:11px;font-size:1.0625rem;margin-bottom:9px}
.forlist li::before{content:"";flex:none;width:9px;height:9px;margin-top:.62em;
  border-radius:50%;background:var(--accent-mid)}
.forlist--no li::before{background:var(--sand)}

/* ---- 14. LABEL PANEL ----------------------------------------------------- */
.ing{display:grid;gap:22px}
.ingthumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ingthumbs figure{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--shadow-sm)}
.ingthumbs img{width:100%}
.ingthumbs figcaption{padding:14px 18px;font-size:.9688rem;color:var(--muted)}
.ingthumbs figcaption b{display:block;font-family:var(--display);font-size:1.06rem;
  color:var(--ink);margin-bottom:4px}
.ingcard{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);
  padding:28px;box-shadow:var(--shadow-sm);position:relative}
.ingcard h3{font-size:1.28rem;margin-bottom:4px}
.ingcard .ingsub{font-size:.9063rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-deep);font-weight:800;margin-bottom:12px;display:block}
.ingcard .ing__dose{display:inline-block;background:var(--sand-soft);
  border:1px solid var(--sand-line);color:var(--sand-deep);border-radius:999px;
  padding:3px 13px;font-size:.9063rem;font-weight:700;margin-bottom:12px}
.ingcard p{font-size:1.0625rem}
.ingcard p+p{margin-top:.85em}
.facts{background:#fff;border:2px solid var(--ink);border-radius:8px;overflow:hidden;
  max-width:580px;margin-inline:auto}
.facts__h{background:var(--ink);color:#fff;padding:14px 22px;font-family:var(--display);
  font-size:1.22rem;font-weight:800}
.facttab{width:100%;border-collapse:collapse;font-size:1rem}
.facttab th,.facttab td{padding:12px 22px;border-bottom:1px solid var(--line);text-align:left}
.facttab th{font-weight:700;color:var(--ink-soft);font-size:1rem}
.facttab td:last-child{text-align:right;font-weight:800;color:var(--ink)}
.facttab tr:last-child th,.facttab tr:last-child td{border-bottom:0}

/* ---- 15. QA record sheet ------------------------------------------------- */
.qa{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);
  box-shadow:var(--shadow-sm);overflow:hidden;max-width:920px;margin-inline:auto}
.qa__h{background:var(--accent-deep);color:#fff;padding:16px 24px;font-family:var(--display);
  font-weight:700;font-size:1.1rem}
.qa dl{margin:0;display:grid;grid-template-columns:32% minmax(0,1fr)}
.qa dt,.qa dd{padding:13px 24px;border-bottom:1px solid var(--line-soft);margin:0}
.qa dt{font-weight:800;color:var(--ink);font-size:1.0625rem;letter-spacing:.05em;
  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. ADD-TO-CART PANEL ------------------------------------------------
   Three pack cards, each with a head band, the pack shot in a fixed box, the
   price per bottle, the total beside the seller's struck comparison price,
   four perks, an Add To Cart button and the card marks. Every card carries a
   2px transparent border so only border-COLOUR changes on the featured one
   and the three buttons stay on one baseline (responsive.md proof 3). */
.buy{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;
  align-items:stretch;margin-top:8px}
.buy__card{background:#fff;border:2px solid var(--line);border-radius:var(--r-l);
  overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;
  text-align:center}
.buy__card--feature{border-color:var(--accent);box-shadow:var(--shadow-lg);margin-top:-12px}
.buy__head{background:var(--paper-tint);color:var(--ink);padding:16px 18px 14px;
  position:relative;border-bottom:1px solid var(--line-soft)}
.buy__card--feature .buy__head{background:linear-gradient(135deg,var(--accent),var(--accent-deep));
  color:#fff;border-bottom-color:var(--accent-deep)}
.buy__flag{display:inline-block;background:#fff;color:var(--accent-deep);
  font-size:.8438rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 13px;border-radius:999px;margin-bottom:8px;border:1px solid var(--accent-line)}
.sec .buy__name{font-size:1.72rem;font-weight:800;margin:0;letter-spacing:-.01em}
.buy__card--feature .buy__name{color:#fff}
.buy__supply{font-size:.9063rem;font-weight:700;margin-top:2px;color:var(--faint)}
.buy__card--feature .buy__supply{color:var(--accent-line)}
.buy__body{padding:18px 22px 22px;display:flex;flex-direction:column;flex:1}
/* One box for every pack shot: the six-bottle image is 2.78:1 where the
   single is 0.75:1, and at a shared width they sat at three heights. */
.buy__img{display:block;width:100%;max-width:230px;height:180px;object-fit:contain;
  margin:0 auto 10px}
.buy__price{font-family:var(--display);font-size:3.2rem;font-weight:800;color:var(--ink);
  line-height:1;display:flex;align-items:flex-start;justify-content:center;gap:2px}
.buy__cur{font-size:1.4rem;margin-top:6px}
.buy__per{font-family:var(--sans);font-size:1rem;font-weight:700;color:var(--faint);
  align-self:flex-end;margin:0 0 6px 6px}
.buy__total{font-size:1.0625rem;color:var(--muted);margin:10px 0 14px}
.buy__total b{color:var(--ink);font-size:1.2rem}
.buy__total s{color:var(--faint);margin-left:6px}
.buy__perks{display:grid;gap:7px;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:20px;height:20px;
  border-radius:50%;background:var(--accent-tint);color:var(--accent-deep);font-size:1.062rem;
  font-weight:800;display:flex;align-items:center;justify-content:center}
.buy__add{margin-top:auto;font-size:1.06rem;padding-block:15px;text-transform:uppercase;
  letter-spacing:.04em}
.buy__cart{flex:none}
.buy__pay{display:block;width:180px;height:auto;margin:12px auto 0;opacity:.9}
/* The reason sits ABOVE the button, not below it. With it below, a longer
   note on one card pushed that card's Add To Cart 25px off the row's
   baseline while `margin-top:auto` did its job perfectly (responsive.md
   proof 3). Only the payment marks now sit under the button, and they are
   the same height on all three. */
.buy__why{font-size:.9375rem;color:var(--faint);text-align:left;margin:14px 0 18px;
  padding-top:12px;border-top:1px dashed var(--line)}
.buy__foot{max-width:var(--measure-wide);margin:26px auto 0;text-align:center}
.guarantee{display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr);gap:34px;
  align-items:center;background:#fff;border:1px solid var(--line-soft);
  border-radius:var(--r-l);padding:34px;box-shadow:var(--shadow-sm)}
.guarantee img{margin-inline:auto}
.guarantee h3{font-size:1.42rem;margin-bottom:12px}

/* ---- 17. REVIEWS --------------------------------------------------------- */
.tgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.tcard{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);
  padding:26px;box-shadow:var(--shadow-sm)}
.tcard .stars{color:var(--sand-deep);letter-spacing:1px;font-size:1rem}
.tcard b{display:block;margin-top:8px;font-family:var(--display);font-size:1.08rem;
  color:var(--ink)}
.tcard span{font-size:.9063rem;color:var(--faint)}
.tcard p{font-size:1.0625rem;margin-top:10px}
.tlife{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.tlife figure{border-radius:var(--r);overflow:hidden;background:#fff;
  border:1px solid var(--line-soft);box-shadow:var(--shadow-sm)}
.tlife img{width:100%}
.tlife figcaption{padding:14px 18px;font-size:.9688rem;color:var(--muted)}
.bars{display:grid;gap:9px;max-width:460px}
.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:10px;background:var(--paper-deep);border-radius:5px;overflow:hidden}
.bar__f{display:block;height:100%;background:var(--accent-mid);border-radius:5px}
.dist{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;
  align-items:center;background:#fff;border:1px solid var(--line-soft);
  border-radius:var(--r);padding:30px;box-shadow:var(--shadow-sm)}
.bigscore{font-family:var(--display);font-size:2.9rem;font-weight:800;color:var(--ink);
  line-height:1}
.bigscore small{font-size:1rem;color:var(--faint);font-weight:700}

/* ---- 18. FAQ ------------------------------------------------------------- */
.faq{display:grid;gap:10px;text-align:left}
.faq details{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);
  box-shadow:var(--shadow-sm);overflow:hidden}
.faq details[open]{border-color:var(--accent-line)}
.faq summary{padding:17px 22px;font-family:var(--display);font-weight:700;color:var(--ink);
  cursor:pointer;font-size:1.1rem;list-style:none;display:flex;justify-content:space-between;
  gap:14px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:28px;height:28px;border-radius:50%;
  background:var(--accent-tint);color:var(--accent-deep);font-size:1.2rem;display:flex;
  align-items:center;justify-content:center}
.faq details[open] summary::after{content:"\2013";background:var(--accent);color:#fff}
.faq__b{padding:0 22px 18px;font-size:1.0625rem}
.faq__b p+p{margin-top:.8em}

/* ---- 19. REFS, BYLINE ---------------------------------------------------- */
.refs{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);
  padding:26px 28px;box-shadow:var(--shadow-sm)}
.refs h2{font-size:1.22rem;margin-bottom:12px}
.refs ol{counter-reset:r;display:grid;gap:9px}
.refs li{counter-increment:r;position:relative;padding-left:30px;font-size:1.0625rem;
  color:var(--muted);line-height:1.6}
.refs li::before{content:counter(r) ".";position:absolute;left:0;font-weight:800;
  color:var(--accent-deep)}
.refs a{word-break:break-word}
.byline{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;background:#fff;
  border:1px solid var(--line-soft);border-radius:var(--r);padding:26px 28px;
  box-shadow:var(--shadow-sm);margin:26px auto 0}
.byline img{border-radius:50%;flex:none}
.byline svg{width:64px;height:64px;flex:none}
.byline b{font-family:var(--display);font-size:1.1rem;color:var(--ink);display:block;
  margin-bottom:7px}
.byline p{font-size:.9688rem;color:var(--muted)}

/* ---- 20. FORMS ----------------------------------------------------------- */
.form{display:grid;gap:22px;grid-template-columns:repeat(2,minmax(0,1fr))}
.formcard{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);
  padding:28px;box-shadow:var(--shadow-sm)}
.formcard h3{font-size:1.18rem;margin-bottom:6px}
.formcard label{display:block;font-size:.9063rem;font-weight:700;color:var(--ink-soft);
  margin:14px 0 5px}
/* 16px floor: anything smaller makes iOS Safari zoom on focus and never zoom
   back (pitfall 86). */
.formcard input,.formcard textarea,.formcard select{width:100%;padding:12px 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:linear-gradient(140deg,var(--deep),var(--deep-2));border-radius:var(--r-l);
  padding:42px 44px;color:var(--deep-ink);position:relative;overflow:hidden}
.final::after{content:"";position:absolute;right:-90px;top:-90px;width:270px;height:270px;
  border-radius:50%;border:2px solid rgba(63,157,132,.35)}
.final h2{color:#fff;font-size:clamp(1.55rem,3vw,2.2rem);margin-bottom:12px}
.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 20px 26px rgba(0,0,0,.35))}
.final__price{font-family:var(--display);font-size:1.32rem;font-weight:700;color:#fff;
  margin:14px 0 18px}
.final .btn--cta{background:#fff;color:var(--deep)}
.final .btn--cta:hover{background:var(--accent-tint);color:var(--deep)}
.final p,.article .final p{color:var(--deep-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:18px;text-align:left}
.rel a{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);padding:24px;
  display:block;box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease}
.rel a:hover{transform:translateY(-3px);box-shadow:var(--shadow);text-decoration:none}
.rel b{display:block;font-family:var(--display);font-size:1.1rem;color:var(--ink);
  margin-bottom:6px}
.rel span{font-size:.9688rem;color:var(--muted)}

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

/* ---- 23. FOOTER: three tiers ---------------------------------------------
   1. a seal row on the tinted ground
   2. the links in TWO wide columns, each flowing its list into sub-columns
   3. a dark legal line carrying the disclaimers and the copyright */
.fseals{background:var(--paper-tint);border-top:1px solid var(--line);padding-block:28px}
/* A grid, not a flex wrap: six seals in a flex row broke 5 + 1 and read as a
   mistake. Two rows of three is a shape. */
.fseals__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px 32px;max-width:920px;margin-inline:auto}
.fseals figure{display:flex;align-items:center;gap:11px}
.fseals img{width:44px;height:44px;flex:none;background:#fff;border-radius:50%;padding:2px}
.fseals figcaption{font-size:.9063rem;color:var(--faint);font-weight:700;line-height:1.35}
.fseals figcaption b{display:block;color:var(--ink);font-size:.9688rem}

.flinks{background:#fff;border-top:1px solid var(--line);padding-block:46px 40px}
.fgrid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;
  margin-top:36px;padding-top:30px;border-top:1px solid var(--line-soft)}
.fcol h4{color:var(--accent-deep);font-family:var(--sans);font-size:.8438rem;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px}
.fcol ul{columns:2;column-gap:28px}
.fcol li{margin-bottom:7px;font-size:1.0625rem;line-height:1.5;break-inside:avoid}
.fcol a{color:var(--ink-soft)}
.fcol a:hover{color:var(--accent)}
.fbrand{font-family:var(--display);font-size:1.75rem;font-weight:800;color:var(--ink);
  margin-bottom:8px;letter-spacing:-.018em}
.fbrand span{color:var(--accent)}
.fnap{font-size:1rem;line-height:1.7;color:var(--muted);margin-top:14px}
.fnap strong{color:var(--ink)}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:20px;
  font-size:.9063rem;color:var(--faint)}
.fpay img{border-radius:6px}

.flegal{background:var(--deep);color:rgba(207,227,218,.78);padding-block:34px 26px;
  font-size:.9063rem;line-height:1.7}
.flegal .disc p{margin-bottom:.9em}
.flegal b{color:#fff}
.flegal a{color:#8fd3ba}
.flegal .copy{margin-top:16px;color:rgba(207,227,218,.6)}
.flegal .fmini{display:flex;flex-wrap:wrap;gap:8px 18px;padding-bottom:18px;
  margin-bottom:18px;border-bottom:1px solid rgba(255,255,255,.14)}

/* ---- 24. BUY BAR --------------------------------------------------------- */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:950;background:var(--deep);
  color:#fff;transform:translateY(110%);transition:transform .3s ease;
  border-top:2px solid var(--accent-mid)}
.buybar.show{transform:translateY(0)}
.buybar__in{max-width:var(--wrap);margin-inline:auto;padding:11px 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:#8fd3ba}
.buybar .btn{padding:10px 22px}

/* ---- 25. BLOG ------------------------------------------------------------ */
.article{max-width:780px;margin-inline:auto}
.article h1{font-size:clamp(1.95rem,3.6vw,2.7rem);margin-bottom:14px;font-weight:800}
.article h2{font-size:1.58rem;margin:1.9em 0 .6em;scroll-margin-top:130px}
.article h3{font-size:1.22rem;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:24px;margin-bottom:8px}
.article ul li::before{content:"";position:absolute;left:3px;top:.66em;width:9px;height:9px;
  border-radius:50%;background:var(--accent-mid)}
.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-deep);
  font-weight:800}
.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:.9375rem;color:var(--faint);margin-top:9px;
  border-left:3px solid var(--sand);padding-inline-start:12px}
.postmeta{display:flex;flex-wrap:wrap;gap:8px 12px;font-size:.9063rem;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(--line)}
.toc{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);
  padding:20px 24px;margin-bottom:26px;box-shadow:var(--shadow-sm)}
.toc h2{font-size:.8438rem;letter-spacing:.17em;text-transform:uppercase;
  font-family:var(--sans);color:var(--accent-deep);margin:0 0 10px}
.toc ol{counter-reset:t;display:grid;gap:6px}
.toc li{counter-increment:t;position:relative;padding-left:28px;font-size:1.0625rem}
.toc li::before{content:counter(t) ".";position:absolute;left:0;color:var(--faint);font-weight:700}
.keypoints{background:var(--accent-tint);border-left:5px solid var(--accent);
  border-radius:0 var(--r) var(--r) 0;padding:20px 26px;margin-bottom:24px}
.keypoints>b{display:block;font-family:var(--sans);font-size:.8438rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--accent-deep);margin-bottom:10px}
.keypoints li{font-size:1.0625rem;margin-bottom:7px}
.keypoints li b{color:var(--accent-deep)}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.posts article{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease}
.posts article:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.posts img{width:100%}
.posts .pbody{padding:20px 22px}
.posts h3{font-size:1.16rem;margin-bottom:8px}
.posts p{font-size:1.0625rem;color:var(--muted)}
.posts .pmeta{font-size:.9063rem;color:var(--faint);margin-top:12px;letter-spacing:.05em;
  text-transform:uppercase;font-weight:700}
/* A shared component in a narrower column is a new component (pitfall 24). */
.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.34rem}
  .article .final--media .btn{width:100%}
}
.article .refs{margin-top:2em}
.article .refs h2{margin-top:0}

/* ---- 26. MOTION: rise on entry ------------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(18px) scale(.985)}
[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}
  .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>.keypoints,
  .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))}
}
@media(max-width:980px){
  .split,.split--rev,.guarantee,.dist,.form{grid-template-columns:1fr;gap:26px}
  .promo{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3,.g4,.whygrid,.tgrid,.rel,.posts,.ingthumbs,.tlife{grid-template-columns:repeat(2,minmax(0,1fr))}
  .buy{grid-template-columns:1fr;max-width:440px;margin-inline:auto;gap:18px}
  .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:22px}
  .final--media .final__img img{max-width:240px}
  .fgrid2{grid-template-columns:1fr;gap:30px}
}
@media(max-width:700px){
  .sec{padding-block:50px}
  .fseals__row{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}
  .g2,.g3,.g4,.whygrid,.whofor,.tgrid,.rel,.posts,.shots,.shots--wide,
  .badgewall,.ingthumbs,.tlife{grid-template-columns:1fr}
  .fcol ul{columns:1}
  .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 22px}
  .step{padding:22px 20px 22px 70px}
  .step__n{left:16px}
  .promo{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}}

/* The footer column link is the thing you tap, and a 17px line in 35px of row
   pitch is under the WCAG AA floor. The padding grows the hit area and the
   negative margin gives the space straight back, so nothing moves. */
.fcol li a{display:inline-block;padding-block:4px;margin-block:-4px}

/* ---- 28. THE FRAME BLEEDS PAST THE SECTION EDGE -------------------------
   The slot calls for the product frame to overlap the section edge. On wide
   screens the media column is pulled left out of the page gutter so the
   frame crosses the hero's own left boundary; .hero clips on the X axis
   only, so nothing can widen the document. Released below 1180px, where the
   gutter is the only thing holding the copy off the screen edge. */
@media(min-width:1181px){
  .hero__media{margin-left:calc(-1 * clamp(20px,3.2vw,58px))}
}


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

/* ==== 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--wide>figure:only-child{grid-column:1/-1;max-width:calc((100% - 48px) / 3);margin-inline:auto}
/* ==== end fix_layout_breaks.py ==== */

/* ==== directional chrome (fix_chrome_scroll.py) ==== */
.nav,#nav,header.header{transition:transform .28s ease}
@media(prefers-reduced-motion:reduce){.nav,#nav,header.header{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 SURFACE + HERO MOTIF                       (index.html only)
   Paint only: radius, shadow, background, colour, transform, transition and
   animation. Nothing here moves a box, so it lives below the critical marker
   and needs a restamp rather than a rebuild.

   Every selector is scoped with body:has(.hero). class="hero" is on
   index.html and on no other page of this site (checked: grep -l over all
   *.html), so these rules cannot reach pricing.html, which also carries
   .buy__card, nor any legal page. The scope also buys specificity, so this
   block wins over modern_surface.py and footer_type.py, which re-append
   themselves AFTER it on every build.

   Slot: radius_card 18 / radius_control 12, two tight crisp stops for the
   depth, an inset pill on a rule for the pricing ribbon, and a "settle"
   hero motif. The shadow tint is this site's own ink (23,50,44) and its
   deep accent (13,84,66), never neutral black.
   ========================================================================== */
body:has(.hero){
  /* two tight stops, crisp -- a contact shadow and a short ambient one */
  --g6h-d1:0 1px 1px rgba(23,50,44,.10),0 4px 10px rgba(23,50,44,.10);
  --g6h-d2:0 1px 2px rgba(23,50,44,.13),0 10px 22px rgba(23,50,44,.15);
  --g6h-cta:0 1px 1px rgba(13,84,66,.26),0 4px 10px rgba(13,84,66,.28);
  --g6h-cta-up:0 1px 2px rgba(13,84,66,.30),0 10px 22px rgba(13,84,66,.32);
  --g6h-rc:18px;   /* slot radius_card    */
  --g6h-rk:12px;   /* slot radius_control */
}

/* ---- CONTROLS -----------------------------------------------------------
   The dated signature on these sites is a 999px lozenge with one flat
   hairline under it. 12px corners and two stops read as a current control.
   The buying button carries a gradient; the secondary stays solid, so the
   pair reads as two weights rather than two colours. */
body:has(.hero) .btn{border-radius:var(--g6h-rk);
  transition:transform .2s cubic-bezier(.22,.61,.36,1),box-shadow .2s ease,
             background-color .2s ease,color .2s ease,border-color .2s ease}
body:has(.hero) .btn--cta{
  background-color:var(--accent);
  background-image:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,0) 52%),
                   linear-gradient(180deg,var(--accent),var(--accent-deep));
  box-shadow:var(--g6h-cta)}
body:has(.hero) .btn--cta:hover,
body:has(.hero) .btn--cta:focus-visible{
  background-color:var(--accent-deep);
  background-image:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,0) 52%),
                   linear-gradient(180deg,var(--accent),var(--accent-deep));
  box-shadow:var(--g6h-cta-up);transform:translateY(-2px)}
body:has(.hero) .btn--ghost{background-image:none;box-shadow:var(--g6h-d1)}
body:has(.hero) .btn--ghost:hover{box-shadow:var(--g6h-d2);transform:translateY(-2px)}
body:has(.hero) .btn--gold{box-shadow:var(--g6h-d1)}
body:has(.hero) .btn:focus-visible,
body:has(.hero) .menu a:focus-visible,
body:has(.hero) .brand:focus-visible{outline:3px solid var(--accent-mid);
  outline-offset:3px}
body:has(.hero) .burger{border-radius:var(--g6h-rk);box-shadow:var(--g6h-d1)}

/* ---- PANELS -------------------------------------------------------------- */
body:has(.hero) .buy__card,
body:has(.hero) .tcard,
body:has(.hero) .whycard,
body:has(.hero) .guarantee{border-radius:var(--g6h-rc);box-shadow:var(--g6h-d1)}
body:has(.hero) .answer{border-radius:6px var(--g6h-rc) var(--g6h-rc) 6px;
  box-shadow:var(--g6h-d1)}
body:has(.hero) .floaty{border-radius:var(--g6h-rc);box-shadow:var(--g6h-d2)}
body:has(.hero) .pill,
body:has(.hero) .hero__tag{box-shadow:var(--g6h-d1)}
/* The product frame keeps its sculpted 34/46 crop -- that shape is what
   lifts the bottle off its base -- but drops the 30/60 drama for the
   slot's two crisp stops. */
body:has(.hero) .hero__card{
  box-shadow:var(--g6h-d2),inset 0 1px 0 rgba(255,255,255,.92)}

/* ---- PRICING CARDS ------------------------------------------------------
   The three Add To Cart buttons share one baseline, held by a fixed image
   box, `margin-top:auto` on the button and the featured card raised with
   margin-top rather than transform. NOTHING here adds flow height: the
   ribbon rules and the perk separators are absolutely positioned pseudo-
   elements, so all three buttons stay where they were (proved after: 17287
   on all three, unchanged). */
body:has(.hero) .buy__card--feature{
  border-color:var(--accent);
  background-image:linear-gradient(180deg,#fff 0%,#fff 58%,var(--accent-tint) 100%);
  box-shadow:0 2px 4px rgba(13,84,66,.14),0 18px 38px rgba(13,84,66,.18)}

/* The ribbon, to the slot: an inset pill sitting on a rule. The rule is
   drawn by the pill's own pseudo-elements, left and right of it, so it is
   always exactly on the pill's centre line whatever the head does. The
   card's overflow:hidden crops the far ends. */
body:has(.hero) .buy__flag{position:relative;
  background:var(--paper-card);border-color:var(--accent-line);
  box-shadow:inset 0 1px 2px rgba(23,50,44,.14),0 1px 0 rgba(255,255,255,.9)}
body:has(.hero) .buy__flag::before,
body:has(.hero) .buy__flag::after{content:"";position:absolute;top:50%;
  width:60vw;height:1px;background:var(--accent-line);pointer-events:none}
body:has(.hero) .buy__flag::before{right:calc(100% + 10px)}
body:has(.hero) .buy__flag::after{left:calc(100% + 10px)}
body:has(.hero) .buy__card--feature .buy__flag{
  background:rgba(255,255,255,.93);color:var(--accent-deep);
  border-color:rgba(255,255,255,.55);
  box-shadow:inset 0 1px 2px rgba(13,84,66,.22)}
body:has(.hero) .buy__card--feature .buy__flag::before,
body:has(.hero) .buy__card--feature .buy__flag::after{
  background:rgba(255,255,255,.45)}

/* Dashed separators between the feature rows, drawn inside the existing 7px
   grid gap by an absolutely positioned pseudo-element. A real border-bottom
   would have added 4px of flow height per card and pushed the buttons off
   their shared baseline. */
body:has(.hero) .buy__perks li+li::after{content:"";position:absolute;
  left:0;right:0;top:-4px;border-top:1px dashed var(--line);
  pointer-events:none}
body:has(.hero) .buy__card--feature .buy__perks li+li::after{
  border-top-color:var(--accent-line)}
body:has(.hero) .buy__card{transition:box-shadow .22s ease}
body:has(.hero) .buy__card:hover{box-shadow:var(--g6h-d2)}
body:has(.hero) .buy__card--feature:hover{
  box-shadow:0 2px 4px rgba(13,84,66,.18),0 22px 46px rgba(13,84,66,.24)}

/* ---- HERO MOTIF: settle -------------------------------------------------
   Slot motif_family "settle": a soft halo that breathes once and settles,
   very slow. Nothing touches the <img>: it is the LCP element and is
   preloaded.

   .hero__media's own ::before and ::after are already taken by the drifting
   grain, so the ring hangs off .hero__stick, the media column's inner
   wrapper. It is 152% of a 390px column -- about 593px across against a
   390px product frame -- so it reads well outside the card rather than
   disappearing behind it. The existing halo on .hero__media::after is
   retargeted from its 10s infinite pulse to the same single settle, so the
   column holds still once it has arrived.
   New keyframe names: this sheet already owns g6Float, g6Grain and g6Hold. */
body:has(.hero) .hero__stick::before{content:"";position:absolute;z-index:0;
  pointer-events:none;left:50%;top:46%;width:152%;aspect-ratio:1;
  translate:-50% -50%;border-radius:50%;
  background:
    radial-gradient(closest-side,rgba(20,121,95,0) 54%,rgba(20,121,95,.26) 70%,rgba(20,121,95,0) 87%),
    radial-gradient(closest-side,rgba(63,157,132,.20),rgba(63,157,132,0) 68%);
  animation:g6SettleRing 11s cubic-bezier(.19,.72,.28,1) .2s both}
@keyframes g6SettleRing{
  0%{opacity:0;scale:.78}
  46%{opacity:1;scale:1.055}
  100%{opacity:.82;scale:1}}
body:has(.hero) .hero__media::after{
  animation:g6SettleGlow 14s cubic-bezier(.19,.72,.28,1) both}
@keyframes g6SettleGlow{
  0%{opacity:.12;scale:.84}
  52%{opacity:.9;scale:1.06}
  100%{opacity:.55;scale:1}}

@media(prefers-reduced-motion:reduce){
  body:has(.hero) .hero__stick::before{animation:none;opacity:.55;scale:1}
  body:has(.hero) .hero__media::after{animation:none}
  body:has(.hero) .btn,
  body:has(.hero) .buy__card{transition:none}
  body:has(.hero) .btn--cta:hover,
  body:has(.hero) .btn--cta:focus-visible,
  body:has(.hero) .btn--ghost:hover{transform: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 .flegal{font-size:16px}
/* ==== end footer type floor ==== */

/* ==== modern surface (modern_surface.py) ==== */
/* House rule 11. This stylesheet had 52 box-shadow declaration(s)
   and 4 of them layered, so every panel read flat however generous
   the radius was. Two stops -- a tight contact shadow and a wide
   ambient one -- is what makes a surface look raised. The tint is
   this site's own ink (23,50,44), 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{
  --shadow:0 1px 2px rgba(23,50,44,.06), 0 6px 18px rgba(23,50,44,.07);
  --lift:0 2px 6px rgba(23,50,44,.09), 0 16px 34px rgba(23,50,44,.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. */
.keypoints,
.callout,
.alert,
.faq,
.answer,
.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}