/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Cormorant Infant Fallback";src:local("Georgia");font-weight:400;size-adjust:89.82%;ascent-override:102.88%;descent-override:31.95%;line-gap-override:0.00%}
@font-face{font-family:"Cormorant Infant Fallback";src:local("Georgia Bold");font-weight:600 900;size-adjust:77.82%;ascent-override:118.73%;descent-override:36.88%;line-gap-override:0.00%}
@font-face{font-family:"Sintony Fallback";src:local("Arial");font-weight:400;size-adjust:111.63%;ascent-override:89.13%;descent-override:27.59%;line-gap-override:0.00%}
@font-face{font-family:"Sintony Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:103.61%;ascent-override:96.03%;descent-override:29.73%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
:root{
  --paper:#faf4e8;
  --paper-tint:#f2e8d5;
  --paper-card:#ffffff;
  --paper-deep:#ece0c8;

  --slab:#0e3a3d;
  --slab-2:#092b2d;
  --on-dark:#f4efe2;

  --ink:#1c2a27;
  --ink-soft:#31423d;
  --muted:#4a5b56;
  --faint:#5f6e68;
  --line:#ddcfb4;
  --line-soft:#ece1c9;

  --accent:#e0851a;
  --accent-deep:#a85d08;
  --accent-on:#f0a94a;
  --accent-tint:#fbeed8;
  --accent-edge:#e4c48f;

  --teal-soft:#dceae8;
  --teal-line:#7fa9a6;

  --display:'Cormorant Infant','Cormorant Infant Fallback','Cormorant Fallback',Georgia,'Times New Roman',serif;
  --sans:'Sintony','Sintony Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;

  --wrap:1180px;
  --measure:740px;
  --measure-wide:960px;
  --r:12px;
  --r-s:8px;
  --figw:400px;
  --navh:76px;
  --off:4px;
  --shadow:var(--off) var(--off) 0 var(--slab);
  --shadow-sm:3px 3px 0 var(--line);
  --shadow-accent:var(--off) var(--off) 0 var(--accent);
}

/* ==========================================================================
   Sodaeslim - sodaeslim.com                design slot: batch 11, row 278

   DEEP TEAL SLABS ON CREAM. The page ground is a warm cream taken from the
   SodaSlim label's own sunburst; every band that has to stop the eye is a
   deep teal slab, the label's navy pulled a few degrees toward green so the
   two are never mistaken for one another. The accent ramp is the bottle's
   amber and nothing else.

   TYPE is a high-contrast display serif over a humanist sans: Cormorant
   Infant sets every heading and every large number, Sintony sets everything
   that is read in quantity.

   DEPTH IS A HARD OFFSET. Four pixels down and four right, no blur, in the
   teal. Nothing on this site is soft-lifted and nothing glows; a card either
   casts that one flat shadow or it casts none.

   CARDS are white, on a tinted cream ground, with a 12px radius - the only
   rounded thing here. The slabs, the tables and the buttons are square.

   THE HEADER is a teal slab: the identity hard left, the ordering button
   flush right and OUTLINED rather than filled, so the one filled amber
   button on the first screen is the hero's.

   THE FOOTER closes on the same slab, and its contact card is BORDERED -
   a 2px teal-line keyline on the slab itself - rather than inset as a
   lighter panel. The seal strip and the legal block sit outside it.
   ========================================================================== */

/* ---- METRIC-MATCHED FALLBACKS --------------------------------------------
   The two webfonts here are metrically nothing like the fonts a browser would
   otherwise substitute while they download, so the swap moved the whole page.
   MEASURED in Chrome with a canvas at 100px, on the real built page:

     Cormorant Infant 700  advance 2846px   Georgia 700  advance 3665px  -> 78%
     Cormorant Infant 400  advance 2929px   Georgia 400  advance 3167px  -> 92%
     Sintony 400           advance 3493px   system-ui    advance 3145px  -> 111%

   A high-contrast display serif is nearly a quarter narrower than Georgia at
   700, which is the weight every heading on this site uses, and Sintony is a
   tenth WIDER than the system sans. Left alone that cost 0.61 CLS on a phone
   and 0.23 on desktop, measured with the layout-shift observer over a full
   scroll of the home page. With these two declarations it is 0.02 and 0.01.

   The advance-width ratio is the wrong number to tune on, and tuning on it
   left a 4px residual in the hero worth 0.22 CLS on a phone. What decides a
   block's HEIGHT is where the lines break, so the final values were tuned by
   rendering the real headline and a real paragraph at the real measures (640,
   360 and 300px for headings; 740, 640, 368 and 320px for body) and choosing
   the value that reproduces the webfont's line count exactly. Zero-error bands
   came out at 88-92% for the display face and 110-112% for the sans, and 90/112
   is what shipped. A second sweep that scored candidates by the summed
   offsetHeight error of every section on three long pages preferred 90/110, and
   MEASURING CLS both ways contradicted it: 110 took desktop from 0.006 to 0.11
   and did nothing for the phone. Summed height error treats twenty small
   cancelling differences as worse than one large one, and layout shift does the
   opposite. Where a proxy metric and the real one disagree, the real one wins.

   line-gap-override:0 normalises the line box, and no ascent or descent
   override is needed because every line-height on this sheet is an explicit
   unitless multiplier, so block height follows font-size rather than font
   metrics. `local()` only: nothing is downloaded for these. They are shaping
   rules applied to a font the machine already has. */
@font-face{font-family:'Cormorant Fallback';
  src:local('Georgia'),local('Times New Roman'),local('Times');
  size-adjust:90%;line-gap-override:0%;font-weight:400 700;font-display:swap}
@font-face{font-family:'Sintony Fallback';
  src:local('Segoe UI'),local('Helvetica Neue'),local('Arial'),local('Roboto');
  size-adjust:112%;line-gap-override:0%;font-weight:400 700;font-display:swap}

/* ---- RESET AND BASE ------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box;min-width:0}
html{scroll-behavior:smooth;font-size:16px;scroll-padding-top:110px}
html,body{overflow-x:clip}
body{font-family:var(--sans);background:var(--paper);color:var(--muted);
  line-height:1.72;-webkit-font-smoothing:antialiased;font-size:1.0625rem}
img,svg,table,video{max-width:100%}
img{height:auto;display:block}
a{color:var(--accent-deep)}
a:hover{text-decoration:underline}
ul,ol{list-style:none}
h1,h2,h3,h4,h5{font-family:var(--display);color:var(--ink);line-height:1.1;
  font-weight:700;letter-spacing:-.005em}
b,strong{color:var(--ink)}

.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#1c1204;
  padding:10px 18px;z-index:9999;font-weight:700}
.skip:focus{left:0}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:22px}

/* ---- 1. TOPLINE STRIP ----------------------------------------------------
   Role, lot, dose, guarantee, order desk. Five facts above the navigation so
   the menu never has to carry any of them. */
.util{background:var(--slab-2);color:var(--on-dark);font-size:.9375rem}
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:2px 0;padding-block:7px}
.util__item{white-space:nowrap;padding-inline:14px;
  border-left:1px solid rgba(244,239,226,.24)}
