/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Enriqueta Fallback";src:local("Arial");font-weight:400;size-adjust:101.41%;ascent-override:106.20%;descent-override:25.74%;line-gap-override:0.00%}
@font-face{font-family:"Enriqueta Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:93.77%;ascent-override:114.85%;descent-override:27.83%;line-gap-override:0.00%}
@font-face{font-family:"Armata Fallback";src:local("Arial");font-weight:400;size-adjust:120.18%;ascent-override:81.26%;descent-override:22.75%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* sodaslaim.com — SodaSlim, the official U.S. shop desk.
   Design slot: row 279 of _generators/batch11_assignments.py.

   Six levers, all six assigned and all six built here:

     Type    Enriqueta (slab serif) over Armata (a single-weight humanist
             sans). Armata ships one weight only, so emphasis inside running
             text is carried by the SLAB, not by a bolder sans — b/strong
             switch family. That is the type idea of this site.
     Layout  The hero copy sits on a parchment sheet laid OVER a full-bleed
             indigo band; the bottle stands on the band beside it. Below the
             fold the sections alternate two columns, left/right, all the way
             down.
     Cards   Flat. No fill, no lift — one 4px amber rule down the left edge
             and nothing else.
     Ground  Cold indigo bands on warm parchment. The bands are full-bleed
             and they are the only dark surface on the site.
     Depth   One shadow on the whole site, and it is under the product plate.
             Everything else separates by rule and by ground.
     Motion  lamp-warm: a warm pool of light behind the bottle that comes up
             and steadies, the way a lamp does, with a wider halo breathing
             behind it on a longer period. Written into hero_motifs.py.

   Colour is taken from the bottle: the label is an amber-to-white face inside
   a deep navy shoulder, so amber is the accent and indigo is the band.

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

/* ---- tokens */
:root{
  --ink:#1d2333;            /* body text */
  --ink-2:#4a5062;          /* secondary */
  --ink-3:#6b7183;          /* captions, meta */
  --indigo:#20305e;         /* the label's shoulder: the band */
  --indigo-d:#16224a;       /* deep */
  --indigo-2:#334a86;
  --amber:#e07a16;          /* the label's face: the accent */
  --amber-d:#a85a06;
  --amber-l:#f6a93b;
  --wash:#f2e5cf;           /* amber wash on parchment */
  --paper:#f7f1e4;          /* the page: warm parchment */
  --panel:#fffbf2;
  --tint:#efe6d4;
  --line:#e0d6c2;
  --line-2:#c9bca2;
  --good:#1c6b45;
  --warn:#8a5210;
  --on-dark:#f3ece0;
  --wrap:1180px;
  --gut:22px;               /* the page gutter, named so the full-bleed
                               hero band can cancel EXACTLY as much padding
                               as .wrap adds. A hardcoded -22px against a
                               16px gutter is 12px of overflow a side. */
  --measure:740px;
  --measure-wide:960px;
  --radius:3px;
  --radius-lg:4px;
  --plate:0 34px 70px -18px rgba(22,34,74,.55);   /* the one shadow */
  --navh:120px;
  --display:Enriqueta,Georgia,"Times New Roman",serif;
  --text:Armata,system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ---- base */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
body{
  overflow-x:clip;background:var(--paper);color:var(--ink);
  font-family:var(--text);font-size:17px;line-height:1.76;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--amber-d);text-underline-offset:3px}
a:hover{color:var(--indigo)}
h1,h2,h3,h4{font-family:var(--display);color:var(--indigo-d);font-weight:700;line-height:1.2;margin:0 0 .5em}
h1{font-size:clamp(1.92rem,1.24rem + 2.1vw,2.95rem);letter-spacing:-.012em}
h2{font-size:clamp(1.42rem,1.12rem + 1.15vw,2.08rem);letter-spacing:-.008em}
h3{font-size:1.18rem;font-weight:700}
h4{font-size:1.02rem;font-weight:700}
p,li{font-size:1.0625rem}
p{margin:0 0 1.05em}
/* Armata has ONE weight. Inline emphasis therefore changes FAMILY rather than
   weight — the slab steps forward out of the sans. A synthesised bold on a
   single-weight face smears at 17px and reads as a rendering fault. */
b,strong{font-family:var(--display);font-weight:700;color:var(--indigo-d)}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-9999px;top:0;background:var(--indigo-d);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}

/* the eyebrow names the JOB of the section beneath it */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--text);font-size:0.9375rem;font-weight:400;
  letter-spacing:.17em;text-transform:uppercase;color:var(--amber-d);
  margin:0 0 12px;
}
.eyebrow::before{content:"";width:22px;height:4px;background:var(--amber)}

