/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Cinzel Fallback";src:local("Georgia");font-weight:400;size-adjust:128.26%;ascent-override:76.10%;descent-override:29.00%;line-gap-override:0.00%}
@font-face{font-family:"Cinzel Fallback";src:local("Georgia Bold");font-weight:600 900;size-adjust:111.42%;ascent-override:87.60%;descent-override:33.39%;line-gap-override:0.00%}
@font-face{font-family:"Carme Fallback";src:local("Arial");font-weight:400;size-adjust:104.45%;ascent-override:90.98%;descent-override:23.98%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* soadaslim.com — SodaSlim, licensed U.S. retail desk.
   Design slot: batch11_assignments.py row 277.

     Type     Cinzel / Carme — an inscriptional Roman capital over a plain
              humanist sans. Nothing else in the SodaSlim group is set in a
              capitalis; the register is an apothecary shelf label, not a
              fitness brand.
     Layout   A CENTRED hero with the bottle BENEATH the headline, and one
              wide column from the hero to the footer. No alternating
              two-column sections anywhere on the site.
     Cards    One heavy rule on the TOP edge only. Square corners, no border
              on the other three sides.
     Ground   Sand washing to bone.
     Depth    Soft lift: a single 18px blur at low alpha, and nothing else.
     Motion   hive-drift — see the hero motif block below.

   The palette is re-derived from the bottle in assets/: the label's amber
   panel, its navy band, and a sand paper that is the amber desaturated rather
   than a neutral grey.

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

/* ---- tokens */
:root{
  --ink:#2b2418;            /* body text, a warm near-black */
  --ink-2:#564d3b;          /* secondary */
  --ink-3:#7b7260;          /* captions, meta */
  --navy:#17365f;           /* the label's lower band */
  --navy-d:#0f2545;         /* deep */
  --navy-2:#23507f;
  --amber:#ee8b12;          /* the label's panel */
  --amber-d:#9c5900;        /* AA-safe amber for text and buttons */
  --amber-l:#f7b542;        /* the label's highlight, for dark bands */
  --sand:#efe2c8;           /* the page top */
  --bone:#fbf7ef;           /* the page bottom */
  --paper:#f6eee0;          /* flat fallback where one colour is wanted */
  --panel:#ffffff;
  --tint:#f6efe1;
  --wash:#fdf2df;
  --line:#e3d7c0;
  --line-2:#cbb994;
  --good:#2d6a45;
  --warn:#8a5a10;
  --wrap:1080px;
  --measure:860px;
  --measure-wide:980px;
  --radius:3px;
  --radius-lg:3px;
  --shadow:0 4px 18px rgba(43,36,24,.10);
  --shadow-lg:0 8px 18px rgba(43,36,24,.20);
  --rule:5px;
  --navh:104px;
  --pack-img:170px;
  --figw:320px;
  --display:"Cinzel","Cinzel Fallback",Georgia,"Times New Roman",serif;
  --text:"Carme","Carme 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;color:var(--ink);
  background:var(--bone);
  background-image:linear-gradient(180deg,var(--sand) 0,var(--bone) 620px);
  background-repeat:no-repeat;
  background-attachment:scroll;
  font-family:var(--text);font-size:17px;line-height:1.78;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);font-weight:700;line-height:1.22;margin:0 0 .5em}
h1{font-size:clamp(1.65rem,1.05rem + 1.9vw,2.55rem);letter-spacing:.005em}
h2{font-size:clamp(1.35rem,1.08rem + 1vw,1.95rem);letter-spacing:.01em}
h3{font-size:1.14rem;font-weight:700;letter-spacing:.015em}
h4{font-size:1rem;font-weight:700;letter-spacing:.02em}
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);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 header is sticky and two tiers tall, so an in-page anchor has to clear
   it or the heading it jumps to lands underneath the bar */
[id]{scroll-margin-top:calc(var(--navh) + 14px)}

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

