:root{
  /* ---- ground: BONE, with faded lilac laid over it ----
     The bone is the MindSave label itself (#f1eff0 sampled from
     assets/mindsave-tall-large-product-on-marble-hero.webp, warmed);
     the lilac band is the DIETARY SUPPLEMENT strip at the foot of the
     bottle, sampled at #8b74ae and opened out into a wash. */
  --paper:#f5f2ea;
  --paper-tint:#ece5f2;
  --paper-card:#fcfaf5;
  --paper-deep:#e2d8ec;
  --paper-warm:#f6f0e4;

  /* ---- ink: the aubergine half of the wordmark, deepened ---- */
  --ink:#241634;
  --ink-dk:#170d22;
  --ink-soft:#3a2a4d;
  --muted:#554765;
  --faint:#6f6280;
  --line:#ded4e6;
  --line-soft:#ece5f0;

  /* ---- accent, sampled from the product ----
     #6847b2 is the violet of the brain glyph and the "Save" half of the
     wordmark in assets/mindsave-wide-large-brand-wordmark.png.
     #301d48 is the "Mind" half, and it is the dark slab colour. */
  --accent:#6847b2;
  --accent-deep:#301d48;
  --accent-tint:#efe9f8;
  --accent-line:#cbbbe4;
  --accent-glow:rgba(104,71,178,.24);

  /* ---- lilac: the label's own faded band, for the grounds ---- */
  --lilac:#8b74ae;
  --lilac-soft:#e4dcee;

  /* ---- night: the deep slabs, the footer and the buy bar ---- */
  --night:#241634;
  --night-2:#3d2758;
  --night-ink:#d8cde6;

  /* ---- secondary ramp: the warm bronze the listing artwork lights the
     bottles with. It is the lamp colour, and it is the only warm thing
     on the page. House token names kept so the shared tools keep working. */
  --gold:#ab8b53;
  --gold-deep:#735832;
  --gold-soft:#f5ecdc;
  --gold-line:#e0c99e;

  /* ---- type: Gilda Display has ONE weight (400), so headings are sized
     and spaced rather than bolded, and Gudea carries every bold at 700. ---- */
  --display:'Gilda Display',Georgia,'Times New Roman',serif;
  --serif:'Gilda Display',Georgia,'Times New Roman',serif;
  --sans:'Gudea',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* ---- metrics ---- */
  --wrap:1180px;
  --measure:760px;
  --measure-wide:980px;
  --r:8px;
  --r-s:4px;
  --r-l:14px;
  --radius:8px;
  --shadow:0 14px 34px rgba(36,22,52,.11);
  --shadow-sm:0 2px 12px rgba(36,22,52,.07);
  --shadow-lg:0 26px 58px rgba(48,29,72,.20);
}

/* ==========================================================================
   Themindsave - themindsave.com
   Design slot: batch9_assignments.py row 344.

   GROUND      faded lilac over bone
   ACCENT      the violet on the MindSave label and wordmark
   TYPE        Gilda Display (one weight) / Gudea (body and every bold)
   HEADER      one bar split by a single thick vertical rule: the identity
               to the left of it, everything else to the right
   HERO        copy LEFT, the bottle RIGHT standing inside a tall arch
               niche, with the quiet-lamp glow warming behind it
   FOOTER      one slab whose FIRST column is the returns address and
               whose remaining columns are the pages
   MOTIF       quiet-lamp - one lamp warming and dimming behind the bottle

   The component system is the estate's. The arrangement, the chrome and
   the palette are this site's, and the palette is taken from the product
   bottle. MindSave is a ONE-CAPSULE-A-DAY capsule, 30 to a bottle, so
   nothing here is written in gummies, scoops or drops.
   ========================================================================== */

/* ---- RESET AND BASE ------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box;min-width:0}
html{scroll-behavior:smooth;font-size:16px;scroll-padding-top:106px}
html,body{overflow-x:clip}
body{font-family:var(--sans);background:var(--paper);color:var(--muted);
  line-height:1.72;-webkit-font-smoothing:antialiased;font-size:1.0625rem}
img,svg,table,video{max-width:100%}
img{height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
ul,ol{list-style:none}
h1,h2,h3,h4,h5{font-family:var(--display);color:var(--ink);line-height:1.22;
  font-weight:400;letter-spacing:-.004em}
b,strong{color:var(--ink-soft);font-weight:700}

.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;
  padding:10px 16px;z-index:9999;border-radius:0 0 var(--r-s) 0}
.skip:focus{left:0}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:24px}

/* ---- 0. THE TOPLINE TRUST STRIP (house .util component) ------------------
   Role, lot, dose and count, guarantee, order line. Five facts above the
   navigation so the menu does not have to carry them (hero.md).

   It stays ABOVE the CRITICAL-END marker: it is the first thing painted,
   and appended to the end of the sheet it would load async and flash
   unstyled at the very top of the page.

   The strip is bone on aubergine here rather than the other way round,
   because the header below it is the light bar: the page opens dark,
   lightens through the masthead and lands on the bone hero. The dividers
   are thin vertical rules rather than dots, which is the same device the
   masthead's one thick rule uses at a larger size. */
.util{background:var(--night);color:var(--night-ink);font-size:.9063rem;
  border-bottom:1px solid var(--night-2)}
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:0;
  padding-block:9px}
.util__item{white-space:nowrap;padding-right:16px}
.util__item::after{content:"";display:inline-block;width:1px;height:12px;
  background:var(--lilac);margin-left:16px;vertical-align:-.12em}
