/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Abril Fatface Fallback";src:local("Georgia");font-weight:400;size-adjust:104.25%;ascent-override:101.48%;descent-override:27.91%;line-gap-override:0.00%}
@font-face{font-family:"Alata Fallback";src:local("Arial");font-weight:400;size-adjust:103.05%;ascent-override:106.75%;descent-override:27.17%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* saodaslim.com — SodaSlim, U.S. authorized retailer desk.
   Design slot: batch11_assignments.py row 273.

   Six levers, all of them declared rather than inherited:
     Type    Abril Fatface display over Alata text. A didone with hairline
             serifs and one weight only, set large, over a wide geometric
             sans. Nothing else on the estate pairs a display didone with a
             humanist geometric.
     Layout  hero copy left, product right; every section full width with a
             centred measure, so the page reads as one column of argument.
     Cards   hairline border, SQUARE corners, no fill. The card is a ruled
             box on the paper, not a panel floating over it.
     Depth   no box-shadow anywhere on this site. Separation comes from the
             rule and from the ground alone.
     Ground  warm ivory paper, FLAT. No gradient on any section band.
     Motion  the honey-cell motif, written in hero_motifs.py.

   Header: one ivory plate whose left edge carries a vertical amber bar beside
   the name. Footer: three ranked columns above a payment strip and one legal
   line. Colour is taken from the bottle — the amber sunburst, the navy cap
   band — and nowhere else.

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

/* ---- tokens */
:root{
  --ink:#231c11;            /* body text on ivory */
  --ink-2:#55483a;          /* secondary */
  --ink-3:#7a6b59;          /* captions, meta */
  --navy:#123a6b;           /* the cap band */
  --navy-d:#0e2b52;         /* deep */
  --navy-2:#1b4d86;
  --amber:#f0a01e;          /* the label sunburst */
  --amber-d:#b45f05;        /* amber dark enough to carry white text */
  --amber-l:#fbe3b4;
  --wash:#fdf1d9;           /* amber wash */
  --paper:#fbf5e9;          /* the page: warm ivory */
  --panel:#fffdf7;
  --tint:#f5ecd9;
  --line:#ddd0b6;
  --line-2:#c3b294;
  --good:#1d6b45;
  --warn:#8a4b0c;
  --wrap:1180px;
  --measure:740px;
  --measure-wide:960px;
  --radius:0px;
  --radius-lg:0px;
  --shadow:none;
  --shadow-lg:none;
  --navh:104px;
  --display:"Abril Fatface","Abril Fatface Fallback",Georgia,"Times New Roman",serif;
  --text:"Alata","Alata Fallback",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(--navy);text-underline-offset:3px}
a:hover{color:var(--amber-d)}
h1,h2,h3,h4{font-family:var(--display);color:var(--navy-d);font-weight:400;line-height:1.1;margin:0 0 .5em}
h1{font-size:clamp(2.02rem,1.3rem + 2.2vw,3.05rem);letter-spacing:-.005em}
h2{font-size:clamp(1.62rem,1.25rem + 1.35vw,2.38rem);letter-spacing:-.004em}
h3{font-family:var(--text);font-size:1.16rem;font-weight:700;letter-spacing:.005em;color:var(--navy-d)}
h4{font-family:var(--text);font-size:1.02rem;font-weight:700;color:var(--navy-d)}
p,li{font-size:1.0625rem}
p{margin:0 0 1.05em}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
.skip{position:absolute;left:-9999px;top:0;background:var(--navy-d);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--amber-d);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:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--amber-d);
  margin:0 0 9px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--amber-d)}

/* ---- buttons: an amber plate carrying navy text, square, no shadow.
   White on this amber measures 2.5:1. Navy on it measures 6.5:1, which is
   why the primary button on this site is dark-on-amber rather than the
   usual white-on-accent. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:56px;padding:15px 32px;
  font-family:var(--text);font-size:1rem;font-weight:700;letter-spacing:.02em;
  border:1px solid var(--navy-d);border-radius:0;cursor:pointer;text-decoration:none;
  background:var(--navy-d);color:#fff;
  transition:background .18s ease,color .18s ease;
}
.btn:hover{background:var(--navy-2);color:#fff;border-color:var(--navy-2)}
.btn--amber{background:var(--amber);color:var(--navy-d);border-color:var(--navy-d)}
.btn--amber:hover{background:#ffb534;color:var(--navy-d);border-color:var(--navy-d)}
.btn--lg{min-height:64px;padding:18px 38px;font-size:1.08rem}
.btn--ghost{background:none;color:var(--navy-d);border:1px solid var(--line-2)}
.btn--ghost:hover{background:var(--tint);color:var(--navy-d);border-color:var(--navy-d)}
.btn--wide{width:100%}

/* ---- header: ONE ivory plate, an amber bar down its left edge */
.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
   `padding:14px 0` would set padding-inline to 0 and wipe the page gutter
   (pitfall 46). */
