:root{
  /* ---- ground: deep bronze-tinted grey, the assigned slot for row 341 ----
     Warm, not neutral: every step of the ramp carries the same bronze cast,
     which is what separates this dark site from the estate's one graphite
     dark site. Sampled alongside the gold on the MemoHive bottle rather than
     mixed toward brown from a grey. ---- */
  --paper:#1e1a15;
  --paper-tint:#252019;
  --paper-card:#2b2419;
  --paper-deep:#14110c;
  --dark:#1e1a15;
  --dark-2:#2a2318;
  --on-dark:#f7f0e3;

  /* ---- ink. There is no light panel anywhere on this site, so one ink set
         serves the whole page and no component needs a second variant. ---- */
  --ink:#f7f0e3;
  --ink-soft:#e5dac6;
  --muted:#cabca4;
  --faint:#a99a80;
  --line:#3a3125;
  --line-soft:#2b241a;
  --edge-bright:#8a7448;
  --panel:#272016;
  --panel-2:#2f271b;

  /* ---- accent: the gold on the MemoHive label ----
     Sampled from memohive-tall-neutral-product-1-bottle.webp. The wordmark,
     the hexagon around the bee and the rule under PREMIUM FORMULA all sit in
     the same ramp: highlight #cca86c, body #b48a4e, shadow #846024. --accent
     is the mid tone, --accent-on is the shade that reads as TEXT on bronze
     (8.99:1), --accent-deep is the button fill. ---- */
  --accent:#c9a24e;
  --accent-deep:#9a7326;
  --accent-on:#dcb768;
  --accent-tint:#2a2214;
  --accent-edge:#4d3d1e;
  --accent-glow:rgba(201,162,78,.28);

  /* ---- navy: the label field itself, the second colour on the bottle ----
     Used for the cool half of the page: safety notes, flags, the tick glyph,
     the bar fills. It keeps the warnings visually separate from the selling
     surfaces without introducing a colour the product does not own. ---- */
  --navy:#0b1020;
  --navy-2:#16203a;
  --navy-on:#8fb6d8;
  --navy-edge:#26365c;

  /* ---- type: Philosopher / Pontano Sans (batch9_assignments.py, row 341) */
  --display:'Philosopher',Georgia,'Times New Roman',serif;
  --serif:'Philosopher',Georgia,'Times New Roman',serif;
  --sans:'Pontano Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* ---- metrics ---- */
  --wrap:1180px;
  --banner:1380px;
  --measure:770px;
  --measure-wide:990px;
  --r:12px;
  --r-s:7px;
  --r-l:22px;
  --radius:12px;
  --figw:440px;
  --navh:74px;
  --hexclip:polygon(50% 0%,94% 25%,94% 75%,50% 100%,6% 75%,6% 25%);
  --shadow:0 18px 44px rgba(0,0,0,.50);
  --shadow-sm:0 4px 16px rgba(0,0,0,.36);
  --shadow-lg:0 30px 70px rgba(0,0,0,.60);
}

/* ==========================================================================
   Gomemohive - gomemohive.com                    design slot: batch 9, row 341

   ground   deep bronze-tinted grey (dark-first)
   fonts    Philosopher / Pontano Sans
   header   a single row of destinations with the name interrupting it mid-way
   footer   a closing band whose seals are inset into the top edge of a slab
   motif    focus / hive-cell          mark  hex / comb

   THREE THINGS THIS SHEET DOES DIFFERENTLY, AND WHY
   -------------------------------------------------
   1. THE NAV IS ONE ROW WITH THE NAME INSIDE IT. `.navmenus` is
      `display:contents` above 1180px, so the two `<ul>` halves become direct
      flex children of `.nav__row` and `order` can drop `.brand` between them.
      The alternative - putting the mark inside the menu markup - hides the
      wordmark the moment the menu collapses to a dropdown, which is the one
      element that must survive that collapse.
   2. THE SEALS STRADDLE THE FOOTER'S TOP EDGE. `.fseals` carries a negative
      top margin equal to half a seal, and the section above it reserves that
      space in its own bottom padding, so nothing overlaps text.
   3. NO LIGHT PANEL ANYWHERE. Body copy runs at 9.2:1 on the base ground and
      8.6:1 on a card, so the whole 5,000-word page can stay on the bronze
      without a bone band to rest on. That also means no component here needs
      a second colour variant.

   Colour is from the product bottle, never from a reference site: the label
   field is near-black navy and everything printed on it is gold.
   ========================================================================== */

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

.skip{position:absolute;left:-9999px;top:0;background:var(--accent-deep);color:#1a1509;
  padding:10px 16px;z-index:9999;border-radius:0 0 var(--r) 0;font-weight:700}
.skip:focus{left:0}

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

/* --- 1. THE TOPLINE STRIP -------------------------------------------------
   Role, lot, dose and count, guarantee, order phone. Five facts a buyer wants
   before they read anything, in one line above the navigation, so the menu
   does not have to carry any of them. It is the first thing painted, so it
   lives ABOVE the critical marker - appended below it, it loads async and
   flashes unstyled at the very top of the page. */
.util{background:var(--paper-deep);color:var(--ink-soft);font-size:.9375rem;
  border-bottom:1px solid var(--accent-edge)}
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;
  padding-block:8px}
.util__item{white-space:nowrap;padding-inline:15px;
  border-left:1px solid var(--line)}
.util__item:first-child{padding-left:0;border-left:0}
.util__item b{color:var(--accent-on);font-weight:700}
.util__tel{margin-left:auto;color:var(--ink);font-weight:700;
  white-space:nowrap;padding-left:15px}
@media(max-width:1040px){.util__item:nth-child(3){display:none}}
@media(max-width:880px){.util__item:nth-child(2){display:none}}

/* --- 2. THE HEADER: one row of destinations, the name interrupting it ------
   Three destinations, the identity, four destinations, then the order button.
   The links are divided by hairlines rather than by gaps so the row reads as
   one continuous index that the name breaks into, and the identity carries a
   taller rule on each side to mark the interruption.

   The bar uses the BANNER width, not the content wrap: seven links, a
   two-line identity and a block CTA need about 1,120px and `.wrap` only ever
   offers 1,136 inside its gutters, so the row would sit one bad font metric
   from wrapping at every desktop width (pitfall 16). Nothing in it may wrap.
   It SHEDS instead: the links tighten at 1320, the identity loses its sub
   label at 1240, the whole index becomes a dropdown at 1180, the CTA at 430.

   `.navmenus{display:contents}` is what lets `order` place `.brand` between
   the two halves while the mark itself stays a direct child of the row - so
   when the index collapses into a panel below the bar, the wordmark is still
   on screen where it belongs. */
