/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Merriweather Fallback";src:local("Georgia");font-weight:400;size-adjust:109.59%;ascent-override:89.79%;descent-override:24.91%;line-gap-override:0.00%}
@font-face{font-family:"Merriweather Fallback";src:local("Georgia Bold");font-weight:600 900;size-adjust:96.55%;ascent-override:101.92%;descent-override:28.28%;line-gap-override:0.00%}
@font-face{font-family:"Signika Fallback";src:local("Arial");font-weight:400;size-adjust:96.39%;ascent-override:97.52%;descent-override:30.29%;line-gap-override:0.00%}
@font-face{font-family:"Signika Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:90.90%;ascent-override:103.41%;descent-override:32.12%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* serenityprimes.com — Serenity Prime, U.S. authorized retailer desk.
   Design slot: batch8_assignments.py row 308. Merriweather / Signika, a
   graphite near-black ground, a header bar whose lower edge is NOTCHED away
   beneath the ordering button, and a footer that splits its destinations three
   ways with the contact card spanning above them.

   The ground is the bottle's own: a black label carrying gold lettering, a gold
   ear mark and five gold stars, photographed against the seller's deep-green
   botanical composition. So the page is graphite with a night-blue cast, the
   panels are slate rather than bone, and the single accent is the label's gold.
   That keeps it clear of getexitide.com, the estate's other dark-first site,
   which is graphite with BONE panels and an orange accent.

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

/* ---- tokens */
:root{
  /* ground: graphite near-black, a night-blue cast rather than a neutral one */
  --paper:#0f1219;
  --paper-2:#141926;
  --panel:#181e2b;
  --panel-2:#1f2637;
  --deep:#080a11;
  --dark:#0f1219;          /* the tools read this one for a dark hero */
  --tint:#141926;
  --wash:#1b2231;

  /* ink, all of it written to read ON graphite */
  --ink:#eef1f7;
  --ink-2:#c2cbdb;
  --ink-3:#93a0b5;
  --on-dark:#eef1f7;
  --line:#2b3446;
  --line-2:#3d4759;

  /* accent: the gold printed on the Serenity Prime label */
  /* --gold-d is the most saturated token in this block ON PURPOSE: it is the
     one brand_marks.py and hero_motifs.py both read as "the accent", and a
     warning amber sitting a thousandth above it would hand the brand mark and
     the hero gradient to the wrong colour. */
  --gold:#e8c65a;
  --gold-d:#d3a81f;
  --gold-soft:#f6e6a8;
  --gold-deep:#8a6f18;
  /* the green the seller photographs the bottle against, lifted to read here */
  --moss:#7fae85;

  --good:#63c894;
  --warn:#e0a05a;

  --wrap:1200px;
  --measure:760px;
  --measure-wide:980px;
  --radius:10px;
  --radius-lg:18px;
  --shadow:0 1px 2px rgba(0,0,0,.34), 0 14px 34px rgba(0,0,0,.34);
  --shadow-lg:0 26px 64px rgba(0,0,0,.52);
  --navh:112px;
  /* the page gutter, resolved against the viewport, so the header notch can be
     positioned under the ordering button at every width rather than at one */
  --gut:calc(max(0px, (100vw - 1200px) / 2) + 22px);
  --display:"Merriweather","Merriweather Fallback",Georgia,"Times New Roman",serif;
  --text:"Signika","Signika Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ---- base */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
body{
  overflow-x:clip;background:var(--paper);color:var(--ink);
  font-family:var(--text);font-size:17px;line-height:1.76;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold);text-underline-offset:3px}
a:hover{color:var(--gold-soft)}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);font-weight:900;line-height:1.2;margin:0 0 .5em}
h1{font-size:clamp(1.92rem,1.24rem + 2.1vw,2.95rem);letter-spacing:-.012em}
h2{font-size:clamp(1.42rem,1.12rem + 1.15vw,2.08rem);letter-spacing:-.008em}
h3{font-size:1.16rem;font-weight:700}
h4{font-size:1rem;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:22px}
.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:#17120a;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

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

/* ---- 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:.012em;
  border:0;border-radius:var(--radius);cursor:pointer;text-decoration:none;
  background:var(--panel-2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2);
  transition:filter .18s ease,transform .18s ease;
}
.btn:hover{filter:brightness(1.18);color:var(--ink)}
.btn:active{transform:translateY(1px)}
.btn--gold{
  background:linear-gradient(145deg,var(--gold-soft) 0%,var(--gold) 46%,var(--gold-d) 100%);
  color:#1a1405;box-shadow:0 10px 26px rgba(211,168,31,.24);
}
.btn--gold:hover{color:#1a1405}
.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 1px var(--line-2)}
.btn--ghost:hover{background:var(--panel-2);color:var(--gold-soft)}
.btn--wide{width:100%}

/* ---- topline strip: the five trust facts, above the navigation.
   Role, lot, count, guarantee, order phone. It sits ABOVE CRITICAL-END because
   it is the first thing painted; appended after the marker it would load async
   and flash unstyled at the very top of every page. The lot and the count are
   trimmed on phones, where five items wrap to three lines. */
