/* gelagendaily.com - Gelagen, USA Authorized Retailer.
   Design slot row 339 (_generators/batch9_assignments.py):
   Andada Pro over Golos Text; a pale jade ground ruled in charcoal; a header of
   TWO rows divided by a drawn zigzag with the destinations riding the lower one;
   a footer whose identity is reversed out of one filled shape above a plain page
   index; the bloom-halo hero motif; the wordmark held inside drawn brackets.

   COLOUR IS READ OFF THE BOTTLE, not off any reference site.
   Sampled from assets/gelagen-square-large-product-1-bottle.webp: the gummies
   are a deep berry crimson (#a30104 through #9b3739 where the glass shades
   them), the label is a warm cream (#f5e9df to #e8dcd2), the wordmark and the
   frame rules are struck in gold (#cb965f to #c89557) and the cap is a chalk
   off-white (#f4ebe7). So crimson is the accent, gold is the metal, cream is the
   panel the product stands on, and the jade the slot asks for is the page.

   ONE NOTE ON WHICH TOKEN THE SHARED TOOLS PICK UP.
   hero_motifs.py and brand_marks.py both take the MOST SATURATED token in the
   root block between 0.15 and 0.72 lightness, and here that is the crimson. It
   has to be: bloom-halo draws a ring opening and fading around the bottle, and
   the only colour on this page that reads as the product's own light is the one
   the gummies are.

   THE CHARCOAL RULES ARE THE SLOT AND THEY ARE LOAD-BEARING.
   Every band edge, every card keyline, the zigzag under the header and the index
   rules in the footer are struck in the same near-black green. Nothing here uses
   a shadow to separate two surfaces; the only shadows are under the product and
   under the three cards that hold a price.

   TWO STRINGS THIS COMMENT MUST NEVER CONTAIN, because two shared tools split
   the file on them: the root selector spelled out, and a close brace. Both tools
   take the text after the FIRST occurrence of the selector and stop at the first
   brace, so a mention up here hands them an empty token list and they fall back
   to a default palette in silence.

   Everything above CRITICAL-END is inlined into every page head: the topline,
   the two header rows, the hero and the motif - the whole first screen. */

/* ---- tokens */
:root{
  /* the ground: pale jade, with a deeper jade for banded sections */
  --paper:#eef3ee;
  --paper-2:#e6ede7;
  --panel:#f9fcf9;
  --tint:#dde8de;
  /* the label's own cream, for the plate the product stands on */
  --cream:#f6ece2;
  --cream-2:#ead9c9;
  /* ink, cooled to sit on jade */
  --ink:#1d221e;
  --ink-2:#454e47;
  --ink-3:#66716a;
  /* the charcoal the rules are struck in */
  --rule:#2b332c;
  --rule-soft:#8fa191;
  --line:#c2d1c4;
  /* the filled shape in the footer, and the dark bands */
  --slab:#232a24;
  --slab-2:#2f382f;
  --slab-3:#161b17;
  --on-slab:#e9efe8;
  --on-slab-2:#b6c3b7;
  /* accent: the berry crimson of the gummies through the glass */
  --accent:#a3141c;
  --accent-d:#7d0d14;
  --accent-l:#f8e7e5;
  /* metal: the gold the wordmark and the label frame are struck in */
  --gold:#b5813a;
  --gold-d:#8a6024;
  --gold-l:#f2e5cf;
  /* states */
  --good:#1f6b4a;
  --warn:#8a5f1c;
  /* metrics */
  --wrap:1180px;
  --measure:760px;
  --measure-wide:980px;
  --radius:4px;
  --radius-lg:8px;
  --shadow:0 1px 0 rgba(43,51,44,.06),0 12px 26px rgba(29,34,30,.07);
  --shadow-lg:0 20px 48px rgba(29,34,30,.16);
  --navh:132px;
  --serif:"Andada Pro",Georgia,"Times New Roman",serif;
  --sans:"Golos Text",system-ui,-apple-system,"Segoe UI",Roboto,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%;scroll-padding-top:calc(var(--navh) + 16px)}
body{
  overflow-x:clip;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
img,svg,table{max-width:100%}
img{height:auto;display:block}
a{color:var(--accent);text-underline-offset:3px}
a:hover{color:var(--accent-d)}
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);font-weight:700;line-height:1.18;margin:0 0 .5em}
h1{font-size:clamp(2rem,1.28rem + 2.2vw,3rem);letter-spacing:-.012em}
h2{font-size:clamp(1.5rem,1.18rem + 1.15vw,2.15rem);letter-spacing:-.008em}
h3{font-size:1.2rem}
h4{font-size:1.04rem}
p,li,dd,dt,blockquote{font-size:1.0625rem}
p{margin:0 0 1.05em}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.skip{position:absolute;left:-9999px;top:0;background:var(--slab);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* The eyebrow names the JOB of the section beneath it. Every section has one.
   A charcoal rule runs out to the left of the label rather than under it, so the
   eyebrow reads as a margin note on ruled paper. */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-size:0.8438rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent-d);
  margin:0 0 12px;
}
.eyebrow::before{content:"";width:26px;height:2px;flex:0 0 auto;background:var(--rule)}

/* ---- buttons. Square-cornered and hard-ruled, to match the page. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:13px 26px;border:2px solid var(--rule);border-radius:var(--radius);
  font-family:var(--sans);font-size:1rem;font-weight:700;letter-spacing:.01em;
  text-decoration:none;cursor:pointer;
  background:var(--slab);color:#fff;
  transition:background .18s ease,transform .18s ease,border-color .18s ease;
}
.btn:hover{background:var(--slab-2);color:#fff}
.btn:active{transform:translateY(1px)}
.btn--red{background:var(--accent);border-color:var(--accent-d);color:#fff}
.btn--red:hover{background:var(--accent-d);color:#fff}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn--ghost:hover{background:var(--panel);color:var(--accent-d);border-color:var(--accent-d)}
.btn--lg{min-height:58px;padding:15px 30px;font-size:1.05rem}
.btn--wide{width:100%}

/* ---- topline strip: the five trust facts, ABOVE the navigation.
   Role, lot, dose, guarantee, order line. It exists so the navigation does not
   have to carry any of them - getexitide shipped without one, pushed the lot
   into the menu as a chip, crowded the menu and still left the other four facts
   off the page (hero.md).
   It lives above CRITICAL-END because it is the first thing painted; appended to
   the end of this file it would load async and flash unstyled. */
