/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Inknut Antiqua Fallback";src:local("Georgia");font-weight:400;size-adjust:125.46%;ascent-override:135.74%;descent-override:69.82%;line-gap-override:0.00%}
@font-face{font-family:"Inknut Antiqua Fallback";src:local("Georgia Bold");font-weight:600 900;size-adjust:111.85%;ascent-override:152.25%;descent-override:78.32%;line-gap-override:0.00%}
@font-face{font-family:"Puritan Fallback";src:local("Arial");font-weight:400;size-adjust:95.43%;ascent-override:90.15%;descent-override:26.09%;line-gap-override:0.00%}
@font-face{font-family:"Puritan Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:88.08%;ascent-override:99.45%;descent-override:28.27%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* =====================================================================
   soedaslim.com -- SodaSlim, Licensed retailer desk.
   Design slot: batch11_assignments.py row 285.

     Type    Inknut Antiqua (display serif, very heavy, high contrast)
             over Puritan (humanist sans with a squarish bowl)
     Layout  hero STACKED at every width, product first, copy beneath it
     Cards   a notched top-right corner and a hairline border
     Depth   flat at rest; a soft lift on hover only
     Ground  toasted wheat page, panels in soft white
     Header  a full-bleed dark bar, the ordering button knocked out in
             the accent
     Footer  an offer strip, then five ranks, then the disclaimers

   Colour comes from the bottle, not from the slot: the label is an amber
   sunburst inside a navy band, so the accent is the burnt orange at the
   hot end of that sunburst and the dark surface is the label's own navy.

   Everything above the CRITICAL marker below is inlined into every page by
   tpl._critical_css(), so it has to hold the whole first screen: tokens,
   the bar, the hero and the hero's phone layout. A hero rule that lives
   below the marker makes a phone paint the desktop hero and then relay
   it, which is this estate's largest mobile CLS fault.
   ===================================================================== */

:root{
  /* `paper` is read by hero_motifs.palette() as the hero ground and it
     only qualifies above a lightness of 0.9, so the wheat is the pale
     end of toasted rather than the deep end; the deeper wheat lives in
     --wheat below and does the section banding. */
  --paper:#f5ecda;
  --panel:#fffdf8;
  --wheat:#ecdcbd;
  --deep:#14294a;
  --ink:#221a12;
  --muted:#6d5c45;
  --line:#ddcba6;
  --rule:#c8b28a;
  --accent:#cf5d0a;
  --amber:#edaa33;
  --btn:#b34e06;
  --link:#a8460a;
  --on-dark:#fff8ea;
  --good:#2f6b3f;
  --wrap:1180px;
  --measure:70ch;
  --notch:22px;
  --figw:320px;
  --ease:cubic-bezier(.32,.72,.34,1);
  --lift:0 12px 22px rgba(34,26,18,.16);
}

*,*::before,*::after{box-sizing:border-box}
html{font-size:100%;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{overflow-x:clip}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 17px/1.68 Puritan,"Segoe UI",system-ui,-apple-system,sans-serif;
  letter-spacing:.005em;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--link)}
a:hover{color:var(--btn)}
h1,h2,h3,h4{
  font-family:"Inknut Antiqua",Georgia,"Times New Roman",serif;
  font-weight:700;line-height:1.22;letter-spacing:-.012em;
  color:var(--deep);margin:0 0 .5em;
}
h1{font-size:clamp(28px,4.1vw,46px);line-height:1.16}
h2{font-size:clamp(23px,2.5vw,32px)}
h3{font-size:clamp(19px,1.5vw,21px);line-height:1.3}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.15em;padding-left:1.25em}
li{margin:0 0 .5em}
b,strong{font-weight:700}
.wrap{width:min(var(--wrap),100% - 32px);margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;background:var(--deep);color:#fff;
  padding:10px 16px;z-index:99}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* ---- the topline strip ------------------------------------------- */