/* ---- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:54px;padding:15px 32px;
  font-family:var(--display);font-size:1rem;font-weight:700;letter-spacing:.005em;
  border:0;border-radius:var(--radius);cursor:pointer;text-decoration:none;
  background:var(--indigo);color:#fff;
  transition:background .18s ease,transform .18s ease;
}
.btn:hover{background:var(--indigo-d);color:#fff}
.btn:active{transform:translateY(1px)}
.btn--amber{background:var(--amber-d);color:#fff}
.btn--amber:hover{background:#8c4a04;color:#fff}
.btn--lg{min-height:62px;padding:17px 38px;font-size:1.08rem}
.btn--ghost{background:none;color:var(--indigo-d);box-shadow:inset 0 0 0 2px var(--line-2)}
.btn--ghost:hover{background:var(--tint);color:var(--indigo-d)}
.btn--wide{width:100%}

/* ---- topline */
.util{background:var(--indigo-d);color:var(--on-dark)}
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 26px;padding-block:9px}
.util__item{font-size:.875rem;letter-spacing:.02em;color:var(--on-dark)}
.util__item b{color:#fff;font-family:var(--display)}
.util__item a{color:#fff;text-decoration:none}
.util__item a:hover{color:var(--amber-l)}

/* ---- header: one bar, the destinations in a scrolling chip rail beneath it */
.nav{position:sticky;top:0;z-index:100;background:var(--panel);border-bottom:1px solid var(--line)}
/* padding-BLOCK, never the shorthand: this element also carries .wrap and the
   shorthand would zero padding-inline and wipe the page gutter (pitfall 46). */
.nav__top{display:flex;align-items:center;gap:18px;padding-block:14px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--indigo-d)}
.brand__glyph{width:38px;height:38px;flex:0 0 auto}
/* Size the mark by ELEMENT as well as by class: brand_marks.py replaces the
   <svg> inside .brand and does not carry the class onto its replacement, so a
   class-only rule stops applying the moment the tool runs (pitfall 16). */
.brand>svg{width:38px;height:38px;flex:0 0 auto}
.bw{display:flex;flex-direction:column;line-height:1.1}
.bw b{font-family:var(--display);font-size:1.42rem;font-weight:700;letter-spacing:-.015em;color:var(--indigo-d)}
.bw b em{font-style:normal;color:var(--amber-d)}
.bw small{font-size:0.875rem;color:var(--ink-3);font-family:var(--text)}
.nav__rail{margin-left:auto;display:flex;align-items:center;gap:16px}
.nav__price{text-align:right;line-height:1.24}
.nav__price b{display:block;font-family:var(--display);font-size:1.12rem;font-weight:700;color:var(--indigo-d)}
.nav__price span{font-size:.8125rem;color:var(--ink-3)}
.nav__buy{min-height:46px;padding:11px 20px;font-size:.95rem}
.burger{
  display:none;width:48px;height:46px;background:transparent;border:1px solid var(--line-2);
  border-radius:var(--radius);cursor:pointer;padding:12px 11px;
}
.burger span{display:block;height:2px;background:var(--indigo-d);margin:0 0 5px}
.burger span:last-child{margin:0}

/* The chip rail. The destinations are chips on one line that SCROLLS
   horizontally rather than wrapping to a second and third row — which is what
   makes this header one bar tall at every width instead of three. */
.nav__rail-strip{background:var(--tint);border-top:1px solid var(--line);position:relative}
/* The rail scrolls, so it needs to LOOK as though it scrolls. Without this the
   last chip is simply cut off at the viewport edge and a desktop reader has no
   reason to drag it. Measured at 1440: fourteen chips run to about 1,760px
   against a 1,180px wrap, so five of them are off-screen at rest. */
.nav__rail-strip::after{
  content:"";position:absolute;right:0;top:1px;bottom:0;width:64px;z-index:2;
  background:linear-gradient(90deg,rgba(239,230,212,0),var(--tint) 72%);
  pointer-events:none;
}
.menu{
  display:flex;gap:9px;list-style:none;margin:0;padding:9px 0;
  align-items:center;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:thin;scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}
.menu::-webkit-scrollbar{height:5px}
.menu::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px}
.menu li{flex:0 0 auto;scroll-snap-align:start}
.menu a{
  display:inline-block;padding:7px 15px;font-family:var(--text);
  font-size:.9375rem;color:var(--ink-2);text-decoration:none;white-space:nowrap;
  border:1px solid var(--line-2);border-radius:999px;background:var(--panel);
}
.menu a:hover{color:var(--indigo-d);border-color:var(--amber);background:#fff}
.menu a[aria-current="page"]{color:#fff;background:var(--indigo);border-color:var(--indigo)}

/* ---- hero: the copy sheet laid over a full-bleed indigo band ------------- */
.hero{position:relative;background:var(--paper);padding:40px 0 56px;overflow-x:clip}
/* The band. Full-bleed, the only dark surface above the fold, and the thing
   the copy sheet and the product plate are both laid ON.

   Its top is a FIXED offset from the hero's top, not a percentage of the
   hero's height, and that is the whole reason this rule has a comment. The
   first version used `bottom:0;height:54%`. The hero on this site is around
   1,100px tall because the copy column carries the Quick Answer, the roadmap,
   the CTA pair, the fact pills and the figures — so 54% from the bottom put
   the band's top edge at y=855 in a 900px viewport. Measured, not eyeballed:
   the band was three pixels of amber hairline at the very bottom of the first
   screen and nothing else, the bottle floated on bare parchment, and the
   screenshot looked like a different design slot altogether.

   380px from the hero's top lands just under the headline at every desktop
   width, so the plate and the lower two-thirds of the sheet sit on the band
   exactly as the slot describes. Below 980px both layers are switched off and
   the band moves onto the media column instead. */
.hero::before{
  content:"";position:absolute;left:0;right:0;top:380px;bottom:0;
  background:linear-gradient(180deg,var(--indigo) 0%,var(--indigo-d) 100%);
  z-index:0;
}
/* one hairline where the band begins, in the accent */
.hero::after{
  content:"";position:absolute;left:0;right:0;top:380px;height:3px;
  background:var(--amber);z-index:0;
}
/* z-index 0, NOT 1. An ::after is painted after its element's children, so at
   the same z-index as .hero__grid this hairline would be drawn straight across
   the copy sheet and the product plate rather than behind them. Below them it
   shows only in the gutters, which is where a rule belongs. */
.hero__grid{
  position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:40px;align-items:start;
}
/* the sheet: warm parchment, flat, a hairline and one amber edge. It overlaps
   the band, which is the whole hero idea. */
.hero__copy{
  background:var(--panel);border:1px solid var(--line);
  border-left:5px solid var(--amber);
  padding:30px 32px 32px;
}
.hero__copy .eyebrow{margin-top:0}
.hero h1{margin:0 0 16px}
.answer{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:16px 0 6px;margin:0 0 16px;
}
.answer p{margin:0 0 .85em}
.answer p:first-child{font-family:var(--display);font-size:1.16rem;color:var(--indigo-d);line-height:1.5}
.hero__road{color:var(--ink-2);font-size:1rem;margin:0 0 20px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 16px}
.hero__sub{display:flex;flex-wrap:wrap;gap:6px 20px;margin:0 0 18px;padding:0}
.hero__sub span{font-size:.9375rem;color:var(--ink-2);display:inline-flex;align-items:center;gap:8px}
.hero__sub span::before{content:"";width:7px;height:7px;background:var(--amber);flex:0 0 auto}
.factpills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 18px;padding:0}
.factpills li{
  font-size:.9375rem;color:var(--ink-2);background:var(--tint);
  border:1px solid var(--line);padding:6px 13px;
}
.factpills li b{color:var(--indigo-d)}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;
  border-top:1px solid var(--line);padding-top:18px}