.nav{position:sticky;top:0;z-index:900;background:var(--paper-tint);
  border-bottom:1px solid var(--line)}
.nav .wrap{max-width:var(--banner)}
.nav__row{display:flex;align-items:stretch;gap:0;padding-block:9px;
  flex-wrap:nowrap;position:relative}
.navmenus{display:contents}
.menu{display:flex;align-items:stretch;flex-wrap:nowrap}
.menu li{flex:none;display:flex}
.menu li+li{border-left:1px solid var(--line-soft)}
.menu a{display:flex;align-items:center;font-family:var(--sans);font-size:.9375rem;
  font-weight:600;color:var(--ink-soft);white-space:nowrap;padding:8px 15px}
.menu a:hover,.menu a[aria-current]{color:var(--accent-on);text-decoration:none}
.menu--a{order:1;margin-right:auto}
.menu--b{order:3;margin-left:auto}
.brand{order:2;display:inline-flex;align-items:center;gap:0;flex:none;
  color:var(--ink);padding-inline:22px;
  border-inline:2px solid var(--accent-edge)}
.brand:hover{text-decoration:none}
.brand svg{width:34px;height:34px;margin-right:11px;flex:none}
.brand__t{display:flex;flex-direction:column;line-height:1.06}
.brand__prod{font-family:var(--display);font-size:1.42rem;font-weight:700;
  color:var(--ink);letter-spacing:.005em;white-space:nowrap}
.brand__prod span{color:var(--accent-on)}
.brand__firm{font-family:var(--sans);font-size:.75rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-top:3px;
  white-space:nowrap}
.nav__cta{order:4;flex:none;display:flex;align-items:center;padding-left:18px}
.burger{display:none;background:var(--panel);border:1px solid var(--line);cursor:pointer;
  width:44px;height:44px;padding:10px;flex:none;border-radius:var(--r-s);order:5;
  align-self:center;margin-left:14px}
.burger span{display:block;height:2px;background:var(--ink);margin:4px 0;border-radius:2px}

/* --- 3. BUTTONS ----------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--sans);font-weight:700;font-size:1rem;line-height:1.2;
  padding:14px 24px;border-radius:var(--r-s);border:2px solid transparent;
  cursor:pointer;text-align:center;letter-spacing:.03em;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn--cta{background:var(--accent);color:#231b09;box-shadow:0 10px 26px var(--accent-glow)}
.btn--cta:hover{background:var(--accent-on);color:#231b09}
/* --line is 1.65:1 against the bronze ground, which is a hairline and not a
   button: the secondary hero CTA read as plain text. --edge-bright is 3.85:1,
   the floor for a non-text UI boundary. */
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--edge-bright)}
.btn--ghost:hover{border-color:var(--accent-on);color:var(--accent-on)}
.btn--lg{padding:17px 30px;font-size:1.05rem}
.btn--block{display:flex;width:100%}

/* --- 4. THE HERO: copy left, the bottle right in a sticky column ----------
   Two columns, so the H1 sits directly under the eyebrow and lands at roughly
   y=180 on a 1440x900 screen with its whole box above the fold. A centred or
   stacked arrangement buries it (pitfall 103), and a design slot never buys
   that.

   The motion is written by hero_motifs.py onto `.hero__media::before` and
   `::after` and by the stage block below onto `.hero__stick`. Nothing here
   animates the `<img>` - it is the LCP element and it is preloaded - and
   nothing animates the H1. */
.hero{position:relative;overflow-x:clip;overflow-y:visible;
  background:var(--paper);color:var(--on-dark);
  border-bottom:1px solid var(--accent-edge)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:44px;align-items:center;padding-block:44px 54px;position:relative;z-index:2}
.hero__copy{display:block;position:relative;z-index:3}
.hero h1{font-size:clamp(2rem,3.5vw,2.95rem);margin:14px 0 0;font-weight:700;
  line-height:1.12;letter-spacing:-.008em;color:var(--ink)}
.hero h1 span{color:var(--accent-on)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 0}
.hero__media{position:relative;display:flex;align-items:center;justify-content:center}
.hero__stick{position:relative;display:block;width:100%;isolation:isolate}
.hero__card{position:relative;text-align:center;padding:0;z-index:2}
.hero__card img{margin-inline:auto;max-width:100%;position:relative;z-index:3;
  filter:drop-shadow(0 30px 44px rgba(0,0,0,.70))}
.hero__tag{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);z-index:4;
  background:var(--panel);color:var(--ink-soft);font-size:.9375rem;font-weight:700;
  letter-spacing:.05em;padding:7px 16px;border-radius:999px;white-space:nowrap;
  border:1px solid var(--accent-edge)}
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--accent-tint);
  border:1px solid var(--accent-edge);color:var(--accent-on);font-weight:700;
  font-size:.875rem;padding:7px 16px;border-radius:999px;letter-spacing:.06em;
  text-transform:uppercase}
.pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}

/* --- 5. QUICK ANSWER (AEO) ------------------------------------------------ */
.answer{background:var(--panel);border-left:5px solid var(--accent);
  border-radius:0 var(--r) var(--r) 0;box-shadow:var(--shadow-sm);padding:22px 26px;
  margin:22px 0 0;max-width:var(--measure-wide);color:var(--muted)}
.answer .qtag{display:block;font-family:var(--sans);font-weight:700;font-size:.875rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent-on);margin-bottom:.5em}
.answer p{margin:0;font-size:1.0625rem;color:var(--ink-soft)}
.answer p+p{margin-top:.7em;color:var(--muted)}
.hero .answer p{font-size:1.09rem;line-height:1.68}

.ticks{margin:24px 0 0;display:grid;gap:10px;max-width:var(--measure-wide)}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-size:1rem;
  color:var(--ink-soft)}
/* The tick glyph is a hive cell, like the bullet, the step number and the
   perk mark. One shape, used at five sizes, is what stops the hexagon reading
   as a hero-only decoration. */
.ck{flex:none;width:23px;height:23px;clip-path:var(--hexclip);background:var(--accent);
  color:#231b09;display:inline-flex;align-items:center;justify-content:center;
  font-size:.78rem;font-weight:700;margin-top:3px}
.pay{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:20px 0 0;
  font-size:.9375rem;color:var(--faint)}
.pay img{width:196px;height:29px;object-fit:contain}
.hero__sub{margin:18px 0 0;font-size:1rem;color:var(--muted)}
.factpills{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.factpills li{background:var(--panel);border:1px solid var(--line);border-radius:999px;
  padding:6px 14px;font-size:.9375rem;color:var(--muted)}
.factpills li b{color:var(--ink)}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
  margin:20px 0 0;max-width:660px}