/* ---- buttons: flat slabs, square, no gradient. The depth language on this
   site is one soft lift and nothing else, so a button gets a lift and not a
   bevel. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:54px;padding:15px 30px;
  font-family:var(--display);font-size:.96rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;
  border:0;border-radius:var(--radius);cursor:pointer;text-decoration:none;
  background:var(--navy);color:#fff;box-shadow:var(--shadow);
  transition:background .18s ease,box-shadow .18s ease;
}
.btn:hover{background:var(--navy-d);color:#fff;box-shadow:var(--shadow-lg)}
.btn--amber{background:var(--amber-d)}
.btn--amber:hover{background:#7e4800}
.btn--lg{min-height:62px;padding:17px 34px;font-size:1rem}
.btn--ghost{background:none;color:var(--navy);box-shadow:inset 0 0 0 2px var(--line-2)}
.btn--ghost:hover{background:var(--wash);color:var(--navy-d);box-shadow:inset 0 0 0 2px var(--amber)}
.btn--wide{width:100%}

/* ---- header: ONE bar in TWO TIERS. The facts ride above, the identity and
   the destinations below, and both tiers slide away together under house
   rule 8 because they are one sticky element. */
.nav{position:sticky;top:0;z-index:100;background:var(--panel);box-shadow:0 1px 0 var(--line)}
.util{background:var(--navy-d);color:#c2d2e6;font-size:.8125rem;line-height:1.5}
/* Five facts on one line at 1440. Measured: at gap 18 and a 12px rule with a
   9px margin the phone number wrapped onto a second row, which made the top
   tier two lines deep on the widest screen. 14px of gap and a 10px rule bring
   the row back to 1,003px inside a 1,036px content box. */
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;padding-block:8px}
.util__item{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.util__item+.util__item::before{content:"";width:10px;height:1px;background:#436a9c;
  flex:0 0 auto;margin-right:7px}
.util b{color:#fff;font-weight:400;font-family:var(--display)}
.util a{color:inherit;text-decoration:none}
.util a:hover{text-decoration:underline}
/* padding-BLOCK, never the shorthand: this row also carries .wrap, and
   `padding:14px 0` sets padding-inline to 0 and wipes the page gutter --
   invisible above the container max-width and untestable by any overflow
   check (pitfall 46). */
.nav__top{display:flex;align-items:center;gap:22px;padding-block:12px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--navy)}
.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 the replacement, so a
   class-only rule stops applying the moment that 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.3rem;font-weight:700;letter-spacing:.04em}
.bw b em{font-style:normal;color:var(--amber-d)}
.bw small{font-family:var(--text);font-size:.8125rem;font-weight:400;color:var(--ink-3);letter-spacing:.01em}
.menu{
  display:flex;flex-wrap:wrap;gap:0 22px;list-style:none;margin:0 0 0 auto;padding:0;
  align-items:center;
}
.menu a{
  display:inline-block;padding:9px 0;font-family:var(--display);
  font-size:.875rem;font-weight:600;letter-spacing:.055em;color:var(--ink-2);
  text-decoration:none;border-bottom:2px solid transparent;
}
.menu a:hover{color:var(--navy)}
.menu a[aria-current="page"]{color:var(--navy);border-bottom-color:var(--amber)}
.menu__more{display:none}
.nav__buy{min-height:44px;padding:11px 20px;font-size:.8125rem;flex:0 0 auto}
.burger{
  display:none;width:48px;height:46px;background:transparent;border:1px solid var(--line-2);
  border-radius:var(--radius);cursor:pointer;padding:12px 11px;margin-left:auto;
}
.burger span{display:block;height:2px;background:var(--navy);margin:0 0 5px}
.burger span:last-child{margin:0}

/* ---- hero: CENTRED, and the bottle sits BENEATH the headline.
   `.hero__copy{display:contents}` at every width, so the copy's children and
   the media column are siblings in one grid track and `order` can put the
   product where the slot wants it. The H1 is second, which is what keeps its
   bottom edge above the fold at 1440x900. */
.hero{position:relative;padding:44px 0 56px;overflow-x:clip}
.hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);
  justify-items:center;text-align:center;gap:0}
.hero__copy{display:contents}
.hero .eyebrow{order:1}
.hero h1{order:2;margin:0 0 20px;max-width:18ch}
.hero__media{order:3}
.answer{order:4}
.hero__road{order:5}
.hero__cta{order:6}
.hero__sub{order:7}
.factpills{order:8}
.figures{order:9}
.hero h1 em{font-style:normal;color:var(--amber-d)}

/* the Quick Answer: a bone slab under a single heavy amber rule, the same
   construction as every card on this site */
