/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Zilla Slab Fallback";src:local("Georgia");font-weight:400;size-adjust:98.16%;ascent-override:96.17%;descent-override:26.08%;line-gap-override:0.00%}
@font-face{font-family:"Zilla Slab Fallback";src:local("Georgia Bold");font-weight:600 900;size-adjust:85.95%;ascent-override:109.83%;descent-override:29.78%;line-gap-override:0.00%}
@font-face{font-family:"Catamaran Fallback";src:local("Arial");font-weight:400;size-adjust:93.25%;ascent-override:117.97%;descent-override:57.91%;line-gap-override:0.00%}
@font-face{font-family:"Catamaran Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:91.63%;ascent-override:120.05%;descent-override:58.93%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* myartivorin.com — Artivorin, U.S. authorized retailer desk.
   Design slot row 300 (batch8_assignments.py): Zilla Slab / Catamaran, a warm
   clay ground with charcoal bands, a masthead built as ONE long horizontal rule
   with the name sitting on it, and a footer whose contact details live in a
   raised card that overlaps the block beneath.

   The rule is the whole idea. A single 2px charcoal line runs the full width of
   the viewport through the middle of the masthead; the wordmark, the menu and
   the order button each sit on their own clay plate, so the line survives only
   in the gaps between them. Nothing else on the estate builds a header that
   way, and it is what keeps this desk off the other slab-and-paper sites.

   Colour is taken from the bottle, which is navy and white with a pale steel
   wave across the label. The clay and the charcoal are the slot's; the navy is
   the product's.

   Type: Zilla Slab tops out at 700, so every heading is 700 and the heavier
   weights live in Catamaran, which goes to 800. Asking for a weight a family
   does not ship gives you a synthesised bold and nothing reports it.

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

/* ---- tokens */
:root{
  --ink:#241f1a;            /* body text on clay */
  --ink-2:#554b41;          /* secondary */
  --ink-3:#7d7166;          /* captions, meta */
  --char:#2b2724;           /* the charcoal band */
  --char-d:#1b1815;         /* the deepest band */
  --char-2:#3c3630;
  --blue:#1d4e89;           /* the label's navy */
  --blue-d:#123762;
  --steel:#5b8ac6;          /* the pale wave across the label */
  --wash:#e6ecf4;           /* a cool wash on clay */
  --paper:#f4ece3;          /* the page: warm clay */
  --panel:#fffaf4;          /* raised surfaces */
  --tint:#e9ded1;           /* the deeper clay band */
  --line:#ddd0c0;
  --line-2:#c6b5a1;
  --good:#2f6b4f;
  --warn:#7a5a23;
  --wrap:1180px;
  --measure:740px;
  --measure-wide:960px;
  --radius:0px;
  --radius-lg:0px;
  --shadow:4px 4px 0 var(--line-2);
  --shadow-lg:8px 8px 0 var(--char);
  --navh:112px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --display:"Zilla Slab","Zilla Slab Fallback",Georgia,"Times New Roman",serif;
  --text:Catamaran,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:17.5px;line-height:1.72;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-underline-offset:3px}
a:hover{color:var(--blue-d)}
h1,h2,h3,h4{font-family:var(--display);color:var(--char-d);font-weight:700;line-height:1.18;margin:0 0 .5em}
h1{font-size:clamp(2rem,1.25rem + 2.3vw,3.05rem);letter-spacing:-.018em}
h2{font-size:clamp(1.48rem,1.14rem + 1.25vw,2.15rem);letter-spacing:-.012em}
h3{font-size:1.22rem}
h4{font-size:1.05rem}
p,li{font-size:1.09rem}
p{margin:0 0 1.05em}
b,strong{font-weight:700;color:var(--char-d)}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
.skip{position:absolute;left:-9999px;top:0;background:var(--char-d);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

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

/* ---- buttons: square, keylined, with a hard offset shadow rather than a blur */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;padding:15px 30px;
  font-family:var(--text);font-size:1.02rem;font-weight:800;letter-spacing:.01em;
  border:2px solid var(--char-d);border-radius:var(--radius);cursor:pointer;
  text-decoration:none;background:var(--blue);color:#fff;
  box-shadow:4px 4px 0 var(--char-d);
  transition:transform .16s var(--ease),box-shadow .16s var(--ease);
}
.btn:hover{color:#fff;transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--char-d)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--char-d)}
.btn--cyan{background:var(--blue)}
.btn--lg{min-height:62px;padding:17px 36px;font-size:1.1rem}
.btn--ghost{background:var(--panel);color:var(--char-d);box-shadow:4px 4px 0 var(--line-2)}
.btn--ghost:hover{background:#fff;color:var(--char-d);box-shadow:6px 6px 0 var(--line-2)}
.btn--wide{width:100%}

/* ---- masthead: one long horizontal rule, everything sitting on it.
   padding-BLOCK, never the shorthand: .nav__top also carries .wrap, and
   `padding:16px 0` would set padding-inline to 0 and wipe the page gutter --
   invisible above the container max-width, and no overflow test can see it
   (pitfall 46). */
.nav{position:sticky;top:0;z-index:100;background:var(--paper);overflow-x:clip;overflow-y:visible;border-bottom:1px solid var(--line)}
.nav__top{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:0 18px;padding-block:16px}
.nav__top::before{
  content:"";position:absolute;left:calc(50% - 50vw);right:calc(50% - 50vw);
  top:calc(50% - 1px);height:2px;background:var(--char);z-index:0;
}
.brand{position:relative;z-index:1;display:flex;align-items:center;gap:12px;
  text-decoration:none;color:var(--char-d);background:var(--paper);padding-right:18px}
.brand>svg{width:36px;height:36px;flex:0 0 auto}
/* Size the mark by ELEMENT as well as by class. brand_marks.py rewrites the
   <svg> inside .brand and does not carry class="brand__glyph" onto the
   replacement, so a rule keyed only to that class stops applying the moment the
   tool runs and the glyph renders at its intrinsic size -- a masthead two
   different heights on one site (pitfall 16). */
.brand__glyph{width:36px;height:36px;flex:0 0 auto}
.bw{display:flex;flex-direction:column;line-height:1.06}
.bw b{font-family:var(--display);font-size:1.52rem;font-weight:700;letter-spacing:-.018em;color:var(--char-d)}
.bw b em{font-style:normal;color:var(--blue)}
.bw small{font-family:var(--text);font-size:0.9062rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}
.menu{
  position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;
  gap:0 22px;list-style:none;margin:0;padding:0 18px;background:var(--paper);
}
.menu a{
  display:inline-block;padding:9px 0;font-family:var(--text);
  font-size:.96rem;font-weight:700;color:var(--ink-2);text-decoration:none;
  border-bottom:2px solid transparent;
}
.menu a:hover{color:var(--char-d);border-bottom-color:var(--line-2)}
.menu a[aria-current="page"]{color:var(--blue);border-bottom-color:var(--blue)}
.menu__more{display:none}
.nav__rail{position:relative;z-index:1;margin-left:auto;display:flex;align-items:center;
  gap:16px;background:var(--paper);padding-left:18px}
.nav__price{text-align:right;line-height:1.2}
.nav__price b{display:block;font-family:var(--display);font-size:1.2rem;font-weight:700;color:var(--char-d)}
.nav__price span{font-size:.8rem;font-weight:600;color:var(--ink-3)}
.nav__buy{min-height:46px;padding:11px 20px;font-size:.96rem;box-shadow:3px 3px 0 var(--char-d)}
.burger{
  display:none;width:48px;height:46px;background:var(--panel);border:2px solid var(--char-d);
  border-radius:var(--radius);cursor:pointer;padding:12px 11px;
}
.burger span{display:block;height:2px;background:var(--char-d);margin:0 0 5px}
.burger span:last-child{margin:0}

/* ---- hero: copy LEFT, the bottle RIGHT standing on a charcoal band */
.hero{position:relative;background:var(--paper);padding:52px 0 58px;overflow-x:clip}
.hero__grid{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:44px;align-items:center}
.hero__copy{display:flex;flex-direction:column;min-width:0}
.hero h1{margin:0 0 18px}
.hero h1 em{font-style:normal;color:var(--blue)}
.answer{
  background:var(--panel);border:2px solid var(--char-d);
  border-radius:var(--radius);padding:20px 24px;margin:0 0 18px;
  box-shadow:4px 4px 0 var(--line-2);
}
.answer p{margin:0 0 .75em;font-size:1.12rem}
.answer p:last-child{margin:0}
.hero__road{font-size:1.03rem;color:var(--ink-2);margin:0 0 20px;max-width:56ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 20px}
.hero__sub{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 0 18px;font-size:1rem;
  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:800}
.factpills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 18px;padding:0}
.factpills li{
  font-size:.92rem;font-weight:600;color:var(--ink-2);background:var(--panel);
  border:1px solid var(--line-2);padding:7px 14px;border-radius:var(--radius);
}
.factpills li b{color:var(--char-d);font-weight:800}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.figures div{background:var(--panel);border:2px solid var(--char-d);padding:13px 15px;min-width:0}
.figures b{display:block;font-family:var(--display);font-size:1.6rem;font-weight:700;
  color:var(--blue);line-height:1.1}
.figures span{display:block;font-size:0.9062rem;font-weight:600;color:var(--ink-3);margin-top:3px}
/* the product stands on a charcoal band, no card behind it */
.hero__media{position:relative;align-self:center}
.hero__card{position:relative;z-index:2;text-align:center;padding:10px 10px 0}
.hero__card::before{
  content:"";position:absolute;left:-10%;right:-10%;bottom:0;height:92px;
  background:var(--char);z-index:0;
}
.hero__card img{position:relative;z-index:3;width:100%;max-width:430px;height:auto;
  margin-inline:auto;filter:drop-shadow(0 22px 30px rgba(27,24,21,.34))}
.hero__cap{position:relative;z-index:3;margin:0;padding:14px 10px 20px;
  font-size:.92rem;font-weight:700;color:#e9dfd2;text-align:center}
.trust__row{display:flex;flex-wrap:wrap;gap:10px 22px;margin:0;padding:0;list-style:none;
  font-size:.96rem;font-weight:600;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:800}

/* ---- inner page head */
.phead{padding:34px 0 12px;background:var(--tint);border-bottom:2px solid var(--char)}
.crumbs{font-size:.92rem;color:var(--ink-3);margin:0 0 14px}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--blue)}
.phead h1{margin:0 0 16px;max-width:var(--measure-wide)}
.phead .answer{max-width:var(--measure-wide)}
.lead{font-size:1.2rem;color:var(--ink-2);max-width:var(--measure)}

/* ---- 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 -- getexitide shipped without one, pushed the lot into
   the menu as a chip, crowded the navigation and still left the other four
   facts off the page (hero.md). 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(--char-d);color:#c4b9ac;font-size:.86rem;line-height:1.5}
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;padding-block:8px}
.util__item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.util__item+.util__item::before{content:"";width:12px;height:1px;background:#6a5f54;
  flex:0 0 auto;margin-right:11px}
.util b{color:#f4ece3;font-weight:700}
.util a{color:inherit;text-decoration:none}
.util a:hover{text-decoration:underline}
@media (max-width:760px){
  /* Five items wrap to three lines and eat 103px of an 844px screen (hero.md).
     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}
}

/* ---- hero motif -- hinge-ease ---------------------------------------- */
.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(168deg,#f4ece3,#e5ded5 56%,#f4ece3)}.hero__media::before{content:'';position:absolute;left:50%;top:-14%;width:150%;aspect-ratio:1;translate:-50% 0;border-radius:50%;border:2px solid rgba(29,78,137,0.34);border-right-color:transparent;border-bottom-color:transparent;animation:avHinge 7s cubic-bezier(.4,0,.2,1) infinite;z-index:0;pointer-events:none}.hero__media::after{content:'';position:absolute;left:50%;top:48%;width:88%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,rgba(29,78,137,0.20),rgba(108,140,178,0.10) 58%,transparent 74%);animation:avEase 7s ease-in-out infinite;z-index:0;pointer-events:none}@keyframes avHinge{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}}@keyframes avEase{0%,100%{scale:.84;opacity:.45}50%{scale:1.06;opacity:.9}}
@media(prefers-reduced-motion:reduce){.hero__card{animation:none!important}.hero__media::before,.hero__media::after{animation:none!important;opacity:0!important}}

/* --- 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:6px 0 20px}
  .hero__road{order:5}
  .hero__cta{order:6}
  .hero__sub{order:8}
}
@media (max-width:760px){
  .hero{padding:34px 0 42px}
}
@media (min-width: 981px){
  .hero__media{position: sticky; top: calc(var(--navh, 88px) + 14px); align-self: start; min-height: calc(100vh - var(--navh, 88px) - 28px); min-height: calc(100svh - var(--navh, 88px) - 28px); display: flex; flex-direction: column; align-items: center; justify-content: center;}
}
@media (prefers-reduced-motion: reduce){
  .hero__media{position: relative; top: 0; min-height: 0;}
}
@media (max-width:760px){
  body:has(.hero) .pack__flag{left:auto; right:0; top:0; bottom:auto; border-radius:0 14px 0 var(--av-ctl); box-shadow:none;}
}
/* --- end of the copied hero responsive rules --- */

/*!SITE-HOME-CRIT-START*/
/* ---- home page only: the modern pass, geometry half --------------------
   Above the marker because every declaration below moves a box, and the
   block above the marker is inlined into the <head> of every page at build
   time. A restamp alone would leave the old copy in ~30 heads, so this
   needs `python build.py`.

   Scope: .hero exists on index.html and nowhere else on this site, so a
   selector starting `.hero ` is already home-only; body:has(.hero) is the
   same gate for .prices and the pack cards, which are shared with
   pricing.html. */

/* Desktop reading order: eyebrow, headline, the quick answer, THE BUTTONS,
   the payment line, then the evidence. Measured at 1440x900 before the
   change: the primary CTA sat at y=791-859 with only 41px of fold left,
   the secondary button ran to 941 and the payment line to 1024, both past
   the 900px fold. Lifting the roadmap paragraph below the pair puts the
   whole buying block on the first screen.

   The PHONE order is composed separately at <=980px with display:contents
   and its own order values, and is deliberately left alone. */
@media (min-width:981px){
  .hero .hero__copy>.eyebrow{order:1}
  .hero .hero__copy>h1{order:2}
  .hero .hero__copy>.answer{order:3}
  .hero .hero__copy>.hero__cta{order:4}
  .hero .hero__copy>.hero__sub{order:5}
  .hero .hero__copy>.hero__road{order:6}
  .hero .hero__copy>.factpills{order:7}
  .hero .hero__copy>.figures{order:8}
  .hero .hero__cta{margin-top:2px;margin-bottom:14px}
  .hero .hero__sub{margin-bottom:22px}
  .hero .hero__road{margin-bottom:18px}
}

/* The pricing ribbons become tabs standing ABOVE the card edge, so the row
   needs the clearance; 26px of padding on the grid, and the recommended
   card raised with margin-top and NOT transform, because the reveal pass
   sets transform:none on everything it has revealed. Both cards keep their
   bottom on the grid line, so the three Add To Cart buttons keep the single
   baseline the row is engineered for -- measured after, not assumed.
   The raise is held above 760px: below that the grid is one column and the
   featured card is ordered first, where a negative margin would pull it
   into the section heading. */
body:has(.hero) .prices{padding-top:36px}
@media (min-width:761px){
  body:has(.hero) .card--pack.featured{margin-top:-14px}
}
body:has(.hero) .pack__perks li+li{border-top:1px dashed var(--line-2);padding-top:7px}
/*!SITE-HOME-CRIT-END*/

/*!CRITICAL-END*/
/* ---- sections */
.sec{padding:60px 0;position:relative}
.sec--tint{background:var(--tint)}
.sec--panel{background:var(--panel)}
.sec--dark{background:var(--char);color:#ded5c9}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark p,.sec--dark li{color:#ccc2b6}
.sec--dark .eyebrow{color:#9dbde6}
.sec--dark .eyebrow::before{background:#9dbde6}
.sec--dark a{color:#a8c8f0}
.sec--center{text-align:center}
.sec--center .sec__head{margin-inline:auto}
/* the charcoal band, repeated as a section edge */
.sec--band{background:var(--panel);border-top:10px solid var(--char);border-bottom:10px solid var(--char)}
.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:#ccc2b6}

/* 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:800}
.sec--dark .ticks li::before{color:#7fc9a3}

/* ---- tables */
.tablewrap{overflow-x:auto;margin:0 0 1.2em;border:2px solid var(--char-d);background:var(--panel)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:1.03rem}
th,td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--text);font-weight:800;color:#fff;background:var(--char);font-size:.94rem;
  letter-spacing:.03em}
tbody tr:nth-child(even){background:#fdf8f2}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--char-d)}
.tnote{font-size:.97rem;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:2px solid var(--char-d);
  padding:20px 22px 20px 72px;min-width:0}
.step::before{
  counter-increment:s;content:counter(s);
  position:absolute;left:20px;top:19px;width:38px;height:38px;
  display:grid;place-items:center;
  background:var(--blue);color:#fff;
  font-family:var(--display);font-weight:700;font-size:1.08rem;
}
.step h3{margin:0 0 6px}
.step p:last-child{margin:0}

/* ---- cards: a charcoal rule across the top edge */
.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:2px solid var(--char-d);
  border-top-width:8px;padding:24px 22px 22px;min-width:0;
  transition:transform .16s var(--ease),box-shadow .16s var(--ease)}
.card:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--line-2)}
.card h3{margin:0 0 8px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.sec--dark .card{background:var(--char-2);border-color:#5a5148}
.sec--dark .card:hover{box-shadow:6px 6px 0 #5a5148}

/* ---- callout, alert, quote, keypoints */
.callout{background:var(--wash);border:2px solid var(--blue-d);padding:20px 22px;margin:0 0 1.2em}
.callout b:first-child{display:block;margin-bottom:6px;color:var(--blue-d)}
.callout p:last-child{margin:0}
.alert{background:#f8efdd;border:2px solid var(--warn);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:500;line-height:1.5;
  color:var(--char-d);border-left:6px solid var(--blue);padding:4px 0 4px 22px;margin:0 0 1.2em}
.pullquote cite{display:block;font-family:var(--text);font-size:.97rem;font-style:normal;
  font-weight:400;color:var(--ink-3);margin-top:8px}
.keypoints{background:var(--panel);border:2px solid var(--char-d);border-left-width:8px;
  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:center;margin:0 0 1.2em}
.split--flip .split__img{order:2}
/* A grid item's default min-width is auto, which floors at MIN-CONTENT. A
   .tablewrap holding a 520px-min table therefore keeps its column 520px wide
   however narrow the grid is. min-width:0 is the fix, and it belongs on the
   items at every width rather than only in the media query. */
.split__img,.split__body{min-width:0}
.split__img img{width:100%;border:2px solid var(--char-d);background:var(--panel)}
.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{min-width:0}
.stats div b{display:block;font-family:var(--display);font-size:2.3rem;font-weight:700;
  color:#fff;line-height:1.1}
.stats div span{display:block;font-size:.97rem;color:#c4b9ac;margin-top:4px}

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

/* ---- ingredient cards */
.inglist{display:grid;gap:16px}
/* Same family as the .split fix above. .ingcard is a grid ITEM, and a grid
   item's default min-width is auto -- so the card cannot shrink below its
   min-content. `.ing__dose` is white-space:nowrap and sets that floor.
   min-width:0 lets the card shrink; .ingcard__top already wraps, so the chip
   drops onto its own line and fits. */
.inglist>*{min-width:0}
.ingcard{background:var(--panel);border:2px solid var(--char-d);padding:22px 24px;min-width:0}
.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:.97rem;font-style:italic;color:var(--ink-3)}
.ing__dose{margin-left:auto;font-size:.94rem;font-weight:800;color:#fff;background:var(--char);
  padding:4px 12px;white-space:nowrap}
.ingcard p:last-child{margin:0}

/* ---- add-to-cart pricing panel */
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
  align-items:stretch;margin:0 0 20px}
.card--pack{display:flex;flex-direction:column;background:var(--panel);
  border:2px solid var(--char-d);border-top-width:2px;overflow:hidden;position:relative;min-width:0}
/* A pricing row shares one height and one button baseline, so the card lift
   that every other .card gets is cancelled here. The featured card keeps its
   shadow, which is a colour cue rather than a layout one. */
.card--pack:hover{transform:none;box-shadow:none}
.card--pack.featured:hover{box-shadow:8px 8px 0 var(--blue)}
/* No lift on the featured card. A `margin-top:-12px` raises its box, which
   makes it taller than its siblings and trips responsive.md's rule that a
   pricing row shares one height and one button baseline. The card is already
   unmistakable from its accent border, its coloured head band and its flag. */
.card--pack.featured{border-color:var(--blue);box-shadow:8px 8px 0 var(--blue)}
.pack__head{background:var(--tint);border-bottom:2px solid var(--char-d);padding:14px 20px;
  display:flex;align-items:center;gap:10px;min-width:0}
.card--pack.featured .pack__head{background:var(--blue);border-bottom-color:var(--blue)}
.card--pack.featured .pack__head b,.card--pack.featured .pack__head span{color:#fff}
.pack__head b{font-family:var(--display);font-size:1.16rem;font-weight:700}
.pack__head span{font-size:.86rem;font-weight:700;color:var(--ink-3);margin-left:auto;white-space:nowrap}
.pack__flag{position:absolute;right:0;top:0;background:var(--char-d);color:#fff;
  font-family:var(--text);font-size:0.8438rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;padding:5px 13px;z-index:3}
.pack__body{display:flex;flex-direction:column;flex:1;padding:20px 20px 22px;min-width:0}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,168px);object-fit:contain;
  margin-inline:auto;margin-bottom:14px}
.pack__per{font-family:var(--display);font-size:2.4rem;font-weight:700;color:var(--char-d);
  line-height:1;text-align:center;margin:0}
.pack__per sup{font-size:1rem;font-weight:700;top:-.7em}
.pack__unit{display:block;text-align:center;font-size:.92rem;font-weight:700;color:var(--ink-3);
  margin:4px 0 12px}
.pack__tot{display:flex;align-items:baseline;justify-content:center;gap:9px;margin:0 0 14px;
  font-size:1.03rem}
.pack__tot b{font-weight:800}
.pack__was{color:var(--ink-3);text-decoration:line-through;font-weight:600}
.pack__perks{list-style:none;margin:0 0 18px;padding:0;font-size:.97rem}
.pack__perks li{position:relative;padding-left:24px;margin:0 0 6px;color:var(--ink-2);font-size:1.062rem}
.pack__perks li::before{content:"\2713";position:absolute;left:0;color:var(--good);font-weight:800}
.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:.92rem;color:var(--ink-3)}
.buy__note{font-size:.97rem;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))}
/* A single figure dropped into the two-column grid renders at half width with a
   hole beside it. s1 gives it the row and caps the measure so a 1200px square
   does not become a 1136px square. */
.shots.s1{grid-template-columns:minmax(0,1fr)}
.shots.s1 figure{max-width:760px;margin-inline:auto}
.shots>*{min-width:0}
.shots figure{margin:0;background:var(--panel);border:2px solid var(--char-d);overflow:hidden}
.shots img{width:100%}
.shots figcaption{padding:16px 18px}
.shots figcaption b{display:block;margin-bottom:5px;color:var(--char-d)}
.shots figcaption span{font-size:1rem;color:var(--ink-2)}
figure.portrait img{width:var(--figw,320px);margin-inline:auto}

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

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

/* ---- FAQ. Padding on <summary>, which is the click target (pitfall 73). */
.faq{border:2px solid var(--char-d);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(--display);font-weight:700;font-size:1.1rem;color:var(--char-d)}
.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.4rem;font-weight:400;color:var(--blue)}
.faq details[open] summary::after{content:"\2212"}
.faq__body{padding:0 20px 18px}
.faq__body p:last-child,.faq__body ul:last-child{margin-bottom:0}