.util__item:first-child{padding-left:0;border-left:0}
.util__item b{color:var(--accent-on)}
.util__item a{color:var(--on-dark);font-weight:700}
.util__tel{margin-left:auto}
@media(max-width:1000px){.util__item:nth-child(3),.util__item:nth-child(4){display:none}}
@media(max-width:460px){.util__item:nth-child(2){display:none}}

/* ---- 2. NAV: a teal slab, identity left, an outlined order button right ----
   The ordering button is drawn rather than filled. Two filled amber buttons
   on one screen is two calls to action competing, and the hero's is the one
   that should win; this one is a keyline until it is hovered. */
.nav{position:sticky;top:0;z-index:900;background:var(--slab);
  border-bottom:3px solid var(--accent)}
.nav__top{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-block:11px;flex-wrap:nowrap}
.brand{display:inline-flex;align-items:center;gap:12px;flex:none;color:var(--on-dark)}
.brand:hover{text-decoration:none}
.brand svg{width:36px;height:36px;flex:none}
.bw{display:flex;flex-direction:column;line-height:1.04}
.bw b{font-family:var(--display);font-size:1.62rem;font-weight:700;color:var(--on-dark);
  letter-spacing:-.01em;white-space:nowrap}
.bw b em{font-style:normal;color:var(--accent-on)}
.bw small{font-family:var(--sans);font-size:.7188rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:#a9c2bf;margin-top:4px;
  white-space:nowrap}
.nav__rail{display:flex;align-items:center;gap:14px;flex:none}
.nav__price{text-align:right;line-height:1.2;color:#b9cfcc;font-size:.8125rem;
  display:block}
.nav__price b{display:block;font-family:var(--display);font-size:1.22rem;
  color:var(--on-dark)}
.nav__buy{white-space:nowrap}
.nav__strip{background:var(--slab-2)}
.menu{display:flex;flex-wrap:wrap;align-items:center}
.menu a{display:block;font-family:var(--sans);font-size:.9375rem;font-weight:700;
  color:#cfdedc;white-space:nowrap;padding:11px 14px;
  border-bottom:3px solid transparent}
.menu a:hover,.menu a[aria-current]{color:var(--accent-on);
  border-bottom-color:var(--accent);text-decoration:none}
.menu__more a{font-weight:400;color:#a9c2bf}
.burger{display:none;background:transparent;border:2px solid var(--teal-line);
  cursor:pointer;width:46px;height:46px;padding:11px;flex:none}
.burger span{display:block;height:2px;background:var(--on-dark);margin:4px 0}

/* ---- 3. BUTTONS ----------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-weight:700;font-size:1rem;line-height:1.2;
  padding:14px 26px;border:2px solid transparent;cursor:pointer;text-align:center;
  letter-spacing:.04em;transition:background .18s ease,color .18s ease,
  border-color .18s ease,box-shadow .18s ease}
.btn:hover{text-decoration:none}
.btn--amber{background:var(--accent);color:#1c1204;border-color:var(--accent);
  box-shadow:var(--off) var(--off) 0 var(--slab)}
.btn--amber:hover{background:var(--accent-deep);border-color:var(--accent-deep);
  color:#fff}
.btn--line{background:transparent;color:var(--accent-on);border-color:var(--accent-on)}
.btn--line:hover{background:var(--accent-on);color:#1c1204}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}
.btn--lg{padding:17px 30px;font-size:1.05rem}
.btn--wide{display:flex;width:100%}

/* ---- 4. HERO: a 60/40 split whose bottle overlaps the band below it --------
   The copy column keeps three fifths and the product two, and the product is
   deliberately allowed to hang past the bottom of the section: .hero stops
   its own padding at the boundary, the shot carries a negative bottom margin
   and the following band reserves the height back. That overlap is this
   site's one structural signature and it is why nothing here clips on the
   block axis.

   No background is declared on .hero. That belongs to the motif block
   further down, and a second declaration here would win the cascade and
   erase it. */
.hero{position:relative;overflow-x:clip;overflow-y:visible;padding-block:40px 0}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);
  gap:46px;align-items:start;position:relative;z-index:2}