.util__item:nth-child(4)::after{display:none}
.util__item b{color:#fff;font-weight:700}
.util__tel{margin-left:auto;color:#fff;font-weight:700;white-space:nowrap;
  padding-left:16px}
.util__tel:hover{color:var(--gold-line)}
/* The strip sheds rather than wraps, and each breakpoint is the width at
   which the remaining facts stop fitting. The lot goes first (it is
   printed again on batch-verify.html and on the tag under the bottle),
   then the dose and count (the Quick Answer opens with both). The role,
   the guarantee and the order line survive to 390, where the strip
   settles into two centred rows rather than a ragged wrap. */
@media(max-width:1150px){.util__item:nth-child(2){display:none}}
@media(max-width:980px){.util__item:nth-child(3){display:none}}
@media(max-width:700px){
  .util__row{justify-content:center;padding-block:7px}
  .util__item:first-child{flex:0 0 100%;text-align:center;padding-right:0}
  .util__item:first-child::after{display:none}
  .util__item:nth-child(4){padding-right:14px}
  .util__item:nth-child(4)::after{display:inline-block;margin-left:14px}
  .util__tel{margin-left:0;padding-left:0}
}
@media(max-width:460px){.util__long{display:none}}

/* ---- 1. HEADER: one bar, split by one thick vertical rule ----------------
   The design slot for this site: the identity sits LEFT of a single thick
   accent rule and everything else sits right of it. The rule is a real
   element (`.nav__rule`), not a border, because it has to stretch the full
   height of the bar and stay put while the right-hand side sheds items.

   It is the site's loudest piece of chrome on purpose: the ground is pale,
   the type is quiet, and this one 6px violet stripe is what a returning
   visitor recognises before they read anything. */
.nav{position:sticky;top:0;z-index:900;background:rgba(245,242,234,.94);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.nav__row{display:flex;align-items:stretch;gap:0;padding-block:12px;
  flex-wrap:nowrap;position:relative}
.nav__rule{flex:none;width:6px;background:var(--accent);border-radius:3px;
  margin-inline:26px}
.brand{display:inline-flex;align-items:center;gap:0;flex:none;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand svg{width:40px;height:40px;margin-right:13px;flex:none}
.brand__t{display:flex;flex-direction:column;line-height:1.04;justify-content:center}
.brand__prod{font-family:var(--display);font-size:1.66rem;font-weight:400;
  color:var(--ink);letter-spacing:-.006em;white-space:nowrap}
.brand__prod span{color:var(--accent)}
.brand__firm{font-family:var(--sans);font-size:.7rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-top:5px;
  white-space:nowrap}
.navmenus{display:flex;align-items:center;gap:24px;flex-wrap:nowrap;
  margin-right:auto}
.menu{display:flex;align-items:center;gap:22px;flex-wrap:nowrap}
.menu li{flex:none}
.menu a{font-family:var(--sans);font-size:.95rem;font-weight:700;
  color:var(--ink-soft);white-space:nowrap;padding-block:8px;
  border-bottom:2px solid transparent}
.menu a:hover,.menu a[aria-current]{color:var(--accent);text-decoration:none;
  border-bottom-color:var(--accent)}
.nav__cta{flex:none;display:flex;align-items:center;margin-left:20px}
.burger{display:none;background:var(--paper-card);border:1px solid var(--line);
  cursor:pointer;width:46px;height:46px;padding:11px;flex:none;align-self:center;
  border-radius:var(--r-s)}
.burger span{display:block;height:2px;background:var(--ink);margin:4px 0;
  border-radius:2px}

/* ---- 2. BUTTONS: quiet slabs with a soft shoulder ------------------------ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--sans);font-weight:700;font-size:1rem;line-height:1.2;
  padding:14px 26px;border-radius:var(--r-s);border:2px solid transparent;
  cursor:pointer;text-align:center;letter-spacing:.01em;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn--cta{background:var(--accent);color:#fff;box-shadow:0 10px 24px var(--accent-glow)}
.btn--cta:hover{background:var(--accent-deep);color:#fff}
.btn--ghost{background:var(--paper-card);color:var(--accent-deep);
  border-color:var(--accent-line)}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent-deep)}
.btn--gold{background:var(--gold-soft);color:var(--gold-deep);
  border-color:var(--gold-line)}
.btn--gold:hover{border-color:var(--gold)}
.btn--lg{padding:17px 30px;font-size:1.06rem}
.btn--block{display:flex;width:100%}

/* ---- 3. HERO: copy LEFT, the bottle RIGHT inside a tall arch niche -------
   The arch is the same construction as the brand mark, at hero size: a
   square-footed, round-topped alcove drawn behind the bottle. It is
   deliberately TRANSLUCENT, because the quiet-lamp motif writes its two
   warming circles onto `.hero__media::before` and `::after` at z-index 0
   and they have to read THROUGH the niche. An opaque card would hide the
   motif completely (design-system.md, motif rule 6), which is the first
   mistake this pattern invites.

   Layering, from the back: motif glow (0), the niche (1), the card (2),
   the bottle (3), the floating fact chips (5).

   Motion, and where it is allowed to be: the lamp glows on the media
   column's pseudo-elements, and a gentle float on `.hero__card`. Never on
   the <img>, which is the LCP element and is preloaded. Never on the H1,
   which starts at opacity:0 if animated and moves the LCP with it. */
.hero{position:relative;background:var(--paper);overflow-x:clip;overflow-y:visible;
  border-bottom:1px solid var(--line)}
.hero__grid{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:52px;
  align-items:start;padding-block:54px 70px}
.pill{display:inline-flex;align-items:center;gap:9px;background:var(--paper-card);
  border:1px solid var(--accent-line);color:var(--accent-deep);font-weight:700;
  font-size:.8438rem;letter-spacing:.14em;text-transform:uppercase;
  padding:7px 16px;border-radius:var(--r-s);box-shadow:var(--shadow-sm)}
.pill::before{content:"";width:8px;height:8px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 4px var(--accent-tint)}
.hero h1{font-size:clamp(1.92rem,3.2vw,2.62rem);margin:18px 0 0;font-weight:400;
  line-height:1.14;letter-spacing:-.008em}
.hero h1 span{color:var(--accent)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0}
.hero__sub{margin:16px 0 0;font-size:1.0625rem;color:var(--faint);
  display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.hero__sub>span{white-space:nowrap}

.ticks{margin:22px 0 0;display:grid;gap:11px}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-size:1.0625rem;
  color:var(--ink-soft)}
.ck{flex:none;width:22px;height:22px;border-radius:var(--r-s);background:var(--accent);
  color:#fff;display:inline-flex;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:700;margin-top:3px}

.heroseals{display:flex;flex-wrap:wrap;gap:18px 26px;margin:22px 0 0}
.heroseals figure{display:flex;align-items:center;gap:10px;font-size:.9063rem;
  color:var(--faint);font-weight:700}
.heroseals img{flex:none}

.pay{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:18px 0 0;
  font-size:.9063rem;color:var(--faint)}
.pay img{width:200px;height:28px;object-fit:contain}

.factpills{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0}
.factpills li{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r-s);padding:6px 13px;font-size:.9063rem;color:var(--faint)}
.factpills li b{color:var(--ink)}

.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
  margin:22px 0 0;max-width:520px}
.figures div{background:var(--gold-soft);border:1px solid var(--gold-line);
  border-radius:var(--r);padding:14px 16px}
.figures b{display:block;font-family:var(--display);font-size:1.62rem;
  font-weight:400;color:var(--ink);line-height:1.05}
.figures span{display:block;margin-top:5px;font-size:.9063rem;color:var(--faint)}

.hero__rating{display:flex;align-items:center;gap:9px;margin:16px 0 0;
  font-size:.95rem;color:var(--faint);flex-wrap:wrap}
.hero__rating b{color:var(--ink-soft)}
.rev__stars{color:var(--gold-deep);letter-spacing:1px}

/* The product column. */
.hero__media{position:relative}
.hero__stick{position:relative;display:block;padding-block:26px 48px}
/* The alcove. Square-footed and round-topped, translucent so the lamp
   reads through it, with a hairline that stays crisp at every width. */
.hero__niche{position:absolute;left:50%;top:52%;width:86%;height:94%;
  translate:-50% -50%;z-index:1;pointer-events:none;
  border-radius:999px 999px var(--r) var(--r);
  border:1px solid var(--accent-line);border-bottom:0;
  background:linear-gradient(180deg,rgba(236,229,242,.62),rgba(245,242,234,.30) 58%,
    rgba(245,242,234,0))}
/* The lamp itself: a warm crown inside the top of the arch. Static. The
   movement belongs to the motif, which is the only thing on this page
   that animates around the bottle. */
.hero__niche::before{content:"";position:absolute;left:50%;top:5%;width:44%;
  height:9%;translate:-50% 0;border-radius:50%;
  background:radial-gradient(ellipse at center,var(--gold-soft) 0%,
    rgba(224,201,158,.55) 52%,rgba(224,201,158,0) 76%)}
.hero__card{background:transparent;text-align:center;padding:8px;
  position:relative;z-index:2}
.hero__card img{margin-inline:auto;max-width:100%;
  filter:drop-shadow(0 24px 32px rgba(36,22,52,.30))}
.hero__tag{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);z-index:4;
  background:var(--accent-tint);color:var(--accent-deep);font-size:.9063rem;
  font-weight:700;letter-spacing:.05em;padding:7px 16px;border-radius:var(--r-s);
  white-space:nowrap;border:1px solid var(--accent-line)}
.floaty{position:absolute;background:var(--paper-card);border-radius:var(--r);
  padding:11px 15px;box-shadow:var(--shadow-lg);font-family:var(--sans);
  font-size:1rem;font-weight:700;color:var(--ink);z-index:5;line-height:1.2;
  display:flex;align-items:center;gap:10px}
.floaty img{width:42px;height:42px;flex:none}
.floaty small{display:block;color:var(--accent-deep);font-family:var(--sans);
  font-size:.9063rem;font-weight:400;margin-top:3px}
.floaty--tl{top:20px;left:-14px}
.floaty--br{bottom:60px;right:-14px}

@media(min-width:1025px){
  .hero__media{position:sticky;top:96px;align-self:start;
    height:calc(100vh - 116px);min-height:380px;
    display:flex;align-items:center;justify-content:center}
  .hero__stick{max-height:calc(100vh - 132px)}
  .hero__stick .hero__card img{max-height:calc(100vh - 312px);min-height:190px;
    width:auto;object-fit:contain}
}

/* ---- 4. QUICK ANSWER (AEO) ----------------------------------------------- */
.answer{background:var(--paper-card);border:1px solid var(--line-soft);
  border-left:5px solid var(--accent);border-radius:0 var(--r) var(--r) 0;
  box-shadow:var(--shadow-sm);padding:20px 26px;margin:24px 0 0}
.answer .qtag{display:block;font-family:var(--sans);font-weight:700;
  font-size:.8438rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent-deep);margin-bottom:.5em}