.answer{
  position:relative;z-index:3;
  background:var(--panel);border-top:var(--rule) solid var(--amber);
  border-radius:0 0 var(--radius) var(--radius);
  padding:22px 26px;margin:0 0 20px;box-shadow:var(--shadow);
  text-align:left;max-width:var(--measure);
}
.answer p{margin:0 0 .75em;font-size:1.0625rem}
.answer p:last-child{margin:0}
.hero__road{font-size:1rem;color:var(--ink-2);margin:0 0 22px;max-width:62ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 20px;justify-content:center}
.hero__sub{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0 0 18px;justify-content:center;
  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 20px;padding:0;
  justify-content:center}
.factpills li{
  font-size:0.9375rem;color:var(--ink-2);background:var(--panel);
  border:1px solid var(--line);padding:7px 15px;border-radius:var(--radius);
}
.factpills li b{color:var(--navy);font-weight:400;font-family:var(--display)}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0;
  width:100%;max-width:var(--measure-wide)}
.figures div{background:var(--panel);border-top:var(--rule) solid var(--navy);
  padding:15px 16px;box-shadow:var(--shadow);text-align:left}
.figures b{display:block;font-family:var(--display);font-size:1.5rem;font-weight:700;
  color:var(--navy);line-height:1.1}
.figures span{display:block;font-size:0.9375rem;color:var(--ink-3);margin-top:4px}

/* The media column is deliberately WIDER than the bottle inside it: the motif
   is drawn on .hero__media pseudo-elements and would be entirely hidden behind
   an opaque card that filled the column (SKILL.md rule 7). 460px of column
   around a 300px bottle leaves 80px of motif visible on each side. */
.hero__media{position:relative;width:100%;max-width:460px;margin:2px auto 26px;
  padding:14px 0 8px}
.hero__card{position:relative;z-index:2;text-align:center}
.hero__card img{width:100%;max-width:300px;height:auto;margin-inline:auto;
  filter:drop-shadow(0 18px 18px rgba(43,36,24,.22))}
.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;
  justify-content:center;font-size:0.9375rem;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:32px 0 14px;background:var(--panel);border-bottom:1px solid var(--line)}
.crumbs{font-size:0.9375rem;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);margin-bottom:18px}
.lead{font-size:1.125rem;color:var(--ink-2);max-width:var(--measure)}