.figures div{background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--accent);border-radius:var(--r-s);padding:14px 16px}
.figures b{display:block;font-family:var(--display);font-size:1.62rem;font-weight:700;
  color:var(--ink);line-height:1.05}
.figures span{display:block;margin-top:6px;font-size:.9375rem;color:var(--faint)}
.floaty{position:absolute;background:var(--panel);border:1px solid var(--accent-edge);
  border-radius:var(--r);padding:11px 15px;box-shadow:var(--shadow-lg);
  font-family:var(--display);font-size:1rem;font-weight:700;color:var(--ink);z-index:5;
  line-height:1.15}
.floaty small{display:block;color:var(--accent-on);font-family:var(--sans);
  font-size:.9375rem;font-weight:700;margin-top:3px}
.floaty--tl{top:6px;left:-10px}
.floaty--br{bottom:22px;right:-10px}

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

/* --- ABOVE-THE-FOLD RESPONSIVE -------------------------------------------
   The nav shed and the hero's phone stacking decide the first paint, so they
   sit above the critical marker and are inlined into every page head. */
@media(max-width:1320px){.menu a{padding-inline:11px;font-size:.9063rem}
  .brand{padding-inline:15px}}
@media(max-width:1240px){.brand__firm{display:none}}
@media(max-width:1180px){
  .burger{display:block}
  .navmenus{display:none;position:absolute;top:calc(100% + 11px);left:0;right:0;
    flex-direction:column;align-items:stretch;background:var(--panel);
    border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;
    box-shadow:var(--shadow);max-height:76vh;overflow-y:auto;z-index:20}
  .navmenus.open{display:flex}
  .menu{flex-direction:column;align-items:stretch}
  .menu--a,.menu--b{margin:0}
  .menu li+li{border-left:0}
  .menu a{display:block;padding:13px 22px;font-size:1rem;
    border-bottom:1px solid var(--line-soft)}
  .nav__row{align-items:center}
  .brand{order:0;margin-right:auto;border-inline:0;padding-inline:0}
  .brand__firm{display:block}
  .nav__cta{order:1;padding-left:0}
}
@media(max-width:980px){
  .hero__grid{grid-template-columns:1fr;gap:14px;padding-block:28px 40px}
  /* display:contents turns nine children into nine grid items, so every
     margin-top they carry is added ON TOP of eight grid gaps. Left alone that
     was 124px of doubled spacing and it put the CTA at y=1288 on a 390x844
     phone. The gap is the separation here; the margins are not. */
  .hero__copy>.answer,.hero__copy>.ticks,.hero__copy>.hero__cta,
  .hero__copy>.pay,.hero__copy>.hero__sub,.hero__copy>.factpills,
  .hero__copy>.figures{margin-top:0}
  /* display:contents promotes the copy column's children to grid items so the
     phone order can be set one by one. DOM order is untouched: the Quick
     Answer still follows the H1 for parsers and for the speakable selector. */
  .hero__copy{display:contents}
  .hero__copy>.eyebrow{order:1;justify-self:start}
  .hero__copy>h1{order:2}
  .hero__media{order:3}
  .hero__copy>.answer{order:4}
  .hero__copy>.hero__cta{order:5}
  .hero__copy>.ticks{order:6}
  .hero__copy>.pay{order:7}
  .hero__copy>.hero__sub{order:8}
  .hero__copy>.factpills{order:10}
  .hero__copy>.figures{order:11}
  .hero__card img{max-width:330px;margin-inline:auto}
  .floaty{display:none}
}
@media(max-width:700px){
  .hero h1{font-size:2rem}
  /* 240px, measured rather than chosen: at 270 the bottle pushed the Quick
     Answer to y=938 on a 390x844 phone, where the house target is ~850. */
  .hero__card img{max-width:240px}
  .figures{grid-template-columns:1fr}
}
@media(max-width:430px){
  .nav__cta{display:none}
  .hero h1{font-size:1.88rem}
}