.figures div{min-width:0}
.figures b{display:block;font-family:var(--display);font-size:1.62rem;color:var(--amber-d);line-height:1.1}
.figures span{display:block;font-size:.875rem;color:var(--ink-3);line-height:1.45;margin-top:4px}

.hero__media{position:relative;padding-top:28px}
/* the plate the bottle stands on: the ONE shadow on this site */
.hero__card{
  position:relative;background:var(--panel);border:1px solid var(--line-2);
  padding:22px 22px 16px;box-shadow:var(--plate);
}
.hero__card img{width:100%;height:auto}
.hero__cap{margin:12px 0 0;font-size:.875rem;color:var(--ink-3);text-align:center}

/* ---- sections ----------------------------------------------------------- */
.sec{padding:58px 0;border-top:1px solid var(--line)}
.sec--tint{background:var(--tint)}
.sec--panel{background:var(--panel)}
.sec--dark{background:var(--indigo-d);color:var(--on-dark);border-top:0}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark .eyebrow{color:var(--amber-l)}
.sec--dark p,.sec--dark li{color:var(--on-dark)}
.sec--dark a{color:var(--amber-l)}
.sec--dark b,.sec--dark strong{color:#fff}
.sec--center{text-align:center}
.sec--center .eyebrow{justify-content:center}
.sec__head{max-width:var(--measure-wide);margin:0 0 30px}
.sec--center .sec__head{margin-inline:auto}
.sec__head p{color:var(--ink-2);margin:0}
.sec--dark .sec__head p{color:var(--on-dark)}
.sec>.wrap>p,.sec>.wrap>ul,.sec>.wrap>ol,.sec>.wrap>blockquote{max-width:var(--measure)}
.sec--center>.wrap>p{margin-inline:auto}

/* alternating two-column sections: the estate's .split, laid out left on the
   odd sections and right on the even ones by the generator's `flip` flag */
.split{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:34px;align-items:start}
.split--flip .split__img{order:2}
.split--flip .split__body{order:1}
.split__img img{width:100%;height:auto;border:1px solid var(--line-2)}
.split__body>*:last-child{margin-bottom:0}
.split__body h3{margin-top:0}

/* ---- cards: flat, one amber rule down the left edge --------------------- */
.card{
  background:none;border:0;border-left:4px solid var(--amber);
  border-top:1px solid var(--line);
  padding:20px 0 4px 22px;
}
.card h3{margin:0 0 10px;color:var(--indigo-d)}
.card>*:last-child{margin-bottom:0}
.grid{display:grid;gap:26px}
.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))}

.steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;counter-reset:st}
.step{border-top:1px solid var(--line);border-left:4px solid var(--indigo);padding:20px 0 4px 22px}
.step h3{margin:0 0 10px;display:flex;align-items:baseline;gap:10px}
.step h3::before{
  counter-increment:st;content:counter(st,decimal-leading-zero);
  font-family:var(--text);font-size:.9375rem;color:var(--amber-d);letter-spacing:.08em;
}
.step>*:last-child{margin-bottom:0}

.callout{border-left:4px solid var(--indigo);background:var(--tint);padding:18px 22px;margin:0 0 20px;max-width:var(--measure-wide)}
.callout b{display:block;margin-bottom:6px;font-size:1.06rem}
.callout>*:last-child{margin-bottom:0}
.alert{border-left:4px solid var(--warn);background:#f6edda;padding:18px 22px;margin:0 0 20px;max-width:var(--measure-wide)}
.alert b{display:block;margin-bottom:6px;font-size:1.06rem;color:var(--warn)}
.alert>*:last-child{margin-bottom:0}
.keypoints{border-left:4px solid var(--amber);background:var(--panel);border-top:1px solid var(--line);padding:18px 22px;margin:0 0 20px;max-width:var(--measure-wide)}
.keypoints b{display:block;margin-bottom:8px;font-size:1.06rem}
.keypoints ul{margin:0;padding-left:20px}
.pullquote{
  margin:0 0 24px;padding:4px 0 4px 26px;border-left:4px solid var(--amber);
  font-family:var(--display);font-size:1.28rem;line-height:1.5;color:var(--indigo-d);
  max-width:var(--measure-wide);
}
.pullquote cite{display:block;font-family:var(--text);font-size:.9375rem;font-style:normal;color:var(--ink-3);margin-top:10px}

ul.ticks{list-style:none;margin:0 0 18px;padding:0}
ul.ticks li{position:relative;padding-left:26px;margin-bottom:9px}
ul.ticks li::before{content:"";position:absolute;left:0;top:.66em;width:11px;height:3px;background:var(--amber)}
.sec--dark ul.ticks li::before{background:var(--amber-l)}

/* ---- tables ------------------------------------------------------------- */
.tablewrap{overflow-x:auto;margin:0 0 16px;border:1px solid var(--line-2);background:var(--panel)}
table{border-collapse:collapse;width:100%;min-width:520px}
th,td{padding:12px 15px;text-align:left;border-bottom:1px solid var(--line);font-size:1rem;vertical-align:top}
thead th{background:var(--indigo);color:#fff;font-family:var(--display);font-weight:700;font-size:.9375rem;letter-spacing:.02em}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even){background:var(--tint)}
.tnote{font-size:.9375rem;color:var(--ink-3);max-width:var(--measure-wide)}

.versus{display:grid;grid-template-columns:1.1fr 1fr 1.5fr;gap:0;border:1px solid var(--line-2);margin:0 0 18px}
.versus>div{padding:12px 15px;border-bottom:1px solid var(--line);font-size:1rem;background:var(--panel)}
.versus__h{background:var(--indigo);color:#fff;font-family:var(--display);font-weight:700;font-size:.9375rem}
.versus>div:nth-last-child(-n+3){border-bottom:0}

/* ---- ingredient cards --------------------------------------------------- */
.inglist{display:grid;gap:0}
.ingcard{border-top:1px solid var(--line-2);border-left:4px solid var(--amber);padding:22px 0 8px 22px}
.ingcard:last-child{border-bottom:1px solid var(--line-2);padding-bottom:22px}
.ingcard__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;margin-bottom:10px}
.ingcard__top h3{margin:0}
.ing__latin{font-style:italic;color:var(--ink-3);font-size:1rem}
.ing__dose{
  margin-left:auto;font-family:var(--display);font-size:.9375rem;color:#fff;
  background:var(--indigo);padding:3px 11px;
}
.ingcard>p:last-child{margin-bottom:0}

/* ---- pricing ------------------------------------------------------------ */
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}
.card--pack{
  position:relative;background:var(--panel);border:1px solid var(--line-2);
  border-left:4px solid var(--indigo);padding:0;display:flex;flex-direction:column;
}
.card--pack.featured{border-left-color:var(--amber);outline:2px solid var(--amber);outline-offset:-1px}
.pack__flag{
  position:absolute;top:-1px;right:-1px;background:var(--amber-d);color:#fff;
  font-family:var(--display);font-size:.8125rem;padding:5px 12px;letter-spacing:.03em;
}
.pack__head{background:var(--tint);border-bottom:1px solid var(--line);padding:16px 20px}
.pack__head b{display:block;font-family:var(--display);font-size:1.3rem;color:var(--indigo-d)}
.pack__head span{font-size:.9375rem;color:var(--ink-3)}
.pack__body{padding:20px;display:flex;flex-direction:column;flex:1 1 auto}
.pack__body img{margin:0 auto 14px;width:auto;max-height:168px}
.pack__per{font-family:var(--display);font-size:2.9rem;line-height:1;color:var(--indigo-d);margin:0;text-align:center}
.pack__per sup{font-size:1.15rem;vertical-align:super;color:var(--amber-d)}
.pack__unit{display:block;text-align:center;font-size:.9375rem;color:var(--ink-3);margin-bottom:12px}
.pack__tot{text-align:center;margin:0 0 14px;font-size:1.0625rem}
.pack__was{color:var(--ink-3);text-decoration:line-through;margin-left:8px}
.pack__perks{list-style:none;margin:0 0 18px;padding:0;flex:1 1 auto}
.pack__perks li{position:relative;padding-left:22px;font-size:.9688rem;margin-bottom:7px;color:var(--ink-2)}
.pack__perks li::before{content:"";position:absolute;left:0;top:.66em;width:10px;height:3px;background:var(--amber)}
.pack__marks{margin:10px 0 0;font-size:.875rem;color:var(--ink-3);text-align:center}
.buy__note{font-size:.9375rem;color:var(--ink-3);margin-top:18px;max-width:var(--measure-wide)}

/* ---- figures, seals ----------------------------------------------------- */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.shots.s2{grid-template-columns:repeat(2,minmax(0,1fr))}
.shots figure{margin:0}
.shots img{width:100%;height:auto;border:1px solid var(--line-2)}
.shots figcaption{padding-top:12px;border-top:3px solid var(--amber);margin-top:12px}
.shots figcaption b{display:block;font-size:1.0625rem;margin-bottom:5px}
.shots figcaption span{display:block;font-size:.9688rem;color:var(--ink-2);line-height:1.6}
figure.portrait{max-width:var(--figw,360px);margin-inline:auto}

.badgewall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.badgewall figure{margin:0;text-align:center}
.badgewall img{margin:0 auto 10px}
.badgewall b{display:block;font-size:1rem;margin-bottom:4px}
.badgewall span{display:block;font-size:.9375rem;color:var(--ink-2);line-height:1.55}

.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}
.stats b{display:block;font-family:var(--display);font-size:2.2rem;color:var(--amber-l);line-height:1.1}
.stats span{display:block;font-size:.9375rem;color:var(--on-dark);margin-top:6px;line-height:1.5}