/* --- 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:760px){
  .hero{padding:28px 0 40px}
  .hero__media{max-width:330px;margin-bottom:20px}
  .hero__card img{max-width:250px}
}


/* ---- hero motif -- hive-drift ---------------------------------------- */
.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(178deg,#f3ce9e,#f5dcbb 54%,#f6eee0)}.hero__media::before{content:'';position:absolute;left:50%;bottom:2%;width:58%;aspect-ratio:1/1.72;translate:-50% 0;z-index:1;pointer-events:none;border-radius:999px 999px 48% 48%;background:linear-gradient(0deg,rgba(238,139,18,0.52) 0%,rgba(238,139,18,0.34) 42%,transparent 84%);filter:blur(22px);animation:ssHiveRise 10.5s ease-in-out infinite}.hero__media::after{content:'';position:absolute;left:50%;top:30%;width:118%;aspect-ratio:1/.72;translate:-50% 0;z-index:1;pointer-events:none;background-image:radial-gradient(circle at 50% 50%,rgba(238,139,18,0.62) 0 2.6px,transparent 3.4px),radial-gradient(circle at 50% 50%,rgba(43,36,24,0.30) 0 2.2px,transparent 3px);background-size:38px 33px,38px 33px;-webkit-mask-image:radial-gradient(56% 50% at 50% 58%,#000 16%,transparent 74%);mask-image:radial-gradient(56% 50% at 50% 58%,#000 16%,transparent 74%);animation:ssHiveDrift 17s linear infinite}@keyframes ssHiveRise{0%,100%{opacity:.30;transform:translateY(5%) scaleY(.94)}54%{opacity:.76;transform:translateY(-6%) scaleY(1.04)}}@keyframes ssHiveDrift{0%{background-position:0 0,19px 16.5px;opacity:.26}48%{opacity:.70}100%{background-position:0 33px,19px 49.5px;opacity:.32}}
@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: ONE wide column, top to bottom */
.sec{padding:58px 0;position:relative}
.sec--tint{background:var(--tint)}
.sec--panel{background:var(--panel)}
.sec--dark{background:var(--navy-d);color:#dce6f2}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark p,.sec--dark li{color:#cfdcec}
.sec--dark .eyebrow{color:var(--amber-l)}
.sec--dark .eyebrow::before{background:var(--amber-l)}
.sec--dark a{color:#ffd9a3}
.sec--center{text-align:center}
.sec--center .sec__head{margin-inline:auto}
.sec--wedge{background:var(--panel);border-top:var(--rule) solid var(--navy)}
.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:#cfdcec}

/* The single wide column. Everything a reader reads lands in one measure and
   is centred in it; only the multi-item component rows use the full wrap. */
.sec>.wrap>h2,.sec>.wrap>h3,.sec>.wrap>h4,.sec>.wrap>p,
.sec>.wrap>ul,.sec>.wrap>ol,.sec>.wrap>.sec__head,.sec>.wrap>.callout,
.sec>.wrap>.alert,.sec>.wrap>.byline,.sec>.wrap>.refs,.sec>.wrap>.pullquote,
.sec>.wrap>.keypoints,.sec>.wrap>.meter,.sec>.wrap>blockquote{
  max-width:var(--measure);margin-inline:auto}
.sec>.wrap>.tablewrap,.sec>.wrap>.faq,.sec>.wrap>.steps,.sec>.wrap>.inglist,
.sec>.wrap>.versus,.sec>.wrap>.tnote,.sec>.wrap>.split{
  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 .55em}
.ticks li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--good);font-weight:700}
.sec--dark .ticks li::before{color:#7fd3a8}

/* ---- tables */
.tablewrap{overflow-x:auto;margin:0 0 1.2em;border:1px solid var(--line);
  border-top:var(--rule) solid var(--navy);background:var(--panel);box-shadow:var(--shadow)}
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(--display);font-weight:700;letter-spacing:.05em;color:var(--navy);
  background:var(--tint);font-size:.9375rem}
tbody tr:nth-child(even){background:#fdfaf3}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--navy);font-family:var(--display);font-weight:700}
.tnote{font-size:.9375rem;color:var(--ink-3);margin:-.4em 0 1.2em}

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

/* ---- cards: ONE heavy rule on the top edge, and nothing on the other three */
.grid{display:grid;gap:18px}
.grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid>*{min-width:0}
.card{position:relative;background:var(--panel);border:0;
  border-top:var(--rule) solid var(--amber);border-radius:0 0 var(--radius) var(--radius);
  box-shadow:var(--shadow);padding:24px 24px 22px}
.card h3{margin:0 0 8px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.sec--dark .card{background:#163659;border-top-color:var(--amber-l)}

/* ---- callout, alert, quote, keypoints */
.callout{background:var(--wash);border-top:var(--rule) solid var(--amber);
  box-shadow:var(--shadow);padding:20px 24px;margin:0 0 1.2em}
.callout b:first-child{display:block;margin-bottom:6px;color:var(--navy);
  font-family:var(--display);letter-spacing:.02em}
.callout p:last-child{margin:0}
.alert{background:#fdf6ea;border-top:var(--rule) solid var(--warn);
  box-shadow:var(--shadow);padding:20px 24px;margin:0 0 1.2em}
.alert b:first-child{display:block;margin-bottom:6px;color:var(--warn);
  font-family:var(--display);letter-spacing:.02em}
.alert p:last-child{margin:0}
.pullquote{font-family:var(--display);font-size:1.22rem;font-weight:600;line-height:1.5;
  color:var(--navy);border-top:var(--rule) solid var(--navy);padding:18px 0 4px;
  margin:0 0 1.2em}
.pullquote cite{display:block;font-family:var(--text);font-size:.9375rem;font-style:normal;
  font-weight:400;color:var(--ink-3);margin-top:10px;letter-spacing:0}
.keypoints{background:var(--panel);border-top:var(--rule) solid var(--navy);
  box-shadow:var(--shadow);padding:20px 24px;margin:0 0 1.2em}
.keypoints>b{display:block;margin-bottom:8px;font-family:var(--display);letter-spacing:.02em}
.keypoints ul{margin:0;padding-left:20px}

/* ---- image beside copy. One column throughout on this site, so the split is
   stacked at every width: the picture sits above the words it belongs to. */
.split{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;margin:0 0 1.2em}
.split__img,.split__body{min-width:0}
.split__img img{width:100%;max-width:520px;margin-inline:auto;
  border-top:var(--rule) solid var(--navy);background:var(--panel);box-shadow:var(--shadow)}
.split__body p:last-child{margin:0}

/* ---- stat band */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;text-align:center}
.stats div b{display:block;font-family:var(--display);font-size:2.1rem;font-weight:700;
  color:#fff;line-height:1.15}
.stats div span{display:block;font-size:.9375rem;color:#b8c8dc;margin-top:6px}

/* ---- label versus research */
.versus{display:grid;grid-template-columns:1.05fr 1fr 1.15fr;border:1px solid var(--line);
  border-top:var(--rule) solid var(--navy);background:var(--panel);box-shadow:var(--shadow);
  margin:0 0 1.2em;overflow:hidden}
.versus>div{padding:13px 16px;border-bottom:1px solid var(--line);font-size:.98rem}
.versus>div:nth-child(3n+1){background:#fdfaf3;color:var(--navy);
  font-family:var(--display);font-weight:600}
.versus__h{background:var(--tint)!important;color:var(--navy);font-family:var(--display);
  font-weight:700;letter-spacing:.05em;font-size:.9375rem}

/* ---- ingredient cards */
.inglist{display:grid;gap:16px}
.inglist>*{min-width:0}
.ingcard{background:var(--panel);border-top:var(--rule) solid var(--amber);
  box-shadow:var(--shadow);padding:22px 26px}
.ingcard__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;margin:0 0 10px}
.ingcard__top h3{margin:0}
.ing__latin{font-size:.9375rem;font-style:italic;color:var(--ink-3)}
.ing__dose{margin-left:auto;font-size:.9375rem;font-family:var(--display);font-weight:700;
  letter-spacing:.04em;color:var(--navy);background:var(--tint);padding:5px 13px;
  white-space:nowrap}
.ingcard p:last-child{margin:0}

/* ---- add-to-cart panel */
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
  align-items:stretch;margin:0 0 20px}
.prices>*{min-width:0}
.card--pack{display:flex;flex-direction:column;background:var(--panel);
  border:0;border-top:var(--rule) solid var(--line-2);border-radius:0;
  box-shadow:var(--shadow);overflow:hidden;position:relative}
.card--pack.featured{border-top-color:var(--amber);box-shadow:var(--shadow-lg)}
.pack__head{background:var(--tint);border-bottom:1px solid var(--line);padding:14px 20px;
  display:flex;align-items:center;gap:10px}
.card--pack.featured .pack__head{background:var(--navy)}
.card--pack.featured .pack__head b,.card--pack.featured .pack__head span{color:#fff}
.pack__head b{font-family:var(--display);font-size:1.06rem;font-weight:700;letter-spacing:.05em;
  color:var(--navy)}
.pack__head span{font-size:.8125rem;color:var(--ink-3);margin-left:auto}
.pack__flag{position:absolute;right:0;top:0;background:var(--amber-d);color:#fff;
  font-family:var(--display);font-size:0.75rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;padding:6px 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);object-fit:contain;
  margin-inline:auto;margin-bottom:14px}
.pack__per{font-family:var(--display);font-size:2.3rem;font-weight:700;color:var(--navy);
  line-height:1;text-align:center;margin:0}
.pack__per sup{font-size:1rem;font-weight:600;top:-.8em}
.pack__unit{display:block;text-align:center;font-size:.875rem;color:var(--ink-3);
  margin:6px 0 12px;letter-spacing:.06em;text-transform:uppercase;font-family:var(--display)}
.pack__tot{display:flex;align-items:baseline;justify-content:center;gap:9px;margin:0 0 14px;
  font-size:1rem}
.pack__tot b{font-family:var(--display);font-weight:700;color:var(--navy)}
.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;
  max-width:var(--measure);margin-inline:auto}

/* ---- 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>*{min-width:0}
.shots figure{margin:0;background:var(--panel);border-top:var(--rule) solid var(--navy);
  box-shadow:var(--shadow);overflow:hidden}
.shots img{width:100%}
.shots figcaption{padding:16px 20px}
.shots figcaption b{display:block;margin-bottom:5px;color:var(--navy);
  font-family:var(--display);letter-spacing:.02em}
.shots figcaption span{font-size:.9375rem;color:var(--ink-2)}
figure.portrait img{width:var(--figw);margin-inline:auto}

/* ---- seal wall */
.badgewall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:0 0 1.2em}
.badgewall>*{min-width:0}
.badgewall figure{margin:0;text-align:center;background:var(--panel);
  border-top:var(--rule) solid var(--line-2);box-shadow:var(--shadow);padding:20px 16px}
.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);
  font-family:var(--display);letter-spacing:.02em}
