/* gelagensupport.com - Gelagen, USA Authorized Gelagen Retailer desk.

   DESIGN SLOT, row 340 (_generators/batch9_assignments.py)
   Yeseva One / Arimo. Ground: toasted almond, panels in cream. Header: the
   identity set against a filled quarter-circle in the top corner. Footer:
   destinations set as a numbered ladder beside a wide precautions panel.
   Hero motif: glow / facet-turn. Brand mark: arch + seed.

   Three desks sell this one gummy and the facts are identical by rule, so the
   LOOK has to carry the difference. This is the framed, ruled, warm one: every
   panel is drawn twice, once in the frame colour and once as an inset keyline
   six pixels in, section heads sit over a double rule, and the ground is a
   toasted almond rather than a white. Nothing here fades or floats except the
   bottle plate.

   WHERE THE COLOUR COMES FROM
   Sampled from assets/gelagen-square-flat-product-1-bottle.webp, the clean
   single-bottle shot that is also the hero:

     the gummies          #a30104 at the core, #af3233 on the surface,
                          #d86666 on the highlights  ->  --accent #a82f2a
     the label's rules    #a47238                    ->  --gold   #a5762f
     the label field      #f5ebe0 / #ebddd1          ->  --panel  #fdf8ef
     the cap              #ede2df

   The almond ground is the slot's, warmed to sit under a cream label without
   competing with it. Red is the product colour and it is used sparingly: the
   header corner, the section rules, the buttons, the price. Gold carries the
   eyebrows and the numbered footer ladder, which is where the label's own thin
   rules end up on a web page.

   NOTE FOR ANYONE EDITING THIS FILE: run
   python _generators/restamp_assets.py gelagensupport.com
   afterwards, or a returning visitor keeps this stylesheet for a year (pitfall
   49), and rebuild, or the inlined copy in every page head goes stale
   (pitfall 47). */

/* ---- tokens */
:root{
  /* ground: toasted almond. --ground is the lighter almond the hero motif is
     built from: hero_motifs.py reads the first token declared here whose NAME
     matches paper/card/ground/bg/surface and whose lightness clears 0.9, and
     --paper is deliberately darker than that. Both are real surfaces, used
     below.

     DO NOT NAME THE ROOT SELECTOR IN A COMMENT ANYWHERE IN THIS FILE. Both
     shared colour tools find the token block by splitting the stylesheet on
     that string and taking the SECOND piece, so a second occurrence -- a
     comment explaining this very rule, in the first draft of this file -- left
     them reading a fragment containing no tokens at all. They then fell back
     silently to their own defaults: a WHITE hero gradient on an almond site and
     a stock orange brand mark, with validate, preflight and audit all reading
     clean, because none of them can see a colour. */
  --paper:#efe3d1;
  --ground:#f4ead9;
  --tint:#e6d7bf;            /* the deeper almond band between cream sections */
  --panel:#fdf8ef;           /* cream: cards, tables, the bottle plate */
  /* ink */
  --ink:#241a12;
  --ink-2:#54402e;           /* 7.71:1 on --paper, 6.20:1 on the motif mid-stop */
  --ink-3:#6c563f;           /* 5.45:1 on --paper. Never on the bare hero
                                gradient: it measures 4.38 on the #e6c8b9 stop,
                                which is below AA. Use --ink-2 there. */
  --line:#ddcbb0;
  --line-2:#c9b28f;
  /* accent: the gummy red, read off the bottle */
  --accent:#a82f2a;
  --accent-d:#7d201c;        /* 7.91:1 on --paper, 9.47:1 on --panel */
  --accent-l:#f7e4de;
  --accent-line:#e4c3ba;
  --on-accent:#fdeeea;       /* 5.99:1 on --accent, 8.87:1 on --accent-d. Do not
                                warm it towards the red: #f1c9be reads 4.46. */
  /* gold: the label's thin rules */
  --gold:#a5762f;
  --gold-d:#7a5520;          /* 5.27:1 on --paper */
  --gold-l:#f3e7cf;
  /* states */
  --good:#1d6b45;
  --warn:#8a5a10;
  /* metrics */
  --wrap:1180px;
  --measure:740px;
  --measure-wide:980px;
  --radius:2px;
  --radius-card:4px;
  --navh:116px;
  --pack-img:168px;
  --figw:340px;
  --frame:6px;               /* the inset keyline every panel is drawn with */
  --shadow:0 1px 0 0 var(--line-2);
  --shadow-lg:0 14px 34px rgba(60,30,18,.14);
  --serif:"Yeseva One",Georgia,"Times New Roman",serif;
  --sans:"Arimo",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,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:132px}
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,video{max-width:100%;height:auto;display:block}
table{max-width:100%}
a{color:var(--accent-d);text-underline-offset:3px}
a:hover{color:var(--accent)}
/* Yeseva One ships ONE weight. Asking for 700 makes the browser synthesise a
   fake bold, which smears a display face at heading sizes. */
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;color:var(--ink);line-height:1.22;margin:0 0 .5em}
h1{font-size:clamp(1.9rem,1.24rem + 2.1vw,2.9rem);line-height:1.15}
h2{font-size:clamp(1.42rem,1.12rem + 1.15vw,2rem)}
h3{font-size:1.18rem}
h4{font-size:1.04rem}
p,li{font-size:1.0625rem}
p{margin:0 0 1.05em}
b,strong{font-weight:700}
/* The gutter is a WIDTH constraint, never padding, so no component sharing the
   element can wipe it with a `padding: 12px 0` shorthand (pitfall 46). */
.wrap{width:min(var(--wrap),calc(100% - 40px));margin-inline:auto}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* The eyebrow names the JOB of the section under it. Every section has one. */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.875rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--gold-d);margin:0 0 11px;
}
.eyebrow::before{content:"";width:16px;height:3px;background:var(--accent);flex:0 0 auto}

