/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Frank Ruhl Libre Fallback";src:local("Georgia");font-weight:400;size-adjust:99.04%;ascent-override:96.62%;descent-override:33.72%;line-gap-override:0.00%}
@font-face{font-family:"Frank Ruhl Libre Fallback";src:local("Georgia Bold");font-weight:600 900;size-adjust:89.39%;ascent-override:107.06%;descent-override:37.36%;line-gap-override:0.00%}
@font-face{font-family:"Assistant Fallback";src:local("Arial");font-weight:400;size-adjust:93.88%;ascent-override:108.76%;descent-override:30.57%;line-gap-override:0.00%}
@font-face{font-family:"Assistant Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:91.80%;ascent-override:111.22%;descent-override:31.26%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* getneuromind.com — Neuromind Pro, U.S. authorized retailer desk.
   Design slot 31 (batch6_assignments.py): Frank Ruhl Libre / Assistant, cool
   periwinkle paper, asymmetric two-column masthead, hairline-ruled footer index
   over a navy disclaimer slab, signal-trace hero motif.

   The bottle is WHITE with a periwinkle molecular print, so the page cannot
   also be white or the product disappears into it. The ground is tinted and the
   panels are white: the product reads as the brightest object on the screen.

   Everything above CRITICAL-END is inlined into every page head. */

/* ---- tokens */
:root{
  --ink:#101a2c;            /* body text */
  --ink-2:#44506a;          /* secondary text */
  --ink-3:#6b7690;          /* captions, meta */
  --accent:#1a4fa0;         /* the "PRO" blue off the bottle wordmark */
  --accent-d:#12376f;       /* pressed / deep */
  --accent-l:#e7edf9;       /* accent wash */
  --node:#93a4d0;           /* the periwinkle of the molecular print */
  --paper:#f3f5fb;          /* the page */
  --panel:#ffffff;          /* cards, panels */
  --tint:#eaeef8;           /* tinted section */
  --navy:#0c1729;           /* the disclaimer slab and dark bands */
  --navy-2:#16243d;
  --line:#dde3f2;           /* hairline */
  --line-2:#c6cfe6;         /* stronger hairline */
  --good:#15734a;
  --warn:#8a5a10;
  --wrap:1180px;
  --measure:760px;          /* prose */
  --measure-wide:980px;     /* tables, FAQ, step rows */
  --radius:3px;             /* this site is square; the corner notch is the shape */
  --notch:11px;      /* the button's clipped corner. Declared here as well as on
                        .btn because validate.py resolves custom properties against
                        :root and reads a locally-scoped one as undefined. */
  --radius-card:6px;
  --shadow:0 1px 2px rgba(16,26,44,.05), 0 8px 26px rgba(16,26,44,.06);
  --shadow-lg:0 18px 50px rgba(12,23,41,.14);
  --navh:86px;
  --serif:"Frank Ruhl Libre","Frank Ruhl Libre Fallback",Georgia,"Times New Roman",serif;
  --sans:"Assistant","Assistant Fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* ---- base */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
body{
  overflow-x:clip;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.72;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-underline-offset:3px}
a:hover{color:var(--accent-d)}
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);font-weight:700;line-height:1.18;margin:0 0 .5em}
h1{font-size:clamp(2rem,1.35rem + 2.1vw,3.05rem);letter-spacing:-.012em}
h2{font-size:clamp(1.5rem,1.2rem + 1.15vw,2.15rem);letter-spacing:-.008em}
h3{font-size:1.19rem;font-weight:700}
h4{font-size:1.02rem;font-weight:700}
p,li{font-size:1.0625rem}
p{margin:0 0 1.05em}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* The eyebrow names the JOB of the section beneath it. Every section has one. */
.eyebrow{
  display:inline-block;font-family:var(--sans);font-size:0.8438rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  margin:0 0 10px;padding:0 0 0 22px;position:relative;
}
.eyebrow::before{
  content:"";position:absolute;left:0;top:.62em;width:14px;height:2px;background:var(--node);
}

/* ---- buttons: square, with the top-right corner notched off */
.btn{
  --notch:11px;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;padding:14px 30px;
  font-family:var(--sans);font-size:1rem;font-weight:700;letter-spacing:.01em;
  border:0;border-radius:var(--radius);cursor:pointer;text-decoration:none;
  background:var(--accent);color:#fff;
  clip-path:polygon(0 0,calc(100% - var(--notch)) 0,100% var(--notch),100% 100%,0 100%);
  transition:background .18s ease,transform .18s ease;
}
.btn:hover{background:var(--accent-d);color:#fff}
.btn:active{transform:translateY(1px)}
.btn--lg{min-height:60px;padding:16px 38px;font-size:1.07rem;--notch:14px}
.btn--ghost{
  background:transparent;color:var(--accent);
  box-shadow:inset 0 0 0 2px var(--line-2);
}
.btn--ghost:hover{background:var(--accent-l);color:var(--accent-d)}
.btn--wide{width:100%}

/* ---- header: asymmetric two-column masthead.
   LEFT is a tall wordmark block with its sub-label. RIGHT stacks a thin facts
   line over the menu and the CTA. One hairline under the whole bar and nothing
   else — no top strip, no second background. */
.nav{
  position:sticky;top:0;z-index:100;background:var(--paper);
  border-bottom:1px solid var(--line);
}
.nav__row{
  display:grid;grid-template-columns:auto 1fr;align-items:stretch;gap:26px;
  padding-block:12px;
}
.brand{
  display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);
  padding-right:26px;border-right:1px solid var(--line);
}
.brand__glyph{width:30px;height:30px;flex:0 0 auto}
/* Size the mark by ELEMENT, not only by class. brand_marks.py rewrites the
   <svg> inside .brand and does NOT carry class="brand__glyph" onto the
   replacement, so a rule keyed to that class stops applying the moment the
   tool runs and the glyph renders at its intrinsic size. Measured on
   getprostacyl: the brand row went 74px on blog pages (original markup,
   class intact) to 120px on every root page (rewritten, class gone) -- a
   masthead two different heights on one site, which is pitfall 16.
   Five sites on the estate are in that state. Keying the element as well
   makes this immune to whatever the tool emits. */
.brand>svg{width:30px;height:30px;flex:0 0 auto}