.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(--line);overflow:hidden}
.meter__bar i{display:block;height:100%;background:var(--amber)}
.stars{color:var(--amber-d);letter-spacing:1px}
.stars i{font-style:normal;opacity:.34}

/* ---- FAQ. Padding on <summary>, which is the click target (pitfall 73). */
.faq{border:1px solid var(--line);border-top:var(--rule) solid var(--navy);
  background:var(--panel);box-shadow:var(--shadow);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 22px;cursor:pointer;position:relative;list-style:none;
  font-family:var(--display);font-weight:700;font-size:1.02rem;letter-spacing:.015em;
  color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;translate:0 -50%;
  font-family:var(--text);font-size:1.34rem;font-weight:400;color:var(--amber-d)}
.faq details[open] summary::after{content:"\2212"}
.faq__body{padding:0 22px 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.0625rem;color:var(--ink-2);margin:0 0 .6em}
/* The reference list prints each source's URL as the 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:var(--panel);border-top:var(--rule) solid var(--navy);
  box-shadow:var(--shadow);padding:22px 26px;margin:0 0 1.2em}
.byline__mark{flex:0 0 auto;width:54px;height:54px;display:grid;place-items:center;
  background:var(--navy);color:#fff;font-family:var(--display);font-weight:700;
  font-size:1.04rem;letter-spacing:.05em}
.byline b{display:block;margin-bottom:6px;color:var(--navy);font-family:var(--display);
  letter-spacing:.015em}
.byline p{font-size:.9688rem;color:var(--ink-2);margin:0}

/* ---- closing CTA */
.final{background:var(--panel);border-top:var(--rule) solid var(--amber);
  box-shadow:var(--shadow);padding:30px 32px}
