/* lymphsavvior.com - Lymph Savior, Authorized American Lymph Savior outlet.
   Design slot: row 256 in batch13_assignments.py. Petrona over Asap, a deep
   teal-ink ground carried DARK FIRST across the whole site with one pale-aqua
   accent, a full-bleed dark hero with the bottle centred low under a stacked
   headline, one-edge-rule cards ruled 4px on the left only, and depth drawn as
   a HARD displaced offset with no blur at all.

   The ink comes from the bottle, not from a reference site: a white bottle with
   LYMPH SAVIOR set in two greens and a grey strapline under it. Green on a dark
   ground goes muddy, so the accent is the same hue pulled toward the cool end
   until it holds its own against near-black: a pale aqua for lines and small
   text, a deeper aqua for fills that carry dark text.

   Three things here are deliberate and should not be "corrected":

   1. DARK FIRST MEANS THE TEXT RAMP IS THE WORK. Every colour below was
      measured against the surface it actually sits on, not against the token it
      was derived from. --on-dark-3 is the floor at 4.5:1 on --ink-3, which is
      the palest ground any body text lands on.
   2. THE DEPTH IS TWO HARD STOPS, NOT A BLUR. The slot asks for a 6px solid
      displaced shadow. House rule 11 asks for a LAYERED shadow. Both are
      satisfied by two offsets at 4px and 8px with a blur radius of zero: the
      card reads as a block displaced against the ground, and the shadow still
      resolves to two colour stops.
   3. THE CARD RADIUS IS 16px, NOT 0. The slot says radius 0. House rule 11 sets
      a 12px floor and says in modern_surface.py's own words that it "outranks a
      slot that chose square corners". So the one-edge rule survives as the 4px
      left bar on a bare dark card, which is the part of the slot that carries
      the identity, and the corners take the floor.

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

/* ---- tokens */
:root{
  --ink:#061a20;            /* the page: deep teal-ink */
  --ink-2:#0a262e;          /* raised band */
  --ink-3:#0e323b;          /* card ground */
  --night:#03090b;          /* the footer */
  --line:#16424c;
  --line-2:#1f5b67;
  --aqua:#79e3d2;           /* the accent: pale aqua */
  --aqua-d:#3fbfab;         /* deeper aqua, for fills under dark text */
  --aqua-l:#bff3ea;
  --aqua-ink:#062b26;       /* text that sits ON an aqua fill */
  --on-dark:#eaf6f3;        /* body text */
  --on-dark-2:#bcd7d6;      /* secondary */
  --on-dark-3:#9dbfbf;      /* captions and meta */
  --warn:#f0c674;
  --wrap:1180px;
  --measure:70ch;
  --measure-wide:960px;
  --radius:16px;
  --radius-sm:12px;
  /* Depth: hard offset, no blur, two stops. */
  --shadow:4px 4px 0 rgba(63,191,171,.16), 8px 8px 0 rgba(63,191,171,.07);
  --lift:5px 5px 0 rgba(121,227,210,.30), 10px 10px 0 rgba(121,227,210,.12);
  --navh:112px;
  --display:"Petrona",Georgia,"Times New Roman",serif;
  --text:"Asap",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ---- base */
*,*::before,*::after{box-sizing:border-box}
*{min-width:0}
html,body{margin:0;padding:0}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
body{
  overflow-x:clip;background:var(--ink);color:var(--on-dark);
  font-family:var(--text);font-size:17px;line-height:1.75;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img,svg,table{max-width:100%}
img{height:auto;display:block}
a{color:var(--aqua);text-underline-offset:3px}
a:hover{color:var(--aqua-l)}
h1,h2,h3,h4{font-family:var(--display);color:#fff;font-weight:600;line-height:1.18;margin:0 0 .5em}
h1{font-size:clamp(2rem,1.3rem + 2.3vw,3.05rem);letter-spacing:-.015em}
h2{font-size:clamp(1.46rem,1.14rem + 1.2vw,2.1rem);letter-spacing:-.01em}
h3{font-size:1.2rem}
h4{font-size:1.04rem}
p,li{font-size:1.0625rem}
p{margin:0 0 1.05em}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
.skip{position:absolute;left:-9999px;top:0;background:var(--aqua);color:var(--aqua-ink);padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--aqua);outline-offset:2px}

/* the eyebrow names the JOB of the section beneath it */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--text);font-size:0.8438rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--aqua);
  margin:0 0 10px;
}
.eyebrow::before{content:"";width:26px;height:3px;background:var(--aqua-d);flex:0 0 auto}

/* ---- buttons. The primary is the gradient; the ghost stays flat and solid,
   so the pair reads as two weights rather than one button drawn twice.
   Guarded at .btn.btn--aqua (0,2,0) on purpose: `.final a` and `.faq a` are
   (0,1,1) and would otherwise repaint the label the colour of its own fill.
   That geometry is on 85 of 103 stylesheets on this estate and produced a
   button measured at 1.00:1 (rule 12, section E, trap 1). */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:54px;padding:15px 30px;
  font-family:var(--text);font-size:1rem;font-weight:600;letter-spacing:.01em;
  border:0;border-radius:var(--radius-sm);cursor:pointer;text-decoration:none;
  background:var(--ink-3);color:var(--on-dark);
  box-shadow:var(--shadow);
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease;
}
.btn.btn--aqua,a.btn.btn--aqua{
  background:linear-gradient(103deg,var(--aqua-d) 0%,var(--aqua) 58%,var(--aqua-l) 100%);
  color:#04211d;
}
.btn.btn--aqua:hover,a.btn.btn--aqua:hover{color:#04211d}
.btn.btn--ghost,a.btn.btn--ghost{
  background:transparent;color:var(--aqua-l);box-shadow:inset 0 0 0 2px var(--line-2);
}
.btn.btn--ghost:hover,a.btn.btn--ghost:hover{background:var(--ink-2);color:#fff;
  box-shadow:inset 0 0 0 2px var(--aqua-d)}
.btn--lg{min-height:62px;padding:17px 36px;font-size:1.06rem}
.btn--wide{width:100%}
.btn:hover{transform:translateY(-2px);box-shadow:var(--lift)}
.btn:active{transform:translateY(0)}

/* ---- topline strip: role, lot, dose and count, guarantee, order phone.
   Five facts a buyer wants before reading anything, above the navigation, so
   the nav bar can spend its width on the destinations and the Order pill.
   It sits ABOVE CRITICAL-END because it is the first thing painted. */
.util{background:var(--night);color:var(--on-dark-2);font-size:0.9062rem;line-height:1.5}
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding-block:8px}
.util__item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.util__item+.util__item::before{content:"";width:4px;height:4px;border-radius:50%;
  background:var(--aqua-d);flex:0 0 auto;margin-right:8px}