.util{background:var(--deep);color:#8d9ab1;font-size:.8125rem;line-height:1.5;
  border-bottom:1px solid #161c28}
/* padding-BLOCK, never the shorthand: this element also carries .wrap, and
   `padding:8px 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. */
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;padding-block:8px;min-width:0}
.util__item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;min-width:0}
.util__item+.util__item::before{content:"";width:3px;height:3px;border-radius:50%;
  background:var(--gold-deep);flex:0 0 auto;margin-right:11px}
.util b{color:var(--gold-soft);font-weight:600}
.util a{color:inherit;text-decoration:none}
.util a:hover{color:var(--gold-soft);text-decoration:underline}
@media (max-width:760px){
  .util__item--trim{display:none}
  .util__row{gap:4px 14px}
}

/* ---- header: one bar, its lower edge notched away beneath the order button.
   The notch is cut with clip-path rather than painted, so whatever scrolls
   underneath shows through it. It is anchored with --gut, which resolves the
   page gutter against the viewport, so the cut stays under the button at every
   width instead of only at one. Below 980px the button moves into the menu and
   the notch is switched off. */
.nav{position:sticky;top:0;z-index:100}
.nav__bar{
  position:relative;background:var(--panel);
  clip-path:polygon(
    0 0, 100% 0, 100% 100%,
    calc(100% - var(--gut) + 12px) 100%,
    calc(100% - var(--gut) + 1px) calc(100% - 15px),
    calc(100% - var(--gut) - 149px) calc(100% - 15px),
    calc(100% - var(--gut) - 160px) 100%,
    0 100%);
}
.nav__bar::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--gold-d),rgba(211,168,31,.12) 62%,transparent);
}
.nav__row{display:flex;align-items:center;gap:20px;padding-block:14px 22px;min-width:0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);min-width:0}
.brand__glyph{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. */
.brand>svg{width:36px;height:36px;flex:0 0 auto}
.bw{display:flex;flex-direction:column;line-height:1.14;min-width:0}
.bw b{font-family:var(--display);font-size:1.22rem;font-weight:900;letter-spacing:-.01em}
.bw b em{font-style:normal;color:var(--gold)}
.bw small{font-size:0.9062rem;font-weight:500;color:var(--ink-3)}
.nav__rail{margin-left:auto;display:flex;align-items:center;gap:16px;min-width:0}
.nav__price{text-align:right;line-height:1.24}
.nav__price b{display:block;font-family:var(--display);font-size:1.06rem;font-weight:900;color:var(--gold-soft)}
.nav__price span{font-size:.75rem;font-weight:500;color:var(--ink-3)}
.nav__buy{min-height:46px;padding:11px 24px;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(--gold);margin:0 0 5px}
.burger span:last-child{margin:0}
.menu{
  display:flex;flex-wrap:wrap;gap:0 24px;list-style:none;margin:0;padding:0;
  align-items:center;min-width:0;
}
.menu a{
  display:inline-block;padding:9px 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(--gold-soft)}
.menu a[aria-current="page"]{color:var(--gold);border-bottom-color:var(--gold-d)}
.menu__more{display:none}

/* ---- hero: copy LEFT, the bottle RIGHT on a lit card */
.hero{position:relative;background:var(--paper);color:var(--on-dark);padding:52px 0 62px;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;color:#fff}
.hero h1 em{font-style:normal;color:var(--gold)}
.answer{
  background:var(--panel);border:1px solid var(--line);
  border-left:4px solid var(--gold-d);border-radius:0 var(--radius) var(--radius) 0;
  padding:20px 24px;margin:0 0 18px;box-shadow:var(--shadow);
}
.answer p{margin:0 0 .75em;font-size:1.062rem;color:var(--ink-2)}
.answer p:first-child{color:var(--ink)}
.answer p:last-child{margin:0}
.hero__road{font-size:1rem;color:var(--ink-2);margin:0 0 20px;max-width:56ch}
.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-2);
  border:1px solid var(--line);padding:7px 14px;border-radius:999px;
}
.factpills li b{color:var(--gold-soft);font-weight:700}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.figures div{background:var(--panel);border:1px solid var(--line);padding:13px 15px;border-radius:var(--radius);min-width:0}
.figures b{display:block;font-family:var(--display);font-size:1.42rem;font-weight:900;color:var(--gold-soft);line-height:1.15}
.figures span{display:block;font-size:0.9062rem;font-weight:500;color:var(--ink-3);margin-top:4px}
/* The vendor's only clean single-bottle master is 261x233, and the seller's own
   copy of it is byte-identical, so there is no larger source. The card is the
   plinth that keeps it from looking lost: the image is never stretched past its
   real width, and the motif around the card carries the fold. */
.hero__media{position:relative;align-self:center;min-width:0}
.hero__card{
  position:relative;z-index:2;text-align:center;padding:34px 26px 26px;
  background:linear-gradient(168deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);border-top:2px solid var(--gold-d);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
}
.hero__card img{width:100%;max-width:261px;height:auto;margin-inline:auto}
.hero__cap{margin:18px 0 0;font-size:.8125rem;font-weight:500;color:var(--ink-3);text-align:center}
.trust__row{display:flex;flex-wrap:wrap;gap:10px 22px;margin:0;padding:0;list-style:none;font-size:0.9062rem;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:700}