/* ---- hero motif -- hive-cell ---------------------------------------- */
.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(162deg,#1e1a15,#3d321f 52%,#1e1a15)}.hero__media::before{content:'';position:absolute;inset:-8% -12%;z-index:1;pointer-events:none;opacity:.55;background-image:radial-gradient(circle,rgba(201,162,78,0.40) 2.4px,transparent 3px);background-size:54px 62px;-webkit-mask-image:radial-gradient(closest-side,#000 26%,transparent 76%);mask-image:radial-gradient(closest-side,#000 26%,transparent 76%);animation:mhCells 7s steps(6,end) infinite}.hero__media::after{content:'';position:absolute;left:48%;top:50%;width:88%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;z-index:0;pointer-events:none;background:radial-gradient(closest-side,rgba(201,162,78,0.18),transparent 72%);animation:mhWarm 7s ease-in-out infinite}@keyframes mhCells{to{background-position:0 -62px}}@keyframes mhWarm{0%,100%{opacity:.4}50%{opacity:.85}}
@media(prefers-reduced-motion:reduce){.hero__card{animation:none!important}.hero__media::before,.hero__media::after{animation:none!important;opacity:0!important}}

/* --- hero responsive rules, copied into the critical block
   A phone painted the desktop hero from the inline block and then
   jumped when the async sheet arrived -- 692px on one site, CLS 0.95.
   These are COPIES: the originals stay below, so the cascade is
   unchanged and the first paint is already correct. */
@media (min-width: 981px){
  .hero__media{position: sticky; top: calc(var(--navh, 88px) + 14px); align-self: start; min-height: calc(100vh - var(--navh, 88px) - 28px); min-height: calc(100svh - var(--navh, 88px) - 28px); display: flex; flex-direction: column; align-items: center; justify-content: center;}
}
@media (prefers-reduced-motion: reduce){
  .hero__media{position: relative; top: 0; min-height: 0;}
}

/*!CRITICAL-END*/

/* --- 7. THE HERO STAGE: hexagon cells ticking around the bottle -----------
   hero_motifs.py paints the GROUND and the field of cells across the media
   column. This paints the cell the bottle stands in: one hexagon plate behind
   it and one hexagon ring outside it, both rotating by sixty degrees in six
   discrete steps. A hexagon turned sixty degrees is the same hexagon, so the
   loop is seamless and what the eye reads is a TICK rather than a spin, which
   is what the motif family is for.

   Both layers hang off `.hero__stick`, which has pseudo-elements of its own
   free: `.hero__media`'s two belong to hero_motifs.py. `.hero__stick` keeps
   `position:relative` unconditionally, so the percentage sizes below always
   resolve against the product column and never re-parent to something wider
   (pitfall 107). Nothing here sets position on `.hero__media` and nothing
   makes an ancestor a scroll container: either one silently kills the sticky
   product column (pitfall 65).

   Transform and opacity only, so both layers composite on the GPU and never
   trigger layout. Both are pointer-events:none and sit under the bottle. */
.hero__stick::before{content:"";position:absolute;left:50%;top:50%;width:84%;
  aspect-ratio:1;translate:-50% -50%;z-index:0;pointer-events:none;
  clip-path:var(--hexclip);
  background:linear-gradient(162deg,rgba(201,162,78,.20),rgba(201,162,78,.05) 58%,
    rgba(201,162,78,.12));
  animation:mhPlate 7s steps(6,end) infinite}
.hero__stick::after{content:"";position:absolute;left:50%;top:50%;width:116%;
  aspect-ratio:1;translate:-50% -50%;z-index:1;pointer-events:none;
  clip-path:var(--hexclip);
  background:radial-gradient(closest-side,transparent 68%,rgba(201,162,78,.34) 79%,
    transparent 93%);
  animation:mhRing 7s steps(6,end) infinite;animation-delay:.58s}
/* The float goes on the CARD, never on the <img>: the image is the LCP
   element and it is preloaded. The drop shadow travels with it, which is what
   a shadow would actually do. */
.hero__card{animation:mhLift 9s ease-in-out infinite}
@keyframes mhPlate{to{transform:rotate(60deg)}}
@keyframes mhRing{to{transform:rotate(-60deg)}}
@keyframes mhLift{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media(prefers-reduced-motion:reduce){
  .hero__stick::before,.hero__stick::after,.hero__card{animation:none!important}}

/* --- 8. SECTIONS AND THE THREE DEPTHS ------------------------------------- */
.sec{padding-block:70px}
.sec--tight{padding-block:40px}
.sec--slab{background:var(--paper-tint)}
.sec--deep{background:var(--paper-deep)}
.sec--center .sec__head{text-align:center;margin-inline:auto}
/* One band in the page carries the comb texture, so the hexagon reads as the
   brand's shape rather than as a hero-only decoration. */
.sec--comb{background:var(--paper-tint);position:relative;overflow:hidden}
.sec--comb::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(circle,rgba(201,162,78,.16) 1.6px,transparent 2.1px);
  background-size:46px 53px}
.sec--comb>.wrap{position:relative;z-index:1}

.sec__head{max-width:var(--measure-wide);margin-bottom:32px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);
  font-size:.875rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-on);margin-bottom:10px}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--accent)}
.sec h2{font-size:clamp(1.62rem,2.8vw,2.18rem);margin-bottom:12px}
.sec h3{font-size:1.18rem;margin-bottom:8px}
.lead{font-size:1.12rem;color:var(--muted)}
.note{font-size:.9375rem;color:var(--faint)}
.sec p+p,.sec p+ul,.sec p+ol,.sec ul+p,.sec ol+p{margin-top:1em}
.sec>.wrap>p,.sec>.wrap>h2,.sec>.wrap>h3,.sec>.wrap>h4,
.sec>.wrap>ul,.sec>.wrap>ol,.sec>.wrap>.sec__head,.sec>.wrap>.callout,
.sec>.wrap>.alert,.sec>.wrap>.byline,.sec>.wrap>.refs,.sec>.wrap>.answer,
.sec>.wrap>.pullquote,.sec>.wrap>blockquote{max-width:var(--measure);
  margin-inline:auto}
.sec>.wrap>.tablewrap,.sec>.wrap>.faq,.sec>.wrap>.steps,.sec>.wrap>.preclist{
  max-width:var(--measure-wide);margin-inline:auto}
.sec>.wrap>h1{max-width:var(--measure);margin-inline:auto;
  font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:700;letter-spacing:-.008em}
.sec>.wrap>.eyebrow{display:flex;max-width:var(--measure);margin-inline:auto}
.sec ul li{position:relative}
.sec>.wrap>ul>li,.preclist li{padding-left:26px;margin-bottom:.5em}
.sec>.wrap>ul>li::before,.preclist li::before{content:"";position:absolute;left:2px;
  top:.62em;width:11px;height:11px;background:var(--accent);
  clip-path:var(--hexclip)}
.preclist li{position:relative;font-size:1.0625rem}
.sec ol{counter-reset:n;display:grid;gap:11px}
.sec>.wrap>ol>li{position:relative;padding-left:38px;counter-increment:n}
.sec>.wrap>ol>li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;
  top:1px;width:28px;height:26px;color:var(--accent-on);font-size:1.0625rem;
  font-weight:700;display:flex;align-items:center;font-family:var(--display)}
.dropcap::first-letter{float:left;font-family:var(--display);font-size:3.5rem;
  line-height:.88;font-weight:700;color:var(--accent-on);padding:8px 14px 0 0}

.pullquote{border-left:3px solid var(--accent);padding:8px 0 8px 22px;margin:26px auto}
.pullquote p{font-family:var(--display);font-size:1.28rem;font-weight:700;color:var(--ink);
  line-height:1.42}
.pullquote cite{display:block;margin-top:9px;font-style:normal;font-size:.875rem;
  color:var(--faint);letter-spacing:.1em;text-transform:uppercase;font-weight:700}

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

/* --- 9. CARDS AND GRIDS --------------------------------------------------- */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:26px 24px;box-shadow:var(--shadow-sm);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--accent-edge)}
.card h3{font-size:1.14rem}
.card p{font-size:1.0625rem;color:var(--muted)}
.card p+p{margin-top:.8em}

.steps{display:grid;gap:14px;counter-reset:s}
.step{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 26px 24px 80px;position:relative;box-shadow:var(--shadow-sm);
  counter-increment:s}
.step__n{position:absolute;left:22px;top:22px;width:40px;height:40px;
  background:var(--accent);color:#231b09;display:flex;align-items:center;
  justify-content:center;font-family:var(--display);font-weight:700;font-size:1rem;
  clip-path:var(--hexclip)}
.step__n::before{content:counter(s,decimal-leading-zero)}
.step h3{font-size:1.12rem}
.step p{font-size:1.0625rem;color:var(--muted)}

.chips{display:grid;gap:10px;margin:18px 0 0}
.chips li{display:flex;gap:11px;align-items:flex-start;font-size:1rem}
.chips .ck{background:var(--navy-2);color:var(--navy-on);border:1px solid var(--navy-edge)}