.bw{display:flex;flex-direction:column;line-height:1.1}
.bw b{font-family:var(--serif);font-size:1.31rem;font-weight:800;letter-spacing:-.015em}
.bw b em{font-style:normal;color:var(--accent)}
.bw small{font-size:0.9062rem;font-weight:600;color:var(--ink-3);letter-spacing:.02em}
.nav__stack{display:flex;flex-direction:column;justify-content:center;gap:7px;min-width:0}
.nav__facts{
  display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;justify-content:flex-end;
  font-size:.8125rem;font-weight:600;color:var(--ink-3);
}
.nav__facts b{color:var(--ink-2);font-weight:700}
.nav__facts span{display:inline-flex;align-items:center;gap:6px}
.nav__facts span+span::before{content:"";width:3px;height:3px;border-radius:50%;background:var(--node)}
.nav__low{display:flex;align-items:center;justify-content:flex-end;gap:18px;min-width:0}
.menu{display:flex;flex-wrap:wrap;gap:4px 20px;list-style:none;margin:0;padding:0;justify-content:flex-end}
.menu a{
  display:inline-block;padding:7px 2px;font-size:.96rem;font-weight:600;
  color:var(--ink-2);text-decoration:none;border-bottom:2px solid transparent;
}
.menu a:hover{color:var(--accent)}
.menu a[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent)}
.menu__more{display:none}
.nav__buy{min-height:44px;padding:10px 20px;font-size:.94rem;--notch:9px}
.burger{
  display:none;width:46px;height:44px;background:transparent;border:1px solid var(--line-2);
  border-radius:var(--radius);cursor:pointer;padding:11px 10px;
}
.burger span{display:block;height:2px;background:var(--ink);margin:0 0 5px}
.burger span:last-child{margin:0}

/* ---- hero: copy LEFT, product on a white card that overlaps the bottom seam */
.hero{
  position:relative;
  background:
    radial-gradient(120% 90% at 84% 10%, var(--tint), transparent 62%),
    var(--paper);
  padding:56px 0 0;
  border-bottom:1px solid var(--line);
}
.hero__grid{
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:46px;align-items:start;
}
.hero__copy{display:flex;flex-direction:column;min-width:0;padding-bottom:64px}
.hero h1{margin:0 0 18px}
.hero h1 em{font-style:normal;color:var(--accent)}
.answer{
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);
  padding:20px 22px;margin:0 0 22px;border-radius:0 var(--radius-card) var(--radius-card) 0;
  box-shadow:var(--shadow);
}
.answer p{margin:0 0 .75em;font-size:1.062rem}
.answer p:last-child{margin:0}
.answer b{color:var(--ink)}
/* the roadmap line: what this page covers. It sits just outside .answer so the
   Quick Answer block stays inside its 40-75 word window (preflight), while the
   reader still gets the contents of the page in one sentence. */
.hero__road{font-size:1rem;color:var(--ink-2);margin:0 0 20px;max-width:56ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 20px}
.hero__sub{
  display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 0 18px;
  font-size:0.9688rem;font-weight:600;color:var(--ink-2);
}
.hero__sub span{display:inline-flex;align-items:center;gap:7px}
.hero__sub span::before{
  content:"";width:7px;height:7px;background:var(--accent);flex:0 0 auto;
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.factpills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 18px;padding:0}
.factpills li{
  font-size:0.9062rem;font-weight:600;color:var(--ink-2);
  background:var(--panel);border:1px solid var(--line);padding:7px 13px;border-radius:2px;
}
.factpills li b{color:var(--ink);font-weight:800}
.figures{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0}
.figures div{background:var(--panel);border:1px solid var(--line);padding:13px 14px;border-radius:var(--radius-card)}
.figures b{display:block;font-family:var(--serif);font-size:1.5rem;font-weight:800;color:var(--accent);line-height:1.1}
.figures span{display:block;font-size:0.9062rem;font-weight:600;color:var(--ink-3);margin-top:3px}

/* the product card, overlapping the hero's bottom edge into the next section */
.hero__media{position:relative;align-self:start}
.hero__card{
  position:relative;z-index:2;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius-card);
  padding:26px 26px 20px;box-shadow:var(--shadow-lg);
  margin-bottom:-64px;      /* the overlap */
}
.hero__card img{width:100%;height:auto;margin-inline:auto}
.hero__cap{
  display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;
  margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line);
  font-size:.8125rem;font-weight:600;color:var(--ink-3);text-align:center;
}
.trust__row{
  display:flex;flex-wrap:wrap;gap:10px 22px;margin:0;padding:0;list-style:none;
  font-size:0.9062rem;font-weight:600;color:var(--ink-2);
}
.trust__row li{display:inline-flex;align-items:center;gap:8px}
.trust__row li::before{content:"\2713";color:var(--good);font-weight:800}

/* ---- inner page head */
.phead{padding:34px 0 8px;border-bottom:1px solid var(--line);background:var(--paper)}
.crumbs{font-size:0.9062rem;color:var(--ink-3);margin:0 0 14px}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.phead h1{margin:0 0 16px;max-width:var(--measure-wide)}
.phead .answer{max-width:var(--measure-wide)}
.lead{font-size:1.14rem;color:var(--ink-2);max-width:var(--measure)}

/* ---- topline strip: 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 -- getexitide shipped without one, pushed the lot into
   the menu as a chip, crowded the navigation and still left the other four
   facts off the page (hero.md). Sits ABOVE CRITICAL-END because it is the first
   thing painted; appended to the end of the stylesheet it would load async and
   flash unstyled at the very top of the page. */
