/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Bricolage Grotesque Fallback";src:local("Arial");font-weight:400;size-adjust:107.03%;ascent-override:86.89%;descent-override:25.23%;line-gap-override:0.00%}
@font-face{font-family:"Bricolage Grotesque Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:102.73%;ascent-override:90.53%;descent-override:26.28%;line-gap-override:0.00%}
@font-face{font-family:"Instrument Sans Fallback";src:local("Arial");font-weight:400;size-adjust:103.24%;ascent-override:93.96%;descent-override:24.22%;line-gap-override:0.00%}
@font-face{font-family:"Instrument Sans Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:99.57%;ascent-override:97.42%;descent-override:25.11%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* ==========================================================================
   MEMOPEZIL — memozpezil.com
   Component system adapted from the Memodyneweb reference: characterful
   display face, flat panels over shadow-lifted cards, a hard-edged grid, and
   a dark band used as a structural device rather than an accent.
   Fonts follow the reference here — Bricolage Grotesque + Instrument Sans are
   unused elsewhere in this family, so the pairing carries over intact.
   Palette from the bottle: white body, royal-purple brain mark, plum band.
   Royal purple leads, plum grounds the dark sections, ground is cool paper.
   ========================================================================== */

:root{
  /* cool paper ground — from the white bottle and its mint-white label wash */
  --paper:#f7f6f9; --tint:#efedf4; --card:#ffffff;
  --ink:#1e1728; --ink-dk:#130e1b; --muted:#5c5470; --faint:#6e697b;
  --line:#e2deea; --line-soft:#eeebf3;

  /* royal purple wordmark — the lead */
  --purple:#6a2c91; --purple-dk:#521f72; --purple-lt:#f3ebf8; --purple-line:#dcc9ea;

  /* plum label band — dark sections and the hero */
  --plum:#41155c; --plum-dk:#2a0d3d; --plum-lt:#ede2f4;

  /* a warm signal colour for cautions, drawn from the label's amber accents */
  --warn:#b4601a; --warn-lt:#fdf1e6; --warn-line:#f2ddc6;

  --sh-1:0 1px 0 var(--line);
  --sh-2:0 10px 30px -18px rgba(30,23,40,.4);
  --sh-3:0 24px 60px -28px rgba(30,23,40,.5);
  --ease:cubic-bezier(.33,1,.68,1);

  --display:'Bricolage Grotesque','Bricolage Grotesque Fallback','Segoe UI',system-ui,-apple-system,Helvetica,Arial,sans-serif;
  --sans:'Instrument Sans','Instrument Sans Fallback',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --wrap:1160px; --prose:68ch;
}

*{box-sizing:border-box;min-width:0}
html{scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:132px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.72;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(--purple);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.18;
  letter-spacing:-.018em;margin:0 0 .5em;color:var(--ink);overflow-wrap:break-word}
h1{font-size:clamp(2.1rem,5vw,3.15rem)}
h2{font-size:clamp(1.6rem,3.3vw,2.3rem)}
h3{font-size:1.3rem}
h4{font-size:1.04rem}
p{margin:0 0 1.15em}
table{border-collapse:collapse}
section[id]{scroll-margin-top:132px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.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(--purple);
  padding:10px 16px;border-radius:6px;z-index:2000}
.skip:focus{left:12px;top:12px}

.sec,.section{padding:80px 0}
.sec--tint,.section--tint{background:var(--tint)}
.sec--dark,.section--dark{background:var(--plum);color:#d8cbe4}
.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:40px}
.section--center .section__head{margin-inline:auto;text-align:center}

.eyebrow{display:inline-block;font-family:var(--sans);font-size:0.8438rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--purple);margin-bottom:.9em}
.sec--dark .eyebrow{color:#c9a6e2}
.lead{font-size:1.14rem;color:var(--muted)}
.sec--dark .lead{color:#bcaccb}
.note{font-size:0.9062rem;color:var(--faint)}
.meta{font-size:0.9062rem;color:var(--faint);margin:-.3em 0 1.6em}

/* ---- buttons: square-shouldered, flat, no lift ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--display);font-weight:700;font-size:1rem;padding:15px 30px;
  border:2px solid var(--purple);border-radius:4px;cursor:pointer;min-height:50px;
  text-align:center;transition:background .18s var(--ease),color .18s var(--ease),
  border-color .18s var(--ease);background:var(--purple);color:#fff;text-decoration:none}
.btn:hover{background:var(--purple-dk);border-color:var(--purple-dk);color:#fff;text-decoration:none}
.btn--cta{background:var(--purple);border-color:var(--purple)}
.btn--ink{background:var(--plum);border-color:var(--plum)}
.btn--ink:hover{background:var(--plum-dk);border-color:var(--plum-dk)}
.btn--ghost{background:transparent;border-color:var(--line);color:var(--ink);
  font-size:.95rem;padding:13px 26px}
.btn--ghost:hover{background:var(--purple-lt);border-color:var(--purple);color:var(--purple-dk)}
.btn--lg{font-size:1.08rem;padding:18px 36px;min-height:56px}
.btn--block{display:flex;width:100%}
.btn--sm{padding:10px 20px;font-size:.9rem;min-height:44px}
.sec--dark .btn--ghost{border-color:rgba(255,255,255,.4);color:#fff}
.sec--dark .btn--ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}

/* ==========================================================================
   HEADER — centred menu with a trust chip where other sites put a phone
   number. Two rows, hairline-separated, no shadow.
   ========================================================================== */
.util{background:var(--plum);color:#c3b2d2;font-size:0.9062rem}
.util__row{display:flex;align-items:center;justify-content:center;gap:8px 24px;
  padding:8px 22px;flex-wrap:wrap;text-align:center}
.util__item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.util__item b{color:#fff}
.util__item::before{content:"";width:4px;height:4px;background:#c9a6e2;flex:none}
@media(max-width:700px){.util__row{font-size:0.9062rem;gap:5px 14px}
  .util__item:nth-child(4){display:none}}

header.nav{position:sticky;top:0;z-index:60;background:rgba(247,246,249,.96);
  backdrop-filter:blur(8px);border-bottom:2px solid var(--ink)}
.nav__row{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding-block:14px;flex-wrap:nowrap}
.nav__chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--purple-line);
  background:var(--purple-lt);color:var(--purple-dk);padding:7px 14px;border-radius:3px;
  font-size:.75rem;font-weight:700;white-space:nowrap;flex:none}
.nav__chip b{font-family:var(--display)}
.nav__side{display:flex;align-items:center;gap:12px;flex:1 1 0;min-width:0}
.nav__side--r{justify-content:flex-end}

/* 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:700;font-size:1.55rem;color:var(--ink);letter-spacing:-.03em;
  white-space:nowrap;flex:none}
.brand:hover{text-decoration:none}
.brand span{color:var(--purple)}
.brand svg{width:32px;height:32px;flex:none;margin-right:10px}

.nav__bar{border-top:1px solid var(--line)}
.menu{display:flex;align-items:center;justify-content:center;gap:32px;
  list-style:none;margin:0;padding:0;flex-wrap:nowrap}
.menu a{display:inline-block;padding:13px 0;font-size:.92rem;font-weight:600;
  color:var(--muted);white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-2px}
.menu a:hover,.menu a[aria-current="page"]{color:var(--ink);text-decoration:none;
  border-bottom-color:var(--purple)}
.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);margin:5px 0}

@media(max-width:1120px){.menu{gap:23px}.menu a{font-size:.89rem}}
@media(max-width:1040px){.menu{gap:17px}.menu a{font-size:.86rem}}
@media(max-width:980px){
  .nav__bar{border-top:0}
  .menu{display:none}
  .menu.open{display:flex;flex-direction:column;align-items:stretch;gap:0;
    border-top:1px solid var(--line);padding:4px 0 8px;max-height:74vh;overflow:auto}
  .menu.open li{border-bottom:1px solid var(--line-soft)}
  .menu.open a{display:block;padding:14px 4px;min-height:44px;border-bottom:0;margin:0}
  .burger{display:block}
}
@media(max-width:620px){.nav__chip{display:none}.brand{font-size:1.32rem}}
@media(max-width:420px){.nav__side--r .btn{display:none}}

/* ---- sticky buy bar ---- */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--plum);color:#fff;
  transform:translateY(105%);transition:transform .28s var(--ease);
  border-top:2px solid var(--purple)}
.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:10px 22px}
.buybar__t{font-size:.94rem;line-height:1.3}
.buybar__t b{display:block;font-family:var(--display);font-size:1.04rem}
.buybar__t .from{color:#c9a6e2;font-weight:700}
@media(max-width:560px){.buybar__t{font-size:0.9062rem}.buybar__t b{font-size:.92rem}}

/* ==========================================================================
   HERO — the depth device. A plum band behind the fold, cream content on it,
   with the pack shot lifted clear. No other site in this family has a dark hero.
   ========================================================================== */
.hero{padding:62px 0 76px;background:
  linear-gradient(178deg,var(--plum) 0%,var(--plum-dk) 62%,var(--plum) 100%);
  color:#d8cbe4;position:relative;overflow-x:clip;overflow-y:visible}
.hero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 60% at 78% 8%,rgba(106,44,145,.55),transparent 62%);
  pointer-events:none}
.hero .wrap{position:relative}
.hero h1,.hero h2{color:#fff}
.hero h1 em{font-style:normal;color:#c9a6e2}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:start}
.pill{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.28);border-radius:3px;padding:9px 18px;
  font-size:0.8438rem;font-weight:700;color:#fff}
.hero__sub{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px 18px;
  font-size:0.9688rem;font-weight:600;color:#bcaccb}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:22px}
.hero .btn--cta{background:#fff;color:var(--plum-dk);border-color:#fff}
.hero .btn--cta:hover{background:#c9a6e2;border-color:#c9a6e2;color:var(--plum-dk)}
.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;color:#d8cbe4}
.ticks b,.ticks strong{color:#fff}
.ticks .ck{flex:0 0 22px;height:22px;border-radius:2px;background:rgba(255,255,255,.16);
  color:#fff;display:grid;place-items:center;font-size:.72rem;font-weight:700;margin-top:2px}
.hero a{color:#c9a6e2}

.hero__media{position:relative;text-align:center}
.hero__stick{position:relative;width:100%;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.2);border-radius:6px;padding:30px 26px}
.hero__stick img{margin:0 auto;max-width:76%;
  filter:drop-shadow(0 24px 40px rgba(0,0,0,.45))}
@media(min-width:981px){
  .hero__media{position:sticky;top:132px;align-self:start;
    height:calc(100vh - 144px);min-height:340px;
    display:flex;align-items:center;justify-content:center}
  .hero__stick{max-height:calc(100vh - 164px);display:flex;flex-direction:column;justify-content:center}
  .hero__stick img{max-height:calc(100vh - 320px);min-height:160px;width:auto;object-fit:contain}
}
.floaty{position:absolute;background:#fff;border-radius:3px;padding:10px 14px;
  box-shadow:var(--sh-2);font-family:var(--display);font-weight:700;font-size:0.9062rem;
  line-height:1.2;color:var(--ink);z-index:2}
.floaty small{display:block;color:var(--purple);font-size:0.9062rem;letter-spacing:.06em;
  font-weight:700;font-family:var(--sans);text-transform:uppercase}
.floaty--tl{top:14px;left:-10px}
.floaty--br{bottom:18px;right:-10px}
@media(max-width:560px){.floaty{display:none}}

.factpills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 22px;padding:0}
.factpills li{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  border-radius:3px;padding:7px 14px;font-size:0.9062rem;font-weight:600;color:#d8cbe4}
.factpills li b{color:#fff}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 22px}
.figures div{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);
  border-radius:4px;padding:16px 10px;text-align:center}
.figures b{display:block;font-family:var(--display);font-size:1.5rem;color:#fff;line-height:1.05}
.figures span{font-size:0.9062rem;font-weight:700;color:#bcaccb;text-transform:uppercase;letter-spacing:.06em}

/* ---- quick answer + glance table ---- */
.answer{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.24);
  border-left:4px solid #c9a6e2;border-radius:0 5px 5px 0;padding:22px 26px;margin:0 0 22px}
.answer .tag{display:block;font-family:var(--sans);font-size:0.8438rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:#c9a6e2;margin-bottom:.8em}
.answer p{margin:0 0 .8em;color:#d8cbe4}
.answer p:last-child{margin:0}
.answer p.first{color:#fff;font-weight:600;font-size:1.062rem;font-family:var(--display)}
/* the same block on light pages */
.sec .answer{background:var(--purple-lt);border-color:var(--purple-line);
  border-left-color:var(--purple)}
.sec .answer .tag{color:var(--purple)}
.sec .answer p{color:var(--muted)}
.sec .answer p.first{color:var(--ink)}
.sec .answer a{color:var(--purple)}

/* In the hero the answer is not a card: the approved layout runs it as two
   flowing paragraphs under the H1. The wrapper stays because it is the
   speakable selector and the AEO block, but the card styling comes off.
   Colours are this hero's own light-on-dark pair rather than --muted /
   --ink-dk: this is the only dark hero in the family, and the light tokens
   would land grey-on-plum (pitfall 57). */
.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:#d8cbe4;margin:0 0 .85em;max-width:56ch}
.hero .answer p:last-child{margin-bottom:0}
.hero .answer p b{color:#fff}
.hero__rating{display:flex;align-items:center;gap:9px;margin:16px 0 0;
  font-size:.95rem;color:#d8cbe4}
.hero__rating b{color:#fff}
.hero__rating .stars{color:#c9a6e2;letter-spacing:2px}
.ticks--gone{display:none}


/* ---- hero motif -- drift-veil ---------------------------------------- */
.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(158deg,#f7f6f9,#ebdbd1 50%,#f7f6f9)}.hero__media::before{content:'';position:absolute;inset:-4%;background:radial-gradient(52% 42% at 34% 34%,rgba(180,96,26,0.20),transparent 72%),radial-gradient(46% 40% at 70% 62%,rgba(180,96,26,0.14),transparent 74%);filter:blur(16px);animation:btVeil 19s ease-in-out infinite;z-index:1}@keyframes btVeil{0%,100%{transform:translate(-2%,1%)}50%{transform:translate(3%,-2%)}}
@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:980px){
  .hero__grid{display:flex;flex-direction:column;gap:30px}
  .hero__media{max-width:390px;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}
  .hero .hero__rating{order:7}
  .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*/
/* ==========================================================================
   memozpezil.com HOME PAGE -- design slot "trace".  STRUCTURAL HALF.
   This sits above the critical marker, so it is inlined into every page at
   build time and the site must be REBUILT, not merely restamped, after it
   changes.  Everything outside the hero is scoped with body:has(.hero);
   class="hero" is on index.html and on no other page of this site, so none
   of it reaches pricing.html, the legal pages or the blog.

   1. THE HERO BAND.  An earlier motif pass appended a light cream gradient
      over this stylesheet's own plum one and left the white H1, the #d8cbe4
      running copy, the rgba(255,255,255,.1) pills and the white .btn--cta
      sitting on top of it.  White on #ebdbd1 measures about 1.1:1.  Restored
      to the dark band every colour in this hero was written for.
   ========================================================================== */
.hero{background:linear-gradient(176deg,var(--plum) 0%,var(--plum-dk) 58%,#4b1a6a 100%)}
/* and the stale amber veil stops painting on the first frame.  The motif that
   replaces it is below the marker with the rest of the paint. */
.hero__media::before{background:none;filter:none;animation:none}

/* 2. DESKTOP READING ORDER.  The Order button measured y=1046 on a 1440x900
      screen -- 146px past the fold, so the money page's first screen had
      nothing to click.  Reordering the copy column to eyebrow / headline /
      quick answer / BUTTONS / payment line / evidence brings it to ~789.
      Desktop only: the phone order is composed separately with
      display:contents at <=980px and is left exactly as it was. */
@media(min-width:981px){
  .hero{padding-top:52px}
  .hero__grid>div:not([class]){display:flex;flex-direction:column;align-items:stretch}
  .hero .pill{order:1;align-self:flex-start}
  .hero h1{order:2}
  .hero .answer{order:3}
  .hero .hero__cta{order:4}
  .hero .hero__sub{order:5;margin:14px 0 0}
  .hero .ticks{order:6;margin:26px 0 0}
  .hero .factpills{order:7;margin:20px 0 0}
}

/* 3. PRICING.  Dashed rules between the feature rows, and the recommended
      tier lifted clear of its neighbours.  The lift is margin-top and never
      transform: the reveal pass sets transform:none on .in and would cancel
      it.  The three Add To Cart buttons are bottom-anchored inside a stretch
      row by .tier .btn{margin-top:auto}, so both of these keep the shared
      baseline -- measured after the build, three identical button offsets. */
body:has(.hero) .tier__rows li+li{border-top:1px dashed var(--purple-line);padding-top:.5em}
body:has(.hero) .tier--feature{margin-top:-22px}
/*!SITE-HOME-CRIT-END*/

/*!CRITICAL-END*/
.qa{background:var(--card);border:2px solid var(--ink);border-radius:5px;
  overflow:hidden;max-width:900px;margin:0 auto}
.qa__head{background:var(--ink);color:#fff;padding:22px 26px}
.qa__head b{font-family:var(--display);font-size:1.38rem;color:#fff;display:block}
.qa__head p{margin:.5em 0 0;font-size:1.062rem;color:#bcaccb}
.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:14px 26px;border-top:1px solid var(--line-soft);font-size:1.062rem}
.qa dt{font-weight:700;color:var(--ink);background:var(--tint)}
.qa dd{color:var(--muted)}
@media(max-width:640px){
  .qa dl{grid-template-columns:1fr}
  .qa dt{padding-bottom:8px}
  .qa dd{border-top:0}
  .qa dt,.qa dd{padding-inline:20px}
}

/* ---- 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 32px;padding:20px 22px}
.trust__item{display:flex;align-items:center;gap:10px;font-size:0.9062rem;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:20px;max-width:920px;margin-inline:auto}
.badgewall figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.badgewall img{width:86px;height:86px;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:2px;background:var(--line);
  border:1px solid var(--line)}
.stat{background:var(--card);padding:28px 18px;text-align:center}
.stat b{display:block;font-family:var(--display);font-size:2.3rem;color:var(--purple);line-height:1}
.stat span{font-size:0.9062rem;color:var(--muted)}
.sec--dark .stats{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.18)}
.sec--dark .stat{background:var(--plum)}
.sec--dark .stat b{color:#c9a6e2}
.sec--dark .stat span{color:#bcaccb}

/* ---- grids + cards: flat panels with a hard accent edge ---- */
.grid{display:grid;gap:22px}
.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-top:3px solid var(--purple);
  border-radius:0 0 4px 4px;padding:26px 24px;transition:border-color .2s var(--ease)}
.card:hover{border-color:var(--purple-line);border-top-color:var(--purple-dk)}
.card .ic{width:50px;height:50px;border-radius:3px;background:var(--purple-lt);
  display:grid;place-items:center;margin-bottom:14px;overflow:hidden}
.card .ic img{height:32px;width:32px;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,.07);border-color:rgba(255,255,255,.18);
  border-top-color:#c9a6e2}
.sec--dark .card p{color:#bcaccb}
.idx{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:3px;
  background:var(--ink);color:#fff;font-family:var(--display);font-weight:700;
  font-size:.98rem;margin-bottom:12px}

/* ---- split / steps ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.split img{border-radius:5px;border:1px solid var(--line)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.usesteps{list-style:none;margin:1.2em 0 0;padding:0;counter-reset:u;display:grid;gap:18px}
.usesteps li{position:relative;padding-left:3.2em;min-height:2.2em}
.usesteps li::before{counter-increment:u;content:counter(u);position:absolute;left:0;top:-.1em;
  width:2.2em;height:2.2em;border-radius:3px;background:var(--purple);color:#fff;
  font-family:var(--display);font-weight:700;display:grid;place-items:center;font-size:1.062rem}
.usesteps b{display:block;font-family:var(--display);font-size:1.08rem;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:14px;margin-top:36px}
.gallery figure{margin:0;border-radius:4px;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:22px;max-width:880px;margin:0 auto 8px}
.ingthumb{text-align:center}
.ingthumb img{width:112px;height:112px;border-radius:4px;object-fit:cover;margin:0 auto .7em;
  border:1px solid var(--line);background:#fff}
.ingthumb b{font-family:var(--display);font-size:.98rem;display:block;color:var(--ink);line-height:1.2}
.ingthumb span{font-size:0.9062rem;color:var(--purple);display:block;font-weight:700}
.inglist{max-width:var(--prose);margin-inline:auto}
.ing{border-left:3px solid var(--purple-line);padding:4px 0 26px 24px;margin-bottom:26px}
.ing:last-child{margin-bottom:0}
.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:.85rem;font-weight:700;
  color:#fff;background:var(--purple);padding:5px 12px;border-radius:3px;white-space:nowrap}
.ing p{margin:.6em 0 0;color:var(--muted)}
.ing__cite{font-size:.85rem}
.facts{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start}
.facts__img{border:1px solid var(--line);border-radius:5px;overflow:hidden;background:#fff}
.facttab{width:100%;font-size:.94rem}
.facttab th,.facttab td{text-align:left;padding:.64em .3em;border-bottom:1px solid var(--line)}
.facttab thead th{font-family:var(--sans);font-size:0.9062rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint)}
.facttab td:last-child,.facttab th:last-child{text-align:right;white-space:nowrap;
  color:var(--ink);font-weight:700}
.facttab .blend td{font-weight:700;color:var(--ink);background:var(--tint)}

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

/* ---- pricing ---- */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.tier{background:var(--card);border:1px solid var(--line);border-radius:5px;padding:30px 24px;
  text-align:center;position:relative;display:flex;flex-direction:column;
  transition:border-color .2s var(--ease)}
.tier:hover{border-color:var(--purple-line)}
.tier--feature{border:2px solid var(--purple);z-index:2}
.tier__flag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  font-family:var(--sans);font-size:0.8438rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:7px 15px;border-radius:3px;white-space:nowrap;
  background:var(--ink);color:#fff}
.tier--feature .tier__flag{background:var(--purple)}
.tier h3{margin:.3em 0 .1em;font-size:1.3rem}
.tier__supply{font-size:0.8438rem;color:var(--faint);text-transform:uppercase;
  letter-spacing:.06em;font-weight:700}
.tier__img{height:152px;width:auto;margin:16px auto 10px;object-fit:contain}
.tier--feature .tier__img{height:176px}
.tier__price{font-family:var(--display);font-size:2.7rem;color:var(--ink);line-height:1}
.tier--feature .tier__price{font-size:3rem;color:var(--purple)}
.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(--purple-dk);margin:.3em 0 1em;
  display:inline-block;background:var(--purple-lt);padding:6px 13px;border-radius:3px}
.tier__ship.pay{color:var(--muted);background:var(--tint)}
.tier__rows{list-style:none;margin:0 0 20px;padding:0;text-align:left;font-size:.9rem;
  color:var(--muted);display:grid;gap:.55em}
.tier__rows li{position:relative;padding-left:1.6em}
.tier__rows .ck{position:absolute;left:0;color:var(--purple);font-weight:700}
.tier .btn{margin-top:auto}
.guarantee{display:flex;align-items:center;gap:28px;flex-wrap:wrap;justify-content:center;
  max-width:860px;margin:40px auto 0;background:var(--card);border:1px solid var(--line);
  border-left:4px solid var(--purple);border-radius:0 5px 5px 0;padding:26px 30px}
.guarantee img{width:116px;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:26px}
.pay img{height:28px}
.pay span{font-size:0.9062rem;color:var(--faint)}

/* ---- reviews ---- */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tcard{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:26px 24px}
.tcard .stars{color:var(--purple);letter-spacing:2px;font-size:.92rem;margin:0 0 .5em}
.tcard h3{font-size:1.06rem;margin:0 0 .4em}
.tcard p{color:var(--muted);font-size:1.062rem;margin:0}
.tcard .who{margin-top:1em;font-size:.85rem;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:18px;margin-bottom:28px}
.tlife figure{margin:0;border-radius:4px;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:520px}
.dist li{display:grid;grid-template-columns:52px 1fr 46px;align-items:center;gap:12px;
  margin-bottom:9px;font-size:1.062rem;font-weight:700;color:var(--muted)}
.dist .bar{background:var(--tint);height:12px;overflow:hidden;border:1px solid var(--line)}
.dist .bar i{display:block;height:100%;background:var(--purple)}

/* ---- byline / callouts / faq / refs ---- */
.byline{display:flex;gap:18px;align-items:center;max-width:var(--prose);margin-inline:auto;
  background:var(--card);border:1px solid var(--line);border-left:4px solid var(--purple);
  border-radius:0 4px 4px 0;padding:22px 26px}
.byline img{width:66px;height:66px;border-radius:4px;object-fit:cover;flex:none;
  border:1px solid var(--line)}
.byline b{color:var(--ink);font-family:var(--display)}
.byline p{margin:.3em 0 0;font-size:0.9062rem;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:4px;
  padding:22px 26px;font-size:.95rem;color:var(--muted)}
.callout b{color:var(--ink)}
.callout p:last-child,.flag p:last-child,.alert p:last-child{margin:0}
.flag{background:var(--warn-lt);border:1px solid var(--warn-line);border-left:4px solid var(--warn);
  border-radius:0 4px 4px 0;padding:22px 26px;font-size:.94rem;color:#6d3c11}
.flag b{color:var(--warn)}
.alert{background:var(--purple-lt);border:1px solid var(--purple-line);
  border-left:4px solid var(--purple);border-radius:0 4px 4px 0;padding:22px 26px;
  font-size:.94rem;color:#4a2260}
.alert b{color:var(--purple-dk)}
.alert a{color:var(--purple-dk)}
.faq{max-width:var(--prose);margin-inline:auto}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 44px 20px 2px;
  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:8px;top:50%;transform:translateY(-50%);
  font-family:var(--sans);font-size:1.5rem;color:var(--purple);font-weight:400}
.faq details[open] summary::after{content:"\2013"}
.faq__b{padding:0 2px 22px;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:.9rem;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:.72em .8em;border-bottom:1px solid var(--line);
  vertical-align:top}
.dtable thead th{font-family:var(--sans);font-size:0.9062rem;letter-spacing:.07em;
  text-transform:uppercase;color:#fff;background:var(--ink)}
.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-top:3px solid var(--purple);
  border-radius:0 0 5px 5px;padding:28px 30px}
.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:3px;
  padding:.75em .9em;min-height:46px}
.form textarea{min-height:130px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--purple);
  outline-offset:1px;border-color:var(--purple)}
.form .req{color:var(--purple)}
.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:3px;font-size:.92rem;display:none}
.form__msg.ok{display:block;background:var(--purple-lt);border:1px solid var(--purple-line);
  color:var(--purple-dk)}

/* ---- final cta / related ---- */
.final{background:var(--plum);border-radius:6px;padding:52px 40px;text-align:center;
  position:relative;overflow:hidden;color:#d8cbe4}
.final::before{content:"";position:absolute;inset:0;
  background:radial-gradient(90% 110% at 20% 0%,rgba(106,44,145,.6),transparent 62%);
  pointer-events:none}
.final h2{color:#fff;position:relative}
.final p{color:#bcaccb;max-width:56ch;margin:0 auto 1.4em;position:relative}
.final b,.final strong{color:#fff}
.final .btn{position:relative;background:#fff;color:var(--plum-dk);border-color:#fff}
.final .btn:hover{background:#c9a6e2;border-color:#c9a6e2;color:var(--plum-dk)}
.final--media{display:grid;grid-template-columns:.8fr 1.2fr;gap:40px;align-items:center;
  text-align:left;padding:50px 44px}
/* 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 18px 36px 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-size:2rem;color:#c9a6e2;margin:.2em 0 .7em}
.rel{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rel a{display:block;background:var(--card);border:1px solid var(--line);
  border-top:3px solid var(--purple);border-radius:0 0 4px 4px;padding:20px 22px;
  transition:border-color .2s var(--ease)}
.rel a:hover{border-color:var(--purple-line);border-top-color:var(--purple-dk);text-decoration:none}
.rel b{display:block;font-family:var(--display);font-size:1.05rem;color:var(--ink);margin-bottom:.3em}
.rel span{font-size:.88rem;color:var(--muted)}
.crumbs{font-size:0.9062rem;color:var(--faint);padding:16px 0 0}
.crumbs a{color:var(--muted)}
.legal h2{font-size:1.45rem;margin-top:1.6em}
.legal h3{font-size:1.12rem;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 — a dark index-style link wall: every page on the site, in four
   dense columns, set as an index rather than a curated menu.
   ========================================================================== */
footer{background:var(--ink-dk);color:#a89dbb;padding:60px 0 92px;font-size:.9rem}
footer a{color:#cfc4de}
footer a:hover{color:#fff}
footer b,footer strong{color:#fff}
.fhead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  flex-wrap:wrap;border-bottom:1px solid rgba(255,255,255,.16);padding-bottom:26px;margin-bottom:30px}
.fbrand{display:inline-flex;align-items:center;gap:0;font-family:var(--display);
  font-size:1.9rem;color:#fff;letter-spacing:-.03em}
.fbrand span{color:#c9a6e2}
.fbrand svg{width:34px;height:34px;flex:none;margin-right:10px}
.fintro{color:#a89dbb;max-width:52ch;margin:0;font-size:.9rem}
.fwall{display:grid;grid-template-columns:repeat(4,1fr);gap:30px 26px}
.fwall h4{font-family:var(--sans);font-weight:700;font-size:.71rem;letter-spacing:.14em;
  text-transform:uppercase;color:#c9a6e2;margin:0 0 1em}
.fwall ul{list-style:none;margin:0;padding:0;display:grid;gap:.55em;font-size:.88rem}
.fbadges{display:flex;gap:9px;flex-wrap:wrap;margin-top:30px}
.fbadges img{width:44px;height:44px;object-fit:contain;background:#fff;border-radius:4px;padding:4px}
.fnap{margin-top:30px;border-top:1px solid rgba(255,255,255,.16);padding-top:26px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;line-height:1.7;font-size:0.9062rem}
.fnap b{display:block;color:#fff;font-size:0.9062rem;letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:.25em}
.fpay{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.16);margin-top:28px;padding-top:24px}
.fpay img{height:26px}
.fpay span{font-size:0.9062rem;color:#a89dbb}
.disc{border-top:1px solid rgba(255,255,255,.16);margin-top:24px;padding-top:24px;display:grid;gap:.8em}
.disc p{margin:0;font-size:1.062rem;color:#8f849f;line-height:1.62}
.disc b{color:#bdb2ce}
.disc .copy{margin-top:.6em;color:#a89dbb}
.totop{position:fixed;right:18px;bottom:86px;z-index:65;width:46px;height:46px;border:0;
  border-radius:3px;background:var(--purple);color:#fff;font-size:1.1rem;cursor:pointer;
  opacity:0;visibility:hidden;transition:.22s var(--ease)}
.totop.show{opacity:1;visibility:visible}
.totop:hover{background:var(--purple-dk)}

@media(max-width:900px){.fwall{grid-template-columns:repeat(2,1fr)}
  .fnap{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.fwall{grid-template-columns:1fr}.fnap{grid-template-columns:1fr}}

/* ---- motion: staggered reveal, no movement on the hero itself ---- */
[data-reveal]{opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal]:nth-child(2){transition-delay:.07s}
[data-reveal]:nth-child(3){transition-delay:.14s}
[data-reveal]:nth-child(4){transition-delay:.21s}
[data-reveal]:nth-child(5){transition-delay:.28s}
[data-reveal]:nth-child(6){transition-delay:.35s}

/* ---- responsive ---- */
@media(max-width:980px){
  .hero__grid{display:flex;flex-direction:column;gap:30px}
  .hero__media{max-width:390px;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}
  .hero .hero__rating{order:7}
  .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:30px}
  .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:26px;padding:40px 26px}
  .final--media h2{text-align:center}
  .final--media p{margin-inline:auto}
  /* stacked pricing leads with the best value */
  .pricing{max-width:430px;margin-inline:auto}
  .pricing .tier:nth-child(1){order:3}
  .pricing .tier:nth-child(2){order:1}
  .pricing .tier:nth-child(3){order:2}
}
@media(max-width:700px){.g2,.g3,.g4{grid-template-columns:1fr}}
@media(max-width:560px){
  body{font-size:16px}
  .sec,.section{padding:56px 0}
  .badgewall,.gallery,.ingthumbs{grid-template-columns:repeat(2,1fr)}
  .form__row{grid-template-columns:1fr}
  .formcard{padding:22px 20px}
  .final{padding:38px 22px}
  .gallery figure:last-child{display:none}
  .totop{right:12px;bottom:78px;width:42px;height:42px}
  .ing{padding-left:18px}
}
@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:24px;margin-top:36px}
.shots figure{margin:0;background:var(--card);border:1px solid var(--line);
  border-top:3px solid var(--purple);border-radius:0 0 5px 5px;overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .2s var(--ease)}
.shots figure:hover{border-color:var(--purple-line);border-top-color:var(--purple-dk)}
.shots img{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--tint)}
.shots figcaption{padding:22px 24px}
.shots figcaption b{display:block;font-family:var(--display);font-weight:700;font-size:1.12rem;
  color:var(--ink);margin-bottom:.4em;line-height:1.25}
.shots figcaption p{margin:0;color:var(--muted);font-size:.94rem}
.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:14px;
  padding:22px 26px;margin:0 0 2.2em}
.toc h2{font-family:var(--display);font-size:.76rem!important;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--purple-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(--purple);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:14px;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(--purple-lt);border:1px solid var(--purple-line);
  border-left:4px solid var(--purple);border-radius:0 14px 14px 0;padding:22px 26px;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:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--purple-dk);margin-bottom:1em}
.keypoints ul{margin:0;padding-left:1.2em;display:grid;gap:.5em}
.keypoints li b{color:var(--plum)}

/* 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:24px}
.posts article{background:var(--card);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sh-2)}
.posts img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:center 38%;
  background:var(--tint)}
.posts .pbody{padding:22px 24px;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(--purple)}
.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}

/* 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(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*/
/* ==========================================================================
   memozpezil.com HOME PAGE -- design slot "trace".  PAINT HALF.
   radius, shade, gradient, transform, transition and one hero motif.
   Nothing in this block moves a box, so it needs only a restamp.

   SCOPE  every rule is prefixed body:has(.hero).  class="hero" is on
          index.html and on no other page of this site, so #pricing, .card,
          the header, the buy bar and the footer keep their built appearance
          on pricing.html, the legal pages and the blog.
   RANK   modern_surface.py and footer_type.py re-append their own blocks
          AFTER this one on every build.  These rules therefore out-rank a
          bare .card / .tier / .answer on specificity (0,2,1 against 0,1,0)
          rather than relying on source order.
   ========================================================================== */
:root{
  --mz-rcard:28px;   /* slot radius_card    */
  --mz-rctl:18px;    /* slot radius_control -- the 4px button was the dated tell */
  /* slot depth, "hard short offset, architectural": one hard contact stop at
     zero blur plus one wide ambient stop, both tinted with this site's own
     ink (30,23,40) and its plum (20,6,32), never neutral black. */
  --mz-d1:0 3px 0 rgba(30,23,40,.08),0 14px 24px -14px rgba(30,23,40,.32);
  --mz-d2:0 5px 0 rgba(30,23,40,.11),0 22px 38px -16px rgba(30,23,40,.40);
  --mz-dark1:0 3px 0 rgba(20,6,32,.42),0 16px 28px -14px rgba(20,6,32,.65);
  --mz-dark2:0 5px 0 rgba(20,6,32,.48),0 24px 38px -16px rgba(20,6,32,.70);
}

/* ---- surfaces -------------------------------------------------------- */
body:has(.hero) .card,
body:has(.hero) .tier,
body:has(.hero) .tcard,
body:has(.hero) .callout,
body:has(.hero) .alert,
body:has(.hero) .keypoints,
body:has(.hero) .final,
body:has(.hero) .byline,
body:has(.hero) .tablewrap,
body:has(.hero) .qa,
body:has(.hero) .shots figure{border-radius:var(--mz-rcard);box-shadow:var(--mz-d1)}
body:has(.hero) .stats{border-radius:var(--mz-rcard);overflow:hidden;box-shadow:var(--mz-d1)}
body:has(.hero) .ingthumb img{border-radius:var(--mz-rctl)}
body:has(.hero) .card .ic{border-radius:14px}
body:has(.hero) .dist .bar{border-radius:999px;overflow:hidden}
/* the two left-accent panels keep their flat edge; only the free corners round */
body:has(.hero) .guarantee,
body:has(.hero) .sec .answer{border-radius:0 var(--mz-rcard) var(--mz-rcard) 0;box-shadow:var(--mz-d1)}
/* in the hero the answer is not a card at all -- keep it flat */
body:has(.hero) .hero .answer{box-shadow:none}

/* ---- controls -------------------------------------------------------- */
body:has(.hero) .btn{border-radius:var(--mz-rctl);
  transition:background-color .2s var(--ease),background-image .2s var(--ease),
    color .2s var(--ease),border-color .2s var(--ease),
    box-shadow .22s var(--ease),transform .22s var(--ease)}
/* the buying CTA carries the gradient; the ghost and the ink button beside it
   stay flat, so each pair reads as two weights rather than as two buttons. */
body:has(.hero) .btn--cta{background-image:linear-gradient(135deg,#7e37ab 0,#6a2c91 46%,#4a1868 100%);box-shadow:var(--mz-d1)}
body:has(.hero) .btn--cta:hover{background-image:linear-gradient(135deg,#6a2c91 0,#521f72 46%,#3b1256 100%)}
/* on the dark band the strongest weight is white, so the hero CTA takes the
   light end of the same gradient rather than the purple one. */
body:has(.hero) .hero .btn--cta{background-image:linear-gradient(135deg,#fff 0,#f5eefb 50%,#dcc6ef 100%);box-shadow:var(--mz-dark1)}
body:has(.hero) .hero .btn--cta:hover{background-image:linear-gradient(135deg,#fff 0,#e7d6f5 55%,#c9a6e2 100%)}
body:has(.hero) .btn--ghost,
body:has(.hero) .btn--ink{background-image:none}
body:has(.hero) .btn:hover{transform:translateY(-2px);box-shadow:var(--mz-d2)}
body:has(.hero) .hero .btn:hover{box-shadow:var(--mz-dark2)}
body:has(.hero) .btn:focus-visible{outline:3px solid #c9a6e2;outline-offset:3px}
body:has(.hero) .menu a:focus-visible,
body:has(.hero) .faq summary:focus-visible{outline:3px solid var(--purple);outline-offset:3px;border-radius:6px}
body:has(.hero) .totop{border-radius:999px;box-shadow:var(--mz-d2)}
body:has(.hero) .buybar{box-shadow:0 -12px 34px -20px rgba(0,0,0,.75)}

/* ---- chips ----------------------------------------------------------- */
body:has(.hero) .pill,
body:has(.hero) .factpills li,
body:has(.hero) .tier__ship{border-radius:999px}
body:has(.hero) .ticks .ck{border-radius:999px;background:rgba(201,166,226,.24)}
body:has(.hero) .floaty{border-radius:var(--mz-rctl);box-shadow:var(--mz-dark1)}
body:has(.hero) .figures div{border-radius:var(--mz-rctl)}

/* ---- the hero product card ------------------------------------------- */
body:has(.hero) .hero__stick{border-radius:var(--mz-rcard);z-index:2;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
  border-color:rgba(255,255,255,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 3px 0 rgba(20,6,32,.35),
    0 28px 46px -24px rgba(0,0,0,.70)}

/* ---- hero motif: slot family "trace" ---------------------------------
   A single line travels the ring that frames the bottle, brightens as it
   comes round and releases.  It lives on the MEDIA COLUMN's pseudo-elements,
   never on the <img> -- that is the LCP element and is preloaded.  The ring
   is min(780px,136%) across, larger than the 505x642 product card, so it
   reads outside the card instead of vanishing behind it.  38s and 46s,
   because this is a capsule taken every morning for weeks.
   Keyframe names are new; this stylesheet already owns btVeil.
   right/bottom are reset explicitly: the block this replaces sets inset:-4%,
   and a left+right+width or top+bottom+auto-height element would ignore the
   aspect-ratio and come out as an oval. */
body:has(.hero) .hero__media::before,
body:has(.hero) .hero__media::after{
  content:"";position:absolute;left:50%;top:50%;right:auto;bottom:auto;
  translate:-50% -50%;width:min(780px,136%);aspect-ratio:1;
  border-radius:50%;pointer-events:none;z-index:0;filter:none}
body:has(.hero) .hero__media::before{
  background:none;border:1px solid rgba(201,166,226,.20);
  animation:mzTraceRail 46s var(--ease) infinite}
body:has(.hero) .hero__media::after{
  background:conic-gradient(from 0deg,rgba(201,166,226,0) 0 58%,
    rgba(201,166,226,.45) 78%,rgba(255,255,255,.85) 88%,rgba(201,166,226,0) 94%);
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
  mask:radial-gradient(closest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
  animation:mzTraceRun 38s linear infinite}
@keyframes mzTraceRail{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.035);opacity:1}}
@keyframes mzTraceRun{0%{transform:rotate(0deg);opacity:.14}
  38%{opacity:.90}72%{opacity:.12}100%{transform:rotate(360deg);opacity:.14}}
/* below 981px the phone rules set .hero__media{position:static}, which would
   hand the ring the whole hero as its containing block and centre it on the
   page.  position:relative with no offsets moves nothing and puts it back. */
@media(max-width:980px){
  body:has(.hero) .hero__media{position:relative}
  body:has(.hero) .hero__media::before,
  body:has(.hero) .hero__media::after{width:min(430px,118%)}
}
@media(prefers-reduced-motion:reduce){
  body:has(.hero) .hero__media::before,
  body:has(.hero) .hero__media::after{animation:none;opacity:.45}
  body:has(.hero) .btn:hover{transform:none}
}

/* ---- pricing: slot ribbon "corner flag" ------------------------------ */
body:has(.hero) .tier--feature{
  background:linear-gradient(180deg,#faf6fd 0,#fff 46%);
  border-color:var(--purple);
  box-shadow:0 4px 0 rgba(106,44,145,.18),0 26px 44px -20px rgba(66,21,92,.45)}
body:has(.hero) .tier__flag{
  top:-15px;left:auto;right:-10px;transform:none;
  border-radius:var(--mz-rctl) var(--mz-rctl) var(--mz-rctl) 4px;
  box-shadow:0 3px 0 rgba(30,23,40,.14)}
/* the fold that makes it a flag rather than a label */
body:has(.hero) .tier__flag::after{content:"";position:absolute;top:100%;right:0;
  width:0;height:0;border:7px solid transparent;border-right-width:0;
  border-top-color:#0f0a18;opacity:.55}
body:has(.hero) .tier--feature .tier__flag{
  background-image:linear-gradient(135deg,#8a3cb9 0,#6a2c91 55%,#4a1868 100%)}
body:has(.hero) .tier--feature .tier__flag::after{border-top-color:#3b1256;opacity:1}
body:has(.hero) .tier:hover{box-shadow:var(--mz-d2);border-color:var(--purple-line)}
body:has(.hero) .tier--feature:hover{border-color:var(--purple);
  box-shadow:0 5px 0 rgba(106,44,145,.22),0 30px 50px -20px rgba(66,21,92,.50)}
/*!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 .fintro{font-size:16px}
footer .fnap{font-size:16px}
footer .fnap b{font-size:16px}
footer .fpay span{font-size:16px}
footer .fwall h4{font-size:15px}
footer .fwall ul{font-size:16px}
/* ==== end footer type floor ==== */

/* ==== modern surface (modern_surface.py) ==== */
/* House rule 11. This stylesheet had 19 box-shadow declaration(s)
   and 3 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 (30,23,40), not neutral black.

   Paint only: border-radius, box-shadow and transform change no
   geometry, so this is safe below the critical marker and needs a
   restamp rather than a rebuild. */
:root{
  --radius:16px;
  --shadow:0 1px 2px rgba(30,23,40,.06), 0 6px 18px rgba(30,23,40,.07);
  --lift:0 2px 6px rgba(30,23,40,.09), 0 16px 34px rgba(30,23,40,.14);
}

/* These panels declared no radius of their own, so raising
   the token alone left them square. House rule 11 is a
   floor: it outranks a slot that chose square corners. */
.card,
.keypoints,
.callout,
.alert,
.byline,
.shots figure,
.badgewall figure,
.tablewrap,
.faq,
.final,
.answer,
.tier,
.article figure{border-radius:var(--radius)}

/* A surface a reader can click answers the pointer. 2px
   registers without reflowing the row beside it. */
.rel a,
.posts article,
.shots figure,
.card--pack,
.badgewall figure,
.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}