/* ---- buttons: square blocks with a keyline set in from the edge, the same
   construction as every panel on the site */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:14px 30px;
  font-family:var(--sans);font-size:1rem;font-weight:700;letter-spacing:.015em;
  border:1px solid var(--accent-d);border-radius:var(--radius);cursor:pointer;
  text-decoration:none;background:var(--accent);color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.34);
  transition:background .18s ease,border-color .18s ease;
}
.btn:hover{background:var(--accent-d);border-color:var(--accent-d);color:#fff}
.btn--cta{box-shadow:inset 0 0 0 1px rgba(255,255,255,.34),0 3px 0 0 var(--ink)}
.btn--lg{min-height:60px;padding:16px 34px;font-size:1.06rem}
.btn--ghost{background:transparent;color:var(--accent-d);border-color:var(--line-2);
  box-shadow:inset 0 0 0 1px var(--panel)}
.btn--ghost:hover{background:var(--accent-l);color:var(--accent-d);border-color:var(--accent-line)}
.btn--block{width:100%}

/* ---- the topline strip: role, lot, dose, guarantee, order phone.
   Five facts a buyer wants before they read anything, ABOVE the navigation, so
   the nav never has to carry them (hero.md). It is an ink bar rather than a red
   one: the header's quarter-circle is already red and two reds stacked read as
   one thick band. On a phone five items wrap to three lines and eat 103px of an
   844px screen, so the lot and the dose carry --trim classes and drop out. */
.util{background:var(--ink);color:var(--paper);font-size:.9375rem;line-height:1.5}
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:2px 20px;padding-block:7px}
.util__item{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.util__item+.util__item::before{
  content:"";width:3px;height:12px;background:var(--gold);flex:0 0 auto;margin-right:12px;
}
.util b{color:#fff;font-weight:700}
.util__tel{margin-left:auto;color:#fff;font-weight:700;white-space:nowrap;text-decoration:none}
.util__tel:hover{color:var(--paper);text-decoration:underline}

/* ---- the header.
   THE SLOT: the identity is set against a filled quarter-circle in the top
   corner. The shape bleeds to the left edge of the viewport, so it is drawn on
   the header element itself rather than inside the width-constrained row.

   THE PSEUDO-ELEMENT RULE COMES FIRST ON PURPOSE. brand_marks.py chooses the
   mark's glyph colour by measuring it against "the colour actually painted
   behind the brand mark", and it finds that colour by taking the first header
   rule in this file that declares a background. The mark really does sit on the
   red corner, so the red is what that search has to find. If the cream header
   surface came first it would measure cream, pick the accent for the glyph, and
   draw an accent seed on an accent arch: an invisible logo (pitfall 64).

   AND NO COMMENT IN THIS FILE MAY SPELL OUT A SELECTOR FOLLOWED BY A BRACE.
   That search is a regular expression over the raw stylesheet and it cannot
   tell a comment from a rule, so an example written out in full -- which is
   what stood here in the first draft -- IS the first match, and the tool
   measures the example instead of the site. Describe the rule; never quote it.
   The token block at the top of this file carries the same warning for the same
   reason, and between them those two comments cost a white hero and a stock
   orange logo that every gate read as clean. */
.nav::before{
  content:"";position:absolute;left:0;top:0;height:100%;
  /* The shape bleeds from the VIEWPORT edge, but the identity starts at the
     WRAP edge, which at 1440 is 130px further in. A fixed 296px therefore ran
     out under the wordmark and left the last four letters white on cream. The
     width now carries the gutter with it: half the difference between the
     viewport and the wrap, plus enough for the mark and the wordmark. */
  width:clamp(228px,calc((100vw - 1180px) / 2 + 264px),46vw);
  background:var(--accent);
  border-radius:0 0 132px 0;z-index:0;pointer-events:none;
}
.nav{position:sticky;top:0;z-index:100;background:var(--panel);
  border-bottom:1px solid var(--line-2);box-shadow:inset 0 -4px 0 -3px var(--accent)}
.nav__row{position:relative;z-index:1;display:flex;align-items:center;
  justify-content:space-between;gap:24px;padding-block:16px;flex-wrap:nowrap}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;
  color:var(--on-accent);flex:none}
/* The mark is an arch filled in the accent, and it is standing ON the accent
   corner, so without a ground of its own only its white glyph would show and
   the construction would be invisible. The cream disc is what the arch reads
   against; brand_marks.py still measures the corner behind it and correctly
   picks white for the glyph inside the arch. */
.brand>svg{width:30px;height:30px;flex:0 0 auto;background:var(--panel);
  border-radius:50%;padding:5px;box-sizing:content-box}
.bw{display:flex;flex-direction:column;line-height:1.1}
.bw b{font-family:var(--serif);font-weight:400;font-size:1.12rem;letter-spacing:.005em;color:#fff}
.bw b em{font-style:normal;color:var(--gold-l)}
.bw small{font-size:.9375rem;font-weight:600;color:var(--on-accent);letter-spacing:.03em}
.nav__right{display:flex;align-items:center;gap:22px;min-width:0}
.menu{display:flex;flex-wrap:nowrap;gap:20px;list-style:none;margin:0;padding:0}
.menu a{display:inline-block;padding:8px 0;font-size:.9688rem;font-weight:600;
  color:var(--ink-2);text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent}
.menu a:hover{color:var(--accent-d)}
.menu a[aria-current="page"]{color:var(--accent-d);border-bottom-color:var(--accent)}
.nav__buy{flex:none;min-height:44px;padding:10px 20px;font-size:.9375rem;white-space:nowrap}
.burger{display:none;width:46px;height:44px;background:var(--panel);
  border:1px solid var(--line-2);border-radius:var(--radius);cursor:pointer;padding:11px 10px}
.burger span{display:block;height:2px;background:var(--ink);margin:0 0 5px}
.burger span:last-child{margin:0}

/* ---- the hero ------------------------------------------------------------
   Copy LEFT, the bottle RIGHT on a framed cream plate. The headline is the
   first thing in the grid, so at 1440x900 the whole H1 sits in the first third
   of the screen rather than under a photograph (pitfall 86/103).

   .hero__grid keeps TWO columns at desktop, which is what hero_sticky.py reads
   before it makes the product column sticky and vertically centred.

   WHAT MUST NOT CHANGE
     * the <img> is the LCP element: eager, preloaded, never animated.
     * the H1 never carries an entrance animation. An element starting at
       opacity:0 is not recorded as painted, so LCP moves with it.
     * nothing in a reduced-motion query may touch .hero__media's position or
       size. The motif sizes its facet layer at 132% of that box; take the box
       out of the positioned flow and the layer resolves against something
       several times wider and lands across the headline (pitfall 107). The only
       reduced-motion rule this file writes is on .hero__card. */
.hero{position:relative;padding:44px 0 56px;border-bottom:1px solid var(--line-2);
  background:linear-gradient(200deg,var(--ground),#e6c8b9 50%,var(--ground))}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:34px 48px;align-items:start}
/* 20ch, not 15. At 15 the headline wrapped to five lines at 1440, ran 301px
   tall and pushed the hero CTA to y=910 -- ten pixels below the fold on a
   900-tall viewport. Measured, not guessed. */
.hero h1{margin:0 0 14px;max-width:20ch}
.h1__key{display:block;font-family:var(--sans);color:var(--accent-d);font-size:.4em;
  font-weight:700;letter-spacing:.17em;text-transform:uppercase;margin-bottom:.7em}

/* the product plate: cream, framed twice, the bottle standing on it */
.hero__media{position:relative;display:flex;align-items:center;justify-content:center}
.hero__card{
  position:relative;z-index:2;width:min(430px,100%);background:var(--panel);
  border:1px solid var(--line-2);border-top:4px solid var(--accent);
  padding:26px 26px 22px;
}
.hero__card::before{content:"";position:absolute;inset:var(--frame);
  border:1px solid var(--line);pointer-events:none}
.hero .hero__card img{position:relative;z-index:3;width:100%;height:auto}
.hero__tag{
  position:relative;z-index:4;margin:14px 0 0;text-align:center;
  font-size:.9375rem;font-weight:600;color:var(--ink-2);
}
.hero__tag b{color:var(--accent-d);font-weight:700}

.answer{
  position:relative;background:var(--panel);border:1px solid var(--line-2);
  border-left:4px solid var(--accent);padding:20px 24px;margin:0 0 16px;
}
.answer .qtag{
  display:block;font-size:.875rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gold-d);margin-bottom:7px;
}
.answer p{margin:0;font-size:1.0625rem}
.answer p+p{margin-top:.8em}
.hero__road{font-size:1rem;color:var(--ink-2);margin:0 0 16px;max-width:52ch}
.ticks{list-style:none;margin:0 0 18px;padding:0}
.ticks li{position:relative;padding-left:28px;margin:0 0 .55em;font-size:1rem}
.ticks li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--good);font-weight:700}
.trust__row{display:flex;flex-wrap:wrap;gap:8px 22px;margin-block:0 18px;padding:0;list-style:none;
  font-size:1rem;font-weight:600;color:var(--ink-2)}
.trust__row li{display:inline-flex;align-items:center;gap:8px}
.trust__row li::before{content:"";width:9px;height:9px;flex:0 0 auto;background:var(--gold)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 16px}
/* --ink-2, not --ink-3: this line sits on the bare hero gradient rather than on
   a panel, and --ink-3 measures 4.38 on the gradient's #e6c8b9 stop. Measure
   hero copy against every stop, not against the token's usual ground. */
.pay{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 6px;
  font-size:.9375rem;color:var(--ink-2)}
.pay img{width:180px;height:31px}

/* the three fact blocks at the foot of the hero copy column. Stripped from
   twenty-six heroes on 17 Sep 2026 by a pass asked to change the COPY, and
   restored the next day (pitfall 76). They stay. */
.hero__sub{display:flex;flex-wrap:wrap;gap:8px 22px;margin:18px 0 0;
  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:7px;height:7px;background:var(--accent);flex:0 0 auto}
.factpills{display:flex;flex-wrap:wrap;gap:9px;list-style:none;margin:14px 0 0;padding:0}
.factpills li{font-size:.9375rem;font-weight:600;color:var(--ink-2);background:var(--panel);
  border:1px solid var(--line-2);padding:7px 14px}
.factpills li b{color:var(--ink);font-weight:700}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:16px 0 0}
.figures div{position:relative;background:var(--panel);border:1px solid var(--line-2);
  border-top:3px solid var(--gold);padding:14px 16px}
.figures b{display:block;font-family:var(--serif);font-weight:400;font-size:1.5rem;
  color:var(--accent-d);line-height:1.15}
.figures span{display:block;font-size:.9375rem;font-weight:600;color:var(--ink-3);margin-top:3px}

/* ---- inner page head */
.phead{padding:30px 0 8px;background:var(--paper);border-bottom:1px solid var(--line)}
.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-d)}
.lead{font-size:1.12rem;color:var(--ink-2);max-width:var(--measure)}