.nav__top{display:flex;align-items:center;gap:20px;padding-block:14px}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--navy-d);
  position:relative;padding-left:20px}
/* the vertical accent bar at the plate's left edge */
.brand::before{content:"";position:absolute;left:0;top:-4px;bottom:-4px;width:6px;background:var(--amber)}
.brand__glyph{width:36px;height:36px;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 class="brand__glyph" onto the
   replacement, so a rule keyed only to that class stops applying the moment
   the tool runs and the glyph renders at its intrinsic size (pitfall 16). */
.brand>svg{width:36px;height:36px;flex:0 0 auto}
.bw{display:flex;flex-direction:column;line-height:1.06}
.bw b{font-family:var(--display);font-size:1.46rem;font-weight:400;letter-spacing:0}
.bw b em{font-style:normal;color:var(--amber-d)}
.bw small{font-size:0.9062rem;font-weight:400;color:var(--ink-3);letter-spacing:.01em}
.nav__rail{margin-left:auto;display:flex;align-items:center;gap:18px}
.nav__price{text-align:right;line-height:1.2}
.nav__price b{display:block;font-family:var(--display);font-size:1.22rem;font-weight:400;color:var(--navy-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:0;cursor:pointer;padding:12px 11px;
}
.burger span{display:block;height:2px;background:var(--navy-d);margin:0 0 5px}
.burger span:last-child{margin:0}
/* the menu row, inside the same plate, divided by a rule rather than a fill */
.nav__strip{border-top:1px solid var(--line)}
.menu{
  display:flex;flex-wrap:wrap;gap:0 26px;list-style:none;margin:0;padding:0;
  align-items:center;min-height:44px;
}
.menu a{
  display:inline-block;padding:11px 0;font-family:var(--text);
  font-size:.9375rem;font-weight:400;color:var(--ink-2);text-decoration:none;
  border-bottom:2px solid transparent;
}
.menu a:hover{color:var(--navy-d)}
.menu a[aria-current="page"]{color:var(--navy-d);border-bottom-color:var(--amber)}
.menu__more{display:none}

/* ---- hero: copy LEFT, the bottle RIGHT on flat ivory */
.hero{position:relative;background:var(--paper);padding:36px 0 52px;overflow-x:clip}
.hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:46px;align-items:center}
.hero__copy{display:flex;flex-direction:column;min-width:0}
.hero h1{margin:0 0 14px}
.hero h1 em{font-style:normal;color:var(--amber-d)}
.answer{
  background:var(--panel);border:1px solid var(--line);
  border-left:5px solid var(--amber);border-radius:0;
  padding:18px 22px;margin:0 0 15px;
}
.answer p{margin:0 0 .75em;font-size:1.062rem}
.answer p:last-child{margin:0}
.hero__road{font-size:1rem;color:var(--ink-2);margin:0 0 15px;max-width:62ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 20px}
.hero__sub{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 0 18px;font-size:0.9688rem;color:var(--ink-2)}
.hero__sub span{display:inline-flex;align-items:center;gap:7px}
.hero__sub span::before{content:"\2713";color:var(--good);font-weight:700}
.factpills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 18px;padding:0}
.factpills li{
  font-size:0.9062rem;color:var(--ink-2);background:var(--panel);
  border:1px solid var(--line);padding:7px 14px;border-radius:0;
}
.factpills li b{color:var(--navy-d);font-weight:700}
.figures{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0;border:1px solid var(--line)}
.figures div{background:transparent;padding:14px 16px;border-right:1px solid var(--line)}
.figures div:last-child{border-right:0}
.figures b{display:block;font-family:var(--display);font-size:1.62rem;font-weight:400;color:var(--navy-d);line-height:1.08}
.figures span{display:block;font-size:0.9062rem;color:var(--ink-3);margin-top:4px}
.hero__media{position:relative;align-self:center}
.hero__card{position:relative;z-index:2;text-align:center;padding:10px}
.hero__card img{width:100%;max-width:430px;height:auto;margin-inline:auto}
.hero__cap{margin:14px 0 0;font-size:.875rem;color:var(--ink-3);text-align:center}
.trust__row{display:flex;flex-wrap:wrap;gap:10px 22px;margin:0;padding:0;list-style:none;font-size:0.9062rem;color:var(--ink-2)}
.trust__row li{display:inline-flex;align-items:center;gap:8px}
.trust__row li::before{content:"\2713";color:var(--good);font-weight:700}