.util b{color:var(--aqua);font-weight:600}
.util a{color:var(--aqua-l);text-decoration:none}
.util a:hover{text-decoration:underline}
/* The strip at 14.5px (type_floor.py, 21 Sep 2026) measures 1,102px in Asap
   (1,117px in the fallback face) inside the 1,136px the 1180px container
   leaves, with the 12px gap and 8px dot margin above, so a laptop or desktop
   screen keeps it on ONE row. With a 16px gap and 10px dot margin it measured
   1,141px and dropped the order line onto a row of its own.
   The phone trims below are COPIES of the 760px and 480px rules further
   down. They sit here because the sheet loads async: without them a phone
   paints all five topline items, then collapses to three when the sheet
   lands and shoves the whole page up. Edit both copies together. */
@media (max-width:760px){.util__row{gap:4px 13px}.util__item--trim{display:none}}
@media (max-width:480px){.bw small{display:none}}

/* ---- header: one teal-ink band. Identity hard left with the drawn accent
   rule under it (the `underline` mark construction), destinations in the
   middle, and the Order call expressed as an OUTLINED aqua pill at the right
   edge rather than as a filled block. */
.nav{position:sticky;top:0;z-index:100;background:var(--ink-2);
  box-shadow:0 1px 0 var(--line),0 6px 0 rgba(3,9,11,.35)}
/* padding-BLOCK, never the shorthand: this element also carries .wrap, and
   `padding:15px 0` would set padding-inline to 0 and wipe the page gutter.
   Invisible above the container max-width, and no overflow test can see it. */
.nav__top{display:flex;align-items:center;gap:20px;padding-block:15px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff}
.brand__glyph{width:34px;height:34px;flex:0 0 auto}
/* Size the mark by ELEMENT as well as by class: brand_marks.py rewrites the
   <svg> inside .brand and does not always carry the class onto the
   replacement, so a rule keyed only to the class stops applying. */