/* ---- hero motif -- facet-turn ---------------------------------------- */
.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(200deg,#f4ead9,#e6c8ba 50%,#f4ead9)}.hero__media::before{content:'';position:absolute;left:50%;top:50%;width:132%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;z-index:1;pointer-events:none;filter:blur(16px);opacity:.85;background:conic-gradient(from 0deg,transparent 0 10%,rgba(168,47,42,0.38) 18%,transparent 28%,transparent 52%,rgba(168,47,42,0.26) 60%,transparent 70%);animation:gsFacet 34s linear infinite}@keyframes gsFacet{to{transform:rotate(360deg)}}
@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 (max-width:1060px){
  .hero__grid{gap:28px 34px}
}
@media (max-width:900px){
  /* The stacked hero, ordered by hand. The copy column is promoted with display:contents so its children become grid items -- and every sibling it exposes gets an explicit order, or an unordered one defaults to 0 and jumps above the eyebrow. The shot goes directly after the H1: a buyer arriving from an ad wants the bottle before the sixty-word answer, not after it. */ .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2;max-width:100%}
  .hero__media{order:3}
  .hero .answer{order:4}
  .hero__cta{order:5}
  .hero__road{order:6}
  .hero__sub{order:8}
  .hero .ticks{order:9}
  .hero .trust__row{order:10}
  .hero .pay{order:11}
}
@media (max-width:760px){
  .hero{padding:30px 0 40px}
  .hero__card{width:100%;padding:18px 18px 16px}
}
@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: cream panels on the almond ground, every head over a rule */
.sec{padding:56px 0;position:relative}
.sec--tight{padding:32px 0 10px}
.sec--tint{background:var(--tint);border-block:1px solid var(--line-2)}
.sec--panel{background:var(--panel);border-block:1px solid var(--line-2)}
.sec--band{background:var(--ink);color:var(--paper);border-block:0}
.sec--band h2,.sec--band h3{color:#fff}
.sec--band p,.sec--band li{color:var(--paper)}
.sec--band .eyebrow{color:var(--gold-l)}
.sec--band .eyebrow::before{background:var(--gold)}
.sec--band a{color:var(--gold-l)}
.sec--center{text-align:center}
.sec__head{max-width:var(--measure);margin:0 0 28px;padding-bottom:16px;
  border-bottom:3px double var(--line-2)}
.sec__head h2{margin:0 0 10px}
.sec__head p,.sec__head .lead{color:var(--ink-2);margin:0}
.sec--band .sec__head{border-bottom-color:var(--ink-3)}
.sec--band .sec__head p{color:var(--paper)}
.sec--center .sec__head{margin-inline:auto}
.sec--center .sec__head .lead{margin-inline:auto}
.sec--center .eyebrow{justify-content:center}

/* One measure, centred. Multi-column components keep the full wrap. Released
   below 1060px or a tablet gets a fixed 740px box in a 700px viewport. */
@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>.qa{
    max-width:var(--measure-wide);margin-inline:auto}
}