/* ---- inner page head */
.phead{padding:34px 0 14px;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(--gold)}
.phead h1{margin:0 0 16px;max-width:var(--measure-wide)}
.phead .answer{max-width:var(--measure-wide);background:var(--panel-2)}
.lead{font-size:1.12rem;color:var(--ink-2);max-width:var(--measure)}


/* ---- hero motif -- night-drift ---------------------------------------- */
.hero{position:relative;overflow-x:clip;overflow-y:visible}
:where(.hero__media){position:relative}
.hero__card{position:relative;z-index:2}
.hero__card img{position:relative;z-index:3}
.hero{background:radial-gradient(120% 86% at 72% 6%,#1b2231 0%,#141926 44%,#0f1219 100%)}.hero__media::before{content:'';position:absolute;left:50%;top:-26%;width:150%;aspect-ratio:1;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(232,198,90,0.22),rgba(232,198,90,0.07) 58%,transparent 76%);filter:blur(12px);animation:spDrift 16s ease-in-out infinite;z-index:0;pointer-events:none}.hero__media::after{content:'';position:absolute;left:50%;top:-14%;width:148%;aspect-ratio:1;translate:-50% 0;border-radius:50%;border:1px solid rgba(232,198,90,0.30);border-bottom-color:transparent;border-left-color:rgba(232,198,90,0.10);animation:spSettle 13s ease-in-out infinite;z-index:0;pointer-events:none}@keyframes spDrift{0%,100%{transform:translateY(-4%) scale(.97);opacity:.5}50%{transform:translateY(5%) scale(1.03);opacity:.92}}@keyframes spSettle{0%,100%{transform:rotate(-7deg);opacity:.42}50%{transform:rotate(7deg);opacity:.86}}
@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 44px}
}
@media (min-width:981px){
  .hero__media{position:sticky; top:calc(var(--navh,104px) + 14px); align-self:start; min-height:calc(100vh - var(--navh,104px) - 28px); min-height:calc(100svh - var(--navh,104px) - 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){
  .hero .hero__media::before{width:122%}
  .hero .hero__media::after{width:104%}
}
/* --- end of the copied hero responsive rules --- */

/*!SITE-HOME-CRIT-START*/
/* ---- home page, geometry only ------------------------------------------
   Everything here MOVES A BOX, so it sits above the marker and the site is
   rebuilt afterwards; a restamp alone would leave ~30 pages carrying the old
   inline copy. Measured at 1440x900 before this block: the hero's buy button
   ran y=866 to y=930, so the money button straddled the fold with 34px of it
   showing. On desktop the copy column is reordered to eyebrow, headline, the
   quick answer, THE BUTTONS, the payment line, then the evidence. The phone
   order is composed separately under max-width:980 with display:contents and
   is left exactly as it was. */
@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;margin:2px 0 14px}
  .hero .hero__copy>.hero__sub{order:5;margin:0 0 2px}
  .hero .hero__copy>.hero__road{order:6;margin:20px 0 16px}
  .hero .hero__copy>.factpills{order:7}
  .hero .hero__copy>.figures{order:8}
}
/* The pricing row. The recommended tier stands proud because the other two are
   pushed DOWN with margin-top -- never transform, which the reveal pass resets
   to none -- and the row gains the headroom the tab ribbon needs above each
   card. The three cards still stretch to one bottom edge and the button still
   sits at margin-top:auto, so the three Add To Cart buttons keep the single
   baseline they were engineered for. Measured after: all three at the same y. */
.hero~.sec .prices{padding-top:30px}
.hero~.sec .card--pack:not(.featured){margin-top:22px}
.hero~.sec .pack__perks li{padding-bottom:7px;margin-bottom:7px}
/*!SITE-HOME-CRIT-END*/

/*!CRITICAL-END*/
/* ---- sections */
.sec{padding:62px 0;position:relative}
.sec--tint{background:var(--tint)}
.sec--panel{background:var(--panel)}
.sec--dark{background:var(--deep)}
.sec--dark .eyebrow{color:var(--gold-soft)}
.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}

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

/* A grid or flex item's default min-width is auto, which floors at MIN-CONTENT.
   An item holding a table with a min-width, or a nowrap chip, therefore refuses
   to shrink below that floor: the column stays wider than the grid box and the
   overhang is clipped away by body{overflow-x:clip} with nothing to scroll and
   nothing for a check to report. Every item that can hold one gets min-width:0,
   at every width rather than only inside a media query. */
.grid>*,.split>*,.inglist>*,.shots>*,.prices>*,.steps>*,
.badgewall>*,.rel>*,.posts>*,.figures>*,.stats>*,.versus>*,
.fgrid>*,.fcontact>*,.buybar__in>*,.final--media>*{min-width:0}

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

