/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Brygada 1918 Fallback";src:local("Georgia");font-weight:400;size-adjust:105.77%;ascent-override:86.98%;descent-override:23.64%;line-gap-override:0.00%}
@font-face{font-family:"Brygada 1918 Fallback";src:local("Georgia Bold");font-weight:600 900;size-adjust:93.73%;ascent-override:98.15%;descent-override:26.67%;line-gap-override:0.00%}
@font-face{font-family:"Proza Libre Fallback";src:local("Arial");font-weight:400;size-adjust:109.26%;ascent-override:89.20%;descent-override:35.75%;line-gap-override:0.00%}
@font-face{font-family:"Proza Libre Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:106.80%;ascent-override:92.81%;descent-override:34.29%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* =====================================================================
   HARMOBRAINES.COM -- Harmo Brain, official website
   Design slot: build_set.json row 234 (batch 13, three Harmo Brain desks)

   Palette : from the bottle, not the reference -- and from the part of the
             bottle the sister desks did NOT take. harmobraine.com and
             harmoebrain.com both built on the cobalt of the "Brain" wordmark
             (#2A4C8C, #2748a8); this desk takes the slate-periwinkle of the
             label's base band (measured #8493ae / #6c789c, OKLCH hue ~266).
             Accent #444e6e (Delta E 20.3 from #2A4C8C, 39.9 from #2748a8),
             periwinkle CTA #6272aa, slate night #161d30 / #1c2338, base band
             #8c92ad. Gold from the money-back seal. Paper #f6f7fc.
   Type    : Brygada 1918 (editorial serif display) / Proza Libre (humanist
             sans body). Held by no other row in the uniqueness ledger.
   Look    : from alphasteeel.com (the LOOKS FOR reference) for the LOOK
             only -- product right with a curved ground behind it, a dark
             topline, alternating light and tinted bands with one dark band,
             numbered step rows, a plus-sign accordion, a four-column dark
             footer with seals and a payment strip.
   Slot    : offset hero -- the stage sits across the boundary between a light
             wash and a navy ground, copy on the light one; solid inverse
             cards on the dark band; a CSS dot texture on key bands; deep
             diffuse + contact shadow; radius 20 cards / 14 controls.
   Motif   : harmobBloom -- a radial bloom opening behind the bottles and
             easing back -- and harmobBloomRing, one thin ring released
             outward. Pseudo-elements of .hero__media only. Never the img.

   THE SPLIT. Everything above the CRITICAL-END marker is inlined into every
   page at build time: tokens, every rule that sizes or places a box, and
   the WHOLE hero including its phone rules and its motif. Below the marker
   is paint only -- colour, backgrounds, shadows, radius, hover, reveal.
   A block appended to this file by a tool is delimited at both ends.
   ===================================================================== */

:root{
  /* ground */
  --paper:#f6f7fc; --paper-2:#eef0f8; --paper-3:#e5e8f4; --card:#ffffff;
  --ink:#1c2338; --ink-2:#3b4157; --muted:#5c6277; --faint:#8e93a7;
  --line:#d8dceb; --line-soft:#e8eaf3;
  /* accent: the slate-periwinkle base band of the bottle (see header) */
  --accent:#444e6e; --accent-deep:#303853; --accent-ink:#38415d;
  --accent-tint:#e8ecf8; --accent-line:#ccd2eb;
  --electric:#6272aa; --electric-soft:#8f9dcd; --glow:#abb7e0;
  --peri:#8c92ad; --peri-tint:#e1e4f1;
  /* the dark ground */
  --night:#161d30; --night-2:#222b42; --night-3:#2f3953;
  --on-dark:#eff2fa; --on-dark-2:#bec4da;
  /* secondary ramps, from the seals on the pack */
  --gold:#b5862a; --gold-deep:#7d5b14; --gold-tint:#f7eed9;
  --rose:#b4473d; --rose-tint:#f9e8e5; --mint:#2f7d6d; --mint-tint:#e2f2ed;
  /* type */
  --serif:"Brygada 1918","Brygada 1918 Fallback",Georgia,"Times New Roman",serif;
  --sans:"Proza Libre","Proza Libre Fallback","Segoe UI",system-ui,-apple-system,sans-serif;
  /* metrics */
  --wrap:1200px; --measure:760px; --measure-wide:980px; --navh:75px;
  /* curve: a SCALE -- cards 20, controls 14 (slot row 234), the hero stage and
     closing panel 32. --radius-lg is a LITERAL on purpose: modern_surface.py
     cannot resolve calc(), read .final as square, and appended a block that
     also replaced --shadow/--lift below with a generic two-stop pair, wiping
     the slot's deep-diffuse depth. */
  --radius:20px; --radius-sm:14px; --radius-lg:32px;
  /* shade: deep diffuse + contact, tinted with the ink (28,35,56) */
  --shadow:0 1px 1px rgba(28,35,56,.07), 0 24px 60px -22px rgba(28,35,56,.22);
  --lift:0 2px 3px rgba(28,35,56,.09), 0 34px 70px -24px rgba(28,35,56,.34);
  --shadow-cta:0 12px 28px -10px rgba(98,114,170,.62), 0 2px 4px rgba(28,35,56,.16);
}

/* ---------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
*{min-width:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-padding-top:96px}
body{margin:0;overflow-x:clip;background:var(--paper);color:var(--ink-2);font-family:var(--sans);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
img,svg,video,table{max-width:100%}
img{height:auto;display:block}
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;line-height:1.14;margin:0 0 .5em;color:var(--ink);letter-spacing:-.012em;overflow-wrap:break-word}
h1{font-size:clamp(2.1rem,1.25rem + 3.1vw,3.5rem)}
h2{font-size:clamp(1.8rem,1.25rem + 1.9vw,2.7rem)}
h3{font-size:clamp(1.18rem,1.05rem + .45vw,1.38rem);line-height:1.25}
h4{font-size:1.05rem}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.1em;padding-left:1.25em}
li{margin:.3em 0}
a{color:var(--accent);text-underline-offset:3px}
b,strong{font-weight:700;color:var(--ink)}
.i{flex:none;display:inline-block;vertical-align:middle}
.wrap{width:min(var(--wrap),100% - 32px);margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;z-index:100;padding:10px 16px;background:#fff}
.skip:focus{left:12px;top:12px}

/* ---------------------------------------------------------------- topline */
.util{background:var(--night);color:var(--on-dark-2);font-size:14.5px;line-height:1.4}
.util__row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 22px;min-height:40px;padding-block:8px}
.util__item b{color:#fff;font-weight:600}
.util__tel{color:#fff;font-weight:600;text-decoration:none;white-space:nowrap}
@media (max-width:1100px){.util__lot{display:none}}
@media (max-width:680px){.util__row{justify-content:center;text-align:center}.util__guar{display:none}}

/* ---------------------------------------------------------------- header */
.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line-soft)}
.nav__row{display:flex;align-items:center;flex-wrap:nowrap;gap:22px;min-height:74px}
.brand{display:flex;align-items:center;gap:12px;flex:none;white-space:nowrap;text-decoration:none;color:var(--ink)}
.brand svg{width:44px;height:44px;flex:none}
.brand__t{display:flex;flex-direction:column;line-height:1.05}
.brand__word{font-family:var(--serif);font-weight:700;font-size:1.42rem;letter-spacing:-.01em;color:var(--ink)}
.brand__word span{color:var(--accent)}
.brand__firm{font-size:13.5px;font-weight:500;color:var(--muted);margin-top:5px;letter-spacing:.01em}
.navmenus{flex:1;display:flex;justify-content:center}
.menu{display:flex;flex-wrap:nowrap;gap:22px;list-style:none;margin:0;padding:0}
.menu li{flex:none;margin:0}
.menu a{display:flex;align-items:center;min-height:44px;padding:8px 0;font-size:16px;font-weight:600;color:var(--ink-2);text-decoration:none;white-space:nowrap}
.menu a[aria-current="page"]{color:var(--accent)}
/* (0,2,0): the menu's own CTA is a .btn, and .btn{display} comes later */
.navmenus .menu__cta{display:none}
.nav__cta{flex:none}
.nav__cta .btn{white-space:nowrap}
.burger{display:none}
/* seven menu items, the mark and the CTA share 1200px only without the firm
   line; the firm line comes back with the burger, where there is room */
@media (min-width:1181px){.nav .brand__firm{display:none}}
@media (max-width:1340px){.menu{gap:16px}.menu a{font-size:15.5px}}
@media (max-width:1180px){
  .nav__cta{margin-left:auto}
  .burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:48px;height:48px;padding:0 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;cursor:pointer;flex:none}
  .burger span{display:block;height:2px;border-radius:2px;background:var(--ink)}
  .navmenus{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;padding:8px 16px 20px;max-height:calc(100vh - 120px);overflow:auto;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 24px 40px -24px rgba(28,35,56,.35)}
  .navmenus.open{display:flex}
  .menu{flex-direction:column;gap:0}
  .menu a{padding:13px 4px;font-size:17px;border-bottom:1px solid var(--line-soft)}
  .navmenus .menu__cta{display:flex;margin-top:16px}
}
@media (max-width:600px){.brand__firm{display:none}.nav__row{gap:12px;min-height:66px}}
@media (max-width:430px){.nav__cta{display:none}.burger{margin-left:auto}.brand{min-height:44px}.brand svg{width:40px;height:40px}.brand__word{font-size:1.3rem}}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 24px;border:1.5px solid transparent;border-radius:var(--radius-sm);font-family:var(--sans);font-size:16.5px;font-weight:700;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer}
.btn--lg{min-height:56px;padding:15px 30px;font-size:17.5px}
.btn--block{display:flex;width:100%}
/* The buying CTA is the gradient. Colour guards at (0,2,0) so a context rule
   such as a section link colour can never repaint the label (rule 12 E). */