/* ---- tables */
.tablewrap{overflow-x:auto;margin:0 0 1.2em;border:1px solid var(--line-2);background:var(--panel)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:1rem}
caption{text-align:left;padding:15px 18px 0;font-size:.9375rem;color:var(--ink-3)}
th,td{padding:13px 18px;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(--gold-l);
  font-size:.9688rem;border-bottom:2px solid var(--line-2)}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--ink)}
.dtable{min-width:520px}
.note,.tnote{font-size:.9375rem;color:var(--ink-3)}

/* ---- lists that carry content */
.chips{display:flex;flex-wrap:wrap;gap:10px 20px;list-style:none;margin:0 0 1.2em;padding:0}
.chips li{display:inline-flex;align-items:flex-start;gap:9px;font-size:1rem;color:var(--ink-2)}
.chips .ck{color:var(--good);font-weight:700}

/* ---- numbered steps: the ladder figure, used again in the footer */
.steps{display:grid;gap:16px;margin:0 0 1.2em;counter-reset:s}
.step{position:relative;background:var(--panel);border:1px solid var(--line-2);
  padding:22px 24px 22px 76px}
.step::after{content:"";position:absolute;inset:var(--frame);border:1px solid var(--line);
  pointer-events:none}
.step__n{position:absolute;left:22px;top:22px;width:38px;height:38px;display:grid;
  place-items:center;background:var(--accent);color:#fff;font-family:var(--serif);
  font-weight:400;font-size:1.06rem;z-index:1}
.step__n::before{counter-increment:s;content:counter(s,decimal-leading-zero)}
.step h3{margin:0 0 6px;position:relative;z-index:1}
.step p{position:relative;z-index:1}
.step p:last-child{margin:0}

/* ---- cards: drawn twice, once as a frame and once as an inset keyline */
.grid{display:grid;gap:18px}
.grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid>*{min-width:0}
.card,.whycard{position:relative;background:var(--panel);border:1px solid var(--line-2);
  border-top:3px solid var(--accent);padding:24px 26px}
.card::before,.whycard::before{content:"";position:absolute;inset:var(--frame);
  border:1px solid var(--line);pointer-events:none}
.card h3,.whycard h3{margin:0 0 8px;position:relative}
.card p,.card ul,.whycard p{position:relative}
.card p:last-child,.card ul:last-child,.whycard p:last-child{margin-bottom:0}
.whygrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.whygrid>*{min-width:0}

/* ---- callout, alert, quote, keypoints */
.callout{background:var(--gold-l);border:1px solid var(--line-2);border-left:4px solid var(--gold);
  padding:20px 24px;margin:0 0 1.2em}
.callout b:first-child{display:block;margin-bottom:6px;color:var(--gold-d)}
.callout p:last-child{margin:0}
.alert{background:#fbf1de;border:1px solid #e7d3a8;border-left:4px solid var(--warn);
  padding:20px 24px;margin:0 0 1.2em}
.alert b:first-child{display:block;margin-bottom:6px;color:var(--warn)}
.alert p:last-child{margin:0}
.pullquote{font-family:var(--serif);font-weight:400;font-size:1.28rem;line-height:1.5;
  color:var(--ink);border-left:4px solid var(--accent);padding:6px 0 6px 24px;margin:0 0 1.2em}
.pullquote cite{display:block;font-family:var(--sans);font-size:.9375rem;font-style:normal;
  color:var(--ink-3);margin-top:8px}
.keypoints{background:var(--accent-l);border:1px solid var(--accent-line);
  border-left:4px solid var(--accent);padding:20px 24px;margin:0 0 1.2em}
.keypoints>b{display:block;margin-bottom:8px}
.keypoints ul{margin:0;padding-left:20px}
.keypoints li{margin:0 0 .5em}
.flag{display:inline-block;font-size:.875rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;background:var(--accent);padding:4px 11px;margin-bottom:9px}
.pill{display:inline-block;font-size:.875rem;font-weight:700;color:var(--gold-d);
  background:var(--gold-l);padding:4px 12px}