/* ---- inner page head */
.phead{padding:34px 0 12px;background:var(--panel);border-bottom:1px solid var(--line)}
.crumbs{font-size:0.9062rem;color:var(--ink-3);margin:0 0 14px}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--amber-d)}
.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)}

/* ---- topline strip: the five facts a buyer wants before reading anything,
   above the navigation, so the menu does not have to carry them. */
.util{background:var(--navy-d);color:#c2d2e6;font-size:.8438rem;line-height:1.5}
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;padding-block:9px}
.util__item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.util__item+.util__item::before{content:"";width:5px;height:5px;
  background:var(--amber);flex:0 0 auto;margin-right:11px}
.util b{color:#fff;font-weight:700}
.util a{color:inherit;text-decoration:none}
.util a:hover{text-decoration:underline}
@media (max-width:760px){
  /* Five items wrap to three lines on a phone. Keep role, guarantee, phone. */
  .util__item--trim{display:none}
  .util__row{gap:4px 14px}
}

/* --- hero responsive rules, copied above the marker by critical_hero.py
   so a phone does not paint the desktop hero and then relay it. */
@media (max-width:980px){
  .hero__grid{grid-template-columns:1fr;gap:26px}
  .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:6px 0 20px}
  .answer{order:4}
  .hero__road{order:5}
  .hero__cta{order:6}
  .hero__sub{order:8}
  .factpills{order:10}
  .figures{order:11}
}
@media (max-width:760px){
  .hero{padding:34px 0 42px}
}
/* --- hero responsive rules, copied into the critical block
   A phone painted the desktop hero from the inline block and then
   jumped when the async sheet arrived -- 692px on one site, CLS 0.95.
   These are COPIES: the originals stay below, so the cascade is
   unchanged and the first paint is already correct. */
@media (max-width:980px){
  .hero__grid{grid-template-columns:1fr;gap:26px}
  .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:6px 0 20px}
  .hero__road{order:5}
  .hero__cta{order:6}
  .hero__sub{order:8}
}
@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 -- honey-cell ---------------------------------------- */
.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:#fbf5e9}.hero__media::before{content:'';position:absolute;left:50%;top:50%;width:112%;aspect-ratio:.86;translate:-50% -50%;z-index:0;pointer-events:none;background-image:repeating-linear-gradient(60deg,rgba(240,160,30,0.30) 0 1px,transparent 1px 34px),repeating-linear-gradient(-60deg,rgba(240,160,30,0.30) 0 1px,transparent 1px 34px),repeating-linear-gradient(0deg,rgba(240,160,30,0.30) 0 1px,transparent 1px 34px);-webkit-mask-image:radial-gradient(closest-side,#000 16%,rgba(0,0,0,.5) 46%,transparent 80%);mask-image:radial-gradient(closest-side,#000 16%,rgba(0,0,0,.5) 46%,transparent 80%);animation:ssCells 26s linear infinite}.hero__media::after{content:'';position:absolute;left:50%;top:50%;width:112%;aspect-ratio:1;translate:-50% -50%;z-index:0;pointer-events:none;background:rgba(156,104,20,0.40);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%,50% 0,50% 3.2%,5.5% 26.6%,5.5% 73.4%,50% 96.8%,94.5% 73.4%,94.5% 26.6%,50% 3.2%);animation:ssDraw 9s cubic-bezier(.4,0,.3,1) infinite}@keyframes ssCells{to{background-position:0 -68px,0 -68px,0 -68px}}@keyframes ssDraw{0%,100%{transform:scale(1.04);opacity:.28}46%{transform:scale(.88);opacity:.70}64%{transform:scale(.90);opacity:.62}}
@media(prefers-reduced-motion:reduce){.hero__card{animation:none!important}.hero__media::before,.hero__media::after{animation:none!important;opacity:0!important}}

/*!CRITICAL-END*/