/* ---- references and byline */
.refs{margin:0 0 1.2em}
.refs ol{padding-left:22px;margin:0}
.refs li{font-size:1.062rem;color:var(--ink-2);margin:0 0 .6em}
/* The reference list prints each source's full URL as the link TEXT, and a URL
   is one unbreakable token. At 390 that pushes a single <a> past the viewport,
   clipped and unscrollable. `anywhere` rather than `break-word` because it also
   lowers the element's MIN-CONTENT, which is what 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:2px solid var(--char-d);
  border-left-width:8px;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(--blue);color:#fff;font-family:var(--display);font-weight:700;font-size:1.1rem}
.byline b{display:block;margin-bottom:6px;color:var(--char-d)}
.byline p{font-size:1rem;color:var(--ink-2);margin:0}
.byline>div{min-width:0}

/* ---- closing CTA */
.final{background:var(--panel);border:2px solid var(--char-d);border-top-width:10px;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:230px}
.final h2{margin:0 0 10px}
.final__price{font-weight:700;color:var(--ink-2)}
.final__sm{font-size:.97rem;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:2px solid var(--char-d);padding:20px 22px;
  text-decoration:none;color:var(--ink);transition:transform .16s var(--ease),box-shadow .16s var(--ease)}
.rel a:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--line-2)}
.rel b{display:block;font-family:var(--display);font-size:1.12rem;color:var(--char-d);margin-bottom:5px}
.rel span{font-size:.97rem;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-weight:700;font-size:1rem;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;font-family:var(--text);font-size:16px;
  padding:13px 14px;border:2px solid var(--char-d);border-radius:var(--radius);
  background:var(--panel);color:var(--ink)}