/* ---- 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>*,.split__media{min-width:0}
.split--rev .split__media{order:-1}
.split__media{position:relative;background:var(--panel);border:1px solid var(--line-2);padding:14px}
.split__media::after{content:"";position:absolute;inset:var(--frame);border:1px solid var(--line);
  pointer-events:none}
.split__media img{width:100%}
.split__media figcaption{font-size:.9375rem;color:var(--ink-3);margin-top:12px}
.split p:last-child{margin:0}

/* ---- captioned images. No bare image grid exists in this system: .gallery is
   retired and every .shots figure carries a heading and 30-45 words. */
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:0 0 1.2em}
.shots--wide,.shots.s3{grid-template-columns:repeat(3,minmax(0,1fr))}
.shots>*{min-width:0}
.shots figure{margin:0;background:var(--panel);border:1px solid var(--line-2);
  border-top:3px solid var(--gold);overflow:hidden}
.shots img{width:100%}
.shots figcaption{padding:16px 20px;font-size:.9375rem}
.shots figcaption b{display:block;margin-bottom:5px;font-size:1.0625rem;color:var(--ink)}
.shots figcaption span,.shots figcaption p{color:var(--ink-2)}
figure.portrait img{width:var(--figw,340px);margin-inline:auto}

/* ---- seal wall. auto-fit rather than a fixed four: at 768 a fixed grid gave
   169px a card and the captions wrapped to one word a line. */
.badgewall{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:18px;margin:0 0 1.2em}
.badgewall>*{min-width:0}
.badgewall figure{position:relative;margin:0;text-align:center;background:var(--panel);
  border:1px solid var(--line-2);padding:20px 18px}
.badgewall figure::after{content:"";position:absolute;inset:var(--frame);
  border:1px solid var(--line);pointer-events:none}
.badgewall img{width:74px;height:74px;object-fit:contain;margin:0 auto 10px;position:relative}
.badgewall b{display:block;font-size:1rem;margin-bottom:4px;position:relative}
.badgewall span{font-size:.9375rem;color:var(--ink-2);position:relative}

/* ---- the trust strip band */
.trust{background:var(--panel);border-block:1px solid var(--line-2)}
.trust .trust__row{display:flex;flex-wrap:wrap;align-items:center;gap:18px 32px;
  padding-block:20px;margin-block:0}
.trust figure{margin:0;display:flex;align-items:center;gap:10px;font-size:.9375rem;font-weight:600}
.trust figure img{width:56px;height:56px;object-fit:contain}
.trust__note{flex:1 1 280px;font-size:.9375rem;color:var(--ink-3);margin:0}

/* ---- star distribution */
.meter{margin:0 0 1.2em}
.meter__row{display:grid;grid-template-columns:76px 1fr 54px;gap:12px;align-items:center;
  margin:0 0 8px;font-size:.9375rem}
.meter__bar{height:10px;background:var(--line);overflow:hidden}
.meter__bar i{display:block;height:100%;background:var(--accent)}
.stars{color:var(--gold-d);letter-spacing:1px}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;text-align:center}
.stats div b{display:block;font-family:var(--serif);font-weight:400;font-size:2.05rem;line-height:1.15}
.stats div span{display:block;font-size:.9375rem;margin-top:4px}

/* ---- who it is for */
.whofor{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:0 0 1.2em}
.whofor>*{min-width:0}
.forlist{position:relative;background:var(--panel);border:1px solid var(--line-2);
  border-top:3px solid var(--good);padding:24px 26px}
.forlist::after{content:"";position:absolute;inset:var(--frame);border:1px solid var(--line);
  pointer-events:none}
.forlist--no{border-top-color:var(--accent)}
.forlist h3,.forlist ul{position:relative}
.forlist ul{list-style:none;margin:0;padding:0}
.forlist li{position:relative;padding-left:26px;margin:0 0 .6em;font-size:1.0625rem}
.forlist li::before{content:"\2713";position:absolute;left:0;color:var(--good);font-weight:700}
.forlist--no li::before{content:"\2715";color:var(--accent)}

/* ---- the add-to-cart panel: ONE component, on the home page and on pricing */
.buy{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
  align-items:stretch;margin:0 0 20px}
.buy>*{min-width:0}
/* Every card carries the same 2px border and only the featured one colours it
   in: box-sizing is border-box, so a border on one card alone steals 2px from
   its content box and drops its button out of line with the other two. */
.buy__card{display:flex;flex-direction:column;background:var(--panel);
  border:2px solid var(--line-2);position:relative}