.util{background:var(--slab-3);color:var(--on-slab-2);font-size:.9375rem;line-height:1.42}
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:2px 12px;padding-block:8px}
.util__item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.util__item+.util__item::before{
  content:"";width:9px;height:2px;flex:0 0 auto;margin-right:5px;background:var(--gold);opacity:.85;
}
.util b{color:#fff;font-weight:600}
.util a{color:inherit;text-decoration:none}
.util a:hover{color:var(--gold-l);text-decoration:underline}

/* ---- header: TWO ROWS divided by a drawn zigzag.
   The upper row carries the identity, the order line and the CTA. The lower row
   carries the destinations and nothing else, so the menu never competes with the
   wordmark for width and can hold seven items at any size. The zigzag between
   them is drawn, not shaded: it is the same charcoal as every other rule here. */
.nav{position:sticky;top:0;z-index:100;background:var(--paper)}
.nav__top{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;
  padding-block:9px}
/* The wordmark lives inside drawn brackets (brand_marks.py, bracket
   construction), so it carries its own inline padding and must not be squeezed. */
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);
  flex:0 0 auto}
.brand>svg{width:34px;height:34px;flex:0 0 auto}
.bw{display:flex;flex-direction:column;line-height:1.06}
.bw b{font-family:var(--serif);font-size:1.5rem;font-weight:700;letter-spacing:-.018em}
.bw b em{font-style:normal;color:var(--accent)}
.bw small{font-size:0.9062rem;font-weight:600;color:var(--ink-3);letter-spacing:.08em;
  text-transform:uppercase}
.nav__facts{list-style:none;margin:0;padding:0;display:flex;justify-content:center;
  gap:0 26px;font-size:.9375rem;color:var(--ink-3);white-space:nowrap}
.nav__facts b{color:var(--ink);font-weight:700}
/* min-width:max-content, NOT the global min-width:0. A `1fr` grid track floors
   at its item's min-content width, and `*{min-width:0}` sets that floor to zero,
   so the track collapses under a nowrap phone number and the CTA prints straight
   through it. */
.nav__tel{display:grid;grid-template-columns:auto auto;align-items:center;column-gap:14px;
  justify-content:end;min-width:max-content}
.nav__tel__l{grid-column:1;grid-row:1;font-size:.75rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3)}
.nav__tel__n{grid-column:1;grid-row:2;font-family:var(--serif);font-size:1.1rem;font-weight:700;
  color:var(--ink);text-decoration:none;white-space:nowrap}
.nav__tel__n:hover{color:var(--accent)}
.nav__buy{grid-column:2;grid-row:1/span 2;min-height:44px;padding:9px 16px;font-size:.9375rem}
/* THE DIVIDER. A repeated 24x10 drawn chevron, not a border and not a shadow.
   Spaces inside the data URI are percent-encoded on purpose: tpl.py minifies the
   critical block by collapsing whitespace, and a literal space here would be
   inside the URL when it did so. */
.nav__zig{height:10px;background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='10'%20viewBox='0%200%2024%2010'%3E%3Cpath%20d='M0%208L6%202L12%208L18%202L24%208'%20fill='none'%20stroke='%232b332c'%20stroke-width='1.6'%20stroke-linejoin='round'%20stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50%}
.nav__low{border-bottom:2px solid var(--rule)}
.menu{display:flex;flex-wrap:nowrap;gap:0 24px;list-style:none;margin:0;padding:0;
  justify-content:flex-start;line-height:1.3}
.menu a{
  display:inline-block;padding:9px 0;font-size:.9375rem;font-weight:600;
  color:var(--ink-2);text-decoration:none;white-space:nowrap;
  border-bottom:3px solid transparent;
}
.menu a:hover{color:var(--accent)}
.menu a[aria-current="page"]{color:var(--accent-d);border-bottom-color:var(--accent)}
.burger{
  display:none;width:46px;height:44px;background:transparent;border:2px solid var(--rule);
  border-radius:var(--radius);cursor:pointer;padding:11px 10px;
}
.burger span{display:block;height:2px;background:var(--ink);margin:0 0 5px}
.burger span:last-child{margin:0}

/* ---- hero: copy LEFT on the jade, the product RIGHT standing on a cream plate
   ruled in charcoal with the label's gold hairline set inside it. The plate is
   the bottle's own label enlarged to the size of a panel, which is why the
   product sits on it rather than in a shape borrowed from the page.

   The motion is the bloom-halo motif on .hero__media's pseudo-elements
   (hero_motifs.py): a crimson ring opening out of the bottle and fading, twice
   a cycle. Nothing here animates the <img> - it is the LCP element and it is
   preloaded - and nothing animates the H1. */
.hero{position:relative;overflow-x:clip;background:var(--paper);padding:38px 0 54px;
  border-bottom:2px solid var(--rule)}
.hero__grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:46px;align-items:start;
}
.hero__copy{display:flex;flex-direction:column;min-width:0}
/* Sized DOWN from the global h1 and capped in px rather than ch: a ch measure
   resolves against each element's own font-size, so one token gives every
   heading a different edge (pitfall 40). */
.hero h1{margin:0 0 16px;max-width:580px;font-size:clamp(1.9rem,1.22rem + 1.95vw,2.7rem)}
.hero h1 em{font-style:normal;color:var(--accent)}

/* The Quick Answer sits on its own opaque card with a crimson rule down its
   leading edge. */
.answer{
  background:var(--panel);border:2px solid var(--rule);border-left:6px solid var(--accent);
  border-radius:0 var(--radius) var(--radius) 0;padding:18px 22px;margin:0 0 16px;
}
.qtag{
  display:inline-block;font-family:var(--sans);font-size:0.8438rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent-d);margin:0 0 6px;
}
.answer p{margin:0;font-size:1.0625rem}
.hero__road{font-size:1rem;color:var(--ink-2);margin:0 0 16px;max-width:620px}
.ticks{list-style:none;margin:0 0 18px;padding:0}
.ticks li{position:relative;padding-left:30px;margin:0 0 .5em;font-size:1rem}
.ticks li::before{
  content:"";position:absolute;left:0;top:.52em;width:13px;height:7px;
  border-left:2.5px solid var(--good);border-bottom:2.5px solid var(--good);
  transform:rotate(-45deg);
}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 18px}
.pay{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 18px;
  font-size:.9375rem;color:var(--ink-3)}