.btn--cta{color:#fff;background:linear-gradient(135deg,#6272aa 0%,#4d5a8a 52%,#303853 100%);box-shadow:var(--shadow-cta)}
.btn.btn--cta{color:#fff}
.btn--ghost{color:var(--ink);background:#fff;border-color:var(--line)}
.btn.btn--ghost{color:var(--ink)}
.btn--solid{color:#fff;background:var(--night)}
.btn.btn--solid{color:#fff}
.btn--ghost-light{color:#fff;background:transparent;border-color:rgba(255,255,255,.42)}
.btn.btn--ghost-light{color:#fff}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.sec--center .cta-row{justify-content:center}

/* =====================================================================
   THE HERO -- mobile first. Phone order: eyebrow, H1, the pack, Quick
   Answer, CTA, ticks, payment, rating, factpills, figures.
   ===================================================================== */
.hero{position:relative;isolation:isolate;overflow-x:clip;overflow-y:visible;padding-top:clamp(20px,3vw,44px);
  background:
    radial-gradient(52% 58% at 86% 14%,rgba(140,152,227,.32),rgba(140,152,227,0) 70%),
    radial-gradient(46% 52% at 4% 2%,rgba(140,146,173,.30),rgba(140,146,173,0) 70%),
    radial-gradient(60% 46% at 36% 100%,rgba(200,208,246,.62),rgba(200,208,246,0) 72%),
    linear-gradient(180deg,#f8f9fe 0%,#eff1f9 100%)}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(rgba(68,78,110,.13) 1px,transparent 1.3px);background-size:22px 22px;-webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,0) 72%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,0) 72%)}
.hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);gap:18px;padding-bottom:30px}
.hero__copy{display:contents}
.hero__eyebrow{order:1}
.hero h1{order:2}
.hero__media{order:3}
.hero .answer{order:4}
.hero__cta{order:5}
.ticks{order:6}
.pay{order:7}
.hero__rating{order:8}
.factpills{order:9}
.figures{order:10}

.pill{display:inline-flex;align-items:center;gap:9px;justify-self:start;align-self:flex-start;padding:8px 16px;border-radius:999px;background:#fff;border:1px solid var(--accent-line);color:var(--accent);font-size:13.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 1px 1px rgba(28,35,56,.06),0 8px 20px -12px rgba(28,35,56,.3)}
.pill__dot{width:8px;height:8px;border-radius:50%;background:var(--electric);box-shadow:0 0 0 4px rgba(98,114,170,.18)}
.hero h1{margin:0;font-size:clamp(2.1rem,1.2rem + 3vw,3.2rem);line-height:1.08}
.hl{background:linear-gradient(100deg,#6272aa 0%,#303853 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.answer{padding:18px 22px;margin:0;border-radius:var(--radius);background:#fff;border:1px solid var(--line-soft);border-left:4px solid var(--electric);box-shadow:var(--shadow);color:var(--ink-2);font-size:17px;line-height:1.65}
.answer p{margin:0 0 .6em}
.answer p:last-child{margin-bottom:0}
.hero .answer{background:rgba(255,255,255,.88)}
.qtag{display:inline-block;margin-bottom:6px;color:var(--accent);font-size:13.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}
.ticks{display:grid;gap:8px;list-style:none;margin:0;padding:0}
.ticks li{display:flex;align-items:flex-start;gap:10px;margin:0;font-size:16px;line-height:1.5}
.ck{flex:none;display:grid;place-items:center;width:24px;height:24px;margin-top:1px;border-radius:50%;background:var(--accent-tint);color:var(--accent);font-size:13px;font-weight:700}
.pay{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0;color:var(--muted);font-size:14.5px}
.pay img{width:230px;height:auto}
.hero__rating{display:flex;align-items:center;gap:8px;margin:0;color:var(--ink-2);font-size:15px}
.hero__rating .i{color:var(--gold)}
.factpills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.factpills li{margin:0;padding:7px 13px;border-radius:999px;background:#fff;border:1px solid var(--line-soft);color:var(--ink-2);font-size:14.5px}
.factpills b{color:var(--accent)}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.figures>div{padding:14px 12px;border-radius:16px;background:#fff;border:1px solid var(--line-soft);box-shadow:var(--shadow)}
.figures b{display:block;font-family:var(--serif);font-size:clamp(1.35rem,1rem + 1.2vw,1.8rem);line-height:1.1;color:var(--accent)}
.figures span{display:block;margin-top:4px;color:var(--muted);font-size:14.5px;line-height:1.3}
@media (min-width:560px){.ticks{grid-template-columns:1fr 1fr;column-gap:18px}}

/* the media column -- phone: a hard-stop split puts the stage across the
   boundary between the light wash and the navy ground */
.hero__media{position:relative;isolation:isolate;margin-inline:-16px;padding:6px 16px 26px;background:linear-gradient(180deg,rgba(22,29,48,0) 0 42%,var(--night) 42% 100%)}
.hero__stick{position:relative;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;row-gap:14px}
.hero__stage{position:relative;z-index:2;width:100%;max-width:470px;padding:22px 22px 30px;border-radius:var(--radius-lg);background:linear-gradient(165deg,rgba(255,255,255,.80) 0%,rgba(255,255,255,.58) 58%,rgba(238,241,251,.66) 100%);border:1px solid rgba(255,255,255,.9);box-shadow:0 1px 1px rgba(22,29,48,.10),0 34px 70px -28px rgba(22,29,48,.62),inset 0 1px 0 rgba(255,255,255,.95)}
.hero__card{--imgr:1;position:relative;z-index:1;aspect-ratio:var(--imgr)}
.hero__card img{width:100%;height:auto}
.hero__plinth{position:absolute;z-index:0;left:14%;right:14%;bottom:16px;height:28px;border-radius:50%;background:radial-gradient(closest-side,rgba(22,29,48,.32),rgba(22,29,48,0))}
.hero__tag{position:absolute;z-index:2;right:16px;top:14px;padding:4px 11px;border-radius:999px;background:#fff;border:1px solid var(--accent-line);color:var(--accent);font-size:13.5px;font-weight:700;letter-spacing:.05em}
/* the fact chips: one wrapping row under the stage on a tablet, hidden on a
   phone (the .figures row carries the same three facts there), and placed
   around the stage -- over caps, shoulders and base, never over the label
   lettering -- from 1000px */
.floaties{position:relative;z-index:3;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.floaty{position:relative;z-index:3;display:flex;align-items:center;gap:10px;margin:0;padding:10px 14px;border-radius:16px;background:#fff;box-shadow:0 1px 1px rgba(22,29,48,.10),0 18px 36px -16px rgba(22,29,48,.5)}
.floaty b{display:block;font-family:var(--serif);font-size:1.3rem;line-height:1.05;color:var(--ink)}
.floaty small{display:block;color:var(--muted);font-size:14.5px;line-height:1.25}
.floaty img{width:44px;height:44px}
@media (max-width:559px){.floaties{display:none}}

/* the motif: harmobBloom. Sized well beyond the stage so it reads around it.
   Its periwinkle carries more chroma than the slate accent on purpose: it is
   light, not type, and a slate bloom on a pale wash reads as grey haze. */
.hero__media::before,.hero__media::after{content:"";position:absolute;z-index:0;left:50%;top:40%;border-radius:50%;pointer-events:none;aspect-ratio:1}
.hero__media::before{width:min(165%,840px);background:radial-gradient(closest-side,rgba(181,192,252,.95) 0%,rgba(140,152,227,.62) 30%,rgba(101,111,189,.30) 58%,rgba(101,111,189,.10) 80%,rgba(101,111,189,0) 100%);transform:translate(-50%,-50%) scale(.84);opacity:.7;animation:harmobBloom 10s ease-in-out infinite}
.hero__media::after{width:min(128%,660px);border:2px solid rgba(125,137,210,.62);box-shadow:0 0 28px rgba(140,152,227,.45),inset 0 0 28px rgba(140,152,227,.30);transform:translate(-50%,-50%) scale(.6);opacity:0;animation:harmobBloomRing 10s ease-out infinite}
@keyframes harmobBloom{0%,100%{transform:translate(-50%,-50%) scale(.78);opacity:.6}50%{transform:translate(-50%,-50%) scale(1.08);opacity:1}}
@keyframes harmobBloomRing{0%{transform:translate(-50%,-50%) scale(.58);opacity:0}14%{opacity:.95}72%{opacity:.16}100%{transform:translate(-50%,-50%) scale(1.14);opacity:0}}

/* the lower ground: the navy ledge carrying the trust case as solid inverse cards */
.hero__ledge{position:relative;z-index:1;padding-block:24px 30px;background-color:var(--night);background-image:radial-gradient(rgba(171,183,224,.12) 1px,transparent 1.3px);background-size:22px 22px;color:var(--on-dark-2)}
.ledge{display:grid;gap:18px}
.ledge__facts{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;list-style:none;margin:0;padding:0}
.ledge__facts li{display:flex;align-items:center;gap:12px;margin:0;padding:13px 16px;border-radius:16px;background:var(--night-2);border:1px solid rgba(171,183,224,.16)}
.ledge__facts .i{color:var(--glow)}
.ledge__facts b{display:block;color:#fff;font-size:16px;line-height:1.3}
.ledge__facts b a{color:#fff}
.ledge__facts small{display:block;color:var(--on-dark-2);font-size:14.5px;line-height:1.35}
.ledge__seals{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px;margin:0}
.ledge__seals figcaption{flex-basis:100%;text-align:center;color:var(--on-dark-2);font-size:14.5px;line-height:1.4}
.ledge__seals img{width:60px;height:60px}
@media (min-width:600px){.ledge__facts{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media (min-width:1000px){
  .hero::after{content:"";position:absolute;z-index:-1;right:0;bottom:0;left:calc(50% + 40px);top:calc(44px + (100vh - var(--navh) - 28px) * .54);top:calc(44px + (100svh - var(--navh) - 28px) * .54);border-top-left-radius:240px 190px;background-color:var(--night);background-image:radial-gradient(rgba(171,183,224,.12) 1px,transparent 1.3px);background-size:22px 22px}
  .hero__grid{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);column-gap:clamp(32px,4vw,64px);align-items:start;padding-bottom:clamp(40px,4vw,60px)}
  .hero{padding-top:clamp(20px,2.2vw,32px)}
  .hero__copy{display:flex;flex-direction:column;gap:16px;padding-bottom:8px}
  .hero__media{margin-inline:0;padding:0;background:none}
  .hero__stick{display:block;width:100%;max-width:520px;margin-inline:auto}
  .hero__stage{margin-inline:auto;width:min(100%,470px)}
  .hero__media::before,.hero__media::after{top:50%}
  .floaties{display:contents}
  .floaty{position:absolute}
  .floaty--a{left:-9%;top:3%}
  .floaty--b{right:-5%;top:29%}
  .floaty--c{left:-7%;bottom:-3%}
}
/* 1000-1199: the columns are close, so the chips stay inside the stick */
@media (min-width:1000px) and (max-width:1199px){
  .floaty--a{left:-2%}
  .floaty--b{right:0}
  /* the lot tag would meet chip a under the caps: it drops to the base */
  .hero__tag{top:auto;bottom:16px}
  .floaty--c{left:0}
  .ledge__facts{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ---- hero: sticky, centred product column ------------------------------
   The product column holds its place, vertically centred, until the hero has
   fully scrolled past (hero_sticky.py owns this block and leaves the width
   query alone; it is written here, above the marker, so the phone and the
   desktop geometry are both in the inlined critical CSS).

   --navh is measured and published by site.js. The block starts at 1000px,
   the same width the hero turns into two columns. */
@media (min-width: 1000px) {
  .hero__grid { align-items: start; }
  .hero__media {
    position: sticky;
    top: calc(var(--navh, 75px) + 14px);
    align-self: start;
    min-height: calc(100vh - var(--navh, 75px) - 28px);
    min-height: calc(100svh - var(--navh, 75px) - 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; }
}
@media (prefers-reduced-motion:reduce){
  .hero__media::before,.hero__media::after{animation:none}
  .hero__media::after{opacity:0}
}

/* =====================================================================
   PAGE LAYOUT -- every rule below here that sizes or places a box. Paint
   for the same components sits below the marker.
   ===================================================================== */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 18px;font-size:14.5px}
.phero{position:relative;isolation:isolate;padding-block:clamp(20px,3vw,34px) clamp(40px,5vw,64px)}
.phero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(rgba(68,78,110,.12) 1px,transparent 1.3px);background-size:22px 22px;-webkit-mask-image:linear-gradient(180deg,#000,rgba(0,0,0,0) 80%);mask-image:linear-gradient(180deg,#000,rgba(0,0,0,0) 80%)}
.phero__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.phero h1{font-size:clamp(2rem,1.3rem + 2.4vw,3rem);margin:0 0 18px}
.phero .answer{max-width:var(--measure)}
.phero .lead{max-width:var(--measure);margin-top:18px}
.phero__media .fig{max-width:520px;margin-inline:auto}
@media (min-width:960px){.phero__grid--media{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}

.sec{position:relative;padding-block:clamp(60px,7vw,104px)}
.sec--final{padding-block:clamp(48px,6vw,88px)}
.sec--narrow .wrap{max-width:var(--measure-wide)}
.sec__head{max-width:800px;margin-bottom:clamp(28px,4vw,46px)}
.sec__head--center,.sec--center .sec__head{margin-inline:auto;text-align:center}
.sec__head h2{margin-bottom:.35em}
/* components stacked in one section never touch: a stat band over an icon
   grid, steps over a split. The first block after the head keeps the head's
   own margin. */
.sec>.wrap>*+*{margin-top:clamp(24px,3vw,40px)}
.sec>.wrap>.sec__head+*{margin-top:0}
.sec>.wrap>.panel+*,.sec>.wrap>.callout+*{margin-top:clamp(8px,1.4vw,16px)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:14px;font-size:13.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.eyebrow::before{content:"";width:28px;height:2px;border-radius:2px;background:currentColor;opacity:.6}
.lead{margin:0;font-size:clamp(1.08rem,1rem + .35vw,1.22rem);line-height:1.6}
.divider{display:block;height:clamp(36px,5.5vw,84px);line-height:0;margin:0}
.divider svg{display:block;width:100%;height:100%}
.divider--flip svg{transform:scaleX(-1)}

.grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(16px,2vw,24px)}
@media (min-width:700px){.g2,.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.card{padding:clamp(22px,2.2vw,30px)}
.card h3{margin-bottom:.4em}
.card p:last-child{margin-bottom:0}
.ico{display:inline-grid;place-items:center;flex:none;width:54px;height:54px;border-radius:16px}
.ico--sm{width:44px;height:44px;border-radius:14px}
.icard .ico{margin-bottom:16px}
.bento{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(16px,2vw,24px)}
.bento__i .ico{margin-bottom:16px}
@media (min-width:700px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}.bento__i--wide{grid-column:span 2}}
@media (min-width:1024px){.bento{grid-template-columns:repeat(3,minmax(0,1fr))}.bento__i--tall{grid-row:span 2}}

.ingcard{display:flex;flex-direction:column;padding:24px}
.ingcard__top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}
.ingcard h3{margin-bottom:10px}
.ing__amt{margin:0 0 12px;padding:8px 12px;font-family:var(--serif);font-size:1.06rem;font-weight:600;line-height:1.35}
.ingcard__role{margin:0 0 12px;font-weight:600}
.ingcard__ev{font-size:16.5px}
.ingcard__warn{display:flex;align-items:flex-start;gap:8px;margin:0 0 12px;padding:10px 12px;font-size:15.5px;line-height:1.5}
.ingcard__warn .i{margin-top:3px}
.ingcard__src{margin:auto 0 0;padding-top:12px;font-size:14.5px;line-height:1.5}
.tag{display:inline-block;padding:5px 11px;border-radius:999px;font-size:13.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:clamp(12px,2vw,22px)}
.stat{padding:24px 22px}
.stat b{display:block;margin-bottom:10px;font-family:var(--serif);font-size:clamp(2.3rem,1.6rem + 2.4vw,3.4rem);line-height:1}
.stat span{display:block;font-size:16.5px;font-weight:700}
.stat small{display:block;margin-top:6px;font-size:14.5px;line-height:1.45}

.steps{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:18px;list-style:none;margin:0;padding:0;counter-reset:step}
.step{position:relative;z-index:1;margin:0;padding:24px 22px 22px 84px;counter-increment:step}
.step h3{margin-bottom:.35em}
.step p:last-child{margin-bottom:0}
.step__n{position:absolute;left:22px;top:22px;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;font-family:var(--serif);font-size:1.2rem;font-weight:700}
.step__n::before{content:counter(step)}
@media (min-width:700px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:980px){
  .steps--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .steps--4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .steps--3 .step,.steps--4 .step{padding:80px 22px 24px}
  .steps--3::before,.steps--4::before{content:"";position:absolute;z-index:0;left:44px;right:44px;top:45px;height:2px}
}
.tline{position:relative;max-width:880px;margin:0 auto;padding:0;list-style:none}
.tline::before{content:"";position:absolute;left:19px;top:10px;bottom:10px;width:2px}
.tl{position:relative;margin:0 0 18px;padding-left:58px}
.tl::before{content:"";position:absolute;left:9px;top:20px;width:22px;height:22px;border-radius:50%}
.tl__when{display:inline-block;margin-bottom:10px;padding:5px 12px;border-radius:999px;font-size:13.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.tl__b{padding:20px 22px}
.tl__b p:last-child{margin-bottom:0}

.split{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,4vw,60px);align-items:start}
.split + .split{margin-top:clamp(40px,5vw,72px)}
.split__copy>:first-child{margin-top:0}
.split__copy>:last-child{margin-bottom:0}
.split__copy h3{margin-top:1.1em}
@media (min-width:880px){.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.split--rev .split__img{order:2}}
.fig{--imgw:100%;margin:0}
.fig__frame{position:relative;overflow:hidden}
.fig__frame img{width:100%;height:auto}
.fig--well .fig__frame{padding:clamp(14px,2.4vw,26px)}
.fig--label .fig__frame{padding:clamp(10px,1.6vw,18px)}
.fig figcaption{padding:14px 4px 0;font-size:15.5px;line-height:1.55}
.fig figcaption b{display:block;margin-bottom:4px;font-family:var(--serif);font-size:1.08rem}
@media (min-width:761px){.split__img .fig{width:100%;max-width:min(100%,var(--imgw));margin-inline:auto}}
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(16px,2vw,24px)}

.panel{max-width:var(--measure);margin:0 0 24px;padding:clamp(24px,3vw,40px)}
.panel--wide{max-width:var(--measure-wide)}
.sec--center .panel{margin-inline:auto;text-align:left}
.panel h3{margin-top:1.3em}
.panel .panel__t,.panel>h3:first-child{margin-top:0}
.panel__kick{display:block;margin-bottom:6px;font-size:13.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.panel>:last-child{margin-bottom:0}
.checks{display:grid;gap:10px;list-style:none;margin:0 0 1.1em;padding:0}
.checks li{display:flex;align-items:flex-start;gap:10px;margin:0}
.olist{padding-left:1.4em}
.olist li{margin:.5em 0;padding-left:.2em}

.tablewrap{margin:0 0 8px;overflow-x:auto;-webkit-overflow-scrolling:touch}
table.dtable{width:100%;min-width:600px;border-collapse:separate;border-spacing:0;font-size:16px}
.dtable caption{padding:18px 20px 14px;caption-side:top;text-align:left;font-family:var(--serif);font-size:1.12rem;font-weight:700}
.dtable th{padding:13px 18px;text-align:left;font-size:14.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.dtable td{padding:14px 18px;vertical-align:top;line-height:1.55}
.note{margin:14px 0 0;font-size:15px}

.faq{display:grid;gap:12px;max-width:var(--measure-wide);margin-inline:auto;text-align:left}
.faq__i summary{position:relative;display:block;min-height:44px;padding:18px 62px 18px 22px;list-style:none;cursor:pointer;font-family:var(--serif);font-size:1.12rem;font-weight:600;line-height:1.35}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary::after{content:"";position:absolute;right:18px;top:50%;width:30px;height:30px;margin-top:-15px;border-radius:50%}
.faq__b{padding:0 22px 18px}
.faq__b p:last-child{margin-bottom:0}

.callout{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;margin:0 0 20px;padding:20px 22px}
.callout__ico{display:grid;place-items:center;width:40px;height:40px;border-radius:12px}
.callout__t{display:block;margin-bottom:4px;font-family:var(--serif);font-size:1.1rem}
.callout p{margin:0}
.alert{margin:0 0 20px;padding:18px 22px}
.alert p:last-child{margin-bottom:0}
.quote{position:relative;margin:0 0 22px;padding:24px 28px 22px 32px}
.quote blockquote{margin:0;font-family:var(--serif);font-size:clamp(1.3rem,1rem + 1.2vw,1.75rem);line-height:1.35}
.quote figcaption{margin-top:10px;font-size:15px}
.keypoints{margin:0 0 24px;padding:22px 26px}
.keypoints__t{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-family:var(--serif);font-size:1.15rem}
.keypoints ul{margin:0;padding-left:1.1em}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:14px 0 0;padding:0}
.chips li{margin:0;padding:7px 14px;border-radius:999px;font-size:14.5px;font-weight:600}

.facts{max-width:var(--measure-wide);overflow:hidden}
.facts__h{display:flex;align-items:center;gap:10px;padding:16px 22px;font-family:var(--serif);font-size:1.15rem;font-weight:700}
.facttab{width:100%;border-collapse:collapse}
.facttab th,.facttab td{padding:13px 22px;text-align:left;font-size:16px;vertical-align:top}
.facttab th{width:44%}
.whofor{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
@media (min-width:700px){.whofor{grid-template-columns:repeat(2,minmax(0,1fr))}}
.forlist{padding:24px 26px}
.forlist ul{list-style:none;margin:0;padding:0}
.forlist li{display:flex;align-items:flex-start;gap:10px;margin:0 0 10px}
.badgewall{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:16px}
.badgewall figure{margin:0;padding:22px 18px;text-align:center}
.badgewall img{width:96px;height:96px;margin:0 auto 12px;object-fit:contain}
.badgewall figcaption{font-size:15px;line-height:1.45}
.badgewall figcaption b{display:block;margin-bottom:4px;font-family:var(--serif);font-size:1.02rem}
.trust{display:grid;justify-items:center;gap:18px;padding:22px}
.trust__seals{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 16px;max-width:340px;margin:0}
.trust__seals figcaption{flex-basis:100%;text-align:center;color:var(--muted);font-size:14.5px;line-height:1.45}
.trust__seals img{width:64px;height:64px}
.trust__lines{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;list-style:none;margin:0;padding:0}
.trust__lines li{display:flex;align-items:center;gap:8px;margin:0;font-size:15.5px;font-weight:600}
@media (min-width:1000px){.trust{grid-template-columns:auto minmax(0,1fr);justify-items:start;align-items:center}.trust__lines{justify-content:flex-start}}

/* pricing: three pack cards on subgrid, so heads, wells, price lines, perks
   and the three Add To Cart buttons share one line across the row */
.buy{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;max-width:460px;margin-inline:auto;padding-top:20px}
.buy__card{position:relative;display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:14px;padding:28px 22px 22px;border:2px solid transparent;text-align:center}
.buy__card--feature{order:-1}
/* heads bottom-aligned, so the three pack names sit on one line whether a
   card carries a flag in the flow or the ribbon above its edge */
.buy__head{position:relative;display:flex;flex-direction:column;justify-content:flex-end}
.buy__ribbon{position:absolute;left:50%;top:-44px;display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border-radius:999px;font-size:13.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;transform:translateX(-50%)}
.buy__flag{display:inline-block;margin-bottom:6px;font-size:13.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.buy__name{margin:0;font-size:1.6rem}
.buy__supply{margin:4px 0 0;font-size:15px}
.buy__well{display:grid;place-items:center;height:250px;padding:16px;border-radius:18px}
.buy__well img{width:100%;max-width:220px;height:auto}
.buy__price{display:grid;gap:4px;margin:0}
.buy__pricetag{font-family:var(--serif);font-size:1.45rem;font-weight:700}
.buy__per{font-size:15px}
.buy__perks{display:grid;gap:8px;list-style:none;margin:0;padding:0;text-align:left}
.buy__perks li{display:flex;align-items:flex-start;gap:10px;margin:0;font-size:15.5px}
.buy__add{min-height:56px}
.buy__why{font-size:15px}
.buy__why p{margin:0 0 12px}
.buy__why img{width:190px;margin:0 auto}
/* postbuild's pack_cards.py tags these cards `card--pack` and appends a flex
   column plus a 168px box for EVERY img in the card. Two classes outrank its
   one: the subgrid row stands (else the ribboned card's rows drift ~25px off
   its neighbours') and the payment strip keeps its own size (else it sits in
   a 168px-tall letterbox). */
.buy__card.card--pack{display:grid}
.buy__card.card--pack>.btn{margin-top:0}
.buy__card.card--pack .buy__well img{width:100%;max-width:212px;height:auto;margin:0}
.buy__card.card--pack .buy__why img{width:190px;max-width:100%;height:auto;margin:0 auto}
.buy__foot{display:grid;justify-items:center;gap:10px;max-width:760px;margin:24px auto 0;text-align:center}
.buy__foot img{width:230px;height:auto}
.buy__foot .note{margin:0}
@media (min-width:980px){.buy{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1120px}.buy__card--feature{order:0}}

.starbox{display:grid;gap:20px;padding:26px 28px}
.starbox__score b{display:block;font-family:var(--serif);font-size:3.4rem;line-height:1}
.starbox__score span{display:block;font-size:15.5px}
.starbox__bars{display:grid;gap:10px;list-style:none;margin:0;padding:0}
.starbox__bars li{display:grid;grid-template-columns:62px minmax(0,1fr) 48px;align-items:center;gap:12px;margin:0;font-size:15.5px}
.bar{display:block;height:10px;overflow:hidden;border-radius:999px}
.bar i{display:block;height:100%}
@media (min-width:760px){.starbox{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center}}
.qrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px}
.qcard{margin:0;padding:24px 24px 20px}
.qcard blockquote{margin:0 0 10px;font-family:var(--serif);font-size:1.45rem;line-height:1.3}
.qcard figcaption{font-size:15px}

.sfl{max-width:540px;padding:14px 16px 16px;border-radius:14px;font-size:16px;line-height:1.45}
.sfl__h{margin:0;padding-bottom:4px;font-family:var(--serif);font-size:2rem;font-weight:700;line-height:1.1}
.sfl__serv{margin:6px 0 0;padding-bottom:8px;font-size:15.5px}
.sfl__row{display:flex;justify-content:space-between;gap:14px;padding:8px 0}
.sfl__row span:last-child{flex:none;text-align:right}
.sfl__row--head{font-size:14.5px;font-weight:700}
.sfl__blend{margin:8px 0;padding-left:12px}
.sfl__foot{margin:0;padding-top:6px;font-size:14.5px}
.sfl__other{margin:8px 0 0;font-size:15px}

.final{position:relative;display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:clamp(20px,3vw,40px);padding:clamp(26px,4vw,56px);overflow:hidden}
.final__img{position:relative;display:grid;place-items:center;gap:12px;margin:0}
.final__img figcaption{position:relative;z-index:1;max-width:340px;text-align:center;color:var(--on-dark-2);font-size:14.5px;line-height:1.45}
.final__img::before{content:"";position:absolute;width:118%;aspect-ratio:1;border-radius:50%}
.final__img img{position:relative;z-index:1;width:100%;max-width:340px;height:auto}
.final h2{margin-bottom:.4em}
.final__cta{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0 14px}
.final__price{font-weight:600}
.final__small{margin:0;font-size:15px}
@media (min-width:880px){.final{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}

.rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px}
.rel__card{position:relative;display:flex;flex-direction:column;gap:6px;padding:22px 54px 22px 22px;text-decoration:none}
.rel__card b{font-family:var(--serif);font-size:1.12rem;line-height:1.3}
.rel__card span{font-size:15.5px;line-height:1.5}
.rel__go{position:absolute;right:20px;top:22px;font-style:normal;font-size:1.2rem}
.byline{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:start;gap:18px;margin-top:24px;padding:22px 24px}
.byline__mark,.byline__mark svg{display:block;width:64px;height:64px}
.byline b{font-family:var(--serif);font-size:1.1rem}
.byline p{margin:.3em 0 0;font-size:16px}
.refs{max-width:var(--measure-wide);padding:24px 28px}
.refs ol{display:grid;gap:10px;margin:0;padding-left:1.4em;font-size:15.5px;line-height:1.55}
.refs a{word-break:break-word}

.forms{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
@media (min-width:860px){.forms{grid-template-columns:repeat(2,minmax(0,1fr))}}
.formcard{padding:26px 26px 28px}
.form{display:grid;gap:6px}
.form label{margin-top:8px;font-size:15.5px;font-weight:600}
.form input,.form textarea{width:100%;min-height:48px;padding:12px 14px;border-radius:var(--radius-sm);font:inherit;font-size:17px}
.form textarea{min-height:130px;resize:vertical}
.form .btn{justify-self:start;margin-top:14px}

/* blog */
.article{max-width:var(--measure);margin-inline:auto}
.article h1{font-size:clamp(2rem,1.3rem + 2.3vw,2.9rem)}
.article h2{margin-top:1.8em;font-size:clamp(1.5rem,1.2rem + 1.1vw,1.95rem);scroll-margin-top:110px}
.article h3{margin-top:1.4em}
.postmeta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:12px 0;font-size:15px}
.toc{margin:26px 0;padding:20px 24px}
.toc h2{margin:0 0 10px;font-size:1.1rem}
.toc ol{margin:0;padding-left:1.2em;font-size:16px}
.article figure{margin:26px 0;overflow:hidden}
.article figure img{width:100%;height:auto}
.article figcaption{padding:12px 16px;font-size:15px}
.article figure.portrait{--figw:360px;max-width:var(--figw);margin-inline:auto}
.article .final{grid-template-columns:minmax(0,1fr);margin:30px 0;padding:26px;text-align:center}
.article .final__img img{max-width:220px}
.article .final__img{margin:0;overflow:visible;background:none;border:0;box-shadow:none}
.article .final__img figcaption{padding:0;color:var(--on-dark-2)}
.article .final .btn{margin-inline:auto}
.posts{display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
.posts img{width:100%;height:auto}
.pbody{padding:18px 20px}
.pmeta{font-size:14.5px}
@media (min-width:640px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.posts{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* bottom CTA bar: exists at every width (house rule 8) */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:block;transform:translateY(110%)}
.buybar.show{transform:translateY(0)}
.buybar__in{display:flex;align-items:center;gap:14px;width:min(1200px,100% - 24px);margin:0 auto 10px;padding:10px 12px 10px 14px;border-radius:18px}
.buybar__img{width:52px;height:52px;border-radius:12px;flex:none;object-fit:contain}
.buybar__t{flex:1;display:flex;flex-direction:column;line-height:1.3}
.buybar__t b{font-size:16px}
.buybar__t span{font-size:14.5px}
.buybar .btn{white-space:nowrap}
@media (max-width:560px){.buybar__img,.buybar__t span{display:none}.buybar__t b{font-size:15px}}

/* footer -- type floor met at source: 17px text and links, 15.5px headings */
.site-foot{position:relative;padding-bottom:110px;font-size:17px;line-height:1.65}
.foot__edge{position:absolute;left:0;right:0;bottom:100%;height:clamp(36px,5vw,80px);line-height:0;pointer-events:none}
.foot__edge svg{display:block;width:100%;height:100%}
.site-foot .wrap{padding-top:clamp(24px,4vw,44px)}
.foot__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
.foot__brand p{font-size:17px}
.brand--foot{margin-bottom:16px;white-space:normal;align-items:flex-start}
.brand--foot .brand__firm{white-space:normal;line-height:1.35}
.foot__call{display:flex;flex-direction:column;gap:2px}
.foot__call span{font-size:15.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.foot__call a{font-family:var(--serif);font-size:1.45rem;font-weight:700;text-decoration:none}
.fcol h2{margin:0 0 14px;font-family:var(--sans);font-size:15.5px;line-height:1.14;letter-spacing:.14em;text-transform:uppercase}
.fcol ul{list-style:none;margin:0;padding:0}
.fcol li{margin:0 0 4px}
.fcol a{display:inline-block;padding-block:4px;font-size:17px}
.foot__trust{display:grid;gap:20px;margin-top:36px;padding:22px}
.foot__seals{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.foot__seals img{width:56px;height:56px}
.foot__seals span{flex:1 1 220px;font-size:16px}
.foot__pay{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.foot__pay img{width:254px;height:auto}
.foot__pay span{flex:1 1 220px;font-size:16px}
.foot__nap{margin-top:30px;font-size:16px}
.foot__nap p{margin:0 0 6px}
.foot__legal{display:flex;flex-wrap:wrap;gap:8px 22px;margin:26px 0 0;padding-top:22px;font-size:16px}
.foot__disc{margin-top:22px;font-size:16px;line-height:1.6}
.foot__disc p{margin:0 0 12px}
.foot__disc .copy{font-size:16px}
@media (min-width:760px){.foot__grid{grid-template-columns:repeat(3,minmax(0,1fr))}.foot__brand{grid-column:1/-1}}
@media (min-width:1100px){.foot__grid{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr))}.foot__brand{grid-column:auto}}
@media (min-width:1000px){.foot__trust{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center}}

/* at-a-glance sheet (.qa, speakable), guarantee panel, tight sections, the
   blog reading card */
.sec--tight{padding-block:clamp(28px,4vw,52px)}
.qa{max-width:var(--measure-wide);overflow:hidden}
.qa__h{display:flex;align-items:center;gap:10px;padding:16px 24px;font-family:var(--serif);font-size:1.15rem;font-weight:700;line-height:1.3}
.qa dl{display:grid;grid-template-columns:minmax(0,1fr);margin:0}
.qa dt,.qa dd{margin:0;padding:12px 22px}
.qa dt{padding-bottom:0;font-size:14.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.qa dd{padding-top:4px;font-size:16.5px;line-height:1.55}
@media (min-width:700px){.qa dl{grid-template-columns:minmax(0,.36fr) minmax(0,1fr)}.qa dt{padding:14px 22px}.qa dd{padding:14px 22px}}
.guarantee{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,3vw,36px);align-items:center;max-width:var(--measure-wide);padding:clamp(22px,3vw,36px)}
.guarantee__fig{display:grid;justify-items:center;gap:10px;margin:0;text-align:center}
.guarantee__fig figcaption{max-width:230px;color:var(--muted);font-size:14.5px;line-height:1.45}
.guarantee__seal{display:grid;place-items:center;width:176px;height:176px;margin-inline:auto;border-radius:50%}
.guarantee__seal img{width:132px;height:132px}
.guarantee__b h3{margin-top:0}
.guarantee__b>:last-child{margin-bottom:0}
.guarantee__foot{margin:12px 0 0;padding-top:12px;font-size:15px}
@media (min-width:700px){.guarantee{grid-template-columns:auto minmax(0,1fr)}}
.sep{display:inline-block;margin-inline:2px}
.sec>.wrap.article{padding:clamp(22px,4.5vw,60px)}

/*!CRITICAL-END*/

/* =====================================================================
   PAINT -- colour, grounds, radius, shadow, hover, reveal. Nothing below
   this line moves a box.
   ===================================================================== */

/* grounds */
.sec{background:var(--paper)}
.sec--white{background:var(--card)}
.sec--tint{background-color:var(--paper-2);background-image:radial-gradient(rgba(68,78,110,.10) 1px,transparent 1.3px);background-size:22px 22px}
.sec--band{background-color:var(--night);background-image:radial-gradient(rgba(171,183,224,.10) 1px,transparent 1.3px);background-size:22px 22px;color:var(--on-dark-2)}
.phero{background:radial-gradient(48% 70% at 92% 10%,rgba(143,157,205,.22),rgba(143,157,205,0) 70%),linear-gradient(180deg,#f8f9fe 0%,var(--paper-2) 100%)}
.eyebrow{color:var(--accent)}
.lead{color:var(--muted)}
.crumbs,.crumbs a{color:var(--muted)}
.crumbs span:last-child{color:var(--ink-2)}

/* the one radius scale, on every raised surface */
.card,.ingcard,.panel,.step,.tl__b,.faq,.faq__i,.keypoints,.forlist,.badgewall figure,.quote,.byline,.refs,.formcard,.facts,.tablewrap,.trust,.qcard,.starbox,.answer,.callout,.alert,.toc,.stat,.rel__card,.split__img,.fig__frame,.buy__card,.posts article,.article figure{border-radius:var(--radius)}
.final{border-radius:var(--radius-lg)}
.figures>div{border-radius:16px}

/* light surfaces carry their own ink, so a dark band never bleeds into them */
.card,.ingcard,.panel,.step,.tl__b,.faq__i,.keypoints,.forlist,.badgewall figure,.quote,.byline,.refs,.formcard,.facts,.tablewrap,.trust,.qcard,.starbox,.rel__card,.buy__card,.posts article{background:var(--card);border:1px solid var(--line-soft);box-shadow:var(--shadow);color:var(--ink-2)}
.buy__card{border:2px solid transparent}

/* icon tiles and tags */
.ico{background:linear-gradient(145deg,#6272aa 0%,#303853 100%);color:#fff;box-shadow:0 12px 24px -12px rgba(98,114,170,.8)}
.ico--peri{background:linear-gradient(145deg,#9ba1c1 0%,#5b607f 100%);box-shadow:0 12px 24px -12px rgba(91,96,127,.8)}
.ico--gold{background:linear-gradient(145deg,#cf9f42 0%,#7d5b14 100%);box-shadow:0 12px 24px -12px rgba(125,91,20,.7)}
.tag--mineral{background:var(--accent-tint);color:var(--accent)}
.tag--mito{background:#e8e9f5;color:#4d5271}
.tag--flow{background:var(--rose-tint);color:#94382f}
.tag--botanical{background:var(--gold-tint);color:var(--gold-deep)}
.ing__amt{border-radius:12px;background:var(--accent-tint);border:1px solid var(--accent-line);color:var(--accent-ink)}
.ingcard__role{color:var(--ink)}
.ingcard__warn{border-radius:12px;background:var(--gold-tint);color:#5b4312}
.ingcard__warn .i{color:var(--gold-deep)}
.ingcard__src{border-top:1px dashed var(--line);color:var(--muted)}

/* stats */
.stat{background:var(--card);border:1px solid var(--line-soft);box-shadow:var(--shadow)}
.stat b{color:var(--accent)}
.stat span{color:var(--ink)}
.stat small{color:var(--muted)}

/* steps and timeline */
.step__n{background:linear-gradient(145deg,#6272aa 0%,#303853 100%);color:#fff;box-shadow:0 0 0 6px var(--accent-tint)}
.steps--3::before,.steps--4::before{background:repeating-linear-gradient(90deg,var(--accent-line) 0 8px,rgba(0,0,0,0) 8px 14px)}
.tline::before{background:linear-gradient(180deg,var(--electric),var(--accent-line))}
.tl::before{background:#fff;border:4px solid var(--electric);box-shadow:0 0 0 5px var(--accent-tint)}
.tl__when{background:var(--night);color:#fff}

/* figures */
.fig__frame{box-shadow:var(--shadow);background:var(--paper-2)}
.fig--well .fig__frame{background:radial-gradient(70% 70% at 50% 45%,#ffffff 0%,var(--paper-3) 100%);border:1px solid var(--line-soft)}
.fig--label .fig__frame{background:#fff;border:1px solid var(--line-soft)}
.fig figcaption{color:var(--muted)}
.fig figcaption b{color:var(--ink)}

/* tables */
.dtable caption{color:var(--ink)}
.dtable th{background:var(--night);color:#fff}
.dtable td{border-top:1px solid var(--line-soft);color:var(--ink-2)}
.dtable td:first-child{color:var(--ink);font-weight:600}
.dtable tbody tr:nth-child(even) td{background:#f8f9fd}
.dtable td.is-hl{background:var(--accent-tint);color:var(--accent-ink)}
.dtable tbody tr:nth-child(even) td.is-hl{background:#e0e4f5}
.dtable th.is-hl{background:var(--accent)}
.note{color:var(--muted)}
.facts__h{background:var(--night);color:#fff}
.facts__h .i{color:var(--glow)}
.facttab th{color:var(--ink);font-weight:600}
.facttab td{color:var(--ink-2)}
.facttab tr+tr th,.facttab tr+tr td{border-top:1px solid var(--line-soft)}
.facttab__all th,.facttab__all td{background:var(--accent-tint);color:var(--accent-ink);font-weight:700}

/* faq */
.faq__i summary{color:var(--ink)}
.faq__i summary::after{background:linear-gradient(var(--accent),var(--accent)) center/12px 2px no-repeat,linear-gradient(var(--accent),var(--accent)) center/2px 12px no-repeat,var(--accent-tint);transition:transform .25s ease}
.faq__i[open]{border-color:var(--accent-line);box-shadow:var(--lift)}
.faq__i[open] summary::after{transform:rotate(45deg)}

/* callouts */
.callout{border:1px solid var(--accent-line);background:var(--accent-tint);color:var(--ink)}
.callout__ico{background:var(--accent);color:#fff}
.callout--alert{border-color:#efc9c3;background:var(--rose-tint)}
.callout--alert .callout__ico{background:var(--rose)}
.callout--good{border-color:#bfe0d6;background:var(--mint-tint)}
.callout--good .callout__ico{background:var(--mint)}
.callout--honest{border-color:var(--line-soft);border-left:4px solid var(--gold);background:#fff;box-shadow:var(--shadow)}
.callout--honest .callout__ico{background:var(--gold-tint);color:var(--gold-deep)}
.alert{border:1px solid #efc9c3;background:var(--rose-tint);color:var(--ink)}
.quote::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:4px;border-radius:4px;background:linear-gradient(180deg,#6272aa,#303853)}
.quote blockquote{color:var(--ink)}
.quote figcaption{color:var(--muted)}
.keypoints{border-top:4px solid var(--electric)}
.keypoints__t{color:var(--ink)}
.keypoints__t .i{color:var(--electric)}
.chips li{background:#fff;border:1px solid var(--line);color:var(--ink-2)}
.panel__kick{color:var(--accent)}
.panel h3{color:var(--ink)}
.checks .ck{background:var(--accent-tint);color:var(--accent)}
.forlist .ck{background:var(--mint-tint);color:var(--mint)}
.forlist--no .ck{background:var(--rose-tint);color:var(--rose)}
.badgewall figcaption{color:var(--muted)}
.badgewall figcaption b{color:var(--ink)}
.trust__lines li{color:var(--ink)}
.trust__lines .i{color:var(--accent)}

/* pricing */
.buy__card--feature{border-color:var(--electric);box-shadow:0 0 0 6px rgba(98,114,170,.10),var(--lift)}
.buy__ribbon{background:linear-gradient(135deg,#6272aa 0%,#303853 100%);color:#fff;box-shadow:0 10px 22px -10px rgba(98,114,170,.8)}
.buy__flag{color:var(--muted)}
.buy__supply,.buy__per,.buy__why{color:var(--muted)}
.buy__well{background:radial-gradient(75% 70% at 50% 42%,#ffffff 0%,#e5e9f6 100%)}
.buy__pricetag{color:var(--ink)}
.buy__perks .i{margin-top:2px;color:var(--accent)}
.btn--solid:hover{background:var(--night-3)}

/* reviews */
.starbox__score b{color:var(--accent)}
.starbox__score span{color:var(--muted)}
.bar{background:var(--paper-3)}
.bar i{background:linear-gradient(90deg,#6272aa,#303853)}
.qcard blockquote{color:var(--ink)}
.qcard figcaption{color:var(--muted)}

/* the Supplement Facts label, drawn as the label draws it */
.sfl{background:#fff;color:#111;border:2px solid #111}
.sfl b{color:#111}
.sfl__h{border-bottom:1px solid #111}
.sfl__serv{border-bottom:10px solid #111}
.sfl__row{border-bottom:1px solid #111}
.sfl__row--head{border-bottom:5px solid #111}
.sfl__row--blend{border-top:4px solid #111}
.sfl__foot{border-top:8px solid #111}

/* closing panel */
.final{background-color:var(--night);background-image:radial-gradient(rgba(171,183,224,.12) 1px,transparent 1.3px);background-size:22px 22px;color:var(--on-dark-2);box-shadow:var(--lift)}
.final h2,.final b{color:#fff}
.final__img::before{background:radial-gradient(closest-side,rgba(140,152,227,.5),rgba(101,111,189,0))}
.final__price{color:#e2e6f8}
.final__small{color:var(--on-dark-2)}
.eyebrow--light{color:var(--glow)}

/* related, byline, refs, forms */
.rel__card b{color:var(--ink)}
.rel__card span{color:var(--muted)}
.rel__go{color:var(--accent)}
.byline b{color:var(--ink)}
.refs ol{color:var(--ink-2)}
.formcard h3{color:var(--ink)}
.form label{color:var(--ink)}
.form input,.form textarea{border:1.5px solid var(--line);background:#fff;color:var(--ink)}
.form input:focus,.form textarea:focus{border-color:var(--electric);outline:none;box-shadow:0 0 0 4px rgba(98,114,170,.16)}

/* at-a-glance sheet and guarantee panel */
.qa{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius);box-shadow:var(--shadow)}
.qa__h{background:var(--night);color:#fff}
.qa__h .i{color:var(--glow)}
.qa dt{color:var(--accent)}
.qa dd{color:var(--ink-2)}
.qa dd+dt{border-top:1px solid var(--line-soft)}
@media (min-width:700px){.qa dd+dt,.qa dd+dt+dd{border-top:1px solid var(--line-soft)}}
.guarantee{background:var(--card);border:1px solid var(--line-soft);border-top:4px solid var(--gold);border-radius:var(--radius);box-shadow:var(--shadow);color:var(--ink-2)}
.guarantee__seal{background:radial-gradient(closest-side,#fff8e6 0%,var(--gold-tint) 62%,rgba(247,238,217,0) 100%)}
.guarantee__foot{border-top:1px dashed var(--line);color:var(--muted)}
.sec--band .qa,.sec--band .guarantee{background:var(--night-2);border-color:rgba(171,183,224,.16);color:var(--on-dark-2)}
.sec--band .qa dd{color:var(--on-dark-2)}
.sep{color:var(--faint)}

/* blog: the article column is a white reading card on the paper ground */
.sec>.wrap.article{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius);box-shadow:var(--shadow)}
.postmeta{border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--muted)}
.toc{background:var(--paper-2);border:1px solid var(--line-soft)}
.article figure{background:#fff;border:1px solid var(--line-soft);box-shadow:var(--shadow)}
.article figcaption{color:var(--muted)}
.pmeta{color:var(--muted)}
.posts h3 a{color:var(--ink);text-decoration:none}

/* the dark proof band: solid inverse cards */
.sec--band h2,.sec--band h3,.sec--band b,.sec--band strong{color:#fff}
.sec--band .eyebrow{color:var(--glow)}
.sec--band .lead{color:var(--on-dark-2)}
.sec--band a{color:#cad3f3}
.sec--band .card,.sec--band .ingcard,.sec--band .panel,.sec--band .step,.sec--band .tl__b,.sec--band .stat,.sec--band .keypoints,.sec--band .forlist,.sec--band .faq__i,.sec--band .tablewrap,.sec--band .facts,.sec--band .qcard{background:var(--night-2);border-color:rgba(171,183,224,.16);color:var(--on-dark-2);box-shadow:0 1px 1px rgba(0,0,0,.25),0 24px 60px -24px rgba(0,0,0,.6)}
.sec--band .stat b{color:#fff}
.sec--band .stat span{color:#e5e8f8}
.sec--band .stat small,.sec--band .ingcard__src,.sec--band .note{color:var(--on-dark-2)}
.sec--band .step__n{box-shadow:0 0 0 6px rgba(171,183,224,.14)}
.sec--band .fig figcaption{color:var(--on-dark-2)}
.sec--band .fig figcaption b{color:#fff}
.sec--band .dtable td{background:var(--night-2);border-color:rgba(171,183,224,.12);color:var(--on-dark-2)}
.sec--band .dtable td:first-child{color:#fff}
.sec--band .dtable tbody tr:nth-child(even) td{background:#273049}
.sec--band .dtable th{background:#0f1423}
.sec--band .dtable caption,.sec--band .faq__i summary,.sec--band .keypoints__t{color:#fff}
.sec--band .tl::before{background:var(--night)}
.sec--band .tl__when{background:var(--electric)}
.sec--band .ing__amt{background:rgba(171,183,224,.12);border-color:rgba(171,183,224,.25);color:#e5e8f8}
.sec--band .callout,.sec--band .callout b{color:var(--ink)}

/* motion: every clickable surface answers the pointer */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
[data-reveal].in{opacity:1;transform:none;transition:opacity .6s ease,transform .3s ease,box-shadow .25s ease}
.btn{transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,border-color .18s ease,color .18s ease}
.card,.ingcard,.step,.tl__b,.badgewall figure,.rel__card,.posts article,.buy__card,.qcard,.fig__frame,.forlist,.formcard,.stat,.faq__i{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.btn:hover{transform:translateY(-2px)}
.btn--cta:hover{box-shadow:0 18px 36px -10px rgba(98,114,170,.72),0 3px 6px rgba(28,35,56,.18)}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn--ghost-light:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.card:hover,.ingcard:hover,.step:hover,.tl__b:hover,.badgewall figure:hover,.rel__card:hover,.posts article:hover,.buy__card:hover,.qcard:hover,.fig__frame:hover,.forlist:hover,.formcard:hover,.stat:hover{transform:translateY(-3px);box-shadow:var(--lift)}
.rel__card:hover{border-color:var(--accent-line)}
.menu a:hover,.fcol a:hover{color:var(--accent)}
.brand:hover .brand__word span{color:var(--electric)}
:focus-visible{outline:3px solid var(--electric-soft);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1;transform:none;transition:none}
  .btn:hover,.card:hover,.ingcard:hover,.step:hover,.tl__b:hover,.badgewall figure:hover,.rel__card:hover,.posts article:hover,.buy__card:hover,.qcard:hover,.fig__frame:hover,.forlist:hover,.formcard:hover,.stat:hover{transform:none}
  .buybar,.nav{transition:none}
}

/* bottom bar and footer paint */
.buybar{transition:transform .32s ease}
.buybar__in{background:var(--night);border:1px solid rgba(171,183,224,.2);color:#fff;box-shadow:0 18px 40px -12px rgba(22,29,48,.6),0 2px 6px rgba(22,29,48,.22)}
.buybar__img{background:#fff}
.buybar__t b{color:#fff}
.buybar__t span{color:var(--on-dark-2)}
.site-foot{background-color:var(--night);background-image:radial-gradient(rgba(171,183,224,.08) 1px,transparent 1.3px);background-size:22px 22px;color:var(--on-dark-2)}
.foot__edge{color:var(--night)}
.foot__edge path{fill:var(--night)}
.site-foot h2{color:#fff}
.site-foot a{color:#dfe4f7;text-decoration:none}
.site-foot a:hover{color:#fff;text-decoration:underline}
.site-foot strong,.site-foot b{color:#fff}
.brand--foot .brand__word{color:#fff}
.brand--foot .brand__word span{color:var(--glow)}
.brand--foot .brand__firm{color:var(--on-dark-2)}
.foot__call span{color:var(--glow)}
.foot__call a{color:#fff}
.foot__trust{background:var(--night-2);border:1px solid rgba(171,183,224,.14);border-radius:var(--radius)}
.foot__legal{border-top:1px solid rgba(171,183,224,.18)}
.foot__disc{color:#b8bed4}

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

/* ==== 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 .brand__firm{font-size:16px}
footer .foot__call span{font-size:16px}
/* ==== end footer type floor ==== */
.review-foot{margin:0;padding:.6rem 0;font-size:.92rem}.review-foot a{font-weight:600}