.brand>svg{width:34px;height:34px;flex:0 0 auto}
.bw{display:flex;flex-direction:column;line-height:1.12}
.bw b{font-family:var(--display);font-size:1.34rem;font-weight:600;letter-spacing:-.01em;color:#fff}
.bw b em{font-style:normal;color:var(--aqua)}
.bw small{font-size:0.9062rem;font-weight:500;color:var(--on-dark-3);letter-spacing:.04em}
.menu{
  display:flex;flex-wrap:nowrap;gap:0 22px;list-style:none;margin:0 auto;padding:0;
  align-items:center;min-height:44px;
}
.menu a{
  display:inline-block;padding:10px 0;font-family:var(--text);
  font-size:.9375rem;font-weight:500;color:var(--on-dark-2);text-decoration:none;
  border-bottom:2px solid transparent;white-space:nowrap;
}
.menu a:hover{color:#fff}
.menu a[aria-current="page"]{color:var(--aqua);border-bottom-color:var(--aqua-d)}
.menu__more{display:none}
.nav__buy{
  flex:0 0 auto;min-height:44px;padding:10px 24px;font-size:.9375rem;
  border-radius:999px;background:transparent;color:var(--aqua);
  box-shadow:inset 0 0 0 2px var(--aqua-d);
}
.nav__buy:hover{background:var(--aqua-d);color:#04211d;box-shadow:inset 0 0 0 2px var(--aqua-d)}
.burger{
  display:none;width:48px;height:46px;background:transparent;border:1px solid var(--line-2);
  border-radius:var(--radius-sm);cursor:pointer;padding:12px 11px;
}
.burger span{display:block;height:2px;background:var(--aqua);margin:0 0 5px}
.burger span:last-child{margin:0}

/* ---- hero: FULL-BLEED dark. The rules here are the STACKED form, which is
   what a phone and a narrow tablet get; the two-column form is the
   `min-width:1000px` block further down and is the one the owner sees.
   The gradient here is one of rule 11's two permitted grounds and
   hero_motifs.py re-casts it with the site's own accent. */
.hero{position:relative;background:var(--ink);color:var(--on-dark);
  padding:30px 0 52px;overflow-x:clip;overflow-y:visible}
.hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);
  gap:0;justify-items:center;text-align:center}
/* The copy column is promoted to grid items at EVERY width, so the order of the
   whole hero is composed in one place. Measured before this: the product sat at
   y=1123 on a 900px screen at 1440, because the roadmap line, the fact pills
   and the figure tiles all lived inside the copy column and therefore all came
   before the media. */
.hero__copy{display:contents}
.hero__grid>*,.hero__copy>*{width:100%;max-width:820px}
.hero .eyebrow{order:1}
.hero h1{order:2}
.hero .answer{order:3}
.hero__cta{order:4}
.hero__sub{order:5}
.hero__media{order:6;max-width:none}
.hero__road{order:7}
.hero .factpills{order:8}
.hero .figures{order:9}
.hero h1{margin:0 0 14px;color:#fff}
.hero h1 em{font-style:normal;color:var(--aqua)}
.answer{
  background:var(--ink-2);border:1px solid var(--line);
  border-left:4px solid var(--aqua);border-radius:var(--radius);
  padding:18px 22px;margin:0 0 16px;text-align:left;box-shadow:var(--shadow);
}
.answer p{margin:0 0 .7em;font-size:1.06rem;color:var(--on-dark)}
.answer p:last-child{margin:0}
.answer b{color:#fff}
.hero__road{font-size:1rem;color:var(--on-dark-2);margin:22px auto 0;max-width:68ch}
.hero__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:0 0 14px}
.hero__sub{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin:0 0 2px;
  font-size:0.9688rem;font-weight:500;color:var(--on-dark-2)}
.hero__sub span{display:inline-flex;align-items:center;gap:7px}
.hero__sub span::before{content:"\2713";color:var(--aqua);font-weight:700;flex:0 0 auto}
.factpills{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;list-style:none;
  margin:20px 0 0;padding:0}
.factpills li{
  font-size:0.9062rem;font-weight:500;color:var(--on-dark-2);background:var(--ink-2);
  border:1px solid var(--line);padding:7px 15px;border-radius:999px;
}
.factpills li b{color:var(--aqua);font-weight:700}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
  margin:16px 0 0;width:100%;max-width:820px}
.figures>div{background:var(--ink-2);border:1px solid var(--line);
  border-left:4px solid var(--aqua-d);border-radius:var(--radius);padding:14px 16px;text-align:left}
.figures b{display:block;font-family:var(--display);font-size:1.5rem;font-weight:600;
  color:#fff;line-height:1.12}
.figures span{display:block;font-size:0.9062rem;font-weight:500;color:var(--on-dark-3);margin-top:3px}
/* The product stands on the dark ground with no plate behind it, so the two
   nodes easing apart around it are visible at all (house rule 7). */
.hero__media{position:relative;margin:16px 0 0;width:100%;display:flex;
  flex-direction:column;align-items:center}
/* THE PLATE IS DELIBERATE. This pack ships the bottle as `-flat-`, which is its
   own naming for the opaque backup of a cut-out, and it ships no cut-out. On a
   dark-first ground an opaque shot on a white field renders as a white
   rectangle, so the plate is made into a component instead: a light panel
   carrying this site's one-edge rule and its hard offset, which reads as a
   product plate rather than as a hole in the page. */
.hero__card{position:relative;z-index:2;text-align:center;
  padding:16px 20px 8px;width:auto;max-width:436px;
  background:linear-gradient(168deg,#ffffff,#e4f0ed);
  border-left:5px solid var(--aqua);border-radius:var(--radius);
  box-shadow:6px 6px 0 rgba(63,191,171,.34), 12px 12px 0 rgba(63,191,171,.15)}
.hero__card img{width:100%;max-width:392px;height:auto;margin-inline:auto}
.hero__cap{margin:14px 0 0;font-size:.875rem;font-weight:500;color:var(--on-dark-3)}
/* The caption is INSIDE the plate, and the plate is light. Read off the
   rendered element, --on-dark-3 on the plate's own gradient end stop
   (#e4f0ed) is 1.69:1 - invisible, and invisible in exactly the place a
   dark-first site hides it. (0,2,0) so it lands on the element that
   carries the declaration, and above CRITICAL-END so the unreadable
   colour never paints first. */
.hero__card .hero__cap{color:#164c4a}
.trust__row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin:0;
  padding:0;list-style:none;font-size:.9375rem;font-weight:500;color:var(--on-dark-2)}
.trust__row li{display:inline-flex;align-items:center;gap:8px}
.trust__row li::before{content:"\2713";color:var(--aqua);font-weight:700;flex:0 0 auto}

/* ---- the hero at >=1000px: TWO COLUMNS (house rule 12 C2, owner 21 Sep 2026)
   THIS SITE IS THE REASON THAT RULE EXISTS. The owner opened it and rejected it
   on sight, and the reason is arithmetic: a centred stack puts the eyebrow, the
   headline, the Quick Answer, the buttons and the tick row ABOVE the product, so
   on a 900px screen the bottle began at y=706 and the first screen carried no
   product at all.

   Measured here, 1440x900, before and after:

       product top   706  ->  191        product width  391 -> 384
       H1 top        177  ->  177        CTA top        577 -> ~560

   The slot is otherwise untouched: full-bleed dark band, 7/5, bottle RIGHT in a
   tall well, headline and Quick Answer LEFT, the narrow column below. The block
   sits ABOVE CRITICAL-END so the very first paint is already two columns - a
   desktop that painted the stack and then relaid it is the same CLS fault
   critical_hero.py exists to remove, in the other direction.

   `align-self:start` on the media is rule 12 D: the image and its copy start
   LEVEL. Centring it in a column this tall is what the owner calls scattered. */
@media (min-width:1000px){
  .hero{padding:34px 0 54px}
  .hero__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    column-gap:40px;row-gap:0;align-items:start;justify-items:start;text-align:left}
  .hero__grid>*,.hero__copy>*{max-width:none}
  .hero .eyebrow{grid-column:1;grid-row:1}
  .hero h1{grid-column:1;grid-row:2}
  .hero .answer{grid-column:1;grid-row:3}
  .hero__cta{grid-column:1;grid-row:4;justify-content:flex-start}
  .hero__sub{grid-column:1;grid-row:5;justify-content:flex-start}
  /* The well. The plate stands in a recess cut into the dark band and ruled on
     its top edge in the accent, which is this site's one-edge language applied
     to the hero rather than a second card style invented for it. It spans the
     five copy rows so the column is tall whatever the headline does. */
  .hero__media{grid-column:2;grid-row:1 / span 5;align-self:start;
    margin:0;padding:22px 16px 26px;justify-content:center;
    background:linear-gradient(180deg,#0a2a30,#061a20 76%);
    border:1px solid var(--line);border-top:3px solid var(--aqua);
    border-radius:var(--radius)}
  .hero__card{max-width:none;width:100%}
  /* the narrow column below the two, on the copy side */
  .hero__road{grid-column:1;grid-row:6;max-width:var(--measure);margin:26px 0 0}
  .hero .factpills{grid-column:1;grid-row:7;justify-content:flex-start;
    max-width:var(--measure)}
  .hero .figures{grid-column:1;grid-row:8;max-width:var(--measure)}
  /* House rule 7: the motion has to be VISIBLE. The plate is opaque and it
     fills the well, so the two nodes hero_motifs.py sizes against the media
     column (92% and 75% of it) now paint almost entirely behind the bottle -
     measured by driving getAnimations() and diffing two frames, the largest
     change a reader could see outside the plate was 13 levels. They are
     re-anchored here to the shoulder and the foot of the bottle, where the
     well's own margin and the page gutter give them room, and deliberately
     never to the left: a glow that reaches x<831 is painting on the copy,
     which the same rule forbids. (0,2,1) against the tool's (0,1,1), so this
     wins wherever the tool's block lands, and `translate` is left alone
     because the keyframes do the centring. */
  .hero .hero__media::before{left:84%;top:44%;width:130%}
  .hero .hero__media::after{left:58%;top:96%;width:96%}
}
/* ---- inner page head */
.phead{padding:34px 0 12px;background:var(--ink-2);border-bottom:1px solid var(--line)}
.crumbs{font-size:.9375rem;color:var(--on-dark-3);margin:0 0 14px}
.crumbs a{color:var(--on-dark-2);text-decoration:none}
.crumbs a:hover{color:var(--aqua)}
.phead h1{margin:0 0 16px;max-width:var(--measure-wide)}
.phead .answer{max-width:var(--measure-wide);background:var(--ink-3)}
.lead{font-size:1.13rem;color:var(--on-dark-2);max-width:var(--measure)}
/* --- hero responsive rules, copied into the critical block
   A phone painted the desktop hero from the inline block and then
   jumped when the async sheet arrived -- 692px on one site, CLS 0.95.
   These are COPIES: the originals stay below, so the cascade is
   unchanged and the first paint is already correct.
   REGENERATED ON EVERY BUILD from the rules below the marker. Edit
   the originals; never this copy, which is overwritten. */
@media (max-width:980px){
  /* On a phone the shot goes directly AFTER the H1: somebody arriving from an advertisement wants the bottle to confirm the headline before they read sixty words about it. */ .hero{padding:24px 0 40px}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:16px 0 14px}
  .hero .answer{order:4}
  .hero__cta{order:5}
  .hero__sub{order:6}
  .hero__road{order:7;max-width:100%;margin:16px auto 0}
  .hero .trust__row{order:9}
  .hero .factpills{order:10}
  .hero .figures{order:11}
}
@media (max-width:760px){
  .hero__card{padding:12px 14px 6px;max-width:344px}
}
@media (max-width:560px){
  .hero__card img{max-width:288px}
}
/* --- end of the copied hero responsive rules --- */

/* ---- hero motif -- node-ease ---------------------------------------- */
.hero{position:relative;overflow-x:clip;overflow-y:visible}
:where(.hero__media){position:relative}
.hero__card{position:relative;z-index:2}
.hero__card img{position:relative;z-index:3}
.hero{background:linear-gradient(161deg,#061a20,#103839 52%,#061a20)}.hero__media::before{content:'';position:absolute;pointer-events:none;border-radius:50%;z-index:0;left:30%;top:50%;width:92%;aspect-ratio:1.0;translate:-50% -50%;filter:blur(14px);background:radial-gradient(closest-side,rgba(63,191,171,0.28),transparent 66%);animation:b13NodeEase 15s ease-in-out infinite}.hero__media::after{content:'';position:absolute;pointer-events:none;border-radius:50%;z-index:0;left:70%;top:50%;width:75%;aspect-ratio:1.0;translate:-50% -50%;filter:blur(17px);background:radial-gradient(closest-side,rgba(63,191,171,0.19),transparent 72%);animation:b13NodeEase 15s ease-in-out infinite;animation-delay:1.9s}@keyframes b13NodeEase{0%,100%{transform:scale(.8);opacity:.14}52%{transform:scale(1.06);opacity:0.46}}
@media(prefers-reduced-motion:reduce){.hero__card{animation:none!important}.hero__media::before,.hero__media::after{animation:none!important;opacity:0!important}}

/*!CRITICAL-END*/
/* ---- sections. The site is dark first, so the rhythm is built from three
   grounds rather than from paper and a band: the page ink, a raised panel, and
   a full-width near-black band that breaks the narrow column. */
.sec{padding:62px 0;position:relative}
.sec--tint{background:var(--ink-2)}
.sec--panel{background:var(--ink-3)}
.sec--band{background:var(--night);border-block:1px solid var(--line)}
.sec--center{text-align:center}
.sec--center .sec__head{margin-inline:auto}
.sec__head{max-width:var(--measure);margin:0 0 28px}
.sec__head h2{margin:0 0 10px}
.sec__head p{color:var(--on-dark-2);margin:0}

/* a narrow reading column, broken by the components that want the full wrap */
@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}
}

/* ---- lists */
.ticks{list-style:none;margin:0 0 1.1em;padding:0}
.ticks li{position:relative;padding-left:28px;margin:0 0 .5em}
.ticks li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--aqua);font-weight:700}