.util{background:var(--navy);color:#aeb9d1;font-size:.8125rem;line-height:1.5}
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;padding-block:8px}
.util__item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.util__item+.util__item::before{content:"";width:3px;height:3px;border-radius:50%;
  background:#5a6a8c;flex:0 0 auto;margin-right:11px}
.util b{color:#e2e8f5;font-weight:700}
.util a{color:inherit;text-decoration:none}
.util a:hover{text-decoration:underline}
@media (max-width:760px){
  /* Five items wrap to three lines and eat 103px of an 844px screen (hero.md).
     Keep role, guarantee and phone; the lot and the dose are on the pages that
     need them. */
  .util__item--trim{display:none}
  .util__row{gap:4px 14px}
}


/* ---- hero motif -- rise ------------------------------------------------
   Slot motif for this site: warmth lifting off the base of the bottle,
   drifting up and fading out. It replaces the signal-trace ring the site
   shipped with (its nmSignal / nmDrift keyframes go with it; nothing else
   referenced them).

   Above the critical marker on purpose, where the pass it replaces lived:
   the hero ground and the motif are inlined, so the first paint is already
   the finished picture rather than one that changes when style.css lands.

   Both layers are pseudo-elements of .hero__media and NEVER the <img>, which
   is the LCP element and is preloaded. Both are sized LARGER than the 786px
   product card -- 128% of the column wide, 92% and 116% of it tall -- so they
   read outside the card instead of disappearing behind an opaque panel.
   Transform and opacity only, 19s and 34s, and both are switched off under
   prefers-reduced-motion. */
.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(64% 52% at 76% 88%,rgba(246,215,163,.55),rgba(246,215,163,0) 70%),radial-gradient(96% 74% at 82% 6%,#dce5f6,rgba(220,229,246,0) 64%),linear-gradient(180deg,#eef2fb,#e5ebf8 48%,#f3f5fb)}
.hero__media::before{content:'';position:absolute;left:50%;bottom:1%;translate:-50% 0;width:128%;height:92%;border-radius:50% 50% 46% 46%/62% 62% 38% 38%;background:radial-gradient(62% 60% at 50% 97%,rgba(247,215,158,.82),rgba(247,215,158,0) 74%),radial-gradient(78% 70% at 50% 94%,rgba(26,79,160,.22),rgba(26,79,160,0) 78%);-webkit-mask:linear-gradient(0deg,#000 8%,rgba(0,0,0,.58) 60%,transparent 96%);mask:linear-gradient(0deg,#000 8%,rgba(0,0,0,.58) 60%,transparent 96%);animation:nmLift 19s ease-in-out infinite;z-index:0;pointer-events:none}
.hero__media::after{content:'';position:absolute;left:-14%;right:-14%;bottom:-9%;height:116%;background-image:radial-gradient(rgba(247,217,164,.9) 1.8px,transparent 2px),radial-gradient(rgba(26,79,160,.34) 1.3px,transparent 1.5px);background-size:76px 120px,52px 120px;background-position:0 0,27px 44px;opacity:.55;-webkit-mask:linear-gradient(0deg,transparent 0,#000 24%,transparent 86%);mask:linear-gradient(0deg,transparent 0,#000 24%,transparent 86%);animation:nmMotes 34s linear infinite;z-index:1;pointer-events:none}
@keyframes nmLift{0%,100%{transform:translate3d(0,12px,0) scale(1);opacity:.68}50%{transform:translate3d(0,-14px,0) scale(1.05);opacity:1}}
@keyframes nmMotes{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-120px,0)}}
@media(prefers-reduced-motion:reduce){.hero__card{animation:none!important}.hero__media::before{animation:none!important}.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. */
@media (max-width:1060px){
  .hero__grid{gap:34px}
}
@media (max-width:980px){
  .hero__copy{display:contents}
  .hero__media{order:3;margin-bottom:34px}
  .hero__card{margin-bottom:0}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero__road{order:5}
  .hero__cta{order:6}
  .hero__sub{order:8}
}
@media (max-width:760px){
  .hero{padding-top:36px}
}
@media (min-width: 981px){
  .hero__media{position: sticky; top: calc(var(--navh, 88px) + 14px); align-self: start; min-height: calc(100vh - var(--navh, 88px) - 28px); min-height: calc(100svh - var(--navh, 88px) - 28px); display: flex; flex-direction: column; align-items: center; justify-content: center;}
}
@media (prefers-reduced-motion: reduce){
  .hero__media{position: relative; top: 0; min-height: 0;}
}







/*!SITE-HOME-CRIT-START*/
/* Home page GEOMETRY. This block is inlined into all 30 pages, so every
   selector is gated on .hero, which only index.html carries, or on
   `.hero ~ .sec`, both children of main#main.

   1. The buying CTA has to be on the first screen. Measured at 1440x900
      before this change: the first hero button sat at y=855 and its bottom
      edge was 17px past the 900px fold, so the money page opened with a
      button you could not read. Re-ordering the copy column puts it at ~725.
      DESKTOP ONLY -- under 981px .hero__copy is display:contents and its
      order is composed by the block above, which is left alone.

   2. The pack flag becomes a full-width bar across the top of the card (the
      slot's ribbon). Negative margins take it out of .card's 22px padding;
      the unflagged card gets an identical empty bar, both fixed at 34px, so
      the three pack heads stay on one line. The featured card is raised with
      margin-top and grows UPWARD: .card--pack>.pack__body>.btn is pinned with
      margin-top:auto, so the card's bottom edge -- and therefore the three
      Add To Cart baselines -- do not move. Never a transform: the reveal pass
      sets transform:none and would erase it. */
@media (min-width:981px){
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero .answer{order:3}
  .hero .hero__cta{order:4}
  .hero .hero__sub{order:5}
  .hero .hero__road{order:6}
  .hero .factpills{order:7}
  .hero .figures{order:8}
}
.hero~.sec .card--pack>.pack__flag{position:static;flex:0 0 34px;height:34px;line-height:34px;margin:-22px -22px 14px;padding:0 18px;text-align:center}
.hero~.sec .card--pack:not(:has(>.pack__flag))::before{content:"";display:block;flex:0 0 34px;height:34px;margin:-22px -22px 14px}
/* The raise belongs to the three-across row only. Under 761px .prices is a
   single column and .card--pack.featured is order:-1, so the same negative
   margin pulls the first card up into the section head instead -- measured
   at 390px, the 26px gap under .sec__head closed to 12px. */
@media (min-width:761px){
  .hero~.sec .card--pack.featured{margin-top:-14px}
}
/*!SITE-HOME-CRIT-END*/

/*!CRITICAL-END*/
/* ---- sections */
.sec{padding:60px 0;position:relative}
.sec--tint{background:var(--tint)}
.sec--panel{background:var(--panel)}
.sec--dark{background:var(--navy);color:#e8ecf6}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark p,.sec--dark li{color:#c7d0e4}
.sec--dark .eyebrow{color:#9fb6e4}
.sec--dark .eyebrow::before{background:#5168a0}
.sec--dark a{color:#b9cdf2}
.sec--center{text-align:center}
.sec--center .sec__head{margin-inline:auto}
.sec--seam{padding-top:96px}   /* the section the hero card overlaps into */
.sec__head{max-width:var(--measure);margin:0 0 26px}
.sec__head h2{margin:0 0 10px}
.sec__head p{color:var(--ink-2);margin:0}
.sec--dark .sec__head p{color:#c7d0e4}

/* One measure, centred. Single-column content gets --measure; multi-column
   components keep the full wrap. Released below 1060px or a tablet gets a
   fixed 760px box. See responsive.md. */
@media (min-width:1060px){
  .sec>.wrap>h2,.sec>.wrap>h3,.sec>.wrap>h4,.sec>.wrap>p,
  .sec>.wrap>ul,.sec>.wrap>ol,.sec>.wrap>.sec__head,.sec>.wrap>.callout,
  .sec>.wrap>.alert,.sec>.wrap>.byline,.sec>.wrap>.refs,.sec>.wrap>.pullquote,
  .sec>.wrap>blockquote{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--center>.wrap>.sec__head{margin-inline:auto}
}

/* ---- lists */
.ticks{list-style:none;margin:0 0 1.1em;padding:0}
.ticks li{position:relative;padding-left:27px;margin:0 0 .5em}
.ticks li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--good);font-weight:800}
.sec--dark .ticks li::before{color:#7fd3a8}

/* ---- tables */
.tablewrap{overflow-x:auto;margin:0 0 1.2em;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--panel)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:1rem}
th,td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--sans);font-weight:700;color:var(--ink);background:var(--tint);font-size:.95rem}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--ink)}
.tnote{font-size:.9375rem;color:var(--ink-3);margin:-.4em 0 1.2em}

/* ---- numbered steps */
.steps{display:grid;gap:16px;margin:0 0 1.2em;counter-reset:s}
.step{
  position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-card);padding:20px 22px 20px 66px;
}
.step::before{
  counter-increment:s;content:counter(s);
  position:absolute;left:20px;top:19px;width:32px;height:32px;
  display:grid;place-items:center;background:var(--accent);color:#fff;
  font-family:var(--serif);font-weight:800;font-size:1rem;border-radius:2px;
}
.step h3{margin:0 0 6px}
.step p:last-child{margin:0}

/* ---- cards: flat, hairline, with a node cluster in the top-right corner */
.grid{display:grid;gap:18px}
.grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{
  position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-card);padding:22px 22px;overflow:hidden;
}
.card::after{
  content:"";position:absolute;right:-6px;top:-6px;width:46px;height:46px;opacity:.5;
  background-image:radial-gradient(var(--node) 1.6px,transparent 1.7px);
  background-size:11px 11px;pointer-events:none;
}
.card h3{margin:0 0 8px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.sec--dark .card{background:var(--navy-2);border-color:#27395c}
.sec--dark .card::after{opacity:.35}

/* ---- callout, alert, quote, keypoints */
.callout{
  background:var(--accent-l);border:1px solid #cddbf2;border-radius:var(--radius-card);
  padding:20px 22px;margin:0 0 1.2em;
}
.callout b:first-child{display:block;margin-bottom:6px;color:var(--accent-d)}
.callout p:last-child{margin:0}
.alert{
  background:#fdf6ea;border:1px solid #efdcbc;border-left:3px solid var(--warn);
  border-radius:0 var(--radius-card) var(--radius-card) 0;padding:20px 22px;margin:0 0 1.2em;
}
.alert b:first-child{display:block;margin-bottom:6px;color:var(--warn)}
.alert p:last-child{margin:0}
.pullquote{
  font-family:var(--serif);font-size:1.32rem;line-height:1.5;color:var(--ink);
  border-left:3px solid var(--node);padding:4px 0 4px 22px;margin:0 0 1.2em;
}
.pullquote cite{display:block;font-family:var(--sans);font-size:.9375rem;font-style:normal;color:var(--ink-3);margin-top:8px}
.keypoints{
  background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--accent);
  border-radius:0 0 var(--radius-card) var(--radius-card);padding:20px 22px;margin:0 0 1.2em;
}
.keypoints>b{display:block;margin-bottom:8px}
.keypoints ul{margin:0;padding-left:20px}

/* ---- image beside copy */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:center;margin:0 0 1.2em}
.split--flip .split__img{order:2}
/* A grid item's default min-width is auto, which floors at MIN-CONTENT. A
   .tablewrap holding a 520px-min table therefore keeps its column 520px wide
   however narrow the grid is, and `1fr` (= minmax(auto,1fr)) reintroduces that
   floor that the desktop minmax(0,1fr) avoids. Measured at 390: the grid box
   was 350px and its single column resolved to 522px, so the right-hand half of
   the block was clipped away by body{overflow-x:clip} with nothing to scroll
   and nothing to report. min-width:0 is the fix, and it belongs on the items at
   every width rather than only in the media query. */
.split__img,.split__body{min-width:0}

.split__img img{width:100%;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--panel)}
.split__body p:last-child{margin:0}

/* ---- stat band (inside .sec--dark) */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;text-align:center}
.stats div b{display:block;font-family:var(--serif);font-size:2.2rem;font-weight:800;color:#fff;line-height:1.1}
.stats div span{display:block;font-size:.9375rem;color:#b3c0da;margin-top:4px}

/* ---- label versus research */
.versus{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:0;border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden;background:var(--panel);margin:0 0 1.2em}
.versus>div{padding:13px 16px;border-bottom:1px solid var(--line);font-size:.98rem}
.versus>div:nth-child(3n){border-right:0}
.versus>div:nth-child(3n+1){font-weight:700;background:#fafbfe}
.versus__h{background:var(--tint)!important;font-family:var(--sans);font-weight:700;font-size:.92rem}

/* ---- ingredient cards */
.inglist{display:grid;gap:16px}
/* Same family as the .split fix above. .inglist is a grid, .ingcard is a grid
   ITEM, and a grid item's default min-width is auto -- so the card cannot
   shrink below its min-content. `.ing__dose` is white-space:nowrap and one
   of these labels renders 221px wide, which set the floor: measured at 390
   the grid box was 346px and its column resolved to 423px. min-width:0 lets
   the card shrink; .ingcard__top already wraps, so the chip drops onto its
   own line and fits. */
.inglist>*{min-width:0}

.ingcard{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);
  padding:22px 24px;position:relative;
}
.ingcard__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;margin:0 0 10px}
.ingcard__top h3{margin:0}
.ing__latin{font-size:.9375rem;font-style:italic;color:var(--ink-3)}
.ing__dose{
  margin-left:auto;font-size:.9375rem;font-weight:800;color:var(--accent-d);
  background:var(--accent-l);padding:4px 11px;border-radius:2px;white-space:nowrap;
}
.ingcard p:last-child{margin:0}

/* ---- add-to-cart pricing panel */
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch;margin:0 0 20px}
.card--pack{
  display:flex;flex-direction:column;background:var(--panel);
  border:2px solid transparent;box-shadow:inset 0 0 0 1px var(--line);
  border-radius:var(--radius-card);overflow:hidden;position:relative;
}
/* No lift on the featured card. A `margin-top:-12px` raises its box, which
   makes it 12px TALLER than its siblings and trips responsive.md's rule that
   a pricing row shares one height and one button baseline. The card is
   already unmistakable from its accent border, its deeper shadow, its
   coloured head band and its flag, so the lift bought nothing and cost the
   check. (A transform would move it without changing the box, but the reveal
   animation overwrites transform -- that is why the lift was a margin.) */
.card--pack.featured{border-color:var(--accent);box-shadow:var(--shadow-lg)}
.pack__head{
  background:var(--tint);border-bottom:1px solid var(--line);
  padding:13px 18px;display:flex;align-items:center;gap:10px;
}
.card--pack.featured .pack__head{background:var(--accent);border-bottom-color:var(--accent)}
.card--pack.featured .pack__head b,.card--pack.featured .pack__head span{color:#fff}
.pack__head b{font-family:var(--serif);font-size:1.12rem;font-weight:800}
.pack__head span{font-size:.8125rem;font-weight:700;color:var(--ink-3);margin-left:auto}
.pack__flag{
  position:absolute;right:0;top:0;background:var(--accent-d);color:#fff;
  font-size:0.8438rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 12px;z-index:3;
}
.pack__body{display:flex;flex-direction:column;flex:1;padding:20px 20px 22px}
.card--pack img{
  width:auto;max-width:100%;height:var(--pack-img,168px);object-fit:contain;
  margin-inline:auto;margin-bottom:14px;
}
.pack__per{font-family:var(--serif);font-size:2.3rem;font-weight:800;color:var(--ink);line-height:1;text-align:center}
.pack__per sup{font-size:1rem;font-weight:700;top:-.7em}
.pack__unit{display:block;text-align:center;font-size:.875rem;font-weight:700;color:var(--ink-3);margin:4px 0 12px}
.pack__tot{display:flex;align-items:baseline;justify-content:center;gap:9px;margin:0 0 14px;font-size:1rem}
.pack__tot b{font-weight:800}
.pack__was{color:var(--ink-3);text-decoration:line-through;font-weight:600}
.pack__perks{list-style:none;margin:0 0 18px;padding:0;font-size:.9375rem}
.pack__perks li{position:relative;padding-left:23px;margin:0 0 6px;color:var(--ink-2)}
.pack__perks li::before{content:"\2713";position:absolute;left:0;color:var(--good);font-weight:800}
.card--pack>.pack__body>.btn{margin-top:auto}
.pack__marks{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:center;margin:12px 0 0;font-size:.8125rem;color:var(--ink-3)}
.buy__note{font-size:.9375rem;color:var(--ink-3);text-align:center;margin:0}

/* ---- captioned images */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0 0 1.2em}
.shots.s2{grid-template-columns:repeat(2,minmax(0,1fr))}
.shots figure{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden}
.shots img{width:100%}
.shots figcaption{padding:16px 18px}
.shots figcaption b{display:block;margin-bottom:5px}
.shots figcaption span{font-size:.9375rem;color:var(--ink-2)}
figure.portrait img{width:var(--figw,320px);margin-inline:auto}

/* ---- seal wall */
.badgewall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:0 0 1.2em}
.badgewall figure{margin:0;text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);padding:18px 16px}
.badgewall img{width:74px;height:74px;object-fit:contain;margin:0 auto 10px}
.badgewall b{display:block;font-size:.98rem;margin-bottom:4px}
.badgewall span{font-size:.875rem;color:var(--ink-2)}

