/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Marcellus Fallback";src:local("Arial");font-weight:400;size-adjust:103.11%;ascent-override:94.47%;descent-override:27.13%;line-gap-override:0.00%}
@font-face{font-family:"Sora Fallback";src:local("Arial");font-weight:400;size-adjust:114.54%;ascent-override:84.68%;descent-override:25.32%;line-gap-override:0.00%}
@font-face{font-family:"Sora Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:108.03%;ascent-override:89.79%;descent-override:26.84%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* goevoslim.com — Evo Slim, USA authorized retailer desk.

   Design slot (batch10_assignments.py): Marcellus / Sora, a BONE ground with a
   SINGLE CORAL RULE running the page, a two-row header divided by a coral
   hairline with the price ladder riding the upper row, and a footer whose
   contact facts sit inside a coral keyline box with the page index on one wide
   row beneath it.

   THE RULE IS THE IDEA. One 2px coral line is drawn once, down the whole height
   of <main>, at the left edge of the content column. It passes over every band
   on the page — light, tinted and dark — so the page reads as one continuous
   document rather than a stack of sections. Every eyebrow carries a short coral
   cap of the same weight, so the horizontal marks and the vertical rule are the
   same line seen twice. Nothing else on the site is coral except the links, the
   order button and the two keylines named above; the restraint is what makes
   one line read as a decision.

   Colour is taken from the bottle: the wordmark's deep slate-navy becomes the
   ink, and its rose is pushed warm into a coral that can carry a rule at 2px on
   a bone ground. Contrast was measured, not assumed — ink 11.71:1 on the ground,
   secondary 5.97, captions 4.76, coral link text 4.73, white on the order button
   4.53 at its lightest stop.

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

/* ---- tokens */
:root{
  --ink:#2a3040;            /* the wordmark's slate, body text */
  --ink-2:#555c6b;          /* secondary */
  /* Darkened from #656b78 on 20 Sep 2026: 4.36:1 on the tinted band. */
  --ink-3:#616774;          /* captions, meta */
  --ink-deep:#1e232f;       /* the dark band */
  --coral:#e2594a;          /* THE rule */
  /* Darkened from #c13c2d on 20 Sep 2026: the eyebrows and body links set in
     it measured 4.33:1 on the tinted band, under AA. It still carries white. */
  --coral-d:#b93a2b;        /* coral that can carry text */
  --coral-deep:#8f2a1a;     /* hover */
  --btn-a:#bb3b2b;
  --btn-b:#cf4837;
  --blush:#fceee9;          /* coral wash */
  --paper:#f6f1e9;          /* the page: bone */
  --panel:#ffffff;
  --tint:#efe7da;
  --line:#e6dccd;
  --line-2:#d2c5b0;
  --good:#1d6b45;
  --warn:#8a5410;
  --wrap:1180px;
  --measure:740px;
  --measure-wide:960px;
  --radius:4px;
  --radius-lg:10px;
  --shadow:0 1px 2px rgba(42,48,64,.05), 0 12px 32px rgba(42,48,64,.07);
  --shadow-lg:0 20px 54px rgba(42,48,64,.16);
  --navh:150px;
  --display:Marcellus,Georgia,"Times New Roman",serif;
  --text:Sora,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.75;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--coral-d);text-underline-offset:3px}
a:hover{color:var(--coral-deep)}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);font-weight:400;line-height:1.18;margin:0 0 .5em}
h1{font-size:clamp(1.95rem,1.3rem + 1.9vw,2.75rem);letter-spacing:-.005em}
h2{font-size:clamp(1.55rem,1.22rem + 1.25vw,2.25rem)}
h3{font-family:var(--text);font-size:1.16rem;font-weight:700;letter-spacing:-.01em}
h4{font-family:var(--text);font-size:1.02rem;font-weight:700}
p,li{font-size:1.0625rem}
p{margin:0 0 1.05em}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:26px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--coral-d);outline-offset:2px}

/* the eyebrow names the JOB of the section beneath it, and carries the rule
   again as a short horizontal cap */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--text);font-size:0.8438rem;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:var(--coral-d);
  margin:0 0 11px;
}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--coral);flex:0 0 auto}

/* ---- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:54px;padding:15px 32px;
  font-family:var(--text);font-size:1rem;font-weight:700;letter-spacing:.005em;
  border:0;border-radius:var(--radius);cursor:pointer;text-decoration:none;
  background:var(--ink);color:#fff;
  transition:filter .18s ease,transform .18s ease;
}
.btn:hover{filter:brightness(1.14);color:#fff}
.btn:active{transform:translateY(1px)}
.btn--coral{background:linear-gradient(100deg,var(--btn-a) 0%,var(--btn-b) 100%);color:#fff}
.btn--coral:hover{background:linear-gradient(100deg,#a4321f 0%,#b83c2b 100%)}
.btn--lg{min-height:62px;padding:17px 38px;font-size:1.06rem}
.btn--ghost{background:none;color:var(--ink);box-shadow:inset 0 0 0 2px var(--line-2)}
.btn--ghost:hover{background:var(--blush);color:var(--coral-deep)}
.btn--wide{width:100%}

/* ---- topline strip: the five trust facts, above the navigation.
   Role, lot, dose and count, guarantee, order phone. It exists so the NAV does
   not have to carry them (hero.md). It sits ABOVE CRITICAL-END because it is
   the first thing painted; appended to the end of the stylesheet it would load
   async and flash unstyled at the very top of the page. */