.hero__copy{display:block;position:relative;z-index:3}
.hero h1{font-size:clamp(2.1rem,3.7vw,3.25rem);margin:8px 0 0;line-height:1.04;
  color:var(--ink)}
.hero h1 em{font-style:normal;color:var(--accent-deep)}
.hero__road{margin:16px 0 0;font-size:1.0625rem;color:var(--muted);
  max-width:var(--measure-wide)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 0}
.hero__media{position:relative;display:flex;flex-direction:column;
  align-items:center;justify-content:center}
.hero__card{position:relative;z-index:2;text-align:center;width:100%}
.hero__card img{margin-inline:auto;max-width:100%;position:relative;z-index:3;
  margin-bottom:-72px}
/* ONE LINE, in both font states, at every width. Left to wrap, this caption
   fitted on one line in Sintony and took two in the fallback, which moved the
   entire hero down 25.8px the moment the webfont arrived. On a phone that one
   block is 0.22 of layout shift, because the area it displaces is the whole
   screen. So: nowrap, and the tail is shed below 700 where the full string no
   longer fits on one line in either font. Measured at 412x915. */
.hero__cap{display:block;position:relative;z-index:4;margin:78px auto 0;
  width:max-content;max-width:100%;background:var(--slab);color:var(--on-dark);
  font-size:.9375rem;font-weight:700;padding:7px 15px;white-space:nowrap}
.hero__sub{margin:18px 0 0;display:flex;flex-wrap:wrap;gap:8px 20px;
  font-size:1rem;color:var(--ink-soft)}
.hero__sub span{position:relative;padding-left:18px}
.hero__sub span::before{content:"";position:absolute;left:0;top:.62em;width:10px;
  height:3px;background:var(--accent)}
.factpills{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.factpills li{background:var(--paper-card);border:1px solid var(--line);
  padding:6px 13px;font-size:.9375rem;color:var(--muted)}
.factpills li b{color:var(--ink)}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
  margin:20px 0 0;max-width:640px}
.figures div{background:var(--paper-card);border:1px solid var(--line);
  border-left:4px solid var(--accent);padding:14px 16px;
  box-shadow:3px 3px 0 var(--line)}
.figures b{display:block;font-family:var(--display);font-size:1.9rem;font-weight:700;
  color:var(--ink);line-height:1}
.figures span{display:block;margin-top:5px;font-size:.9375rem;color:var(--faint)}
.pay{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:18px 0 0;
  font-size:.9375rem;color:var(--faint)}
.pay img{width:196px;height:35px;object-fit:contain}

/* ---- 5. QUICK ANSWER ------------------------------------------------------
   A white card with the hard teal offset under it, keyed by a filled amber
   tab. It is the block an answer engine lifts, so it is the one component
   that looks the same on all twenty-six pages. */
.answer{background:var(--paper-card);border:1px solid var(--line);
  border-top:4px solid var(--accent);box-shadow:var(--shadow);
  padding:20px 24px;margin:20px 0 0;max-width:var(--measure-wide)}
.answer p{margin:0;font-size:1.0625rem;color:var(--ink-soft)}
.answer p+p{margin-top:.7em}
.answer p b{color:var(--ink)}
.hero .answer p{font-size:1.1rem;line-height:1.62}

/* ---- ABOVE-THE-FOLD RESPONSIVE ------------------------------------------- */
@media(max-width:1180px){.menu a{padding-inline:11px}}
@media(max-width:1040px){
  .burger{display:block}
  .menu{display:none;flex-direction:column;align-items:stretch;padding-block:6px}
  .menu.open{display:flex}
  .menu a{padding:13px 4px;border-bottom:1px solid rgba(244,239,226,.14)}
  .nav__price{display:none}
}
@media(max-width:980px){
  .hero{padding-block:30px 0}
  .hero__grid{grid-template-columns:1fr;gap:22px}
  .hero__copy{display:contents}
  .hero__copy>.eyebrow{order:1}
  .hero__copy>h1{order:2}
  .hero__media{order:3;margin:4px 0 0}
  .hero__copy>.answer{order:4}
  .hero__copy>.hero__road{order:5}
  .hero__copy>.hero__cta{order:6}
  .hero__copy>.hero__sub{order:7}
  .hero__copy>.pay{order:8}
  .hero__copy>.factpills{order:9}
  .hero__copy>.figures{order:10}
  .hero__card img{max-width:400px;margin-bottom:-46px}
  .hero__cap{margin-top:54px}
}
@media(max-width:700px){
  .hero h1{font-size:2.05rem}
  .hero__card img{max-width:300px;margin-bottom:-34px}
  .hero__cap{margin-top:42px}
  .hero__cap__more{display:none}
  .figures{grid-template-columns:1fr}
}
/* The header row is `flex-wrap:nowrap` on purpose: it has to shed rather than
   wrap, or the sticky bar grows to two lines on a phone and eats a third of
   the first screen. So it sheds in three steps, and the measurements are the
   reason each step exists. At 390 the untouched row measured 394px against a
   346px content box -- the identity at 191px and the rail at 203px, with a
   24px gap between them -- which is 48px of real horizontal overflow on every
   page of the site. Measured in Chrome at 390x844, not eyeballed. */
@media(max-width:560px){
  .nav__top{gap:10px}
  .brand{gap:9px;min-width:0}
  .brand svg{width:30px;height:30px}
  .bw b{font-size:1.32rem}
  .nav__rail{gap:10px}
  .nav__buy{padding-inline:14px;font-size:.9375rem}
  .burger{width:42px;height:42px;padding:9px}
}
@media(max-width:520px){.nav__price{display:none}.bw small{display:none}}
/* Below 430 the header's order button stands down entirely. The bottom buy
   bar is the call to action at this width, which is house rule 8 read the
   other way round: one CTA at a time, and on a phone that one is the bar. */