/* ---- tables */
.tablewrap{overflow-x:auto;margin:0 0 1.2em;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--ink-2)}
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;
  color:var(--on-dark)}
th{font-family:var(--display);font-weight:600;color:#04211d;background:var(--aqua-d);font-size:.94rem}
tbody tr:nth-child(even){background:var(--ink-3)}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--aqua)}
.tnote{font-size:.9375rem;color:var(--on-dark-3);margin:-.4em 0 1.2em}
/* A phone number or address alone in a cell or a paragraph, a card's own
   "Read the guide" link, or a TOC row is a
   standalone control, and its inline box is only the font's content area:
   21-22px, under the 24px WCAG 2.5.8 minimum. Block padding on an INLINE
   box grows the hit area without touching the line box, so nothing moves. */
td>a[href^="tel:"],td>a[href^="mailto:"],
p>a[href^="tel:"]:only-child,p>a[href^="mailto:"]:only-child,
.card>p>a:only-child,.toc li>a{padding-block:3px}

/* ---- numbered steps */
.steps{display:grid;gap:16px;margin:0 0 1.2em;counter-reset:s}
.step{position:relative;background:var(--ink-3);border:1px solid var(--line);
  border-left:4px solid var(--aqua-d);border-radius:var(--radius);
  padding:20px 22px 20px 72px;box-shadow:var(--shadow)}