.callout{background:var(--accent-tint);border-left:5px solid var(--accent);
  border-radius:0 var(--r) var(--r) 0;padding:18px 24px;margin:24px auto;
  font-size:1.0625rem}
.callout p+p{margin-top:.8em}
.alert{background:var(--navy-2);border-left:5px solid var(--navy-on);
  border-radius:0 var(--r) var(--r) 0;padding:18px 24px;margin:24px auto;
  font-size:1.0625rem}
.alert p+p{margin-top:.8em}
.flag{display:inline-block;background:var(--navy-2);color:var(--navy-on);font-size:.875rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 11px;
  border-radius:999px;border:1px solid var(--navy-edge)}

/* --- 10. TABLES ----------------------------------------------------------- */
.tablewrap{overflow-x:auto;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow-sm);margin:22px auto}
table.dtable{width:100%;border-collapse:collapse;font-size:1rem;min-width:520px}
.dtable caption{text-align:left;padding:16px 20px 0;font-family:var(--display);
  font-weight:700;color:var(--ink);font-size:1.05rem}
.dtable th,.dtable td{padding:12px 20px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line-soft);color:var(--muted)}
.dtable thead th{background:var(--paper-deep);color:var(--accent-on);
  font-size:.9375rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
  font-family:var(--sans)}
.dtable tbody tr:nth-child(even) td{background:var(--panel-2)}
.dtable tbody tr:last-child td{border-bottom:0}
.dtable td b,.dtable th b{color:var(--ink)}
.dtable tbody th{font-weight:700;color:var(--ink-soft)}

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

.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:8px}
.shots--wide{grid-template-columns:repeat(3,minmax(0,1fr))}
.shots figure{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--shadow-sm)}
.shots img{width:100%}
.shots figcaption{padding:18px 20px;font-size:1rem;color:var(--muted)}
.shots figcaption b{display:block;font-family:var(--display);font-size:1.06rem;
  color:var(--ink);margin-bottom:6px}

/* --- 12. PROMO, STATS, SEAL WALL ------------------------------------------ */
.promo{background:var(--navy);border:1px solid var(--navy-edge);
  border-radius:var(--r-l);padding:32px 36px;display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;
  --ink:#ffffff;--ink-soft:#eef3fb;--muted:#c2cfe2;--faint:#9fb0c8;
  --panel:#16203a;--line:#26365c;color:var(--muted)}
.promo p{margin:0}
.stats{background:var(--paper-deep);border:1px solid var(--accent-edge);
  border-radius:var(--r-l);padding:34px;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;text-align:center;
  color:var(--muted)}
.stats b{display:block;font-family:var(--display);font-size:2.05rem;font-weight:700;
  color:var(--accent-on);line-height:1.05}
.stats span{display:block;margin-top:8px;font-size:.9375rem;color:var(--faint)}
.badgewall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.badgewall figure{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 14px;text-align:center;box-shadow:var(--shadow-sm)}
.badgewall img{margin:0 auto 10px}
.badgewall figcaption{font-size:.9375rem;color:var(--muted)}
.badgewall figcaption b{display:block;color:var(--ink);font-size:1rem;
  margin-bottom:4px;font-family:var(--display)}

/* --- 13. WHY AND WHO-FOR -------------------------------------------------- */
.whygrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.whycard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:26px 24px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.whycard::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--navy-on))}
.whycard h3{font-size:1.12rem}
.whycard p{font-size:1.0625rem;color:var(--muted)}
.whofor{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.forlist{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:26px;box-shadow:var(--shadow-sm)}
.forlist h3{font-size:1.12rem;margin-bottom:12px}
.forlist li{display:flex;gap:10px;font-size:1.0625rem;margin-bottom:9px}
.forlist li::before{content:"";flex:none;width:10px;height:10px;margin-top:.55em;
  background:var(--accent);clip-path:var(--hexclip)}
.forlist--no li::before{background:var(--navy-on)}

/* --- 14. THE LABEL PANEL -------------------------------------------------- */
.ing{display:grid;gap:22px}
.ingcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:28px;box-shadow:var(--shadow-sm);position:relative}
.ingcard h3{font-size:1.22rem;margin-bottom:4px}
.ingcard .ingsub{font-size:.9375rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-on);font-weight:700;margin-bottom:12px;display:block}
.ingcard p{font-size:1.0625rem}
.ingcard p+p{margin-top:.85em}
.ing__dose{font-weight:700;color:var(--ink);white-space:nowrap}
.facts{background:var(--panel);border:2px solid var(--accent);border-radius:var(--r-s);
  overflow:hidden;max-width:660px;margin-inline:auto}
.facts__h{background:var(--accent);color:#231b09;padding:14px 22px;
  font-family:var(--display);font-size:1.14rem;font-weight:700}
.facts__serve{padding:12px 22px 0;font-size:1rem;color:var(--muted)}
.facts__foot{padding:12px 22px 18px;font-size:.9375rem;color:var(--faint)}
.facttab{width:100%;border-collapse:collapse;font-size:1rem}
.facttab th,.facttab td{padding:11px 22px;border-bottom:1px solid var(--line);
  text-align:left;color:var(--muted)}
.facttab thead th{font-size:.9375rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);font-family:var(--sans)}
.facttab tbody th{font-weight:600;color:var(--ink-soft);font-size:1rem}
.facttab td:last-child{text-align:right;font-weight:700;color:var(--ink)}
.facttab tr:last-child th,.facttab tr:last-child td{border-bottom:0}

/* --- 15. THE SPEC SHEET --------------------------------------------------- */
.qa{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-sm);overflow:hidden;max-width:940px;margin-inline:auto}
.qa__h{background:var(--paper-deep);color:var(--accent-on);padding:16px 24px;
  font-family:var(--display);font-weight:700;font-size:1.06rem}
.qa dl{margin:0;display:grid;grid-template-columns:31% minmax(0,1fr)}
.qa dt,.qa dd{padding:13px 24px;border-bottom:1px solid var(--line-soft);margin:0}
.qa dt{font-weight:700;color:var(--ink);font-size:1.0625rem;letter-spacing:.07em;
  text-transform:uppercase;font-family:var(--sans)}
.qa dd{color:var(--muted);font-size:1.0625rem}
.qa dl>:nth-last-child(-n+2){border-bottom:0}

/* --- 16. THE ADD-TO-CART PANEL -------------------------------------------
   Three pack cards sharing one image slot and one button baseline. There is
   no struck comparison price anywhere in here, because the MemoHive seller
   prints none. The featured pack is raised with a negative margin rather than
   a transform: the rise-on-entry pass sets transform:none on a revealed card
   and would cancel a translate.

   The body packs from the TOP and the button carries a min-height, because
   the Add To Cart button is not the last element in a card - payment art and
   a note follow it - so margin-top:auto would absorb whatever space those
   trailing blocks leave over and land three buttons on three baselines. */