/* ---- star distribution */
.meter{margin:0 0 1.2em}
.meter__row{display:grid;grid-template-columns:76px 1fr 52px;gap:12px;align-items:center;margin:0 0 8px;font-size:.9375rem}
.meter__bar{height:10px;background:var(--line);border-radius:2px;overflow:hidden}
.meter__bar i{display:block;height:100%;background:var(--accent)}
.stars{color:#d9a21b;letter-spacing:1px}
.stars i{font-style:normal;opacity:.34}

/* ---- FAQ. The padding lives on <summary>, which is the click target: on
   <details> the row measures ~30px against the 44px minimum (pitfall 73). */
.faq{border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden;background:var(--panel);margin:0 0 1.2em}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{
  padding:17px 46px 17px 20px;cursor:pointer;position:relative;list-style:none;
  font-family:var(--serif);font-weight:700;font-size:1.06rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:19px;top:50%;translate:0 -50%;
  font-family:var(--sans);font-size:1.32rem;font-weight:400;color:var(--accent);
}
.faq details[open] summary::after{content:"\2212"}
.faq__body{padding:0 20px 18px}
.faq__body p:last-child,.faq__body ul:last-child{margin-bottom:0}

/* ---- references and byline */
.refs{margin:0 0 1.2em}
.refs ol{padding-left:22px;margin:0}
.refs li{font-size:1.062rem;color:var(--ink-2);margin:0 0 .6em}
/* The reference list prints each source's full URL as the link TEXT, and a
   URL is one unbreakable token. At 390 that pushed a single <a> to x=398
   against a 390 viewport on eleven pages -- clipped, unscrollable, and
   invisible to every static check. `anywhere` rather than `break-word`
   because it also lowers the element's MIN-CONTENT, which is what stops the
   ancestor being sized by the longest URL in the list. */
.refs li,.refs li a{overflow-wrap:anywhere}

.byline{
  display:flex;gap:18px;background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--accent);border-radius:0 var(--radius-card) var(--radius-card) 0;
  padding:22px 24px;margin:0 0 1.2em;
}
.byline__mark{
  flex:0 0 auto;width:52px;height:52px;display:grid;place-items:center;
  background:var(--navy);color:#fff;font-family:var(--serif);font-weight:800;font-size:1.06rem;
  border-radius:2px;
}
.byline b{display:block;margin-bottom:6px}
.byline p{font-size:.9688rem;color:var(--ink-2);margin:0}