.answer p{margin:0;font-size:1.0625rem;color:var(--ink-soft)}
.answer p+p{margin-top:.7em}
.hero .answer p{font-size:1.0625rem;line-height:1.62}

/* ---- 5. TRUST ROW -------------------------------------------------------- */
.trust{background:var(--paper-tint);border-bottom:1px solid var(--accent-line)}
.trust__note{max-width:300px;font-size:.9063rem;line-height:1.5;color:var(--faint)}
.trust__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:22px 38px;padding-block:20px}
.trust__row figure{text-align:center;max-width:132px}
.trust__row img{margin-inline:auto}
.trust__row figcaption{font-size:.9063rem;color:var(--faint);margin-top:7px;
  font-weight:700}

/* ---- ABOVE-THE-FOLD RESPONSIVE ------------------------------------------
   The bar sheds rather than wraps (design-system.md). The thick rule is the
   one thing that never goes: it is the site's signature, and it survives to
   390 where it becomes the divider between the wordmark and the burger. */
@media(max-width:1330px){.menu{gap:17px}.menu a{font-size:.9rem}
  .nav__rule{margin-inline:20px}}
@media(max-width:1180px){
  .burger{display:block;margin-left:auto}
  .navmenus{display:none;position:absolute;top:calc(100% + 12px);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;background:var(--paper-card);
    border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
    box-shadow:var(--shadow);padding-block:6px 10px;max-height:74vh;overflow-y:auto;
    margin-right:0}
  .navmenus.open{display:flex}
  .menu{flex-direction:column;align-items:stretch;gap:0}
  .menu a{display:block;padding:14px 22px;border-bottom:1px solid var(--line-soft);
    font-size:1rem}
  .menu a:hover,.menu a[aria-current]{border-bottom-color:var(--line-soft);
    background:var(--accent-tint)}
  .nav__cta{margin-left:16px}
}
@media(max-width:920px){
  .hero__grid{grid-template-columns:1fr;gap:24px;padding-block:28px 46px}
  /* display:contents promotes the copy column's children to grid items so
     the phone order can be set individually. DOM order is untouched: the
     Quick Answer still follows the H1 for parsers and for the speakable
     selector. Every sibling gets an explicit order, including the three
     blocks hero_restore.py appends, or they default to 0 and jump above
     the eyebrow. */
  .hero__copy{display:contents}
  .hero__copy>.pill{order:1;justify-self:start}
  .hero__copy>h1{order:2}
  .hero__media{order:3}
  .hero__copy>.answer{order:4}
  .hero__copy>.ticks{order:5}
  .hero__copy>.heroseals{order:6}
  .hero__copy>.hero__cta{order:7}
  .hero__copy>.pay{order:8}
  .hero__copy>.hero__rating{order:9}
  .hero__copy>.hero__sub{order:10}
  .hero__copy>.factpills{order:11}
  .hero__copy>.figures{order:12}
  .hero__card img{max-width:300px}
  .floaty{display:none}
}
@media(max-width:700px){
  .hero h1{font-size:1.92rem}
  /* This bottle is 711x1450, a 0.49 ratio, so a width cap is the wrong
     control on a phone: at 232px wide it stands 473px tall and pushes the
     Quick Answer to y=1061 against a ~850 target. Cap the HEIGHT and let the
     width follow. */
  .hero__card img{max-width:232px;max-height:348px;width:auto}
  .hero__stick{padding-block:12px 30px}
  .hero__niche{width:74%}
  .figures{grid-template-columns:1fr}
}
@media(max-width:480px){
  .nav__cta .btn{padding:12px 15px;font-size:.93rem}
  .brand__firm{display:none}
  .nav__rule{margin-inline:14px;width:5px}
}
/* Measured, not guessed: at 390 the row needs 433px and has 342. The order
   button is the item to shed, because the fixed buy bar carries an order CTA
   on a phone and is never more than a thumb away. 470 is the width at which
   the row stops fitting, so it is the width the button goes. */
@media(max-width:470px){.nav__cta{display:none}}


/* ---- hero motif -- quiet-lamp ---------------------------------------- */
.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(196deg,#c8bbd8,#f5f2ea 54%,#f5f2ea)}.hero__media::before{content:'';position:absolute;left:50%;top:36%;width:98%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;z-index:0;pointer-events:none;background:radial-gradient(closest-side,rgba(104,71,178,0.26),transparent 70%);animation:tmLamp 13s ease-in-out infinite}.hero__media::after{content:'';position:absolute;left:50%;top:36%;width:40%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;z-index:0;pointer-events:none;background:radial-gradient(closest-side,rgba(104,71,178,0.34),transparent 66%);animation:tmLamp 13s ease-in-out infinite;animation-delay:1.6s}@keyframes tmLamp{0%,100%{opacity:.30;transform:scale(.92)}50%{opacity:.78;transform:scale(1.06)}}
@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. */
@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;}
}