.pay img{width:200px;height:auto}
.hero__sub{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 0 16px;
  font-size:1rem;font-weight:600;color:var(--ink-2)}
.hero__sub span{display:inline-flex;align-items:center;gap:8px}
.hero__sub span::before{content:"";width:10px;height:2px;flex:0 0 auto;background:var(--accent)}
.factpills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 18px;padding:0}
.factpills li{
  font-size:.9375rem;color:var(--ink-2);background:var(--panel);
  border:1px solid var(--rule);border-radius:var(--radius);padding:6px 14px;
}
.factpills li b{color:var(--ink);font-weight:700}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.figures div{background:var(--panel);border:2px solid var(--rule);border-radius:var(--radius);
  padding:13px 15px}
.figures b{display:block;font-family:var(--serif);font-size:1.65rem;font-weight:700;
  color:var(--accent-d);line-height:1.06}
.figures span{display:block;font-size:.9375rem;color:var(--ink-3);margin-top:2px}

/* the product column: a cream plate, charcoal keyline, gold hairline inside */
.hero__media{position:relative;align-self:start}
.hero__stick{position:relative;width:100%;max-width:460px;margin-inline:auto}
.hero__plate{
  position:absolute;left:0;right:0;top:0;bottom:34px;z-index:0;pointer-events:none;
  border-radius:var(--radius-lg);border:2px solid var(--rule);
  background:linear-gradient(180deg,#fdf7f0,var(--cream) 52%,var(--cream-2));
  box-shadow:var(--shadow-lg);
}
/* the gold frame rule off the bottle label, set in from the keyline */
.hero__plate::after{
  content:"";position:absolute;inset:9px;border:1px solid rgba(181,129,58,.65);
  border-radius:3px;
}
.hero__card{position:relative;z-index:2;margin:0;padding:clamp(26px,5vh,48px) 30px 62px}
.hero__card img{width:100%;height:auto;margin-inline:auto}
/* the bottle's own shadow on the cream */
.hero__card::after{
  content:"";position:absolute;left:50%;bottom:52px;width:66%;height:22px;
  translate:-50% 0;border-radius:50%;z-index:1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(43,51,44,.42),transparent 78%);
  filter:blur(5px);
}
.hero__tag{
  position:absolute;left:50%;bottom:0;translate:-50% 0;z-index:3;white-space:nowrap;
  background:var(--panel);border:2px solid var(--rule);border-radius:var(--radius);
  padding:6px 16px;font-size:.9375rem;color:var(--ink-2);
}

/* THE HALO IS MOTION. WITH THE MOTION OFF IT MUST NOT BECOME A DRAWN CIRCLE.
   bloom-halo animates two rings from scale .72 at opacity 0 out to 1.22 at
   opacity 0, so while they run they are never a solid shape. hero_motifs.py's
   own reduced-motion rule stops them with `animation:none`, which parks both
   rings at their BASE state: full scale, and opacity 1, because the keyframes
   were the only thing setting opacity at all. So a reader who asked for LESS
   motion got a hard crimson circle drawn permanently across the hero, over the
   last line of the H1 and over the lot chip at 390. Same shape of failure as
   pitfall 107: ask for less motion, get the one broken hero. Found by looking
   at a screenshot; no gate on this estate can see it.

   `opacity` is deliberate and `display:none` is forbidden here. Removing the
   box would remove the containing block those percentage widths resolve
   against, which is what pitfall 107 IS, and the two render passes would then
   disagree. At opacity 0 the rings still lay out and still measure 116% of the
   column, so that proof keeps working.

   This sits ABOVE the `hero motif` marker on purpose: hero_motifs.py rewrites
   everything from its marker to the next comment, so a rule written after it
   would be dropped in silence the next time that tool ran. */
@media (prefers-reduced-motion:reduce){
  .hero__media::before,.hero__media::after{opacity:0}
}

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