/* ---- closing CTA */
.final{
  background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--accent);
  border-radius:0 0 var(--radius-card) var(--radius-card);padding:30px 32px;
}
.final--media{display:grid;grid-template-columns:auto minmax(0,1fr);gap:30px;align-items:center}
.final__img img{width:200px}
.final h2{margin:0 0 10px}
.final__price{font-weight:700;color:var(--ink-2)}
.final__sm{font-size:.9375rem;color:var(--ink-3);margin:12px 0 0}

/* ---- related */
.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;text-align:left}
.rel a{
  display:block;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-card);padding:20px 22px;text-decoration:none;color:var(--ink);
  transition:border-color .18s ease;
}
.rel a:hover{border-color:var(--accent)}
.rel b{display:block;font-family:var(--serif);font-size:1.08rem;margin-bottom:5px}
.rel span{font-size:.9375rem;color:var(--ink-2)}

/* ---- forms. 16px minimum on inputs or iOS Safari zooms the page on focus
   and never zooms back (pitfall 86). */
.form{display:grid;gap:16px;max-width:var(--measure)}
.field label{display:block;font-weight:700;font-size:.9688rem;margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--sans);font-size:16px;padding:13px 14px;
  border:1px solid var(--line-2);border-radius:var(--radius);background:var(--panel);color:var(--ink);
}
.field textarea{min-height:140px;resize:vertical}
.field small{display:block;font-size:0.9062rem;color:var(--ink-3);margin-top:5px}