/* ---- sections: full width, one centred measure, separated by rules only */
.sec{padding:60px 0;position:relative;border-top:1px solid var(--line)}
.sec--tint{background:var(--tint)}
.sec--panel{background:var(--panel)}
.sec--dark{background:var(--navy-d);color:#dde6f1;border-top-color:var(--navy-d)}
.sec--dark h2,.sec--dark h3,.sec--dark h4{color:#fff}
.sec--dark p,.sec--dark li{color:#c9d7e6}
.sec--dark .eyebrow{color:#f0b957}
.sec--dark .eyebrow::before{background:#f0b957}
.sec--dark a{color:#ffd08a}
.sec--center{text-align:center}
.sec--center .sec__head{margin-inline:auto}
.sec__head{max-width:var(--measure);margin:0 0 28px}
.sec__head h2{margin:0 0 10px}
.sec__head p{color:var(--ink-2);margin:0}
.sec--dark .sec__head p{color:#c9d7e6}

/* one measure, centred; multi-column components keep the full wrap */
@media (min-width:1060px){
  .sec>.wrap>h2,.sec>.wrap>h3,.sec>.wrap>h4,.sec>.wrap>p,
  .sec>.wrap>ul,.sec>.wrap>ol,.sec>.wrap>.sec__head,.sec>.wrap>.callout,
  .sec>.wrap>.alert,.sec>.wrap>.byline,.sec>.wrap>.refs,.sec>.wrap>.pullquote,
  .sec>.wrap>blockquote{max-width:var(--measure);margin-inline:auto}
  .sec>.wrap>.tablewrap,.sec>.wrap>.faq,.sec>.wrap>.steps{
    max-width:var(--measure-wide);margin-inline:auto}
}

/* ---- lists */
.ticks{list-style:none;margin:0 0 1.1em;padding:0}
.ticks li{position:relative;padding-left:28px;margin:0 0 .5em}
.ticks li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--good);font-weight:700}
.sec--dark .ticks li::before{color:#7fd6ab}

/* ---- tables: ruled, never boxed in */
.tablewrap{overflow-x:auto;margin:0 0 1.2em;border:1px solid var(--line);background:var(--panel)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:1rem}
th,td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--text);font-weight:700;color:#fff;background:var(--navy-d);font-size:.9375rem;
  letter-spacing:.03em}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--navy-d)}
.tnote{font-size:.9375rem;color:var(--ink-3);margin:-.4em 0 1.2em}

/* ---- numbered steps: the number sits in the margin, no box */
.steps{display:grid;gap:0;margin:0 0 1.2em;counter-reset:s;border-top:1px solid var(--line)}
.step{position:relative;background:transparent;border-bottom:1px solid var(--line);
  padding:22px 0 20px 66px}
.step::before{
  counter-increment:s;content:counter(s);
  position:absolute;left:0;top:20px;width:44px;height:44px;
  display:grid;place-items:center;
  border:1px solid var(--navy-d);color:var(--navy-d);background:transparent;
  font-family:var(--display);font-weight:400;font-size:1.22rem;
}
.step h3{margin:0 0 6px}
.step p:last-child{margin:0}

/* ---- cards: hairline rule, square, no fill, no shadow */
.grid{display:grid;gap:18px}
.grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{position:relative;background:transparent;border:1px solid var(--line);border-radius:0;
  padding:24px 22px 22px}
.card h3{margin:0 0 8px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.sec--dark .card{border-color:#2c4f7f}
.sec--tint .card,.sec--panel .card{background:transparent}

/* ---- callout, alert, quote, keypoints */
.callout{background:var(--wash);border:1px solid var(--amber-l);border-radius:0;padding:20px 22px;margin:0 0 1.2em}
.callout b:first-child{display:block;margin-bottom:6px;color:var(--navy-d)}
.callout p:last-child{margin:0}
.alert{background:var(--panel);border:1px solid var(--line);border-left:5px solid var(--warn);
  border-radius:0;padding:20px 22px;margin:0 0 1.2em}
.alert b:first-child{display:block;margin-bottom:6px;color:var(--warn)}
.alert p:last-child{margin:0}
.pullquote{font-family:var(--display);font-size:1.42rem;font-weight:400;line-height:1.44;color:var(--navy-d);
  border-left:5px solid var(--amber);padding:6px 0 6px 24px;margin:0 0 1.2em}
.pullquote cite{display:block;font-family:var(--text);font-size:.9375rem;font-style:normal;color:var(--ink-3);margin-top:10px}
.keypoints{background:transparent;border:1px solid var(--line);border-top:4px solid var(--navy-d);
  border-radius:0;padding:20px 22px;margin:0 0 1.2em}
.keypoints>b{display:block;margin-bottom:8px;color:var(--navy-d)}
.keypoints ul{margin:0;padding-left:20px}

/* ---- image beside copy */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:center;margin:0 0 1.2em}
.split--flip .split__img{order:2}
/* A grid item's default min-width is auto, which floors at MIN-CONTENT, and a
   .tablewrap holding a 520px-min table keeps its column 520px wide however
   narrow the grid is (pitfall: measured at 390, a 350px grid resolved a 522px
   column and the right half was clipped away with nothing to scroll). */
.split__img,.split__body{min-width:0}
.split__img img{width:100%;border:1px solid var(--line);background:var(--panel)}
.split__body p:last-child{margin:0}

/* ---- stat band */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;text-align:center}
.stats div{padding:6px 14px;border-right:1px solid #2c4f7f}
.stats div:last-child{border-right:0}
.stats div b{display:block;font-family:var(--display);font-size:2.3rem;font-weight:400;color:#fff;line-height:1.08}
.stats div span{display:block;font-size:.9375rem;color:#a9bdd4;margin-top:6px}

/* ---- label versus research */
.versus{display:grid;grid-template-columns:1.1fr 1fr 1.25fr;border:1px solid var(--line);
  background:var(--panel);margin:0 0 1.2em}
.versus>div{padding:13px 16px;border-bottom:1px solid var(--line);font-size:.98rem}
.versus>div:nth-child(3n+1){font-weight:700}
.versus__h{background:var(--navy-d)!important;color:#fff;font-family:var(--text);font-weight:700;font-size:.92rem;
  letter-spacing:.03em}

/* ---- ingredient cards */
.inglist{display:grid;gap:0;border-top:1px solid var(--line)}
/* Same family as the .split fix: .ingcard is a grid ITEM and .ing__dose is
   nowrap, so without min-width:0 the longest chip sets the column's floor. */
.inglist>*{min-width:0}
.ingcard{background:transparent;border-bottom:1px solid var(--line);padding:26px 0 22px}
.ingcard__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;margin:0 0 12px}
.ingcard__top h3{margin:0;font-family:var(--display);font-weight:400;font-size:1.5rem}
.ing__latin{font-size:.9375rem;font-style:italic;color:var(--ink-3)}
.ing__dose{margin-left:auto;font-size:.9375rem;font-weight:700;color:var(--navy-d);
  border:1px solid var(--line-2);padding:4px 12px;white-space:nowrap}
.ingcard p:last-child{margin:0}

/* ---- add-to-cart pricing panel */
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch;margin:0 0 20px}
.card--pack{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);
  border-radius:0;position:relative}
/* No lift on the featured card: a margin-top would make it taller than its
   siblings and break the shared button baseline. It is already unmistakable
   from its amber rule, its head band and its flag. */
.card--pack.featured{border-color:var(--navy-d);border-width:2px}
.pack__head{border-bottom:1px solid var(--line);padding:14px 20px;display:flex;align-items:center;gap:10px}
.card--pack.featured .pack__head{background:var(--navy-d);border-bottom-color:var(--navy-d)}
.card--pack.featured .pack__head b,.card--pack.featured .pack__head span{color:#fff}
.pack__head b{font-family:var(--display);font-size:1.22rem;font-weight:400;color:var(--navy-d)}
.pack__head span{font-size:.8125rem;color:var(--ink-3);margin-left:auto}
.pack__flag{position:absolute;right:0;top:0;background:var(--amber);color:var(--navy-d);
  font-family:var(--text);font-size:0.8438rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:5px 13px;z-index:3}
.pack__body{display:flex;flex-direction:column;flex:1;padding:20px 20px 22px}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,168px);object-fit:contain;margin-inline:auto;margin-bottom:14px}
.pack__per{font-family:var(--display);font-size:2.5rem;font-weight:400;color:var(--navy-d);line-height:1;text-align:center}
.pack__per sup{font-size:1rem;top:-.85em}
.pack__unit{display:block;text-align:center;font-size:.875rem;color:var(--ink-3);margin:6px 0 12px}
.pack__tot{display:flex;align-items:baseline;justify-content:center;gap:9px;margin:0 0 14px;font-size:1rem}
.pack__tot b{font-weight:700;color:var(--navy-d)}
.pack__was{color:var(--ink-3);text-decoration:line-through}
.pack__perks{list-style:none;margin:0 0 18px;padding:0;font-size:.9375rem}
.pack__perks li{position:relative;padding-left:24px;margin:0 0 6px;color:var(--ink-2)}
.pack__perks li::before{content:"\2713";position:absolute;left:0;color:var(--good);font-weight:700}
.card--pack>.pack__body>.btn{margin-top:auto}
.pack__marks{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:center;margin:12px 0 0;font-size:.8125rem;color:var(--ink-3)}
.buy__note{font-size:.9375rem;color:var(--ink-3);text-align:center;margin:0}

/* ---- captioned images */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0 0 1.2em}
.shots.s2{grid-template-columns:repeat(2,minmax(0,1fr))}
.shots figure{margin:0;background:transparent;border:1px solid var(--line)}
.shots img{width:100%}
.shots figcaption{padding:16px 18px;border-top:1px solid var(--line)}
.shots figcaption b{display:block;margin-bottom:5px;color:var(--navy-d)}
.shots figcaption span{font-size:.9375rem;color:var(--ink-2)}
figure.portrait img{width:var(--figw,320px);margin-inline:auto}