.util{background:var(--ink-deep);color:#c9cfdb;font-size:.8125rem;line-height:1.5}
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;padding-block:6px}
.util__item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.util__item+.util__item::before{content:"";width:12px;height:2px;background:var(--coral);
  flex:0 0 auto;margin-right:9px}
.util b{color:#fff;font-weight:600}
.util a{color:inherit;text-decoration:none}
.util a:hover{text-decoration:underline}

/* ---- header: TWO ROWS DIVIDED BY A CORAL HAIRLINE, the price ladder riding
   the upper one. The ladder is the three published pack prices in order, so the
   cheapest per-bottle figure is visible before a visitor scrolls anywhere. */
.nav{position:sticky;top:0;z-index:100;background:var(--panel);box-shadow:0 1px 0 var(--line)}
.nav__top{display:flex;align-items:center;gap:22px;padding-block:7px;
  border-bottom:2px solid var(--coral)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
.brand__glyph{width:30px;height:30px;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 the class stops applying the moment that
   tool runs and the glyph renders at its intrinsic size (pitfall 16). */
.brand>svg{width:30px;height:30px;flex:0 0 auto}
/* brand mark: stack construction.
   Written here, above CRITICAL-END, rather than left to brand_marks.py to
   append at the foot of the sheet. Appended it would arrive with the async
   stylesheet, so the masthead would paint as a row and then become a column --
   a layout shift in the header on every first visit. The marker comment is the
   exact string that tool looks for, so it recognises its own rule and does not
   add a second copy below. */
.brand{flex-direction:column;align-items:center;gap:4px;text-align:center}
.brand svg{width:26px;height:26px;margin-right:0!important}
.bw{display:flex;flex-direction:column;line-height:1.1}
.bw b{font-family:var(--display);font-size:1.3rem;font-weight:400;letter-spacing:.005em}
.bw b em{font-style:normal;color:var(--coral-d)}
.bw small{font-family:var(--text);font-size:0.75rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}
.nav__rail{margin-left:auto;display:flex;align-items:center;gap:16px}
/* the price ladder */
.ladder{display:flex;align-items:stretch;gap:0;list-style:none;margin:0;padding:0;
  border:1px solid var(--line-2);border-radius:var(--radius)}
.ladder li{display:flex;flex-direction:column;justify-content:center;
  padding:5px 14px;line-height:1.15;text-align:center}
.ladder li+li{border-left:1px solid var(--line)}
.ladder b{font-family:var(--display);font-size:1.06rem;font-weight:400;color:var(--ink)}
.ladder span{font-size:.6875rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3)}
.ladder li.is-best b{color:var(--coral-d)}
.nav__buy{min-height:46px;padding:11px 22px;font-size:.95rem}
.burger{
  display:none;width:48px;height:46px;background:transparent;border:1px solid var(--line-2);
  border-radius:var(--radius);cursor:pointer;padding:12px 11px;
}
.burger span{display:block;height:2px;background:var(--ink);margin:0 0 5px}
.burger span:last-child{margin:0}
.nav__strip{background:var(--panel)}
.menu{
  display:flex;flex-wrap:wrap;gap:0 26px;list-style:none;margin:0;padding:0;
  align-items:center;min-height:40px;
}
.menu a{
  display:inline-block;padding:11px 0;font-family:var(--text);
  font-size:.9375rem;font-weight:600;color:var(--ink-2);text-decoration:none;
  border-bottom:2px solid transparent;
}
.menu a:hover{color:var(--coral-d)}
.menu a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--coral)}
.menu__more{display:none}

/* ---- THE CORAL RULE ------------------------------------------------------
   One line, drawn once, running the full height of <main> at the left edge of
   the content column. It is painted ABOVE the section backgrounds on purpose
   (z-index 3): a rule that stopped at every tinted band would be five rules,
   not one. `left` uses max() so it lands 22px left of the text inside the
   1180px wrap and falls back to the page gutter on a narrow screen — it is
   always inside the .wrap box, so it can never widen the document. */
main{position:relative}
main::before{
  content:"";position:absolute;top:0;bottom:0;width:2px;z-index:3;
  left:max(11px,calc((100% - var(--wrap))/2 + 5px));
  background:linear-gradient(180deg,var(--coral) 0 94%,rgba(226,89,74,0) 100%);
  pointer-events:none;
}

/* ---- hero: copy LEFT, bottle RIGHT on a bone plate */
.hero{position:relative;background:var(--paper);padding:34px 0 52px;overflow-x:clip}
.hero__grid{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1.24fr) minmax(0,.76fr);gap:40px;align-items:center}
.hero__copy{display:flex;flex-direction:column;min-width:0}
.hero h1{margin:0 0 14px;line-height:1.12}
.hero h1 em{font-style:normal;color:var(--coral-d)}
.answer{
  background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--coral);border-radius:0 var(--radius) var(--radius) 0;
  padding:18px 22px;margin:0 0 14px;box-shadow:var(--shadow);
}
.answer p{margin:0 0 .75em;font-size:1.0625rem}
.answer p:last-child{margin:0}
.hero__road{font-size:.9688rem;color:var(--ink-2);margin:0 0 16px;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;font-weight:600;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;font-weight:500;color:var(--ink-2);background:var(--panel);
  border:1px solid var(--line);padding:7px 14px;border-radius:999px;
}
.factpills li b{color:var(--ink);font-weight:700}
.figures{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0}
.figures div{background:var(--panel);border:1px solid var(--line);
  border-top:2px solid var(--coral);padding:13px 15px;border-radius:0 0 var(--radius) var(--radius)}