.meter{max-width:var(--measure);margin:0 0 18px}
.meter__row{display:grid;grid-template-columns:78px 1fr 52px;gap:14px;align-items:center;margin-bottom:9px;font-size:.9688rem}
.meter__bar{display:block;height:12px;background:var(--tint);border:1px solid var(--line-2)}
.meter__bar i{display:block;height:100%;background:var(--amber)}

/* ---- Q & A -------------------------------------------------------------- */
.faq details{border-top:1px solid var(--line-2);padding:0}
.faq details:last-child{border-bottom:1px solid var(--line-2)}
.faq summary{
  cursor:pointer;list-style:none;padding:18px 40px 18px 0;position:relative;
  font-family:var(--display);font-size:1.12rem;color:var(--indigo-d);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:8px;top:14px;font-size:1.5rem;color:var(--amber-d)}
.faq details[open] summary::after{content:"\2013"}
.faq__body{padding:0 0 18px;max-width:var(--measure)}
.faq__body>*:last-child{margin-bottom:0}

.qa{border:1px solid var(--line-2);border-left:4px solid var(--indigo);background:var(--panel);padding:22px}
.qa>p:first-child{margin-top:0;max-width:var(--measure)}
.qa table{min-width:420px}

/* ---- related, final CTA, byline, refs ----------------------------------- */
.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;text-align:left}
.rel a{
  display:block;text-decoration:none;border-top:1px solid var(--line-2);
  border-left:4px solid var(--amber);padding:18px 0 18px 20px;color:var(--ink-2);
}
.rel a:hover{border-left-color:var(--indigo)}
.rel b{display:block;font-family:var(--display);font-size:1.1rem;color:var(--indigo-d);margin-bottom:6px}
.rel span{display:block;font-size:.9688rem;line-height:1.6}