/* ---- seal wall */
.badgewall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0 0 1.2em;
  border:1px solid var(--line)}
.badgewall figure{margin:0;text-align:center;background:transparent;border-right:1px solid var(--line);
  padding:20px 16px}
.badgewall figure:last-child{border-right:0}
.badgewall img{width:74px;height:74px;object-fit:contain;margin:0 auto 10px}
.badgewall b{display:block;font-size:.98rem;margin-bottom:4px;color:var(--navy-d)}
.badgewall span{font-size:.875rem;color:var(--ink-2)}

/* ---- star distribution */
.meter{margin:0 0 1.2em}
.meter__row{display:grid;grid-template-columns:76px 1fr 52px;gap:12px;align-items:center;margin:0 0 8px;font-size:.9375rem}
.meter__bar{height:10px;background:var(--tint);border:1px solid var(--line);overflow:hidden}
.meter__bar i{display:block;height:100%;background:var(--amber)}
.stars{color:#c88a10;letter-spacing:1px}
.stars i{font-style:normal;opacity:.34}

/* ---- FAQ. Padding on <summary>, which is the click target. */
.faq{border:1px solid var(--line);background:var(--panel);margin:0 0 1.2em}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{padding:17px 48px 17px 20px;cursor:pointer;position:relative;list-style:none;
  font-family:var(--text);font-weight:700;font-size:1.06rem;color:var(--navy-d)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;translate:0 -50%;
  font-size:1.34rem;font-weight:400;color:var(--amber-d)}
.faq details[open] summary::after{content:"\2212"}
.faq__body{padding:0 20px 18px}
.faq__body p:last-child,.faq__body ul:last-child{margin-bottom:0}

/* ---- references and byline */
.refs{margin:0 0 1.2em}
.refs ol{padding-left:22px;margin:0}
.refs li{font-size:1.062rem;color:var(--ink-2);margin:0 0 .6em}
/* The reference list prints each source's full URL as link TEXT, and a URL is
   one unbreakable token; `anywhere` also lowers the element's min-content so
   the ancestor is not sized by the longest URL in the list. */
.refs li,.refs li a{overflow-wrap:anywhere}
.byline{display:flex;gap:18px;background:transparent;border:1px solid var(--line);
  border-left:5px solid var(--amber);border-radius:0;padding:22px 24px;margin:0 0 1.2em}
.byline__mark{flex:0 0 auto;width:56px;height:56px;display:grid;place-items:center;
  border:1px solid var(--navy-d);color:var(--navy-d);font-family:var(--display);font-weight:400;
  font-size:1.2rem}
.byline b{display:block;margin-bottom:6px;color:var(--navy-d)}
.byline p{font-size:.9688rem;color:var(--ink-2);margin:0}

/* ---- closing CTA */
.final{background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--amber);
  border-radius:0;padding:30px 32px}