.figures b{display:block;font-family:var(--display);font-size:1.6rem;font-weight:400;
  color:var(--ink);line-height:1.08}
.figures span{display:block;font-size:0.9062rem;font-weight:500;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:14px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow)}
.hero__card img{width:100%;max-width:338px;height:auto;margin-inline:auto}
.hero__cap{margin:12px 0 0;font-size:.8125rem;font-weight:500;color:var(--ink-3);text-align:center}

/* ---- inner page head */
.phead{padding:32px 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(--coral-d)}
.phead h1{margin:0 0 16px;max-width:var(--measure-wide)}
.phead .answer{max-width:var(--measure-wide)}
.lead{font-size:1.12rem;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.
   REGENERATED ON EVERY BUILD from the rules below the marker. Edit
   the originals; never this copy, which is overwritten. */
@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:2px 0 10px}
  /* The CTA follows the Quick Answer directly on a phone, per hero.md's measured order. The roadmap line is useful and is not what somebody is looking for at y=800 on a 390px screen, so it moves below the button. */ .hero__cta{order:5}
  .hero__road{order:6}
  .hero__sub{order:8}
}
@media (max-width:760px){
  .hero{padding:26px 0 40px}
  /* The plate is the tallest single block on a stacked hero, and every pixel of it pushes the Quick Answer and the CTA down the phone. 230px still shows the label clearly at 390. */ .hero__card{padding:10px}
  .hero__card img{max-width:218px}
  .hero__road{margin:14px 0 0}
}
@media (max-width:440px){
  .hero__card img{max-width:198px}
}
@media (min-width: 981px){
  .hero__media{position: sticky; top: calc(var(--navh, 150px) + 14px); align-self: start; min-height: calc(100vh - var(--navh, 150px) - 28px); min-height: calc(100svh - var(--navh, 150px) - 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;}
}
/* --- end of the copied hero responsive rules --- */

/* ---- hero motif -- lift-fade ---------------------------------------- */
.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}
/* CIRCULATE: two counter-rotating arcs, the inner one tighter, drawn on the
   pseudo-elements of the media column and never on the <img>, which is the LCP
   element and is preloaded. Both are sized in PERCENT of .hero__media, which
   is 413px wide here: 128% = 529px and 109% = 450px, against a .hero__card of
   368x403. Both therefore read OUTSIDE the card on both axes -- a ring sized
   inside an opaque card paints nothing at all. Only transform is animated, at
   64s and 92s: this is a capsule taken once a day for weeks, and the motion
   should look like that rather than like a loading spinner. */