.buy__card--feature{border-color:var(--accent);box-shadow:var(--shadow-lg)}
.buy__head{background:var(--gold-l);border-bottom:1px solid var(--line-2);padding:15px 20px}
.buy__card--feature .buy__head{background:var(--accent);border-bottom-color:var(--accent)}
.buy__card--feature .buy__head .buy__name{color:#fff}
.buy__card--feature .buy__head .buy__supply{color:var(--on-accent)}
.buy__card--feature .buy__flag{background:#fff;color:var(--accent-d)}
.buy__flag{display:inline-block;font-size:.875rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;background:var(--accent-l);color:var(--accent-d);padding:3px 10px;
  margin-bottom:7px}
.buy__name{font-family:var(--serif);font-weight:400;font-size:1.28rem;margin:0 0 2px}
.buy__supply{font-size:.9375rem;font-weight:600;color:var(--ink-3);margin:0;min-height:23px}
.buy__body{display:flex;flex-direction:column;flex:1;padding:22px 22px 24px}
/* Both image rules in this card are scoped one level deeper than a bare class
   on purpose. pack_cards.py appends a rule for every image inside a pack card
   to the END of this file; that selector carries a class plus an element, so it
   beats a single class here whatever the order, and the 180x31 payment strip
   would otherwise render at the pack-shot height. Two classes puts these back
   in front. */
.buy__card .buy__img{width:auto;max-width:100%;height:var(--pack-img,168px);
  object-fit:contain;margin-inline:auto;margin-bottom:16px}
.buy__price{font-family:var(--serif);font-weight:400;font-size:2.3rem;line-height:1;
  text-align:center;margin:0;color:var(--accent-d)}
.buy__cur{font-size:1.1rem;vertical-align:.6em}
.buy__per{display:block;font-family:var(--sans);font-size:.9375rem;font-weight:700;
  color:var(--ink-3);margin-top:6px}
.buy__total{text-align:center;font-size:1rem;margin:12px 0 14px}
.buy__total s{color:var(--ink-3);font-weight:600;margin-left:8px}
.buy__perks{list-style:none;margin:0 0 18px;padding:0;font-size:.9375rem}
.buy__perks li{position:relative;padding-left:24px;margin:0 0 6px;color:var(--ink-2)}
.buy__perks li::before{content:"\2713";position:absolute;left:0;color:var(--good);font-weight:700}
/* The "why this pack" note sits ABOVE the button and the button is followed
   only by the payment strip, which is the same height on all three cards, so
   margin-top:auto puts every button on one baseline whatever the blurb does. */
.buy__why{font-size:.9375rem;color:var(--ink-3);margin:12px 0 16px}
.buy__add{margin-top:auto;min-height:56px}
.buy__cart{flex:0 0 auto}
.buy__card .buy__pay{width:180px;height:31px;margin:12px auto 0}
.buy__foot{margin:0}

/* ---- FAQ. The padding lives on <summary>, the click target: on <details> the
   row measures ~30px against the 44px minimum. */
.faq{border:1px solid var(--line-2);background:var(--panel);margin:0 0 1.2em;text-align:left}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{padding:18px 50px 18px 22px;cursor:pointer;position:relative;list-style:none;
  font-family:var(--serif);font-weight:400;font-size:1.1rem}
.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.5rem;font-weight:400;color:var(--accent)}
.faq details[open] summary::after{content:"\2212"}
.faq__b,.faq__body{padding:0 22px 20px}
.faq__b p:last-child,.faq__b ul:last-child,.faq__body p:last-child{margin-bottom:0}

/* ---- the editorial score card */
.facts{background:var(--panel);border:1px solid var(--line-2);margin:0 0 1.2em}
.facts__h{background:var(--accent-d);color:#fff;font-family:var(--serif);font-weight:400;
  font-size:1.1rem;padding:14px 20px}
.facttab{min-width:0}
.facttab th{background:transparent;font-weight:600;color:var(--ink-2);border-bottom-width:1px}

/* ---- the AI / answer-engine summary block */
.qa{background:var(--panel);border:1px solid var(--line-2);border-top:3px solid var(--gold);
  padding:24px 26px;margin:0 0 1.2em}
.qa .tablewrap{margin-bottom:0}
.qa p:first-child{margin-top:0}

/* ---- the label panel, drawn as cards rather than a table */
.inglist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0 0 1.2em}
.inglist>*{min-width:0}
.ingcard{position:relative;background:var(--panel);border:1px solid var(--line-2);padding:20px 22px}
.ingcard__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin-bottom:8px}
.ingcard h3{margin:0;font-size:1.1rem}
.ing__latin{font-size:.9375rem;font-style:italic;color:var(--ink-3)}
.ing__dose{font-size:.9375rem;font-weight:700;color:var(--accent-d);margin-left:auto;
  background:var(--accent-l);padding:2px 10px;white-space:nowrap}
.ingcard p{font-size:1rem;margin:0}

/* ---- references and byline */
.refs{margin:0 0 1.2em}
.refs ol{padding-left:22px;margin:0}
.refs li{font-size:1.0625rem;color:var(--ink-2);margin:0 0 .6em}
/* A printed URL is one unbreakable token and at 390px it pushed a single <a>
   past the viewport on eleven pages of another site -- clipped, unscrollable
   and invisible to every static check. */
.refs li,.refs li a{overflow-wrap:anywhere}
.byline{display:flex;gap:18px;background:var(--panel);border:1px solid var(--line-2);
  border-left:4px solid var(--accent);padding:22px 26px;margin:0 0 1.2em;text-align:left}
.byline__mark{flex:0 0 auto;width:54px;height:54px;display:grid;place-items:center;
  background:var(--accent-d);color:#fff;font-family:var(--serif);font-weight:400;font-size:1.1rem}
.byline b{display:block;margin-bottom:6px}
.byline p{font-size:.9375rem;color:var(--ink-2);margin:0}
.meta{font-size:.9375rem;color:var(--ink-3)}

/* ---- closing CTA */
.final{position:relative;background:var(--panel);border:1px solid var(--line-2);
  border-top:4px solid var(--accent);padding:30px 34px;text-align:left}
.final::before{content:"";position:absolute;inset:var(--frame);border:1px solid var(--line);
  pointer-events:none}
.final--media{display:grid;grid-template-columns:auto minmax(0,1fr);gap:30px;align-items:center}
.final>*{position:relative}
.final__img img{width:300px}
.final h2{margin:0 0 10px}
.final__price{font-weight:700;color:var(--ink-2)}
.final__sm{font-size:.9375rem;color:var(--ink-3);margin:12px 0 0}

/* ---- related */
.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;text-align:left}
.rel>*{min-width:0}
.rel a{display:block;background:var(--panel);border:1px solid var(--line-2);
  border-top:3px solid var(--gold);padding:22px 24px;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-weight:400;font-size:1.1rem;margin-bottom:5px}
.rel span{font-size:.9375rem;color:var(--ink-2)}

/* ---- forms. 16px minimum on inputs, or iOS Safari zooms on focus and never
   zooms back. */