.final{background:var(--indigo-d);color:var(--on-dark);padding:32px}
.final--media{display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px;align-items:center}
.final h2{color:#fff;margin-top:0}
.final p{color:var(--on-dark)}
.final b,.final strong{color:#fff}
.final__img img{width:100%;height:auto}
.final__price{font-family:var(--display);color:var(--amber-l);margin-bottom:18px}
.final__sm{font-size:.9375rem;color:var(--on-dark);margin:12px 0 0}
.final .btn{background:var(--amber-d)}
.final .btn:hover{background:var(--amber)}

.fcta{background:var(--tint);border-top:3px solid var(--amber);padding:44px 0}
.fcta__box{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:34px;align-items:center}
.fcta__eye{display:block;font-size:.9375rem;letter-spacing:.17em;text-transform:uppercase;color:var(--amber-d);margin-bottom:10px}
.fcta__h{font-family:var(--display);font-size:clamp(1.34rem,1.1rem + 1vw,1.9rem);color:var(--indigo-d);line-height:1.26;margin:0 0 12px}
.fcta__sm{font-size:.9375rem;color:var(--ink-3);margin:14px 0 0}
.fcta__img img{width:100%;height:auto}

.byline{display:grid;grid-template-columns:62px minmax(0,1fr);gap:18px;border-top:1px solid var(--line-2);padding-top:22px;margin-top:26px;max-width:var(--measure-wide)}
.byline__mark{
  width:62px;height:62px;background:var(--indigo);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:1.32rem;letter-spacing:.02em;
}
.byline b{display:block;margin-bottom:8px;font-size:1.06rem}
.byline p{font-size:1rem;color:var(--ink-2);margin:0}

.refs ol{margin:0;padding-left:22px;max-width:var(--measure-wide)}
.refs li{font-size:.9688rem;color:var(--ink-2);margin-bottom:11px;line-height:1.62;word-break:break-word}
.refs a{word-break:break-all}

.crumbs{font-size:.9375rem;color:var(--ink-3);margin:0 0 14px}
.crumbs a{color:var(--ink-2)}

.phead{padding:38px 0 34px;background:var(--panel);border-bottom:1px solid var(--line)}
.phead h1{margin:0 0 16px;max-width:var(--measure-wide)}
.phead .answer{max-width:var(--measure-wide)}
.lead{font-size:1.14rem;color:var(--ink-2);max-width:var(--measure-wide);margin:0}

/* ---- forms -------------------------------------------------------------- */
.formgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:var(--measure-wide)}
.field{display:flex;flex-direction:column;gap:6px}
.field--wide{grid-column:1/-1}
.field label{font-size:.9688rem;color:var(--ink-2)}
.field input,.field select,.field textarea{
  font-family:var(--text);font-size:17px;padding:13px 14px;
  border:1px solid var(--line-2);background:var(--panel);color:var(--ink);border-radius:var(--radius);
}
.field textarea{min-height:150px}

/* ---- blog --------------------------------------------------------------- */
.article{max-width:var(--measure);margin-inline:auto}
.article h2{margin-top:1.5em}
.article .final--media{grid-template-columns:150px minmax(0,1fr);gap:20px;padding:24px}
.article .final h2{font-size:1.36rem;margin-top:0}
.postmeta{font-size:.9688rem;color:var(--ink-3);margin:0 0 20px}
.toc{border-top:1px solid var(--line-2);border-left:4px solid var(--indigo);background:var(--panel);padding:18px 22px;margin:0 0 28px}
.toc b{display:block;margin-bottom:8px}
.toc ol{margin:0;padding-left:20px}
.toc li{margin-bottom:5px;font-size:1rem}
.posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.posts article{border-top:1px solid var(--line-2);border-left:4px solid var(--amber);padding:20px 0 4px 22px}
.posts h3{margin:0 0 8px}
.posts h3 a{text-decoration:none;color:var(--indigo-d)}
.posts h3 a:hover{color:var(--amber-d)}
.posts p{font-size:1rem;color:var(--ink-2)}
figure{margin:0 0 24px}
figure img{width:100%;height:auto;border:1px solid var(--line-2)}
figcaption{font-size:.9375rem;color:var(--ink-3);padding-top:10px;line-height:1.6}

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

/* ---- buy bar ------------------------------------------------------------ */
/* Present and laid out at EVERY width. A `display:none` here with a
   `display:flex` only inside a phone query leaves the desktop with no bottom
   CTA at all, and the direction classes then land on an element that never
   renders (house rule 8). */
.buybar{
  position:fixed;left:0;right:0;bottom:0;z-index:120;
  background:var(--indigo-d);color:var(--on-dark);
  border-top:3px solid var(--amber);
  transform:translateY(105%);transition:transform .28s ease;
}
.buybar.show{transform:translateY(0)}
.buybar__in{
  width:100%;max-width:var(--wrap);margin-inline:auto;padding:12px var(--gut);
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.buybar__t{flex:1 1 320px;line-height:1.36}
.buybar__t b{display:block;color:#fff;font-size:1.06rem}
.buybar__t span{font-size:.9375rem;color:var(--on-dark)}
.buybar .btn{background:var(--amber-d);min-height:48px;padding:12px 26px}
.buybar .btn:hover{background:var(--amber)}

/* ---- responsive: the phone hero is a stack ------------------------------ */
@media(max-width:1080px){
  .figures{gap:14px}
  .fcta__box{grid-template-columns:minmax(0,1fr) 240px}
}
@media(max-width:980px){
  /* The desktop band lies across the bottom of the hero and the copy sheet
     sits ON it. Stacked, that band would fall behind the CTA, the fact pills
     and the figures, which are dark text — so the band moves onto the media
     column instead and bleeds the gutter there. Same idea, one column. */
  .hero{padding:24px 0 36px}
  .hero::before,.hero::after{display:none}
  .hero__grid{grid-template-columns:1fr;gap:20px}
  .hero__copy{display:contents}
  .hero__copy>.eyebrow{order:1}
  .hero h1{order:2}
  .hero__copy>.answer{order:3}
  .hero__media{
    order:4;margin:4px calc(var(--gut) * -1) 6px;
    padding:26px var(--gut) 30px;
    background:linear-gradient(180deg,var(--indigo) 0%,var(--indigo-d) 100%);
    border-top:3px solid var(--amber);
  }
  .hero__road{order:5}
  .hero__cta{order:6}
  .hero__sub{order:7}
  .factpills{order:8}
  .figures{order:9}
  .split{grid-template-columns:1fr;gap:24px}
  .split--flip .split__img,.split--flip .split__body{order:0}
  .g3,.g4,.prices,.rel,.shots,.stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .badgewall{grid-template-columns:repeat(3,minmax(0,1fr))}
  .final--media{grid-template-columns:1fr}
  .fcta__box{grid-template-columns:1fr}
  .fcta__img{max-width:260px}
  .nav__price{display:none}
}
@media(max-width:820px){
  .g2,.steps,.posts,.shots.s2,.formgrid{grid-template-columns:1fr}
  .versus{grid-template-columns:1fr}
  .versus__h:nth-child(2),.versus__h:nth-child(3){display:none}
  .versus>div{border-bottom:0}
  .versus>div:nth-child(3n+1){background:var(--tint);font-family:var(--display);color:var(--indigo-d)}
  .versus>div:nth-child(3n){border-bottom:1px solid var(--line-2)}
  .byline{grid-template-columns:1fr}
}
@media(max-width:760px){
  body{font-size:17px}
  .sec{padding:42px 0}
  /* The topline's five facts wrap to five rows at 390 and eat 180px before the
     eyebrow. Two of them carry --trim for exactly this: the lot and the dose
     are both repeated in the hero caption a screen below, so the phone keeps
     the role, the guarantee and the phone number. Measured at 390: 180px to
     108px. */
  .util__item--trim{display:none}
  .util__row{gap:4px 18px;padding-block:8px}
  .hero__copy{padding:22px 20px 24px}
  .g3,.g4,.prices,.rel,.shots,.stats{grid-template-columns:1fr}
  .badgewall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .figures{grid-template-columns:1fr;gap:12px}
  .figures div{display:flex;align-items:baseline;gap:12px}
  .figures b{font-size:1.36rem}
  .burger{display:block}
  .nav__buy{display:none}
  .menu{display:none;flex-direction:column;align-items:stretch;padding:12px 0;overflow:visible}
  .menu.open{display:flex}
  .menu li{width:100%}
  .menu a{display:block;width:100%;border-radius:var(--radius);text-align:left}
  .buybar__in{padding:10px var(--gut);gap:10px}
  .buybar__t b{font-size:1rem}
  .final{padding:24px}
}
@media(max-width:420px){
  :root{--gut:16px}
  .buybar .btn{width:100%}
}
/* --- 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 -- lamp-warm ---------------------------------------- */
.hero{position:relative;overflow-x:clip;overflow-y:visible}
:where(.hero__media){position:relative}
.hero__card{position:relative;z-index:2}
.hero__card img{position:relative;z-index:3}
.hero{background:radial-gradient(104% 80% at 70% 16%,#f0cba2,#f7f1e4 54%,#f7f1e4)}.hero__media::before{content:'';position:absolute;left:50%;top:58%;width:168%;aspect-ratio:1.28;translate:-50% -50%;border-radius:50%;z-index:0;pointer-events:none;background:radial-gradient(closest-side,rgba(224,122,22,0.44),transparent 74%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 32%);mask-image:linear-gradient(90deg,transparent 0,#000 32%);animation:sslLamp 11s cubic-bezier(.32,.72,.36,1) infinite}.hero__media::after{content:'';position:absolute;left:50%;top:54%;width:176%;aspect-ratio:1.75;translate:-50% -50%;border-radius:50%;z-index:0;pointer-events:none;border:2px solid rgba(224,122,22,0.46);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 40%);mask-image:linear-gradient(90deg,transparent 0,#000 40%);animation:sslHalo 19s ease-in-out infinite}@keyframes sslLamp{0%{opacity:.10;transform:scale(.84)}18%{opacity:.68;transform:scale(1.02)}62%{opacity:.60;transform:scale(1)}100%{opacity:.10;transform:scale(.84)}}@keyframes sslHalo{0%,100%{opacity:.14;transform:scale(.93)}46%{opacity:.46;transform:scale(1.05)}}
@media(prefers-reduced-motion:reduce){.hero__card{animation:none!important}.hero__media::before,.hero__media::after{animation:none!important;opacity:0!important}}

/*!CRITICAL-END*/

/* ---- below the fold ----------------------------------------------------- */
.sec--wedge{background:linear-gradient(180deg,var(--paper),var(--tint))}
.disc__list{margin:0;padding-left:20px}
.tnote a{word-break:break-word}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- footer: four short ranks, the seals on a rule beneath them ---------- */
/* House rule 10 is built in here rather than patched on: nothing in this
   footer is set below 16px, and the rank headings sit at 16px as well. */
footer{background:var(--indigo-d);color:var(--on-dark);padding:48px 0 0;font-size:16px}
footer p,footer li,footer a,footer span{font-size:16px;line-height:1.7}
footer a{color:#fff;text-decoration:underline;text-underline-offset:3px}
footer a:hover{color:var(--amber-l)}
footer b,footer strong{color:#fff;font-family:var(--display)}

.fgrid{display:grid;grid-template-columns:1.35fr repeat(4,minmax(0,1fr));gap:30px}
.fcard{border-left:4px solid var(--amber);padding-left:20px}
.fbrand{font-family:var(--display);font-size:1.6rem;color:#fff;margin-bottom:6px}
.fbrand span{color:var(--amber-l)}
.frole{color:var(--on-dark);margin-bottom:16px;font-size:16px}
.fcard p{margin-bottom:14px}
.fh{
  font-family:var(--text);font-size:16px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber-l);margin:0 0 12px;
}
.fgrid ul{list-style:none;margin:0 0 20px;padding:0}
.fgrid li{margin-bottom:9px}
.fgrid li a{text-decoration:none}
.fgrid li a:hover{text-decoration:underline}

/* the seals, on a rule beneath the ranks */
.fseals{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;
  border-top:1px solid rgba(243,236,224,.28);margin-top:26px;padding:22px 0;
}
.fseals img{filter:none}
.fseals span{flex:1 1 260px;font-size:16px;color:var(--on-dark)}
.fpay{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;
  border-top:1px solid rgba(243,236,224,.28);padding:20px 0 26px;
}
.fpay span{flex:1 1 260px;font-size:16px;color:var(--on-dark)}

.disc{background:#101a39;padding:26px 0 30px}
.disc p,.disc li{color:#d8d2c6;font-size:16px;line-height:1.66}
.disc a{color:#fff}
.disc__list li{margin-bottom:7px}
.copy{margin:16px 0 0;font-size:16px;color:#c6c0b4}

@media(max-width:1080px){
  .fgrid{grid-template-columns:1.2fr repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .fgrid{grid-template-columns:1fr}
  footer{padding-top:36px}
  /* nothing here lowers a size: house rule 10 says the floor is never lowered */
}


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

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

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

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

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

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

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

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

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

/* ==== modern surface (modern_surface.py) ==== */
/* House rule 11. This stylesheet had 2 box-shadow declaration(s)
   and 0 of them layered, so every panel read flat however generous
   the radius was. Two stops -- a tight contact shadow and a wide
   ambient one -- is what makes a surface look raised. The tint is
   this site's own ink (29,35,51), not neutral black.

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

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

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

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