.util{background:var(--ink);color:#f0e3cc;font-size:14px}
.util__row{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center;
  justify-content:space-between;padding:7px 0;min-height:36px}
.util__item{display:inline-flex;gap:6px;align-items:center;white-space:nowrap}
.util__item b{color:var(--amber);font-weight:700}
.util a{color:#f7e9d0;text-decoration:none;border-bottom:1px solid rgba(237,170,51,.5)}
.util a:hover{color:var(--amber)}

/* ---- the bar: full bleed, dark, button knocked out in the accent --- */
.nav{
  position:sticky;top:0;z-index:40;
  background:var(--deep);color:var(--on-dark);
  border-bottom:3px solid var(--accent);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease);
}
.nav__top{display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:12px 0}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
.brand svg{width:38px;height:38px;flex:none}
.bw{display:flex;flex-direction:column;line-height:1.08}
.bw b{font-family:"Inknut Antiqua",Georgia,serif;font-size:21px;font-weight:700;
  letter-spacing:-.02em;color:#fff}
.bw b em{font-style:normal;color:var(--amber)}
.bw small{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:#bfcbdd;margin-top:3px}
.nav__rail{display:flex;align-items:center;gap:14px}
.nav__price{display:flex;flex-direction:column;text-align:right;line-height:1.15}
.nav__price b{font-size:17px;color:var(--amber)}
.nav__price span{font-size:12.5px;color:#c3cede}
.nav__buy{flex:none}
.nav__strip{background:rgba(255,255,255,.06);border-top:1px solid rgba(255,255,255,.12)}
.menu{display:flex;flex-wrap:wrap;gap:0 4px;list-style:none;margin:0;padding:0}
.menu a{display:inline-block;padding:11px 8px;color:#e8eef7;text-decoration:none;
  font-size:14px;letter-spacing:.01em;border-bottom:3px solid transparent;white-space:nowrap}
.menu a:hover,.menu a[aria-current]{color:#fff;border-bottom-color:var(--amber)}
.burger{display:none;flex:none;background:none;border:1px solid rgba(255,255,255,.4);
  width:44px;height:40px;padding:8px 9px;cursor:pointer}
.burger span{display:block;height:2px;background:#fff;margin:4px 0}

/* ---- buttons ----------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:Puritan,system-ui,sans-serif;font-weight:700;font-size:16px;
  letter-spacing:.015em;text-decoration:none;cursor:pointer;
  padding:12px 20px;border:2px solid transparent;
  transition:background .2s var(--ease),color .2s var(--ease),
             transform .2s var(--ease),filter .2s var(--ease)}
.btn--amber{background:var(--btn);color:#fff}
.btn--amber:hover{background:var(--accent);color:#fff;transform:translateY(-1px);
  filter:drop-shadow(0 8px 14px rgba(179,78,6,.34))}
.btn--ghost{background:transparent;color:var(--deep);border-color:var(--deep)}
.btn--ghost:hover{background:var(--deep);color:var(--on-dark)}
.btn--lg{padding:15px 26px;font-size:17px}
.btn--wide{width:100%}

/* ---- the hero: product first, copy beneath it, at every width ----- */
.hero{background:var(--paper);padding:30px 0 42px;position:relative}
.hero__grid{display:grid;grid-template-columns:1fr;gap:22px;justify-items:center}
.hero__media{order:1;position:relative;width:100%;max-width:560px;display:flex;
  justify-content:center}
/* The copy is lifted into its own stacking layer on purpose. A hero motif
   draws on ::before/::after of .hero__media, and an absolutely positioned
   pseudo-element at z-index 0 still paints ABOVE in-flow block content in the
   same stacking context. In a stacked hero the headline sits directly beneath
   that column, which is exactly where "a grid of stray rules across the H1"
   comes from. z-index 3 puts the reading matter over every motif layer. */
.hero__copy{order:2;position:relative;z-index:3;width:100%;max-width:960px;
  text-align:center}
.hero__card{position:relative;background:var(--panel);border:1px solid var(--line);
  padding:14px 18px 10px;display:flex;flex-direction:column;align-items:center;
  width:100%;
  clip-path:polygon(0 0,calc(100% - var(--notch)) 0,100% var(--notch),100% 100%,0 100%)}
.hero__card img{width:min(238px,62vw);height:auto}
.hero__cap{margin:8px 0 2px;font-size:13.5px;color:var(--muted);letter-spacing:.03em;
  text-align:center}
.eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:9px}
.hero h1{margin:0 0 14px;max-width:34ch;margin-inline:auto;font-size:clamp(28px,3.2vw,40px)}
.answer{background:var(--panel);border-left:5px solid var(--accent);
  border-top:1px solid var(--line);border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:16px 20px;text-align:left;max-width:78ch;margin:0 auto 14px}
.answer p{margin:0;font-size:17.5px;line-height:1.62}
.hero__road{max-width:76ch;margin:0 auto 16px;color:var(--muted);font-size:15.5px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:12px}
.hero__sub{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:center;
  font-size:14.5px;color:var(--muted);margin:0 0 14px}
.hero__sub span{display:inline-flex;align-items:center;gap:7px}
.hero__sub span::before{content:"";width:9px;height:9px;background:var(--good);
  transform:rotate(45deg);flex:none}
.factpills{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  list-style:none;margin:0 0 16px;padding:0}
.factpills li{background:var(--wheat);border:1px solid var(--line);
  padding:7px 13px;font-size:14.5px}
.factpills b{color:var(--deep)}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
  max-width:660px;margin:0 auto}
.figures div{background:var(--panel);border:1px solid var(--line);padding:12px 10px;
  text-align:center}
.figures b{display:block;font-family:"Inknut Antiqua",Georgia,serif;font-size:25px;
  color:var(--accent);line-height:1.1}
.figures span{display:block;font-size:13px;color:var(--muted);margin-top:5px}

@media (max-width:980px){
  .hero{padding:22px 0 34px}
  .hero__grid{gap:18px}
  .hero__card img{width:min(260px,64vw)}
  .answer{padding:14px 16px}
  .figures{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
}
@media (max-width:640px){
  .hero{padding:18px 0 28px}
  .hero h1{max-width:none}
  .answer p{font-size:16.5px}
  .figures b{font-size:21px}
  .figures span{font-size:12px}
  .hero__cta .btn{width:100%}
}
@media (max-width:920px){
  .burger{display:block}
  .nav__price{display:none}
  .nav__strip{display:none}
  .nav.open .nav__strip{display:block}
  .menu{flex-direction:column;gap:0;padding:6px 0 12px}
  .menu a{padding:13px 4px;border-bottom:1px solid rgba(255,255,255,.12)}
}
/* --- 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 print{
  .nav,.util,.buybar,.fcta,.hero__cta{display:none}
}


/* ---- hero motif -- tide-pull ---------------------------------------- */
.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(176deg,#e9be97 0%,#eed2b5 44%,#f5ecda 100%)}.hero__media::before{content:'';position:absolute;left:50%;bottom:0;width:134%;aspect-ratio:1/.42;translate:-50% 0;z-index:0;pointer-events:none;border-radius:50% 50% 0 0/64% 64% 0 0;background:radial-gradient(72% 118% at 50% 100%,rgba(207,93,10,0.52) 0%,rgba(207,93,10,0.30) 44%,transparent 78%);filter:blur(16px);transform-origin:50% 100%;animation:ssTide 17s cubic-bezier(.36,0,.2,1) infinite}.hero__media::after{content:'';position:absolute;left:50%;bottom:7%;width:150%;aspect-ratio:1/.30;translate:-50% 0;z-index:0;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(207,93,10,0.66) 62%,transparent) 0% 30%/34% 2px no-repeat,linear-gradient(270deg,transparent,rgba(20,41,74,0.46) 62%,transparent) 100% 70%/34% 2px no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent,#000 17%,#000 83%,transparent);mask-image:linear-gradient(90deg,transparent,#000 17%,#000 83%,transparent);animation:ssDraw 11s ease-in-out infinite}@keyframes ssTide{0%,100%{transform:scaleY(.50);opacity:.30}36%{transform:scaleY(1);opacity:.74}50%{transform:scaleY(.96);opacity:.66}76%{transform:scaleY(.32);opacity:.20}}@keyframes ssDraw{0%{background-position:0% 30%,100% 70%;opacity:0}17%{opacity:.64}68%{background-position:43% 30%,57% 70%;opacity:.40}100%{background-position:50% 30%,50% 70%;opacity:0}}@media(max-width:980px){.hero__media::before{width:146%;filter:blur(12px)}.hero__media::after{width:162%}}
@media(prefers-reduced-motion:reduce){.hero__card{animation:none!important}.hero__media::before,.hero__media::after{animation:none!important;opacity:0!important}}

/*!CRITICAL-END*/

/* ---- the entry pass -----------------------------------------------
   A sideways settle rather than a fade-up. The hidden state is applied by
   site.js, never written into the markup, so a reader with no JavaScript
   meets a page where everything is already in place. Horizontal only: a
   block arriving from below is a block that moved its own neighbours. */
[data-reveal]{opacity:0;transform:translateX(-18px);
  transition:opacity .48s var(--ease),transform .48s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
}

/* ---- sections ----------------------------------------------------- */
.sec{padding:46px 0;border-top:1px solid var(--line)}
.sec--tint{background:var(--wheat)}
.sec--panel{background:var(--panel)}
.sec--dark{background:var(--deep);color:var(--on-dark);border-top-color:var(--deep)}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark a{color:var(--amber)}
.sec--dark .eyebrow{color:var(--amber)}
.sec--center{text-align:center}
.sec--center .sec__head{margin-inline:auto}
.sec__head{max-width:var(--measure);margin-bottom:22px}
.sec__head h2{margin:0 0 .42em}
.sec__head p{color:var(--muted);margin:0;font-size:16.5px}
.sec--dark .sec__head p{color:#d5deea}
.sec p,.sec li{max-width:var(--measure)}
.sec--center p,.sec--center li{margin-inline:auto}
.lead{font-size:18px;color:var(--muted);max-width:var(--measure)}
.crumbs{font-size:14px;color:var(--muted);margin:0 0 12px}
.crumbs a{color:var(--muted)}

.phead{background:var(--paper);padding:30px 0 34px}
.phead h1{max-width:26ch}
.phead .answer{margin-left:0;margin-right:0}
.phead .lead{margin-top:14px}

/* ---- cards: a notched corner, a hairline, and nothing at rest ----- */
.card,.step,.ingcard,.callout,.alert,.keypoints,.badgewall figure,
.shots figure,.rel a,.posts a{
  position:relative;background:var(--panel);
  clip-path:polygon(0 0,calc(100% - var(--notch)) 0,100% var(--notch),100% 100%,0 100%);
}
.card::after,.step::after,.ingcard::after,.callout::after,.alert::after,
.keypoints::after,.badgewall figure::after,.shots figure::after,
.rel a::after,.posts a::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(var(--line),var(--line)) left top/1px 100% no-repeat,
    linear-gradient(var(--line),var(--line)) right top/1px 100% no-repeat,
    linear-gradient(var(--line),var(--line)) left top/100% 1px no-repeat,
    linear-gradient(var(--line),var(--line)) left bottom/100% 1px no-repeat;
}
.card::before,.step::before,.ingcard::before,.callout::before,.alert::before,
.keypoints::before,.rel a::before,.posts a::before{
  content:"";position:absolute;top:0;right:0;
  width:var(--notch);height:var(--notch);pointer-events:none;
  background:linear-gradient(to bottom left,transparent 49.2%,
             var(--line) 49.2% 50.9%,transparent 50.9%);
}
.card,.step,.ingcard,.rel a,.posts a{
  transition:filter .26s var(--ease),transform .26s var(--ease);
}
.card:hover,.step:hover,.ingcard:hover,.rel a:hover,.posts a:hover{
  filter:drop-shadow(0 12px 20px rgba(34,26,18,.17));transform:translateY(-3px);
}
.card,.step,.ingcard{padding:20px 22px}
.card h3,.step h3,.ingcard h3{margin-top:0}
.card p:last-child,.step p:last-child,.ingcard p:last-child{margin-bottom:0}

.grid{display:grid;gap:18px}
.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;gap:18px;grid-template-columns:repeat(3,minmax(0,1fr));
  counter-reset:stepn}
.step{counter-increment:stepn}
.step h3::before{content:counter(stepn);display:inline-flex;align-items:center;
  justify-content:center;width:28px;height:28px;background:var(--accent);color:#fff;
  font-family:Puritan,sans-serif;font-size:15px;margin-right:9px;vertical-align:2px}
.grid p,.grid li,.steps p,.steps li{max-width:none}

.callout,.alert,.keypoints{padding:17px 20px;margin:0 0 18px;max-width:var(--measure)}
.callout{border-left:5px solid var(--amber)}
.alert{border-left:5px solid var(--accent);background:#fdf3e4}
.keypoints{border-left:5px solid var(--deep)}
.callout b,.alert b,.keypoints b{display:block;font-family:"Inknut Antiqua",Georgia,serif;
  font-size:17px;color:var(--deep);margin-bottom:7px}
.keypoints ul{margin-bottom:0}
.pullquote{margin:0 0 20px;padding:4px 0 4px 22px;border-left:5px solid var(--amber);
  font-family:"Inknut Antiqua",Georgia,serif;font-size:19px;line-height:1.5;
  color:var(--deep);max-width:var(--measure)}
.pullquote cite{display:block;font-family:Puritan,sans-serif;font-size:14.5px;
  font-style:normal;color:var(--muted);margin-top:8px}

.ticks{list-style:none;padding-left:0}
.ticks li{position:relative;padding-left:26px}
.ticks li::before{content:"";position:absolute;left:2px;top:.55em;width:10px;height:10px;
  background:var(--accent);transform:rotate(45deg)}

/* ---- tables ------------------------------------------------------- */
.tablewrap{overflow-x:auto;margin:0 0 16px;border:1px solid var(--line);
  background:var(--panel)}
table{border-collapse:collapse;width:100%;font-size:16px}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);
  vertical-align:top}
thead th{background:var(--deep);color:var(--on-dark);font-family:Puritan,sans-serif;
  font-weight:700;font-size:14.5px;letter-spacing:.05em;text-transform:uppercase}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even){background:#fbf5e9}
.tnote{font-size:14.5px;color:var(--muted);max-width:var(--measure)}

/* ---- ingredient cards and the label-versus-research grid ---------- */
.inglist{display:grid;gap:18px}
.ingcard__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;
  margin-bottom:10px}
.ingcard__top h3{margin:0}
.ing__latin{font-style:italic;color:var(--muted);font-size:15px}
.ing__dose{margin-left:auto;background:var(--wheat);border:1px solid var(--line);
  padding:4px 10px;font-size:14px;color:var(--deep)}
.versus{display:grid;grid-template-columns:1.1fr 1fr 1.6fr;gap:1px;
  background:var(--line);border:1px solid var(--line);margin:0 0 16px;font-size:15.5px}
.versus>div{background:var(--panel);padding:11px 13px}
.versus__h{background:var(--deep)!important;color:var(--on-dark);
  font-family:Puritan,sans-serif;font-weight:700;font-size:14px;letter-spacing:.05em;
  text-transform:uppercase}

/* ---- pricing ------------------------------------------------------ */
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
  align-items:start}
.card--pack{padding:0;overflow:visible}
.card--pack.featured{outline:3px solid var(--accent);outline-offset:-1px}
.pack__flag{position:absolute;top:-14px;left:16px;background:var(--accent);color:#fff;
  font-size:13px;font-weight:700;letter-spacing:.04em;padding:5px 12px;z-index:3}
.pack__head{background:var(--deep);color:var(--on-dark);padding:16px 18px 13px;
  display:flex;flex-direction:column;gap:3px}
.pack__head b{font-family:"Inknut Antiqua",Georgia,serif;font-size:20px;color:#fff}
.pack__head span{font-size:14px;color:#c6d1e1}
.pack__body{padding:18px;text-align:center}
.pack__body img{margin:0 auto 10px}
.pack__per{font-family:"Inknut Antiqua",Georgia,serif;font-size:42px;line-height:1;
  color:var(--accent);margin:0}
.pack__per sup{font-size:.48em;top:-.62em;position:relative}
.pack__unit{display:block;font-size:14px;color:var(--muted);margin-bottom:9px}
.pack__tot{margin:0 0 12px;font-size:16px}
.pack__was{text-decoration:line-through;color:var(--muted);margin-left:6px}
.pack__perks{list-style:none;padding:0;margin:0 0 15px;text-align:left;font-size:15px}
.pack__perks li{padding:7px 0;border-bottom:1px dashed var(--line);margin:0}
.pack__perks li:last-child{border-bottom:0}
.pack__marks{font-size:13px;color:var(--muted);margin:9px 0 0}
.buy__note{font-size:15px;color:var(--muted);max-width:var(--measure);margin-top:16px}

/* ---- reviews, meters, seals, figures ------------------------------ */
.meter{display:grid;gap:9px;max-width:560px;margin:0 0 18px}
.meter__row{display:grid;grid-template-columns:80px 1fr 48px;gap:10px;
  align-items:center;font-size:15px}
.meter__bar{display:block;height:12px;background:var(--wheat);border:1px solid var(--line)}
.meter__bar i{display:block;height:100%;background:var(--accent)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.stats div{text-align:center;padding:14px 10px;border:1px solid rgba(255,255,255,.22)}
.stats b{display:block;font-family:"Inknut Antiqua",Georgia,serif;font-size:29px;
  color:var(--amber);line-height:1.1}
.stats span{display:block;font-size:14px;color:#d6dfeb;margin-top:6px}
.badgewall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.badgewall figure{margin:0;padding:16px 14px;text-align:center}
.badgewall img{margin:0 auto 9px}
.badgewall b{display:block;font-size:15.5px;color:var(--deep)}
.badgewall span{display:block;font-size:14px;color:var(--muted);margin-top:5px}
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.shots.s2{grid-template-columns:repeat(2,minmax(0,1fr))}
.shots figure{margin:0;padding:0}
.shots img{width:100%}
.shots figcaption{padding:13px 16px 16px}
.shots figcaption b{display:block;font-family:"Inknut Antiqua",Georgia,serif;
  font-size:16.5px;color:var(--deep);margin-bottom:5px}
.shots figcaption span{font-size:15px;color:var(--muted)}
.split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:24px;
  align-items:center;margin-bottom:20px}
.split--flip .split__img{order:2}
.split__img img{width:100%;border:1px solid var(--line)}
.split__body p:last-child{margin-bottom:0}
.split__body p,.split__body li{max-width:none}

/* ---- FAQ ---------------------------------------------------------- */
.faq{display:grid;gap:10px;max-width:var(--measure)}
.faq details{background:var(--panel);border:1px solid var(--line)}
.faq summary{cursor:pointer;padding:14px 18px;font-family:"Inknut Antiqua",Georgia,serif;
  font-size:17px;color:var(--deep);list-style:none;position:relative;padding-right:46px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:18px;top:12px;font-size:22px;
  color:var(--accent);font-family:Puritan,sans-serif}
.faq details[open] summary::after{content:"\2013"}
.faq__body{padding:0 18px 16px;font-size:16px}
.faq__body p:last-child{margin-bottom:0}

/* ---- sources, byline, related, closing CTA ------------------------ */
.refs{max-width:var(--measure)}
.refs ol{font-size:15px;color:var(--muted)}
.refs li{margin-bottom:.7em}
.refs a{word-break:break-word}
.byline{display:flex;gap:16px;align-items:flex-start;background:var(--wheat);
  border:1px solid var(--line);padding:18px 20px;max-width:var(--measure);
  margin-top:18px}
.byline__mark{flex:none;width:46px;height:46px;display:inline-flex;align-items:center;
  justify-content:center;background:var(--deep);color:var(--amber);
  font-family:"Inknut Antiqua",Georgia,serif;font-size:17px}
.byline b{display:block;color:var(--deep);margin-bottom:6px;font-size:16px}
.byline p{margin:0;font-size:15.5px;color:var(--muted);max-width:none}
.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;text-align:left}
.rel a{display:block;padding:18px 20px;text-decoration:none;color:inherit}
.rel b{display:block;font-family:"Inknut Antiqua",Georgia,serif;font-size:17px;
  color:var(--deep);margin-bottom:6px}
.rel span{font-size:15px;color:var(--muted)}
.final{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.6fr);gap:24px;
  align-items:center;background:var(--panel);border:1px solid var(--line);
  border-top:4px solid var(--accent);padding:24px}
.final__img img{margin:0 auto}
.final__body h2{margin-top:0}
.final__price{font-size:17px;color:var(--deep);font-weight:700}
.final__sm{font-size:14.5px;color:var(--muted);margin:10px 0 0}
.final p,.final li{max-width:none}

/* ---- closing guarantee panel -------------------------------------- */
.fcta{background:var(--deep);color:var(--on-dark);padding:44px 0}
.fcta__box{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.7fr);gap:26px;
  align-items:center}
.fcta__eye{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--amber);margin-bottom:10px}
.fcta__h{font-family:"Inknut Antiqua",Georgia,serif;font-size:clamp(22px,2.4vw,30px);
  line-height:1.24;color:#fff;margin:0 0 12px}
.fcta__txt p{color:#dde5f0;max-width:68ch}
.fcta__txt a{color:var(--amber)}
.fcta__sm{font-size:15px;color:#c3cede;margin-top:12px}
.fcta__img img{margin:0 auto}

/* ---- footer: an offer strip, five ranks, then the disclaimers ----- */
footer{background:var(--panel);color:var(--ink);border-top:3px solid var(--accent);
  font-size:16px;line-height:1.65}
.foffer{background:var(--wheat);border-bottom:1px solid var(--line)}
.foffer__in{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;
  justify-content:space-between;padding:18px 0}
.foffer__t{font-family:"Inknut Antiqua",Georgia,serif;font-size:19px;color:var(--deep);
  margin:0}
.foffer__s{font-size:16px;color:var(--muted);margin:4px 0 0}
.findex{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px;
  padding:34px 0 26px}
.findex__col h4{font-family:Puritan,system-ui,sans-serif;font-size:15px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 11px}
.findex__col ul{list-style:none;margin:0;padding:0}
.findex__col li{margin:0}
.findex__col a{display:block;padding:5px 0;color:var(--ink);text-decoration:none;
  font-size:16px}
.findex__col a:hover{color:var(--link);text-decoration:underline}
.findex__col p{font-size:16px;margin:0 0 10px;color:var(--ink)}
.fbrand{font-family:"Inknut Antiqua",Georgia,serif;font-size:21px;color:var(--deep);
  margin-bottom:6px}
.fbrand span{color:var(--accent)}
.frole{font-size:16px;color:var(--muted);margin:0 0 12px}
.fpay{display:flex;flex-wrap:wrap;gap:14px;align-items:center;padding:18px 0;
  border-top:1px solid var(--line);font-size:16px;color:var(--muted)}
.fseals{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:0 0 22px;
  font-size:16px;color:var(--muted)}
.fseals img{flex:none}
.disc{background:var(--deep);color:#dbe3ef;padding:20px 0}
.disc p{font-size:16px;margin:0 0 8px;max-width:none}
.disc b{color:#fff}
.disc a{color:var(--amber)}
.disc .copy{font-size:16px;color:#b9c5d6;margin:0}

/* ---- the sticky buy bar ------------------------------------------- */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:block;
  background:var(--ink);color:#fff;border-top:3px solid var(--accent);
  transform:translateY(105%);transition:transform .3s var(--ease)}
.buybar.show{transform:translateY(0)}
.buybar__in{display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:min(var(--wrap),100% - 32px);margin-inline:auto;padding:11px 0}
.buybar__t{display:flex;flex-direction:column;line-height:1.3}
.buybar__t b{font-size:16px}
.buybar__t span{font-size:14px;color:#e0d2ba}

/* ---- forms -------------------------------------------------------- */
.form{display:grid;gap:14px;max-width:560px}
.field{display:grid;gap:6px}
.field label{font-size:15px;font-weight:700;color:var(--deep)}
.field input,.field textarea,.field select{font:400 16px/1.5 Puritan,sans-serif;
  padding:11px 13px;border:1px solid var(--line);background:var(--panel);
  color:var(--ink);width:100%}
.field textarea{min-height:140px}

/* ---- blog --------------------------------------------------------- */
.article{max-width:74ch}
.article h2{margin-top:1.5em}
.article h3{margin-top:1.2em}
.article p,.article li{max-width:none}
.article figure{margin:0 0 20px;background:var(--panel);border:1px solid var(--line)}
.article figure img{width:100%}
.article figure.portrait img{width:var(--figw,320px);margin:0 auto}
.article figcaption{padding:11px 15px;font-size:15px;color:var(--muted)}
.postmeta{font-size:15px;color:var(--muted);margin:0 0 18px}
.toc{background:var(--wheat);border:1px solid var(--line);padding:16px 20px;
  margin:0 0 24px}
.toc b{display:block;font-family:"Inknut Antiqua",Georgia,serif;color:var(--deep);
  margin-bottom:8px}
.toc ol{margin:0;font-size:16px}
.posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.posts a{display:block;padding:20px 22px;text-decoration:none;color:inherit}
.posts b{display:block;font-family:"Inknut Antiqua",Georgia,serif;font-size:18px;
  color:var(--deep);margin-bottom:7px}
.posts span{display:block;font-size:15px;color:var(--muted)}
.article .final{grid-template-columns:minmax(0,.55fr) minmax(0,1.6fr);padding:20px}
.article .final h2{font-size:22px;margin-top:0}
.disc__list{font-size:16px}

/* ---- responsive --------------------------------------------------- */
@media (max-width:1040px){
  .findex{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  .badgewall{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .prices{grid-template-columns:1fr;gap:26px}
  .steps,.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split,.final,.fcta__box{grid-template-columns:1fr}
  .split--flip .split__img{order:0}
  .versus{grid-template-columns:1fr;font-size:15px}
  .versus__h:nth-child(2),.versus__h:nth-child(3){display:none}
  .posts{grid-template-columns:1fr}
  .rel{grid-template-columns:1fr}
}
@media (max-width:660px){
  body{font-size:16.5px}
  .sec{padding:34px 0}
  .g2,.g3,.g4,.steps,.shots,.shots.s2,.badgewall{grid-template-columns:1fr}
  .findex{grid-template-columns:repeat(2,minmax(0,1fr))}
  .figures{grid-template-columns:1fr}
  .meter__row{grid-template-columns:70px 1fr 42px}
  .byline{flex-direction:column}
  .buybar__t span{display:none}
  .util__item--trim{display:none}
  /* The masthead is identity + price + order + burger on one row, and at
     390px those four ran 23px past the gutter. Everything here shrinks the
     row rather than wrapping it, because a wrapped masthead pushes the hero
     -- and with it the H1 -- below the fold on a phone. */
  .nav__top{gap:10px}
  .nav__rail{gap:9px}
  .brand{gap:8px}
  .brand svg{width:30px;height:30px}
  .bw b{font-size:18px}
  .nav__buy{padding:10px 13px;font-size:14.5px}
}
@media (max-width:420px){
  .findex{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .bw small{font-size:10px;letter-spacing:.06em}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .card,.step,.ingcard,.rel a,.posts a,.btn,.buybar,.nav{transition:none}
  .card:hover,.step:hover,.ingcard:hover,.rel a:hover,.posts a:hover,
  .btn--amber:hover{transform:none}
}

@media print{
  .nav,.util,.buybar,.fcta,.hero__cta{display:none}
}

/* --- 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--away{transform:translateY(-100%)}
html.chrome-up .buybar{transform:translateY(105%)}
/* ==== end directional chrome ==== */

/* brand mark: bare construction */
.brand svg.brand__glyph{background:none!important}

/* ==== 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 (34,26,18), not neutral black.

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

.card,
.step,
.keypoints,
.callout,
.alert,
.toc,
.byline,
.shots figure,
.badgewall figure,
.tablewrap,
.faq,
.ingcard,
.final,
.answer,
.article figure{box-shadow:var(--shadow)}

/* These panels declared no radius of their own, so raising
   the token alone left them square. House rule 11 is a
   floor: it outranks a slot that chose square corners. */
.card,
.step,
.keypoints,
.callout,
.alert,
.toc,
.byline,
.shots figure,
.badgewall figure,
.tablewrap,
.faq,
.ingcard,
.final,
.answer,
.article figure{border-radius:var(--radius)}

/* A surface a reader can click answers the pointer. 2px
   registers without reflowing the row beside it. */
.rel a,
.shots figure,
.card--pack,
.badgewall figure{transition:box-shadow .2s ease, transform .2s ease}
.rel a: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,
.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 ==== */