/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"IBM Plex Sans Fallback";src:local("Arial");font-weight:400;size-adjust:101.57%;ascent-override:100.92%;descent-override:27.08%;line-gap-override:0.00%}
@font-face{font-family:"IBM Plex Sans Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:98.50%;ascent-override:104.06%;descent-override:27.92%;line-gap-override:0.00%}
@font-face{font-family:"Manrope Fallback";src:local("Arial");font-weight:400;size-adjust:104.27%;ascent-override:102.23%;descent-override:28.77%;line-gap-override:0.00%}
@font-face{font-family:"Manrope Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:101.42%;ascent-override:105.11%;descent-override:29.58%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* ==========================================================================
   MEMOCEPT — memoecept.com
   Component system adapted from the Memodyne reference: 18px body, generous
   section rhythm, large corner radii, long soft shadows, tight display
   letter-spacing at weight 800.
   Fonts deliberately differ from the reference (Manrope + Inter — Inter is
   already used twice in this family) — Manrope + IBM Plex Sans keeps the
   geometric-display / neutral-body register without repeating the stack.
   Palette from the bottle: white body, violet wordmark, deep indigo band.
   Violet leads, indigo grounds the dark bands, ground is white with a lilac tint.
   ========================================================================== */

:root{
  /* white bottle, lilac tint — clean and clinical */
  --paper:#ffffff; --tint:#f6f4fb; --card:#ffffff;
  --ink:#1b1730; --ink-dk:#100d1f; --muted:#5f5878; --faint:#736d84;
  --line:#e6e1f0; --line-soft:#f0ecf7;

  /* violet wordmark — the lead */
  --violet:#6b3fa0; --violet-dk:#54307e; --violet-lt:#f2ecfa; --violet-line:#ddd0f0;

  /* deep indigo label band — dark sections and depth */
  --indigo:#3b2566; --indigo-dk:#241541; --indigo-lt:#ebe6f6;

  /* long, soft shadows in the reference's manner */
  --sh-1:0 2px 8px -3px rgba(27,23,48,.10);
  --sh-2:0 14px 34px -18px rgba(27,23,48,.26);
  --sh-3:0 26px 60px -28px rgba(27,23,48,.36);
  --sh-violet:0 14px 34px -14px rgba(107,63,160,.48);
  --ease:cubic-bezier(.2,.8,.2,1);

  /* generous radii — the reference's most recognisable trait */
  --r-s:10px; --r:20px; --r-l:30px;

  --display:'Manrope','Manrope Fallback',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --sans:'IBM Plex Sans','IBM Plex Sans Fallback',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --wrap:1180px; --prose:68ch;
}

*{box-sizing:border-box;min-width:0}
html{scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:120px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:18px;line-height:1.76;overflow-x:clip;max-width:100%;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video,iframe,table,figure{max-width:100%}
img{height:auto;display:block}
a{color:var(--violet-dk);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:4px}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:1.14;
  letter-spacing:-.032em;margin:0 0 .5em;color:var(--ink);overflow-wrap:break-word}
h1{font-size:clamp(2.15rem,5.1vw,3.5rem);letter-spacing:-.038em}
h2{font-size:clamp(1.65rem,3.5vw,2.5rem);letter-spacing:-.034em}
h3{font-size:1.35rem}
h4{font-size:1.06rem}
p{margin:0 0 1.2em}
table{border-collapse:collapse}
section[id]{scroll-margin-top:120px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.prose,.article,.legal{max-width:var(--prose);margin-inline:auto}
.center{text-align:center}
.skip{position:absolute;left:-999px;top:0;background:#fff;color:var(--violet);
  padding:10px 16px;border-radius:var(--r-s);z-index:2000}
.skip:focus{left:12px;top:12px}

.sec,.section{padding:96px 0}
.sec--tint,.section--tint{background:var(--tint)}
.sec--dark,.section--dark{background:var(--indigo);color:#d6cee9}
.sec--dark h2,.sec--dark h3,.sec--dark h4{color:#fff}
.sec--dark b,.sec--dark strong{color:#fff}
.section__head{max-width:var(--prose);margin-bottom:44px}
.section--center .section__head{margin-inline:auto;text-align:center}

.eyebrow{display:inline-block;font-family:var(--display);font-size:0.8438rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--violet);margin-bottom:.9em}
.sec--dark .eyebrow{color:#bda9e0}
.lead{font-size:1.16rem;color:var(--muted)}
.sec--dark .lead{color:#b7aad2}
.note{font-size:0.9062rem;color:var(--faint)}
.meta{font-size:0.9062rem;color:var(--faint);margin:-.3em 0 1.6em}

/* ---- buttons: fully rounded pills, the reference's signature ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--display);font-weight:700;font-size:1rem;padding:16px 32px;
  border:none;border-radius:999px;cursor:pointer;min-height:52px;text-align:center;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .22s var(--ease);
  background:var(--violet);color:#fff;box-shadow:var(--sh-violet);text-decoration:none}
.btn:hover{background:var(--violet-dk);color:#fff;transform:translateY(-2px);
  box-shadow:0 18px 40px -14px rgba(107,63,160,.6);text-decoration:none}
.btn--cta{background:var(--violet)}
.btn--ink{background:var(--indigo);box-shadow:var(--sh-2)}
.btn--ink:hover{background:var(--indigo-dk);box-shadow:var(--sh-3)}
.btn--ghost{background:transparent;border:1.5px solid var(--violet-line);color:var(--violet-dk);
  box-shadow:none;font-size:.96rem;padding:14px 28px}
.btn--ghost:hover{background:var(--violet-lt);border-color:var(--violet);color:var(--violet-dk);
  box-shadow:none}
.btn--lg{font-size:1.1rem;padding:19px 40px;min-height:58px}
.btn--block{display:flex;width:100%}
.btn--sm{padding:11px 22px;font-size:.92rem;min-height:44px}

/* ==========================================================================
   HEADER — logo left, menu right, ghost CTA. Compacts on scroll.
   No other site in this family uses a menu-right row or a compacting header.
   ========================================================================== */
.util{background:var(--indigo);color:#bdb2d8;font-size:0.9062rem}
.util__row{display:flex;align-items:center;justify-content:space-between;gap:8px 26px;
  padding:9px 24px;flex-wrap:wrap}
.util__facts{display:flex;gap:8px 22px;flex-wrap:wrap}
.util__item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.util__item b{color:#fff}
.util__item::before{content:"";width:5px;height:5px;border-radius:50%;background:#a98fe0;flex:none}
.util__tel{color:#fff;font-weight:600;white-space:nowrap}
@media(max-width:820px){.util__row{justify-content:center;font-size:0.9062rem;gap:5px 16px}
  .util__facts{justify-content:center}
  .util__item:nth-child(3){display:none}}

header.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav__row{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-block:18px;flex-wrap:nowrap;transition:padding .25s var(--ease)}
.nav--compact .nav__row{padding-block:9px}
.nav--compact .brand{font-size:1.32rem}
.nav--compact .brand svg{width:30px;height:30px}

/* the wordmark is two text nodes: gap 0, spacing on the mark */
.brand{display:inline-flex;align-items:center;gap:0;font-family:var(--display);
  font-weight:800;font-size:1.58rem;color:var(--ink);letter-spacing:-.035em;
  white-space:nowrap;flex:none;transition:font-size .25s var(--ease)}
.brand:hover{text-decoration:none}
.brand span{color:var(--violet)}
.brand svg{width:36px;height:36px;flex:none;margin-right:11px;transition:width .25s var(--ease),height .25s var(--ease)}

.nav__right{display:flex;align-items:center;gap:26px;flex-wrap:nowrap;min-width:0}
.menu{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0;flex-wrap:nowrap}
.menu a{display:inline-block;padding:6px 0;font-size:.95rem;font-weight:600;
  color:var(--muted);white-space:nowrap;border-bottom:2px solid transparent}
.menu a:hover,.menu a[aria-current="page"]{color:var(--violet-dk);text-decoration:none;
  border-bottom-color:var(--violet)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:6px;
  min-width:44px;min-height:44px}
.burger span{display:block;width:25px;height:2.5px;background:var(--ink);border-radius:3px;margin:5px 0}

@media(max-width:1300px){.menu{gap:20px}.menu a{font-size:.91rem}.nav__right{gap:20px}}
@media(max-width:1180px){.menu{gap:15px}.menu a{font-size:.88rem}}
@media(max-width:1080px){
  .menu{position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;
    align-items:stretch;gap:0;background:var(--card);border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);padding:4px 24px 10px;max-height:74vh;overflow:auto;
    box-shadow:var(--sh-2)}
  .menu.open{display:flex}
  .menu li{border-bottom:1px solid var(--line-soft)}
  .menu a{display:block;padding:14px 2px;min-height:44px;border-bottom:0}
  .burger{display:block}
  header.nav{position:sticky}
  .nav__row{position:relative}
}
@media(max-width:560px){.brand{font-size:1.3rem}.brand svg{width:30px;height:30px}}
@media(max-width:420px){.nav__right > .btn{display:none}}

/* ---- sticky buy bar ---- */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--indigo);color:#fff;
  transform:translateY(105%);transition:transform .3s var(--ease);box-shadow:0 -10px 30px rgba(0,0,0,.26)}
.buybar.show{transform:translateY(0)}
.buybar__in{display:flex;align-items:center;justify-content:space-between;gap:14px;
  max-width:var(--wrap);margin-inline:auto;padding:11px 24px}
.buybar__t{font-size:.95rem;line-height:1.3}
.buybar__t b{display:block;font-family:var(--display);font-size:1.06rem;font-weight:800}
.buybar__t .from{color:#c3aef0;font-weight:700}
@media(max-width:560px){.buybar__t{font-size:0.9062rem}.buybar__t b{font-size:.92rem}}

/* ---- hero ---- */
.hero{padding:64px 0 76px;background:
  radial-gradient(120% 90% at 88% 0%,var(--violet-lt) 0%,transparent 58%),
  linear-gradient(180deg,#fff 0%,var(--tint) 100%)}
.hero__grid{display:grid;grid-template-columns:1.03fr .97fr;gap:56px;align-items:start}
.pill{display:inline-flex;align-items:center;gap:9px;background:var(--card);
  border:1px solid var(--violet-line);border-radius:999px;padding:9px 20px;
  font-size:0.8438rem;font-weight:700;color:var(--violet-dk);box-shadow:var(--sh-1)}
.hero h1{margin-top:.35em}
.hero h1 em{font-style:normal;color:var(--violet)}
.hero__sub{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px 18px;
  font-size:0.9688rem;font-weight:600;color:var(--muted)}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:24px}
.ticks{list-style:none;padding:0;margin:22px 0 24px;display:grid;gap:12px}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-size:1.062rem}
.ticks .ck{flex:0 0 24px;height:24px;border-radius:50%;background:var(--violet-lt);
  color:var(--violet);display:grid;place-items:center;font-size:.74rem;font-weight:700;margin-top:2px}

.hero__media{position:relative;text-align:center}
.hero__stick{position:relative;width:100%;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-l);padding:32px 28px;box-shadow:var(--sh-3)}
.hero__stick img{margin:0 auto;max-width:74%}
/* sticks at every desktop height; the shot scales rather than the effect dying */
@media(min-width:1081px){
  .hero__media{position:sticky;top:120px;align-self:start;
    height:calc(100vh - 132px);min-height:340px;
    display:flex;align-items:center;justify-content:center}
  .hero__stick{max-height:calc(100vh - 152px);display:flex;flex-direction:column;justify-content:center}
  .hero__stick img{max-height:calc(100vh - 310px);min-height:160px;width:auto;object-fit:contain}
}
.floaty{position:absolute;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-s);padding:11px 15px;box-shadow:var(--sh-2);
  font-family:var(--display);font-weight:800;font-size:0.9062rem;line-height:1.2;color:var(--ink);z-index:2}
.floaty small{display:block;color:var(--violet);font-size:0.9062rem;letter-spacing:.06em;
  font-weight:700;font-family:var(--sans);text-transform:uppercase}
.floaty--tl{top:16px;left:-12px}
.floaty--br{bottom:20px;right:-12px}
@media(max-width:560px){.floaty{display:none}}

.factpills{display:flex;flex-wrap:wrap;gap:9px;list-style:none;margin:0 0 22px;padding:0}
.factpills li{background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:8px 16px;font-size:0.9062rem;font-weight:600;color:var(--muted);box-shadow:var(--sh-1)}
.factpills li b{color:var(--violet)}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 24px}
.figures div{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 10px;text-align:center;box-shadow:var(--sh-1)}
.figures b{display:block;font-family:var(--display);font-weight:800;font-size:1.6rem;
  color:var(--ink);line-height:1.05}
.figures span{font-size:0.9062rem;font-weight:700;color:var(--faint);text-transform:uppercase;letter-spacing:.06em}

/* ---- quick answer + glance table ---- */
.answer{background:var(--violet-lt);border:1px solid var(--violet-line);
  border-radius:var(--r);padding:26px 30px;margin:0 0 24px}
.answer .tag{display:block;font-family:var(--display);font-size:0.8438rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--violet);margin-bottom:.85em}
.answer p{margin:0 0 .85em;color:var(--muted)}
.answer p:last-child{margin:0}
.answer p.first{color:var(--ink);font-weight:600;font-size:1.08rem}
/* In the hero the answer is not a card: the approved layout runs it as two
   flowing paragraphs under the H1. The wrapper stays -- it is the speakable
   selector and the AEO block -- but the card styling and the label come off.
   These rules sit above CRITICAL-END, so the inlined copy in every page head
   carries them too (pitfall 47). */
.hero .answer{background:none;border:0;box-shadow:none;padding:0;margin:18px 0 0}
.hero .answer .tag{display:none}
.hero .answer p{font-size:1.062rem;color:var(--muted);margin:0 0 .85em;max-width:56ch}
.hero .answer p:last-child{margin-bottom:0}
.hero .answer p b{color:var(--ink-dk)}
.hero__rating{display:flex;align-items:center;gap:9px;margin:16px 0 0;
  font-size:.95rem;color:var(--muted)}
.hero__rating b{color:var(--ink-dk)}
.hero__rating .stars{color:var(--violet);letter-spacing:2px}
/* the pre-rebuild hero ticks are kept in the DOM, and hidden, so the links
   they carry are not removed from the page. */
.ticks--gone{display:none}


/* ---- hero motif -- quiet-orbit ---------------------------------------- */
.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(100% 78% at 68% 10%,#e4dcee,#ffffff 62%,#ffffff)}.hero__media::before{content:'';position:absolute;left:50%;top:0;width:150%;aspect-ratio:1;translate:-50% -24%;border-radius:50%;border:1px solid rgba(107,63,160,0.30);z-index:1}.hero__media::after{content:'';position:absolute;left:50%;top:0;width:150%;aspect-ratio:1;translate:-50% -24%;animation:btOrbitDot 26s linear infinite;z-index:1}.hero__media::after{background:radial-gradient(circle at 50% 0,rgba(107,63,160,0.80) 0 5px,transparent 6px)}@keyframes btOrbitDot{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.hero__card,.hero__media::before,.hero__media::after{animation:none!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 (max-width:1080px){
  .hero__grid{display:flex;flex-direction:column;gap:32px}
  .hero__media{max-width:400px;margin-inline:auto;width:100%; position:static;height:auto;display:block;order:3;margin:4px 0 18px}
  /* mobile hero order: eyebrow, H1, product shot, Quick Answer, CTA, rest. display:contents promotes the copy column's children to hero-grid items, so the shot can be placed between the H1 and the answer. */ /* the copy column on these builds is a bare unclassed <div>, so it has to be promoted too -- otherwise only .hero__media is a grid item and the order values on the eyebrow, H1 and answer do nothing at all. */ .hero__copy,.hero__grid > div:not([class]){display:contents}
  .hero .pill{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:4px 0 18px}
  .hero .answer{order:4}
  /* The ticks follow the Quick Answer, per the hero build order in references/hero.md: eyebrow, H1, Quick Answer, ticks, seal row, CTA. */ .hero .ticks{order:5}
  .hero .hero__cta{order:6}
  /* the rating sits with the CTA. Without an explicit order display:contents would leave it at 0 and it would jump above the eyebrow. */ .hero .hero__rating{order:6}
  .hero .hero__sub{order:7}
  .hero .pay{order:8}
  /* Promoting the copy column exposed these as grid items too. Without an order they default to 0 and jump above the eyebrow, so they are pinned below the CTA where they sat before. */ .hero .factpills{order:9}
  .hero .chips{order:10}
  .hero .figures{order:11}
}
@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;}
}

/*!SITE-HOME-CRIT-START*/
/* ---- home page: hero reading order + the two boxes it moves -------------
   HOME ONLY. class="hero" is on index.html and on no other page in this
   site (checked), so body:has(.hero) cannot reach one.
   The buy button measured y=1030 on a 900px screen -- 130px under the fold,
   so the money page's first screen had nothing to click. Desktop reading
   order is now eyebrow, headline, Quick Answer, BUTTONS, payment line, then
   the evidence blocks. The phone order is composed separately with
   display:contents under max-width:1080 and is deliberately untouched.
   This moves boxes, so it sits above the critical marker and the site is
   rebuilt rather than restamped. */
@media(min-width:1081px){
  body:has(.hero) .hero{padding:46px 0 72px}
  body:has(.hero) .hero__grid{grid-template-columns:1.12fr .88fr;gap:48px}
  body:has(.hero) .hero__grid>div:not([class]){display:flex;flex-direction:column;align-items:flex-start}
  body:has(.hero) .hero__grid>div:not([class])>*{width:100%}
  /* the >* width:100% rule above outranks a plain .hero .pill, which left the
     eyebrow stretched the full column -- this has to match it selector for
     selector to win. */
  body:has(.hero) .hero__grid>div:not([class])>.pill{width:auto;order:1}
  body:has(.hero) .hero h1{order:2;font-size:clamp(2.3rem,3.35vw,3rem);margin:.3em 0 .34em}
  body:has(.hero) .hero .answer{order:3;margin:0}
  body:has(.hero) .hero .hero__cta{order:4;margin:22px 0 0}
  body:has(.hero) .hero .hero__sub{order:5;margin:14px 0 0}
  body:has(.hero) .hero .ticks{order:6;margin:28px 0 20px}
  body:has(.hero) .hero .factpills{order:7;margin:0 0 18px}
  body:has(.hero) .hero .figures{order:8;margin:0}
}
/* the recommended-tier ribbon becomes a full-width bar inside the card's top
   edge, so it has to clear the <h3> that starts 34px down. */
body:has(.hero) .tier__flag{padding:6px 16px;line-height:1.16}
/* The orbit ring and its dot are defined above this point and are inlined
   with it. They are replaced below the marker by this site's own motif, so
   they are switched off here too -- otherwise the first paint shows the ring
   and the async stylesheet then swaps it. */
body:has(.hero) .hero__media::before,body:has(.hero) .hero__media::after{content:none}
body:has(.hero) .hero{background:radial-gradient(118% 84% at 86% -8%,#efe7fb 0%,rgba(239,231,251,0) 58%),linear-gradient(180deg,#fff 0%,#f7f5fc 100%)}
/*!SITE-HOME-CRIT-END*/

/*!CRITICAL-END*/
.qa{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);
  box-shadow:var(--sh-2);overflow:hidden;max-width:920px;margin:0 auto}
.qa__head{background:var(--indigo);color:#fff;padding:26px 30px}
.qa__head b{font-family:var(--display);font-weight:800;font-size:1.42rem;color:#fff;display:block}
.qa__head p{margin:.5em 0 0;font-size:1.062rem;color:#bdb2d8}
.qa dl{margin:0;display:grid;grid-template-columns:minmax(150px,33%) 1fr}
.qa dl>div{display:contents}
.qa dt,.qa dd{margin:0;padding:15px 30px;border-top:1px solid var(--line-soft);font-size:1.062rem}
.qa dt{font-weight:700;color:var(--ink)}
.qa dd{color:var(--muted)}
@media(max-width:640px){
  .qa dl{grid-template-columns:1fr}
  .qa dt{padding-bottom:2px}
  .qa dd{padding-top:2px;border-top:0}
  .qa dt,.qa dd{padding-inline:22px}
}

/* ---- trust / badges / stats ---- */
.trust{border-bottom:1px solid var(--line);background:var(--card)}
.trust__row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 34px;padding:22px 24px}
.trust__item{display:flex;align-items:center;gap:10px;font-size:.91rem;font-weight:600;color:var(--muted)}
.trust__item img{width:38px;height:38px;object-fit:contain}
.badgewall{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;max-width:940px;margin-inline:auto}
.badgewall figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.badgewall img{width:88px;height:88px;object-fit:contain}
.badgewall figcaption{font-size:0.8438rem;color:var(--muted);font-weight:600;line-height:1.35}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:28px 18px;text-align:center;box-shadow:var(--sh-1)}
.stat b{display:block;font-family:var(--display);font-weight:800;font-size:2.4rem;
  color:var(--violet);line-height:1}
.stat span{font-size:.91rem;color:var(--muted)}
.sec--dark .stat{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.15)}
.sec--dark .stat b{color:#c3aef0}
.sec--dark .stat span{color:#b7aad2}

/* ---- grids + cards ---- */
.grid{display:grid;gap:24px}
.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(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:30px 28px;box-shadow:var(--sh-1);
  transition:transform .24s var(--ease),box-shadow .24s var(--ease),border-color .24s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--violet-line)}
.card .ic{width:54px;height:54px;border-radius:16px;background:var(--violet-lt);
  display:grid;place-items:center;margin-bottom:16px;overflow:hidden}
.card .ic img{height:34px;width:34px;object-fit:contain}
.card h3{margin-bottom:.4em}
.card p{margin:0;color:var(--muted);font-size:1.062rem}
.card p+p{margin-top:.8em}
.sec--dark .card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.15)}
.sec--dark .card p{color:#b7aad2}
.idx{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:12px;
  background:var(--violet);color:#fff;font-family:var(--display);font-weight:800;
  font-size:1rem;margin-bottom:14px}

/* ---- split / steps ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split img{border-radius:var(--r-l);border:1px solid var(--line);box-shadow:var(--sh-2)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.usesteps{list-style:none;margin:1.2em 0 0;padding:0;counter-reset:u;display:grid;gap:20px}
.usesteps li{position:relative;padding-left:3.4em;min-height:2.4em}
.usesteps li::before{counter-increment:u;content:counter(u);position:absolute;left:0;top:-.1em;
  width:2.4em;height:2.4em;border-radius:50%;background:var(--violet);color:#fff;
  font-family:var(--display);font-weight:800;display:grid;place-items:center;font-size:1.062rem}
.usesteps b{display:block;font-family:var(--display);font-weight:800;font-size:1.1rem;color:var(--ink)}
.usesteps p{margin:.15em 0 0;color:var(--muted);font-size:1.062rem}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:38px}
.gallery figure{margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  aspect-ratio:1/1;background:var(--tint)}
.gallery img{width:100%;height:100%;object-fit:cover}

/* ---- ingredients ---- */
.ingthumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;max-width:880px;margin:0 auto 8px}
.ingthumb{text-align:center}
.ingthumb img{width:116px;height:116px;border-radius:50%;object-fit:cover;margin:0 auto .7em;
  border:3px solid var(--violet-line);background:#fff}
.ingthumb b{font-family:var(--display);font-weight:800;font-size:1rem;display:block;
  color:var(--ink);line-height:1.2}
.ingthumb span{font-size:0.9062rem;color:var(--faint);display:block}
.inglist{max-width:var(--prose);margin-inline:auto}
.ing{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:28px 30px;margin-bottom:18px;box-shadow:var(--sh-1)}
.ing__top{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.ing h3{margin:0}
.ing__dose{font-family:var(--display);font-size:0.8438rem;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--violet-dk);background:var(--violet-lt);
  padding:7px 14px;border-radius:999px;white-space:nowrap}
.ing p{margin:.6em 0 0;color:var(--muted)}
.ing__cite{font-size:.86rem}
.facts{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:start}
.facts__img{border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;
  background:#fff;box-shadow:var(--sh-2)}
.facttab{width:100%;font-size:.95rem}
.facttab th,.facttab td{text-align:left;padding:.66em .3em;border-bottom:1px solid var(--line)}
.facttab thead th{font-family:var(--display);font-size:0.9062rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--faint);font-weight:800}
.facttab td:last-child,.facttab th:last-child{text-align:right;white-space:nowrap;color:var(--muted)}
.facttab .blend td{font-weight:700;color:var(--ink)}

/* ---- benefits ---- */
.benefits{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;
  gap:2px 40px;max-width:920px;margin-inline:auto}
.benefits li{display:flex;gap:.8em;padding:17px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.benefits .ck{color:var(--violet);font-weight:700;flex:none}
.forlist{list-style:none;margin:1.1em 0 0;padding:0;display:grid;gap:.75em}
.forlist li{position:relative;padding-left:1.9em;color:var(--ink)}
.forlist .ck{position:absolute;left:0;color:var(--violet);font-weight:700}

/* ---- pricing ---- */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:center}
.tier{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);
  padding:34px 26px;text-align:center;position:relative;display:flex;flex-direction:column;
  box-shadow:var(--sh-1);transition:transform .24s var(--ease),box-shadow .24s var(--ease)}
.tier:hover{transform:translateY(-6px);box-shadow:var(--sh-3)}
.tier--feature{border:2px solid var(--violet);box-shadow:var(--sh-3);transform:scale(1.04);z-index:2}
.tier--feature:hover{transform:scale(1.04) translateY(-6px)}
.tier__flag{position:absolute;top:-15px;left:50%;transform:translateX(-50%);
  font-family:var(--display);font-size:0.8438rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;padding:9px 18px;border-radius:999px;white-space:nowrap;
  background:var(--indigo);color:#fff}
.tier--feature .tier__flag{background:var(--violet)}
.tier h3{margin:.4em 0 .1em;font-size:1.35rem}
.tier__supply{font-size:0.8438rem;color:var(--faint);text-transform:uppercase;
  letter-spacing:.06em;font-weight:700}
.tier__img{height:158px;width:auto;margin:18px auto 10px;object-fit:contain}
.tier--feature .tier__img{height:184px}
.tier__price{font-family:var(--display);font-weight:800;font-size:2.8rem;color:var(--ink);line-height:1}
.tier--feature .tier__price{font-size:3.1rem;color:var(--violet)}
.tier__price small{display:block;font-family:var(--sans);font-size:0.9062rem;font-weight:600;
  color:var(--faint);margin-top:6px}
.tier__tot{font-weight:700;margin:.7em 0 .1em;color:var(--ink)}
.tier__tot s{color:var(--faint);font-weight:400;margin-right:5px}
.tier__ship{font-size:0.9062rem;font-weight:700;color:var(--violet-dk);margin:.3em 0 1em;
  display:inline-block;background:var(--violet-lt);padding:7px 15px;border-radius:999px}
.tier__ship.pay{color:var(--muted);background:var(--tint)}
.tier__rows{list-style:none;margin:0 0 22px;padding:0;text-align:left;font-size:.91rem;
  color:var(--muted);display:grid;gap:.6em}
.tier__rows li{position:relative;padding-left:1.7em}
.tier__rows .ck{position:absolute;left:0;color:var(--violet);font-weight:700}
.tier .btn{margin-top:auto}
.guarantee{display:flex;align-items:center;gap:30px;flex-wrap:wrap;justify-content:center;
  max-width:880px;margin:44px auto 0;background:var(--violet-lt);border:1px solid var(--violet-line);
  border-radius:var(--r-l);padding:30px 34px}
.guarantee img{width:120px;height:auto;flex:none}
.guarantee h3{margin:0 0 .3em}
.guarantee p{margin:0;color:var(--muted);font-size:1.062rem}
.pay{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:28px}
.pay img{height:30px}
.pay span{font-size:0.9062rem;color:var(--faint)}

/* ---- reviews ---- */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.tcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:28px 26px;box-shadow:var(--sh-1)}
.tcard .stars{color:var(--violet);letter-spacing:2px;font-size:.94rem;margin:0 0 .5em}
.tcard h3{font-size:1.08rem;margin:0 0 .4em}
.tcard p{color:var(--muted);font-size:1.062rem;margin:0}
.tcard .who{margin-top:1em;font-size:.86rem;color:var(--ink);font-weight:700}
.tcard .who span{color:var(--faint);font-weight:400}
.tlife{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:30px}
.tlife figure{margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  aspect-ratio:1/1;background:var(--tint)}
.tlife img{width:100%;height:100%;object-fit:cover}
.dist{list-style:none;margin:0;padding:0;max-width:540px}
.dist li{display:grid;grid-template-columns:54px 1fr 48px;align-items:center;gap:12px;
  margin-bottom:10px;font-size:1.062rem;font-weight:700;color:var(--muted)}
.dist .bar{background:var(--tint);border-radius:999px;height:11px;overflow:hidden}
.dist .bar i{display:block;height:100%;background:var(--violet);border-radius:999px}

/* ---- byline / callouts / faq / refs ---- */
.byline{display:flex;gap:20px;align-items:center;max-width:var(--prose);margin-inline:auto;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 28px;box-shadow:var(--sh-1)}
.byline img{width:70px;height:70px;border-radius:50%;object-fit:cover;flex:none;
  border:3px solid var(--violet-line)}
.byline b{color:var(--ink);font-family:var(--display);font-weight:800}
.byline p{margin:.3em 0 0;font-size:.92rem;color:var(--muted)}
@media(max-width:560px){.byline{flex-direction:column;text-align:center}}
.callout{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 28px;font-size:.96rem;color:var(--muted);box-shadow:var(--sh-1)}
.callout b{color:var(--ink)}
.callout p:last-child,.flag p:last-child,.alert p:last-child{margin:0}
.flag{background:var(--violet-lt);border:1px solid var(--violet-line);border-radius:var(--r);
  padding:24px 28px;font-size:.95rem;color:#4a3568}
.flag b{color:var(--violet-dk)}
.alert{background:#fdf0ef;border:1px solid #f6d5d1;border-radius:var(--r);
  padding:24px 28px;font-size:.95rem;color:#7a2f27}
.alert b{color:#9c3227}
.alert a{color:#9c3227}
.faq{max-width:var(--prose);margin-inline:auto}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  margin-bottom:12px;box-shadow:var(--sh-1)}
.faq summary{cursor:pointer;list-style:none;padding:22px 52px 22px 26px;
  font-family:var(--display);font-size:1.08rem;font-weight:700;color:var(--ink);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:24px;top:50%;transform:translateY(-50%);
  font-family:var(--sans);font-size:1.5rem;color:var(--violet);font-weight:400}
.faq details[open] summary::after{content:"\2013"}
.faq__b{padding:0 26px 24px;color:var(--muted)}
.faq__b p{margin:0 0 .8em}
.faq__b p:last-child{margin:0}
.refs{max-width:var(--prose);margin-inline:auto;font-size:.91rem;color:var(--muted)}
.refs ol{margin:0;padding-left:1.4em;display:grid;gap:.6em}
.refs a{word-break:break-word}
.dtable{width:100%;font-size:1rem}
.dtable th,.dtable td{text-align:left;padding:.75em .85em;border-bottom:1px solid var(--line);
  vertical-align:top}
.dtable thead th{font-family:var(--display);font-size:0.9062rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--violet-dk);background:var(--violet-lt);font-weight:800}
.dtable td b{color:var(--ink)}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}

/* ---- forms ---- */
.form{display:grid;gap:16px}
.formcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);
  padding:32px 32px;box-shadow:var(--sh-1)}
.form label{display:block;font-size:0.9062rem;font-weight:700;color:var(--ink);margin-bottom:.4em}
.form input,.form select,.form textarea{width:100%;font-family:inherit;font-size:1rem;
  color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:.78em .95em;min-height:48px}
.form textarea{min-height:135px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--violet);
  outline-offset:1px;border-color:var(--violet)}
.form .req{color:var(--violet)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form__hint{font-size:0.9062rem;color:var(--faint);margin:.35em 0 0}
.form__msg{padding:14px 18px;border-radius:12px;font-size:.93rem;display:none}
.form__msg.ok{display:block;background:var(--violet-lt);border:1px solid var(--violet-line);
  color:var(--violet-dk)}

/* ---- final cta / related ---- */
.final{background:linear-gradient(140deg,var(--indigo) 0%,var(--indigo-dk) 100%);
  border-radius:var(--r-l);padding:56px 44px;text-align:center;position:relative;
  overflow:hidden;color:#d6cee9}
.final::before{content:"";position:absolute;inset:0;
  background:radial-gradient(110% 120% at 80% -10%,rgba(107,63,160,.55),transparent 60%);
  pointer-events:none}
.final h2{color:#fff;position:relative}
.final p{color:#b7aad2;max-width:56ch;margin:0 auto 1.4em;position:relative}
.final b,.final strong{color:#fff}
.final .btn{position:relative}
.final--media{display:grid;grid-template-columns:.8fr 1.2fr;gap:44px;align-items:center;
  text-align:left;padding:52px 46px}
/* width:100% so the bottle shot shrinks to its cell instead of spilling out
   of it when this component sits in a narrow column (the mid-article CTA). */
.final--media .final__img img{width:100%;max-width:300px;height:auto;margin-inline:auto;
  filter:drop-shadow(0 20px 40px rgba(0,0,0,.5))}
.final--media h2{text-align:left}
.final--media p{margin:0 0 1.4em;max-width:54ch}
.final__price{font-family:var(--display);font-weight:800;font-size:2.05rem;
  color:#c3aef0;margin:.2em 0 .7em}
.rel{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rel a{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 24px;box-shadow:var(--sh-1);transition:.22s var(--ease)}
.rel a:hover{border-color:var(--violet-line);text-decoration:none;transform:translateY(-4px);
  box-shadow:var(--sh-2)}
.rel b{display:block;font-family:var(--display);font-weight:800;font-size:1.06rem;
  color:var(--ink);margin-bottom:.3em}
.rel span{font-size:.9rem;color:var(--muted)}
.crumbs{font-size:0.9062rem;color:var(--faint);padding:18px 0 0}
.crumbs a{color:var(--muted)}
.legal h2{font-size:1.5rem;margin-top:1.6em}
.legal h3{font-size:1.14rem;margin-top:1.3em}
.legal p,.legal li{color:var(--ink)}
.legal ul,.legal ol{padding-left:1.3em;display:grid;gap:.4em;margin:0 0 1.2em}

/* ==========================================================================
   FOOTER — three link columns plus a contact card, collapsing to an
   accordion on mobile. No other site in this family uses either.
   ========================================================================== */
footer{background:var(--indigo);color:#b4a8d0;padding:70px 0 96px;font-size:.93rem}
footer a{color:#d6cee9}
footer a:hover{color:#fff}
footer b,footer strong{color:#fff}
.fgrid{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:44px}
.fbrand{display:inline-flex;align-items:center;gap:0;font-family:var(--display);font-weight:800;
  font-size:1.7rem;color:#fff;margin-bottom:.4em;letter-spacing:-.035em}
.fbrand span{color:#c3aef0}
.fintro{color:#b4a8d0;margin:0 0 22px;font-size:.92rem}
.fbadges{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}
.fbadges img{width:46px;height:46px;object-fit:contain;background:#fff;border-radius:11px;padding:5px}
.fcol h4{font-family:var(--display);font-weight:800;font-size:.79rem;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;margin:0 0 1em}
.fcol ul{list-style:none;margin:0;padding:0;display:grid;gap:.62em;font-size:.91rem}
.fcard{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);
  border-radius:var(--r);padding:24px 26px;margin-top:44px}
.fcard h4{font-family:var(--display);font-weight:800;font-size:.79rem;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;margin:0 0 1em}
.fcard__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;font-size:.9rem;line-height:1.75}
.fcard__grid b{display:block;color:#fff;font-size:.74rem;letter-spacing:.08em;
  text-transform:uppercase;margin-bottom:.2em;font-family:var(--display);font-weight:800}
.fpay{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.15);margin-top:36px;padding-top:26px}
.fpay img{height:28px}
.fpay span{font-size:0.9062rem;color:#b4a8d0}
.disc{border-top:1px solid rgba(255,255,255,.15);margin-top:26px;padding-top:26px;
  display:grid;gap:.85em}
.disc p{margin:0;font-size:1.062rem;color:#9c8fbd;line-height:1.65}
.disc b{color:#cabfe3}
.disc .copy{margin-top:.6em;color:#b4a8d0}
.totop{position:fixed;right:20px;bottom:88px;z-index:65;width:48px;height:48px;border:0;
  border-radius:50%;background:var(--violet);color:#fff;font-size:1.15rem;cursor:pointer;
  box-shadow:var(--sh-violet);opacity:0;visibility:hidden;transition:.25s var(--ease)}
.totop.show{opacity:1;visibility:visible}
.totop:hover{transform:translateY(-3px);background:var(--violet-dk)}

@media(max-width:980px){
  .fgrid{grid-template-columns:1fr}
  .fcol{border-top:1px solid rgba(255,255,255,.15)}
  .fcol h4{margin:0;padding:16px 0;cursor:pointer;position:relative;
    display:flex;align-items:center;justify-content:space-between}
  .fcol h4::after{content:"+";font-family:var(--sans);font-size:1.3rem;font-weight:400;
    color:#c3aef0;line-height:1}
  .fcol.open h4::after{content:"\2013"}
  .fcol ul{display:none;padding-bottom:18px}
  .fcol.open ul{display:grid}
  .fcard__grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){.fcard__grid{grid-template-columns:1fr}}

/* ---- motion: slide in from the left, staggered lists ---- */
[data-reveal]{opacity:0;transform:translateX(-26px);
  transition:opacity .62s var(--ease),transform .62s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal]:nth-child(2){transition-delay:.08s}
[data-reveal]:nth-child(3){transition-delay:.16s}
[data-reveal]:nth-child(4){transition-delay:.24s}
[data-reveal]:nth-child(5){transition-delay:.32s}
[data-reveal]:nth-child(6){transition-delay:.4s}
.ticks li[data-reveal],.forlist li[data-reveal],.benefits li[data-reveal]{transform:translateX(-18px)}

/* ---- responsive ---- */
@media(max-width:1080px){
  .hero__grid{display:flex;flex-direction:column;gap:32px}
  .hero__media{max-width:400px;margin-inline:auto;width:100%;
    position:static;height:auto;display:block;order:3;margin:4px 0 18px}
  /* mobile hero order: eyebrow, H1, product shot, Quick Answer, CTA, rest.
     display:contents promotes the copy column's children to hero-grid items,
     so the shot can be placed between the H1 and the answer. */
  /* the copy column on these builds is a bare unclassed <div>, so it has to
     be promoted too -- otherwise only .hero__media is a grid item and the
     order values on the eyebrow, H1 and answer do nothing at all. */
  .hero__copy,.hero__grid > div:not([class]){display:contents}
  .hero .pill{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:4px 0 18px}
  .hero .answer{order:4}
  /* The ticks follow the Quick Answer, per the hero build order in
     references/hero.md: eyebrow, H1, Quick Answer, ticks, seal row, CTA. */
  .hero .ticks{order:5}
  .hero .hero__cta{order:6}
  /* the rating sits with the CTA. Without an explicit order display:contents
     would leave it at 0 and it would jump above the eyebrow. */
  .hero .hero__rating{order:6}
  .hero .hero__sub{order:7}
  .hero .pay{order:8}
  /* Promoting the copy column exposed these as grid items too. Without an
     order they default to 0 and jump above the eyebrow, so they are pinned
     below the CTA where they sat before. */
  .hero .factpills{order:9}
  .hero .chips{order:10}
  .hero .figures{order:11}

  .split,.facts{grid-template-columns:1fr;gap:32px}
  .steps,.tgrid,.rel,.pricing{grid-template-columns:1fr}
  .g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,1fr)}
  .badgewall{grid-template-columns:repeat(3,1fr)}
  .ingthumbs,.gallery{grid-template-columns:repeat(3,1fr)}
  .tlife{grid-template-columns:1fr}
  .benefits{grid-template-columns:1fr}
  .final--media{grid-template-columns:1fr;text-align:center;gap:28px;padding:42px 28px}
  .final--media h2{text-align:center}
  .final--media p{margin-inline:auto}
  /* stacked pricing leads with the best value */
  .pricing{max-width:440px;margin-inline:auto}
  .pricing .tier:nth-child(1){order:3}
  .pricing .tier:nth-child(2){order:1}
  .pricing .tier:nth-child(3){order:2}
  .tier--feature{transform:none}
  .tier--feature:hover{transform:translateY(-6px)}
}
@media(max-width:700px){.g2,.g3,.g4{grid-template-columns:1fr}}
@media(max-width:560px){
  body{font-size:17px}
  .sec,.section{padding:60px 0}
  .badgewall,.gallery,.ingthumbs{grid-template-columns:repeat(2,1fr)}
  .form__row{grid-template-columns:1fr}
  .formcard{padding:24px 22px}
  .final{padding:40px 24px}
  .gallery figure:last-child{display:none}
  .totop{right:12px;bottom:78px;width:44px;height:44px}
  .answer{padding:22px 22px}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto;transition:none!important;animation:none!important}
  [data-reveal]{opacity:1;transform:none}
}

/* ==========================================================================
   SHOTS — product and label imagery paired with the content that explains it.
   Replaces the old bare .gallery grid: an image on its own tells a buyer
   nothing, so every shot now carries a heading and a line of copy.
   ========================================================================== */
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;margin-top:38px}
.shots figure{margin:0;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;
  box-shadow:var(--sh-1);transition:transform .24s var(--ease),box-shadow .24s var(--ease),border-color .24s var(--ease)}
.shots figure:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--violet-line)}
.shots img{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--tint)}
.shots figcaption{padding:24px 26px}
.shots figcaption b{display:block;font-family:var(--display);font-weight:800;font-size:1.14rem;
  color:var(--ink);margin-bottom:.4em;line-height:1.25;letter-spacing:-.02em}
.shots figcaption p{margin:0;color:var(--muted);font-size:.95rem}
.shots--wide{grid-template-columns:repeat(3,minmax(0,1fr))}
.shots--wide img{aspect-ratio:4/3}
@media(max-width:900px){.shots--wide{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.shots,.shots--wide{grid-template-columns:1fr}}

/* ---- BLOG ---------------------------------------------------------------- */
.postmeta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0 0 1.8em;
  padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-size:0.9062rem;color:var(--muted)}
.postmeta b{color:var(--ink)}
.postmeta .sep{color:var(--line)}
.postmeta time{white-space:nowrap}

.toc{background:var(--tint);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 28px;margin:0 0 2.2em}
.toc h2{font-family:var(--display);font-size:.76rem!important;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--violet-dk);margin:0 0 1em}
.toc ol{margin:0;padding-left:1.25em;display:grid;gap:.45em;font-size:.95rem}
.toc a{color:var(--ink);text-decoration:none}
.toc a:hover{color:var(--violet);text-decoration:underline;text-underline-offset:3px}

.article h2{scroll-margin-top:110px}
.article h3{scroll-margin-top:110px}
.article figure{margin:2em 0}
.article figure img{width:100%;border-radius:var(--r);border:1px solid var(--line)}
.article figcaption{margin-top:.7em;font-size:0.9062rem;color:var(--faint);text-align:center}
/* A fixed cap, matching the authored width attribute, so the reserved box and
   the painted box are identical before and after the async stylesheet lands. */
.article figure.portrait img{width:100%;max-width:var(--figw,440px);margin-inline:auto}

.keypoints{background:var(--violet-lt);border:1px solid var(--violet-line);
  border-left:4px solid var(--violet);border-radius:0 var(--r) var(--r) 0;
  padding:24px 28px;margin:0 0 2em}
/* Direct child only: a <b> inside a bullet is emphasis and must stay inline. */
.keypoints>b{display:block;font-family:var(--display);font-size:0.8438rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--violet-dk);margin-bottom:1em}
.keypoints ul{margin:0;padding-left:1.2em;display:grid;gap:.5em}
.keypoints li b{color:var(--indigo)}

/* The closing CTA reused mid-article: same component, narrower column. */
.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.22;margin:0 0 .5em}
.article .final--media .final__price{font-size:1.4rem;margin:.3em 0 .7em}
@media(max-width:620px){
  .article .final--media{grid-template-columns:1fr;text-align:center;padding:30px 22px}
  .article .final--media h2{text-align:center;font-size:1.45rem}
}

.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.posts article{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sh-1)}
.posts img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:center 38%;
  background:var(--tint)}
.posts .pbody{padding:24px 26px;display:flex;flex-direction:column;flex:1}
.posts h3{margin:0 0 .45em;font-size:1.12rem}
.posts h3 a{color:var(--ink);text-decoration:none}
.posts h3 a:hover{color:var(--violet)}
.posts p{margin:0 0 1em;color:var(--muted);font-size:1.062rem}
.posts .pmeta{margin-top:auto;font-size:0.9062rem;color:var(--faint)}
@media(max-width:900px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.posts{grid-template-columns:1fr}}


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

/* A <small> inside a table cell that no rule reaches inherits the browser
   default of ~0.83em = 13.3px, under the 14.5px caption floor, and
   type_floor.py cannot see it because there is no rule to raise.
   See pitfalls.md #97. */
td small,.dtable small{font-size:0.9062rem}

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

/* ==== 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--wide>figure:only-child{grid-column:1/-1;max-width:calc((100% - 52px) / 3);margin-inline:auto}
/* ==== end fix_layout_breaks.py ==== */

/* ==== 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(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 SURFACE + HERO MOTIF  (slot: rise)
   Every selector below is scoped with body:has(.hero). class="hero" is on
   index.html and on no other page in this site, so none of this reaches
   another page.
   Paint only -- radius, shadow, background, colour, transform, transition,
   animation -- so it lives below the critical marker.
   modern_surface.py and footer_type.py re-append their blocks AFTER this one
   on every build. They are beaten on specificity, never on source order:
   their selectors are single-class, these carry body:has(.hero) as well.
   ========================================================================== */

body:has(.hero){
  /* depth language: one tight contact stop plus one wide ambient stop,
     both tinted with this site's own ink (27,23,48), never neutral black. */
  --hs-sh:0 1px 2px rgba(27,23,48,.07),0 10px 28px rgba(27,23,48,.09);
  --hs-sh-up:0 2px 4px rgba(27,23,48,.09),0 18px 44px rgba(27,23,48,.16);
  --hs-sh-cta:0 1px 2px rgba(36,21,65,.32),0 10px 28px rgba(107,63,160,.34);
  --hs-sh-cta-up:0 2px 4px rgba(36,21,65,.34),0 16px 38px rgba(107,63,160,.46);
  --hs-rc:16px;   /* cards and panels */
  --hs-rk:10px;   /* buttons and inputs */
  --hs-ease:cubic-bezier(.2,.8,.2,1);
}

/* ---- 1. cards and panels ------------------------------------------------
   16px, and one shadow language instead of the flat hairline. */
body:has(.hero) .card,
body:has(.hero) .qa,
body:has(.hero) .tier,
body:has(.hero) .guarantee,
body:has(.hero) .keypoints,
body:has(.hero) .callout,
body:has(.hero) .alert,
body:has(.hero) .tablewrap,
body:has(.hero) .faq,
body:has(.hero) .final,
body:has(.hero) .byline,
body:has(.hero) .shots figure,
body:has(.hero) .fcard,
body:has(.hero) .figures div,
body:has(.hero) .hero__stick{border-radius:var(--hs-rc);box-shadow:var(--hs-sh)}
body:has(.hero) .floaty{border-radius:12px;box-shadow:var(--hs-sh-up)}
/* the hero card carries the page's one deep surface */
body:has(.hero) .hero__stick{box-shadow:var(--hs-sh-up);border-color:#ece6f6;position:relative;z-index:1}

/* ---- 2. controls --------------------------------------------------------
   10px, not a 999px pill and not the 4px hairline rectangle. */
body:has(.hero) .btn{border-radius:var(--hs-rk)}
body:has(.hero) .btn{transition:transform .2s var(--hs-ease),box-shadow .2s var(--hs-ease),background-color .2s var(--hs-ease),border-color .2s var(--hs-ease)}
/* the buying CTA is the only gradient on the page; the secondary button stays
   solid, so the pair reads as two weights rather than two colours. */
body:has(.hero) .btn--cta{background-image:linear-gradient(180deg,#8154bf 0%,#6b3fa0 52%,#5a3387 100%);box-shadow:var(--hs-sh-cta)}
body:has(.hero) .btn--cta:hover,
body:has(.hero) .btn--cta:focus-visible{background-color:#6b3fa0;background-image:linear-gradient(180deg,#8f61cd 0%,#6f43a6 52%,#5b3489 100%);box-shadow:var(--hs-sh-cta-up);transform:translateY(-2px)}
body:has(.hero) .btn--ink{background-image:none;box-shadow:var(--hs-sh)}
body:has(.hero) .btn--ink:hover{box-shadow:var(--hs-sh-up);transform:translateY(-2px)}
body:has(.hero) .btn--ghost{border-color:#cdbce9;box-shadow:none}
body:has(.hero) .btn--ghost:hover{background-color:var(--violet-lt);border-color:var(--violet);box-shadow:0 1px 2px rgba(27,23,48,.06);transform:translateY(-2px)}
body:has(.hero) .btn:hover{transform:translateY(-2px)}
/* a visible focus ring on everything clickable */
body:has(.hero) a:focus-visible,
body:has(.hero) .btn:focus-visible,
body:has(.hero) button:focus-visible,
body:has(.hero) summary:focus-visible{outline:3px solid #8154bf;outline-offset:3px}

/* ---- 3. clickable surfaces answer the pointer with 2px ------------------ */
/* site.js tags .card and .tier with data-reveal at runtime, and
   [data-reveal]{transition:opacity .62s,transform .62s} is what fades them in.
   This rule outranks it, so opacity has to be restated here or the reveal
   stops fading and the cards snap into place. */
body:has(.hero) .card,
body:has(.hero) .shots figure,
body:has(.hero) .tier{transition:transform .22s var(--hs-ease),box-shadow .22s var(--hs-ease),border-color .22s var(--hs-ease),opacity .6s var(--hs-ease)}
body:has(.hero) .card:hover,
body:has(.hero) .shots figure:hover{transform:translateY(-2px);box-shadow:var(--hs-sh-up);border-color:#ddd0f0}

/* ---- 4. pricing: full-width ribbon, raised recommended tier -------------
   GEOMETRY UNTOUCHED. The row's shared image box (.card--pack img), the
   per-card column flex, .tier .btn{margin-top:auto} and the featured card's
   scale are all left exactly as the build wrote them; the three button
   offsets are measured before and after. Everything here is paint. */
body:has(.hero) .tier{box-shadow:var(--hs-sh)}
body:has(.hero) .tier:hover{transform:translateY(-2px);box-shadow:var(--hs-sh-up)}
/* The recommended tier is raised with the `translate` property, not with
   transform: site.js tags every .tier with data-reveal and
   [data-reveal].in{transform:none} outranks .tier--feature{transform:scale(1.04)},
   so the build's scale is dead the moment the row reveals -- measured as
   matrix(1,0,0,1,-26,0) on all three cards. `translate` is a separate
   property, survives that reset, composes with the hover lift and moves no
   other box, so the row's image slot and button baselines are untouched. */
/* The tint has to START below the product shot. The pack images carry their
   own white background, so a tint at the top of the card drew a visible
   white rectangle around the 6-bottle shot -- invisible on the two white
   cards beside it, obvious on this one. */
body:has(.hero) .tier--feature{translate:0 -10px;background-image:linear-gradient(180deg,#fff 0%,#fff 38%,#f8f4fd 100%);border-color:#6b3fa0;box-shadow:var(--hs-sh-up)}
body:has(.hero) .tier--feature:hover{transform:translateY(-2px);box-shadow:0 2px 6px rgba(27,23,48,.10),0 22px 52px rgba(27,23,48,.20)}
/* the flag stops being a floating pill and becomes the card's top bar */
body:has(.hero) .tier__flag{top:0;left:0;right:0;width:auto;transform:none;
  border-radius:14px 14px 0 0;text-align:center;letter-spacing:.1em;
  background-image:linear-gradient(180deg,#4a2f7c 0%,#3b2566 100%)}
body:has(.hero) .tier--feature .tier__flag{background-image:linear-gradient(180deg,#7d4dbb 0%,#6b3fa0 100%)}
/* dashed separators between the feature rows, drawn in the existing .6em gap
   on a pseudo-element so no row moves */
body:has(.hero) .tier__rows li+li::after{content:'';position:absolute;left:0;right:0;top:-.34em;
  border-top:1px dashed #ddd0f0}

/* ---- 5. hero motif: RISE ------------------------------------------------
   Warmth rising from the base of the bottle, drifting up and fading.
   Both shapes are pseudo-elements of the media column -- never the <img>,
   which is the LCP element and is preloaded -- and both are sized WIDER and
   TALLER than the product card so they read outside it rather than being
   hidden behind an opaque panel. Only transform and opacity animate.
   Names are hsWarm / hsRise: the only keyframe already in this stylesheet is
   btOrbitDot, which these replace. */
body:has(.hero) .hero__media{position:relative}
body:has(.hero) .hero__media::before{
  content:'';position:absolute;left:50%;right:auto;top:auto;bottom:-18%;
  width:188%;height:76%;aspect-ratio:auto;translate:-50% 0;
  border:0;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(54% 50% at 50% 70%,rgba(107,63,160,.30) 0%,rgba(129,84,191,.18) 38%,rgba(169,143,224,.07) 58%,rgba(169,143,224,0) 76%);
  animation:hsWarm 21s ease-in-out infinite}
/* The motes sit in the LOWER band and in the two side channels the card does
   not cover: a dot placed behind an opaque 477px card renders nothing, which
   is how the ring this replaces came to look like nothing at all. The box is
   152% of the card's width and hangs 24% below it, so the field starts under
   the bottle and drifts up past its shoulders. */
body:has(.hero) .hero__media::after{
  content:'';position:absolute;left:50%;right:auto;top:auto;bottom:-24%;
  width:152%;height:80%;aspect-ratio:auto;translate:-50% 0;
  border:0;border-radius:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(circle at 7% 88%,rgba(107,63,160,.34) 0 5px,transparent 6px),
    radial-gradient(circle at 15% 72%,rgba(129,84,191,.30) 0 3.5px,transparent 4.5px),
    radial-gradient(circle at 11% 96%,rgba(169,143,224,.40) 0 6.5px,transparent 7.5px),
    radial-gradient(circle at 22% 82%,rgba(107,63,160,.24) 0 4px,transparent 5px),
    radial-gradient(circle at 36% 94%,rgba(129,84,191,.28) 0 5.5px,transparent 6.5px),
    radial-gradient(circle at 50% 99%,rgba(107,63,160,.26) 0 4.5px,transparent 5.5px),
    radial-gradient(circle at 64% 90%,rgba(169,143,224,.34) 0 6px,transparent 7px),
    radial-gradient(circle at 78% 84%,rgba(107,63,160,.30) 0 4px,transparent 5px),
    radial-gradient(circle at 86% 70%,rgba(129,84,191,.32) 0 5px,transparent 6px),
    radial-gradient(circle at 93% 92%,rgba(169,143,224,.38) 0 6.5px,transparent 7.5px),
    radial-gradient(circle at 89% 54%,rgba(107,63,160,.22) 0 3.5px,transparent 4.5px),
    radial-gradient(circle at 9% 58%,rgba(107,63,160,.20) 0 3px,transparent 4px);
  animation:hsRise 30s linear infinite}
@keyframes hsWarm{0%,100%{opacity:.62;transform:scale(.95)}50%{opacity:1;transform:scale(1.06)}}
@keyframes hsRise{0%{opacity:0;transform:translateY(9%)}16%{opacity:1}74%{opacity:.55}100%{opacity:0;transform:translateY(-52%)}}

/* ---- 6. everything switches off under reduced motion ------------------- */
@media(prefers-reduced-motion:reduce){
  body:has(.hero) .hero__media::before,
  body:has(.hero) .hero__media::after{animation:none}
  body:has(.hero) .btn,
  body:has(.hero) .card,
  body:has(.hero) .tier,
  body:has(.hero) .shots figure{transition:none}
  body:has(.hero) .btn:hover,
  body:has(.hero) .btn--cta:hover,
  body:has(.hero) .btn--ink:hover,
  body:has(.hero) .btn--ghost:hover,
  body:has(.hero) .card:hover,
  body:has(.hero) .shots figure:hover,
  body:has(.hero) .tier:hover{transform:none}
  body:has(.hero) .tier--feature:hover{transform:none}
}
/*!SITE-HOME-PAINT-END*/
/* ==== footer type floor (footer_type.py) ==== */
/* The footer carried the smallest text on the page -- the legal pages,
   the guarantee and the contact routes, set as fine print. Running text
   and links sit at 16px, column headings at 15px (uppercase and
   letter-spaced, so they read larger than the number). Last in the file
   on purpose: it outranks the phone breakpoints that shrank them. */
footer{font-size:16px}
footer .fcard h4{font-size:15px}
footer .fcard__grid{font-size:16px}
footer .fcard__grid b{font-size:16px}
footer .fcol h4{font-size:15px}
footer .fcol ul{font-size:16px}
footer .fintro{font-size:16px}
footer .fpay span{font-size:16px}
/* ==== end footer type floor ==== */

/* ==== modern surface (modern_surface.py) ==== */
/* House rule 11. This stylesheet had 49 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 (27,23,48), 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{
  --shadow:0 1px 2px rgba(27,23,48,.06), 0 6px 18px rgba(27,23,48,.07);
  --lift:0 2px 6px rgba(27,23,48,.09), 0 16px 34px rgba(27,23,48,.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,
.badgewall figure,
.tablewrap,
.faq,
.article figure{border-radius:var(--r)}

/* 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,
.tier,
.posts h3 a{transition:box-shadow .2s ease, transform .2s ease}
.rel a:hover,
.posts article:hover,
.shots figure:hover,
.card--pack:hover,
.badgewall figure:hover,
.tier:hover,
.posts h3 a: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,
.tier:hover,
.posts h3 a:hover{transform:none}
}
/* ==== end modern surface ==== */
.review-foot{margin:0;padding:.6rem 0;font-size:.92rem}.review-foot a{font-weight:600}