.final--media{display:grid;grid-template-columns:auto minmax(0,1fr);gap:30px;align-items:center}
.final__img img{width:210px}
.final h2{margin:0 0 10px}
.final__price{color:var(--ink-2)}
.final__sm{font-size:.9375rem;color:var(--ink-3);margin:12px 0 0}

/* ---- related */
.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;text-align:left}
.rel a{display:block;background:transparent;border:1px solid var(--line);border-radius:0;
  padding:20px 22px;text-decoration:none;color:var(--ink);transition:border-color .18s ease}
.rel a:hover{border-color:var(--navy-d)}
.rel b{display:block;font-family:var(--display);font-size:1.24rem;font-weight:400;color:var(--navy-d);margin-bottom:6px}
.rel span{font-size:.9375rem;color:var(--ink-2)}

/* ---- forms. 16px minimum or iOS Safari zooms on focus. */
.form{display:grid;gap:16px;max-width:var(--measure)}
.field label{display:block;font-weight:700;font-size:.9688rem;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;font-family:var(--text);font-size:16px;
  padding:13px 14px;border:1px solid var(--line-2);border-radius:0;background:var(--panel);color:var(--ink)}
.field textarea{min-height:140px;resize:vertical}
.field small{display:block;font-size:0.9062rem;color:var(--ink-3);margin-top:5px}