/*!CRITICAL-END*/

/* ---- 6. SECTIONS: flat bands, a hairline, no shadow between them --------- */
.sec{padding-block:72px}
.sec--tight{padding-block:40px}
.sec--tint{background:var(--paper-tint);border-block:1px solid var(--accent-line)}
.sec--white{background:var(--paper-card)}
.sec--warm{background:var(--paper-warm)}
.sec--center .sec__head{text-align:center;margin-inline:auto}
.sec__head{max-width:var(--measure-wide);margin-bottom:32px}
.sec__head--center{text-align:center;margin-inline:auto}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);
  font-size:.8438rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-deep);margin-bottom:12px}
.eyebrow::before{content:"";width:22px;height:3px;background:var(--accent)}
.rule{display:none}
.sec h2{font-size:clamp(1.6rem,2.9vw,2.2rem);margin-bottom:12px;font-weight:400}
.sec h3{font-size:1.24rem;margin-bottom:8px;font-weight:400}
.lead{font-size:1.12rem;color:var(--muted)}
.note{font-size:.9063rem;color:var(--faint)}
.sec p+p,.sec p+ul,.sec p+ol,.sec ul+p,.sec ol+p{margin-top:1em}
.sec>.wrap>p,.sec>.wrap>h2,.sec>.wrap>h3,.sec>.wrap>h4,
.sec>.wrap>ul,.sec>.wrap>ol,.sec>.wrap>.sec__head,.sec>.wrap>.callout,
.sec>.wrap>.alert,.sec>.wrap>.byline,.sec>.wrap>.refs,.sec>.wrap>.answer,
.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}
.sec>.wrap>h1{max-width:var(--measure);margin-inline:auto;
  font-size:clamp(1.95rem,3.6vw,2.7rem);font-weight:400;letter-spacing:-.008em}
.sec>.wrap>.eyebrow{display:flex;max-width:var(--measure);margin-inline:auto}
.sec ul li{position:relative}
.sec>.wrap>ul>li{padding-left:24px;margin-bottom:.45em}
.sec>.wrap>ul>li::before{content:"";position:absolute;left:3px;top:.72em;
  width:8px;height:8px;border-radius:50%;background:var(--lilac)}
.sec ol{counter-reset:n;display:grid;gap:11px}
.sec>.wrap>ol>li{position:relative;padding-left:38px;counter-increment:n}
.sec>.wrap>ol>li::before{content:counter(n);position:absolute;left:0;top:1px;
  width:27px;height:27px;border-radius:50%;background:var(--accent-tint);
  color:var(--accent-deep);font-size:1.062rem;font-weight:700;display:flex;
  align-items:center;justify-content:center;font-family:var(--sans)}
.dropcap::first-letter{float:left;font-family:var(--display);font-size:3.3rem;
  line-height:.88;font-weight:400;color:var(--accent);padding:6px 12px 0 0}

.pullquote{border-left:4px solid var(--lilac);padding:8px 0 8px 22px;margin:26px auto}
.pullquote p{font-family:var(--display);font-size:1.3rem;font-weight:400;
  color:var(--ink);line-height:1.46}
.pullquote cite{display:block;margin-top:9px;font-style:normal;font-size:.9063rem;
  color:var(--faint);letter-spacing:.08em;text-transform:uppercase;font-weight:700}

.crumbs{font-size:.9063rem;color:var(--faint);padding-block:18px 0}
.crumbs a{color:var(--faint)}

/* ---- 7. CARDS, GRIDS ----------------------------------------------------- */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:26px 24px;position:relative;overflow:hidden;
  transition:transform .2s ease,border-color .2s ease}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--accent);opacity:0;transition:opacity .2s ease}
.card:hover{transform:translateY(-3px);border-color:var(--accent-line)}
.card:hover::before{opacity:1}
.card h3{font-size:1.16rem}
.card p{font-size:1.0625rem;color:var(--muted)}
.card p+p{margin-top:.8em}

.steps{display:grid;gap:14px;counter-reset:s}
.step{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:24px 26px 24px 80px;position:relative;
  counter-increment:s}
.step__n{position:absolute;left:22px;top:22px;width:40px;height:40px;
  border-radius:999px 999px 6px 6px;background:var(--accent);color:#fff;display:flex;
  align-items:center;justify-content:center;font-family:var(--sans);
  font-weight:700;font-size:1.02rem}
.step__n::before{content:counter(s,decimal-leading-zero)}
.step h3{font-size:1.14rem}
.step p{font-size:1.0625rem;color:var(--muted)}

.chips{display:grid;gap:10px;margin:18px 0 0}
.chips li{display:flex;gap:11px;align-items:flex-start;font-size:1.0625rem}
.chips .ck{background:var(--gold-soft);color:var(--gold-deep);
  border:1px solid var(--gold-line)}

.callout{background:var(--accent-tint);border-left:5px solid var(--accent);
  border-radius:0 var(--r) var(--r) 0;padding:18px 24px;margin:24px auto;
  font-size:1.0625rem}
.callout p+p{margin-top:.8em}
.alert{background:var(--gold-soft);border-left:5px solid var(--gold);
  border-radius:0 var(--r) var(--r) 0;padding:18px 24px;margin:24px auto;
  font-size:1.0625rem}
.alert p+p{margin-top:.8em}
.flag{display:inline-block;background:var(--gold-soft);color:var(--gold-deep);
  font-size:.8438rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 12px;border-radius:var(--r-s);border:1px solid var(--gold-line)}

/* ---- 8. TABLES ----------------------------------------------------------- */
.tablewrap{overflow-x:auto;background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);margin:22px auto}
table.dtable{width:100%;border-collapse:collapse;font-size:1rem;min-width:520px}
.dtable caption{text-align:left;padding:16px 20px 0;font-family:var(--display);
  font-weight:400;color:var(--ink);font-size:1.08rem}
.dtable th,.dtable td{padding:12px 20px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line-soft)}
.dtable thead th{background:var(--night);color:#fff;font-size:.9063rem;
  letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  font-family:var(--sans)}
.dtable tbody tr:nth-child(even) td{background:var(--paper)}
.dtable tbody tr:last-child td{border-bottom:0}
.dtable td b{color:var(--ink)}

/* ---- 9. SPLIT ------------------------------------------------------------ */
.split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:42px;align-items:center}
.split--rev{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
.split__media{text-align:center}
.split__media img{margin-inline:auto;border-radius:var(--r)}

/* ---- 10. SHOTS: images that carry content -------------------------------- */
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;
  margin-top:8px}
.shots--wide{grid-template-columns:repeat(3,minmax(0,1fr))}
.shots--one{grid-template-columns:minmax(0,1fr);max-width:var(--measure-wide);
  margin-inline:auto}
.shots figure{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden}
.shots img{width:100%}
.shots figure.icon img{width:auto;max-width:180px;margin:20px auto 0}
.shots figure.tall img{width:auto;max-width:300px;margin-inline:auto}
.shots figcaption{padding:18px 20px;font-size:.9688rem;color:var(--muted)}
.shots figcaption b{display:block;font-family:var(--display);font-size:1.1rem;
  font-weight:400;color:var(--ink);margin-bottom:6px}