.field textarea{min-height:140px;resize:vertical}
.field small{display:block;font-size:.92rem;color:var(--ink-3);margin-top:5px}

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

/* ---- footer: a raised contact card overlapping the charcoal link block.
   The card is clay on charcoal and hangs 54px into the block beneath it, which
   is the slot's whole footer idea. Scoped to >=981px: below that the grid
   stacks and the card would overlap the link columns instead. */
.fcta{position:relative;background:var(--char);color:#fff;padding:52px 0 52px}
.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:.86rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:#9dbde6;margin-bottom:8px}
.fcta__h{font-family:var(--display);font-size:1.7rem;font-weight:700;line-height:1.22;margin:0 0 10px}
.fcta p{color:#ccc2b6}
.fcta__sm{font-size:.97rem;color:#a89d91;margin:12px 0 0}
.fcta__sm a,.fcta p a{color:#a8c8f0}
.fcta__img img{width:300px}
footer{background:var(--paper)}
.fcontact{padding-block:44px 0}
.fcard{position:relative;z-index:2;background:var(--panel);border:2px solid var(--char-d);
  box-shadow:10px 10px 0 var(--line-2);padding:26px 30px;margin-bottom:-54px;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 28px}
.fcard>*{min-width:0}
.fbrand{font-family:var(--display);font-size:1.8rem;font-weight:700;color:var(--char-d);
  letter-spacing:-.018em;line-height:1}
.fbrand span{color:var(--blue)}
.frole{font-size:.97rem;color:var(--ink-2);margin:8px 0 0}
.fcard p{font-size:1.062rem;color:var(--ink-2);margin:0 0 .7em}
.fcard b{color:var(--char-d)}
.flinks{background:var(--char);color:#ccc2b6;padding-block:96px 26px}
.fgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}
.fgrid>*{min-width:0}
.fh{font-family:var(--text);font-size:.86rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:#9a8f83;margin:0 0 10px}
.fgrid ul{list-style:none;margin:0 0 20px;padding:0}
.fgrid li{margin:0}
/* inline-block, not block: the box shrink-wraps so the hover underline stays
   the width of the words, and the negative margin gives the row height back
   (pitfall 82). */
footer li a{display:inline-block;padding-block:5px;margin-block:-5px;font-size:1rem;
  color:#ded5c9;text-decoration:none}
footer li a:hover{color:#fff;text-decoration:underline}
.fseals{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:22px 0 0;
  border-top:1px solid #4c453d}
.fseals img{width:44px;height:44px;object-fit:contain}
.fseals span{font-size:.97rem;color:#a89d91}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:18px 0 0}
.fpay img{width:230px;height:auto}
.fpay span{font-size:.97rem;color:#a89d91}
.disc{background:var(--tint);border-top:2px solid var(--char);padding:28px 0 32px}
.disc p,.disc li{font-size:.97rem;color:var(--ink-2)}
.disc b{color:var(--char-d)}
.disc__list{columns:2;column-gap:38px;list-style:none;margin:14px 0 0;padding:0}
.disc__list li{break-inside:avoid;margin:0 0 9px;padding-left:16px;position:relative}
.disc__list li::before{content:"";position:absolute;left:0;top:.66em;width:9px;height:2px;
  background:var(--blue)}
.copy{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line-2);font-size:.97rem}

/* ---- sticky buy bar */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--char-d);color:#fff;
  transform:translateY(105%);transition:transform .25s var(--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:.97rem;min-width:0}
.buybar__t b{display:block;font-size:1.03rem;color:#fff}
.buybar__t span{color:#c4b9ac}
.buybar .btn{margin-left:auto;flex:0 0 auto}

/* ---- reveal */
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--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:1180px){
  .menu{gap:0 16px;padding:0 12px}
  .menu a{font-size:.92rem}
}
@media (max-width:1080px){
  .nav__price{display:none}
  .fcard{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  :root{--navh:96px}
  .hero__grid{grid-template-columns:1fr;gap:26px}
  .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:6px 0 20px}
  .answer{order:4}
  .hero__road{order:5}
  .hero__cta{order:6}
  .hero__sub{order:8}
  .trust__row{order:9}
  .factpills{order:10}
  .figures{order:11}
  .menu{display:none;flex-direction:column;align-items:stretch;gap:0;
    flex-basis:100%;order:9;padding:6px 0 12px;background:none}
  .menu.open{display:flex}
  .menu__more{display:block}
  .menu a{padding:12px 0;border-bottom:1px solid var(--line-2)}
  .menu a[aria-current="page"]{border-bottom-color:var(--blue)}
  .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}
  /* the card stops overlapping once the columns stack */
  .fcard{margin-bottom:0;box-shadow:6px 6px 0 var(--line-2)}
  .fcontact{padding-block:36px 24px}
  .flinks{padding-block:34px 26px}
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  body{font-size:17px}
  .sec{padding:44px 0}
  .hero{padding:34px 0 42px}
  .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}
  .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:3px solid var(--char)}
  /* The dose chip is white-space:nowrap and margin-left:auto, so on a narrow
     card it is pushed to the right of a line with no room for it and overhangs
     the card edge. On a phone let it sit at the start of its own line. */
  .ing__dose{margin-left:0;white-space:normal}
  .disc__list{columns:1}
  .figures{grid-template-columns:1fr;gap:8px}
  .fcard{grid-template-columns:1fr;padding:22px 20px}
  .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}
  .fgrid{grid-template-columns:1fr}
}

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

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

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

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

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

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

/* --- pack cards read as one repeated object ----------------------------
   A pricing row is three cards that have to share their edges, their image slot
   and their button baseline. The vendor product shots are three different
   shapes here -- 765x765, 765x765 and 900x600 -- so without these 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,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 only: the modern pass, paint half -----------------------
   Radius, colour, gradient, shadow, transform, transition and animation.
   Nothing here moves a box, so it lives below the critical marker and needs
   `restamp_assets.py` rather than a rebuild.

   Scope is body:has(.hero), true on index.html and nowhere else: the
   masthead, the buy bar and the pricing row are shared with ~30 other
   pages and must not change there.

   Specificity is deliberate, not source order. modern_surface.py and
   footer_type.py strip and re-append their own blocks AFTER this one on
   every build, at (0,1,0) and (0,2,0); every rule here is at least (0,2,1).

   The slot: 16px on cards and panels, 10px on controls, and ONE very
   diffuse ambient shadow (0 22px 60px) instead of the estate's two-stop
   default -- tinted with this site's own ink, 36,31,26, and with the
   label's navy, 29,78,137, under the things that are navy. This site has
   no --accent token, so the accent is --blue, which is the bottle's. */

body:has(.hero){
  --av-card:16px;
  --av-ctl:10px;
  --av-depth:0 22px 60px rgba(36,31,26,.16);
  --av-depth-sm:0 12px 32px rgba(36,31,26,.13);
  --av-depth-lg:0 30px 74px rgba(36,31,26,.22);
  --av-depth-cta:0 16px 40px rgba(29,78,137,.32);
  --av-depth-cta-lg:0 24px 58px rgba(29,78,137,.40);
  --av-hair:rgba(36,31,26,.13);
}

/* ---- controls. The dated signature here was a hard 4px offset shadow on
   a square button; the slot replaces it with the diffuse ambient stop and a
   10px corner. Only the buying button carries a gradient -- the secondary
   stays solid, so the pair reads as two weights rather than two buttons.
   border-COLOR only: the 2px border WIDTH is geometry and would belong
   above the marker. */
body:has(.hero) .btn{
  border-radius:var(--av-ctl);
  border-color:transparent;
  box-shadow:var(--av-depth-sm);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),
             background-color .22s var(--ease),border-color .22s var(--ease);
}
body:has(.hero) .btn--cyan{
  background-color:var(--blue);
  background-image:linear-gradient(135deg,#2f74bd 0%,var(--blue) 45%,var(--blue-d) 100%);
  border-color:transparent;
  box-shadow:var(--av-depth-cta);
}
body:has(.hero) .btn--ghost{
  background-color:var(--panel);
  background-image:none;
  border-color:var(--line-2);
  color:var(--char-d);
  box-shadow:var(--av-depth-sm);
}
body:has(.hero) .btn:hover{transform:translateY(-2px);box-shadow:var(--av-depth-lg)}
body:has(.hero) .btn--cyan:hover{box-shadow:var(--av-depth-cta-lg)}
body:has(.hero) .btn--ghost:hover{
  background-color:#fff;
  border-color:var(--blue);
  color:var(--blue-d);
  box-shadow:var(--av-depth);
}
body:has(.hero) .btn:active{transform:translateY(0);box-shadow:var(--av-depth-sm)}
body:has(.hero) .btn:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
body:has(.hero) .burger{border-radius:var(--av-ctl)}
body:has(.hero) .field input,
body:has(.hero) .field select,
body:has(.hero) .field textarea{border-radius:var(--av-ctl);border-color:var(--line-2)}
body:has(.hero) .field input:focus-visible,
body:has(.hero) .field select:focus-visible,
body:has(.hero) .field textarea:focus-visible{border-color:var(--blue)}
body:has(.hero) .buybar{box-shadow:0 -22px 60px rgba(36,31,26,.26)}

/* ---- hero panels */
body:has(.hero) .hero .answer{
  border-color:var(--av-hair);
  border-radius:var(--av-card);
  background-image:linear-gradient(180deg,#fffdfa,var(--panel) 62%);
  box-shadow:var(--av-depth);
}
body:has(.hero) .hero .figures div{
  border-color:var(--av-hair);
  border-radius:var(--av-card);
  background-image:linear-gradient(180deg,#fffdfa,var(--panel) 70%);
  box-shadow:var(--av-depth-sm);
}
body:has(.hero) .hero .factpills li{
  border-color:var(--av-hair);
  border-radius:var(--av-ctl);
  background-image:linear-gradient(180deg,#fffdfa,var(--panel) 70%);
  box-shadow:0 6px 16px rgba(36,31,26,.08);
}
/* the charcoal plinth the bottle stands on reads as a plinth once its top
   corners are turned; the band itself is unmoved. */
body:has(.hero) .hero .hero__card::before{
  background-image:linear-gradient(180deg,var(--char-2),var(--char-d));
  border-radius:var(--av-card) var(--av-card) 0 0;
}
body:has(.hero) .hero .hero__card img{
  filter:drop-shadow(0 26px 44px rgba(36,31,26,.36));
}

/* ---- hero motif: RISE --------------------------------------------------
   The slot's family. Warmth coming up off the base of the bottle, drifting
   up and fading out.

   It lives on the pseudo-elements of the MEDIA COLUMN, never on the <img>,
   which is the LCP element and is preloaded; only transform and opacity are
   animated, and both layers are switched off under reduced motion.

   Sized from a measurement, not a guess. At 1440x900 the media column is
   787px tall, the product card sits from 18.3% to 81.7% down it, and the
   charcoal plinth covers the card's bottom 92px -- 70% to 82% of the
   column, which is 30% up from its bottom. Both layers are WIDER than the
   450px card (118% and 124% of a 513px column), so they read outside it. A
   shape sized inside an opaque card renders nothing.

   The first version of this WAS invisible, and the reason is worth keeping:
   both layers focus their gradient `at 50% 100%`, and both were anchored at
   bottom:23-24%, which put that focus BEHIND the opaque plinth. Only the
   spent tail of each gradient cleared the top edge. They are anchored at
   30% now -- the plinth's own top line -- so the strong end of the gradient
   is the first thing above it, which is what "rising from the base of the
   bottle" has to mean.

   This SUPERSEDES the earlier hinge-ease motif above the marker rather than
   deleting it: nothing another pass owns is removed, every property that
   block sets is reset here, and (0,3,2) beats its (0,1,1).

   Keyframe names are new. avEase, avFloat and avHinge are already taken in
   this sheet, and re-declaring one would silently change the other motion.

   22s and 30s. This is a capsule taken once a day for weeks. */
body:has(.hero) .hero .hero__media::before{
  content:"";
  position:absolute;
  inset:auto;
  left:50%;
  bottom:30%;
  width:118%;
  height:56%;
  aspect-ratio:auto;
  translate:-50% 0;
  border:0;
  border-radius:0;
  background:radial-gradient(24% 44% at 50% 100%,rgba(206,152,72,.42),rgba(206,152,72,0) 72%),
             radial-gradient(48% 74% at 50% 100%,rgba(172,122,52,.34),rgba(172,122,52,0) 76%),
             radial-gradient(76% 92% at 50% 100%,rgba(29,78,137,.13),rgba(29,78,137,0) 78%);
  -webkit-mask-image:linear-gradient(to top,#000 0,rgba(0,0,0,.72) 44%,transparent 94%);
  mask-image:linear-gradient(to top,#000 0,rgba(0,0,0,.72) 44%,transparent 94%);
  opacity:1;
  z-index:0;
  pointer-events:none;
  animation:avRise 22s cubic-bezier(.33,0,.28,1) infinite;
}
body:has(.hero) .hero .hero__media::after{
  content:"";
  position:absolute;
  inset:auto;
  left:50%;
  bottom:26%;
  width:124%;
  height:19%;
  aspect-ratio:auto;
  translate:-50% 0;
  border:0;
  border-radius:50%;
  background:radial-gradient(closest-side,rgba(198,146,68,.46),rgba(198,146,68,.20) 46%,rgba(198,146,68,0) 80%);
  opacity:.9;
  z-index:0;
  pointer-events:none;
  animation:avEmber 30s ease-in-out infinite;
}
@keyframes avRise{
  0%{transform:translateY(7%) scaleY(.9);opacity:0}
  16%{opacity:.92}
  58%{opacity:.70}
  100%{transform:translateY(-15%) scaleY(1.1);opacity:0}
}
@keyframes avEmber{
  0%,100%{transform:scale(.88);opacity:.45}
  50%{transform:scale(1.06);opacity:.85}
}

/* ---- home panels take the slot's single diffuse stop instead of the
   estate's two-stop default. .card is matched with :not(.card--pack) so the
   pricing row keeps its own, heavier treatment below, and the dark band
   keeps its flat charcoal cards. */
body:has(.hero) .sec:not(.sec--dark) .card:not(.card--pack){
  border-color:var(--av-hair);
  border-radius:var(--av-card);
  box-shadow:var(--av-depth-sm);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease);
}
body:has(.hero) .sec:not(.sec--dark) .card:not(.card--pack):hover{
  transform:translateY(-2px);
  box-shadow:var(--av-depth-lg);
}
body:has(.hero) .callout,
body:has(.hero) .alert,
body:has(.hero) .ingcard,
body:has(.hero) .faq,
body:has(.hero) .tablewrap,
body:has(.hero) .step,
body:has(.hero) .byline,
body:has(.hero) .toc,
body:has(.hero) .final,
body:has(.hero) .shots figure,
body:has(.hero) .badgewall figure{
  border-radius:var(--av-card);
  box-shadow:var(--av-depth-sm);
}
body:has(.hero) .rel a{
  border-color:var(--av-hair);
  border-radius:var(--av-card);
  box-shadow:var(--av-depth-sm);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease);
}
body:has(.hero) .rel a:hover{transform:translateY(-2px);box-shadow:var(--av-depth-lg)}
body:has(.hero) .meter__bar{border-radius:999px}
body:has(.hero) .meter__bar i{border-radius:999px}
body:has(.hero) .byline__mark{border-radius:var(--av-ctl)}

/* ---- pricing row -------------------------------------------------------
   Everything the row is engineered on is untouched: the fixed head, the
   fixed image box, the per-item stretch and the featured raise, which is a
   margin-top above the marker and not a transform. The three button offsets
   were measured after this landed and still match.

   overflow:visible is the only structural change, and it is what lets the
   ribbon stand above the card edge; the top corners the clip used to round
   are given back to .pack__head explicitly (16px card minus the 2px
   border = 14px inner). */
body:has(.hero) .card--pack{
  overflow:visible;
  border-radius:var(--av-card);
  border-color:var(--av-hair);
  background-image:linear-gradient(180deg,#fffdfa,var(--panel) 46%);
  box-shadow:var(--av-depth);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease);
}
body:has(.hero) .card--pack:hover{transform:translateY(-2px);box-shadow:var(--av-depth-lg)}
body:has(.hero) .pack__head{
  border-radius:14px 14px 0 0;
  border-bottom-color:var(--av-hair);
  background-image:linear-gradient(180deg,#f7eee3,var(--tint));
}
body:has(.hero) .card--pack.featured{
  border-color:var(--blue);
  background-image:linear-gradient(180deg,#f7fafe,#eef4fb 44%,var(--panel));
  box-shadow:0 26px 68px rgba(29,78,137,.30);
}
body:has(.hero) .card--pack.featured:hover{
  transform:translateY(-2px);
  box-shadow:0 34px 84px rgba(29,78,137,.38);
}
body:has(.hero) .card--pack.featured .pack__head{
  background-image:linear-gradient(135deg,#2f74bd,var(--blue) 52%,var(--blue-d));
  border-bottom-color:transparent;
}
/* the slot's ribbon: a tab standing on the card's top edge, tucked 3px
   behind it so it reads as attached rather than floating. */
body:has(.hero) .pack__flag{
  right:auto;
  left:20px;
  top:auto;
  bottom:calc(100% - 3px);
  border-radius:var(--av-ctl) var(--av-ctl) 0 0;
  background-image:linear-gradient(180deg,var(--char-2),var(--char-d));
  box-shadow:0 -10px 24px rgba(36,31,26,.16);
}
body:has(.hero) .card--pack.featured .pack__flag{
  background-image:linear-gradient(180deg,#2f74bd,var(--blue-d));
  box-shadow:0 -10px 26px rgba(29,78,137,.30);
}
/* Below 760 the row is ONE column with a 20px gap, and the tab stands 30px
   proud -- measured, not guessed -- so the "Best value" tab would land on
   the bottom of the card above it. On a phone it goes back to the corner it
   came from, with the card's own top-right radius so the now-unclipped
   corner is not squared off. */
@media (max-width:760px){
  body:has(.hero) .pack__flag{
    left:auto;
    right:0;
    top:0;
    bottom:auto;
    border-radius:0 14px 0 var(--av-ctl);
    box-shadow:none;
  }
}
body:has(.hero) .pack__perks li+li{border-top-color:var(--line-2)}

/* ---- motion off, completely. The reduced-motion rule that ships above the
   marker is !important at (0,1,1); these are !important at (0,3,2), so they
   win and leave a still, dimmed motif rather than nothing at all. */
@media (prefers-reduced-motion:reduce){
  body:has(.hero) .hero .hero__media::before,
  body:has(.hero) .hero .hero__media::after{
    animation:none!important;
    transform:none!important;
    opacity:.5!important;
  }
  body:has(.hero) .btn{transition:none}
  body:has(.hero) .btn:hover,
  body:has(.hero) .btn:active{transform:none}
  body:has(.hero) .card--pack:hover,
  body:has(.hero) .card--pack.featured:hover,
  body:has(.hero) .rel a:hover,
  body:has(.hero) .sec:not(.sec--dark) .card:not(.card--pack):hover{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 .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 39 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 (36,31,26), 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(36,31,26,.06), 0 6px 18px rgba(36,31,26,.07);
  --lift:0 2px 6px rgba(36,31,26,.09), 0 16px 34px rgba(36,31,26,.14);
}

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