.final--media{display:grid;grid-template-columns:auto minmax(0,1fr);gap:30px;align-items:center}
.final--media>*{min-width:0}
.final__img img{width:200px}
.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>*{min-width:0}
.rel a{display:block;background:var(--panel);border-top:var(--rule) solid var(--line-2);
  box-shadow:var(--shadow);padding:20px 22px;text-decoration:none;color:var(--ink);
  transition:border-top-color .18s ease,box-shadow .18s ease}
.rel a:hover{border-top-color:var(--amber);box-shadow:var(--shadow-lg)}
.rel b{display:block;font-family:var(--display);font-size:1.02rem;letter-spacing:.02em;
  color:var(--navy);margin-bottom:5px}
.rel span{font-size:.9375rem;color:var(--ink-2)}

/* ---- forms. 16px minimum or iOS Safari zooms on focus (pitfall 86). */
.form{display:grid;gap:16px;max-width:var(--measure)}
.field label{display:block;font-family:var(--display);font-weight:700;font-size:.9688rem;
  letter-spacing:.02em;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:var(--radius);
  background:var(--panel);color:var(--ink)}
.field textarea{min-height:140px;resize:vertical}
.field small{display:block;font-size:0.9375rem;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:var(--panel);border-top:var(--rule) solid var(--navy);box-shadow:var(--shadow);
  padding:20px 26px;margin:0 0 28px}
.toc b{display:block;margin-bottom:8px;color:var(--navy);font-family:var(--display);
  letter-spacing:.02em}
.toc ol{margin:0;padding-left:20px}
.toc li{margin:0 0 5px;font-size:1.0625rem}
.posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.posts>*{min-width:0}
.posts article{background:var(--panel);border-top:var(--rule) solid var(--amber);
  box-shadow:var(--shadow);padding:22px 24px}
.posts h3{margin:0 0 8px}
.posts p{font-size:1.0625rem;color:var(--ink-2)}
.dtable{min-width:520px}

/* ---- footer: a large wordmark with every destination flowing beneath it as
   one inline list, then the contact card, the seals and the legal rail. */