@media(max-width:430px){.nav__buy{display:none}}

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


/* ---- hero motif -- thread-weave ---------------------------------------- */
.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(172deg,#f5e0c3,#faf4e8 46%,#faf4e8)}.hero__media::before{content:'';position:absolute;left:50%;top:4%;width:132%;aspect-ratio:1/1.02;translate:-50% 0;z-index:1;pointer-events:none;background:radial-gradient(52% 44% at 50% 56%,rgba(224,133,26,0.50),transparent 72%);filter:blur(20px);animation:ssWeaveField 9.5s ease-in-out infinite}.hero__media::after{content:'';position:absolute;left:50%;top:0;width:150%;aspect-ratio:1/1.16;translate:-50% 0;z-index:1;pointer-events:none;background-image:linear-gradient(64deg,transparent 44.2%,rgba(224,133,26,0.66) 46.8%,rgba(224,133,26,0.66) 47.5%,transparent 50.1%),linear-gradient(-64deg,transparent 49.9%,rgba(28,42,39,0.30) 52.8%,rgba(28,42,39,0.30) 53.5%,transparent 56.4%);-webkit-mask-image:radial-gradient(57% 51% at 50% 52%,#000 20%,transparent 71%);mask-image:radial-gradient(57% 51% at 50% 52%,#000 20%,transparent 71%);filter:blur(1.1px);animation:ssWeavePull 13s ease-in-out infinite}@media(max-width:980px){.hero__media::before{top:50%;translate:-50% -50%;width:104%;aspect-ratio:1/0.66}.hero__media::after{top:50%;translate:-50% -50%;width:100%;aspect-ratio:1/0.62;filter:blur(1.5px)}}@keyframes ssWeaveField{0%,100%{opacity:.32;transform:scale(.95)}52%{opacity:.68;transform:scale(1.05)}}@keyframes ssWeavePull{0%,100%{transform:translate(-3.2%,2%)}50%{transform:translate(3.2%,-2%)}}
@media(prefers-reduced-motion:reduce){.hero__card{animation:none!important}.hero__media::before,.hero__media::after{animation:none!important;opacity:0!important}}

/*!CRITICAL-END*/

/* ---- 6. SECTIONS ---------------------------------------------------------- */
.sec{padding-block:70px}
.sec--overlap{padding-top:120px}
.sec--tint{background:var(--paper-tint)}
.sec--deep{background:var(--paper-deep)}
.sec--slab{background:var(--slab);color:#d4e2e0;
  --ink:#ffffff;--ink-soft:#eef6f4;--muted:#d4e2e0;--faint:#a9c2bf;
  --line:#2b5457;--paper-card:#0a3134;--accent-deep:var(--accent-on)}
.sec--slab a{color:var(--accent-on)}
.sec--center .sec__head{text-align:center;margin-inline:auto}
.sec__head{max-width:var(--measure-wide);margin-bottom:32px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);
  font-size:.875rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--accent-deep);margin-bottom:9px}
.eyebrow::before{content:"";width:24px;height:3px;background:var(--accent)}
.sec--slab .eyebrow{color:var(--accent-on)}
.sec h2{font-size:clamp(1.8rem,3.1vw,2.6rem);margin-bottom:12px}
.sec h3{font-size:1.28rem;margin-bottom:8px}
.lead{font-size:1.14rem;color:var(--ink-soft)}
.note{font-size:.9375rem;color:var(--faint)}
.tnote{font-size:.9375rem;color:var(--faint);margin-top:10px}
.sec p+p,.sec p+ul,.sec p+ol,.sec ul+p,.sec ol+p{margin-top:1em}
.sec>.wrap>p,.sec>.wrap>h2,.sec>.wrap>h3,.sec>.wrap>h4,
.sec>.wrap>ul,.sec>.wrap>ol,.sec>.wrap>.sec__head,.sec>.wrap>.callout,
.sec>.wrap>.alert,.sec>.wrap>.byline,.sec>.wrap>.refs,.sec>.wrap>.answer,
.sec>.wrap>.pullquote,.sec>.wrap>blockquote,.sec>.wrap>.keypoints{
  max-width:var(--measure);margin-inline:auto}
.sec>.wrap>.tablewrap,.sec>.wrap>.faq,.sec>.wrap>.steps,.sec>.wrap>.preclist{
  max-width:var(--measure-wide);margin-inline:auto}
.sec>.wrap>h1{max-width:var(--measure);margin-inline:auto;
  font-size:clamp(2rem,3.6vw,2.9rem)}
.sec>.wrap>.eyebrow{display:flex;max-width:var(--measure);margin-inline:auto}
.sec>.wrap>ul>li,.preclist li{position:relative;padding-left:24px;margin-bottom:.5em}
.sec>.wrap>ul>li::before,.preclist li::before{content:"";position:absolute;left:1px;
  top:.68em;width:11px;height:3px;background:var(--accent)}
.ticks{display:grid;gap:10px;margin:18px 0 0}
.ticks li{position:relative;padding-left:26px;font-size:1.0625rem}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:13px;height:3px;
  background:var(--accent)}
.sec ol{counter-reset:n;display:grid;gap:11px}
.sec>.wrap>ol>li{position:relative;padding-left:40px;counter-increment:n}
.sec>.wrap>ol>li::before{content:counter(n,decimal-leading-zero);position:absolute;
  left:0;top:0;width:30px;color:var(--accent-deep);font-size:1.12rem;font-weight:700;
  font-family:var(--display)}
.pullquote{border-left:4px solid var(--accent);padding:6px 0 6px 22px;margin:26px auto;
  font-family:var(--display);font-size:1.42rem;font-weight:600;color:var(--ink);
  line-height:1.3}