.buy{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;
  align-items:stretch;margin-top:8px}
.buy__card{background:var(--panel);border:2px solid var(--line);border-radius:var(--r-l);
  overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;
  text-align:center}
.buy__card--feature{border-color:var(--accent);box-shadow:var(--shadow-lg);margin-top:-12px}
.buy__head{background:var(--paper-deep);padding:16px 18px 14px;position:relative}
/* Measured, not chosen: --accent-deep behind --ink-soft gave the supply line
   3.09:1, and that line is 15px bold, so it needs 4.5. The brighter gold with
   dark type reads 6.5:1 and also says "recommended" more plainly. */
.buy__card--feature .buy__head{background:var(--accent);color:#17110a}
.sec .buy__card--feature .buy__name{color:#17110a}
.buy__card--feature .buy__supply{color:#2b220f}
.buy__flag{display:inline-block;background:var(--navy-2);color:var(--navy-on);
  font-size:.875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 12px;border-radius:999px;margin-bottom:8px;border:1px solid var(--navy-edge)}
.buy__card--feature .buy__flag{background:rgba(0,0,0,.32);color:#fff;
  border-color:rgba(255,255,255,.45)}
.sec .buy__name{color:var(--ink);font-size:1.5rem;font-weight:700;margin:0}
.buy__supply{color:var(--ink-soft);font-size:.9375rem;font-weight:700;margin-top:4px;
  min-height:3.3em}
.buy__body{padding:18px 22px 22px;display:flex;flex-direction:column;flex:1}
/* One box for every pack shot: the six-bottle image is 1.97:1 where the
   two-bottle one is 0.91:1, and at a shared width they would sit at wildly
   different heights. */
.buy__img{display:block;width:100%;max-width:230px;height:172px;object-fit:contain;
  margin:0 auto 10px}
.buy__price{font-family:var(--display);font-size:2.9rem;font-weight:700;color:var(--ink);
  line-height:1;display:flex;align-items:flex-start;justify-content:center;gap:2px}
.buy__cur{font-size:1.3rem;margin-top:6px}
.buy__per{font-family:var(--sans);font-size:1rem;font-weight:700;color:var(--faint);
  align-self:flex-end;margin:0 0 6px 6px}
.buy__total{font-size:1.0625rem;color:var(--muted);margin:10px 0 14px}
.buy__total b{color:var(--ink);font-size:1.18rem}
.buy__perks{display:grid;gap:7px;text-align:left;margin:0 auto 18px;font-size:1rem;
  color:var(--ink-soft)}
.buy__perks li{position:relative;padding-left:26px}
.buy__perks li::before{content:"";position:absolute;left:0;top:.36em;width:15px;
  height:15px;background:var(--accent);clip-path:var(--hexclip)}
.buy__add{font-size:.98rem;padding-block:15px;margin-top:14px;min-height:73px;
  display:flex;align-items:center;justify-content:center}
.buy__cart{flex:none}
.buy__pay{display:block;width:172px;height:auto;margin:12px auto 0;opacity:.88}
.buy__why{font-size:.9375rem;color:var(--faint);text-align:left;margin-top:14px;
  padding-top:12px;border-top:1px dashed var(--line)}
.buy__foot{max-width:var(--measure-wide);margin:26px auto 0;text-align:center}
.guarantee{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr);gap:34px;
  align-items:center;background:var(--panel);border:1px solid var(--accent-edge);
  border-radius:var(--r-l);padding:32px;box-shadow:var(--shadow-sm)}
.guarantee img{margin-inline:auto}
.guarantee h3{font-size:1.36rem;margin-bottom:12px}

/* --- 17. REVIEWS ---------------------------------------------------------- */
.tgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.tcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:24px;box-shadow:var(--shadow-sm)}
.tcard .stars,.rev__stars{color:var(--accent-on);letter-spacing:1px;font-size:1rem}
.tcard b{display:block;margin-top:8px;font-family:var(--display);font-size:1.04rem;
  color:var(--ink)}
.tcard span{font-size:.9375rem;color:var(--faint)}
.tcard p{font-size:1.0625rem;margin-top:10px}
.bars{display:grid;gap:9px;max-width:470px}
.bar{display:grid;grid-template-columns:62px minmax(0,1fr) 52px;gap:12px;align-items:center;
  font-size:.9375rem;color:var(--faint)}
.bar__t{height:10px;background:var(--line-soft);border-radius:5px;overflow:hidden}
.bar__f{display:block;height:100%;background:var(--accent);border-radius:5px}
.dist{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;
  align-items:center;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:28px;box-shadow:var(--shadow-sm)}
.bigscore{font-family:var(--display);font-size:2.6rem;font-weight:700;color:var(--ink);
  line-height:1.05}
.bigscore small{font-size:1rem;color:var(--faint);font-weight:700}
.hero__rating{display:flex;align-items:center;gap:9px;margin:16px 0 0;
  font-size:1rem;color:var(--faint);flex-wrap:wrap}
.hero__rating b{color:var(--ink-soft)}

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

/* --- 19. SOURCES AND BYLINE ----------------------------------------------- */
.refs{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 26px;box-shadow:var(--shadow-sm)}
.refs h2{font-size:1.18rem;margin-bottom:12px}
.refs ol{counter-reset:r;display:grid;gap:9px}
.refs li{counter-increment:r;position:relative;padding-left:32px;font-size:1.0625rem;
  color:var(--muted);line-height:1.6}
.refs li::before{content:counter(r,decimal-leading-zero);position:absolute;left:0;
  font-weight:700;color:var(--accent-on);font-family:var(--display);font-size:1.0625rem}
.refs a{word-break:break-word}
.byline{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 26px;box-shadow:var(--shadow-sm);margin:26px auto 0}
.byline img{border-radius:var(--r-s);flex:none}
.byline svg{width:64px;height:64px;flex:none}
.byline b{font-family:var(--display);font-size:1.06rem;color:var(--ink);display:block;
  margin-bottom:7px}
.byline p{font-size:1rem;color:var(--muted)}

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

/* --- 21. FINAL CTA AND RELATED -------------------------------------------- */
.final{background:var(--paper-deep);border:1px solid var(--accent-edge);
  border-radius:var(--r-l);padding:40px 42px;position:relative;overflow:hidden;
  color:var(--muted)}
.final::after{content:"";position:absolute;right:-70px;top:-70px;width:250px;height:250px;
  background:rgba(201,162,78,.10);clip-path:var(--hexclip)}
.final h2{color:var(--ink);font-size:clamp(1.5rem,2.8vw,2.05rem);margin-bottom:12px}
.final--media{display:grid;grid-template-columns:320px minmax(0,1fr);gap:36px;
  align-items:center}
.final--media .final__img img{width:100%;height:auto;margin-inline:auto;
  filter:drop-shadow(0 20px 26px rgba(0,0,0,.65))}
.final__body{position:relative;z-index:2}
.final__price{font-family:var(--display);font-size:1.22rem;font-weight:700;color:var(--ink);
  margin:14px 0 18px}
.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;text-align:left}
.rel a{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:22px;display:block;box-shadow:var(--shadow-sm);
  transition:transform .2s ease,box-shadow .2s ease}