/* ---- hero motif -- bloom-halo ---------------------------------------- */
.hero{position:relative;overflow-x:clip;overflow-y:visible}
:where(.hero__media){position:relative}
.hero__card{position:relative;z-index:2}
.hero__card img{position:relative;z-index:3}
.hero{background:radial-gradient(118% 88% at 50% 18%,#e0cbc8,#eef3ee 56%,#eef3ee)}.hero__media::before,.hero__media::after{content:'';position:absolute;left:50%;top:46%;width:116%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:2px solid rgba(163,20,28,0.45);z-index:1;pointer-events:none;animation:gdBloom 8s ease-out infinite}.hero__media::after{animation-delay:4s}@keyframes gdBloom{0%{transform:scale(.72);opacity:0}25%{opacity:.7}100%{transform:scale(1.22);opacity:0}}
@media(prefers-reduced-motion:reduce){.hero__card{animation:none!important}.hero__media::before,.hero__media::after{animation:none!important;opacity:0!important}}

/* --- hero responsive rules, copied into the critical block
   A phone painted the desktop hero from the inline block and then
   jumped when the async sheet arrived -- 692px on one site, CLS 0.95.
   These are COPIES: the originals stay below, so the cascade is
   unchanged and the first paint is already correct. */
@media (min-width:981px)` for the
   sticky product column, and a stacked hero whose media column is still sticky
   with min-height:100vh puts a full screen of empty space between the H1 and the
   Quick Answer. Change one breakpoint and you must change the other. */
@media (max-width:980px){
  .hero{padding-top:30px}
  .hero__grid{grid-template-columns:1fr;gap:24px}
  .hero__stick{max-width:400px}
  /* display:contents promotes the copy column's children to grid items so each one can be ordered individually. The naive collapse is wrong in both directions: order:-1 on the media puts a 390px image above everything and pushes the H1 to y~700, and leaving DOM order alone drops the product three screens down (hero.md). */ .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2;max-width:none}
  .hero__media{order:3;margin-bottom:8px}
  /* The CTA comes BEFORE the roadmap line on a phone. hero.md's mobile order is eyebrow, H1, shot, Quick Answer, CTA, sub, ticks, payment; the roadmap sentence is a later addition with no place in it. */ .hero__cta{order:5}
  .hero__road{order:6}
  .hero__sub{order:8}
}
@media (max-width:760px){
  .hero{padding-top:24px;padding-bottom:38px}
  /* Every value here was measured against hero.md's phone targets at 390x844: Quick Answer above ~850 and CTA by ~1100. At max-width:400 the plate put the answer at y=905 and the CTA at 1273, so the product column loses 100px of width and the plate tightens around the bottle instead of framing it. The head-room above the shot is the plate's whole character on a wide screen and costs the reader a third of a screen here. */ .hero__grid{gap:18px}
  .hero h1{margin-bottom:12px}
  .hero__stick{max-width:296px}
  /* The lot chip OVERLAYS the plate on a wide screen, where it is one line riding the bottom edge. In a 296px column the same chip wraps to three lines and rides up over the bottle's own label, hiding the wordmark it is supposed to be evidence about. So on a phone it drops out of the overlay and sits under the plate in normal flow, and the plate stops reserving the 34px of skirt it needed to sit on. */ .hero__plate{bottom:0}
  .hero__card{padding:clamp(14px,2.5vh,24px) 16px 20px}
  .hero__card::after{bottom:16px}
  .hero__tag{position:static;translate:none;display:block;width:fit-content; margin:12px auto 0;font-size:0.9062rem;padding:5px 12px;white-space:normal; text-align:center;max-width:100%}
  .hero__cta{gap:10px;margin-bottom:14px}
}
@media (min-width: 981px){
  .hero__media{position: sticky; top: calc(var(--navh, 88px) + 14px); align-self: start; min-height: calc(100vh - var(--navh, 88px) - 28px); min-height: calc(100svh - var(--navh, 88px) - 28px); display: flex; flex-direction: column; align-items: center; justify-content: center;}
}
@media (prefers-reduced-motion: reduce){
  .hero__media{position: relative; top: 0; min-height: 0;}
}

/*!CRITICAL-END*/

/* ---- sections. Flat bands in four grounds: jade, tint, panel, slab. Band
   edges are charcoal rules, never shadows. */
.sec{padding:60px 0;position:relative}
.sec--tint{background:var(--tint);border-block:2px solid var(--rule)}
.sec--panel{background:var(--panel);border-block:2px solid var(--rule)}
.sec--slab{background:var(--slab);color:var(--on-slab);border-block:2px solid var(--slab-3)}
.sec--slab h2,.sec--slab h3,.sec--slab h4{color:#fff}
.sec--slab p,.sec--slab li,.sec--slab dd,.sec--slab dt{color:var(--on-slab)}
.sec--slab .eyebrow{color:var(--gold-l)}
.sec--slab .eyebrow::before{background:var(--gold)}
.sec--slab .lead{color:var(--on-slab-2)}
.sec--slab a{color:var(--gold-l)}
.sec__head{max-width:var(--measure);margin:0 0 26px}
.sec__head h2{margin:0 0 10px}
.sec__head .lead{margin:0}

/* One measure, centred. Single-column content takes --measure; multi-column
   components keep the full wrap. Released below 1060px or a tablet gets a fixed
   760px box (responsive.md). */
@media (min-width:1060px){
  .sec>.wrap>h2,.sec>.wrap>h3,.sec>.wrap>h4,.sec>.wrap>p,
  .sec>.wrap>ul,.sec>.wrap>ol,.sec>.wrap>.sec__head,.sec>.wrap>.callout,
  .sec>.wrap>.alert,.sec>.wrap>.byline,.sec>.wrap>.refs,.sec>.wrap>.pullquote,
  .sec>.wrap>.keypoints,.sec>.wrap>blockquote{max-width:var(--measure);margin-inline:auto}
  .sec>.wrap>.tablewrap,.sec>.wrap>.faq,.sec>.wrap>.steps,.sec>.wrap>.versus{
    max-width:var(--measure-wide);margin-inline:auto}
}

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

/* ---- numbered steps */
.steps{display:grid;gap:16px;margin:0 0 1.2em;counter-reset:s}
.step{position:relative;background:var(--panel);border:2px solid var(--rule);
  border-radius:var(--radius);padding:20px 24px 20px 70px}
.step::before{
  counter-increment:s;content:counter(s);
  position:absolute;left:18px;top:17px;width:34px;height:34px;display:grid;place-items:center;
  background:var(--accent);color:#fff;font-family:var(--serif);font-weight:700;
  border-radius:var(--radius);
}
.step h3{margin:0 0 6px}
.step p:last-child{margin:0}

/* ---- cards: flat, charcoal keyline, a crimson rule across the top edge */
.grid{display:grid;gap:18px}
.grid>*{min-width:0}
.grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{position:relative;background:var(--panel);border:2px solid var(--rule);
  border-top-width:6px;border-radius:var(--radius);padding:22px 24px}
/* An email address or a URL is ONE unbreakable token. In the six-card grid at
   768 the column is 227px wide and contact@Gelagendaily.com pushed its own card
   5px past its content box, measured. `anywhere` also lowers the element's
   min-content width, which is what stops an ancestor being sized by the longest
   word inside it. Ordinary prose is untouched: it only breaks a word that would
   not otherwise fit. */
.card p,.card a,.card li,.step p,.fdesk__i p,.rel span{overflow-wrap:anywhere}
.card h3{margin:0 0 8px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.sec--slab .card{background:var(--slab-2);border-color:var(--slab-3);color:var(--on-slab)}
.sec--slab .card h3{color:#fff}
.sec--slab .card p{color:var(--on-slab)}

/* ---- callout, alert, quote, keypoints */
.callout{background:var(--accent-l);border:2px solid var(--rule);border-radius:var(--radius);
  padding:20px 24px;margin:0 0 1.2em}
.callout>b{display:block;margin-bottom:6px;color:var(--accent-d)}
.callout p:last-child,.callout ul:last-child{margin:0}
.alert{background:var(--gold-l);border:2px solid var(--rule);border-left:6px solid var(--warn);
  border-radius:0 var(--radius) var(--radius) 0;padding:20px 24px;margin:0 0 1.2em}
.alert>b{display:block;margin-bottom:6px;color:var(--warn)}
.alert p:last-child{margin:0}
.pullquote{font-family:var(--serif);font-size:1.32rem;line-height:1.5;color:var(--ink);
  border-left:6px solid var(--accent);padding:2px 0 2px 22px;margin:0 0 1.2em}
.pullquote cite{display:block;font-family:var(--sans);font-size:.9375rem;font-style:normal;
  color:var(--ink-3);margin-top:10px}
.keypoints{background:var(--panel);border:2px solid var(--rule);border-top-width:6px;
  border-radius:var(--radius);padding:22px 24px;margin:0 0 1.2em}
.keypoints>b{display:block;margin-bottom:10px;font-family:var(--serif);font-size:1.1rem}
.keypoints ul{margin:0;padding-left:20px}
.keypoints li{margin:0 0 .5em}
.cautions{list-style:none;margin:0;padding:0}
.cautions li{position:relative;padding-left:22px;margin:0 0 .45em;font-size:1.062rem}
.cautions li::before{content:"";position:absolute;left:0;top:.72em;width:11px;height:2px;
  background:var(--accent)}

/* ---- image beside copy */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;
  align-items:center;margin:0 0 1.2em}
.split__img,.split__body{min-width:0}
.split--flip .split__img{order:-1}
.split__img img{width:100%;border:2px solid var(--rule);border-radius:var(--radius);
  background:var(--panel)}
/* TRIED AND REVERTED, 19 Sep 2026, and the note is worth more than the rule.
   The vendor's 765x1024 in-hand portrait fills its column and renders about
   736px tall beside 400px of copy, so the text floats in the middle of a tall
   cell. It looks a little loose. The obvious fix, `.portrait img{width:auto}`
   so the shot keeps its declared 380px, makes it WORSE: every split image is
   lazy-loaded, and with `width:auto` a lazy image that has not arrived yet
   computes 4px wide instead of filling its column, so the section collapses
   and then jumps when the file lands. Measured: computed width 4px, rect 4x4.
   `width:100%` is load-order-safe and stays. A tall shot beside short copy is
   a composition question for the writer -- give that section more copy -- not
   a CSS one. */
.split__body p:last-child{margin:0}

/* ---- stat band, used inside .sec--slab */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;text-align:center}
.stats div b{display:block;font-family:var(--serif);font-size:2.25rem;font-weight:700;
  color:var(--gold-l);line-height:1.08}
.stats div span{display:block;font-size:.9375rem;color:var(--on-slab-2);margin-top:4px}

/* ---- three columns: what the seller prints / what the bottle prints / what a
   buyer can check for themselves */
.versus{display:grid;grid-template-columns:1fr 1fr 1fr;border:2px solid var(--rule);
  border-radius:var(--radius);overflow:hidden;background:var(--panel);margin:0 0 1.2em}
.versus>div{padding:13px 17px;border-bottom:1px solid var(--line);font-size:1rem}
.versus__h{background:var(--tint);font-weight:700;font-size:.9375rem;
  border-bottom:2px solid var(--rule)}

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

/* ---- seal wall */
.badgewall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:0 0 1.2em}
.badgewall figure{margin:0;text-align:center;background:var(--panel);border:2px solid var(--rule);
  border-radius:var(--radius);padding:20px 16px}
.badgewall img{width:74px;height:74px;object-fit:contain;margin:0 auto 10px}
.badgewall b{display:block;font-size:1rem;margin-bottom:6px}
/* The seal and its name are centred; the sentence under them is not. Thirty
   words of ragged-both-edges is the hardest thing on a page to read, and these
   sentences are the whole reason the wall is here. */
.badgewall span{display:block;text-align:left;font-size:.9375rem;color:var(--ink-2)}

/* ---- star distribution */
.meter{margin:0 0 1.2em}
.meter__row{display:grid;grid-template-columns:72px 1fr 52px;gap:12px;align-items:center;
  margin:0 0 8px;font-size:.9375rem}
.meter__bar{height:12px;background:var(--panel);border:1px solid var(--rule);overflow:hidden}
.meter__bar i{display:block;height:100%;background:var(--accent)}

/* ---- complaints, each with a fair reply */
.cmps{display:grid;gap:16px;margin:0 0 1.2em}
.cmp{background:var(--panel);border:2px solid var(--rule);border-left:6px solid var(--warn);
  border-radius:0 var(--radius) var(--radius) 0;padding:18px 22px}
.cmp__q{display:block;font-family:var(--serif);font-size:1.1rem;margin-bottom:6px}
.cmp p:last-child{margin:0}

/* ---- who it is for */
.whofor{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:0 0 1.2em}
.forlist{background:var(--panel);border:2px solid var(--rule);border-top:6px solid var(--good);
  border-radius:var(--radius);padding:22px 24px}
.forlist--no{border-top-color:var(--warn)}
.forlist h3{margin:0 0 10px}
.forlist ul{margin:0;padding-left:20px}
.forlist li{margin:0 0 .5em}

/* ---- the editorial score */
.facts{background:var(--panel);border:2px solid var(--rule);border-radius:var(--radius);
  overflow:hidden;margin:0 0 1.2em}
.facts__h{background:var(--slab);color:var(--gold-l);font-family:var(--serif);font-weight:700;
  padding:13px 18px}
.facttab{width:100%;min-width:0;border-collapse:collapse}
.facttab th{background:transparent;font-weight:600;width:62%;border-bottom:1px solid var(--line)}
.facttab td{text-align:right;font-weight:700}

/* ---- the add-to-cart panel */
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
  align-items:stretch;margin:0 0 22px}
.card--pack{
  display:flex;flex-direction:column;position:relative;background:var(--panel);
  border:2px solid var(--rule);border-radius:var(--radius-lg);overflow:hidden;
}
/* box-sizing is border-box, so EVERY card carries the 2px border and only the
   recommended one changes its colour. Give the border to one card alone and it
   steals 2px of content box and drops its button out of line (responsive.md
   proof 3). */
.card--pack.card--best{border-color:var(--accent);box-shadow:var(--shadow-lg)}
.pack__head{background:var(--tint);border-bottom:2px solid var(--rule);padding:12px 20px;
  display:flex;align-items:baseline;gap:10px}
.card--pack.card--best .pack__head{background:var(--accent);border-bottom-color:var(--accent-d)}
.card--pack.card--best .pack__head b{color:#fff}
.card--pack.card--best .pack__head span{color:var(--gold-l)}
.pack__head b{font-family:var(--serif);font-size:1.18rem;font-weight:700}
.pack__head span{font-size:.875rem;font-weight:700;color:var(--ink-3);margin-left:auto;
  letter-spacing:.06em;text-transform:uppercase}
.pack__body{display:flex;flex-direction:column;flex:1;padding:20px 20px 24px;font-size:1rem}
.pack__flag{display:block;width:fit-content;margin:0 auto 12px;background:var(--slab);
  color:#fff;font-size:0.8438rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 13px;border-radius:var(--radius)}
.card--pack.card--best .pack__flag{background:var(--gold-d)}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,168px);object-fit:contain;
  margin-inline:auto;margin-bottom:14px}
.pack__per{font-family:var(--serif);font-size:2.5rem;font-weight:700;color:var(--accent-d);
  line-height:1;text-align:center;margin:0}
.pack__per sup{font-size:1.05rem;font-weight:700;top:-.75em}
.pack__unit{display:block;text-align:center;font-size:.9375rem;font-weight:700;
  color:var(--ink-3);margin:5px 0 14px}
.pack__tot{display:flex;align-items:baseline;justify-content:center;gap:9px;margin:0 0 16px;
  font-size:1rem}
.pack__tot b{font-weight:700}
.pack__tot s{color:var(--ink-3);font-weight:500}
/* THE PACK ROW IS ALSO GUARANTEED AT SOURCE, not only by pack_cards.py.
   The tool does work here: it matches `class="…card…"` on a word boundary, and
   these cards are `card card--pack`, so it sees them. What it cannot see is a
   BEM name -- `buy__card` gives it no boundary before "card", because an
   underscore is a word character -- so the guarantee is written here as well,
   and the row is measured in the render rather than taken on the tool's word:
   a FIXED image box above, a reserved height for the supply line and the perk
   list so a wrapping shipping line cannot shorten one card, and the auto gap
   below, which puts the three CTAs on one baseline whatever length the three
   blurbs run to. Do not rename these cards to a BEM form. */
.pack__head span{min-height:1.4em}
.pack__perks{list-style:none;margin:0 0 18px;padding:0;font-size:1rem;min-height:7.6em}
.pack__perks li{position:relative;padding-left:24px;margin:0 0 6px;color:var(--ink-2);
  font-size:inherit}
.pack__perks li::before{content:"";position:absolute;left:1px;top:.55em;width:11px;height:6px;
  border-left:2.5px solid var(--good);border-bottom:2.5px solid var(--good);
  transform:rotate(-45deg)}
/* The auto gap sits between the variable-length blurb and the button, so the
   three CTAs share one baseline however long the three blurbs are. Everything
   below the gap is a fixed number of lines. */
.card--pack .btn{margin-top:auto;min-height:54px}
.pack__marks{text-align:center;font-size:.9375rem;color:var(--ink-3);margin:12px 0 0;
  min-height:2.8em}
.pack__why{font-size:.9375rem;color:var(--ink-2);margin:12px 0 18px;padding-top:12px;
  border-top:1px solid var(--line)}
.buy__pay{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:0 0 14px}
.buy__pay img{width:240px;height:auto}
.buy__pay span{font-size:.9375rem;color:var(--ink-3)}
.buy__note{font-size:.9375rem;color:var(--ink-3);margin:0}

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

/* ---- references and byline */
.refs{margin:0 0 1.2em}
.refs ol{padding-left:22px;margin:0}
.refs li{font-size:1.062rem;color:var(--ink-2);margin:0 0 .6em}
/* A reference list prints each source's URL as the link text, and a URL is one
   unbreakable token: at 390 that pushed a single anchor past the viewport on
   eleven pages of another site, clipped and unscrollable. */
.refs li,.refs li a{overflow-wrap:anywhere}
.byline{display:flex;gap:18px;background:var(--panel);border:2px solid var(--rule);
  border-left:6px solid var(--accent);border-radius:0 var(--radius) var(--radius) 0;
  padding:22px 24px;margin:0 0 1.2em}
.byline__mark{flex:0 0 auto;width:52px;height:52px;display:block}
.byline__mark svg{width:52px;height:52px}
.byline b{display:block;margin-bottom:6px}
.byline p{font-size:.9375rem;color:var(--ink-2);margin:0}

/* ---- closing CTA, on the slab */
.final{display:block}
.final--media{display:grid;grid-template-columns:auto minmax(0,1fr);gap:32px;align-items:center}
.final__img img{width:320px}
.final h2{margin:0 0 10px;color:#fff}
.final p{color:var(--on-slab)}
.final__price{font-weight:700;color:var(--gold-l)}
.final__sm{font-size:.9375rem;color:var(--on-slab-2);margin:14px 0 0}

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

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

/* ---- blog */
.article{max-width:var(--measure);margin-inline:auto}
.article h2{scroll-margin-top:calc(var(--navh) + 20px)}

/* A figure in the reading column takes the whole measure. Only `.shots figure`
   was styled, so a single captioned image inside an article rendered at its
   intrinsic width in the middle of a 760px column - too small to read a listing
   panel off, which is the one job those figures have. */
.article figure{margin:0 0 1.6em;background:var(--panel);border:2px solid var(--rule);
  border-radius:var(--radius);overflow:hidden}
.article figure img{width:100%}
.article figcaption{padding:16px 20px;border-top:2px solid var(--rule);
  font-size:.9375rem;color:var(--ink-2)}
.article figcaption b{display:block;margin-bottom:4px;font-size:1rem;color:var(--ink)}

/* The mid-article CTA is the SAME component as the closing band at the foot of
   the page, and `.final h2` / `.final p` are coloured white and --on-slab for
   the slab THAT band sits on. Inside the reading column there is no slab, so
   the panel inherited the jade ground and its own near-white type disappeared
   into it: measured contrast 1.04 against a 4.5 minimum. That is pitfall 64, an
   element coloured for one context reused in another. It gets its own ground
   here, struck in this site's own charcoal rather than borrowed from a sister
   desk. Measured after the fix: 12.6 on the body copy, 14.7 on the heading. */
.article .final--media{background:var(--slab);color:var(--on-slab);
  border:2px solid var(--slab-3);border-radius:var(--radius-lg);
  padding:26px 28px;margin:0 0 1.6em;gap:26px}
.article .final--media h3{color:#fff;margin:0 0 8px;font-size:1.25rem}
.article .final--media p{color:var(--on-slab);margin:0 0 16px}
.article .final--media .final__img img{width:230px}
.postmeta{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:.9375rem;color:var(--ink-3);
  margin:0 0 22px;padding:12px 0;border-block:2px solid var(--rule)}
.toc{background:var(--panel);border:2px solid var(--rule);border-radius:var(--radius);
  padding:22px 26px;margin:0 0 28px}
.toc b{display:block;margin-bottom:8px}
.toc ol{margin:0;padding-left:20px}
.toc li{margin:0 0 5px;font-size:1.062rem}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.posts article{background:var(--panel);border:2px solid var(--rule);border-radius:var(--radius);
  overflow:hidden}
.posts img{width:100%}
.posts .pbody{padding:20px 22px;border-top:2px solid var(--rule)}
.posts h3{margin:0 0 8px;font-size:1.1rem}
.posts p{font-size:1.062rem;color:var(--ink-2);margin:0 0 .6em}
.posts .pmeta{font-size:.9375rem;color:var(--ink-3)}

/* ---- footer: the identity REVERSED OUT of one filled shape, and beneath it a
   plain page index on the jade. The footer is not a dark slab: it is a charcoal
   plate carrying the desk, sitting on an index that reads like the back of a
   printed catalogue - labels at the left of each ruled row, destinations across
   it. */
footer{background:var(--paper);color:var(--ink);border-top:2px solid var(--rule);
  padding-top:40px}
footer a{color:var(--ink-2);text-decoration:none}
footer a:hover{color:var(--accent);text-decoration:underline}
.fmark{background:var(--slab);color:var(--on-slab);border-radius:var(--radius-lg);
  padding:30px 34px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);
  gap:30px;align-items:start}
.fmark__id{display:flex;gap:16px;align-items:flex-start}
.fmark__id svg{width:58px;height:58px;flex:0 0 auto}
.fbrand{font-family:var(--serif);font-size:2.05rem;font-weight:700;letter-spacing:-.02em;
  line-height:1.05;color:#fff;display:block}
.fbrand span{color:var(--gold)}
.frole{font-size:.9375rem;color:var(--on-slab-2);margin:8px 0 0}
.fdesk{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.fdesk__i b{display:block;font-size:.8125rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.fdesk__i p{font-size:1.062rem;color:var(--on-slab-2);margin:0}
.fmark a{color:var(--on-slab)}
.fmark a:hover{color:var(--gold-l)}
.findex{padding:30px 0 6px}
.frow{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:baseline;
  padding:12px 0;border-bottom:1px solid var(--rule)}
.frow:first-child{border-top:1px solid var(--rule)}
.frow__l{font-size:.8125rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-d)}
.frow__links{display:flex;flex-wrap:wrap;gap:2px 22px;list-style:none;margin:0;padding:0}
/* inline-block, not block: the box still shrink-wraps to the text so the hover
   underline stays the width of the words, and the negative margin gives the row
   its height back (pitfall 82). */
footer li a{display:inline-block;padding-block:6px;margin-block:-6px;font-size:1rem}
.fbits{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center;justify-content:space-between;
  padding:20px 0;border-bottom:1px solid var(--rule)}
.fseals,.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.fseals img{width:42px;height:42px;object-fit:contain;background:#fff;border-radius:50%;padding:3px}
.fseals span,.fpay span{font-size:.9375rem;color:var(--ink-3);max-width:34ch}
.fpay img{width:180px;height:auto;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:4px 8px}
.fnap{padding:20px 0 0}
.fnap p{font-size:.9375rem;color:var(--ink-3);margin:0}
.fnap strong{color:var(--ink)}
.disc{padding:20px 0 34px}
/* The page is 1,140px wide and these are the longest paragraphs on the site;
   left to the full wrap they run about 150 characters a line. The legal block is
   still text somebody has to read. */
.disc p{font-size:.9375rem;color:var(--ink-3);margin:0 0 .8em;max-width:var(--measure-wide)}
.disc b{color:var(--ink)}
.copy{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--rule)}

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

/* ---- 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.
   The two-row header sheds from the TOP row: the fact list goes first, then the
   phone block, and the lower row becomes a dropdown behind a burger. */
@media (max-width:1180px){
  .nav__facts{display:none}
  .nav__top{grid-template-columns:auto 1fr auto}
  .menu{gap:0 20px}
}
@media (max-width:1020px){
  :root{--navh:108px}
  .nav__top{grid-template-columns:1fr auto;gap:14px;padding-block:10px}
  .nav__tel__l,.nav__tel__n{display:none}
  .nav__tel{grid-template-columns:auto}
  .nav__buy{grid-column:1;grid-row:1}
  .nav__low{position:relative}
  .menu{
    display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;
    align-items:stretch;gap:0;background:var(--panel);border-bottom:2px solid var(--rule);
    padding:8px 20px 14px;box-shadow:var(--shadow-lg);z-index:5;
  }
  .menu.open{display:flex}
  .menu a{padding:13px 0;border-bottom:1px solid var(--line)}
  .menu a[aria-current="page"]{border-bottom-color:var(--line)}
  .burger{display:block;margin:5px 0}
  .nav__low{display:flex;align-items:center;justify-content:space-between;gap:14px}

  .grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Four seal cards measured 169px each at 768 -- under the 200px floor, with
     the captions wrapping to one word a line (responsive.md proof 2). */
  .badgewall{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fmark{grid-template-columns:1fr;gap:24px;padding:26px 24px}
  .fdesk{grid-template-columns:repeat(2,minmax(0,1fr))}
  .frow{grid-template-columns:1fr;gap:6px}
  .final--media{grid-template-columns:1fr;gap:20px}
  .final__img img{width:260px}
  .posts{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* The hero stacks at 980, NOT at the 1020 the header collapses at. That number
   is not a preference: hero_sticky.py writes `@media (min-width:981px)` for the
   sticky product column, and a stacked hero whose media column is still sticky
   with min-height:100vh puts a full screen of empty space between the H1 and the
   Quick Answer. Change one breakpoint and you must change the other. */
@media (max-width:980px){
  .hero{padding-top:30px}
  .hero__grid{grid-template-columns:1fr;gap:24px}
  .hero__stick{max-width:400px}
  /* display:contents promotes the copy column's children to grid items so each
     one can be ordered individually. The naive collapse is wrong in both
     directions: order:-1 on the media puts a 390px image above everything and
     pushes the H1 to y~700, and leaving DOM order alone drops the product three
     screens down (hero.md). */
  .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2;max-width:none}
  .hero__media{order:3;margin-bottom:8px}
  .answer{order:4}
  /* The CTA comes BEFORE the roadmap line on a phone. hero.md's mobile order is
     eyebrow, H1, shot, Quick Answer, CTA, sub, ticks, payment; the roadmap
     sentence is a later addition with no place in it. */
  .hero__cta{order:5}
  .hero__road{order:6}
  .ticks{order:7}
  .hero__sub{order:8}
  .pay{order:9}
  .factpills{order:10}
  .figures{order:11}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .sec{padding:44px 0}
  .hero{padding-top:24px;padding-bottom:38px}
  /* Every value here was measured against hero.md's phone targets at 390x844:
     Quick Answer above ~850 and CTA by ~1100. At max-width:400 the plate put the
     answer at y=905 and the CTA at 1273, so the product column loses 100px of
     width and the plate tightens around the bottle instead of framing it. The
     head-room above the shot is the plate's whole character on a wide screen and
     costs the reader a third of a screen here. */
  .hero__grid{gap:18px}
  .hero h1{margin-bottom:12px}
  .hero__stick{max-width:296px}
  /* The lot chip OVERLAYS the plate on a wide screen, where it is one line
     riding the bottom edge. In a 296px column the same chip wraps to three
     lines and rides up over the bottle's own label, hiding the wordmark it is
     supposed to be evidence about. So on a phone it drops out of the overlay
     and sits under the plate in normal flow, and the plate stops reserving the
     34px of skirt it needed to sit on. */
  .hero__plate{bottom:0}
  .hero__card{padding:clamp(14px,2.5vh,24px) 16px 20px}
  .hero__card::after{bottom:16px}
  .hero__tag{position:static;translate:none;display:block;width:fit-content;
    margin:12px auto 0;font-size:0.9062rem;padding:5px 12px;white-space:normal;
    text-align:center;max-width:100%}
  /* Five items wrap to three lines and eat 103px of an 844px screen (hero.md).
     Keep the role, the guarantee and the order line; the lot and the dose are on
     the pages that need them. */
  .util{font-size:.90625rem;line-height:1.4}
  .util__item--trim{display:none}
  .util__row{gap:3px 13px}
  /* The Quick Answer is the tallest single block on a phone hero: 58 words sets
     eleven lines in a 316px column, so its padding and its leading are where the
     CTA's y position is won or lost. Measured at 390: this block is 356px tall
     at the body scale and 330 at these values. */
  .answer{padding:13px 15px;margin-bottom:12px}
  .answer p{font-size:1.062rem;line-height:1.62}
  .hero__cta{gap:10px;margin-bottom:14px}
  .grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr}
  .prices{grid-template-columns:1fr;max-width:430px;margin-inline:auto}
  /* Stacked, the ladder must not lead with the smallest order. */
  .card--pack.card--best{order:-1}
  .shots,.shots.s2{grid-template-columns:1fr}
  .badgewall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rel,.posts{grid-template-columns:1fr}
  .split,.split--flip .split__img{grid-template-columns:minmax(0,1fr);order:0}
  .versus{grid-template-columns:1fr}
  .versus>div:nth-child(3n+1){border-top:2px solid var(--rule)}
  .whofor{grid-template-columns:1fr}
  .figures{grid-template-columns:1fr;gap:8px}
  .meter__row{grid-template-columns:62px 1fr 46px}
  .fdesk{grid-template-columns:1fr}
  .fbits{gap:18px}
  .buybar__in{flex-wrap:wrap;gap:10px;padding-block:10px}
  .buybar .btn{width:100%;margin-left:0}
}
@media (max-width:430px){
  .nav__buy{display:none}
  /* The lot chip is one unbreakable line at 370px against a 350px column. */
  /* the chip is already in flow and already wraps at this width -- see 760 */
  .badgewall{grid-template-columns:1fr}
  .buy__pay img{width:100%}
}


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

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

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

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

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

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

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

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

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

/* ==== modern surface (modern_surface.py) ==== */
/* House rule 11. This stylesheet had 3 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 (29,34,30), not neutral black.

   Paint only: border-radius, box-shadow and transform change no
   geometry, so this is safe below the critical marker and needs a
   restamp rather than a rebuild. */
:root{
  --radius:16px;
  --shadow:0 1px 2px rgba(29,34,30,.06), 0 6px 18px rgba(29,34,30,.07);
  --lift:0 2px 6px rgba(29,34,30,.09), 0 16px 34px rgba(29,34,30,.14);
}

.card,
.step,
.keypoints,
.callout,
.alert,
.toc,
.byline,
.posts article,
.shots figure,
.badgewall figure,
.tablewrap,
.faq,
.final,
.split__img,
.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. */
.alert,
.byline,
.final,
.split__img,
.answer{border-radius:var(--radius)}

/* A surface a reader can click answers the pointer. 2px
   registers without reflowing the row beside it. */
.rel a,
.posts article,
.shots figure,
.card--pack,
.badgewall figure{transition:box-shadow .2s ease, transform .2s ease}
.rel a:hover,
.posts article:hover,
.shots figure:hover,
.card--pack:hover,
.badgewall figure:hover{box-shadow:var(--lift);transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){
.rel a:hover,
.posts article:hover,
.shots figure:hover,
.card--pack:hover,
.badgewall figure:hover{transform:none}
}
/* ==== end modern surface ==== */

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