.form{display:grid;gap:16px;max-width:var(--measure)}
.formcard{background:var(--panel);border:1px solid var(--line-2);padding:26px 28px;margin:0 0 1.2em}
.field label{display:block;font-weight:700;font-size:.9688rem;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;font-family:var(--sans);font-size:16px;
  padding:13px 14px;border:1px solid var(--line-2);border-radius:var(--radius);
  background:#fff;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}
.postmeta{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.9375rem;color:var(--ink-3);
  border-block:1px solid var(--line-2);padding-block:12px;margin:0 0 22px}
.toc{background:var(--gold-l);border:1px solid var(--line-2);padding:20px 24px;margin:0 0 28px}
.toc b{display:block;margin-bottom:8px}
.toc ol{margin:0;padding-left:20px}
.toc li{margin:0 0 5px;font-size:1.0625rem}
.article h2{scroll-margin-top:140px}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.posts>*{min-width:0}
.posts article{background:var(--panel);border:1px solid var(--line-2);
  border-top:3px solid var(--gold);overflow:hidden}
.posts article img{width:100%}
.posts .posts__b{padding:20px 22px}
.posts h3{margin:0 0 8px;font-size:1.12rem}
.posts p{font-size:1.0625rem;color:var(--ink-2);margin:0 0 .6em}
.article .final--media{grid-template-columns:1fr;gap:18px}
.article .final__img img{width:220px}

/* ---- the footer -----------------------------------------------------------
   THE SLOT: destinations set as a numbered ladder beside a wide precautions
   panel. The ladder is every page on this website, numbered, in two runs; the
   precautions panel is the label's own cautions and this desk's, and it is wide
   because it is the half a reader is more likely to need.

   Putting the precautions in the CHROME rather than at the foot of each page
   is deliberate: they are then one scroll away from every sentence on the site
   without being repeated inside <main> twenty-seven times. */
.fmain{display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);gap:0;
  border-top:1px solid var(--line-2)}
.fmain>*{min-width:0}
.fladder{padding:34px 34px 34px 0}
.fprec{position:relative;padding:34px 0 34px 34px;border-left:1px solid var(--line-2)}
.fh{font-family:var(--sans);font-size:.875rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-d);margin:0 0 14px}
.fladder ol{list-style:none;margin:0;padding:0;counter-reset:d;columns:2;column-gap:26px}
.fladder li{counter-increment:d;break-inside:avoid;margin:0 0 2px}
.fladder li a{display:flex;align-items:baseline;gap:9px;padding-block:5px;margin-block:-1px;
  font-size:1.062rem;color:var(--ink-2);text-decoration:none}
.fladder li a::before{content:counter(d,decimal-leading-zero);flex:0 0 auto;
  font-size:1.062rem;font-weight:700;color:var(--gold);letter-spacing:.04em}
.fladder li a:hover{color:var(--accent-d)}
.fprec ul{list-style:none;margin:0;padding:0;columns:2;column-gap:30px}
.fprec li{break-inside:avoid;position:relative;padding-left:18px;margin:0 0 .5em;
  font-size:1.062rem;color:var(--ink-2)}
.fprec li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
  background:var(--accent)}
.fprec .note{margin:14px 0 0}
footer{background:var(--panel);border-top:1px solid var(--line-2)}
.fdesk{background:var(--ink);color:var(--paper)}
.fdesk__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;padding-block:34px}
.fdesk__grid>*{min-width:0}
.fdesk__k{display:block;font-size:.875rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gold-l);margin-bottom:8px}
.fdesk__card b{display:block;font-family:var(--serif);font-weight:400;font-size:1.12rem;
  color:#fff;margin-bottom:8px}
.fdesk__card p{font-size:1.0625rem;color:var(--paper);margin:0}
.fdesk__card a{color:#fff;font-weight:600}
.fseals{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding-block:20px;
  border-top:1px solid var(--line-2)}
.fseals img{width:46px;height:46px;object-fit:contain}
.fseals span{flex:1 1 260px;font-size:.9375rem;color:var(--ink-3)}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding-bottom:26px}
.fpay img{width:180px;height:31px}
.fpay span{font-size:.9375rem;color:var(--ink-3)}
.disc{background:var(--tint);border-top:1px solid var(--line-2);padding-block:30px 34px}
.disc p,.disc li{font-size:.9375rem;color:var(--ink-2)}
.disc b{color:var(--ink)}
.copy{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line-2);font-size:.9375rem;
  color:var(--ink-3)}
.legal p,.legal li{font-size:1.0625rem}

/* ---- sticky buy bar */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--ink);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;width:min(var(--wrap),calc(100% - 40px));
  margin-inline:auto;padding-block:12px}
.buybar__t{font-size:.9375rem;min-width:0}
.buybar__t b{display:block;font-size:1rem}
.buybar__t span{color:var(--paper)}
.buybar .btn{margin-left:auto;flex:0 0 auto}

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

/* ---- responsive.
   The header row SHEDS rather than wraps: menu gaps tighten, then the CTA goes,
   then the menu collapses to the burger. A wrapped header row measures 100px+
   instead of ~80px and looks broken. */