/* ---- tables */
.tablewrap{overflow-x:auto;margin:0 0 1.2em;border:1px solid var(--line);border-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;color:var(--ink-2)}
th{font-family:var(--display);font-weight:900;color:#1a1405;background:linear-gradient(145deg,var(--gold-soft),var(--gold));font-size:.9375rem}
tbody tr:nth-child(even){background:var(--panel-2)}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--gold-soft)}
.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 70px}
.step::before{
  counter-increment:s;content:counter(s);
  position:absolute;left:20px;top:19px;width:36px;height:36px;
  display:grid;place-items:center;
  background:linear-gradient(145deg,var(--gold-soft),var(--gold-d));color:#1a1405;
  font-family:var(--display);font-weight:900;font-size:1rem;border-radius:50%;
}
.step h3{margin:0 0 6px}
.step p{color:var(--ink-2)}
.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-radius:var(--radius);padding:24px 22px 22px;overflow:hidden}
.card::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:2px;
  background:linear-gradient(90deg,var(--gold-d),transparent 58%);
}
.card h3{margin:0 0 8px;color:var(--gold-soft)}
.card p,.card li{color:var(--ink-2)}
.card p:last-child,.card ul:last-child{margin-bottom:0}

/* ---- callout, alert, quote, keypoints */
.callout{background:var(--wash);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;margin:0 0 1.2em}
.callout b:first-child{display:block;margin-bottom:6px;color:var(--gold-soft)}
.callout p{color:var(--ink-2)}
.callout p:last-child{margin:0}
.alert{background:#241d10;border:1px solid #4a3a1a;border-left:4px 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{color:var(--ink-2)}
.alert p:last-child{margin:0}
.pullquote{font-family:var(--display);font-size:1.24rem;font-weight:700;line-height:1.56;color:var(--gold-soft);border-left:3px solid var(--gold-d);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:3px solid var(--gold-d);border-radius:0 0 var(--radius) var(--radius);padding:20px 22px;margin:0 0 1.2em}
.keypoints>b{display:block;margin-bottom:8px;color:var(--gold-soft)}
.keypoints ul{margin:0;padding-left:20px}
.keypoints li{color:var(--ink-2)}

/* ---- 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}
.split__img img{width:100%;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel-2)}
.split__body p{color:var(--ink-2)}
.split__body p:last-child{margin:0}

/* ---- stat band */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;text-align:center}
.stats div b{display:block;font-family:var(--display);font-size:2.1rem;font-weight:900;color:var(--gold-soft);line-height:1.12}
.stats div span{display:block;font-size:.9375rem;color:var(--ink-3);margin-top:4px}

/* ---- label versus research */
.versus{display:grid;grid-template-columns:1.05fr .8fr 1.3fr;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;color:var(--ink-2)}
.versus>div:nth-child(3n+1){font-weight:600;background:var(--panel-2);color:var(--ink)}
.versus__h{background:linear-gradient(145deg,var(--gold-soft),var(--gold))!important;color:#1a1405!important;font-family:var(--display);font-weight:900;font-size:.92rem}

/* ---- ingredient cards */
.inglist{display:grid;gap:16px}
.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;color:var(--gold-soft)}
.ing__latin{font-size:.9375rem;font-style:italic;color:var(--ink-3)}
.ing__dose{margin-left:auto;font-size:.875rem;font-weight:700;color:var(--ink);background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line-2);padding:4px 12px;border-radius:999px;white-space:nowrap}
.ingcard p{color:var(--ink-2)}
.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 transparent;box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--radius-lg);overflow:hidden;position:relative}
.card--pack::before{display:none}
.card--pack.featured{border-color:var(--gold-d);box-shadow:var(--shadow-lg)}
.pack__head{background:var(--panel-2);border-bottom:1px solid var(--line);padding:14px 20px;display:flex;align-items:center;gap:10px}
.card--pack.featured .pack__head{background:linear-gradient(145deg,var(--gold-soft),var(--gold));border-bottom-color:var(--gold-d)}
.card--pack.featured .pack__head b,.card--pack.featured .pack__head span{color:#1a1405}
.pack__head b{font-family:var(--display);font-size:1.08rem;font-weight:900;color:var(--ink)}
.pack__head span{font-size:.8125rem;font-weight:600;color:var(--ink-3);margin-left:auto}
.pack__flag{position:absolute;right:0;top:0;background:var(--gold);color:#1a1405;font-family:var(--text);font-size:0.8438rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 13px;z-index:3;border-radius:0 0 0 var(--radius)}
.pack__body{display:flex;flex-direction:column;flex:1;padding:20px 20px 22px}
.pack__per{font-family:var(--display);font-size:2.2rem;font-weight:900;color:var(--gold-soft);line-height:1;text-align:center}
.pack__per sup{font-size:1rem;font-weight:700;top:-.7em}
.pack__unit{display:block;text-align:center;font-size:.875rem;font-weight:600;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:1rem;color:var(--ink-2)}
.pack__tot b{font-weight:700;color:var(--ink)}
.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}
.pack__perks li{position:relative;padding-left:24px;margin:0 0 6px;color:var(--ink-2)}
.pack__perks li::before{content:"\2713";position:absolute;left:0;color:var(--good);font-weight:700}
.card--pack>.pack__body>.btn{margin-top:auto}
.pack__marks{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:center;margin:12px 0 0;font-size:.8125rem;color:var(--ink-3)}
.buy__note{font-size:.9375rem;color:var(--ink-3);text-align:center;margin:0}

/* ---- captioned images */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0 0 1.2em}
.shots.s2{grid-template-columns:repeat(2,minmax(0,1fr))}
.shots.s6{grid-template-columns:repeat(6,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}
.shots figcaption b{display:block;margin-bottom:5px;color:var(--gold-soft)}
.shots figcaption span{font-size:.9375rem;color:var(--ink-2)}
figure.portrait img{width:var(--figw,320px);margin-inline:auto}

/* ---- seal wall */
.badgewall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:0 0 1.2em}
.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(--gold-soft)}
.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 minmax(0,1fr) 52px;gap:12px;align-items:center;margin:0 0 8px;font-size:.9375rem;color:var(--ink-2)}
.meter__bar{height:10px;background:var(--panel-2);border-radius:999px;overflow:hidden}
.meter__bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-d),var(--gold-soft))}
.stars{color:var(--gold);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(--display);font-weight:700;font-size:1.04rem;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;translate:0 -50%;font-family:var(--text);font-size:1.34rem;font-weight:400;color:var(--gold)}
.faq details[open] summary::after{content:"\2212"}
.faq__body{padding:0 20px 18px;color:var(--ink-2)}
.faq__body p:last-child,.faq__body ul:last-child{margin-bottom:0}