.rel a:hover{transform:translateY(-3px);box-shadow:var(--shadow);text-decoration:none}
.rel b{display:block;font-family:var(--display);font-size:1.06rem;color:var(--ink);
  margin-bottom:6px}
.rel span{font-size:1rem;color:var(--muted)}

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

/* --- 23. THE FOOTER: seals inset into the top edge of a dark slab ---------
   The closing band above the footer reserves 58px of bottom padding, and
   `.fseals` pulls itself up by 38px, so four round seals sit half in the band
   and half in the slab and read as inset into its edge. The pull is a margin
   rather than a transform, so the space is genuinely given back and nothing
   below moves. */
.fdesk{background:var(--paper-tint);border-top:1px solid var(--line);
  padding-block:34px 58px}
.fdesk__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.fdesk__card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 22px;box-shadow:var(--shadow-sm)}
.fdesk__card b{display:block;font-family:var(--display);font-size:1.02rem;color:var(--ink);
  margin-bottom:4px}
.fdesk__card p{font-size:1.0625rem;color:var(--muted)}
.fdesk__card .flag{margin-bottom:10px}
footer{background:var(--paper-deep);color:var(--muted);padding-block:0 24px;
  font-size:.9688rem;border-top:3px solid var(--accent)}
footer a{color:var(--ink-soft)}
footer a:hover{color:var(--accent-on)}
.fseals{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 26px;
  margin:-38px auto 26px;position:relative;z-index:2}
.fseals figure{width:104px;text-align:center}
.fseals img{margin:0 auto 7px;background:var(--paper-tint);border-radius:50%;
  padding:6px;border:2px solid var(--accent-edge);box-shadow:var(--shadow-sm)}
.fseals figcaption{font-size:.9375rem;color:var(--faint);line-height:1.35}
.fhead{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 34px;
  align-items:start;padding-bottom:26px;border-bottom:1px solid var(--line)}
.fbrand{font-family:var(--display);font-size:1.8rem;font-weight:700;color:var(--ink);
  grid-column:1}
.fbrand span{color:var(--accent-on)}
.fhead p{grid-column:1;font-size:1.0625rem;line-height:1.62}
.fhead .fpitch{grid-column:2;grid-row:1 / span 2;font-size:1rem;color:var(--faint);
  max-width:430px;justify-self:end}
.findex{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 34px;
  padding-block:28px;border-bottom:1px solid var(--line);align-items:start}
.findex h4{color:var(--accent-on);font-family:var(--sans);font-size:.875rem;
  letter-spacing:.2em;text-transform:uppercase;margin-bottom:14px}
.findex ul{display:grid;gap:2px}
.findex li{font-size:1.0625rem;line-height:1.5}
/* The anchor takes the padding and gives the space straight back as margin,
   so the tap target grows to ~33px and the rendered footer does not move. */
footer li a{display:inline-block;padding-block:4px;margin-block:-4px}
.fnap{padding-block:22px;border-bottom:1px solid var(--line);font-size:.9688rem;
  line-height:1.76}
.fnap strong{color:var(--ink)}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding-block:20px;
  font-size:.9375rem}
.fpay img{background:var(--panel);border-radius:var(--r-s);padding:5px 8px}
.disc{padding-top:18px;font-size:.9375rem;line-height:1.7;color:var(--faint)}
.disc p{margin-bottom:.9em}
.disc b{color:var(--ink-soft)}
.disc .copy{margin-top:16px}

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

/* --- 25. THE BLOG --------------------------------------------------------- */
.article{max-width:790px;margin-inline:auto}
.article h1{font-size:clamp(1.85rem,3.4vw,2.55rem);margin-bottom:14px;font-weight:700}
.article h2{font-size:1.52rem;margin:1.9em 0 .6em;scroll-margin-top:118px}
.article h3{font-size:1.18rem;margin:1.5em 0 .5em}
.article p{margin-bottom:1em}
.article ul,.article ol{margin:0 0 1.2em}
.article ul li{position:relative;padding-left:24px;margin-bottom:8px}
.article ul li::before{content:"";position:absolute;left:3px;top:.6em;width:11px;
  height:11px;background:var(--accent);clip-path:var(--hexclip)}
.article ol{counter-reset:ai}
.article ol li{position:relative;padding-left:32px;margin-bottom:8px;counter-increment:ai}
.article ol li::before{content:counter(ai,decimal-leading-zero);position:absolute;left:0;
  color:var(--accent-on);font-weight:700;font-family:var(--display);font-size:1.0625rem}
.article figure{margin:1.6em 0}
.article figure img{width:100%;border-radius:var(--r)}
.article figure.portrait img{width:100%;max-width:var(--figw);margin-inline:auto}
.article figcaption{font-size:.9375rem;color:var(--faint);margin-top:9px;
  border-left:3px solid var(--accent);padding-inline-start:12px}
.postmeta{display:flex;flex-wrap:wrap;gap:8px 12px;font-size:.9375rem;color:var(--faint);
  padding-block:12px;border-block:1px solid var(--line);margin-bottom:26px}
.postmeta b{color:var(--ink-soft)}
.postmeta .sep{color:var(--line)}
.toc{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 24px;margin-bottom:26px;box-shadow:var(--shadow-sm)}
.toc h2{font-size:.875rem;letter-spacing:.2em;text-transform:uppercase;
  font-family:var(--sans);color:var(--accent-on);margin:0 0 10px}
.toc ol{counter-reset:t;display:grid;gap:6px}
.toc li{counter-increment:t;position:relative;padding-left:30px;font-size:1.0625rem}
.toc li::before{content:counter(t,decimal-leading-zero);position:absolute;left:0;
  color:var(--faint);font-weight:700;font-family:var(--display);font-size:1.0625rem}