.pullquote cite{display:block;margin-top:9px;font-style:normal;font-size:.875rem;
  color:var(--faint);letter-spacing:.09em;text-transform:uppercase;font-weight:700;
  font-family:var(--sans)}
.crumbs{font-size:.9375rem;color:var(--faint);padding-block:18px 0}
.crumbs a{color:var(--faint)}
.phead{padding-block:8px 34px;background:var(--paper-tint);
  border-bottom:1px solid var(--line)}
.phead h1{font-size:clamp(2rem,3.6vw,2.9rem);margin:6px 0 0}
.phead .lead{margin-top:16px;max-width:var(--measure-wide)}

/* ---- 7. CARDS: white, 12px, one hard offset ------------------------------- */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--paper-card);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 22px;box-shadow:var(--shadow)}
.card h3{font-size:1.22rem}
.card p{font-size:1.0625rem;color:var(--muted)}
.card p+p{margin-top:.8em}
.sec--slab .card{border-color:#2b5457;box-shadow:var(--off) var(--off) 0 #061f21}
.steps{display:grid;gap:14px;counter-reset:s}
.step{background:var(--paper-card);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 24px 22px 76px;position:relative;box-shadow:var(--shadow);
  counter-increment:s}
.step::before{content:counter(s,decimal-leading-zero);position:absolute;left:22px;
  top:22px;width:40px;height:40px;background:var(--slab);color:var(--accent-on);
  display:flex;align-items:center;justify-content:center;font-family:var(--display);
  font-weight:700;font-size:1.15rem}
.step h3{font-size:1.18rem}
.step p{font-size:1.0625rem;color:var(--muted)}
.callout{background:var(--accent-tint);border-left:5px solid var(--accent);
  padding:18px 22px;margin:22px auto;font-size:1.0625rem}
.callout b{display:block;font-family:var(--display);font-size:1.18rem;
  margin-bottom:5px}
.callout p+p{margin-top:.8em}
.alert{background:var(--teal-soft);border-left:5px solid var(--slab);
  padding:18px 22px;margin:22px auto;font-size:1.0625rem}
.alert b{display:block;font-family:var(--display);font-size:1.18rem;margin-bottom:5px}
.alert p+p{margin-top:.8em}
.keypoints{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:20px 22px;margin:22px auto;box-shadow:var(--shadow-sm)}
.keypoints>b{display:block;font-family:var(--sans);font-size:.875rem;
  letter-spacing:.17em;text-transform:uppercase;color:var(--accent-deep);
  margin-bottom:10px}
.keypoints li{position:relative;padding-left:24px;margin-bottom:8px;font-size:1.0625rem}
.keypoints li::before{content:"";position:absolute;left:1px;top:.68em;width:11px;
  height:3px;background:var(--accent)}

/* ---- 8. TABLES ------------------------------------------------------------ */
.tablewrap{overflow-x:auto;background:var(--paper-card);border:1px solid var(--line);
  box-shadow:var(--shadow);margin:22px auto}
table.dtable{width:100%;border-collapse:collapse;font-size:1rem;min-width:520px}
.dtable caption{text-align:left;padding:15px 20px 0;font-family:var(--display);
  font-weight:700;color:var(--ink);font-size:1.12rem}
.dtable th,.dtable td{padding:12px 20px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line-soft);color:var(--muted)}
.dtable thead th{background:var(--slab);color:var(--on-dark);font-size:.9375rem;
  letter-spacing:.08em;text-transform:uppercase;font-weight:700;font-family:var(--sans)}
.dtable tbody tr:nth-child(even) td{background:#fdf9f1}
.dtable tbody tr:last-child td{border-bottom:0}
.dtable td b,.dtable th b{color:var(--ink)}
.dtable tbody th{font-weight:700;color:var(--ink-soft);text-align:left}

/* ---- 9. SPLIT, SHOTS, SEALS ----------------------------------------------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:40px;
  align-items:center}
.split--flip .split__img{order:2}
.split__img img{margin-inline:auto;border-radius:var(--r);
  box-shadow:var(--shadow)}
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;
  margin-top:8px}
.shots.s2{grid-template-columns:repeat(2,minmax(0,1fr))}
.shots figure{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.shots img{width:100%}
.shots figcaption{padding:16px 18px;font-size:1rem;color:var(--muted)}
.shots figcaption b{display:block;font-family:var(--display);font-size:1.14rem;
  color:var(--ink);margin-bottom:5px}
.badgewall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.badgewall figure{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:20px 14px;text-align:center;box-shadow:var(--shadow)}
.badgewall img{margin:0 auto 10px}
.badgewall b{display:block;font-family:var(--display);font-size:1.08rem;
  color:var(--ink);margin-bottom:4px}
.badgewall span{font-size:.9375rem;color:var(--muted)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;
  text-align:center}
.stats b{display:block;font-family:var(--display);font-size:2.6rem;font-weight:700;
  color:#ffffff;line-height:1}
.stats span{display:block;margin-top:7px;font-size:.9375rem;color:#a9c2bf}

/* ---- 10. INGREDIENT CARDS ------------------------------------------------- */
.inglist{display:grid;gap:20px}
.ingcard{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:24px;box-shadow:var(--shadow)}
.ingcard__top{margin-bottom:12px;padding-bottom:12px;border-bottom:2px solid var(--line-soft)}
.ingcard h3{font-size:1.34rem;margin-bottom:3px}
.ing__latin{display:block;font-size:.9375rem;font-style:italic;color:var(--faint)}
.ing__dose{display:inline-block;margin-top:8px;background:var(--accent-tint);
  color:var(--accent-deep);font-size:.875rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;padding:4px 11px}
.ingcard p{font-size:1.0625rem}
.ingcard p+p{margin-top:.8em}
.versus{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr);
  gap:1px;background:var(--line);border:1px solid var(--line);
  box-shadow:var(--shadow);margin:22px auto;font-size:1rem}