/* ---- AI factsheet */
.qa{margin:0 0 1.2em}
.qa>p{color:var(--ink-2)}

/* ---- 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. `anywhere` rather than `break-word` because it also
   lowers the element's MIN-CONTENT, which is what stops an 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(--gold-d);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:linear-gradient(145deg,var(--gold-soft),var(--gold-d));color:#1a1405;font-family:var(--display);font-weight:900;font-size:1.04rem;border-radius:var(--radius)}
.byline b{display:block;margin-bottom:6px;color:var(--gold-soft)}
.byline p{font-size:.9688rem;color:var(--ink-2);margin:0}

/* ---- closing CTA */
.final{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--gold-d);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:210px}
.final h2{margin:0 0 10px}
.final p{color:var(--ink-2)}
.final__price{font-weight:600;color:var(--gold-soft)}
.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-2);transition:border-color .18s ease,transform .18s ease}
.rel a:hover{border-color:var(--gold-d);transform:translateY(-2px)}
.rel b{display:block;font-family:var(--display);font-size:1.06rem;color:var(--gold-soft);margin-bottom:5px}
.rel span{font-size:.9375rem;color:var(--ink-2)}

/* ---- forms. 16px minimum or iOS Safari zooms on focus and never zooms back. */
.form{display:grid;gap:16px;max-width:var(--measure)}
.field label{display:block;font-weight:600;font-size:.9688rem;margin-bottom:6px;color:var(--ink)}
.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-2);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-radius:var(--radius);padding:20px 24px;margin:0 0 28px}
.toc b{display:block;margin-bottom:8px;color:var(--gold-soft)}
.toc ol{margin:0;padding-left:20px}
.toc li{margin:0 0 5px;font-size:1.062rem;color:var(--ink-2)}
.posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.posts article{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}
.posts h3{margin:0 0 8px;color:var(--gold-soft)}
.posts p{font-size:1.062rem;color:var(--ink-2)}
.dtable{min-width:520px}

/* ---- footer: a contact card SPANNING above destinations split three ways */
.fcta{position:relative;background:linear-gradient(150deg,var(--panel-2) 0%,var(--deep) 100%);border-top:1px solid var(--line);padding:52px 0}
.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:var(--gold);margin-bottom:8px}
.fcta__h{font-family:var(--display);font-size:1.56rem;font-weight:900;line-height:1.28;margin:0 0 10px;color:#fff}
.fcta p{color:var(--ink-2)}
.fcta__sm{font-size:.9375rem;color:var(--ink-3);margin:12px 0 0}
.fcta__img img{width:290px}
footer{background:var(--paper);border-top:1px solid var(--line)}
/* the contact card spans the full width, above the three columns */
.fcontact{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:26px;background:var(--panel);border:1px solid var(--line);border-top:2px solid var(--gold-d);border-radius:var(--radius);padding:26px 26px 20px;margin:42px 0 30px}
.fbrand{font-family:var(--display);font-size:1.6rem;font-weight:900;color:var(--ink);letter-spacing:-.012em;line-height:1.1}
.fbrand span{color:var(--gold)}
.frole{font-size:.9375rem;color:var(--ink-2);margin:8px 0 0}
.fcontact p{font-size:1.062rem;color:var(--ink-2);margin:0 0 .7em}
.fcontact b{color:var(--gold-soft)}
.fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;padding-bottom:30px}
.fh{font-family:var(--text);font-size:.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px}
.fgrid ul{list-style:none;margin:0 0 22px;padding:0}
.fgrid li{margin:0}
/* inline-block, not block: the box shrink-wraps so the hover underline stays
   the width of the words, and the negative margin gives the row height back. */
