/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Newsreader Fallback";src:local("Georgia");font-weight:400;size-adjust:96.06%;ascent-override:76.51%;descent-override:27.59%;line-gap-override:0.00%}
@font-face{font-family:"Newsreader Fallback";src:local("Georgia Bold");font-weight:600 900;size-adjust:88.68%;ascent-override:82.89%;descent-override:29.88%;line-gap-override:0.00%}
@font-face{font-family:"Public Sans Fallback";src:local("Arial");font-weight:400;size-adjust:105.60%;ascent-override:89.96%;descent-override:21.31%;line-gap-override:0.00%}
@font-face{font-family:"Public Sans Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:99.78%;ascent-override:95.21%;descent-override:22.55%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* lymphsaviior.com — Lymph Savior, U.S. stocking partner.

   The batch-13 slot, held exactly:
     type     Newsreader / Public Sans — an editorial serif over a neutral
              humanist grotesque, so the headline reads as writing and the
              running text reads as a label.
     ground   pale eucalyptus paper with oat slabs. The WASH is kept to the
              hero and appears nowhere else on the page.
     depth    soft lift, two stops, both tinted with the site's own ink
              (21,41,28) rather than neutral black.
     cards    filled, radius 16, NO border anywhere. The featured price tier
              is marked by fill weight, not by a border or a scale change.
     layout   two columns at 6/6, the bottle LEFT on an oat plate and the
              copy right, the pack ladder under the copy; ONE 68ch measure for
              reading text across every page of the site. (Slot rewritten 21
              Sep 2026 under house rule 12 C2; it was a centred stack.)
     header   identity centred, a thin sage rule, then one centred row of
              destinations.
     footer   a sage block, four columns, closed by a 17px guarantee line.
     mark     arch + anchor (brand_marks.py).
     motif    lymph / drain-flow — a plume that travels DOWNWARD past the
              bottle. No other motif on the estate moves that way, and that is
              the point: lymphatic support is drainage, not rising heat. The
              motif block is appended by hero_motifs.py below CRITICAL-END.

   Everything above the critical-end marker is minified and inlined into
   <head> by tpl.py. Edit it and the site must be REBUILT, not merely
   restamped, or ~31 stale copies keep painting (pitfall 47). The marker is
   NOT spelled out in this comment: tpl.py splits the file on that literal and
   would otherwise cut the stylesheet off at line 25. */

/* ---- tokens */
:root{
  /* ink: a deep forest green-black. Every shadow on this site is tinted with
     it, because a neutral grey shadow under eucalyptus paper is the giveaway
     that the palette stopped at the surface. */
  --ink:#15291c;
  --ink-2:#3f5548;
  /* ink-3 was #5d7266: 4.45:1 on --eu, 4.14 on --eu-2, 3.95 on --oat-2 -- under
     4.5:1 on every ground it is used on except paper. #4d6155 clears 5.0:1 on
     all of them (worst, --oat-2, 5.09) and still reads a step lighter than ink-2. */
  --ink-3:#4d6155;
  --ink-rgb:21,41,28;

  /* accent: read off the bottle's own wordmark green (#3ca848) and darkened
     until white type clears 4.5:1 on the CTA's worst gradient stop. */
  --accent:#1d6530;
  --accent-2:#24743a;
  --accent-lite:#54b76a;
  --accent-ink:#17512a;

  /* ground: pale eucalyptus paper, with oat slabs laid on it. */
  --eu:#e9f0e7;
  --eu-2:#dfe9dc;
  --oat:#f5eddc;
  --oat-2:#ece0c8;
  --paper:#fbfcfa;
  --sage:#8ea890;
  --sage-rule:#b9cdb8;
  --sage-block:#37503f;
  --sage-deep:#2a3f31;

  --line:#d3e0d1;
  --rose:#8a3c3c;          /* the one warning colour, used sparingly */

  --radius:16px;
  --radius-sm:11px;

  /* soft lift, two stops. Rest and hover, published as tokens so the whole
     site lifts by the same amount. */
  --shadow:0 1px 2px rgba(21,41,28,.06), 0 6px 18px rgba(21,41,28,.08);
  --lift:0 2px 6px rgba(21,41,28,.10), 0 16px 34px rgba(21,41,28,.16);

  --wrap:1160px;
  --measure:68ch;
  --navh:132px;

  --serif:"Newsreader","Newsreader Fallback",Georgia,"Times New Roman",serif;
  --sans:"Public Sans","Public Sans Fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* ---- base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:120px}
body{margin:0;background:var(--eu);color:var(--ink);font:400 17.5px/1.68 var(--sans);overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-underline-offset:3px}
a:hover{color:var(--accent-ink)}
hr{border:0;border-top:1px solid var(--line);margin:34px 0}
:focus-visible{outline:3px solid var(--accent-lite);outline-offset:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:14px;top:14px;z-index:99;background:var(--accent);color:#fff;padding:12px 18px;border-radius:var(--radius-sm)}

/* the gutter comes from a WIDTH constraint, never from padding, so a
   component's padding shorthand on a .wrap companion cannot wipe it
   (pitfall 46). */
.wrap{width:min(var(--wrap),100% - 40px);margin-inline:auto}

/* Newsreader is an editorial serif: it wants optical size and a tight
   leading at display sizes, and it goes muddy under about 19px, so nothing
   below a sub-heading is set in it. */
h1,h2,h3,h4,.fbrand,.pack__per,.stats b,.figures b{font-family:var(--serif);font-weight:600;letter-spacing:-.012em}
h1{font-size:clamp(1.98rem,3.8vw,2.72rem);line-height:1.12;margin:.16em 0 .3em;font-weight:600}
h2{font-size:clamp(1.62rem,2.7vw,2.2rem);line-height:1.18;margin:0 0 .4em}
h3{font-size:1.24rem;line-height:1.3;margin:0 0 .45em;font-weight:600}
h4{font-size:1.06rem;margin:0 0 .4em}
p{margin:0 0 1.05em}
b,strong{font-weight:700}

/* the eyebrow names the JOB of the section under it. A drawn sage rule beside
   it rather than a box, so it reads as a label and not as a chip. */
.eyebrow{display:inline-flex;align-items:center;gap:11px;font:700 13.5px/1 var(--sans);
  letter-spacing:.17em;text-transform:uppercase;color:var(--accent-ink)}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--sage);border-radius:2px}

/* ---- buttons: one gradient weight and one solid weight, never two of the same */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font:700 16px/1 var(--sans);letter-spacing:.012em;padding:15px 24px;
  border-radius:var(--radius-sm);border:0;cursor:pointer;text-decoration:none;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.btn--lg{font-size:17px;padding:18px 30px}
.btn--wide{width:100%}

/* Button type colour is held at (0,2,0) so it outranks every container link
   rule on the site. `.final a` is (0,1,1) and beats `.btn--cyan` at (0,1,0);
   85 of 103 stylesheets on this estate carry that geometry, and one of them
   shipped a button rendering its own text at 1.00:1. Measured here as
   rendered: white on the gradient's lighter stop #24743a is 5.8:1. */
.btn.btn--cyan{background:linear-gradient(135deg,var(--accent) 0%,var(--accent-2) 100%);
  color:#fff;box-shadow:var(--shadow)}
.btn.btn--cyan:hover{color:#fff;transform:translateY(-2px);box-shadow:var(--lift)}
.btn.btn--cyan:visited{color:#fff}
/* the solid weight: flat oat, ink type, no gradient and no shadow, so the
   pair reads as two weights rather than one button drawn twice. */
.btn.btn--ghost{background:var(--oat-2);color:var(--ink)}
.btn.btn--ghost:hover{background:var(--oat);color:var(--ink);transform:translateY(-2px)}
.btn.btn--ghost:visited{color:var(--ink)}

/* ---- topline: the five facts a buyer wants before the menu */
.util{background:var(--sage-block);color:#e6efe5;font-size:14.5px}
.util__row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;padding-block:9px;text-align:center}
.util__item{display:inline-flex;align-items:center;gap:7px}
.util__item b{color:#fff;font-weight:700}
.util a{color:#d6ecd6;text-decoration:none;font-weight:700}
.util a:hover{color:#fff;text-decoration:underline}

/* ---- header: identity CENTRED, a thin sage rule, one centred row below it */
.nav{position:sticky;top:0;z-index:40;background:var(--eu);
  box-shadow:0 1px 0 var(--sage-rule);transition:transform .26s ease,box-shadow .26s ease}
/* padding-BLOCK, never the shorthand: this element also carries .wrap and an
   inline shorthand would wipe the page gutter above the container's width. */
.nav__top{position:relative;display:flex;align-items:center;justify-content:center;
  padding-block:11px;min-height:64px}
.brand{display:inline-flex;align-items:center;gap:13px;text-decoration:none;color:var(--ink)}
.brand__glyph,.brand svg{width:44px;height:44px;flex:0 0 44px}
.bw b{display:block;font-family:var(--serif);font-size:1.62rem;line-height:1;font-weight:600;letter-spacing:-.018em}
.bw b em{font-style:normal;color:var(--accent)}
.bw small{display:block;font-size:14.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);margin-top:5px;font-weight:700}
.nav__rail{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:14px}
.nav__price{text-align:right;line-height:1.25}
.nav__price b{display:block;font-size:15.5px}
.nav__price span{display:block;font-size:13.5px;color:var(--ink-3)}
.burger{display:none;width:46px;height:42px;background:var(--oat-2);border-radius:var(--radius-sm);
  align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger span{display:block;width:21px;height:2px;background:var(--ink);border-radius:2px}

/* the thin sage rule, and one centred destination row under it */
.nav__strip{border-top:1px solid var(--sage-rule)}
.menu{display:flex;flex-wrap:nowrap;justify-content:center;gap:4px;margin:0;padding:0;list-style:none}
.menu a{display:block;padding:11px 15px;font:700 15.5px/1 var(--sans);color:var(--ink);
  text-decoration:none;border-radius:var(--radius-sm);white-space:nowrap;
  transition:background .16s ease,color .16s ease}
.menu a:hover{background:var(--oat);color:var(--accent-ink)}
.menu a[aria-current]{color:var(--accent-ink);background:var(--oat-2)}
/* the row SHEDS rather than wrapping: the secondary destinations live in the
   phone menu and in the footer index, never on a second cramped rank. */
.menu__more{display:none}

/* --- header responsive rules, COPIED above CRITICAL-END on purpose ------
   The phone header (burger, static rail, hidden strip, smaller wordmark, the
   trimmed topline) lived only below the marker, and the sheet loads async. A
   phone therefore painted the DESKTOP header -- brand, price, button and the
   seven-link strip piled on top of each other -- and relaid it when the sheet
   landed: CLS 0.187 at 375 and 0.221 at 768 on every page, measured with the
   sheet held back 1.5s. These are copies; the originals stay below, so the
   cascade is unchanged. Edit both halves together. Not managed by
   critical_hero.py, which only copies rules that name .hero. */
@media (max-width:1080px){
  .menu a{padding:13px 11px;font-size:15px}
}
@media (max-width:900px){
  .nav__price{display:none}
}
@media (max-width:760px){
  .burger{display:flex}
  .nav__rail{position:static;transform:none;gap:10px;flex:0 0 auto}
  .nav__top{justify-content:space-between;gap:12px;padding-block:10px;min-height:0}
  .brand{min-width:0}
  .nav__buy{padding:12px 16px;font-size:15px;white-space:nowrap}
  .nav__strip{display:none}
  .nav__strip.open,.menu.open{display:block}
  .menu{flex-direction:column;flex-wrap:wrap;gap:2px;padding-block:8px;display:none}
  .menu.open{display:flex}
  .menu__more{display:block}
  .menu a{padding:12px 10px;text-align:left}
  .nav__strip{display:block;border-top:0}
}
@media (max-width:620px){
  .bw small{display:none}
  .bw b{font-size:1.42rem}
  .brand__glyph,.brand svg{width:38px;height:38px;flex:0 0 38px}
  body{font-size:17px}
  .util__row{gap:6px 16px;font-size:14.5px}
  .util__item--trim{display:none}
}
@media (max-width:460px){
  .nav__top{gap:10px}
  .nav__rail{gap:8px}
  .brand{gap:8px}
  .brand__glyph,.brand svg{width:30px;height:30px;flex:0 0 30px}
  .bw b{font-size:1.2rem}
  .nav__buy{padding:11px 13px}
  .burger{width:42px}
}
@media (max-width:400px){
  .brand__glyph,.brand svg{display:none}
  .brand{min-height:40px}
}
@media (max-width:340px){
  .bw b{font-size:1.04rem}
  .nav__buy{padding:10px 10px}
  .burger{width:40px}
}
/* --- end of the copied header responsive rules --- */

/* ---- hero: TWO COLUMNS at 6/6 from 1000px up (house rule 12 C2, owner 21
   Sep 2026). The top-level rules here are the STACKED form that a phone and a
   narrow tablet get; the two-column form is the min-width:1000px block below.
   Both sit above the critical marker, so the first paint is already the right
   one at every width.

   Until 21 Sep this was one centred axis: eyebrow, headline, Quick Answer,
   buttons and the trust row all ABOVE the plate. Measured at 1440x900 the
   bottle started at y=767, so the first screen carried no product at all --
   the same arithmetic the owner rejected on sight on lymphsavvior.com. */
.hero{position:relative;overflow:hidden;padding:26px 0 46px;background:var(--eu-2)}
.hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);
  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. Stacked, that order is the one
   references/hero.md sets: the bottle directly after the headline, because a
   reader arriving from an advertisement wants the product to confirm the H1
   before reading sixty words about it. Every child gets an explicit order;
   one left at 0 would jump above the eyebrow. */
.hero__copy{display:contents}
.hero .eyebrow{justify-content:center;order:1}
.hero h1{max-width:32ch;margin-inline:auto;order:2}
.hero__media{order:3}
.hero .answer{order:4}
.hero__cta{order:5}
.hero__trust{order:6}
.hero__ladder{order:7}
.hero__road{order:8}
.hero .factpills{order:9}
.hero .figures{order:10}
/* The copy sits ABOVE the motif. The drain-flow plume is positioned and travels
   downward past the plate, and a positioned box paints over every unpositioned
   sibling -- stacked on a phone, that put a green wash across the Quick Answer.
   Rule 7 keeps the motion around the bottle and off the copy, so the copy
   blocks are lifted over it and the plume passes behind them. */
.hero__copy>*,.hero__road,.hero .factpills,.hero .figures{position:relative;z-index:2}

/* the Quick Answer: an oat slab on the wash. It is the block an answer engine
   lifts, so it is set at reading size rather than as a caption. */
.answer{background:var(--oat);border-radius:var(--radius);padding:20px 26px;
  max-width:var(--measure);margin:6px auto 0;box-shadow:var(--shadow);text-align:left}
.answer p{margin:0 0 .6em;font-size:17.5px}
.answer p:last-child{margin-bottom:0}
.answer p:first-child b{font-size:19px}

.hero__road{max-width:var(--measure);margin:22px auto 0;color:var(--ink-2);font-size:16.5px}

.hero__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:13px;margin:20px 0 4px}

/* the E-E-A-T row: who is selling, the guarantee as it is counted, the route
   to the evidence, a human on the end of a telephone. */
.hero__trust{display:flex;flex-wrap:wrap;justify-content:center;gap:9px 28px;
  margin:20px auto 0;max-width:var(--wrap);font-size:15.6px;color:var(--ink-2)}
.hero__trust span{display:inline-flex;align-items:center;gap:8px}
.hero__trust b{color:var(--ink)}
.hero__trust a{font-weight:700}

/* the pack ladder, under the copy. Three FILLED rungs with no border, the
   featured one marked by fill weight -- the cards' own language, so the ladder
   reads as this site and not as a widget. Not links: the add-to-cart panel
   below is the one place a pack is bought. */
.hero__ladder{width:100%;max-width:var(--measure);margin:24px auto 0;text-align:left}
.hl__h{margin:0 0 9px;font:700 14px/1.2 var(--sans);letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent-ink)}
.hero__ladder ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
  margin:0;padding:0;list-style:none}
.hero__ladder li{background:var(--paper);border-radius:var(--radius-sm);
  padding:12px 15px 13px;box-shadow:var(--shadow);min-width:0}
.hero__ladder li b{display:block;font-size:17px;line-height:1.3;color:var(--ink)}
.hl__per{display:block;font-family:var(--serif);font-weight:600;font-size:1.72rem;
  line-height:1.1;margin:3px 0 1px;color:var(--accent-ink)}
.hl__tot{display:block;font-size:14.4px;line-height:1.4;color:var(--ink-2)}
/* white on the accent fill, read off the rendered rung */
.hero__ladder li.is-top{background:var(--accent)}
.hero__ladder li.is-top b,.hero__ladder li.is-top .hl__per,
.hero__ladder li.is-top .hl__tot{color:#fff}
/* the foot: where the figures came from, and the flat secondary button that
   opens the full panel this ladder summarises */
.hl__foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:12px 0 0}
.hl__f{flex:1 1 260px;margin:0;font-size:14.4px;line-height:1.5;color:var(--ink-2)}
.hl__foot .btn{flex:0 0 auto}

/* the bottle on an OAT PLATE. The product master is a studio shot on an opaque
   WHITE ground, so dropped straight onto eucalyptus it reads as a white
   rectangle with a bottle inside it. The plate is therefore a mount: an oat
   slab, the white photograph set into it with its own radius, and the caption
   on the oat, in --ink-2 because --ink-3 on oat falls under 4.5:1. */
.hero__media{position:relative;margin:20px auto 0;width:100%}
.hero__card{position:relative;z-index:1;background:var(--oat);border-radius:var(--radius);
  padding:18px 18px 14px;box-shadow:var(--lift)}
.hero__card img{width:100%;height:auto;margin-inline:auto;border-radius:var(--radius-sm);
  background:#fff}
.hero__cap{margin:12px 0 0;font-size:14.6px;color:var(--ink-2);line-height:1.45}

/* ---- making the drain-flow motif visible -------------------------------
   The plume is sized by hero_motifs.py as a percentage of `.hero__media`. If
   the media column and the product plate are the same box, the plume travels
   its whole cycle behind an opaque plate and nothing is ever seen. So the
   plate shrink-wraps the bottle inside a wider media box and the plume is
   widened past the plate, draining down both sides of the bottle. Specificity,
   not source order, keeps this above the tool's own block. */
.hero .hero__card{width:min(404px,100%);margin-inline:auto}
.hero .hero__media::before{width:min(560px,118%)}
.hero .hero__media::after{width:min(760px,124%)}

.factpills{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  list-style:none;margin:24px 0 0;padding:0}
.factpills li{background:var(--paper);border-radius:999px;padding:9px 18px;
  font-size:15.4px;box-shadow:var(--shadow)}
.factpills b{color:var(--accent-ink)}

.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
  margin:22px auto 0;max-width:760px;width:100%}
.figures>div{background:var(--oat);border-radius:var(--radius);padding:16px 14px;text-align:center}
.figures b{display:block;font-size:1.72rem;line-height:1.05;color:var(--accent-ink)}
.figures span{display:block;font-size:14.4px;color:var(--ink-2);margin-top:5px}

/* ---- the hero at >=1000px: TWO COLUMNS, 6/6 -------------------------------
   Bottle LEFT on its oat plate, copy RIGHT, the ladder under the copy, and the
   roadmap, fact pills and figures in one 68ch measure below both columns.

   The plate spans the six copy rows and is `align-self:start`, so its top edge
   sits level with the eyebrow (rule 12 D) rather than floating in the middle
   of a tall column. hero_sticky.py is no longer wired in for this site: its
   block centres the plate inside a box one screen tall, which would push the
   bottle down away from the eyebrow it now starts level with, and it lands
   after the critical marker, so the first paint and the settled page would
   disagree. */
@media (min-width:1000px){
  .hero{padding:34px 0 52px}
  .hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:56px;
    row-gap:0;align-items:start;justify-items:stretch;text-align:left}
  .hero .eyebrow{grid-column:2;grid-row:1;justify-content:flex-start}
  .hero h1{grid-column:2;grid-row:2;max-width:none;margin:.3em 0 .3em;
    font-size:clamp(1.98rem,2.9vw,2.5rem)}
  .hero .answer{grid-column:2;grid-row:3;max-width:none;margin:4px 0 0}
  .hero__cta{grid-column:2;grid-row:4;justify-content:flex-start;margin:20px 0 0}
  .hero__trust{grid-column:2;grid-row:5;justify-content:flex-start;gap:6px 22px;
    margin:16px 0 0;max-width:none}
  .hero__ladder{grid-column:2;grid-row:6;max-width:none;margin:22px 0 0}
  .hero .hero__media{grid-column:1;grid-row:1 / span 6;align-self:start;
    width:100%;margin:0}
  .hero .hero__card{width:min(436px,100%)}
  .hero__road{grid-column:1 / -1;grid-row:7;margin:40px auto 0}
  .hero .factpills{grid-column:1 / -1;grid-row:8}
  .hero .figures{grid-column:1 / -1;grid-row:9}
  /* the bed is pulled in so it cannot reach across the 56px gutter onto the
     copy: 114% of the column overhangs by 38px a side. */
  .hero .hero__media::after{width:min(640px,114%)}
}

/* ---- inner page head */
.phead{background:var(--eu-2);padding:30px 0 34px;text-align:center}
.phead .eyebrow{justify-content:center}
.phead h1{max-width:24ch;margin-inline:auto}
.crumbs{font-size:14.4px;color:var(--ink-3);margin:0 0 12px}
.crumbs a{color:var(--ink-2)}
.phead .lead{max-width:var(--measure);margin:16px auto 0;font-size:18.5px;color:var(--ink-2)}

/* --- hero responsive rules, copied above CRITICAL-END on purpose ---------
   A phone that paints the DESKTOP hero from the inlined block and then relays
   when the async sheet arrives is the whole mobile-CLS problem on this estate
   (692px of reflow, CLS ~0.9). So the stacked and the phone rules live here,
   above the marker, with the rest of the hero. */
@media (max-width:999px){
  .hero{padding:28px 0 36px}
  .hero__media{margin:16px 0 18px}
  .figures{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
}
@media (max-width:620px){
  .hero{padding:22px 0 30px}
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{width:100%}
  .answer{padding:17px 18px}
  .figures{grid-template-columns:1fr;max-width:340px}
  .hero__card{padding:14px 14px 12px}
  .hero .hero__card{width:min(300px,94%)}
  /* one rung a row: name and total left, the per-bottle figure right */
  .hero__ladder ol{grid-template-columns:1fr;gap:8px}
  .hero__ladder li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;
    align-items:center;padding:11px 16px}
  .hero__ladder li .hl__per{grid-column:2;grid-row:1 / span 2;margin:0}
  .hl__foot .btn{flex:1 1 100%}
}
/* ---- section padding, COPIED above the marker. The originals stay below.
   Every page's first section sat on the first screen without its 58px of
   padding until the async sheet landed, then dropped 58px: CLS 0.11-0.15 on
   the five blog posts at 768 and 1440, the blog index and who-its-for. */
.sec{padding:58px 0}
@media (max-width:620px){
  .sec{padding:42px 0}
}

/* ---- reading measure, the alert and the blog head, COPIED above the marker.
   A blog post's first screen (crumbs, H1, byline, Quick Answer, contents list,
   alert) was laid out at the full 1,160px wrap until the sheet landed, then
   narrowed to the measure and re-wrapped: CLS 0.12 on every post at 1440. The
   originals stay below; edit both. */
.sec>.wrap>p,.sec>.wrap>ul,.sec>.wrap>ol,.sec__head h2,.sec__head p,
.sec>.wrap>.callout,.sec>.wrap>.alert,.sec>.wrap>.keypoints,
.sec>.wrap>.pullquote,.sec>.wrap>.tnote{max-width:var(--measure)}
.sec--center>.wrap>p,.sec--center>.wrap>ul{margin-inline:auto}
.alert{background:#f6e8e4;border-radius:var(--radius);padding:20px 24px;margin:0 0 20px;color:#3d2320}
.alert b{display:block;font-family:var(--serif);font-size:1.12rem;margin-bottom:.36em;color:var(--rose)}
.alert p:last-child{margin-bottom:0}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.posts>*{min-width:0}
.posts article{background:var(--paper);border-radius:var(--radius);padding:22px 24px;
  box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease}
.posts h3{margin-bottom:.3em}
.posts p{font-size:17px;color:var(--ink-2)}
.article{max-width:var(--measure)}
.article h2{margin-top:1.5em}
.postmeta{font-size:15.4px;color:var(--ink-3);margin:0 0 20px}
.toc{background:var(--oat);border-radius:var(--radius);padding:20px 24px;margin:0 0 26px}
.toc b{display:block;font-family:var(--serif);font-size:1.1rem;margin-bottom:.4em}
.toc ol{margin:0;padding-left:22px;font-size:16.2px}
.toc li{margin-bottom:.35em}
@media (max-width:900px){
  .shots,.rel,.posts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .grid.g2,.grid.g3,.shots,.shots.s2,.rel,.posts{grid-template-columns:1fr}
}

/* ---- standalone links under the 24px target (WCAG 2.5.8): the blog contents
   list (21px), the blog index "Read it" (22px) and the phone and mailbox in the
   contact table and the blog source column (22px). Padding grows the target, the equal negative margin
   gives the space straight back, so no line moves. */
.toc li a,.posts article>p>a,td>a[href^="tel:"],td>a[href^="mailto:"],td.src>a{display:inline-block;padding-block:3px;margin-block:-3px}
/* the mailbox address is one 209px word; in a three-across card at 768 it ran
   4px past the card edge. It breaks only where it would otherwise overflow. */
a[href^="mailto:"]{overflow-wrap:anywhere}


/* ---- hero motif -- drain-flow ---------------------------------------- */
.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(171deg,#fbfcfa,#ddf0e0 52%,#fbfcfa)}.hero__media::before{content:'';position:absolute;pointer-events:none;left:50%;top:-6%;width:44%;aspect-ratio:0.42;translate:-50% 0;z-index:1;filter:blur(13px);border-radius:50% 50% 42% 42%;background:linear-gradient(180deg,rgba(84,183,106,0.38),transparent 88%);animation:b13DrainFlow 13s cubic-bezier(.35,.05,.4,1) infinite}.hero__media::after{content:'';position:absolute;pointer-events:none;border-radius:50%;z-index:0;left:50%;top:2%;width:96%;aspect-ratio:2.6;translate:-50% 0;background:radial-gradient(closest-side,rgba(84,183,106,0.24),transparent 70%);animation:b13DrainFlowBed 13s ease-in-out infinite}@keyframes b13DrainFlow{0%{transform:translateY(-26%) scaleY(.6) scaleX(1.12);opacity:0}28%{opacity:0.54}72%{transform:translateY(105%) scaleY(1.2) scaleX(.64);opacity:0.30}100%{transform:translateY(150%) scaleY(1.3) scaleX(.46);opacity:0}}@keyframes b13DrainFlowBed{0%,100%{transform:scale(.92);opacity:.2}50%{transform:scale(1.06);opacity:0.43}}
@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. Eucalyptus paper, oat slabs on it, one measure throughout. */
.sec{padding:58px 0}
.sec--tint{background:var(--eu-2)}
.sec--panel{background:var(--oat)}
.sec--dark{background:var(--sage-block);color:#e8f0e7}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark a{color:#c9e6c9}
.sec--dark .eyebrow{color:#bcd8bc}
.sec--dark .eyebrow::before{background:#7f9b82}
.sec--dark p,.sec--dark li{color:#e3ece2}
.sec--center{text-align:center}
.sec--center .eyebrow{justify-content:center}
.sec__head{margin:0 0 28px}
.sec__head h2{margin:.22em 0 .3em}
.sec__head p{max-width:var(--measure);color:var(--ink-2);font-size:18px}
.sec--center .sec__head p{margin-inline:auto}

/* ONE measure, everywhere. Multi-column components keep the full wrap; a
   paragraph never does. A 1,160px line of 17.5px type is 130 characters and
   nobody finishes it. */
.sec>.wrap>p,.sec>.wrap>ul,.sec>.wrap>ol,.sec__head h2,.sec__head p,
.sec>.wrap>.callout,.sec>.wrap>.alert,.sec>.wrap>.keypoints,
.sec>.wrap>.pullquote,.sec>.wrap>.tnote{max-width:var(--measure)}
.sec--center>.wrap>p,.sec--center>.wrap>ul{margin-inline:auto}

/* ---- lists */
ul.ticks{list-style:none;padding:0;margin:0 0 1.1em}
ul.ticks li{position:relative;padding-left:30px;margin-bottom:.62em}
ul.ticks li::before{content:"";position:absolute;left:0;top:.52em;width:14px;height:14px;
  border-radius:4px;background:var(--accent-lite)}
.sec ul:not(.ticks):not(.menu):not(.pack__perks):not(.factpills):not(.disc__list){padding-left:22px}
.sec ul:not(.ticks) li,.sec ol li{margin-bottom:.55em}

/* ---- tables: an oat plate wherever it sits, with its own declared colours */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius);
  box-shadow:var(--shadow);background:var(--paper);margin:0 0 18px}
table{width:100%;border-collapse:collapse;font-size:16.4px;background:var(--paper);color:var(--ink)}
th,td{padding:13px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
thead th{background:var(--oat-2);color:var(--ink);font:700 14.6px/1.3 var(--sans);
  letter-spacing:.06em;text-transform:uppercase;border-bottom:0}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even) td{background:#f4f8f3}
.tnote{font-size:15.4px;color:var(--ink-3);margin:0 0 1em}

/* ---- numbered steps */
.steps{counter-reset:s;display:grid;gap:16px}
.step{counter-increment:s;position:relative;background:var(--paper);border-radius:var(--radius);
  padding:22px 24px 18px 72px;box-shadow:var(--shadow);
  transition:transform .18s ease,box-shadow .18s ease}
.step::before{content:counter(s);position:absolute;left:22px;top:22px;width:34px;height:34px;
  border-radius:50%;background:var(--accent);color:#fff;
  font:700 17px/34px var(--sans);text-align:center}
.step p:last-child{margin-bottom:0}

/* ---- cards: FILLED, radius 16, no border anywhere on this site */
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* a grid ITEM defaults to min-width:auto, which floors at min-content, so a
   long unbroken string forces the track wider than its share (pitfall: a
   nested grid once gave a 118px column). */
.grid>*{min-width:0}
.card{background:var(--paper);border-radius:var(--radius);padding:24px 26px;
  box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease}
.card p:last-child,.card ul:last-child{margin-bottom:0}

/* ---- callout, alert, quote, keypoints: oat plates with declared type */
.callout{background:var(--oat);border-radius:var(--radius);padding:20px 24px;margin:0 0 20px}
.callout b{display:block;font-family:var(--serif);font-size:1.12rem;margin-bottom:.36em}
.callout p:last-child{margin-bottom:0}
.alert{background:#f6e8e4;border-radius:var(--radius);padding:20px 24px;margin:0 0 20px;color:#3d2320}
.alert b{display:block;font-family:var(--serif);font-size:1.12rem;margin-bottom:.36em;color:var(--rose)}
.alert p:last-child{margin-bottom:0}
.pullquote{background:var(--paper);border-radius:var(--radius);margin:0 0 20px;padding:24px 28px;
  font-family:var(--serif);font-size:1.28rem;line-height:1.45;box-shadow:var(--shadow)}
.pullquote cite{display:block;margin-top:.6em;font:700 14.6px/1.4 var(--sans);
  font-style:normal;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase}
.keypoints{background:var(--oat-2);border-radius:var(--radius);padding:20px 24px;margin:0 0 20px}
.keypoints b{display:block;font-family:var(--serif);font-size:1.12rem;margin-bottom:.4em}
.keypoints ul{margin:0;padding-left:22px}

/* ---- image beside copy. They START LEVEL: `align-items:center` puts short
   copy in the vertical middle of a tall photograph and strands 180px of empty
   ground above the first line (measured on 81 of 103 sites). */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;
  align-items:start;margin:0 0 22px}
.split--flip .split__img{order:2}
.split__img img{border-radius:var(--radius);box-shadow:var(--shadow);width:100%}
.split__body>*:first-child{margin-top:0}
.split__body p:last-child{margin-bottom:0}
/* a portrait renders taller than three paragraphs, so its column narrows and
   its height is capped. Never width:auto under a height cap — a lazy image
   that has not arrived computes 4px wide and collapses the block, so the
   generator stamps --imgw and --imgar from the file's own attributes. */
@media (min-width:761px){
  .split__img img{max-height:420px;width:min(100%,var(--imgw,100%));margin-inline:auto;object-fit:contain}
  .split--tall{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)}
  .split--tall .split__img img{max-height:470px;width:calc(470px * var(--imgar,1))}
}
/* a banner is a band, not a column: a 114px strip beside 631px of copy is
   stranded however you align it. */
.split--band{grid-template-columns:1fr}
.split--band .split__img{order:-1}
.split--band .split__img img{max-height:none;width:min(100%,var(--imgw,100%))}

/* ---- stat band, for use inside sec--dark only */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.stats>div{background:rgba(255,255,255,.08);border-radius:var(--radius);padding:20px 16px;text-align:center}
.stats b{display:block;font-size:2rem;line-height:1.05;color:#fff}
.stats span{display:block;font-size:14.6px;color:#d6e6d5;margin-top:6px}

/* ---- the trial amount beside a label column with nothing in it */
.versus{display:grid;grid-template-columns:1.1fr .9fr 2fr;gap:0;border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);background:var(--paper);margin:0 0 18px;font-size:16.2px}
.versus>div{padding:13px 16px;border-bottom:1px solid var(--line)}
.versus__h{background:var(--oat-2);font:700 14.4px/1.3 var(--sans);letter-spacing:.06em;
  text-transform:uppercase;border-bottom:0}

/* ---- ingredient cards */
.inglist{display:grid;gap:18px}
.ingcard{background:var(--paper);border-radius:var(--radius);padding:24px 26px;
  box-shadow:var(--shadow);min-width:0;transition:transform .18s ease,box-shadow .18s ease}
.ingcard__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;margin-bottom:.6em}
.ingcard__top h3{margin:0}
.ing__latin{font-style:italic;color:var(--ink-3);font-size:16px}
.ing__dose{margin-left:auto;background:var(--oat-2);border-radius:999px;padding:6px 14px;
  font:700 14.2px/1 var(--sans);color:var(--ink-2);white-space:nowrap}
.ingcard p:last-child{margin-bottom:0}

/* ---- the add-to-cart panel, directly beneath the hero on the home page */
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;
  align-items:stretch;margin:0 0 18px}
.prices>*{min-width:0}
.card--pack{position:relative;display:flex;flex-direction:column;background:var(--paper);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  transition:transform .18s ease,box-shadow .18s ease}
/* the featured tier is marked by FILL WEIGHT. No border, no scale change, no
   negative margin — a taller card in a three-across row drags the other two
   out of line and pack_cards.py then has to put them back. */
.card--pack.featured{background:var(--oat)}
.card--pack.featured .pack__head{background:var(--accent);color:#fff}
.card--pack.featured .pack__head span{color:#d8efd9}
.pack__flag{position:absolute;right:14px;top:13px;z-index:2;background:var(--oat-2);
  color:var(--ink);border-radius:999px;padding:6px 13px;font:700 13.5px/1 var(--sans);
  letter-spacing:.05em;text-transform:uppercase}
.card--pack.featured .pack__flag{background:#fff;color:var(--accent-ink)}
.pack__head{background:var(--oat-2);padding:18px 22px}
.pack__head b{display:block;font-family:var(--serif);font-size:1.34rem;line-height:1.1}
.pack__head span{display:block;font-size:14.4px;color:var(--ink-3);margin-top:4px}
.pack__body{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px;text-align:center}
.pack__body img{margin:0 auto 14px;width:auto;max-width:100%}
.pack__per{font-family:var(--serif);font-size:2.5rem;line-height:1;margin:0;color:var(--accent-ink)}
.pack__per sup{font-size:.46em;top:-.66em;position:relative}
.pack__unit{display:block;font-size:14.4px;color:var(--ink-3);margin-top:4px}
.pack__tot{margin:10px 0 14px;font-size:16.4px}
.pack__was{color:var(--ink-3);text-decoration:line-through;margin-left:6px}
.pack__perks{list-style:none;margin:0 0 18px;padding:0;text-align:left;font-size:15.6px}
.pack__perks li{position:relative;padding-left:24px;margin-bottom:.48em}
.pack__perks li::before{content:"";position:absolute;left:0;top:.5em;width:11px;height:11px;
  border-radius:3px;background:var(--accent-lite)}
.pack__body .btn{margin-top:auto}
.pack__marks{margin:12px 0 0;font-size:13.8px;color:var(--ink-3)}
.buy__note{font-size:15.6px;color:var(--ink-2);max-width:var(--measure)}

/* ---- captioned images. `.gallery` is retired: a row of pictures with
   nothing to read asks the reader to work out why it is there. */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0 0 18px}
.shots.s2{grid-template-columns:repeat(2,minmax(0,1fr))}
.shots>*{min-width:0}
.shots figure{margin:0;background:var(--paper);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease}
.shots figure img{width:100%}
.shots figcaption{padding:16px 20px 18px}
.shots figcaption b{display:block;font-family:var(--serif);font-size:1.1rem;margin-bottom:.3em}
.shots figcaption span{display:block;font-size:15.4px;color:var(--ink-2);line-height:1.5}
.portrait{max-width:var(--figw,420px);margin-inline:auto}

/* ---- seal wall */
.badgewall{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.badgewall>*{min-width:0}
.badgewall figure{margin:0;background:var(--paper);border-radius:var(--radius);padding:18px 14px;
  text-align:center;box-shadow:var(--shadow)}
.badgewall img{margin:0 auto 10px}
.badgewall b{display:block;font-size:15.2px;margin-bottom:.25em}
.badgewall span{display:block;font-size:14.2px;color:var(--ink-3);line-height:1.45}

/* ---- star distribution */
.meter{display:grid;gap:10px;max-width:var(--measure)}
.meter__row{display:grid;grid-template-columns:78px 1fr 46px;align-items:center;gap:12px;font-size:15.6px}
.meter__bar{display:block;height:11px;border-radius:999px;background:var(--oat-2);overflow:hidden}
.meter__bar i{display:block;height:100%;background:var(--accent-lite);border-radius:999px}
.stars{color:var(--accent);letter-spacing:.08em}
.stars i{font-style:normal;color:var(--oat-2)}

/* ---- FAQ. The padding is on <summary>, which is the click target. */
.faq{display:grid;gap:12px;max-width:var(--measure)}
.faq details{background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:17px 22px;font-weight:700;font-size:17px;
  display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--serif);font-size:1.5rem;line-height:1;color:var(--accent)}
.faq details[open] summary::after{content:"\2013"}
.faq__body{padding:0 22px 18px}
.faq__body p:last-child{margin-bottom:0}

/* ---- references and the byline */
.refs{background:var(--paper);border-radius:var(--radius);padding:22px 26px;box-shadow:var(--shadow);margin:0 0 20px}
.refs ol{margin:0;padding-left:22px;font-size:15.6px;line-height:1.55}
.refs li{margin-bottom:.7em}
/* the list prints each source's full URL as the link text, and a URL has no
   spaces to break at. */
.refs a{word-break:break-word;overflow-wrap:anywhere}
.byline{display:flex;gap:18px;align-items:flex-start;background:var(--oat);border-radius:var(--radius);padding:22px 26px}
.byline__mark{flex:0 0 54px;width:54px;height:54px;border-radius:50%;background:var(--accent);
  color:#fff;font:700 19px/54px var(--sans);text-align:center;letter-spacing:.02em}
.byline b{display:block;font-family:var(--serif);font-size:1.14rem;margin-bottom:.35em}
.byline p{margin:0;font-size:16px;color:var(--ink-2)}

/* ---- closing CTA */
.final{background:var(--paper);border-radius:var(--radius);padding:30px 32px;box-shadow:var(--lift)}
.final--media{display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px;align-items:start}
.final__img img{border-radius:var(--radius-sm)}
.final__body h2{margin-top:0}
.final__price{font-weight:700}
.final__sm{margin:12px 0 0;font-size:14.8px;color:var(--ink-3)}
.final .btn{margin-top:6px}

/* ---- the guarantee slab above the footer */
.fcta{background:var(--eu-2);padding:52px 0}
.fcta__box{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:34px;align-items:start;
  background:var(--paper);border-radius:var(--radius);padding:32px 36px;box-shadow:var(--lift)}
.fcta__eye{display:inline-block;font:700 13.5px/1 var(--sans);letter-spacing:.17em;
  text-transform:uppercase;color:var(--accent-ink);margin-bottom:12px}
.fcta__h{font-family:var(--serif);font-size:1.62rem;line-height:1.22;margin:0 0 .5em;font-weight:600}
.fcta__sm{margin:12px 0 0;font-size:15px;color:var(--ink-3)}
.fcta__img img{border-radius:var(--radius-sm);margin-inline:auto}

/* ---- related */
.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.rel>*{min-width:0}
.rel a{display:block;background:var(--paper);border-radius:var(--radius);padding:20px 22px;
  text-decoration:none;color:var(--ink);box-shadow:var(--shadow);text-align:left;
  transition:transform .18s ease,box-shadow .18s ease}
.rel b{display:block;font-family:var(--serif);font-size:1.12rem;margin-bottom:.25em;color:var(--accent-ink)}
.rel span{display:block;font-size:15.4px;color:var(--ink-2);line-height:1.5}

/* ---- forms. 16px minimum, or iOS Safari zooms the page on focus and never
   zooms back out again. */
.formgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:760px}
.field{display:block}
.field span{display:block;font-weight:700;font-size:15.6px;margin-bottom:6px}
.field--wide{grid-column:1 / -1}
input,select,textarea{width:100%;font:400 16px/1.5 var(--sans);color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px}
textarea{min-height:150px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:2px solid var(--accent-lite);outline-offset:1px}

/* ---- blog */
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.posts>*{min-width:0}
.posts article{background:var(--paper);border-radius:var(--radius);padding:22px 24px;
  box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease}
.posts h3{margin-bottom:.3em}
.posts h3 a{text-decoration:none;color:var(--ink)}
.posts p{font-size:17px;color:var(--ink-2)}
.article{max-width:var(--measure)}
.article h2{margin-top:1.5em}
.article figure{margin:26px 0;background:var(--paper);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow)}
.article figure img{width:100%}
.article figcaption{padding:14px 20px 16px;font-size:15.4px;color:var(--ink-2)}
.article .final--media{grid-template-columns:150px minmax(0,1fr);padding:24px}
.postmeta{font-size:15.4px;color:var(--ink-3);margin:0 0 20px}
.toc{background:var(--oat);border-radius:var(--radius);padding:20px 24px;margin:0 0 26px}
.toc b{display:block;font-family:var(--serif);font-size:1.1rem;margin-bottom:.4em}
.toc ol{margin:0;padding-left:22px;font-size:16.2px}
.toc li{margin-bottom:.35em}

/* ---- footer: a SAGE BLOCK, four columns, a guarantee line closing it */
.fseals{background:var(--oat)}
.fseals__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:14px 22px;padding-block:20px;text-align:center}
.fseals__row span{font-size:16px;color:var(--ink-2);flex:1 1 280px;text-align:left}
.fdark{background:var(--sage-block);color:#e5eee4;padding:44px 0 34px}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px}
.fgrid>*{min-width:0}
.fbrand{font-family:var(--serif);font-size:1.7rem;line-height:1;color:#fff;margin-bottom:10px}
.fbrand span{color:var(--accent-lite)}
.frole{font-size:16px;color:#c9dcc8}
.fdark p{font-size:17px;line-height:1.6;margin:0 0 14px}
.fdark b{color:#fff}
.fdark a{color:#d8ecd7;text-decoration:none}
.fdark a:hover{color:#fff;text-decoration:underline}
.fh{font:700 15px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:#a9c6a8;margin:0 0 12px}
.fdark ul{list-style:none;margin:0 0 22px;padding:0}
.fdark li{margin-bottom:9px}
/* inline-block, not block: the box shrink-wraps so the hover underline stops
   at the end of the words rather than running to the column edge. */
.fdark li a{display:inline-block;font-size:17px;padding:4px 0}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:8px;
  padding-top:22px;border-top:1px solid rgba(255,255,255,.14)}
.fpay span{font-size:16px;color:#c9dcc8}
.fguarantee{margin:18px 0 0;font-size:17px;color:#fff;font-weight:700}
.disc{background:var(--sage-deep);color:#cfdccd;padding:28px 0}
.disc p{font-size:16px;line-height:1.6;max-width:var(--measure)}
.disc b{color:#fff}
.disc__list{list-style:none;margin:16px 0 0;padding:0;
  columns:2;column-gap:36px;font-size:16px;line-height:1.55}
.disc__list li{break-inside:avoid;margin-bottom:10px;padding-left:18px;position:relative}
.disc__list li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
  border-radius:2px;background:var(--sage)}
.disc a{color:#d8ecd7}
.copy{margin:20px 0 0;font-size:16px;color:#b6c8b4}

/* ---- sticky buy bar. Present at every width: a desktop reader is competing
   for the same click. */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;
  background:var(--sage-block);color:#fff;transform:translateY(105%);
  transition:transform .28s ease;box-shadow:0 -6px 22px rgba(21,41,28,.22)}
.buybar.show{transform:translateY(0)}
.buybar__in{width:min(var(--wrap),100% - 32px);margin-inline:auto;display:flex;
  align-items:center;justify-content:space-between;gap:18px;padding-block:12px}
.buybar__t b{display:block;font-size:16px}
.buybar__t span{display:block;font-size:14.4px;color:#cbe2ca}

/* ---- reveal */
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
[data-reveal].in{opacity:1;transform:none}

/* ---- pointer response. Every clickable surface answers, and 2px registers
   without reflowing the row beside it. */
.card:hover,.step:hover,.ingcard:hover,.shots figure:hover,.rel a:hover,
.posts article:hover,.card--pack:hover{transform:translateY(-2px);box-shadow:var(--lift)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  .card:hover,.step:hover,.ingcard:hover,.shots figure:hover,.rel a:hover,
  .posts article:hover,.card--pack:hover,.btn:hover{transform:none}
}

/* ---- responsive */
@media (max-width:1080px){
  .menu a{padding:13px 11px;font-size:15px}
  .fgrid{grid-template-columns:1.4fr 1fr 1fr}
  .badgewall{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:900px){
  .nav__price{display:none}
  .prices{grid-template-columns:1fr;max-width:460px;margin-inline:auto}
  .versus{grid-template-columns:1fr;font-size:16px}
  .versus__h{display:none}
  .versus>div{border-bottom:1px solid var(--line)}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shots,.rel,.posts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fcta__box{grid-template-columns:1fr}
  .fcta__img{order:-1}
  .fcta__img img{max-width:200px}
}
@media (max-width:760px){
  .burger{display:flex}
  .nav__rail{position:static;transform:none;gap:10px;flex:0 0 auto}
  .nav__top{justify-content:space-between;gap:12px;padding-block:10px;min-height:0}
  .brand{min-width:0}
  .nav__buy{padding:12px 16px;font-size:15px;white-space:nowrap}
  .nav__strip{display:none}
  .nav__strip.open,.menu.open{display:block}
  .menu{flex-direction:column;flex-wrap:wrap;gap:2px;padding-block:8px;display:none}
  .menu.open{display:flex}
  .menu__more{display:block}
  .menu a{padding:12px 10px;text-align:left}
  .nav__strip{display:block;border-top:0}
  .fgrid{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr;gap:20px}
  .split--flip .split__img{order:-1}
  .final--media{grid-template-columns:1fr}
  .final__img img{max-width:180px;margin-inline:auto}
  /* `.article .final--media` (0,2,0) outranked the line above, so on a phone
     every blog post closed on a 150px image beside a 109px text column: the
     H2 245px tall, the button 138px, the box 1,115px. Below the fold on
     every page, and its base grid is not in the critical block, so a copy
     above the marker would change nothing. */
  .article .final--media{grid-template-columns:1fr}
  .disc__list{columns:1}
}
@media (max-width:620px){
  .bw small{display:none}
  .bw b{font-size:1.42rem}
  .brand__glyph,.brand svg{width:38px;height:38px;flex:0 0 38px}
  body{font-size:17px}
  .sec{padding:42px 0}
  .card,.ingcard{padding:20px 20px}
  .step{padding:20px 20px 16px 62px}
  .step::before{left:16px;top:18px}
  .grid.g2,.grid.g3,.shots,.shots.s2,.rel,.posts{grid-template-columns:1fr}
  .badgewall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fgrid{grid-template-columns:1fr;gap:22px}
  .formgrid{grid-template-columns:1fr}
  .util__row{gap:6px 16px;font-size:14.5px}
  .util__item--trim{display:none}
  .buybar__in{flex-direction:column;align-items:stretch;gap:9px;padding-block:10px;text-align:center}
  .buybar .btn{width:100%}
  .fcta{padding:38px 0}
  .fcta__box{padding:24px 22px}
  .byline{flex-direction:column;gap:12px}
  .meter__row{grid-template-columns:66px 1fr 40px;font-size:15px}
}
/* the phone header did not fit: "Lymphsaviior" at 1.42rem beside a 111px
   Order Now and the burger needs 387px, so from 414px down the button painted
   over the end of the wordmark (41px of it at 375, 96px at 320). Tightened in
   three steps; the glyph goes first below 400px because the wordmark is the
   brand and the favicon already carries the mark. Copied above the marker. */
@media (max-width:460px){
  .nav__top{gap:10px}
  .nav__rail{gap:8px}
  .brand{gap:8px}
  .brand__glyph,.brand svg{width:30px;height:30px;flex:0 0 30px}
  .bw b{font-size:1.2rem}
  .nav__buy{padding:11px 13px}
  .burger{width:42px}
}
@media (max-width:400px){
  .brand__glyph,.brand svg{display:none}
  .brand{min-height:40px}
}
@media (max-width:340px){
  .bw b{font-size:1.04rem}
  .nav__buy{padding:10px 10px}
  .burger{width:40px}
}

/* ---- hero: NO sticky product column on this site. Since the 21 Sep 2026
   rebuild the hero is two columns and the plate starts level with the eyebrow
   (rule 12 D); a column centred in a screen-tall sticky box would move it off
   that line. See the two-column block above the critical marker, and the note
   where hero_sticky.py used to be wired in postbuild.py. */

/* brand mark: arch construction, anchor glyph */
.brand__glyph{border-radius:0}

/* ==== directional chrome (fix_chrome_scroll.py) ==== */
.nav--away{transform:translateY(-100%)}
html.chrome-up .buybar{transform:translateY(105%)}
/* ==== end directional chrome ==== */

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

   The height lives here and not on the <img> attributes on purpose: those
   must keep stating each file's true ratio, or fix_img_dims.py rewrites them
   and CLS gets worse. Override per site with --pack-img. */
.card--pack{display:flex;flex-direction:column}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,168px);
  object-fit:contain;margin-inline:auto;margin-bottom:14px}
.card--pack>.btn{margin-top:auto}

/* The footer column link is the thing you tap, and it was 17px tall in
   35px of row pitch -- under the 24px WCAG AA floor. The padding grows the
   hit area to ~33px and the negative margin gives the space straight back,
   so the footer renders identically. inline-block (not block) keeps the
   hover underline the width of the words. See fix_footer_tap.py. */
footer li a{display:inline-block;padding-block:4px;margin-block:-4px}

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

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

.card,
.step,
.keypoints,
.callout,
.alert,
.toc,
.byline,
.posts article,
.shots figure,
.badgewall figure,
.tablewrap,
.faq,
.ingcard,
.final,
.figures>div,
.answer,
.article figure{box-shadow:var(--shadow)}

/* These panels declared no radius of their own, so raising
   the token alone left them square. House rule 11 is a
   floor: it outranks a slot that chose square corners. */
.faq{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 ==== */
.review-foot{margin:0;padding:.6rem 0;font-size:.92rem}.review-foot a{font-weight:600}

/*!SITE-REFRESH-LXI 2026-09-30: credential pills, byline, six questions, further reading, page ledger, glint, motion layer*/
.lxi-cred{background:var(--eu);border-block:1px solid var(--line)}
.lxi-cred ul{list-style:none;margin:0;padding:12px 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 10px;font:600 15px/1.35 var(--sans);color:var(--ink)}
.lxi-cred li{display:inline-block;padding:6px 14px;line-height:1.4;border-radius:999px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--sage-rule)}
.lxi-cred li.lxi-cred__tag{background:var(--sage-block);color:#fff;box-shadow:none;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.lxi-cred a{color:var(--accent-ink);text-underline-offset:3px}
.lxi-cred__go{font-weight:700}
@media (max-width:640px){.lxi-cred ul{justify-content:flex-start;font-size:14.5px}}
.lxi-by{margin:12px 0 0;font:400 15.5px/1.5 var(--sans);color:var(--ink-2)}
.lxi-by a{color:var(--accent-ink);font-weight:600;text-underline-offset:3px}
.lxi-q{list-style:none;margin:0;padding:0;counter-reset:lxiq;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.lxi-q li{counter-increment:lxiq;position:relative;display:grid;gap:6px;align-content:start;min-width:0;padding:20px 20px 20px 70px;border-radius:var(--radius);background:var(--paper);box-shadow:var(--shadow)}
.lxi-q li::before{content:counter(lxiq);position:absolute;left:18px;top:18px;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:var(--accent);color:#fff;font:700 18px/1 var(--serif)}
.lxi-q li:nth-child(n+6)::before{background:var(--sage-block)}
.lxi-q b{font:600 18px/1.35 var(--serif);color:var(--ink)}
.lxi-q span{font-size:16px;line-height:1.55;color:var(--ink-2)}
.lxi-q a{color:var(--accent-ink)}
@media (max-width:860px){.lxi-q{grid-template-columns:1fr}}
.lxi-shelf{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;counter-reset:lxis}
.lxi-shelf li{counter-increment:lxis}
.lxi-shelf a{position:relative;display:grid;gap:4px;min-height:100%;padding:18px 20px 18px 62px;border-radius:var(--radius);background:var(--oat);color:var(--ink);text-decoration:none;transition:background-color .2s ease}
.lxi-shelf a::before{content:counter(lxis,decimal-leading-zero);position:absolute;left:20px;top:18px;font:700 18px/1 var(--serif);color:var(--accent)}
.lxi-shelf b{font:600 19px/1.3 var(--serif)}
.lxi-shelf span{font-size:16px;line-height:1.5;color:var(--ink-2)}
.lxi-shelf a:hover{background:var(--oat-2)}
@media (max-width:760px){.lxi-shelf{grid-template-columns:1fr}}
.lxi-led{padding:clamp(40px,4vw,64px) 0;background:var(--eu)}
.lxi-led__card{position:relative;padding:clamp(22px,3vw,36px);border-radius:var(--radius);background:var(--paper);box-shadow:var(--shadow);border-top:6px solid var(--sage-block)}
.lxi-led__card::before{content:"";position:absolute;left:0;right:0;top:12px;border-top:1px dashed var(--sage-rule)}
.lxi-led__tag{margin:10px 0 6px;font:700 13px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink)}
.lxi-led h2{font-family:var(--serif);font-size:clamp(24px,1.6vw + 16px,32px);line-height:1.2;margin:0 0 16px;color:var(--ink)}
.lxi-led__rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lxi-led__rows>div{min-width:0;padding:14px 16px}
.lxi-led__rows>div+div{border-left:1px solid var(--line)}
.lxi-led__rows dt{font:700 13px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 4px}
.lxi-led__rows dd{margin:0;font-weight:600;font-size:17px;line-height:1.4;color:var(--ink)}
.lxi-led__rows dd small{display:block;margin-top:3px;font-weight:400;font-size:15px;color:var(--ink-2)}
.lxi-led__rows a{color:var(--accent-ink);text-underline-offset:3px}
.lxi-led__note{margin:16px 0 0;font-size:16px;line-height:1.6;color:var(--ink-2)}
.lxi-led__links{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.lxi-led__links a{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border-radius:var(--radius-sm);box-shadow:inset 0 0 0 1px var(--sage-rule);color:var(--accent-ink);font-weight:600;font-size:15px;text-decoration:none;transition:background-color .2s ease,color .2s ease}
.lxi-led__links a:hover{background:var(--accent);color:#fff}
@media (max-width:860px){.lxi-led__rows{grid-template-columns:1fr}.lxi-led__rows>div+div{border-left:0;border-top:1px solid var(--line)}}
.lxi-glint{position:absolute;inset:0;z-index:4;overflow:hidden;border-radius:inherit;pointer-events:none;background:rgba(255,255,255,.001)}
.lxi-glint i{position:absolute;top:-12%;bottom:-12%;left:0;width:34%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.5) 50%,rgba(255,255,255,0));transform:translateX(-170%) skewX(-14deg)}
header:has([aria-expanded="true"]){-webkit-backdrop-filter:none!important;backdrop-filter:none!important;filter:none!important;transform:none!important;z-index:1000!important}
header [aria-expanded]{position:relative;z-index:1001}
/* readability floor (owner, 30 Sep: "text should clear") */
.tnote,.buy__note,.final__sm,.fcta__sm,.postmeta,.refs li{font-size:16px}
@media (max-width:640px){.util__row{flex-wrap:nowrap;white-space:nowrap}.lxi-util-hide{display:none!important}}
/* the header tagline and the price sub-line collided below 1500px (vendor build); the sub-line gives way */
@media (max-width:1499px){.nav__price span{display:none}}
/* the H1 ran six lines in the fallback face and five in Newsreader between 341 and 347px (CLS 0.18 at 344 on the vendor
   build, pitfall 140); at 31px both faces hold five */
@media (min-width:340px) and (max-width:348px){section.hero h1{font-size:31px}}
.lxi-dtab{min-width:0}
@media (max-width:640px){.lxi-dtab thead{display:none}.lxi-dtab,.lxi-dtab tbody,.lxi-dtab tr,.lxi-dtab td{display:block;width:auto}.lxi-dtab tr{border-bottom:1px solid var(--line)}.lxi-dtab td{border:0}.lxi-dtab td:first-child{font-weight:600;padding-bottom:2px}}
.lxi-anim-off,.lxi-anim-off *,.lxi-anim-off *::before,.lxi-anim-off *::after{animation-play-state:paused!important}
.btn{position:relative;overflow:hidden;isolation:isolate}
@media (prefers-reduced-motion:no-preference){
.lxi-glint i{animation:lxiGlint 7.5s cubic-bezier(.45,.05,.3,1) 1.6s infinite}
@keyframes lxiGlint{0%,58%{transform:translateX(-170%) skewX(-14deg)}100%{transform:translateX(420%) skewX(-14deg)}}
.lxi-rip{position:absolute;width:260px;height:260px;margin:-130px 0 0 -130px;border-radius:50%;background:rgba(255,255,255,.32);pointer-events:none;z-index:-1;transform:scale(.02);animation:lxiRip .6s ease-out forwards}
@keyframes lxiRip{to{transform:scale(1);opacity:0}}
.final .btn--lg::after,.fcta .btn--lg::after{content:"";position:absolute;top:0;bottom:0;left:0;width:30%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);transform:translateX(-130%) skewX(-16deg);animation:lxiSheen 8s ease-in-out 3s infinite}
@keyframes lxiSheen{0%,72%{transform:translateX(-130%) skewX(-16deg)}100%{transform:translateX(360%) skewX(-16deg)}}
.lxi-mag{translate:var(--lxi-bx,0px) var(--lxi-by,0px);transition:translate .22s ease}
.lxi-tilt{transition:transform .28s ease,box-shadow .3s ease}
.lxi-tilt.is-tilting{transform:perspective(900px) rotateX(var(--lxi-rx,0deg)) rotateY(var(--lxi-ry,0deg)) translateY(-3px)}
}
@media (prefers-reduced-motion:reduce){.lxi-glint{display:none}}
/*!END-SITE-REFRESH-LXI*/