.fcta{background:var(--navy);color:#fff;padding:52px 0}
.fcta h2,.fcta__h{color:#fff}
.fcta__box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:34px;align-items:center}
.fcta__box>*{min-width:0}
/* 15px, not 13. `.fcta` sits OUTSIDE <footer>, so footer_type.py's floor does
   not reach it and preflight reads it as clean -- but house rule 10 is about
   eyebrows and closing-band type as a reader meets them, and this one carries
   the guarantee. Raised by hand for that reason; nothing here is lowered. */
.fcta__eye{display:inline-block;font-family:var(--display);font-size:15px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--amber-l);margin-bottom:10px}
.fcta__h{font-family:var(--display);font-size:1.5rem;font-weight:700;line-height:1.3;margin:0 0 12px}
.fcta p{color:#cfdcec}
.fcta__sm{font-size:16px;color:#a9bbd1;margin:14px 0 0}
.fcta__sm a,.fcta p a{color:#ffd9a3}
.fcta__img img{width:280px}
footer{background:var(--panel);border-top:1px solid var(--line)}
.fmast{padding:46px 0 10px;text-align:center}
.fbrand{font-family:var(--display);font-size:clamp(2.2rem,1.3rem + 3.4vw,3.6rem);font-weight:700;
  color:var(--navy);letter-spacing:.06em;line-height:1}
.fbrand span{color:var(--amber-d)}
.frole{font-size:1rem;color:var(--ink-2);margin:12px 0 0}
.findex{list-style:none;margin:0;padding:26px 0 24px;display:flex;flex-wrap:wrap;
  justify-content:center;gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.findex li{display:inline-flex;align-items:center}
.findex li::after{content:"";width:1px;height:14px;background:var(--line-2);margin:0 14px}
.findex li:last-child::after{display:none}
footer li a{display:inline-block;padding-block:5px;margin-block:-5px;font-size:16px;
  color:var(--ink-2);text-decoration:none}
footer li a:hover{color:var(--amber-d)}
.fh{font-family:var(--display);font-size:15px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 12px;text-align:center}
.fcard{padding:28px 0 4px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 40px;
  max-width:var(--measure-wide);margin-inline:auto}
.fcard>*{min-width:0}
.fcard p{font-size:16px;color:var(--ink-2);margin:0 0 .8em}
.fcard b{color:var(--navy);font-family:var(--display);letter-spacing:.02em}
.fseals{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;
  padding:22px 0;border-top:1px solid var(--line)}
.fseals img{width:44px;height:44px;object-fit:contain}
.fseals span{font-size:16px;color:var(--ink-3)}
.fpay{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px;padding:0 0 28px}
.fpay img{width:230px;height:auto}
.fpay span{font-size:16px;color:var(--ink-3)}
.disc{background:var(--tint);border-top:1px solid var(--line);padding:28px 0 32px}
.disc p,.disc li{font-size:16px;color:var(--ink-2)}
.disc b{color:var(--navy);font-family:var(--display);letter-spacing:.02em}
.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:.72em;width:8px;height:2px;
  background:var(--amber)}
.copy{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:16px}

/* ---- sticky buy bar. Declared at the TOP LEVEL and never display:none
   outside a phone query: house rule 8 wants a bottom CTA on desktop too, and
   one site shipped with the direction classes landing correctly on an element
   that never rendered. */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:block;
  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;font-family:var(--display);font-weight:700;
  letter-spacing:.03em}
.buybar__t span{color:#b8c8dc}
.buybar .btn{margin-left:auto;flex:0 0 auto;background:var(--amber-d)}
.buybar .btn:hover{background:#7e4800}

/* ---- 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:1040px){
  .menu{gap:0 16px}
  .menu a{font-size:.8125rem}
}
@media (max-width:980px){
  :root{--navh:108px}
  .menu{display:none;flex-direction:column;align-items:stretch;gap:0;padding:6px 0 12px;
    width:100%;margin:0;order:3}
  .menu.open{display:flex}
  .menu__more{display:block}
  .menu a{padding:12px 0;border-bottom:1px solid var(--line-2);font-size:1rem}
  .menu a[aria-current="page"]{border-bottom-color:var(--line-2)}
  .findex li::after{margin:0 10px}
  .nav__top{flex-wrap:wrap}
  .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));gap:24px}
  .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}
  .hero{padding:28px 0 40px}
  .hero__media{max-width:330px;margin-bottom:20px}
  .hero__card img{max-width:250px}
  .util__item--trim{display:none}
  .util__row{gap:4px 14px}
  .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))}
  .rel,.posts{grid-template-columns:1fr}
  .versus{grid-template-columns:1fr}
  .versus>div:nth-child(3n+1){border-top:2px solid var(--line-2)}
  .ing__dose{margin-left:0;white-space:normal}
  .disc__list{columns:1}
  .figures{grid-template-columns:1fr;gap:10px}
  .fcard{grid-template-columns:1fr;gap:0}
  .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}
  .findex{padding:20px 0 18px}
  .findex li::after{margin:0 8px}
}

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

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