footer li a{display:inline-block;padding-block:5px;margin-block:-5px;font-size:.9688rem;color:var(--ink-2);text-decoration:none}
footer li a:hover{color:var(--gold)}
.fseals{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding-block:20px;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-bottom:26px}
.fpay img{width:230px;height:auto}
.fpay span{font-size:.9375rem;color:var(--ink-3)}
.disc{background:var(--deep);border-top:1px solid var(--line);padding-block:28px 32px}
.disc p,.disc li{font-size:.9375rem;color:var(--ink-3)}
.disc b{color:var(--gold-soft)}
.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:1px;background:var(--gold-d)}
.copy{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:.9375rem}

/* ---- sticky buy bar */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--deep);border-top:1px solid var(--gold-deep);color:var(--ink);transform:translateY(105%);transition:transform .25s ease}
.buybar.show{transform:none}
.buybar__in{display:flex;align-items:center;gap:18px;max-width:var(--wrap);margin-inline:auto;padding:12px 22px}
.buybar__t{font-size:.9375rem;min-width:0}
.buybar__t b{display:block;font-size:1rem;color:var(--gold-soft)}
.buybar__t span{color:var(--ink-3)}
.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){
  .fcontact{grid-template-columns:1fr 1fr}
}
@media (max-width:980px){
  :root{--navh:104px}
  .nav__bar{clip-path:none}
  .hero__grid{grid-template-columns:1fr;gap:26px}
  .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:6px 0 20px}
  .answer{order:4}
  .hero__road{order:5}
  .hero__cta{order:6}
  .hero__sub{order:8}
  .trust__row{order:9}
  .factpills{order:10}
  .figures{order:11}
  .nav__price{display:none}
  .nav__row{flex-wrap:wrap;padding-block:12px}
  .menu{display:none;flex-direction:column;align-items:stretch;gap:0;width:100%;padding:6px 0 12px;order:3}
  .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(--gold-d)}
  .burger{display:block}
  .nav__buy{display:none}
  .grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shots.s6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .fcta__box{grid-template-columns:1fr}
  .fcta__img{display:none}
  .final--media{grid-template-columns:1fr;gap:20px}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .sec{padding:46px 0}
  .hero{padding:34px 0 44px}
  .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}
  .shots.s6{grid-template-columns:repeat(2,minmax(0,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:2px solid var(--line-2)}
  /* 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 start its own line and wrap its own text. */
  .ing__dose{margin-left:0;white-space:normal}
  .disc__list{columns:1}
  .figures{grid-template-columns:1fr;gap:8px}
  .fcontact{grid-template-columns:1fr;padding:22px}
  .fgrid{grid-template-columns:1fr 1fr;gap:22px}
  .buybar__in{flex-wrap:wrap;gap:10px;padding-block:10px}
  .buybar .btn{width:100%;margin-left:0}
}
@media (max-width:440px){
  .fgrid{grid-template-columns:1fr}
  .badgewall{grid-template-columns:1fr}
}

/* ---- hero: the bottle settles on its plinth -------------------------------
   Transform only, NEVER opacity: the bottle is the LCP element and an element
   starting at opacity:0 is not recorded as painted.

   The motion has to read as the product's use case, and this one is a
   night-time blend: nothing rises, nothing pulses, nothing hurries. A pool of
   warm light sits under the bottle and breathes, the card settles a few pixels
   and holds, and the ring above the card drifts through a slow arc. */
.hero__card{isolation:isolate}
.hero__card::before{
  content:"";position:absolute;left:50%;top:42%;translate:-50% -50%;
  width:78%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(232,198,90,.22),transparent 72%);
  z-index:0;pointer-events:none;
}
.hero__card::after{
  content:"";position:absolute;left:50%;bottom:52px;translate:-50% 0;
  width:46%;height:16px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.62),transparent 76%);
  filter:blur(6px);z-index:0;pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  /* The settle goes on the CARD, never on the <img>. The image is the LCP
     element and it is preloaded; animating it is what the house rule forbids. */
  .hero__card{animation:spSettleCard 11s ease-in-out infinite}
  @keyframes spSettleCard{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
}

/* ---- 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 rather than
   hardcoded, because this header's 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,104px) + 14px);
    align-self:start;
    min-height:calc(100vh - var(--navh,104px) - 28px);
    min-height:calc(100svh - var(--navh,104px) - 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 pack shots are 330x245 and 531x245 and
   the single bottle is 261x233, so without these three rules the images render
   at three sizes and the three CTAs sit at three heights.

   The height lives here and not on the <img> attributes on purpose: those must
   keep stating each file's true ratio, or fix_img_dims.py rewrites them and CLS
   gets worse. */
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,150px);
  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>figure:only-child{grid-column:1/-1;max-width:calc((100% - 40px) / 3);margin-inline:auto}
.shots.s2>figure:last-child:nth-child(odd){grid-column:1/-1;max-width:calc((100% - 20px) / 2);margin-inline:auto}
/* ==== end fix_layout_breaks.py ==== */