.step::before{
  counter-increment:s;content:counter(s);
  position:absolute;left:20px;top:19px;width:36px;height:36px;
  display:grid;place-items:center;
  background:var(--aqua);color:#04211d;
  font-family:var(--display);font-weight:700;font-size:1rem;border-radius:50%;
}
.step h3{margin:0 0 6px}
.step p:last-child{margin:0}

/* ---- cards: the ONE-EDGE RULE. No full border, no fill weight, no lift at
   rest. A bare dark card with a single 4px bar down its left edge, displaced
   against the ground by a hard offset with no blur. */
.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(--ink-3);border:0;
  border-left:4px solid var(--aqua);border-radius:var(--radius);
  padding:22px 24px 20px;box-shadow:var(--shadow);
  transition:transform .2s ease,box-shadow .2s ease}
.card:hover{transform:translateY(-2px);box-shadow:var(--lift)}
.card h3{margin:0 0 8px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.sec--tint .card,.sec--band .card{background:var(--ink-3)}
.sec--panel .card{background:var(--ink-2)}

/* ---- callout, alert, quote, keypoints */
.callout{background:var(--ink-2);border:0;border-left:4px solid var(--aqua-d);
  border-radius:var(--radius);padding:20px 22px;margin:0 0 1.2em;box-shadow:var(--shadow)}
.callout b:first-child{display:block;margin-bottom:6px;color:var(--aqua)}
.callout p:last-child{margin:0}
.alert{background:#22190a;border:0;border-left:4px solid var(--warn);
  border-radius:var(--radius);padding:20px 22px;margin:0 0 1.2em;box-shadow:var(--shadow)}
.alert b:first-child{display:block;margin-bottom:6px;color:var(--warn)}
.alert p:last-child{margin:0}
.alert a{color:var(--warn)}
.pullquote{font-family:var(--display);font-size:1.26rem;font-weight:400;line-height:1.55;
  color:#fff;border-left:4px solid var(--aqua);padding:6px 0 6px 24px;margin:0 0 1.2em}
.pullquote cite{display:block;font-family:var(--text);font-size:.9375rem;font-style:normal;
  font-weight:500;color:var(--on-dark-3);margin-top:8px}
.keypoints{background:var(--ink-3);border:0;border-left:4px solid var(--aqua);
  border-radius:var(--radius);padding:20px 24px;margin:0 0 1.2em;box-shadow:var(--shadow)}
.keypoints>b{display:block;margin-bottom:8px;color:var(--aqua)}
.keypoints ul{margin:0;padding-left:20px}

/* ---- image beside copy. align-items:start, because a short paragraph parked
   in the vertical middle of a tall photograph stops looking attached to it
   (rule 12, section D). */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;
  align-items:start;margin:0 0 1.2em}
.split--flip .split__img{order:2}
.split--tall{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)}
.split--band{grid-template-columns:minmax(0,1fr)}
.split__img img{width:100%;height:auto;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--ink-2)}
.split__body p:last-child{margin:0}
@media (min-width:761px){
  .split__img{width:100%;max-width:min(100%,var(--imgw,100%));margin-inline:auto}
  .split--band .split__img{max-width:100%}
}

/* ---- stat band */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;text-align:center}
.stats div b{display:block;font-family:var(--display);font-size:2.1rem;font-weight:600;
  color:var(--aqua);line-height:1.12}
.stats div span{display:block;font-size:.9375rem;color:var(--on-dark-2);margin-top:4px}

/* ---- label versus research */
.versus{display:grid;grid-template-columns:1.05fr 1fr 1.25fr;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;background:var(--ink-2);margin:0 0 1.2em}
.versus>div{padding:13px 16px;border-bottom:1px solid var(--line);font-size:.98rem;
  color:var(--on-dark)}
.versus>div:nth-child(3n+1){font-weight:600;background:var(--ink-3)}
.versus__h{background:var(--aqua-d)!important;color:#04211d;font-family:var(--display);
  font-weight:600;font-size:.94rem}
/* `.versus>div` (0,1,1) outranks `.versus__h` (0,1,0), so the header cells
   rendered the body colour #eaf6f3 on the aqua fill: 2.05:1, measured.
   (0,2,0) puts the dark ink back on it (7.5:1). Colour only, so the
   header keeps the size and weight it has always rendered at. */
.versus>.versus__h{color:#04211d}

/* ---- ingredient cards */
.inglist{display:grid;gap:16px}
.ingcard{background:var(--ink-3);border:0;border-left:4px solid var(--aqua);
  border-radius:var(--radius);padding:22px 24px;box-shadow:var(--shadow)}
.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(--on-dark-3)}
.ing__dose{margin-left:auto;font-size:.9375rem;font-weight:600;color:#04211d;
  background:var(--aqua-l);padding:3px 12px;border-radius:999px;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(--ink-3);border:0;
  border-left:4px solid var(--line-2);border-radius:var(--radius);
  overflow:hidden;position:relative;padding:0;box-shadow:var(--shadow);
  transition:transform .2s ease,box-shadow .2s ease}
.card--pack:hover{transform:translateY(-2px);box-shadow:var(--lift)}
/* The recommended tier takes the hard offset at its full 6px, in two stops.
   Both stops are written as LITERAL rgba rather than as var(): modern_surface.py
   scans the raw `box-shadow` declarations without resolving custom properties,
   so a sheet whose every shadow reads `var(--shadow)` looks to it like a sheet
   with no layered shadow at all, and it appends a blurred neutral one that
   replaces this site's whole depth language. preflight.py resolves the tokens
   and reads the same sheet as correct. One literal declaration satisfies both
   and is the smallest honest fix. */