.versus>div{background:var(--paper-card);padding:13px 16px;color:var(--muted)}
.versus__h{background:var(--slab)!important;color:var(--on-dark)!important;
  font-size:.9375rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}

/* ---- 11. THE ADD-TO-CART PANEL -------------------------------------------- */
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;
  align-items:stretch;margin-top:8px}
.card--pack{display:flex;flex-direction:column;text-align:center;padding:0;
  overflow:hidden;position:relative}
.pack__flag{display:block;background:var(--accent);color:#1c1204;font-size:.8125rem;
  font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:6px 10px}
.pack__head{background:var(--slab);color:var(--on-dark);padding:15px 16px}
.pack__head b{display:block;font-family:var(--display);font-size:1.6rem;
  color:var(--on-dark)}
.pack__head span{display:block;font-size:.9375rem;color:#a9c2bf;margin-top:2px}
.pack__body{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1}
.pack__body img{width:100%;max-width:210px;height:158px;object-fit:contain;
  margin:0 auto 10px}
.pack__per{font-family:var(--display);font-size:3rem;font-weight:700;color:var(--ink);
  line-height:1}
.pack__per sup{font-size:1.2rem;top:-.7em}
.pack__unit{display:block;font-size:.9375rem;color:var(--faint);font-weight:700}
.pack__tot{margin:10px 0 12px;font-size:1.0625rem;color:var(--muted)}
.pack__tot b{font-size:1.16rem;color:var(--ink)}
.pack__was{color:var(--faint);text-decoration:line-through;margin-left:6px}
.pack__perks{display:grid;gap:7px;text-align:left;margin:0 0 14px;font-size:1rem;
  color:var(--ink-soft)}
.pack__perks li{position:relative;padding-left:24px}
.pack__perks li::before{content:"";position:absolute;left:1px;top:.68em;width:11px;
  height:3px;background:var(--accent)}
.pack__marks{font-size:.9375rem;color:var(--faint);margin-top:11px}
.card--pack .btn{margin-top:auto}
.featured{border-color:var(--accent);box-shadow:var(--off) var(--off) 0 var(--accent)}
.buy__note{max-width:var(--measure-wide);margin:24px auto 0;font-size:.9375rem;
  color:var(--faint);text-align:center}
.guarantee{display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,1.5fr);gap:32px;
  align-items:center;background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:30px;box-shadow:var(--shadow)}
.guarantee img{margin-inline:auto}
.guarantee h3{font-size:1.42rem;margin-bottom:10px}

/* ---- 12. REVIEWS ---------------------------------------------------------- */
.tgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.stars{color:var(--accent);letter-spacing:2px;font-size:1.05rem}
.stars i{color:var(--line);font-style:normal}
.meter{display:grid;gap:9px;max-width:480px}
.meter__row{display:grid;grid-template-columns:66px minmax(0,1fr) 50px;gap:12px;
  align-items:center;font-size:.9375rem;color:var(--faint)}
.meter__bar{height:12px;background:var(--line-soft);overflow:hidden;display:block}
.meter__bar i{display:block;height:100%;background:var(--accent)}
.bigscore{font-family:var(--display);font-size:3.2rem;font-weight:700;color:var(--ink);
  line-height:1}

/* ---- 13. FAQ -------------------------------------------------------------- */
.faq{display:grid;gap:10px;text-align:left}
.faq details{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow-sm);overflow:hidden}
.faq details[open]{border-color:var(--accent-edge)}
.faq summary{padding:16px 20px;font-family:var(--display);font-weight:700;
  color:var(--ink);cursor:pointer;font-size:1.18rem;list-style:none;display:flex;
  justify-content:space-between;gap:14px;align-items:center;min-height:48px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:28px;height:28px;
  background:var(--accent-tint);color:var(--accent-deep);font-size:1.25rem;
  display:flex;align-items:center;justify-content:center;font-family:var(--sans)}