.keypoints{background:var(--accent-tint);border-left:5px solid var(--accent);
  border-radius:0 var(--r) var(--r) 0;padding:20px 24px;margin-bottom:24px}
.keypoints>b{display:block;font-family:var(--sans);font-size:.875rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent-on);margin-bottom:10px}
.keypoints li b{color:var(--ink)}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.posts article{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .2s ease,box-shadow .2s ease}
.posts article:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.posts img{width:100%}
.posts .pbody{padding:20px 22px}
.posts h3{font-size:1.12rem;margin-bottom:8px}
.posts p{font-size:1.0625rem;color:var(--muted)}
.posts .pmeta{font-size:.9375rem;color:var(--faint);margin-top:12px;
  letter-spacing:.06em;text-transform:uppercase;font-weight:700}
/* A shared component in a narrower column is a new component (pitfall 24). */
.article .final--media{grid-template-columns:168px minmax(0,1fr);gap:24px;
  padding:30px 28px}
.article .final--media .final__img img{max-width:168px}
.article .final--media h2{font-size:1.5rem;line-height:1.24;margin-top:0}
@media(max-width:760px){
  .article .final--media{grid-template-columns:1fr;gap:16px;padding:24px 22px;
    text-align:center}
  .article .final--media .final__img img{max-width:128px;margin-inline:auto}
  .article .final--media h2{font-size:1.3rem}
  .article .final--media .btn{width:100%}
}
.article .refs{margin-top:2em}
.article .refs h2{margin-top:0}

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

/* --- 27. RESPONSIVE ------------------------------------------------------- */
@media(max-width:1060px){
  .sec>.wrap>p,.sec>.wrap>h2,.sec>.wrap>h3,.sec>.wrap>h4,
  .sec>.wrap>ul,.sec>.wrap>ol,.sec>.wrap>.sec__head,.sec>.wrap>.callout,
  .sec>.wrap>.alert,.sec>.wrap>.byline,.sec>.wrap>.refs,.sec>.wrap>.answer,
  .sec>.wrap>.pullquote,.sec>.wrap>blockquote,.sec>.wrap>h1,.sec>.wrap>.eyebrow,
  .sec>.wrap>.tablewrap,.sec>.wrap>.faq,.sec>.wrap>.steps,.sec>.wrap>.preclist{
    max-width:none}
}
@media(max-width:920px){
  .split,.split--rev,.guarantee,.dist,.form{grid-template-columns:1fr;gap:26px}
  .promo{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3,.g4,.whygrid,.tgrid,.rel,.posts,.fdesk__grid,.badgewall{
    grid-template-columns:repeat(2,minmax(0,1fr))}
  .findex{grid-template-columns:repeat(2,minmax(0,1fr))}
  .buy{grid-template-columns:1fr;max-width:450px;margin-inline:auto;gap:18px}
  .buy .buy__card:nth-child(1){order:3}
  .buy .buy__card:nth-child(2){order:1}
  .buy .buy__card:nth-child(3){order:2}
  .buy__card--feature{margin-top:0}
  .final--media{grid-template-columns:1fr;gap:22px}
  .final--media .final__img img{max-width:260px}
  .fhead .fpitch{grid-column:1;grid-row:auto;justify-self:start}
}
@media(max-width:700px){
  .sec{padding-block:50px}
  .g2,.g3,.g4,.whygrid,.whofor,.tgrid,.rel,.posts,.shots,.shots--wide,
  .badgewall,.fdesk__grid,.findex,.fhead{grid-template-columns:1fr}
  .qa dl{grid-template-columns:1fr}
  .qa dt{padding-bottom:0;border-bottom:0}
  .qa dd{padding-top:4px}
  .stats{grid-template-columns:1fr}
  .final{padding:28px 22px}
  .step{padding:22px 20px 22px 70px}
  .step__n{left:16px}
  .promo{padding:26px 22px}
  .answer{padding:18px 20px}
  .fseals figure{width:92px}
}
/* Tap target: a button on a phone must be reachable with a thumb (44px). */
@media(max-width:600px){.btn{min-height:44px}}

/* --- --navh publisher note ------------------------------------------------
   site.js measures the real header height and publishes it as a custom
   property. It is declared in :root above so a page that loads before the
   script still has a sane value, and so validate.py sees every token
   declared. */


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

/* ==== fix_layout_breaks.py ==== */
/* A figure alone on its row, and components whose own
   background fights the band they sit in. Appended: each
   rule below is correct in isolation and only their
   combination fails, so the originals stay as written. */
.shots>figure:last-child:nth-child(odd){grid-column:1/-1;max-width:calc((100% - 24px) / 2);margin-inline:auto}
.shots--wide>figure:only-child{grid-column:1/-1;max-width:calc((100% - 48px) / 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(110%)}
/* ==== end directional chrome ==== */

/* ==== footer type floor (footer_type.py) ==== */
/* The footer carried the smallest text on the page -- the legal pages,
   the guarantee and the contact routes, set as fine print. Running text
   and links sit at 16px, column headings at 15px (uppercase and
   letter-spaced, so they read larger than the number). Last in the file
   on purpose: it outranks the phone breakpoints that shrank them. */
footer{font-size:16px}
footer .disc{font-size:16px}
footer .findex h4{font-size:15px}
footer .fnap{font-size:16px}
footer .fpay{font-size:16px}
footer .fseals figcaption{font-size:16px}
/* ==== end footer type floor ==== */

/* ==== modern surface (modern_surface.py) ==== */
/* House rule 11. This stylesheet had 30 box-shadow declaration(s)
   and 0 of them layered, so every panel read flat however generous
   the radius was. Two stops -- a tight contact shadow and a wide
   ambient one -- is what makes a surface look raised. The tint is
   this site's own ink (247,240,227), 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(247,240,227,.06), 0 6px 18px rgba(247,240,227,.07);
  --lift:0 2px 6px rgba(247,240,227,.09), 0 16px 34px rgba(247,240,227,.14);
}

.card,
.step,
.keypoints,
.callout,
.alert,
.toc,
.byline,
.posts article,
.shots figure,
.badgewall figure,
.tablewrap,
.faq,
.ingcard,
.final,
.answer,
.whycard,
.article figure{box-shadow:var(--shadow)}

/* 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,
.callout,
.alert,
.faq,
.answer,
.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,
.badgewall figure{transition:box-shadow .2s ease, transform .2s ease}
.rel a:hover,
.posts article:hover,
.shots figure:hover,
.badgewall figure:hover{box-shadow:var(--lift);transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){
.rel a:hover,
.posts article:hover,
.shots figure:hover,
.badgewall figure:hover{transform:none}
}
/* ==== end modern surface ==== */

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