.hero{background:radial-gradient(118% 86% at 78% 30%,rgba(226,89,74,.17),rgba(226,89,74,0) 60%),linear-gradient(190deg,#f6f1e9,#f4e0d8 62%,#f6f1e9)}
.hero__media::before,.hero__media::after{content:'';position:absolute;left:50%;top:50%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:2px solid transparent;z-index:1;pointer-events:none}
.hero__media::before{width:128%;border-top-color:rgba(226,89,74,.38);border-right-color:rgba(226,89,74,.15);animation:evoCircA 64s linear infinite}
.hero__media::after{width:109%;border-bottom-color:rgba(42,48,64,.20);border-left-color:rgba(226,89,74,.26);animation:evoCircB 92s linear infinite}
@keyframes evoCircA{to{transform:rotate(360deg)}}
@keyframes evoCircB{to{transform:rotate(-360deg)}}
@media(prefers-reduced-motion:reduce){.hero__card{animation:none!important}.hero__media::before,.hero__media::after{animation:none!important}}

/*!SITE-HOME-CRIT-START*/
/* ---- home page geometry ---------------------------------------------------
   ABOVE the marker on purpose: every declaration in this block moves a box, so
   it has to be inlined with the first paint or ~30 pages carry the old
   geometry until the async sheet lands.

   1. Desktop reading order. The roadmap paragraph used to sit between the
      Quick Answer and the buttons, which put the order button at y=735 on a
      1440x900 screen with the sticky buy bar already at 816. The phone order
      (hero.md, below) had already made this decision; this is the same
      decision on desktop. `display:contents` on .hero__copy is a PHONE rule
      at <=980px and is left alone -- these orders are min-width:981px only.
   2. The pricing ribbon becomes a full-width bar, which needs the head to give
      it 30px of its own. All three heads take the same padding and the same
      min-height, so the one card without a ribbon keeps the shared baseline.
   3. Dashed rules between the perk rows. All three lists carry four rows, so
      they grow by the same amount and the button baseline is unchanged.
   4. The recommended tier is raised by dropping its NEIGHBOURS 14px, never by
      a transform: [data-reveal].in sets transform:none, and the pricing row is
      align-items:stretch, so the two side cards simply end 14px shorter
      against the same row floor and the three buttons keep one baseline. */
@media (min-width:981px){
  .hero__copy>.eyebrow{order:1}
  .hero__copy>h1{order:2}
  .hero__copy>.answer{order:3}
  .hero__copy>.hero__cta{order:4}
  .hero__copy>.hero__sub{order:5}
  .hero__copy>.hero__road{order:6}
  .hero__copy>.factpills{order:7}
  .hero__copy>.figures{order:8}
}
body:has(.hero) .pack__head{padding-top:44px;min-height:86px}
body:has(.hero) .pack__flag{left:0;right:0;width:auto;min-height:30px;
  display:flex;align-items:center;justify-content:center;padding:6px 14px}
body:has(.hero) .pack__perks li{padding-bottom:7px;border-bottom:1px dashed var(--line-2)}
body:has(.hero) .pack__perks li:last-child{padding-bottom:0;border-bottom:0}
@media (min-width:761px){
  body:has(.hero) .prices>.card--pack:not(.featured){margin-top:14px}
}
/*!SITE-HOME-CRIT-END*/

/*!CRITICAL-END*/
/* ---- sections */
.sec{padding:60px 0;position:relative}
.sec+.sec{border-top:1px solid var(--line)}
.sec--tint{background:var(--tint)}
.sec--panel{background:var(--panel)}
.sec--dark{background:var(--ink-deep);color:#dfe4ee}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark p,.sec--dark li{color:#c9d0de}
.sec--dark .eyebrow{color:#f7a397}
.sec--dark .eyebrow::before{background:var(--coral)}
.sec--dark a{color:#f7a397}
.sec--center{text-align:center}
.sec--center .sec__head{margin-inline:auto}
.sec__head{max-width:var(--measure);margin:0 0 26px}
.sec__head h2{margin:0 0 10px}
.sec__head p{color:var(--ink-2);margin:0}
.sec--dark .sec__head p{color:#c9d0de}

/* 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:#71d6a6}

/* ---- tables */
.tablewrap{overflow-x:auto;margin:0 0 1.2em;border:1px solid var(--line);
  border-top:2px solid var(--coral);border-radius:0 0 var(--radius) var(--radius);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:var(--ink);background:var(--tint);font-size:.9375rem}
tbody tr:nth-child(even){background:#fdfbf7}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--ink)}
.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:1px solid var(--line);
  border-radius:var(--radius);padding:20px 22px 20px 72px}
.step::before{
  counter-increment:s;content:counter(s);
  position:absolute;left:20px;top:18px;width:38px;height:38px;
  display:grid;place-items:center;
  background:var(--blush);color:var(--coral-deep);border:2px solid var(--coral);
  font-family:var(--display);font-weight:400;font-size:1.1rem;border-radius:50%;
}
.step h3{margin:0 0 6px}
.step p:last-child{margin:0}

/* ---- cards */
.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:var(--panel);border:1px solid var(--line);
  border-top:2px solid var(--coral);border-radius:0 0 var(--radius) var(--radius);
  padding:24px 22px 22px}
.card h3{margin:0 0 8px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.sec--dark .card{background:#262c3a;border-color:#3a4256;border-top-color:var(--coral)}

/* ---- callout, alert, quote, keypoints */
.callout{background:var(--blush);border:1px solid #f3d6cd;border-radius:var(--radius);
  padding:20px 22px;margin:0 0 1.2em}
.callout b:first-child{display:block;margin-bottom:6px;color:var(--coral-deep)}
.callout p:last-child{margin:0}
.alert{background:#fdf6ea;border:1px solid #eedfc0;border-left:3px solid var(--warn);
  border-radius:0 var(--radius) var(--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.34rem;font-weight:400;line-height:1.5;
  color:var(--ink);border-left:2px solid var(--coral);padding:4px 0 4px 22px;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:8px}
.keypoints{background:var(--panel);border:1px solid var(--line);border-top:2px solid var(--coral);
  border-radius:0 0 var(--radius) var(--radius);padding:20px 22px;margin:0 0 1.2em}
.keypoints>b{display:block;margin-bottom:8px}
.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:start;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, so a
   .tablewrap holding a 520px-min table keeps its column 520px wide however
   narrow the grid is. min-width:0 belongs on the items at every width. */
.split__img,.split__body{min-width:0}
.split__img img{width:100%;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--panel)}
.split__body p:last-child{margin:0}
/* A .split is a pair: the media and the paragraph that belongs to it start on
   the same line. Centring them put the first line of copy 107-191px below the
   top of its own image (measured across all six of these sites, 1440px), which
   reads as a figure stranded in the column with the text floating beside it.
   The cap stops a 1:1 artwork at 551px from dwarfing two paragraphs; wide panel
   shots are unaffected because their height is set by the column width. Desktop
   only - below 761px the split is one column and the image is already small. */
@media (min-width:761px){
  .split__img img{max-height:420px;width:auto;margin-inline:auto}
}


/* ---- 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.3rem;font-weight:400;
  color:#fff;line-height:1.1}
.stats div span{display:block;font-size:.9375rem;color:#c9d0de;margin-top:4px}

/* ---- label versus research */
.versus{display:grid;grid-template-columns:1.1fr 1fr 1.2fr;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;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:600;background:#fdfbf7}
.versus__h{background:var(--ink)!important;color:#fff;font-family:var(--text);
  font-weight:700;font-size:.92rem}

/* ---- ingredient cards */
.inglist{display:grid;gap:16px}
.inglist>*{min-width:0}
.ingcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 24px}
.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-weight:700;color:var(--coral-deep);
  background:var(--blush);border:1px solid #f3d6cd;padding:3px 12px;border-radius:999px;
  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:20px;
  align-items:stretch;margin:0 0 20px}
.card--pack{display:flex;flex-direction:column;background:var(--panel);
  border:1px solid var(--line);border-top:2px solid var(--line-2);
  border-radius:0 0 var(--radius-lg) var(--radius-lg);overflow:hidden;position:relative}
/* No lift on the featured card: a margin-top would make it taller than its
   siblings and break the one-height, one-baseline rule the pricing row is
   measured against. The coral head band, the keyline and the flag already make
   it unmistakable. */
.card--pack.featured{border-color:var(--coral);border-top-color:var(--coral);
  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;min-height:56px}
.card--pack.featured .pack__head{background:var(--ink);border-bottom-color:var(--ink)}
.card--pack.featured .pack__head b,.card--pack.featured .pack__head span{color:#fff}
.pack__head b{font-family:var(--display);font-size:1.18rem;font-weight:400}
.pack__head span{font-size:.8125rem;font-weight:600;color:var(--ink-3);margin-left:auto;
  text-align:right}
/* --coral is the rule colour; white 12px caps on it measured 3.64:1, under AA.
   --coral-d is the ramp's own "coral that can carry text" and clears it at 5.3:1. */
.pack__flag{position:absolute;right:0;top:0;background:var(--coral-d);color:#fff;
  font-family:var(--text);font-size:0.75rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;padding:5px 12px;z-index:3;border-radius:0 0 0 var(--radius)}
.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,164px);object-fit:contain;
  margin-inline:auto;margin-bottom:14px}
.pack__per{font-family:var(--display);font-size:2.4rem;font-weight:400;color:var(--ink);
  line-height:1;text-align:center;margin:0}
.pack__per sup{font-size:1rem;font-weight:400;top:-.8em}
.pack__unit{display:block;text-align:center;font-size:.875rem;font-weight:600;
  color:var(--ink-3);margin:5px 0 12px}
.pack__tot{display:flex;align-items:baseline;justify-content:center;gap:9px;margin:0 0 14px;
  font-size:1rem;min-height:27px}
.pack__tot b{font-weight:700}
.pack__was{color:var(--ink-3);text-decoration:line-through;font-weight:500}
.pack__perks{list-style:none;margin:0 0 18px;padding:0;font-size:.9375rem;min-height:116px}
.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;min-height:56px}
.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:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden}
.shots img{width:100%}
.shots figcaption{padding:16px 18px;border-top:2px solid var(--coral)}
.shots figcaption b{display:block;margin-bottom:5px;color:var(--ink)}
.shots figcaption span{font-size:.9375rem;color:var(--ink-2)}
figure.portrait img{width:var(--figw,320px);margin-inline:auto}
/* A lone figure in a two-column .shots row is capped at half the row by a rule
   fix_layout_breaks.py appends at the foot of this file, so that it does not
   stretch across both columns. That is right for a square product shot and
   wrong for the label artwork, which is 1396x626 of six-point type: it was
   rendering 552px wide at 1440, which is not readable. `shots--wide` opts that
   one figure up to the wide measure. It is still a figure rather than a banner.
   The selector repeats `.s2` on purpose. The appended rule scores (0,4,1) and
   lands AFTER this one in the file, so a tie loses: `.sec .shots--wide>figure...`
   is also (0,4,1) and was measured rendering 554px, unchanged. Carrying `.s2`
   as well makes it (0,6,1), which wins outright. Specificity arithmetic is
   worth doing on paper and then checking with a ruler. */
.sec .shots.s2.shots--wide>figure:last-child:nth-child(odd){max-width:var(--measure-wide)}

/* ---- seal wall */
.badgewall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:0 0 1.2em}
.badgewall.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.badgewall figure{margin:0;text-align:center;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px 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(--ink)}
.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);border-radius:999px;overflow:hidden}
.meter__bar i{display:block;height:100%;background:var(--coral)}
.stars{color:#c9822a;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);border-radius:var(--radius);overflow:hidden;
  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:600;font-size:1.0625rem;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;translate:0 -50%;
  font-size:1.36rem;font-weight:400;color:var(--coral-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.0625rem;color:var(--ink-2);margin:0 0 .6em}
/* The reference list prints each source's full URL as the link TEXT, and a URL
   is one unbreakable token. `anywhere` also lowers the element's min-content,
   which stops the ancestor being 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:1px solid var(--line);
  border-left:3px solid var(--coral);border-radius:0 var(--radius) var(--radius) 0;
  padding:22px 24px;margin:0 0 1.2em}
.byline__mark{flex:0 0 auto;width:54px;height:54px;display:grid;place-items:center;
  background:var(--ink);color:#fff;font-family:var(--display);font-weight:400;
  font-size:1.14rem;border-radius:50%}
.byline b{display:block;margin-bottom:6px;color:var(--ink)}
.byline p{font-size:.9688rem;color:var(--ink-2);margin:0}

/* ---- closing CTA */
.final{background:var(--panel);border:1px solid var(--line);border-top:2px solid var(--coral);
  border-radius:0 0 var(--radius) var(--radius);padding:30px 32px}
.final--media{display:grid;grid-template-columns:auto minmax(0,1fr);gap:30px;align-items:center}
.final__img img{width:200px}
.final h2{margin:0 0 10px}
.final__price{font-weight:600;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:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px 22px;text-decoration:none;color:var(--ink);
  transition:border-color .18s ease,transform .18s ease}
.rel a:hover{border-color:var(--coral);transform:translateY(-2px)}
.rel b{display:block;font-family:var(--display);font-size:1.12rem;font-weight:400;
  color:var(--ink);margin-bottom:5px}
.rel span{font-size:.9375rem;color:var(--ink-2)}

/* ---- forms. 16px minimum or iOS Safari zooms the page on focus. */
.form{display:grid;gap:16px;max-width:var(--measure)}
.field label{display:block;font-weight:600;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:var(--radius);
  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:var(--panel);border:1px solid var(--line);border-top:2px solid var(--coral);
  border-radius:0 0 var(--radius) var(--radius);padding:20px 24px;margin:0 0 28px}
.toc b{display:block;margin-bottom:8px;color:var(--ink)}
.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 article{background:var(--panel);border:1px solid var(--line);
  border-top:2px solid var(--coral);border-radius:0 0 var(--radius) var(--radius);
  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 CORAL KEYLINE BOX holding the contact facts, with the page
   index running along ONE WIDE ROW beneath it. */
.fcta{position:relative;background:var(--ink-deep);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__eye{display:inline-block;font-family:var(--text);font-size:.78125rem;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:#f7a397;margin-bottom:8px}
.fcta__h{font-family:var(--display);font-size:1.7rem;font-weight:400;line-height:1.25;margin:0 0 10px}
.fcta p{color:#c9d0de}
.fcta__sm{font-size:.9375rem;color:#a7b0c2;margin:12px 0 0}
.fcta__sm a,.fcta p a{color:#f7a397}
.fcta__img img{width:270px}
footer{background:var(--paper)}
.fkey{border:2px solid var(--coral);border-radius:var(--radius-lg);background:var(--panel);
  margin:44px 0 26px;padding:30px 32px}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:30px}
.fbrand{font-family:var(--display);font-size:1.8rem;font-weight:400;color:var(--ink);line-height:1}
.fbrand span{color:var(--coral-d)}
.frole{font-size:.9375rem;color:var(--ink-2);margin:8px 0 14px}
.fcard p{font-size:1.0625rem;color:var(--ink-2);margin:0 0 .7em}
.fcard b{color:var(--ink)}
.fh{font-family:var(--text);font-size:.78125rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 10px}
/* the page index: ONE wide row, wrapping, beneath the keyline box */
.findex{padding:0 0 22px}
.findex ul{display:flex;flex-wrap:wrap;gap:2px 22px;list-style:none;margin:0;padding: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:6px;margin-block:-6px;font-size:.9688rem;
  color:var(--ink-2);text-decoration:none}
footer li a:hover{color:var(--coral-d)}
.findex li{position:relative}
.findex li+li::before{content:"";position:absolute;left:-12px;top:50%;width:2px;height:2px;
  background:var(--line-2)}
.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{background:var(--tint);border-top:2px solid var(--coral);padding:28px 0 32px}
.disc p,.disc li{font-size:.9375rem;color:var(--ink-2)}
.disc b{color:var(--ink)}
.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(--coral)}
.copy{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line-2);font-size:.9375rem}

/* ---- sticky buy bar */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--ink-deep);
  color:#fff;transform:translateY(105%);transition:transform .25s ease;
  border-top:2px solid var(--coral)}
.buybar.show{transform:none}
.buybar__in{display:flex;align-items:center;gap:18px;max-width:var(--wrap);margin-inline:auto;
  padding:12px 26px}
.buybar__t{font-size:.9375rem;min-width:0}
.buybar__t b{display:block;font-size:1rem}
.buybar__t span{color:#c9d0de}
.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){
  .fgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:1040px){
  .ladder li:first-child{display:none}
}
@media (max-width:980px){
  :root{--navh:132px}
  .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:2px 0 10px}
  .answer{order:4}
  /* The CTA follows the Quick Answer directly on a phone, per hero.md's
     measured order. The roadmap line is useful and is not what somebody is
     looking for at y=800 on a 390px screen, so it moves below the button. */
  .hero__cta{order:5}
  .hero__road{order:6}
  .hero__sub{order:8}
  .factpills{order:10}
  .figures{order:11}
  .ladder{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(--line)}
  .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}
  .badgewall.g5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .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:26px 0 40px}
  /* The plate is the tallest single block on a stacked hero, and every pixel
     of it pushes the Quick Answer and the CTA down the phone. 230px still
     shows the label clearly at 390. */
  .hero__card{padding:10px}
  .hero__card img{max-width:218px}
  .answer{padding:16px 18px;margin:0 0 10px}
  .answer p{line-height:1.6}
  .hero__road{margin:14px 0 0}
  /* Five topline items wrap to three lines and eat 103px of an 844px screen.
     Keep role, guarantee and phone; the lot and the dose are on the pages that
     need them. */
  .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}
  .pack__perks{min-height:0}
  .shots,.shots.s2{grid-template-columns:1fr}
  /* MEASURED DEFECT, 19 Sep 2026: a lone figure rendered 159px inside a 338px
     slot on index, supplement-facts and about. The cause is the rule
     fix_layout_breaks.py appends at the foot of this file, which caps a lone
     figure at half the row so it cannot stretch across BOTH columns. Below
     760px the grid is ONE column, so there is no second column to stretch into
     and the cap simply halves the figure.
     Overridden here rather than in the shared tool, and with one extra class in
     the selector so a re-append cannot undo it: that tool writes AFTER this
     query, so source order is no defence and only specificity is. */
  .sec .shots.s2>figure:last-child:nth-child(odd){max-width:100%;grid-column:1/-1}
  .badgewall,.badgewall.g5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .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)}
  /* At one column the three .versus__h bars stop labelling anything: a reader
     meets a stack of three titles and then nine unlabelled cells. Hide the bars
     and let every cell carry its own heading from data-l instead. */
  .versus__h{display:none}
  .versus>div[data-l]::before{content:attr(data-l);display:block;margin-bottom:3px;
    font-size:.8125rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    color:var(--ink-2)}
  /* The dose chip is white-space:nowrap and margin-left:auto, so on a narrow
     card it gets pushed onto a line with no room for it and overhangs. */
  .ing__dose{margin-left:0;white-space:normal}
  .disc__list{columns:1}
  .figures{grid-template-columns:1fr;gap:8px}
  .fkey{padding:24px 22px;margin-top:34px}
  .fgrid{grid-template-columns:1fr;gap:22px}
  .findex ul{gap:0 18px}
  .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}
  .hero__card img{max-width:198px}
}