@media (max-width:1180px){
  .menu{gap:16px}
  .menu a{font-size:.9375rem}
}
@media (max-width:1120px){
  /* The topline sheds before it wraps, exactly as the header row does. The dose
     goes first: it is in the hero's fact pills and on how-to-use.html. */
  .util__item--trim2{display:none}
}
@media (max-width:1060px){
  .menu{gap:13px}
  .hero__grid{gap:28px 34px}
}
@media (max-width:980px){
  .nav__buy{display:none}
  .hero__grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .burger{display:block}
  .menu{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;
    gap:0;background:var(--panel);border-block:1px solid var(--line-2);
    padding:6px 20px 14px;box-shadow:var(--shadow-lg)}
  .menu.open{display:flex}
  .menu a{padding:12px 0;border-bottom:1px solid var(--line)}
  .menu a[aria-current="page"]{border-bottom-color:var(--line)}
  .nav__right{gap:12px}

  /* The stacked hero, ordered by hand. The copy column is promoted with
     display:contents so its children become grid items -- and every sibling it
     exposes gets an explicit order, or an unordered one defaults to 0 and jumps
     above the eyebrow. The shot goes directly after the H1: a buyer arriving
     from an ad wants the bottle before the sixty-word answer, not after it. */
  .hero__copy{display:contents}
  /* display:contents promotes the copy column's children into .hero__grid AND
     THEY BRING THEIR grid-area NAMES WITH THEM, which the browser then treats
     as unresolvable line names and opens implicit columns for. This site's copy
     column uses no named areas, but the reset costs nothing and the failure it
     prevents reads as a design decision in a screenshot. */
  .hero .hero__copy>*{grid-area:auto}
  .hero .eyebrow{order:1}
  .hero h1{order:2;max-width:100%}
  .hero__media{order:3}
  .hero .answer{order:4}
  .hero__cta{order:5}
  .hero__road{order:6}
  .hero__sub{order:8}
  .hero .ticks{order:9}
  .hero .trust__row{order:10}
  .hero .pay{order:11}
  .factpills{order:12}
  .figures{order:13}

  .whygrid,.grid.g3,.grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .inglist{grid-template-columns:1fr}
  .fmain{grid-template-columns:1fr}
  .fladder{padding:30px 0 6px}
  .fprec{padding:24px 0 30px;border-left:0;border-top:1px solid var(--line-2)}
  .fdesk__grid{grid-template-columns:1fr;gap:22px}
  .final--media{grid-template-columns:1fr;gap:20px}
  .final__img img{width:240px}
}
@media (max-width:760px){
  /* Five topline items wrap to three lines and eat 103px of an 844px screen.
     Keep the role, the guarantee and the order phone. */
  .util__item--trim{display:none}
  .util__row{gap:2px 14px}
  .util__tel{margin-left:0}
  /* The corner shortens with the row, but it still has to reach past the end of
     the wordmark: at 196px the last four letters of "Gelagensupport" fell off
     the red onto the cream and went invisible, which is the same failure the
     desktop width had and the same cause. Measured at 390: the wordmark ends at
     x=206, and the arc is still 45px tall there. */
  .nav::before{width:248px;border-radius:0 0 116px 0}
  .bw small{display:none}

  .sec{padding:42px 0}
  .hero{padding:30px 0 40px}
  .hero__card{width:100%;padding:18px 18px 16px}
  .figures{grid-template-columns:1fr;gap:10px}

  .grid.g2,.grid.g3,.grid.g4,.whygrid{grid-template-columns:1fr}
  .buy{grid-template-columns:1fr;max-width:430px;margin-inline:auto}
  /* Stacked, the ladder must not lead with the smallest pack. DOM order stays
     2, 3, 6; the pack this desk suggests comes first on a phone. */
  .buy__card:nth-child(1){order:3}
  .buy__card:nth-child(2){order:1}
  .buy__card:nth-child(3){order:2}
  .shots,.shots--wide,.shots.s3{grid-template-columns:1fr}
  .rel,.posts{grid-template-columns:1fr}
  .split,.whofor{grid-template-columns:1fr}
  .split--rev .split__media{order:0}
  .meter__row{grid-template-columns:64px 1fr 48px}
  .fladder ol,.fprec ul{columns:1}
  .buybar__in{flex-wrap:wrap;gap:10px;padding-block:10px}
  .buybar .btn{width:100%;margin-left:0}
  .final{padding:24px 22px}
  .step{padding:20px 20px 20px 68px}
}
@media (max-width:430px){
  .stats{grid-template-columns:1fr}
  /* No narrower here than at 760: the wordmark does not shrink, so the shape
     behind it must not either. */
  .nav::before{width:248px;border-radius:0 0 116px 0}
}

/* ---- the hero plate breathes --------------------------------------------
   The float goes on .hero__card, never on the <img>: the image is the LCP
   element and it is preloaded, so an animation on it moves the LCP time.
   Transform only, because an element starting at opacity:0 is never recorded
   as painted at all.

   hero_motifs.py owns the movement AROUND the bottle -- the facets turning,
   one edge catching the light at a time. This is the one thing it does not
   own, and it is deliberately slower than the facet cycle so the two never
   beat against each other.

   NOTHING HERE TOUCHES .hero__media. A reduced-motion rule that changes that
   box's position or size re-parents the motif's percentage-sized layer and
   lands it across the headline (pitfall 107). */
@media (prefers-reduced-motion:no-preference){
  .hero__card{animation:gsPlate 11s ease-in-out infinite}
  @keyframes gsPlate{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
}


/* ---- 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; }
}

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

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

/* ==== fix_layout_breaks.py ==== */
/* A figure alone on its row, and components whose own
   background fights the band they sit in. Appended: each
   rule below is correct in isolation and only their
   combination fails, so the originals stay as written. */
.shots>figure:last-child:nth-child(odd){grid-column:1/-1;max-width:calc((100% - 20px) / 2);margin-inline:auto}
.sec--band .lead{color:#efe3d1}
.sec--band .pullquote{color:#efe3d1}
.sec--band .pullquote cite{color:#efe3d1}
.sec--band .tablewrap,.sec--band .tablewrap p,.sec--band .tablewrap li,.sec--band .tablewrap td,.sec--band .tablewrap th,.sec--band .tablewrap caption{color:var(--ink)}
/* ==== end fix_layout_breaks.py ==== */

/* ==== 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 .copy{font-size:16px}
footer .disc li{font-size:16px}
footer .disc p{font-size:16px}
footer .fdesk__k{font-size:16px}
footer .fh{font-size:15px}
footer .fpay span{font-size:16px}
footer .fseals span{font-size:16px}
footer .note{font-size:16px}
/* ==== end footer type floor ==== */

/* ==== modern surface (modern_surface.py) ==== */
/* House rule 11. This stylesheet had 6 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 (36,26,18), 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(36,26,18,.06), 0 6px 18px rgba(36,26,18,.07);
  --lift:0 2px 6px rgba(36,26,18,.09), 0 16px 34px rgba(36,26,18,.14);
}

.card,
.step,
.keypoints,
.callout,
.alert,
.toc,
.byline,
.posts article,
.shots figure,
.badgewall figure,
.tablewrap,
.faq,
.ingcard,
.final,
.answer,
.whycard{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. */
.card,
.step,
.keypoints,
.callout,
.alert,
.toc,
.byline,
.posts article,
.shots figure,
.badgewall figure,
.tablewrap,
.faq,
.ingcard,
.final,
.answer,
.whycard{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 ==== */