.faq details[open] summary::after{content:"\2013";background:var(--accent);
  color:#1c1204}
.faq__body{padding:0 20px 17px;font-size:1.0625rem}
.faq__body p+p{margin-top:.8em}

/* ---- 14. REFERENCES AND BYLINE -------------------------------------------- */
.refs{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:22px 24px;box-shadow:var(--shadow)}
.refs ol{counter-reset:r;display:grid;gap:9px}
.refs li{counter-increment:r;position:relative;padding-left:34px;font-size:1rem;
  color:var(--muted);line-height:1.58}
.refs li::before{content:counter(r,decimal-leading-zero);position:absolute;left:0;
  font-weight:700;color:var(--accent-deep);font-family:var(--display);font-size:1.05rem}
.refs a{word-break:break-word}
.byline{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;
  background:var(--paper-card);border:1px solid var(--line);
  border-left:5px solid var(--accent);border-radius:var(--r);padding:22px 24px;
  box-shadow:var(--shadow);margin:24px auto 0}
.byline__mark{flex:none;width:54px;height:54px;background:var(--slab);
  color:var(--accent-on);display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:700;font-size:1.28rem}
.byline b{font-family:var(--display);font-size:1.14rem;color:var(--ink);display:block;
  margin-bottom:6px}
.byline p{font-size:1rem;color:var(--muted)}

/* ---- 15. FORMS ------------------------------------------------------------ */
.form{display:grid;gap:20px;grid-template-columns:repeat(2,minmax(0,1fr))}
.formcard{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:24px;box-shadow:var(--shadow)}
.formcard h3{font-size:1.22rem;margin-bottom:6px}
.formcard label{display:block;font-size:.9375rem;font-weight:700;color:var(--ink-soft);
  margin:14px 0 5px}
.formcard input,.formcard textarea,.formcard select{width:100%;padding:12px 14px;
  border:1px solid var(--line);font-family:var(--sans);font-size:1rem;
  color:var(--ink);background:#fffdf8}
.formcard textarea{min-height:120px;resize:vertical}
.formcard .btn{margin-top:18px}

/* ---- 16. FINAL CTA AND KEEP READING --------------------------------------- */
.fcta{background:var(--slab);color:#d4e2e0;padding-block:52px}
.fcta__box{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.7fr);gap:34px;
  align-items:center}
.fcta__eye{display:inline-block;font-size:.875rem;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:var(--accent-on);margin-bottom:9px}
.fcta__h{font-family:var(--display);font-size:clamp(1.7rem,3vw,2.4rem);font-weight:700;
  color:#fff;line-height:1.1;margin-bottom:12px}
.fcta__txt p{color:#d4e2e0;margin-bottom:18px}
.fcta__txt a:not(.btn){color:var(--accent-on)}
.fcta__sm{font-size:.9375rem;color:#a9c2bf;margin-top:14px}
.fcta__img img{margin-inline:auto}
.final{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:32px 34px;box-shadow:var(--shadow)}
.final h2{font-size:clamp(1.55rem,2.8vw,2.1rem);margin-bottom:12px}
.final--media{display:grid;grid-template-columns:230px minmax(0,1fr);gap:32px;
  align-items:center}
.final__img img{width:100%;height:auto;margin-inline:auto}
.final__price{font-family:var(--display);font-size:1.3rem;font-weight:700;
  color:var(--ink);margin:12px 0 16px}
.final__sm{font-size:.9375rem;color:var(--faint);margin-top:12px}
.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;
  text-align:left}
.rel a{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:20px;display:block;box-shadow:var(--shadow);
  color:var(--muted)}
.rel a:hover{border-color:var(--accent);text-decoration:none}
.rel b{display:block;font-family:var(--display);font-size:1.14rem;color:var(--ink);
  margin-bottom:5px}
.rel span{font-size:1rem;color:var(--muted)}

/* ---- 17. LEGAL ------------------------------------------------------------ */
.legal h2{margin-top:1.5em}
.legal h3{margin-top:1.2em}
.meta{font-size:.9375rem;color:var(--faint)}

/* ---- 18. THE CLOSING SLAB -------------------------------------------------
   One teal slab carries the whole footer. The contact card inside it is
   BORDERED - a 2px keyline on the slab itself - rather than inset as a
   lighter panel, so the slab stays one continuous surface and the card reads
   as drawn on it. The seal strip and the legal block sit outside the card on
   the same ground. */
footer{background:var(--slab);color:#d4e2e0;font-size:1rem;padding-block:44px 24px;
  border-top:4px solid var(--accent)}
footer a{color:#e8f1ef}
footer a:hover{color:var(--accent-on)}
.fgrid{display:grid;grid-template-columns:minmax(0,1.25fr) repeat(4,minmax(0,1fr));
  gap:26px 30px;align-items:start}
.fcard{border:2px solid var(--teal-line);padding:22px 22px 20px}
.fbrand{font-family:var(--display);font-size:1.9rem;font-weight:700;color:#fff;
  line-height:1;margin-bottom:6px}
.fbrand span{color:var(--accent-on)}
.frole{color:#a9c2bf;margin-bottom:12px}
.fcard p{margin-bottom:11px;line-height:1.6}
.fcard p b{color:#fff;display:block}
.fh{font-family:var(--sans);font-size:.875rem;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:var(--accent-on);margin-bottom:12px}
.fgrid ul{display:grid;gap:3px;margin-bottom:22px}
.fgrid li{line-height:1.5}
footer li a{display:inline-block;padding-block:4px;margin-block:-4px}
.fseals{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:30px;
  padding-top:22px;border-top:1px solid #2b5457;font-size:.9375rem;color:#a9c2bf}
.fseals img{width:44px;height:44px;object-fit:contain}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding-top:18px;
  font-size:.9375rem;color:#a9c2bf}
.fpay img{background:#fff;padding:5px 8px}
.disc{margin-top:22px;padding-top:20px;border-top:1px solid #2b5457;
  font-size:.9375rem;line-height:1.68;color:#bcd0cd}
.disc p{margin-bottom:.9em}
.disc b{color:#fff}
.disc__list{display:grid;gap:7px;margin:12px 0}
.disc__list li{position:relative;padding-left:20px}
.disc__list li::before{content:"";position:absolute;left:0;top:.68em;width:10px;
  height:2px;background:var(--accent-on)}
.disc .copy{margin-top:14px;color:#a9c2bf}

/* ---- 19. BUY BAR ---------------------------------------------------------- */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:950;background:var(--slab-2);
  color:#d4e2e0;transform:translateY(110%);transition:transform .3s ease;
  border-top:3px solid var(--accent);display:block}
.buybar.show{transform:translateY(0)}
.buybar__in{max-width:var(--wrap);margin-inline:auto;padding:10px 22px;display:flex;
  align-items:center;gap:18px;justify-content:space-between;flex-wrap:wrap;
  font-size:.9375rem}
.buybar__t b{color:#fff;display:block;font-family:var(--display);font-size:1.16rem}
.buybar .btn{padding:11px 22px}

/* ---- 20. BLOG ------------------------------------------------------------- */
.article{max-width:770px;margin-inline:auto}
.article h1{font-size:clamp(2rem,3.7vw,2.8rem);margin-bottom:14px}
.article h2{font-size:1.72rem;margin:1.8em 0 .55em;scroll-margin-top:120px}
.article h3{font-size:1.26rem;margin:1.4em 0 .45em}
.article p{margin-bottom:1em}
.article ul,.article ol{margin:0 0 1.2em}
.article ul li{position:relative;padding-left:24px;margin-bottom:8px}
.article ul li::before{content:"";position:absolute;left:1px;top:.68em;width:11px;
  height:3px;background:var(--accent)}
.article ol{counter-reset:ai;display:grid;gap:8px}
.article ol li{position:relative;padding-left:34px;counter-increment:ai}
.article ol li::before{content:counter(ai,decimal-leading-zero);position:absolute;
  left:0;color:var(--accent-deep);font-weight:700;font-family:var(--display);
  font-size:1.05rem}
.article figure{margin:1.6em 0}
.article figure img{width:100%;border-radius:var(--r);box-shadow:var(--shadow)}
.article figure.portrait img{width:100%;max-width:var(--figw);margin-inline:auto}
.article figcaption{font-size:.9375rem;color:var(--faint);margin-top:9px;
  border-left:3px solid var(--accent);padding-inline-start:12px}
.postmeta{display:flex;flex-wrap:wrap;gap:8px 12px;font-size:.9375rem;
  color:var(--faint);padding-block:12px;border-block:1px solid var(--line);
  margin-bottom:24px}
.postmeta b{color:var(--ink-soft)}
.toc{background:var(--paper-card);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 22px;margin-bottom:24px;box-shadow:var(--shadow-sm)}
.toc h2{font-size:.875rem;letter-spacing:.17em;text-transform:uppercase;
  font-family:var(--sans);color:var(--accent-deep);margin:0 0 10px}
.toc ol{counter-reset:t;display:grid;gap:6px}
.toc li{counter-increment:t;position:relative;padding-left:30px;font-size:1.0625rem}
.toc li::before{content:counter(t,decimal-leading-zero);position:absolute;left:0;
  color:var(--faint);font-weight:700;font-family:var(--display);font-size:1.02rem}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.posts article{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.posts img{width:100%}
.posts .pbody{padding:20px 22px}
.posts h3{font-size:1.22rem;margin-bottom:8px}
.posts p{font-size:1.0625rem;color:var(--muted)}
.posts .pmeta{font-size:.9375rem;color:var(--faint);margin-top:12px;
  letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.article .final--media{grid-template-columns:150px minmax(0,1fr);gap:22px;
  padding:26px 24px}
.article .final--media .final__img img{max-width:150px}
.article .final--media h2{font-size:1.46rem;line-height:1.2;margin-top:0}
.article .refs{margin-top:2em}

/* ---- 21. MOTION: a short rise on entry ------------------------------------ */
[data-reveal]{opacity:0;transform:translateY(16px)}
[data-reveal].in{opacity:1;transform:none;
  transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
@media(prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal].in{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---- 22. RESPONSIVE ------------------------------------------------------- */
@media(max-width:1080px){
  .sec>.wrap>p,.sec>.wrap>h2,.sec>.wrap>h3,.sec>.wrap>h4,
  .sec>.wrap>ul,.sec>.wrap>ol,.sec>.wrap>.sec__head,.sec>.wrap>.callout,
  .sec>.wrap>.alert,.sec>.wrap>.byline,.sec>.wrap>.refs,.sec>.wrap>.answer,
  .sec>.wrap>.pullquote,.sec>.wrap>blockquote,.sec>.wrap>.keypoints,
  .sec>.wrap>h1,.sec>.wrap>.eyebrow,.sec>.wrap>.tablewrap,.sec>.wrap>.faq,
  .sec>.wrap>.steps,.sec>.wrap>.preclist{max-width:none}
  .badgewall{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fcard{grid-column:span 3}
}
@media(max-width:940px){
  .split,.split--flip,.guarantee,.form,.fcta__box{grid-template-columns:1fr;gap:26px}
  .split--flip .split__img{order:0}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3,.g4,.tgrid,.rel,.posts,.shots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prices{grid-template-columns:1fr;max-width:430px;margin-inline:auto;gap:18px}
  .prices .card--pack:nth-child(1){order:2}
  .prices .card--pack:nth-child(2){order:3}
  .prices .card--pack:nth-child(3){order:1}
  .versus{grid-template-columns:1fr}
  .versus__h:nth-child(n+2){display:none}
  .sec--overlap{padding-top:88px}
}
@media(max-width:700px){
  .sec{padding-block:52px}
  .sec--overlap{padding-top:70px}
  .g2,.g3,.g4,.tgrid,.rel,.posts,.shots,.shots.s2,.badgewall,.fgrid{
    grid-template-columns:1fr}
  .fcard{grid-column:auto}
  .stats{grid-template-columns:1fr}
  .final{padding:24px 20px}
  .final--media,.article .final--media{grid-template-columns:1fr;gap:20px;
    text-align:center}
  .final--media .final__img img{max-width:220px}
  .article .final--media .btn{width:100%}
  .step{padding:20px 18px 20px 66px}
  .step::before{left:14px;top:18px;width:36px;height:36px}
  .answer{padding:17px 18px}
}
@media(max-width:600px){.btn{min-height:46px}}

/* ---- 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. Requires
   .hero NOT to clip on the block axis - see pitfall 65. */
@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}

/* ==== 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(110%)}
/* ==== 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{font-size:16px}
footer .fh{font-size:15px}
footer .fpay{font-size:16px}
footer .fseals{font-size:16px}
/* ==== end footer type floor ==== */

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

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

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