/* ---- hero: the plate breathes, the bottle never does ----------------------
   Transform only, NEVER opacity: the bottle is the LCP element and an element
   starting at opacity:0 is not recorded as painted. The float is on the CARD,
   never on the <img>, which is preloaded. */
@media (prefers-reduced-motion:no-preference){
  .hero__card{animation:geFloat 9s ease-in-out infinite}
  @keyframes geFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
}

/* ---- 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 because this
   header is two rows and its height changes between breakpoints.

   Requires .hero NOT to clip on the block axis: any non-visible overflow on an
   ancestor becomes the scrollport sticky resolves against. */
@media (min-width: 981px) {
  .hero__grid { align-items: start; }
  .hero__media {
    position: sticky;
    top: calc(var(--navh, 150px) + 14px);
    align-self: start;
    min-height: calc(100vh - var(--navh, 150px) - 28px);
    min-height: calc(100svh - var(--navh, 150px) - 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 share their edges, their image slot and
   their button baseline. The vendor pack shots are all 1125x1125 here, but the
   perk lists are different lengths, so the button needs margin-top:auto and the
   perk list needs a floor or the three CTAs land at three heights.

   The image 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 on
   the next build and CLS gets worse. */
.card--pack{display:flex;flex-direction:column}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,164px);
  object-fit:contain;margin-inline:auto;margin-bottom:14px}
.card--pack>.btn{margin-top:auto}

/* ==== fix_layout_breaks.py ==== */
/* A figure alone on its row, and components whose own
   background fights the band they sit in. Appended: each
   rule below is correct in isolation and only their
   combination fails, so the originals stay as written. */
.shots.s2>figure:last-child:nth-child(odd){grid-column:1/-1;max-width:calc((100% - 20px) / 2);margin-inline:auto}

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

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

/*!SITE-HOME-PAINT-START*/
/* ---- home page: modern surface --------------------------------------------
   Slot: circulate / card 24px / control 16px / single soft lift / full-width
   ribbon. Paint only -- radius, shadow, background, colour, transition -- so
   this sits below the critical marker and needs a restamp, not a rebuild.

   Every selector is scoped with body:has(.hero). class="hero" is on
   index.html and on no other page of this site, so the scope is the home page
   exactly; .card, .btn, .card--pack, .tablewrap and the footer all appear on
   the other 30 pages and are deliberately left as they are.

   Every selector is also one step more specific than modern_surface.py's,
   which strips and re-appends its own block AFTER this one on every build.
   Beaten on specificity, never on source order. */
:root{
  --evo-r-card:24px;
  --evo-r-ctl:16px;
  --evo-shade:0 12px 30px rgba(42,48,64,.11);
  --evo-shade-hi:0 18px 44px rgba(42,48,64,.17);
  --evo-shade-coral:0 12px 30px rgba(187,59,43,.28);
  --evo-shade-coral-hi:0 18px 44px rgba(187,59,43,.36);
  --evo-ease:cubic-bezier(.22,.7,.3,1);
}

/* --- panels: one card radius, one depth.
   The depth is a SINGLE wide stop, tinted with this site's own ink (42,48,64)
   and never neutral black. No contact shadow: the slot's depth language is one
   soft lift, and a second tight stop under it is what makes these pages read
   like every other page in the estate. */
body:has(.hero) .card,
body:has(.hero) .card--pack,
body:has(.hero) .step,
body:has(.hero) .keypoints,
body:has(.hero) .callout,
body:has(.hero) .alert,
body:has(.hero) .toc,
body:has(.hero) .byline,
body:has(.hero) .posts article,
body:has(.hero) .shots figure,
body:has(.hero) .badgewall figure,
body:has(.hero) .tablewrap,
body:has(.hero) .faq,
body:has(.hero) .ingcard,
body:has(.hero) .final,
body:has(.hero) .split__img,
body:has(.hero) .hero__card{border-radius:var(--evo-r-card);box-shadow:var(--evo-shade)}

/* The Quick Answer keeps its square left edge: the 3px coral rule runs down
   it, and a rule that bends is not the same idea. */
body:has(.hero) .answer{border-radius:0 var(--evo-r-card) var(--evo-r-card) 0;
  background:linear-gradient(180deg,#ffffff 0%,#fffaf8 100%);
  box-shadow:var(--evo-shade)}

/* Small objects take the CONTROL radius, so the page reads as two sizes of
   corner rather than five. The figure boxes keep their square coral top. */
body:has(.hero) .figures div{border-radius:0 0 var(--evo-r-ctl) var(--evo-r-ctl);
  box-shadow:var(--evo-shade)}
body:has(.hero) .factpills li{box-shadow:0 6px 16px rgba(42,48,64,.07)}

/* --- controls.
   The gradient is on the BUYING button and nowhere else; the secondary button
   is left solid, so the pair reads as two weights rather than two colours.
   White on the gradient's lightest stop (#cf4837) measures 4.53:1 -- the same
   stop the sheet already shipped, and the reason it is not lightened. */
body:has(.hero) .btn{border-radius:var(--evo-r-ctl);
  transition:transform .22s var(--evo-ease),box-shadow .22s ease,background .22s ease}
body:has(.hero) .btn:focus-visible{outline:3px solid var(--coral-d);outline-offset:3px}
body:has(.hero) .btn--coral{
  background:linear-gradient(135deg,#cf4837 0%,#c1402f 46%,#a4321f 100%);
  box-shadow:var(--evo-shade-coral)}
body:has(.hero) .btn--coral:hover{
  background:linear-gradient(135deg,#c73f2e 0%,#b0372a 46%,#8f2a1a 100%);
  box-shadow:var(--evo-shade-coral-hi);filter:none;transform:translateY(-2px)}
body:has(.hero) .btn--ghost{background:var(--panel);
  box-shadow:inset 0 0 0 1.5px var(--line-2),0 8px 20px rgba(42,48,64,.07)}
body:has(.hero) .btn--ghost:hover{background:var(--blush);color:var(--coral-deep);
  filter:none;transform:translateY(-2px);
  box-shadow:inset 0 0 0 1.5px var(--coral-d),0 14px 32px rgba(42,48,64,.11)}
body:has(.hero) .btn:active{transform:translateY(0)}

/* --- the pricing row.
   The raise itself is geometry and lives above the marker. What is here is the
   colour: the recommended tier is the only warm card in the row and the only
   coral ribbon, and the other ribbon is slate, so the row has one winner
   rather than two flags competing. White on the coral bar's lightest stop is
   4.53:1 and on the slate bar's lightest stop 10.0:1. */
body:has(.hero) .card--pack{transition:box-shadow .24s ease,transform .24s var(--evo-ease)}
body:has(.hero) .card--pack:hover{box-shadow:var(--evo-shade-hi);transform:translateY(-2px)}
body:has(.hero) .card--pack.featured{border-color:var(--coral);
  background:linear-gradient(180deg,#ffffff 0%,#fdf3ef 100%);
  box-shadow:var(--evo-shade-hi)}
body:has(.hero) .card--pack.featured:hover{box-shadow:0 22px 54px rgba(42,48,64,.22);
  transform:translateY(-2px)}
body:has(.hero) .pack__flag{border-radius:0;letter-spacing:.14em;
  background:linear-gradient(90deg,#1e232f 0%,#3a4256 100%)}
body:has(.hero) .card--pack.featured .pack__flag{
  background:linear-gradient(90deg,#8f2a1a 0%,#bb3b2b 52%,#cf4837 100%)}
body:has(.hero) .pack__perks li{border-bottom-color:rgba(42,48,64,.18)}

@media(prefers-reduced-motion:reduce){
  body:has(.hero) .card--pack:hover,
  body:has(.hero) .card--pack.featured:hover,
  body:has(.hero) .btn--coral:hover,
  body:has(.hero) .btn--ghost:hover,
  body:has(.hero) .btn:active{transform:none}
}
/*!SITE-HOME-PAINT-END*/
/* ==== 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 16 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 (42,48,64), 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(42,48,64,.06), 0 6px 18px rgba(42,48,64,.07);
  --lift:0 2px 6px rgba(42,48,64,.09), 0 16px 34px rgba(42,48,64,.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,
.keypoints,
.alert,
.toc,
.byline,
.posts article,
.tablewrap,
.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 ==== */
.review-foot{margin:0;padding:.6rem 0;font-size:.92rem}.review-foot a{font-weight:600}