.card--pack.featured{border-left-color:var(--aqua);
  box-shadow:6px 6px 0 rgba(63,191,171,.42), 12px 12px 0 rgba(63,191,171,.20)}
.pack__head{background:var(--ink-2);border-bottom:1px solid var(--line);padding:32px 20px 14px;
  display:flex;align-items:center;gap:10px}
.card--pack.featured .pack__head{background:var(--aqua-d)}
.card--pack.featured .pack__head b{color:#04211d}
.card--pack.featured .pack__head span{color:#04211d}
.pack__head b{font-family:var(--display);font-size:1.1rem;font-weight:600;color:#fff}
.pack__head span{font-size:.8438rem;font-weight:600;color:var(--on-dark-3);margin-left:auto;
  white-space:nowrap}
.pack__flag{position:absolute;left:0;right:0;top:0;background:var(--aqua);color:#04211d;
  font-size:0.8438rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 14px;text-align:center;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}
/* No price is printed on this site. The pack carries no figure and the seller
   sets the price at its own checkout, so the slot carries words rather than a
   number nobody could check. The shape is the estate's, unchanged. */
.pack__per{font-family:var(--display);font-size:1.3rem;font-weight:600;color:var(--aqua);
  line-height:1.25;text-align:center;margin:0}
.pack__unit{display:block;text-align:center;font-size:.875rem;font-weight:500;
  color:var(--on-dark-3);margin:4px 0 12px}
.pack__tot{text-align:center;margin:0 0 14px;font-size:.9375rem;color:var(--on-dark-2)}
.pack__perks{list-style:none;margin:0 0 18px;padding:0;font-size:.9375rem}
.pack__perks li{position:relative;padding-left:24px;margin:0 0 6px;color:var(--on-dark-2)}
.pack__perks li::before{content:"\2713";position:absolute;left:0;color:var(--aqua);font-weight:700}
.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:.9062rem;color:var(--on-dark-3)}
.buy__note{font-size:.9375rem;color:var(--on-dark-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(--ink-3);border:0;border-left:4px solid var(--aqua-d);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  transition:transform .2s ease,box-shadow .2s ease}
.shots figure:hover{transform:translateY(-2px);box-shadow:var(--lift)}
.shots img{width:100%}
.shots figcaption{padding:16px 18px}
.shots figcaption b{display:block;margin-bottom:5px;color:var(--aqua)}
.shots figcaption span{font-size:.9375rem;color:var(--on-dark-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(--ink-3);border:0;
  border-left:4px solid var(--aqua-d);border-radius:var(--radius);padding:18px 16px;
  box-shadow:var(--shadow);transition:transform .2s ease,box-shadow .2s ease}
.badgewall figure:hover{transform:translateY(-2px);box-shadow:var(--lift)}
.badgewall img{width:74px;height:74px;object-fit:contain;margin:0 auto 10px;
  background:#fff;border-radius:50%;padding:4px}
.badgewall b{display:block;font-size:.98rem;margin-bottom:4px;color:#fff}
.badgewall span{font-size:.9375rem;color:var(--on-dark-2)}

/* ---- star distribution */
.meter{margin:0 0 1.2em}
.meter__row{display:grid;grid-template-columns:76px minmax(0,1fr) 52px;gap:12px;
  align-items:center;margin:0 0 8px;font-size:.9375rem;color:var(--on-dark-2)}
.meter__bar{height:10px;background:var(--line);border-radius:999px;overflow:hidden}
.meter__bar i{display:block;height:100%;background:linear-gradient(90deg,var(--aqua-d),var(--aqua))}
.stars{color:var(--aqua);letter-spacing:1px}
.stars i{font-style:normal;opacity:.36}

/* ---- FAQ. Padding on <summary>, which is the click target. */
.faq{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:var(--ink-2);margin:0 0 1.2em;box-shadow:var(--shadow)}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{padding:17px 48px 17px 20px;cursor:pointer;position:relative;list-style:none;
  font-family:var(--display);font-weight:600;font-size:1.04rem;color:#fff}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;translate:0 -50%;
  font-family:var(--text);font-size:1.34rem;font-weight:400;color:var(--aqua)}
.faq details[open] summary::after{content:"\2212"}
.faq__body{padding:0 20px 18px;color:var(--on-dark-2)}
.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(--on-dark-2);margin:0 0 .6em}
/* A URL is one unbreakable token; `anywhere` 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(--ink-3);border:0;
  border-left:4px solid var(--aqua);border-radius:var(--radius);padding:22px 24px;
  margin:0 0 1.2em;box-shadow:var(--shadow)}
.byline__mark{flex:0 0 auto;width:54px;height:54px;display:grid;place-items:center;
  background:var(--aqua);color:#04211d;font-family:var(--display);font-weight:700;
  font-size:1.04rem;border-radius:var(--radius-sm)}
.byline b{display:block;margin-bottom:6px;color:#fff}
.byline p{font-size:.9688rem;color:var(--on-dark-2);margin:0}

/* ---- closing CTA */
.final{background:var(--ink-3);border:0;border-left:4px solid var(--aqua);
  border-radius:var(--radius);padding:30px 32px;box-shadow:var(--shadow)}
.final--media{display:grid;grid-template-columns:auto minmax(0,1fr);gap:30px;align-items:start}
.final__img img{width:150px}
.final h2{margin:0 0 10px}
.final__price{font-weight:600;color:var(--on-dark)}
.final__sm{font-size:.9375rem;color:var(--on-dark-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(--ink-3);border:0;border-left:4px solid var(--aqua-d);
  border-radius:var(--radius);padding:20px 22px;text-decoration:none;color:var(--on-dark);
  box-shadow:var(--shadow);transition:transform .2s ease,box-shadow .2s ease}
.rel a:hover{transform:translateY(-2px);box-shadow:var(--lift)}
.rel b{display:block;font-family:var(--display);font-size:1.06rem;color:var(--aqua);margin-bottom:5px}
.rel span{font-size:.9375rem;color:var(--on-dark-2)}

/* ---- forms. 16px minimum or iOS Safari zooms the page on focus. */
.form{display:grid;gap:16px;max-width:var(--measure)}
.field label{display:block;font-weight:600;font-size:.9688rem;margin-bottom:6px;color:#fff}
.field input,.field select,.field textarea{width:100%;font-family:var(--text);font-size:16px;
  padding:13px 14px;border:1px solid var(--line-2);border-radius:var(--radius-sm);
  background:var(--ink-2);color:var(--on-dark)}
.field textarea{min-height:140px;resize:vertical}
.field small{display:block;font-size:0.9062rem;color:var(--on-dark-3);margin-top:5px}
.formcard{background:var(--ink-3);border:0;border-left:4px solid var(--aqua-d);
  border-radius:var(--radius);padding:24px 26px;margin:0 0 1.2em;box-shadow:var(--shadow)}

/* ---- blog */
.article{max-width:var(--measure);margin-inline:auto}
.postmeta{font-size:.9375rem;color:var(--on-dark-3);margin:0 0 20px;
  padding-block:10px;border-block:1px solid var(--line)}
.toc{background:var(--ink-3);border:0;border-left:4px solid var(--aqua);
  border-radius:var(--radius);padding:20px 24px;margin:0 0 28px;box-shadow:var(--shadow)}
.toc b{display:block;margin-bottom:8px;color:var(--aqua)}
.toc ol{margin:0;padding-left:20px}
.toc li{margin:0 0 5px;font-size:1.062rem}
.article h2{scroll-margin-top:130px}
.posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.posts article{background:var(--ink-3);border:0;border-left:4px solid var(--aqua-d);
  border-radius:var(--radius);padding:0 0 22px;overflow:hidden;box-shadow:var(--shadow);
  transition:transform .2s ease,box-shadow .2s ease}
.posts article:hover{transform:translateY(-2px);box-shadow:var(--lift)}
.posts article>*:not(img){padding-inline:24px}
.posts article img{margin-bottom:18px}
.posts h3{margin:0 0 8px}
.posts h3 a{color:#fff;text-decoration:none}
.posts h3 a:hover{color:var(--aqua)}
.posts p{font-size:1.062rem;color:var(--on-dark-2)}
.dtable{min-width:520px}
.article figure{margin:0 0 1.4em;background:var(--ink-2);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden}
.article figure img{width:100%}
.article figcaption{padding:14px 18px;font-size:.9375rem;color:var(--on-dark-2)}

/* ---- footer: near-black, the seals inset along the TOP edge, then the whole
   index running as one wide rank rather than as four columns. */
.fcta{background:linear-gradient(128deg,var(--ink-2) 0%,var(--night) 100%);
  color:var(--on-dark);padding:54px 0;border-top:1px solid var(--line)}
.fcta__box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:34px;align-items:start}
.fcta__eye{display:inline-block;font-size:.8438rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--aqua);margin-bottom:8px}
.fcta__h{font-family:var(--display);font-size:1.6rem;font-weight:600;line-height:1.26;
  margin:0 0 10px;color:#fff}
.fcta p{color:var(--on-dark-2)}
.fcta__sm{font-size:.9375rem;color:var(--on-dark-3);margin:12px 0 0}
.fcta__img img{width:240px}
footer{background:var(--night);border-top:1px solid var(--line)}
.fseals{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding-block:22px;
  border-bottom:1px solid var(--line)}
.fseals img{width:46px;height:46px;object-fit:contain;background:#fff;border-radius:50%;padding:3px}
.fseals span{font-size:.9375rem;color:var(--on-dark-3)}
.fbrand{font-family:var(--display);font-size:1.6rem;font-weight:600;color:#fff;
  letter-spacing:-.01em;line-height:1}
.fbrand span{color:var(--aqua)}
.frole{font-size:1rem;color:var(--on-dark-2);margin:8px 0 18px}
.findex{display:flex;flex-wrap:wrap;gap:8px 26px;list-style:none;margin:0;padding:0;
  padding-block:22px 26px;border-bottom:1px solid var(--line)}
.findex li{margin:0}
.fh{font-size:.95rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--aqua);margin:0 0 10px}
/* inline-block, not block: the box shrink-wraps so the hover rule stays the
   width of the words, and the negative margin gives the row height back. */
footer li a{display:inline-block;padding-block:6px;margin-block:-6px;font-size:.9688rem;
  color:var(--on-dark-2);text-decoration:none}
footer li a:hover{color:var(--aqua)}
.fcard{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding-block:24px}
.fcard p{font-size:1.062rem;color:var(--on-dark-2);margin:0 0 .7em}
.fcard b{color:#fff}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding-block:0 26px}
.fpay img{width:210px;height:auto}
.fpay span{font-size:.9375rem;color:var(--on-dark-3)}
.disc{background:var(--ink);border-top:1px solid var(--line);padding-block:30px 34px}
.disc p,.disc li{font-size:.9375rem;color:var(--on-dark-2)}
.disc b{color:#fff}
.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:.75em;width:9px;height:2px;
  background:var(--aqua-d)}
.copy{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:.9375rem}

/* ---- sticky buy bar */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--night);
  color:var(--on-dark);border-top:2px solid var(--aqua-d);
  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 22px}
.buybar__t{font-size:.9375rem}
.buybar__t b{display:block;font-size:1rem;color:#fff}
.buybar__t span{color:var(--on-dark-2)}
.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){
  .menu{gap:0 16px}
  .menu a{font-size:.9rem}
}
@media (max-width:1040px){
  .nav__top{gap:14px}
  .menu{gap:0 13px}
}
@media (max-width:980px){
  :root{--navh:104px}
  /* On a phone the shot goes directly AFTER the H1: somebody arriving from an
     advertisement wants the bottle to confirm the headline before they read
     sixty words about it. */
  .hero{padding:24px 0 40px}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:16px 0 14px}
  .hero .answer{order:4}
  .hero__cta{order:5}
  .hero__sub{order:6}
  .hero__road{order:7;max-width:100%;margin:16px auto 0}
  .hero .trust__row{order:9}
  .hero .factpills{order:10}
  .hero .figures{order:11}
  .menu{display:none;flex-direction:column;align-items:stretch;gap:0;padding:6px 0 12px;
    flex:1 1 100%;margin:0;order:5}
  .menu.open{display:flex}
  .menu__more{display:block}
  .menu a{padding:12px 0;border-bottom:1px solid var(--line);white-space:normal}
  .menu a[aria-current="page"]{border-bottom-color:var(--line)}
  /* The burger carried margin-left:auto and no order, so it defaulted to 0,
     sorted ahead of the Order pill and pushed it onto a second row: 136px of
     header on an 844px screen. The pill takes the auto margin instead and the
     burger is ordered last. */
  .burger{display:block;order:6;margin-left:12px}
  .nav__buy{order:4;margin-left:auto}
  .nav__top{flex-wrap:wrap;gap:10px}
  .grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .fcta__box{grid-template-columns:1fr}
  .fcta__img{display:none}
  .final--media{grid-template-columns:1fr;gap:20px}
  .fcard{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .sec{padding:46px 0}
  .grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr}
  .prices{grid-template-columns:1fr;max-width:430px;margin-inline:auto}
  .prices .card--pack:nth-child(1){order:3}
  .prices .card--pack:nth-child(2){order:1}
  .prices .card--pack:nth-child(3){order:2}
  .shots,.shots.s2{grid-template-columns:1fr}
  .badgewall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rel,.posts{grid-template-columns:1fr}
  .split,.split--tall,.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)}
  .ing__dose{margin-left:0;white-space:normal}
  .disc__list{columns:1}
  .figures{grid-template-columns:1fr;gap:8px}
  .fcard{grid-template-columns:1fr}
  .buybar__in{flex-wrap:wrap;gap:10px;padding-block:10px}
  .buybar .btn{width:100%;margin-left:0}
  /* Five nowrap chips wrapped to five lines at 390 and ate 130px of an 844px
     screen before the page began. The role, the guarantee and the order line
     stay; the lot and the dose are printed again a few hundred pixels below. */
  .util__row{gap:4px 13px}
  .util__item--trim{display:none}
  .hero__card{padding:12px 14px 6px;max-width:344px}
}
@media (max-width:480px){
  /* The strapline under the wordmark is the first thing to go when the header
     row is tight: it is repeated on the front of the bottle directly below. */
  .bw small{display:none}
  .nav__buy{padding-inline:18px}
}
@media (max-width:560px){
  .hero__card img{max-width:288px}
  .badgewall{grid-template-columns:1fr}
  .findex{gap:6px 18px}
}

/* ---- the product's own ground. The bottle has no plate behind it by design,
   so it gets a soft aqua rim and a flat elliptical shadow of its own; the two
   nodes easing apart in the motif own everything outside it. Transform only,
   NEVER opacity: the bottle is the LCP element and an element starting at
   opacity 0 is not recorded as painted. */
.hero__card{isolation:isolate}
.hero__card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:5px;
  background:linear-gradient(90deg,var(--aqua),rgba(121,227,210,0) 72%);
  z-index:4;pointer-events:none;border-radius:var(--radius) var(--radius) 0 0;
}
@media (prefers-reduced-motion:no-preference){
  /* The float goes on the CARD, never on the <img>. */
  .hero__card{animation:lsvDrift 11s ease-in-out infinite}
  @keyframes lsvDrift{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
}
@media (prefers-reduced-motion:reduce){
  .hero__card{animation:none}
}

/* --- pack cards read as one repeated object.
   Three shots at three shapes (700x1083, 1000x523, 1000x1031) would otherwise
   render at three sizes and put the three Add To Cart buttons 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. */
.card--pack{display:flex;flex-direction:column}
/* The three pack shots are opaque on white for the same reason the hero shot
   is, so they get the same treatment: a light plate rather than three white
   rectangles floating on a dark card. */
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,168px);
  object-fit:contain;margin-inline:auto;margin-bottom:14px;
  background:linear-gradient(168deg,#ffffff,#e4f0ed);
  border-radius:var(--radius-sm);padding:8px 12px}
.card--pack>.btn{margin-top:auto}
/* brand mark: the `underline` construction draws an accent rule under the
   wordmark and ships no icon, so nothing here sizes a glyph. */
.brand{position:relative}

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

/* brand mark: underline construction */
.brand{position:relative}.brand::after{content:'';position:absolute;left:0;right:0;bottom:-5px;height:3px;border-radius:2px;background:#3fbfab}
/* ==== modern surface (modern_surface.py) ==== */
/* House rule 11. This stylesheet had 32 box-shadow declaration(s)
   and 2 of them layered, so every panel read flat however generous
   the radius was. Two stops -- a tight contact shadow and a wide
   ambient one -- is what makes a surface look raised. The tint is
   this site's own ink (6,26,32), not neutral black.

   Paint only: border-radius, box-shadow and transform change no
   geometry, so this is safe below the critical marker and needs a
   restamp rather than a rebuild. */
:root{
  --shadow:0 1px 2px rgba(6,26,32,.06), 0 6px 18px rgba(6,26,32,.07);
  --lift:0 2px 6px rgba(6,26,32,.09), 0 16px 34px rgba(6,26,32,.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. */
.split__img{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,
.posts h3 a{transition:box-shadow .2s ease, transform .2s ease}
.rel a:hover,
.posts article:hover,
.shots figure:hover,
.card--pack:hover,
.badgewall figure:hover,
.posts h3 a: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,
.posts h3 a:hover{transform:none}
}
/* ==== end modern surface ==== */

/* ==== 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 .fpay span{font-size:16px}
footer .fseals span{font-size:16px}
/* ==== end footer type floor ==== */