/* ---- blog */
.article{max-width:var(--measure);margin-inline:auto}
.postmeta{font-size:.9375rem;color:var(--ink-3);margin:0 0 20px}
.toc{background:transparent;border:1px solid var(--line);border-radius:0;padding:20px 24px;margin:0 0 28px}
.toc b{display:block;margin-bottom:8px;color:var(--navy-d)}
.toc ol{margin:0;padding-left:20px}
.toc li{margin:0 0 5px;font-size:1.062rem}
.posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.posts article{background:transparent;border:1px solid var(--line);padding:22px 24px}
.posts h3{margin:0 0 8px}
.posts p{font-size:1.062rem;color:var(--ink-2)}
.dtable{min-width:520px}

/* ---- footer: three ranked columns, a payment strip, one legal line */
.fcta{position:relative;background:var(--navy-d);color:#fff;padding:52px 0 54px}
.fcta h2,.fcta__h{color:#fff}
.fcta__box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:34px;align-items:center}
.fcta__eye{display:inline-block;font-family:var(--text);font-size:.9375rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:#f0b957;margin-bottom:10px}
.fcta__h{font-family:var(--display);font-size:1.92rem;font-weight:400;line-height:1.2;margin:0 0 12px}
.fcta p{color:#c9d7e6}
.fcta__sm{font-size:.9375rem;color:#a9bdd4;margin:12px 0 0}
.fcta__sm a,.fcta p a{color:#ffd08a}
.fcta__img img{width:280px}
footer{background:var(--panel);border-top:1px solid var(--line)}
.fcard{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr);gap:28px;
  padding:42px 0 30px;border-bottom:1px solid var(--line)}
.fbrand{font-family:var(--display);font-size:1.86rem;font-weight:400;color:var(--navy-d);line-height:1}
.fbrand span{color:var(--amber-d)}
.frole{font-size:.9375rem;color:var(--ink-2);margin:10px 0 14px}
.fcard p{font-size:1.062rem;color:var(--ink-2);margin:0 0 .7em}
.fcard b{color:var(--navy-d)}
/* the three ranked columns */
.fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;padding:34px 0 30px}
.fh{font-family:var(--text);font-size:.8438rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 12px}
.fgrid ul{list-style:none;margin:0 0 20px;padding:0}
.fgrid li{margin:0}
/* inline-block, not block: the box shrink-wraps so the hover underline stays
   the width of the words, and the negative margin gives the row height back. */
footer li a{display:inline-block;padding-block:5px;margin-block:-5px;font-size:.9688rem;
  color:var(--ink-2);text-decoration:none}
footer li a:hover{color:var(--amber-d)}
.fseals{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:20px 0;border-top:1px solid var(--line)}
.fseals img{width:44px;height:44px;object-fit:contain}
.fseals span{font-size:.9375rem;color:var(--ink-3)}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:0 0 26px}
.fpay img{width:230px;height:auto}
.fpay span{font-size:.9375rem;color:var(--ink-3)}
.disc{border-top:1px solid var(--line);padding:24px 0 28px}
.disc p,.disc li{font-size:.9375rem;color:var(--ink-2)}
.disc b{color:var(--navy-d)}
.disc__list{columns:2;column-gap:38px;list-style:none;margin:14px 0 0;padding:0}
.disc__list li{break-inside:avoid;margin:0 0 9px;padding-left:16px;position:relative}
.disc__list li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:2px;background:var(--amber)}
.copy{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:.9375rem}

/* ---- sticky buy bar. Declared at the TOP LEVEL and never display:none,
   so it exists on desktop for house rule 8 to reveal. */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--navy-d);color:#fff;
  transform:translateY(105%);transition:transform .25s ease}