/* ---- 11. PROMO / STATS / BADGEWALL: the aubergine slabs ------------------ */
.promo{background:linear-gradient(118deg,var(--night),var(--night-2));
  color:var(--night-ink);border-radius:var(--r-l);padding:32px 36px;display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center}
.promo p{margin:0}
.promo b{color:#fff}
.stats{background:linear-gradient(118deg,var(--night),var(--night-2));
  border-radius:var(--r-l);padding:34px;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;text-align:center}
.stats b{display:block;font-family:var(--display);font-size:2.3rem;font-weight:400;
  color:#fff;line-height:1}
.stats span{display:block;margin-top:8px;font-size:.9063rem;color:var(--night-ink)}
.badgewall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.badgewall figure{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:20px 16px;text-align:center}
.badgewall img{margin:0 auto 10px;max-width:74px}
.badgewall figcaption{font-size:.9063rem;color:var(--muted)}
.badgewall figcaption b{display:block;color:var(--ink);font-size:.98rem;
  margin-bottom:4px;font-family:var(--display);font-weight:400}

/* ---- 12. WHY / WHOFOR ---------------------------------------------------- */
.whygrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.whycard{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:26px 24px;position:relative;overflow:hidden}
.whycard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--accent),var(--gold))}
.whycard h3{font-size:1.14rem}
.whycard p{font-size:1.0625rem;color:var(--muted)}
.whofor{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.forlist{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:26px}
.forlist h3{font-size:1.16rem;margin-bottom:12px}
.forlist li{display:flex;gap:10px;font-size:1.0625rem;margin-bottom:9px}
.forlist li::before{content:"";flex:none;width:8px;height:8px;margin-top:.62em;
  border-radius:50%;background:var(--accent)}
.forlist--no li::before{background:var(--gold)}

/* ---- 13. THE LABEL PANEL AND THE INGREDIENT CARDS ------------------------
   MindSave names eight ingredients and prints a number beside none of them,
   so `.ing__dose` carries a plain descriptor of what kind of thing the name
   is rather than a milligram figure. It is deliberately quiet: eight loud
   chips saying the same thing would make the missing number the loudest
   thing on the screen, which is the defect the absence rules exist to stop. */
.ing{display:grid;gap:22px}
.ingcard{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:28px;position:relative}
.ingcard h3{font-size:1.28rem;margin-bottom:4px}
.ingcard .ingsub{font-size:.9062rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-deep);font-weight:700;margin-bottom:12px;display:block}
.ingcard p{font-size:1.0625rem}
.ingcard p+p{margin-top:.85em}
.ing__dose{display:inline-block;background:var(--accent-tint);
  border:1px solid var(--accent-line);color:var(--accent-deep);border-radius:var(--r-s);
  padding:3px 11px;font-size:.9063rem;font-weight:700;margin-bottom:10px}
.ingthumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.ingthumbs figure{text-align:center}
.ingthumbs img{margin-inline:auto;border-radius:var(--r);background:var(--paper-card);
  border:1px solid var(--line)}
.ingthumbs figcaption{margin-top:9px;font-size:.9063rem;color:var(--muted);
  font-weight:700}
.ingthumbs figcaption b{display:block;font-family:var(--display);font-weight:400;
  font-size:1.06rem;color:var(--ink);margin-bottom:3px}
.facts{background:var(--paper-card);border:2px solid var(--ink);border-radius:var(--r-s);
  overflow:hidden;max-width:600px;margin-inline:auto}
.facts__h{background:var(--ink);color:#fff;padding:14px 22px;
  font-family:var(--display);font-size:1.2rem;font-weight:400}
.facttab{width:100%;border-collapse:collapse;font-size:1rem}
.facttab th,.facttab td{padding:11px 22px;border-bottom:1px solid var(--line);
  text-align:left}
.facttab th{font-weight:700;color:var(--ink-soft);font-size:1rem}
.facttab td:last-child{text-align:right;font-weight:700;color:var(--ink)}
.facttab tr:last-child th,.facttab tr:last-child td{border-bottom:0}

/* ---- 14. QA record sheet ------------------------------------------------- */
.qa{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;max-width:920px;margin-inline:auto}
.qa__h{background:var(--night);color:#fff;padding:16px 24px;
  font-family:var(--display);font-weight:400;font-size:1.12rem}
.qa dl{margin:0;display:grid;grid-template-columns:32% minmax(0,1fr)}
.qa dt,.qa dd{padding:13px 24px;border-bottom:1px solid var(--line-soft);margin:0}
.qa dt{font-weight:700;color:var(--ink);font-size:1.062rem;letter-spacing:.06em;
  text-transform:uppercase;font-family:var(--sans)}
.qa dd{color:var(--muted);font-size:1.0625rem}
.qa dl>:nth-last-child(-n+2){border-bottom:0}

/* ---- 15. ADD-TO-CART PANEL ----------------------------------------------- */
.buy{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;
  align-items:stretch;margin-top:8px}
.buy__card{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r-l);overflow:hidden;display:flex;flex-direction:column;
  text-align:center}
/* Raised with a negative margin, not a transform: the reveal pass sets
   transform:none on every revealed card and would cancel a translate. */
/* The ring is a shadow, not a thicker border. A 2px border against the
   neighbours' 1px makes this card's contents start 1px lower, and the Add To
   Cart buttons then sit at 745/746/745 inside their own cards instead of
   three identical numbers. Same ring, no layout cost. */
.buy__card--feature{border:1px solid var(--accent);
  box-shadow:0 0 0 1px var(--accent),var(--shadow-lg);margin-top:-12px}
/* The head band is the second fixed block above the button: flag, pack name
   and a supply line that reserves two rows. min-height locks the whole band
   so a longer flag on one card cannot move that card's button on its own. */
.buy__head{background:var(--night);color:#fff;padding:16px 18px 14px;
  position:relative;min-height:158px}
.buy__card--feature .buy__head{background:linear-gradient(118deg,var(--accent),var(--accent-deep))}
.buy__flag{display:inline-block;background:var(--gold-soft);color:var(--gold-deep);
  font-size:.8438rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 12px;border-radius:var(--r-s);margin-bottom:8px}
.sec .buy__name{color:#fff;font-size:1.62rem;font-weight:400;margin:0;
  font-family:var(--display)}
.buy__supply{color:var(--night-ink);font-size:.9063rem;font-weight:700;margin-top:4px;
  min-height:3.3em}
.buy__body{padding:18px 22px 22px;display:flex;flex-direction:column;flex:1}
/* One box for every pack shot: the six-bottle image is 0.75:1 where the
   two-bottle is 1.06:1, and at a shared width they sat at three heights. */
.buy__img{display:block;width:100%;max-width:230px;height:180px;object-fit:contain;
  margin:0 auto 10px}
.buy__price{font-family:var(--display);font-size:3rem;font-weight:400;
  color:var(--ink);line-height:1;display:flex;align-items:flex-start;
  justify-content:center;gap:2px}
.buy__cur{font-size:1.4rem;margin-top:6px}
.buy__per{font-family:var(--sans);font-size:1rem;font-weight:700;color:var(--faint);
  align-self:flex-end;margin:0 0 6px 6px}