/* ==== 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, paint only ---------------------------------------------
   Radius, shadow, gradient, transform and animation move no box, so this block
   lives below the marker and needs a restamp rather than a rebuild.

   Scoped to `.hero` and `.hero~.sec`: class="hero" is on index.html and nowhere
   else, and every other section of the home page is a sibling of it inside
   main#main. The header, the footer, the guarantee band and the sticky buy bar
   are shared chrome on 30 pages and are deliberately NOT touched, so the home
   page never disagrees with the rest of the site about what the header is.

   Specificity, not source order: modern_surface.py and footer_type.py strip and
   re-append their own blocks on every build and land after this one. Everything
   below carries at least one class more than the rule it has to beat.

   Slot: circulate / radius 24 card, 16 control / two tight crisp stops / a tab
   ribbon above the card. The depth is tinted with this site's own colours --
   the paper's blue-black (8,10,17) for the contact stop and the ink (238,241,247)
   for the ambient one, which on a graphite ground reads as a lift rather than a
   smudge. Never neutral black: it is invisible on #0f1219. */

.hero,.hero~.sec{
  --sp2-rc:24px;            /* cards and panels */
  --sp2-rctl:16px;          /* buttons, inputs, chips */
  --sp2-d1:0 1px 1px rgba(8,10,17,.55), 0 4px 10px rgba(238,241,247,.07);
  --sp2-d2:0 1px 1px rgba(8,10,17,.62), 0 4px 10px rgba(238,241,247,.12);
  --sp2-lift:0 2px 3px rgba(8,10,17,.58), 0 10px 22px rgba(238,241,247,.13);
  --sp2-gold:0 1px 1px rgba(8,10,17,.45), 0 4px 10px rgba(211,168,31,.34);
  --sp2-gold-lift:0 2px 3px rgba(8,10,17,.45), 0 10px 22px rgba(211,168,31,.44);
}

/* ---- surfaces: one curve, one depth language */
.hero .answer,
.hero~.sec .card,
.hero~.sec .step,
.hero~.sec .keypoints,
.hero~.sec .callout,
.hero~.sec .toc,
.hero~.sec .byline,
.hero~.sec .posts article,
.hero~.sec .shots figure,
.hero~.sec .badgewall figure,
.hero~.sec .tablewrap,
.hero~.sec .faq,
.hero~.sec .ingcard,
.hero~.sec .versus,
.hero~.sec .final,
.hero~.sec .rel a,
.hero~.sec .alert{border-radius:var(--sp2-rc);box-shadow:var(--sp2-d1)}

/* the quick answer and the alert keep a near-flat edge on the side their gold
   or amber rule runs down, so the rule still reads as a margin mark */
.hero .answer{border-radius:7px var(--sp2-rc) var(--sp2-rc) 7px}
.hero~.sec .alert{border-radius:7px var(--sp2-rc) var(--sp2-rc) 7px}
.hero~.sec .keypoints,.hero~.sec .final{border-radius:0 0 var(--sp2-rc) var(--sp2-rc)}

/* small boxes take the control radius -- 24px on a 60px chip reads as a blob */
.hero .figures div,
.hero~.sec .stats div{border-radius:var(--sp2-rctl)}
.hero .figures div{box-shadow:var(--sp2-d1)}

/* ---- the hero plinth: one step deeper than the panels below it */
.hero .hero__card{
  border-radius:28px;
  box-shadow:0 1px 1px rgba(8,10,17,.62), 0 4px 10px rgba(238,241,247,.10),
             inset 0 1px 0 rgba(246,230,168,.12);
}

/* ---- buttons: the buying CTA is the only gradient on the page, and the
   secondary is left solid, so the pair reads as two weights rather than two
   colours of the same weight. */