/* ---- blog */
.article{max-width:var(--measure);margin-inline:auto}
.postmeta{font-size:.9375rem;color:var(--ink-3);margin:0 0 20px}
.toc{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);padding:20px 24px;margin:0 0 28px}
.toc b{display:block;margin-bottom:8px}
.toc ol{margin:0;padding-left:20px}
.toc li{margin:0 0 5px;font-size:1.062rem}
.posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.posts article{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);padding:22px 24px}
.posts h3{margin:0 0 8px}
.posts p{font-size:1.062rem;color:var(--ink-2)}
.dtable{min-width:520px}

/* ---- guarantee band above the footer */
.fcta{background:var(--tint);border-top:1px solid var(--line);padding:46px 0}
.fcta__box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:34px;align-items:center}
.fcta__eye{
  display:inline-block;font-size:.8125rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin-bottom:8px;
}
.fcta__h{font-family:var(--serif);font-size:1.62rem;font-weight:800;line-height:1.22;margin:0 0 10px}
.fcta__sm{font-size:.9375rem;color:var(--ink-3);margin:12px 0 0}
.fcta__img img{width:280px}

/* ---- footer: hairline-ruled four-column index over a navy disclaimer slab */
footer{background:var(--paper);border-top:1px solid var(--line)}
.fmast{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:end;padding:36px 0 22px;border-bottom:1px solid var(--line)}
.fbrand{font-family:var(--serif);font-size:2.3rem;font-weight:800;letter-spacing:-.02em;line-height:1}
.fbrand span{color:var(--accent)}
.frole{font-size:.9375rem;color:var(--ink-2);margin:8px 0 0}
.fnap{display:flex;flex-wrap:wrap;gap:6px 26px;font-size:.9375rem;color:var(--ink-2)}
.fnap b{display:block;font-size:0.9062rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);margin-bottom:3px}
.fgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:26px 0 30px}
.fgrid>div{padding:0 26px;border-left:1px solid var(--line)}
.fgrid>div:first-child{padding-left:0;border-left:0}
.fgrid>div:last-child{padding-right:0}
.fh{font-size:.8125rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px}
.fgrid ul{list-style:none;margin:0 0 20px;padding:0}
.fgrid li{margin:0}
/* inline-block, not block: the box still shrink-wraps to the text so the hover
   underline stays the width of the words, and the negative margin gives the
   row its height back (pitfall 82). */