.buybar.show{transform:none}
.buybar__in{display:flex;align-items:center;gap:18px;max-width:var(--wrap);margin-inline:auto;padding:12px 22px}
.buybar__t{font-size:.9375rem;min-width:0}
.buybar__t b{display:block;font-size:1rem}
.buybar__t span{color:#b3c5da}
.buybar .btn{margin-left:auto;flex:0 0 auto}

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

/* ---- responsive */
@media (max-width:1100px){
  .fcard{grid-template-columns:1fr 1fr}
}
@media (max-width:980px){
  :root{--navh:96px}
  .hero__grid{grid-template-columns:1fr;gap:26px}
  .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:6px 0 20px}
  .answer{order:4}
  .hero__road{order:5}
  .hero__cta{order:6}
  .hero__sub{order:8}
  .trust__row{order:9}
  .factpills{order:10}
  .figures{order:11}
  .nav__price{display:none}
  .menu{display:none;flex-direction:column;align-items:stretch;gap:0;padding:6px 0 12px}
  .menu.open{display:flex}
  .menu__more{display:block}
  .menu a{padding:12px 0;border-bottom:1px solid var(--line)}
  .menu a[aria-current="page"]{border-bottom-color:var(--amber)}
  .burger{display:block}
  .nav__buy{display:none}
  .grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats div{border-bottom:1px solid #2c4f7f;padding-block:16px}
  .stats div:nth-child(2n){border-right:0}
  .fcta__box{grid-template-columns:1fr}
  .fcta__img{display:none}
  .final--media{grid-template-columns:1fr;gap:20px}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .sec{padding:44px 0}
  .grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr}
  .prices{grid-template-columns:1fr}
  .card--pack.featured{order:-1}
  .shots,.shots.s2{grid-template-columns:1fr}
  .badgewall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .badgewall figure{border-bottom:1px solid var(--line)}
  .badgewall figure:nth-child(2n){border-right:0}
  .rel,.posts{grid-template-columns:1fr}
  .split,.split--flip .split__img{grid-template-columns:minmax(0,1fr);order:0}
  .versus{grid-template-columns:1fr}
  .versus>div:nth-child(3n+1){border-top:2px solid var(--line-2)}
  /* The dose chip is nowrap and margin-left:auto, so on a narrow card it is
     pushed onto a line with no room and overhangs the edge. */
  .ing__dose{margin-left:0;white-space:normal}
  .disc__list{columns:1}
  .figures{grid-template-columns:1fr}
  .figures div{border-right:0;border-bottom:1px solid var(--line)}
  .figures div:last-child{border-bottom:0}
  .fcard,.fgrid{grid-template-columns:1fr;gap:22px}
  .buybar__in{flex-wrap:wrap;gap:10px;padding-block:10px}
  .buybar .btn{width:100%;margin-left:0}
}
@media (max-width:440px){
  .badgewall{grid-template-columns:1fr}
  .badgewall figure{border-right:0}
}

/* ---- the bottle sits on the paper, with its own ground -------------------
   Transform only, NEVER opacity: the bottle is the LCP element and an element
   starting at opacity:0 is not recorded as painted. There is no card fill on
   this hero by design, so the product gets an elliptical contact shadow and
   nothing else. This is the ONE place the site draws a soft edge, and it is
   the product's shadow rather than a component's depth. */
.hero__card{isolation:isolate}
.hero__card::after{
  content:"";position:absolute;left:50%;bottom:26px;translate:-50% 0;
  width:46%;height:14px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(35,28,17,.30),transparent 76%);
  filter:blur(5px);z-index:0;pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  /* The float goes on the CARD, never on the <img>. */
  .hero__card{animation:ssFloat 9s ease-in-out infinite}
  @keyframes ssFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
}


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

/* ==== directional chrome (fix_chrome_scroll.py) ==== */
.nav,#nav{transition:transform .28s ease}
@media(prefers-reduced-motion:reduce){.nav,#nav{transition:none}}
.nav--away{transform:translateY(-100%)}
html.chrome-up .buybar{transform:translateY(105%)}
/* ==== end directional chrome ==== */

/* ==== footer type floor (footer_type.py) ==== */
/* The footer carried the smallest text on the page -- the legal pages,
   the guarantee and the contact routes, set as fine print. Running text
   and links sit at 16px, column headings at 15px (uppercase and
   letter-spaced, so they read larger than the number). Last in the file
   on purpose: it outranks the phone breakpoints that shrank them. */
footer li a{font-size:16px}
footer .copy{font-size:16px}
footer .disc li{font-size:16px}
footer .disc p{font-size:16px}
footer .fh{font-size:15px}
footer .fpay span{font-size:16px}
footer .fseals span{font-size:16px}
/* ==== end footer type floor ==== */

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

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

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

/* ==== tables never fade (reveal_skip_tables.py) ==== */
/* A comparison table is reference content the reader scrolled to on
   purpose. Fading it in leaves it illegible for half a second at exactly
   that moment, which reads as broken text rather than as motion. The
   reveal stays on cards and callouts, which are decorative arrivals. */
.tablewrap[data-reveal],.tablewrap.reveal{opacity:1;transform:none;transition:none}
/* ==== end tables never fade ==== */