.buy__total{font-size:1.0625rem;color:var(--muted);margin:10px 0 14px}
.buy__total b{color:var(--ink);font-size:1.2rem}
.buy__total s{color:var(--faint);margin-left:6px}
.buy__perks{display:grid;gap:7px;text-align:left;margin:0 auto 18px;font-size:1rem;
  color:var(--ink-soft);width:100%}
/* Two WRAPPED lines of room, whether the line wraps or not. The four perks
   differ in length between packs -- "Free US shipping" against "Shipping added
   at checkout" -- so at some widths one card's list wraps and another's does
   not, and the Add To Cart buttons then sit at different offsets inside their
   own cards. This is the batch-5 defect, and it is fixed by making the wrap
   free rather than by hoping it will not happen.

   3.5em, measured, not guessed. A wrapped perk is 55px at this font size and
   2.95em is only 47px, so the first value locked one and four-fifths of a line
   and left a wrapped item sticking out of its own reservation. That is
   invisible once the webfont lands and visible for the length of the font-swap
   window, during which cards 1 and 2 wrapped their fourth perk in the fallback
   face and card 3 did not -- 8px of drift at 1024, on a fresh load only.
   56px covers two wrapped lines in any face this page can fall back to. */
.buy__perks li{position:relative;padding-left:26px;min-height:3.5em}
.buy__perks li::before{content:"\2713";position:absolute;left:0;top:1px;width:19px;
  height:19px;border-radius:50%;background:var(--accent-tint);color:var(--accent-deep);
  font-size:1.062rem;font-weight:700;display:flex;align-items:center;
  justify-content:center}
/* The Add To Cart button is NOT the last element in a card: payment art and
   a note follow it. margin-top:auto would absorb whatever space those
   trailing blocks left over, which differs per card, and the three buttons
   would land on three baselines. The body packs from the top instead, and
   min-height keeps a two-line label level with a one-line one. */
.buy__add{font-size:1.06rem;padding-block:15px;text-transform:uppercase;
  letter-spacing:.04em;margin-top:14px;min-height:73px;display:flex;
  align-items:center;justify-content:center}
.buy__cart{flex:none}
.buy__card--feature .buy__add{background:var(--night)}
.buy__card--feature .buy__add:hover{background:var(--accent-deep)}
.buy__pay{display:block;width:180px;height:auto;margin:12px auto 0;opacity:.9}
/* pack_cards.py tags these cards with `card--pack` and then applies ONE
   shared image height to EVERY <img> inside the card. Two images live in one
   of these cards, the pack shot and the payment-card strip, and only the
   first wants that treatment, so both are pinned here at a specificity its
   rule cannot reach: 0,2,1 against its 0,1,1. --pack-img is set to the same
   180px this sheet already uses, so the tool and this stylesheet agree on the
   box rather than fight over it. */
.buy__card{--pack-img:180px}
.buy__card img.buy__img{width:100%;max-width:230px;height:180px;
  object-fit:contain;margin:0 auto 10px}
.buy__card img.buy__pay{width:180px;height:auto;margin:12px auto 0}
.buy__why{font-size:.9375rem;color:var(--faint);text-align:left;margin-top:14px;
  padding-top:12px;border-top:1px dashed var(--line)}
.buy__foot{max-width:var(--measure-wide);margin:26px auto 0;text-align:center}
.guarantee{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr);
  gap:32px;align-items:center;background:var(--paper-card);
  border:1px solid var(--line);border-radius:var(--r-l);padding:32px}
.guarantee img{margin-inline:auto}
.guarantee h3{font-size:1.42rem;margin-bottom:12px}