.hero .btn,.hero~.sec .btn{
  border-radius:var(--sp2-rctl);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease,
             background-color .2s ease, color .2s ease;
}
.hero .btn--gold,.hero~.sec .btn--gold{
  background:linear-gradient(135deg,#fbf3d2 0%,var(--gold-soft) 16%,
             var(--gold) 50%,var(--gold-d) 84%,#b8901a 100%);
  box-shadow:var(--sp2-gold);
}
.hero .btn--ghost,.hero~.sec .btn--ghost{
  background:var(--panel-2);
  box-shadow:inset 0 0 0 1px var(--line-2), var(--sp2-d1);
}
.hero .btn:hover,.hero~.sec .btn:hover{transform:translateY(-2px)}
.hero .btn--gold:hover,.hero~.sec .btn--gold:hover{box-shadow:var(--sp2-gold-lift)}
.hero .btn--ghost:hover,.hero~.sec .btn--ghost:hover{
  background:var(--wash);color:var(--gold-soft);
  box-shadow:inset 0 0 0 1px var(--gold-deep), var(--sp2-d2);
}
.hero .btn:active,.hero~.sec .btn:active{transform:translateY(0)}
.hero .btn:focus-visible,.hero~.sec .btn:focus-visible{
  outline:3px solid var(--gold-soft);outline-offset:3px;
}

/* ---- anything else a pointer can click answers it, 2px, transform only.
   Only elements that HAVE a hover state are given the transition: a card with
   no hover would otherwise spend .2s fading its shadow in when the async sheet
   lands, for no gain. */
.hero~.sec .rel a,
.hero~.sec .posts article,
.hero~.sec .shots figure,
.hero~.sec .badgewall figure,
.hero~.sec .card--pack{transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.hero~.sec .rel a:hover,
.hero~.sec .posts article:hover,
.hero~.sec .shots figure:hover,
.hero~.sec .badgewall figure:hover{transform:translateY(-2px);box-shadow:var(--sp2-lift)}
.hero~.sec .rel a:focus-visible,
.hero~.sec .faq summary:focus-visible{outline:3px solid var(--gold-soft);outline-offset:3px}

/* ---- the pricing row -----------------------------------------------------
   overflow is opened so the ribbon can sit ABOVE the card; the head gets the
   card's inner radius back (24 minus the 2px border) because it was the only
   thing the old overflow:hidden was clipping. */
.hero~.sec .card--pack{
  border-radius:var(--sp2-rc);overflow:visible;
  box-shadow:inset 0 0 0 1px var(--line), var(--sp2-d1);
}
.hero~.sec .card--pack.featured{
  background:linear-gradient(180deg,#232c40 0%,var(--panel) 52%);
  box-shadow:inset 0 0 0 1px var(--gold-deep), var(--sp2-d2);
}
.hero~.sec .card--pack:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--line-2), var(--sp2-lift)}
.hero~.sec .card--pack.featured:hover{box-shadow:inset 0 0 0 1px var(--gold-d), var(--sp2-lift)}
.hero~.sec .pack__head{border-radius:22px 22px 0 0}

/* the ribbon, as a tab above the card. Out of flow, so it moves nothing. */
.hero~.sec .pack__flag{
  left:50%;right:auto;top:-26px;translate:-50% 0;
  padding:7px 18px;line-height:1;white-space:nowrap;
  border-radius:13px 13px 0 0;
  background:var(--panel-2);color:var(--gold-soft);
  box-shadow:inset 0 0 0 1px var(--line-2);
  letter-spacing:.1em;
}
.hero~.sec .card--pack.featured .pack__flag{
  background:linear-gradient(135deg,var(--gold-soft),var(--gold) 58%,var(--gold-d));
  color:#1a1405;
  box-shadow:inset 0 0 0 1px var(--gold-deep), 0 -2px 10px rgba(211,168,31,.28);
}

/* dashed separators between the feature rows, drawn as a background so the
   rows keep the height the shared button baseline was measured against */
.hero~.sec .pack__perks li{
  background-image:repeating-linear-gradient(90deg,
    rgba(238,241,247,.20) 0 4px,transparent 4px 9px);
  background-repeat:no-repeat;background-position:left bottom;
  background-size:100% 1px;
}
.hero~.sec .pack__perks li:last-child{background-image:none}

/* ---- hero motif: circulate ------------------------------------------------
   Two counter-rotating arcs, the inner one tighter and faster, both on the
   media column's pseudo-elements and never on the <img> -- that is the LCP
   element and it is preloaded. Both are sized well outside the product card
   (150% and 112% of a column the card does not fill), or they would be drawn
   under an opaque panel and render as nothing at all.

   64s and 41s: this is a capsule taken nightly for weeks, so the motion has to
   read as a slow circulation rather than as a spinner. New keyframe names --
   spDrift, spSettle and spSettleCard are already taken in this sheet. */
.hero .hero__media::before{
  content:'';position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:150%;aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(232,198,90,.26);
  border-top-color:rgba(232,198,90,.04);
  border-right-color:rgba(232,198,90,.44);
  border-bottom-color:transparent;
  background:radial-gradient(closest-side,rgba(232,198,90,.13),
             rgba(232,198,90,.04) 56%,transparent 72%);
  filter:none;
  animation:spCircleWide 64s linear infinite;
  z-index:0;pointer-events:none;
}
.hero .hero__media::after{
  content:'';position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:112%;aspect-ratio:1;border-radius:50%;
  border:2px solid transparent;
  border-top-color:rgba(232,198,90,.44);
  border-right-color:rgba(232,198,90,.10);
  border-left-color:rgba(127,174,133,.26);
  background:none;filter:none;
  animation:spCircleTight 41s linear infinite reverse;
  z-index:0;pointer-events:none;
}
@keyframes spCircleWide{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes spCircleTight{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@media (max-width:760px){
  .hero .hero__media::before{width:122%}
  .hero .hero__media::after{width:104%}
}
/* Motion off, arcs kept: the rule above the marker hides both pseudo-elements
   under reduced motion with !important, so this has to be more specific than
   `.hero__media::before` to put the static drawing back. */
@media (prefers-reduced-motion:reduce){
  .hero .hero__media::before,.hero .hero__media::after{
    animation:none!important;opacity:1!important;
  }
  .hero .btn:hover,.hero~.sec .btn:hover,
  .hero~.sec .rel a:hover,.hero~.sec .posts article:hover,
  .hero~.sec .shots figure:hover,.hero~.sec .badgewall figure:hover,
  .hero~.sec .card--pack:hover{transform:none}
}
/*!SITE-HOME-PAINT-END*/
/* ==== modern surface (modern_surface.py) ==== */
/* House rule 11. This stylesheet had 23 box-shadow declaration(s)
   and 1 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 (238,241,247), 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(238,241,247,.06), 0 6px 18px rgba(238,241,247,.07);
  --lift:0 2px 6px rgba(238,241,247,.09), 0 16px 34px rgba(238,241,247,.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. */
.keypoints,
.alert,
.byline,
.final,
.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 ==== */

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