footer li a{display:inline-block;padding-block:5px;margin-block:-5px;font-size:.9688rem;color:var(--ink-2);text-decoration:none}
footer li a:hover{color:var(--accent)}
.fseals{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:20px 0;border-top:1px solid var(--line)}
.fseals img{width:44px;height:44px;object-fit:contain}
.fseals span{font-size:.9375rem;color:var(--ink-3)}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:0 0 26px}
.fpay img{width:230px;height:auto}
.fpay span{font-size:.9375rem;color:var(--ink-3)}
.disc{background:var(--navy);color:#aeb9d1;padding:30px 0 34px}
.disc .wrap{max-width:var(--wrap)}
.disc p,.disc li{font-size:.9375rem;color:#aeb9d1}
.disc b{color:#e2e8f5}
.disc a{color:#b9cdf2}
.disc__list{columns:2;column-gap:38px;list-style:none;margin:14px 0 0;padding:0}
.disc__list li{break-inside:avoid;margin:0 0 9px;padding-left:16px;position:relative}
.disc__list li::before{content:"";position:absolute;left:0;top:.66em;width:6px;height:1px;background:#5a6a8c}
.copy{margin:18px 0 0;padding-top:16px;border-top:1px solid #23314e;font-size:.9375rem}

/* ---- sticky buy bar */
.buybar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--navy);
  color:#fff;transform:translateY(105%);transition:transform .25s ease;
}
.buybar.show{transform:none}
.buybar__in{display:flex;align-items:center;gap:18px;max-width:var(--wrap);margin-inline:auto;padding:12px 20px}
.buybar__t{font-size:.9375rem;min-width:0}
.buybar__t b{display:block;font-size:1rem}
.buybar__t span{color:#b3c0da}
.buybar .btn{margin-left:auto;flex:0 0 auto}

/* ---- reveal */
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
[data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---- responsive */
@media (max-width:1180px){
  .fgrid>div{padding-inline:18px}
}
@media (max-width:1060px){
  .hero__grid{gap:34px}
  .figures{gap:10px}
}
@media (max-width:980px){
  :root{--navh:76px}
  .nav__row{grid-template-columns:1fr auto;gap:14px}
  .brand{border-right:0;padding-right:0}
  .nav__facts{display:none}
  .nav__stack{flex-direction:row;align-items:center;justify-content:flex-end}
  .menu{
    display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;
    align-items:stretch;gap:0;background:var(--panel);border-block:1px solid var(--line);
    padding:8px 20px 14px;box-shadow:var(--shadow-lg);
  }
  .menu.open{display:flex}
  .menu__more{display:block}
  .menu a{padding:12px 0;border-bottom:1px solid var(--line);border-bottom-width:1px}
  .menu a[aria-current="page"]{border-bottom-color:var(--line)}
  .burger{display:block}
  .nav__buy{display:none}
  .hero__grid{grid-template-columns:1fr}
  .hero__copy{display:contents}
  .hero__media{order:3;margin-bottom:34px}
  .hero__card{margin-bottom:0}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .answer{order:4}
  .hero__road{order:5}
  .hero__cta{order:6}
  .hero__sub{order:8}
  .trust__row{order:9}
  .factpills{order:10}
  .figures{order:11}
  .grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 0}
  .fgrid>div:nth-child(odd){padding-left:0;border-left:0}
  .fmast{grid-template-columns:1fr;align-items:start}
  .final--media{grid-template-columns:1fr;gap:20px}
  .fcta__box{grid-template-columns:1fr}
  .fcta__img{display:none}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .sec{padding:44px 0}
  .sec--seam{padding-top:44px}
  .hero{padding-top:36px}
  .grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr}
  .prices{grid-template-columns:1fr}
  .card--pack.featured{order:-1}
  .shots,.shots.s2{grid-template-columns:1fr}
  .badgewall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rel,.posts{grid-template-columns:1fr}
  .split,.split--flip .split__img{grid-template-columns:minmax(0,1fr);order:0}
  .versus{grid-template-columns:1fr}
  .versus>div:nth-child(3n+1){border-top:2px solid var(--line-2)}
  /* The dose chip is white-space:nowrap and margin-left:auto, so on a narrow
     card it gets pushed to the right of a line that has no room for it and
     overhangs the card edge. On a phone let it sit at the start of its own
     line and wrap its own text. */
  .ing__dose{margin-left:0;white-space:normal}
  .disc__list{columns:1}
  .figures{grid-template-columns:1fr;gap:8px}
  .buybar__in{flex-wrap:wrap;gap:10px;padding-block:10px}
  .buybar .btn{width:100%;margin-left:0}
}
@media (max-width:420px){
  .fgrid{grid-template-columns:1fr}
  .fgrid>div{padding-left:0;border-left:0}
  .badgewall{grid-template-columns:1fr}
}


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

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

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

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

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

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

   The height lives here and not on the <img> attributes on purpose: those
   must keep stating each file's true ratio, or fix_img_dims.py rewrites them
   and CLS gets worse. Override per site with --pack-img. */
.card--pack{display:flex;flex-direction:column}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,168px);
  object-fit:contain;margin-inline:auto;margin-bottom:14px}
.card--pack>.btn{margin-top:auto}
/* brand mark: bracket construction */
.brand{position:relative;padding-inline:14px}.brand::before,.brand::after{content:'';position:absolute;top:2px;bottom:2px;width:8px;border:2px solid #1a4fa0}.brand::before{left:0;border-right:0}.brand::after{right:0;border-left:0}

/* ---- hero: the product breathes, and sits on its own light -----------------
   Transform only, NEVER opacity. The hero image is the LCP element, and an
   element that starts at opacity:0 is not recorded as painted, so the LCP time
   moves with the animation (hero.md). A translate costs nothing and paints on
   the first frame.

   The halo sits INSIDE the white card, behind the bottle, so the product reads
   as lit rather than pasted. hero_motifs.py owns everything OUTSIDE the card. */
.hero__card{isolation:isolate}
.hero__card::before{
  content:"";position:absolute;left:50%;top:44%;translate:-50% -50%;
  width:78%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,var(--accent-l),transparent 72%);
  z-index:0;pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  /* The float goes on the CARD, never on the <img>. The image is the LCP
     element and is preloaded; animating it is what hero.md rules out. */
  .hero__card{animation:nmFloat 7.5s ease-in-out infinite}
  @keyframes nmFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
}

/* ==== 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(105%)}
/* ==== end directional chrome ==== */

/* ==== tables never fade (reveal_skip_tables.py) ==== */
/* A comparison table is reference content the reader scrolled to on
   purpose. Fading it in leaves it illegible for half a second at exactly
   that moment, which reads as broken text rather than as motion. The
   reveal stays on cards and callouts, which are decorative arrivals. */
.tablewrap[data-reveal],.tablewrap.reveal{opacity:1;transform:none;transition:none}
/* ==== end tables never fade ==== */
/*!SITE-HOME-PAINT-START*/
/* Home page, PAINT ONLY. Nothing below moves a box -- radius, shadow,
   background, colour, transform, transition -- so it sits under the critical
   marker and a restamp is enough for it on its own.

   Every rule is gated on body:has(.hero) because .btn, .card, .card--pack,
   .nav and the footer are on all 30 pages and this pass owns the home page.
   The gate is also what beats modern_surface.py and footer_type.py, which
   re-append their own blocks after this one on every build: source order
   cannot be relied on here, specificity can. */
body:has(.hero){
  --ctl:10px;                /* slot radius_control */
  --radius-card:16px;        /* slot radius_card */
  /* slot depth: tight contact + wide ambient, tinted with this site's own
     ink (16,26,44), never neutral black. */
  --shadow:0 1px 2px rgba(16,26,44,.07), 0 10px 28px rgba(16,26,44,.10);
  --lift:0 2px 4px rgba(16,26,44,.09), 0 18px 40px rgba(16,26,44,.16);
}

/* ---- NOT home-only, and not decoration: a regression repair.
   modern_surface.py emits its panel `box-shadow:var(--shadow)` rule only
   while it can find no layered shadow in the sheet. The slot depth added
   below gave it seven, so on the next build it stopped emitting that rule
   and every .card, .step, .toc, .faq and .tablewrap on all 30 pages lost the
   shadow it had before this pass touched anything. This is that rule, put
   back verbatim, so the other 29 pages render exactly as they did. On the
   home page --shadow is the slot depth; everywhere else it still resolves to
   modern_surface's own token, which is what those pages had. */
.card,
.step,
.keypoints,
.callout,
.alert,
.toc,
.byline,
.posts article,
.shots figure,
.badgewall figure,
.tablewrap,
.faq,
.ingcard,
.final,
.split__img,
.answer{box-shadow:var(--shadow)}

/* ---- controls. The clipped corner goes with the square corner: a polygon
   clip-path paints a sharp corner over whatever radius is set, which is why
   these buttons already computed 16px and still rendered as squares. */
body:has(.hero) .btn{
  border-radius:var(--ctl);clip-path:none;background-color:var(--accent);
  box-shadow:0 1px 2px rgba(16,26,44,.10), 0 8px 20px rgba(26,79,160,.20);
  transition:background-color .2s ease,background-image .2s ease,transform .2s ease,box-shadow .2s ease,color .2s ease;
}
/* The gradient goes on the BUYING call to action only -- every order link on
   the site carries rel="sponsored" -- so the hero pair reads as two weights
   rather than two buttons. */
body:has(.hero) a.btn[rel~="sponsored"]{background-image:linear-gradient(140deg,#2f74d8,var(--accent) 46%,var(--accent-d))}
body:has(.hero) .btn:hover{background-color:var(--accent-d);transform:translateY(-2px);box-shadow:0 2px 4px rgba(16,26,44,.12), 0 14px 30px rgba(26,79,160,.30)}
body:has(.hero) a.btn[rel~="sponsored"]:hover{background-image:linear-gradient(140deg,#3b81e6,#1d57ad 46%,var(--accent-d))}
body:has(.hero) .btn:active{transform:translateY(0)}
body:has(.hero) .btn:focus-visible{outline:3px solid var(--accent-d);outline-offset:3px}
/* The secondary stays solid. These two rules tie with the .btn:hover rule
   above on specificity, so they are written after it on purpose. */
body:has(.hero) .btn--ghost{background-color:var(--panel);background-image:none;color:var(--accent);box-shadow:inset 0 0 0 1px var(--line-2), 0 1px 2px rgba(16,26,44,.06), 0 6px 16px rgba(16,26,44,.07)}
body:has(.hero) .btn--ghost:hover{background-color:var(--accent-l);color:var(--accent-d);box-shadow:inset 0 0 0 1px var(--accent), 0 2px 4px rgba(16,26,44,.08), 0 12px 26px rgba(16,26,44,.14)}
body:has(.hero) .burger{border-radius:var(--ctl)}

/* ---- the masthead sits on the hero's own light instead of a flat slab. */
body:has(.hero) .nav{background-color:rgba(243,245,251,.86);-webkit-backdrop-filter:saturate(1.5) blur(12px);backdrop-filter:saturate(1.5) blur(12px)}

/* ---- hero surfaces */
body:has(.hero) .hero__card{border-radius:var(--radius-card);box-shadow:0 2px 6px rgba(16,26,44,.10), 0 28px 64px rgba(16,26,44,.20)}
/* modern_surface rounds .answer on all four corners, which loses the accent
   spine this site builds the Quick Answer on. The spine is the left edge. */
body:has(.hero) .answer{border-radius:0 var(--radius-card) var(--radius-card) 0;box-shadow:var(--shadow)}
body:has(.hero) .figures div{border-radius:var(--radius-card);background-image:linear-gradient(180deg,#fff,#f7f9ff);box-shadow:var(--shadow)}
body:has(.hero) .factpills li{border-radius:999px;background-image:linear-gradient(180deg,#fff,#f5f8ff);box-shadow:0 1px 2px rgba(16,26,44,.05)}

/* ---- pricing. The ribbon's geometry is above the marker; this is its
   colour. The recommended tier is raised there and carries the accent here.
   The feature rows are separated by a dashed rule drawn as a background
   image: a border-bottom would add a pixel of height to every row. */
body:has(.hero) .card--pack{box-shadow:var(--shadow)}
body:has(.hero) .card--pack>.pack__flag{background:var(--tint);color:var(--ink-2);letter-spacing:.1em;border-radius:0}
body:has(.hero) .card--pack.featured{border-color:var(--accent);box-shadow:0 3px 8px rgba(16,26,44,.10), 0 26px 56px rgba(26,79,160,.26)}
body:has(.hero) .card--pack.featured>.pack__flag{background-image:linear-gradient(90deg,var(--accent-d),var(--accent) 52%,#2f74d8);color:#fff}
body:has(.hero) .card--pack:hover{box-shadow:var(--lift);transform:translateY(-2px)}
body:has(.hero) .card--pack.featured:hover{box-shadow:0 3px 8px rgba(16,26,44,.12), 0 32px 66px rgba(26,79,160,.32);transform:translateY(-2px)}
body:has(.hero) .pack__head{border-radius:10px 10px 0 0}
body:has(.hero) .pack__perks li{background-image:linear-gradient(90deg,var(--line-2) 0 5px,transparent 5px 10px);background-repeat:repeat-x;background-size:10px 1px;background-position:left bottom}
body:has(.hero) .pack__perks li:last-child{background-image:none}

@media (prefers-reduced-motion:reduce){
  body:has(.hero) .btn,
  body:has(.hero) .btn:hover,
  body:has(.hero) .btn:active,
  body:has(.hero) .card--pack:hover,
  body:has(.hero) .card--pack.featured:hover{transform:none}
  body:has(.hero) .btn{transition:none}
}
/*!SITE-HOME-PAINT-END*/
/* ==== footer type floor (footer_type.py) ==== */
/* The footer carried the smallest text on the page -- the legal pages,
   the guarantee and the contact routes, set as fine print. Running text
   and links sit at 16px, column headings at 15px (uppercase and
   letter-spaced, so they read larger than the number). Last in the file
   on purpose: it outranks the phone breakpoints that shrank them. */
footer li a{font-size:16px}
footer .copy{font-size:16px}
footer .disc li{font-size:16px}
footer .disc p{font-size:16px}
footer .fh{font-size:15px}
footer .fnap{font-size:16px}
footer .fnap b{font-size:16px}
footer .fpay span{font-size:16px}
footer .fseals span{font-size:16px}
/* ==== end footer type floor ==== */

/* ==== modern surface (modern_surface.py) ==== */
/* House rule 11. This stylesheet had 19 box-shadow declaration(s)
   and 7 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 (16,26,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{
  --radius:16px;
  --shadow:0 1px 2px rgba(16,26,44,.06), 0 6px 18px rgba(16,26,44,.07);
  --lift:0 2px 6px rgba(16,26,44,.09), 0 16px 34px rgba(16,26,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. */
.card,
.step,
.keypoints,
.callout,
.alert,
.toc,
.byline,
.posts article,
.shots figure,
.badgewall figure,
.tablewrap,
.faq,
.ingcard,
.final,
.split__img,
.answer{border-radius:var(--radius)}

/* A surface a reader can click answers the pointer. 2px
   registers without reflowing the row beside it. */
.rel a,
.posts article,
.shots figure,
.card--pack,
.badgewall figure{transition:box-shadow .2s ease, transform .2s ease}
.rel a:hover,
.posts article:hover,
.shots figure:hover,
.card--pack: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,
.card--pack: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}