/* ---- 16. BONUSES --------------------------------------------------------- */
.bonus{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.bonusrow{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:24px;text-align:left}
.bonusrow b{display:block;font-family:var(--display);font-weight:400;
  font-size:1.16rem;color:var(--ink);margin-bottom:6px}
.bonusrow span{display:inline-block;font-size:.9063rem;color:var(--gold-deep);
  background:var(--gold-soft);border:1px solid var(--gold-line);
  border-radius:var(--r-s);padding:2px 10px;font-weight:700}

/* ---- 17. REVIEWS --------------------------------------------------------- */
.tgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.tcard{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:24px}
.tcard .stars{color:var(--gold-deep);letter-spacing:1px;font-size:1rem}
.tcard b{display:block;margin-top:8px;font-family:var(--display);font-weight:400;
  font-size:1.1rem;color:var(--ink)}
.tcard span{font-size:.9063rem;color:var(--faint)}
.tcard p{font-size:1.0625rem;margin-top:10px}
.bars{display:grid;gap:9px;max-width:460px}
.bar{display:grid;grid-template-columns:62px minmax(0,1fr) 52px;gap:12px;
  align-items:center;font-size:.9063rem;color:var(--faint)}
.bar__t{height:10px;background:var(--paper-deep);border-radius:5px;overflow:hidden}
.bar__f{display:block;height:100%;background:var(--accent);border-radius:5px}
.dist{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;
  align-items:center;background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:28px}
.bigscore{font-family:var(--display);font-size:2.8rem;font-weight:400;
  color:var(--ink);line-height:1}
.bigscore small{font-size:1rem;color:var(--faint);font-weight:700}
.tlife{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.tlife figure{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden}
.tlife img{width:100%}
.tlife figcaption{padding:16px 18px;font-size:.9688rem;color:var(--muted)}
.tlife figcaption b{display:block;font-family:var(--display);font-weight:400;
  font-size:1.06rem;color:var(--ink);margin-bottom:5px}

/* ---- 18. FAQ ------------------------------------------------------------- */
.faq{display:grid;gap:10px;text-align:left}
.faq details{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden}
.faq details[open]{border-color:var(--accent-line)}
.faq summary{padding:18px 22px;font-family:var(--display);font-weight:400;
  color:var(--ink);cursor:pointer;font-size:1.1rem;list-style:none;
  display:flex;justify-content:space-between;gap:14px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:28px;height:28px;
  border-radius:var(--r-s);background:var(--accent-tint);color:var(--accent-deep);
  font-size:1.2rem;display:flex;align-items:center;justify-content:center}
.faq details[open] summary::after{content:"\2013";background:var(--accent);color:#fff}
.faq__b{padding:0 22px 18px;font-size:1.0625rem}
.faq__b p+p{margin-top:.8em}

/* ---- 19. REFS, BYLINE ---------------------------------------------------- */
.refs{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:24px 26px}
.refs h2{font-size:1.2rem;margin-bottom:12px}
.refs ol{counter-reset:r;display:grid;gap:9px}
.refs li{counter-increment:r;position:relative;padding-left:30px;font-size:1.062rem;
  color:var(--muted);line-height:1.6}
.refs li::before{content:counter(r) ".";position:absolute;left:0;font-weight:700;
  color:var(--accent-deep)}
.refs a{word-break:break-word}
.byline{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;
  background:var(--paper-card);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 26px;margin:26px auto 0}
.byline img{border-radius:var(--r);flex:none}
.byline svg{width:64px;height:64px;flex:none}
.byline b{font-family:var(--display);font-weight:400;font-size:1.12rem;
  color:var(--ink);display:block;margin-bottom:7px}
.byline p{font-size:.9688rem;color:var(--muted)}

/* ---- 20. FORMS ----------------------------------------------------------- */
.form{display:grid;gap:22px;grid-template-columns:repeat(2,minmax(0,1fr))}
.formcard{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:26px}
.formcard h3{font-size:1.18rem;margin-bottom:6px}
.formcard label{display:block;font-size:.9063rem;font-weight:700;
  color:var(--ink-soft);margin:14px 0 5px}
/* 16px minimum: anything smaller makes iOS Safari zoom on focus and never
   zoom back (pitfall 86). */
.formcard input,.formcard textarea,.formcard select{width:100%;padding:12px 14px;
  border:1px solid var(--line);border-radius:var(--r-s);font-family:var(--sans);
  font-size:1rem;color:var(--ink);background:var(--paper)}
.formcard textarea{min-height:120px;resize:vertical}
.formcard .btn{margin-top:18px}

/* ---- 21. FINAL CTA / RELATED --------------------------------------------- */
.final{background:linear-gradient(118deg,var(--night),var(--night-2));
  border-radius:var(--r-l);padding:40px 42px;color:var(--night-ink);
  position:relative;overflow:hidden}
/* The arch again, at the corner of the closing slab: the same construction
   as the mark and the hero niche, so the page ends on the shape it opened
   with. */
.final::after{content:"";position:absolute;right:-70px;top:-60px;width:250px;
  height:270px;border-radius:999px 999px 10px 10px;
  border:2px solid rgba(139,116,174,.36);border-bottom:0}
.final h2{color:#fff;font-size:clamp(1.55rem,2.9vw,2.1rem);margin-bottom:12px;
  font-weight:400}
.final--media{display:grid;grid-template-columns:290px minmax(0,1fr);gap:34px;
  align-items:center}
.final--media .final__img img{width:100%;height:auto;margin-inline:auto;
  filter:drop-shadow(0 20px 26px rgba(0,0,0,.36))}
.final__price{font-family:var(--display);font-size:1.3rem;font-weight:400;
  color:#fff;margin:14px 0 18px}
.final .btn--cta{background:var(--gold-soft);color:var(--night)}
.final .btn--cta:hover{background:#fff;color:var(--night)}
.final p,.article .final p{color:var(--night-ink)}
.final__price,.article .final .final__price{color:#fff}
.final a:not(.btn){color:#fff;text-decoration:underline}
.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;
  text-align:left}
.rel a{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:22px;display:block;
  transition:transform .2s ease,border-color .2s ease}
.rel a:hover{transform:translateY(-3px);border-color:var(--accent-line);
  text-decoration:none}
.rel b{display:block;font-family:var(--display);font-weight:400;font-size:1.1rem;
  color:var(--ink);margin-bottom:6px}
.rel span{font-size:.9688rem;color:var(--muted)}

/* ---- 22. LEGAL ----------------------------------------------------------- */
.legal h2{margin-top:1.5em}
.legal h3{margin-top:1.2em}
.meta{font-size:.9063rem;color:var(--faint)}

/* ---- 23. FOOTER: one slab, the returns address first ---------------------
   The design slot for this site. The footer is a single aubergine slab and
   its FIRST column is the returns address, because on a site whose whole
   promise is "send the bottles back, even empty ones", the address those
   bottles go to is the most useful thing in the footer and it should not be
   the fourth column of four. The remaining three columns are the pages.

   The seal row sits inside the same slab rather than in a band of its own,
   so the footer reads as one object. */
.site-foot{background:var(--night);color:var(--night-ink);font-size:.9688rem}
.site-foot a{color:#fff}
.site-foot a:hover{color:var(--gold-line)}
.fslab__grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));
  gap:34px;padding-block:46px 30px}
.freturn{border-left:6px solid var(--accent);padding-left:20px}
.fbrand{font-family:var(--display);font-size:1.62rem;font-weight:400;
  color:#fff;margin-bottom:10px}
.fbrand span{color:var(--lilac)}
.freturn h4,.fcol h4{color:var(--gold-line);font-family:var(--sans);font-size:.8438rem;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:12px;font-weight:700}
.freturn address{font-style:normal;line-height:1.7;color:#fff;margin-bottom:10px}
.freturn p{margin-bottom:.8em;color:var(--night-ink)}
.fcol li{margin-bottom:7px;font-size:1.062rem;line-height:1.5}
.fseal{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding-block:20px;
  border-top:1px solid var(--night-2)}
.fseal img{background:#fff;border-radius:50%;padding:3px}
.fseal span{font-size:.9063rem;color:var(--night-ink);max-width:420px}
.fnap{border-top:1px solid var(--night-2)}
.fnap__in{padding-block:24px;font-size:.9688rem;line-height:1.75}
.fnap strong{color:#fff}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding-block:16px;
  font-size:.9063rem;border-top:1px solid var(--night-2)}
.fpay img{background:#fff;border-radius:4px;padding:4px 6px}
.fmini{display:flex;flex-wrap:wrap;gap:8px 20px;padding-block:16px;
  border-top:1px solid var(--night-2);font-size:.9063rem}
.disc{padding-block:18px 32px;font-size:.9063rem;line-height:1.68;
  color:var(--night-ink);border-top:1px solid var(--night-2)}
.disc p{margin-bottom:.9em}
.disc b{color:#fff}
.disc .copy{margin-top:16px}

/* ---- 24. BUY BAR --------------------------------------------------------- */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:950;background:var(--night);
  color:#fff;transform:translateY(110%);transition:transform .3s ease;
  border-top:3px solid var(--accent)}
.buybar.show{transform:translateY(0)}
.buybar__in{max-width:var(--wrap);margin-inline:auto;padding:11px 24px;display:flex;
  align-items:center;gap:18px;justify-content:space-between;flex-wrap:wrap;
  font-size:.9375rem}
.buybar__t b{color:#fff}
.buybar .from{color:var(--lilac)}
.buybar .btn{padding:10px 22px}

/* ---- 25. BLOG ------------------------------------------------------------ */
.article{max-width:780px;margin-inline:auto}
.article h1{font-size:clamp(1.9rem,3.4vw,2.6rem);margin-bottom:14px;font-weight:400}
.article h2{font-size:1.54rem;margin:1.9em 0 .6em;scroll-margin-top:114px;
  font-weight:400}
.article h3{font-size:1.2rem;margin:1.5em 0 .5em;font-weight:400}
.article p{margin-bottom:1em}
.article ul,.article ol{margin:0 0 1.2em}
.article ul li{position:relative;padding-left:22px;margin-bottom:8px}
.article ul li::before{content:"";position:absolute;left:3px;top:.72em;width:8px;
  height:8px;border-radius:50%;background:var(--lilac)}
.article ol{counter-reset:ai}
.article ol li{position:relative;padding-left:30px;margin-bottom:8px;
  counter-increment:ai}
.article ol li::before{content:counter(ai) ".";position:absolute;left:0;
  color:var(--accent-deep);font-weight:700}
.article figure{margin:1.6em 0}
.article figure img{width:100%;border-radius:var(--r)}
.article figure.portrait img{width:100%;max-width:var(--figw,440px);
  margin-inline:auto}
.article figcaption{font-size:.9375rem;color:var(--faint);margin-top:9px;
  border-left:3px solid var(--lilac);padding-inline-start:12px}
.postmeta{display:flex;flex-wrap:wrap;gap:8px 12px;font-size:.9063rem;
  color:var(--faint);padding-block:12px;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);margin-bottom:26px}
.postmeta b{color:var(--ink-soft)}
.postmeta .sep{color:var(--line)}
.toc{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:20px 24px;margin-bottom:26px}
.toc h2{font-size:.8438rem;letter-spacing:.17em;text-transform:uppercase;
  font-family:var(--sans);color:var(--gold-deep);margin:0 0 10px;font-weight:700}
.toc ol{counter-reset:t;display:grid;gap:6px}
.toc li{counter-increment:t;position:relative;padding-left:28px;font-size:1.062rem}
.toc li::before{content:counter(t) ".";position:absolute;left:0;color:var(--faint);
  font-weight:700}
.keypoints{background:var(--accent-tint);border-left:5px solid var(--accent);
  border-radius:0 var(--r) var(--r) 0;padding:20px 24px;margin-bottom:24px}
.keypoints>b{display:block;font-family:var(--sans);font-size:.8438rem;
  letter-spacing:.17em;text-transform:uppercase;color:var(--accent-deep);
  margin-bottom:10px}
.keypoints li b{color:var(--accent-deep)}
.keypoints li{margin-bottom:6px}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.posts article{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;transition:transform .2s ease,border-color .2s ease}
.posts article:hover{transform:translateY(-3px);border-color:var(--accent-line)}
.posts img{width:100%}
.posts .pbody{padding:20px 22px}
.posts h3{font-size:1.16rem;margin-bottom:8px}
.posts p{font-size:1.062rem;color:var(--muted)}
.posts .pmeta{font-size:.9062rem;color:var(--faint);margin-top:12px;
  letter-spacing:.05em;text-transform:uppercase;font-weight:700}
/* A shared component in a narrower column is a new component (pitfall 24). */
.article .final--media{grid-template-columns:168px minmax(0,1fr);gap:24px;
  padding:30px 28px}
.article .final--media .final__img img{max-width:168px}
.article .final--media h2{font-size:1.6rem;line-height:1.24;margin-top:0}
@media(max-width:760px){
  .article .final--media{grid-template-columns:1fr;gap:16px;padding:24px 22px;
    text-align:center}
  .article .final--media .final__img img{max-width:128px;margin-inline:auto}
  .article .final--media h2{font-size:1.32rem}
  .article .final--media .btn{width:100%}
}
.article .refs{margin-top:2em}
.article .refs h2{margin-top:0}

/* ---- 26. MOTION: rise on entry ------------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(18px) scale(.988)}
[data-reveal].in{opacity:1;transform:none;
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
@media(prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal].in{opacity:1;transform:none;transition:none}
  .btn:hover,.card:hover,.rel a:hover,.posts article:hover{transform:none}
  html{scroll-behavior:auto}
}

/* ---- 27. RESPONSIVE ------------------------------------------------------ */
@media(max-width:1080px){
  .sec>.wrap>p,.sec>.wrap>h2,.sec>.wrap>h3,.sec>.wrap>h4,
  .sec>.wrap>ul,.sec>.wrap>ol,.sec>.wrap>.sec__head,.sec>.wrap>.callout,
  .sec>.wrap>.alert,.sec>.wrap>.byline,.sec>.wrap>.refs,.sec>.wrap>.answer,
  .sec>.wrap>.pullquote,.sec>.wrap>blockquote,.sec>.wrap>h1,.sec>.wrap>.eyebrow,
  .sec>.wrap>.tablewrap,.sec>.wrap>.faq,.sec>.wrap>.steps{max-width:none}
  .badgewall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fslab__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:920px){
  .split,.split--rev,.guarantee,.dist,.form{grid-template-columns:1fr;gap:26px}
  .promo{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3,.g4,.whygrid,.tgrid,.rel,.posts,.bonus,.tlife{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ingthumbs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .buy{grid-template-columns:1fr;max-width:440px;margin-inline:auto;gap:18px}
  .buy .buy__card:nth-child(1){order:3}
  .buy .buy__card:nth-child(2){order:1}
  .buy .buy__card:nth-child(3){order:2}
  .buy__card--feature{margin-top:0}
  .final--media{grid-template-columns:1fr;gap:22px}
  .final--media .final__img img{max-width:240px}
}
@media(max-width:700px){
  .sec{padding-block:48px}
  .g2,.g3,.g4,.whygrid,.whofor,.tgrid,.rel,.posts,.shots,.shots--wide,
  .badgewall,.fslab__grid,.bonus,.tlife{grid-template-columns:1fr}
  .ingthumbs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qa dl{grid-template-columns:1fr}
  .qa dt{padding-bottom:0;border-bottom:0}
  .qa dd{padding-top:4px}
  .stats{grid-template-columns:1fr}
  .final{padding:28px 22px}
  .final::after{display:none}
  .step{padding:22px 20px 22px 70px}
  .step__n{left:16px}
  .promo{padding:26px 22px}
  .freturn{border-left:0;border-top:5px solid var(--accent);padding-left:0;
    padding-top:18px}
}
/* Tap target: a button on a phone must be reachable with a thumb. */
@media(max-width:600px){.btn{min-height:44px}}


/* ---- 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-99px 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, which is what the old house rule did.

   Requires .hero NOT to clip on the block axis -- any non-visible overflow on
   an ancestor becomes the scrollport sticky resolves against. See pitfall 65,
   whose first fix got this wrong. */
@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 different
   shapes (one site shipped 200x243, 200x105 and 200x65 side by side) and the
   blurbs are different lengths, so without these three rules the images
   render at three sizes and the three CTAs sit at three heights.

   The height lives here and not on the <img> attributes on purpose: those
   must keep stating each file's true ratio, or fix_img_dims.py rewrites them
   and CLS gets worse. Override per site with --pack-img. */
.card--pack{display:flex;flex-direction:column}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,168px);
  object-fit:contain;margin-inline:auto;margin-bottom:14px}
.card--pack>.btn{margin-top:auto}

/* The footer column link is the thing you tap, and it was 17px tall in
   35px of row pitch -- under the 24px WCAG AA floor. The padding grows the
   hit area to ~33px and the negative margin gives the space straight back,
   so the footer renders identically. inline-block (not block) keeps the
   hover underline the width of the words. See fix_footer_tap.py. */
footer li a{display:inline-block;padding-block:4px;margin-block:-4px}

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

/* ==== 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 .disc{font-size:16px}
footer .fcol h4{font-size:15px}
footer .fmini{font-size:16px}
footer .fnap__in{font-size:16px}
footer .fpay{font-size:16px}
footer .freturn h4{font-size:15px}
footer .fseal span{font-size:16px}
footer .site-foot{font-size:16px}
/* ==== end footer type floor ==== */