/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Literata Fallback";src:local("Georgia");font-weight:400;size-adjust:108.51%;ascent-override:108.47%;descent-override:28.39%;line-gap-override:0.00%}
@font-face{font-family:"Literata Fallback";src:local("Georgia Bold");font-weight:600 900;size-adjust:99.53%;ascent-override:118.26%;descent-override:30.95%;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 ==== */
/* maemodyne.com - Memodyne, a once-daily cognitive support capsule.
   Design slot: batch13_assignments.py row 257.

   Literata over Instrument Sans. Warm oat ground with clay-pink panels, the
   accent ramp taken off the bottle's own teal band. Lifted white cards at an
   18px radius with no border, the featured pack raised 12px. A 6/6 hero with
   the bottle standing LEFT on a clay plate and the copy to its right, and a
   three-across rhythm through the sections below it.

   Everything above the critical marker near the foot of the hero block is
   minified and inlined into every page's head by tpl.py, so the first paint is
   correct on a phone as well as on a desktop. The hero's responsive media
   queries sit ABOVE that marker deliberately: a phone that paints the desktop
   hero and then relays it is the single largest mobile-CLS fault this estate
   has had.

   This comment does not spell the marker out. critical_hero.py inserts its
   copied block immediately before the FIRST occurrence of that literal in the
   file, and a copy of it in prose here sent the insertion into the middle of
   this comment and broke the stylesheet on the first build.
*/

/* ---------------------------------------------------------------- tokens */
:root{
  /* ground: warm oat, with the clay-pink panels the slot calls for */
  --paper:#fbf6ee;
  --oat:#f3ebdd;
  --oat-deep:#ebe0cd;
  --clay:#f2ded7;
  --clay-deep:#e6c8bd;
  --card:#ffffff;

  /* ink: warm brown-black, so the shadows below can be tinted with it */
  --ink:#2a211c;
  --ink-soft:#5c4c43;
  /* #7b6a5f measured 4.36:1 on the oat ground and 3.95:1 on the tinted
     sections -- every eyebrow, table note and pack mark on the site was under
     4.5:1. #6a5a50 is >=5.0:1 on oat-deep and clay and still reads a step
     lighter than --ink-soft (audit, 21 Sep 2026). */
  --ink-mute:#6a5a50;
  --rule:#ded0bc;
  --rule-soft:#ece1d0;

  /* accent: read off the teal band on the Memodyne bottle */
  --teal:#00888a;
  --teal-mid:#06797b;
  --teal-deep:#045c5e;
  --teal-ink:#04494b;
  --teal-wash:#e3f0ef;

  --grad:linear-gradient(135deg,#06797b 0%,#045c5e 100%);
  --grad-soft:linear-gradient(180deg,#f7f1e6 0%,#f0e3d2 100%);

  /* curve: a scale, not a value */
  --radius:18px;
  --radius-sm:11px;

  /* shade: two stops, tinted with this site's own ink */
  --shadow:0 1px 2px rgba(42,33,28,.07), 0 6px 18px rgba(42,33,28,.08);
  --lift:0 2px 6px rgba(42,33,28,.10), 0 16px 34px rgba(42,33,28,.16);
  --shadow-sm:0 1px 2px rgba(42,33,28,.06), 0 3px 10px rgba(42,33,28,.07);

  --wrap:1180px;
  --navh:96px;
  --serif:"Literata","Literata Fallback",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans","Instrument Sans Fallback","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth;
  scroll-padding-top:calc(var(--navh) + 16px)}
body{margin:0;background:var(--oat);color:var(--ink);font-family:var(--sans);
  font-size:17.5px;line-height:1.68;overflow-x:clip;-webkit-font-smoothing:antialiased}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--teal-ink)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.16;
  letter-spacing:-.012em;margin:0 0 .5em;color:var(--ink)}
h1{font-size:clamp(1.95rem,1.3rem + 1.9vw,2.7rem);letter-spacing:-.02em}
h2{font-size:clamp(1.55rem,1.15rem + 1.35vw,2.25rem)}
h3{font-size:1.2rem}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.15em;padding-left:1.25em}
li{margin:0 0 .5em}
b,strong{font-weight:600}
.wrap{width:min(var(--wrap),92%);margin-inline:auto}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;
  padding:12px 18px;z-index:120;border-radius:0 0 var(--radius-sm) 0}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px}

/* ---------------------------------------------------------------- buttons */
/* The pair is a gradient primary against a flat solid secondary, so the two
   read as two weights rather than one button drawn twice.

   The colour is guarded at (0,2,0) -- `.btn.btn--teal` -- and that guard sits
   above the critical marker. `.final a`, `.rel a` and `.fcta a` are all
   (0,1,1) selectors that would otherwise outrank a single-class `.btn--teal`
   and repaint the label in the surrounding link colour. On this estate that
   geometry has shipped a CTA whose text matched its own fill at 1.00:1. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--sans);font-weight:600;font-size:16.5px;line-height:1.25;
  text-decoration:none;border:0;border-radius:var(--radius-sm);
  padding:14px 24px;cursor:pointer;text-align:center;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease}
.btn.btn--teal{background:var(--grad);color:#fff;box-shadow:var(--shadow)}
.btn.btn--teal:hover{transform:translateY(-2px);box-shadow:var(--lift);color:#fff}
.btn.btn--ghost{background:var(--clay);color:var(--ink);box-shadow:none;
  border:1.5px solid var(--clay-deep)}
.btn.btn--ghost:hover{transform:translateY(-2px);background:var(--clay-deep);color:var(--ink)}
.btn--lg{padding:17px 30px;font-size:17.5px}
.btn--wide{width:100%}

/* ---------------------------------------------------------------- topline */
.util{background:var(--ink);color:#f0e6da;font-size:14.5px}
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 26px;
  padding-block:9px}
.util__item{display:inline-flex;align-items:center;gap:.4em;white-space:nowrap}
.util__item b{color:#fff;font-weight:600}
.util a{color:#ffd9cb;text-decoration:none}
.util a:hover{text-decoration:underline}
.util__item--trim{color:#d6c7b7}

/* ---------------------------------------------------------------- header */
/* Identity hard left beneath a single deep rule, destinations right-aligned. */
.nav{position:sticky;top:0;z-index:90;background:var(--paper);
  border-top:4px solid var(--teal-deep);
  box-shadow:0 1px 0 var(--rule), 0 8px 22px rgba(42,33,28,.06);
  transition:transform .26s ease, box-shadow .26s ease}
/* Rank one: identity hard left, the guarantee chip and the Order button hard
   right. Rank two: the destinations rail, right-aligned, on its own full-width
   line under a hairline. The row sheds deliberately rather than wrapping,
   which is what produced a 236px header with the Order button stranded at the
   far left of a third rank. */
.nav__top{display:flex;align-items:center;gap:8px 18px;padding-block:11px;
  flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;
  margin-right:auto}
/* brand_marks.py writes the mark WITHOUT a class, so the size rule has to
   land on the element rather than on a class name. Both spellings are kept:
   the tool's bare <svg> and the class the generator used before it ran. */
.brand svg,.brand__glyph{width:44px;height:44px;flex:0 0 44px}
.bw{display:flex;flex-direction:column;line-height:1.08}
.bw b{font-family:var(--serif);font-size:25px;font-weight:600;color:var(--ink);
  letter-spacing:-.018em}
.bw b em{font-style:normal;color:var(--teal-deep)}
.bw small{font-size:14.5px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ink-mute);font-weight:600;margin-top:3px}
.nav__chip{display:inline-flex;align-items:center;font-size:13.5px;font-weight:600;
  color:var(--teal-ink);background:var(--teal-wash);border-radius:999px;
  padding:7px 15px}
.nav__chip{order:2}
.nav__buy{order:3;padding:10px 19px;font-size:15px}
.menu{order:4;width:100%;display:flex;flex-wrap:wrap;justify-content:flex-end;
  gap:2px 15px;list-style:none;margin:2px 0 0;padding:8px 0 0;
  border-top:1px solid var(--rule-soft)}
.menu a{font-size:15px;font-weight:500;color:var(--ink-soft);text-decoration:none;
  padding:3px 0;border-bottom:2px solid transparent;
  transition:color .16s ease,border-color .16s ease}
.menu a:hover,.menu a[aria-current="page"]{color:var(--teal-ink);border-bottom-color:var(--teal)}
.menu__more a{color:var(--ink-mute);font-size:14px}
.burger{display:none;background:var(--clay);border:0;border-radius:var(--radius-sm);
  width:46px;height:44px;padding:10px 11px;cursor:pointer}
.burger span{display:block;height:2.5px;background:var(--ink);border-radius:2px;margin:4px 0}

/* ---------------------------------------------------------------- hero */
/* 6/6: the bottle stands LEFT on a clay plate, the copy reads to its right.
   align-items:start, so the headline begins level with the top of the plate
   rather than floating in the middle of a tall photograph. */
.hero{position:relative;background:var(--grad-soft);
  border-bottom:1px solid var(--rule);padding:38px 0 50px;overflow:hidden}
.hero__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:40px;
  align-items:start;position:relative;z-index:2}
.hero__media{grid-column:span 6;order:1;position:relative}
.hero__copy{grid-column:span 6;order:2}
.hero .eyebrow{color:var(--teal-ink)}
.hero h1{margin:8px 0 16px}
.hero__card{position:relative;background:var(--card);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:26px 26px 20px;text-align:center;z-index:2}
/* The bottle stands on a clay plate. The plate lives INSIDE the card and is
   sized as a percentage of the shot, because the card is an opaque surface: a
   plate placed behind it is painted and never seen. */
.hero__shot{position:relative;max-width:420px;margin-inline:auto}
.hero__card img{width:100%;position:relative;z-index:2}
.hero__plate{position:absolute;left:50%;bottom:6.5%;transform:translateX(-50%);
  width:68%;padding-bottom:9%;border-radius:50%;background:var(--clay-deep);
  box-shadow:0 14px 28px rgba(42,33,28,.20);z-index:1}
.hero__cap{font-size:14.5px;color:var(--ink-mute);margin:14px 0 0;
  border-top:1px solid var(--rule-soft);padding-top:12px}
.answer{background:var(--card);border-left:5px solid var(--teal);
  border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:20px 22px;
  margin:0 0 16px}
.answer p{margin:0 0 .7em;font-size:17px}
.answer p:last-child{margin-bottom:0}
.hero__road{font-size:16.5px;color:var(--ink-soft);margin:0 0 20px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 14px}
/* The route to the evidence and the route to a person, both on the first
   screen. They used to be the closing sentence of the roadmap paragraph, which
   put them at y=910 on a 1440x900 desktop: ten pixels below the fold, which is
   the same as not being there. */
.hero__routes{display:flex;flex-wrap:wrap;gap:4px 22px;margin:0 0 14px;
  font-size:15.5px;font-weight:500}
.hero__routes a{color:var(--teal-ink);text-decoration:none;
  border-bottom:1.5px solid rgba(0,136,138,.4);padding-bottom:1px}
.hero__routes a:hover{border-bottom-color:var(--teal)}
.hero__sub{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 16px;padding:0;
  font-size:15.5px;color:var(--ink-soft)}
.hero__sub span{display:inline-flex;align-items:center;gap:.45em}
.hero__sub span::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--teal);flex:0 0 7px}
.factpills{display:flex;flex-wrap:wrap;gap:9px;list-style:none;margin:0 0 20px;padding:0}
.factpills li{margin:0;background:var(--card);border-radius:999px;padding:8px 15px;
  font-size:14.5px;box-shadow:var(--shadow-sm)}
.factpills b{color:var(--teal-ink)}
.figures{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0}
.figures>div{background:var(--clay);border-radius:var(--radius);padding:15px 16px}
.figures b{display:block;font-family:var(--serif);font-size:1.7rem;line-height:1.05;
  color:var(--teal-ink)}
.figures span{display:block;font-size:14.5px;color:var(--ink-soft);margin-top:5px}
.eyebrow{display:block;font-size:13.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-mute)}

/* hero: the phone and tablet layouts, kept ABOVE the critical marker */
@media (max-width:980px){
  .hero{padding:28px 0 36px}
  /* `display:contents` dissolves the copy wrapper so each block becomes a grid
     item in its own right and can be ordered against the product. Without it
     the whole copy column sits between the headline and the bottle, which put
     the product at y=1963 on a 390px phone. */
  .hero__grid{grid-template-columns:1fr;gap:18px}
  .hero__copy{display:contents}
  .hero__media{grid-column:1/-1;order:3;margin:2px 0 4px}
  .hero .eyebrow{order:1}
  .hero h1{order:2;margin:6px 0 0}
  .hero .answer{order:4}
  .hero__cta{order:5;margin:0}
  .hero__routes{order:6;margin:0;font-size:16px}
  .hero__sub{order:7;margin:0}
  .hero__road{order:8;margin:0}
  .factpills{order:9;margin:0}
  .figures{order:10;grid-template-columns:1fr 1fr}
  .hero__shot{max-width:340px}
  /* the burger takes over here, not at 760: fourteen destinations on a 768px
     tablet is three ranks of links and a 236px header */
  .nav__top{gap:10px}
  .menu{display:none;width:100%;order:9;flex-direction:column;align-items:flex-start;
    gap:0;border-top:1px solid var(--rule);padding-top:6px;margin-top:0}
  .menu.open{display:flex}
  .menu a{padding:11px 0;width:100%;font-size:16px}
  .menu__more a{font-size:16px}
  .burger{display:block}
  .nav__chip{display:none}
  .nav__buy{padding:10px 17px;font-size:15px}
}
@media (max-width:760px){
  .util{font-size:14.5px}
  .util__row{gap:4px 16px;padding-block:8px}
  /* the lot code and the origin line are on the product pages; the topline
     keeps the two facts a first screen owes a visitor, which is who is selling
     and how to reach a person */
  .util__item--trim,.util__item--geo{display:none}
  .brand svg,.brand__glyph{width:38px;height:38px;flex:0 0 38px}
  .bw b{font-size:21px}
  .bw small{font-size:14.5px;letter-spacing:.14em}
  .nav__buy{padding:9px 14px;font-size:14px}
  .burger{width:42px;height:40px;padding:9px 10px}
  .hero{padding:22px 0 30px}
  .hero__card{padding:16px 16px 12px}
  .hero__shot{max-width:300px}
  .figures{grid-template-columns:1fr}
  .hero__cta .btn{width:100%}
}
/* The tagline under the wordmark sits at the 14.5px caption floor. At that
   size it no longer shares one rank with the Order button and the burger
   under ~540px, and the header broke into two rows with the button stranded
   at the far left (measured 21 Sep 2026: 109px header at 375px). Shrinking it
   back under the floor is not the fix; on a phone the wordmark carries the
   identity alone, and the tagline returns from 561px up. */
@media (max-width:560px){
  .bw small{display:none}
}
/* Under about 430px the identity, the Order button and the burger no longer
   fit one rank, and the button drops to a row of its own at the far left --
   the same shape rule 12 names on another site as "Order button sitting
   mid-header". The row is tightened rather than allowed to wrap. */
@media (max-width:430px){
  .nav__top{gap:8px 10px}
  .nav__buy{padding:8px 12px;font-size:13.5px}
  .burger{width:40px;height:38px;padding:9px 9px}
}
/* 320-359px (the small iPhones): the same rank needs a few more pixels back
   or the burger and the button drop to a second row. */
@media (max-width:359px){
  .nav__top{gap:8px}
  .brand{gap:8px}
  .brand svg,.brand__glyph{width:34px;height:34px;flex:0 0 34px}
  .bw b{font-size:19px}
  .nav__buy{padding:8px 10px}
  .burger{width:38px}
}

/* ---- inner-page scaffold, COPIED into the critical block ---------------
   Every inner page opens on .phead (crumbs, eyebrow, H1, lead) and then a
   .sec. Those rules lived only below the marker, so the first paint of an
   inner page came from the inline block without them and the page relaid
   when the async sheet landed -- CLS 0.09 on pricing.html at 375px with the
   sheet delayed 1.2s. These are COPIES of the rules of the same name below;
   the originals stay where they are, so the cascade is unchanged. Edit both
   together. */
.sec{padding:56px 0;border-bottom:1px solid var(--rule-soft)}
.sec--tint{background:var(--oat-deep);border-bottom-color:var(--rule)}
.sec--panel{background:var(--clay)}
.sec__head{max-width:74ch;margin:0 0 28px}
.sec__head p{color:var(--ink-soft);margin-bottom:0}
.phead{background:var(--grad-soft);border-bottom:1px solid var(--rule);
  padding:34px 0 40px}
.phead h1{margin:6px 0 16px}
.phead .lead{font-size:18.5px;color:var(--ink-soft);max-width:78ch;margin-bottom:0}
.crumbs{font-size:14.5px;color:var(--ink-mute);margin:0 0 10px}
.crumbs a{color:var(--ink-mute)}
.lead{font-size:18px;color:var(--ink-soft)}
.sec p{max-width:78ch}
@media (max-width:760px){
  body{font-size:17px}
  .sec{padding:40px 0}
}
/* ---- end of the copied inner-page scaffold ---- */

/* ---- hero motif -- relay-bloom ---------------------------------------- */
.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(163deg,#fbf6ee,#cee2dc 52%,#fbf6ee)}.hero__media::before{content:'';position:absolute;pointer-events:none;border-radius:50%;z-index:0;left:50%;top:50%;width:120%;aspect-ratio:1.1;translate:-50% -50%;filter:blur(13px);background:radial-gradient(closest-side,rgba(0,136,138,0.31),transparent 66%);animation:b13RelayBloom 13s ease-in-out infinite}.hero__media::after{content:'';position:absolute;pointer-events:none;border-radius:50%;z-index:0;left:50%;top:50%;width:98%;aspect-ratio:1.1;translate:-50% -50%;filter:blur(16px);background:radial-gradient(closest-side,rgba(0,136,138,0.22),transparent 72%);animation:b13RelayBloom 13s ease-in-out infinite;animation-delay:1.4s}@keyframes b13RelayBloom{0%,100%{transform:scale(.8);opacity:.14}52%{transform:scale(1.06);opacity:0.52}}
@media(prefers-reduced-motion:reduce){.hero__card{animation:none!important}.hero__media::before,.hero__media::after{animation:none!important;opacity:0!important}}

/*!CRITICAL-END*/

/* ---------------------------------------------------------------- hero motif
   hero_motifs.py writes the site's own gradient and motion block below. */

/* ---------------------------------------------------------------- sections */
.sec{padding:56px 0;border-bottom:1px solid var(--rule-soft)}
.sec--tint{background:var(--oat-deep);border-bottom-color:var(--rule)}
.sec--panel{background:var(--clay)}
.sec--brass{background:var(--teal-ink);color:#efe6d9;border-bottom-color:var(--teal-ink)}
.sec--brass h2,.sec--brass h3{color:#fff}
.sec--brass .eyebrow{color:#a9d6d4}
.sec--brass a{color:#bfe6e3}
/* .sec__head p sets --ink-soft at (0,1,1), which beat the band's own light
   colour and printed brown on teal at 1.25:1 (#numbers on the home page). */
.sec--brass .sec__head p{color:#d9e6e2}
.sec--center{text-align:center}
.sec--center .sec__head{margin-inline:auto}
.sec__head{max-width:74ch;margin:0 0 28px}
.sec__head p{color:var(--ink-soft);margin-bottom:0}
.phead{background:var(--grad-soft);border-bottom:1px solid var(--rule);
  padding:34px 0 40px}
.phead h1{margin:6px 0 16px}
.phead .lead{font-size:18.5px;color:var(--ink-soft);max-width:78ch;margin-bottom:0}
.crumbs{font-size:14.5px;color:var(--ink-mute);margin:0 0 10px}
.crumbs a{color:var(--ink-mute)}
.lead{font-size:18px;color:var(--ink-soft)}
.sec p{max-width:78ch}

/* ---------------------------------------------------------------- the three-across rhythm */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid.g2{grid-template-columns:repeat(2,1fr)}
.grid.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--card);border-radius:var(--radius);padding:24px 24px 20px;
  box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-2px);box-shadow:var(--lift)}
.card h3{margin-bottom:.45em}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:s}
.step{background:var(--card);border-radius:var(--radius);padding:24px;
  box-shadow:var(--shadow);position:relative;
  transition:transform .2s ease, box-shadow .2s ease}
.step:hover{transform:translateY(-2px);box-shadow:var(--lift)}
.step h3::before{counter-increment:s;content:counter(s);display:inline-flex;
  align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;background:var(--teal-wash);color:var(--teal-ink);
  font-family:var(--sans);font-size:15px;font-weight:600;margin-right:10px}
.step p:last-child{margin-bottom:0}

/* ---------------------------------------------------------------- callouts */
.callout{background:var(--clay);border-radius:var(--radius);padding:20px 22px;
  margin:22px 0;box-shadow:var(--shadow-sm)}
.callout>b{display:block;font-family:var(--serif);font-size:1.12rem;margin-bottom:.45em}
.callout p:last-child{margin-bottom:0}
.alert{background:#fdf3ec;border-left:5px solid #c4643c;border-radius:var(--radius);
  padding:20px 22px;margin:22px 0;box-shadow:var(--shadow-sm)}
.alert>b{display:block;font-family:var(--serif);font-size:1.12rem;margin-bottom:.45em;
  color:#8f3f1c}
.alert p:last-child{margin-bottom:0}
.keypoints{background:var(--card);border-radius:var(--radius);padding:20px 22px;
  margin:22px 0;box-shadow:var(--shadow)}
.keypoints>b{display:block;font-family:var(--serif);font-size:1.12rem;margin-bottom:.5em}
.keypoints ul{margin-bottom:0}
.pullquote{margin:26px 0;padding:22px 26px;background:var(--teal-wash);
  border-radius:var(--radius);font-family:var(--serif);font-size:1.22rem;
  line-height:1.45;color:var(--teal-ink)}
.pullquote cite{display:block;font-family:var(--sans);font-size:0.8438rem;
  font-style:normal;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-mute);margin-top:12px}
.ticks{list-style:none;padding-left:0}
.ticks li{position:relative;padding-left:27px}
.ticks li::before{content:"";position:absolute;left:2px;top:.55em;width:11px;height:6px;
  border-left:2.5px solid var(--teal);border-bottom:2.5px solid var(--teal);
  transform:rotate(-45deg)}

/* ---------------------------------------------------------------- tables */
.tablewrap{overflow-x:auto;border-radius:var(--radius);box-shadow:var(--shadow);
  background:var(--card);margin:0 0 18px}
table{border-collapse:collapse;width:100%;font-size:16px;min-width:520px}
thead th{background:var(--teal-ink);color:#fff;text-align:left;font-weight:600;
  padding:13px 16px;font-size:15px;letter-spacing:.02em}
td,tbody th{padding:13px 16px;border-top:1px solid var(--rule-soft);
  vertical-align:top;text-align:left}
tbody tr:nth-child(even){background:#fbf7f1}
.tnote{font-size:14.5px;color:var(--ink-mute);margin:0 0 6px}

/* ---------------------------------------------------------------- split */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:30px;
  align-items:start;margin:26px 0}
.split--flip .split__img{order:2}
.split__img img{border-radius:var(--radius);box-shadow:var(--shadow);width:100%}
.split__body p:last-child{margin-bottom:0}
.split--tall{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.split--band{grid-template-columns:1fr}
@media (min-width:761px){
  .split__img img{max-height:420px;width:auto;margin-inline:auto}
  .split--band .split__img img{max-height:none;width:100%}
}

/* ---------------------------------------------------------------- figures + seals */
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:0}
.shots.s2{grid-template-columns:repeat(2,1fr)}
.shots figure{margin:0;background:var(--card);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease}
.shots figure:hover{transform:translateY(-2px);box-shadow:var(--lift)}
.shots img{width:100%}
.shots figcaption{padding:16px 18px 18px}
.shots figcaption b{display:block;font-family:var(--serif);font-size:1.05rem;margin-bottom:.35em}
.shots figcaption span{font-size:15px;color:var(--ink-soft)}
.badgewall{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.badgewall figure{margin:0;background:var(--card);border-radius:var(--radius);
  padding:20px;text-align:center;box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease}
.badgewall figure:hover{transform:translateY(-2px);box-shadow:var(--lift)}
.badgewall img{margin:0 auto 12px}
.badgewall b{display:block;font-family:var(--serif);font-size:1.02rem;margin-bottom:.3em}
.badgewall span{font-size:14.5px;color:var(--ink-soft)}
figure.portrait img{width:var(--figw,320px);margin-inline:auto}

/* ---------------------------------------------------------------- ingredients */
.inglist{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.ingcard{background:var(--card);border-radius:var(--radius);padding:24px;
  box-shadow:var(--shadow);transition:transform .2s ease, box-shadow .2s ease}
.ingcard:hover{transform:translateY(-2px);box-shadow:var(--lift)}
.ingcard__top{border-bottom:1px solid var(--rule-soft);padding-bottom:12px;margin-bottom:14px}
.ingcard__top h3{margin:0 0 4px}
.ing__latin{display:block;font-size:14.5px;color:var(--ink-mute);font-style:italic}
.ing__dose{display:inline-block;margin-top:8px;font-size:13.5px;font-weight:600;
  color:var(--teal-ink);background:var(--teal-wash);border-radius:999px;padding:5px 12px}
.ingcard p:last-child{margin-bottom:0}
.versus{display:grid;grid-template-columns:1.1fr 1.3fr 1.6fr;gap:1px;
  background:var(--rule);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);font-size:15.5px}
.versus>div{background:var(--card);padding:14px 16px}
.versus__h{background:var(--teal-ink);color:#fff;font-weight:600;font-size:14.5px}
/* `.versus>div` (0,1,1) outranked `.versus__h` (0,1,0) and painted the
   header row white, so the white labels sat on white at 1:1 on desktop. */
.versus>.versus__h{background:var(--teal-ink);color:#fff}

/* ---------------------------------------------------------------- stats + meter */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.stats>div{text-align:center}
.stats b{display:block;font-family:var(--serif);font-size:2.35rem;line-height:1;color:#fff}
.stats span{display:block;font-size:14.5px;color:#c7ddda;margin-top:8px}
.meter{display:grid;gap:10px;background:var(--card);border-radius:var(--radius);
  padding:22px;box-shadow:var(--shadow)}
.meter__row{display:grid;grid-template-columns:64px 1fr 48px;align-items:center;gap:14px;
  font-size:15.5px}
.meter__bar{display:block;height:11px;border-radius:999px;background:var(--oat-deep);overflow:hidden}
.meter__bar i{display:block;height:100%;border-radius:999px;background:var(--grad)}

/* ---------------------------------------------------------------- pricing */
/* stretch, plus a column flex inside each card, so the three tiers compute one
   height and one button baseline instead of three of each */
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  align-items:stretch;padding-top:16px}
.card--pack{position:relative;background:var(--card);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease}
.card--pack:hover{transform:translateY(-2px);box-shadow:var(--lift)}
.card--pack.featured{transform:translateY(-12px);box-shadow:var(--lift)}
.card--pack.featured:hover{transform:translateY(-14px)}
.pack__flag{position:absolute;top:0;right:0;background:var(--grad);color:#fff;
  font-size:13.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 14px;border-radius:0 0 0 var(--radius-sm);z-index:3}
.pack__head{background:var(--clay);padding:18px 22px 15px;text-align:center}
.pack__head b{display:block;font-family:var(--serif);font-size:1.28rem}
.pack__head span{display:block;font-size:14.5px;color:var(--ink-soft);margin-top:3px}
.pack__body{padding:20px 22px 22px;text-align:center;display:flex;
  flex-direction:column;flex:1}
.pack__body img{margin:0 auto 14px;max-height:170px;width:auto}
.pack__per{font-family:var(--serif);font-size:3rem;line-height:1;margin:0;
  color:var(--teal-ink)}
.pack__per sup{font-size:1.15rem;top:-1.1rem;position:relative;margin-right:2px}
.pack__unit{display:block;font-size:14.5px;color:var(--ink-mute);margin-top:4px}
.pack__tot{margin:12px 0 14px;font-size:16px}
.pack__was{color:var(--ink-mute);text-decoration:line-through;margin-left:6px}
.pack__perks{list-style:none;padding:0;margin:0 0 18px;text-align:left;
  font-size:15px;flex:1}
.pack__perks li{position:relative;padding-left:24px;margin-bottom:.45em}
.pack__perks li::before{content:"";position:absolute;left:2px;top:.55em;width:10px;height:5px;
  border-left:2.5px solid var(--teal);border-bottom:2.5px solid var(--teal);
  transform:rotate(-45deg)}
.pack__marks{font-size:14.5px;color:var(--ink-mute);margin:10px 0 0}
.buy__note{font-size:15px;color:var(--ink-soft);margin:22px 0 0;max-width:80ch}

/* ---------------------------------------------------------------- FAQ + AI block */
.faq{display:grid;gap:12px}
.faq details{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  overflow:hidden;transition:box-shadow .2s ease}
.faq details:hover{box-shadow:var(--lift)}
.faq summary{cursor:pointer;padding:17px 22px;font-family:var(--serif);
  font-size:1.08rem;font-weight:600;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--teal-ink);font-weight:600}
.faq details[open] summary::after{content:"\2212"}
.faq__body{padding:0 22px 18px}
.faq__body p:last-child{margin-bottom:0}
.qa{background:var(--card);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.qa>p{margin-bottom:16px}
.qa .tablewrap{box-shadow:none;margin-bottom:0}
.qa table{min-width:420px}

/* ---------------------------------------------------------------- references + byline */
.refs ol{font-size:15.5px;color:var(--ink-soft);padding-left:1.4em}
.refs li{margin-bottom:.7em}
/* a bare citation URL is one unbreakable word: 418px wide inside a 343px
   column on a 375px phone. Let it break anywhere rather than push the page. */
.refs a{overflow-wrap:anywhere;word-break:break-word}
.byline{display:flex;gap:18px;background:var(--card);border-radius:var(--radius);
  padding:24px;box-shadow:var(--shadow);margin-top:26px}
.byline__mark{flex:0 0 54px;width:54px;height:54px;border-radius:14px;background:var(--grad);
  color:#fff;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:1.15rem;font-weight:600}
.byline b{display:block;margin-bottom:.4em}
.byline p{font-size:15.5px;color:var(--ink-soft);margin-bottom:0}

/* ---------------------------------------------------------------- related + final CTA */
.rel{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;text-align:left}
.rel a{display:block;background:var(--card);border-radius:var(--radius);padding:20px;
  text-decoration:none;box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease}
.rel a:hover{transform:translateY(-2px);box-shadow:var(--lift)}
.rel b{display:block;font-family:var(--serif);font-size:1.08rem;color:var(--ink);margin-bottom:.3em}
.rel span{display:block;font-size:15px;color:var(--ink-soft)}
.final{background:var(--clay);border-radius:var(--radius);padding:30px;
  box-shadow:var(--shadow)}
.final--media{display:grid;grid-template-columns:minmax(0,210px) minmax(0,1fr);gap:28px;
  align-items:start}
.final__img img{border-radius:var(--radius-sm);background:var(--card)}
.final__body h2{margin-bottom:.4em}
.final__price{font-weight:600;color:var(--teal-ink)}
.final__sm{font-size:14.5px;color:var(--ink-mute);margin:12px 0 0}

/* ---------------------------------------------------------------- blog */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.posts article{background:var(--card);border-radius:var(--radius);padding:24px;
  box-shadow:var(--shadow);transition:transform .2s ease, box-shadow .2s ease}
.posts article:hover{transform:translateY(-2px);box-shadow:var(--lift)}
.posts h3{margin-bottom:.4em}
.posts h3 a{text-decoration:none;color:var(--ink)}
.posts h3 a:hover{color:var(--teal-ink)}
.postmeta{font-size:14.5px;color:var(--ink-mute)}
.article{max-width:80ch}
.article h2{margin-top:1.5em}
.article h3{margin-top:1.3em}
.toc{background:var(--card);border-radius:var(--radius);padding:22px 24px;
  box-shadow:var(--shadow);margin:0 0 30px}
.toc b{display:block;font-family:var(--serif);font-size:1.1rem;margin-bottom:.5em}
.toc ol{margin-bottom:0;font-size:15.5px}
.article figure{margin:26px 0}
.article figure img{border-radius:var(--radius);box-shadow:var(--shadow)}
.article figcaption{font-size:14.5px;color:var(--ink-mute);margin-top:10px}
.article .final--media{grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:20px;padding:24px}
.article .final--media h2{font-size:1.45rem;margin-top:0}

/* ---------------------------------------------------------------- guarantee band */
.fcta{background:var(--teal-ink);padding:52px 0}
.fcta__box{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,250px);gap:34px;
  align-items:center;background:var(--paper);border-radius:var(--radius);
  padding:32px;box-shadow:var(--lift)}
.fcta__eye{display:block;font-size:13.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--teal-ink);margin-bottom:10px}
.fcta__h{font-family:var(--serif);font-size:1.6rem;line-height:1.2;margin:0 0 .6em;
  font-weight:600}
.fcta__sm{font-size:14.5px;color:var(--ink-mute);margin:12px 0 0}
.fcta__img img{margin-inline:auto}

/* ---------------------------------------------------------------- footer */
/* An oat slab: the guarantee set as an oversized figure beside the identity,
   and the index broken into three short columns rather than one long list. */
footer{background:var(--oat-deep);color:var(--ink);padding:48px 0 0;
  border-top:4px solid var(--teal-deep)}
.fgrid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:34px;padding-bottom:36px}
.fbrand{display:block;font-family:var(--serif);font-size:1.7rem;font-weight:600;
  color:var(--ink)}
.fbrand span{color:var(--teal-deep)}
.frole{font-size:16px;color:var(--ink-soft);margin:6px 0 18px}
.fguar{display:flex;align-items:center;gap:16px;background:var(--paper);
  border-radius:var(--radius);padding:18px 20px;margin:0 0 18px;box-shadow:var(--shadow-sm)}
.fguar b{font-family:var(--serif);font-size:3.1rem;line-height:.9;color:var(--teal-deep)}
.fguar span{font-size:15px;color:var(--ink-soft)}
.fsealrow{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.fsealrow img{background:var(--paper);border-radius:12px;padding:6px}
.fseals>span{display:block;font-size:15px;color:var(--ink-soft)}
.fh{font-family:var(--serif);font-size:16px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);margin:0 0 12px}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:9px}
footer a{color:var(--ink-soft);text-decoration:none;font-size:16px}
footer a:hover{color:var(--teal-ink);text-decoration:underline}
.fcard{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;background:var(--paper);
  border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-sm);margin-bottom:24px}
.fcard p{margin:0;font-size:17px;color:var(--ink-soft)}
.fcard b{color:var(--ink)}
/* Standalone contact links, each on a line of its own: 21px tall as inline
   text, under the 24px WCAG 2.5.8 floor. Padding grows the hit area and the
   negative margin gives the space back, so the card renders identically. */
.fcard a[href^="tel:"],.fcard a[href^="mailto:"],
td a[href^="tel:"],td a[href^="mailto:"],
.toc li a,.readon a{display:inline-block;padding-block:3px;margin-block:-3px}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding-bottom:26px}
.fpay span{font-size:15.5px;color:var(--ink-soft)}
.disc{background:var(--ink);color:#d9cdc1;padding:26px 0 30px}
.disc p{font-size:15.5px;max-width:none}
.disc b{color:#fff}
.disc__list{list-style:none;padding:0;margin:16px 0 0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px 30px}
.disc__list li{font-size:17px;color:#c2b4a7;padding-left:16px;position:relative}
.disc__list li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--teal)}
.disc a{color:#ffd9cb}
.copy{font-size:15px;color:#b5a698;margin:20px 0 0}

/* ---------------------------------------------------------------- buy bar */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--ink);
  color:#f2e8dc;transform:translateY(105%);transition:transform .28s ease;
  box-shadow:0 -6px 22px rgba(42,33,28,.28);display:block}
.buybar.show{transform:translateY(0)}
.buybar__in{width:min(var(--wrap),92%);margin-inline:auto;display:flex;
  align-items:center;justify-content:space-between;gap:18px;padding-block:12px}
.buybar__t b{display:block;font-size:16px;color:#fff}
.buybar__t span{display:block;font-size:14.5px;color:#c2b4a7}

/* ---------------------------------------------------------------- reveal */
[data-reveal]{opacity:0;transform:translateY(14px);
  transition:opacity .5s ease, transform .5s ease}
[data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;
    animation-iteration-count:1 !important;transition-duration:.001ms !important}
  [data-reveal]{opacity:1;transform:none}
  .card:hover,.step:hover,.rel a:hover,.shots figure:hover,.ingcard:hover,
  .posts article:hover,.badgewall figure:hover,.card--pack:hover,.btn:hover{transform:none}
}

/* ---------------------------------------------------------------- forms */
.form{display:grid;gap:16px;background:var(--card);border-radius:var(--radius);
  padding:26px;box-shadow:var(--shadow)}
.form label{display:block;font-size:15.5px;font-weight:600;margin-bottom:6px}
.form input,.form select,.form textarea{width:100%;font-family:var(--sans);
  font-size:16.5px;padding:12px 14px;border:1.5px solid var(--rule);
  border-radius:var(--radius-sm);background:var(--paper);color:var(--ink)}
.form textarea{min-height:140px}
.form .fnote{font-size:14.5px;color:var(--ink-mute);margin:0}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1080px){
  .fgrid{grid-template-columns:repeat(2,1fr)}
  .versus{grid-template-columns:1fr;font-size:15px}
  .versus__h{display:none}
  .versus>div{border-bottom:1px solid var(--rule-soft)}
}
@media (max-width:980px){
  .grid,.steps,.shots,.rel,.posts,.prices{grid-template-columns:repeat(2,1fr)}
  .inglist{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:22px}
  .split--flip .split__img{order:0}
  .fcta__box{grid-template-columns:1fr;gap:24px}
  .fcta__img{order:-1}
  .final--media{grid-template-columns:1fr}
  .disc__list{grid-template-columns:1fr}
}
@media (max-width:760px){
  body{font-size:17px}
  .sec{padding:40px 0}
  .grid,.grid.g2,.grid.g4,.steps,.shots,.shots.s2,.rel,.posts,.prices,
  .badgewall,.fcard{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .card--pack.featured{transform:none}
  .card--pack.featured:hover{transform:translateY(-2px)}
  .fgrid{grid-template-columns:1fr;gap:26px}
  .buybar__in{gap:12px;padding-block:10px}
  .buybar__t span{display:none}
  .article .final--media{grid-template-columns:1fr}
  figure.portrait img{width:100%}
}

/* --- 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--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 ==== */
/* ==== modern surface (modern_surface.py) ==== */
/* House rule 11. This stylesheet had 45 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 (42,33,28), 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-sm:12px;
  --shadow:0 1px 2px rgba(42,33,28,.06), 0 6px 18px rgba(42,33,28,.07);
  --lift:0 2px 6px rgba(42,33,28,.09), 0 16px 34px rgba(42,33,28,.14);
}

.card,
.step,
.keypoints,
.callout,
.alert,
.toc,
.byline,
.posts article,
.shots figure,
.badgewall figure,
.tablewrap,
.faq,
.ingcard,
.final,
.figures>div,
.answer,
.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. */
.faq,
.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,
.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,
.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,
.posts h3 a:hover{transform:none}
}
/* ==== end modern surface ==== */

/* ==== footer type floor (footer_type.py) ==== */
/* The footer carried the smallest text on the page -- the legal pages,
   the guarantee and the contact routes, set as fine print. Running text
   and links sit at 16px, column headings at 15px (uppercase and
   letter-spaced, so they read larger than the number). Last in the file
   on purpose: it outranks the phone breakpoints that shrank them. */
footer .copy{font-size:16px}
footer .disc p{font-size:16px}
footer .fguar span{font-size:16px}
footer .fpay span{font-size:16px}
footer .fseals>span{font-size:16px}
/* ==== end footer type floor ==== */
.review-label{margin:12px 0 0;padding:10px 12px;border:2px solid currentColor;font-size:.92rem;line-height:1.45;max-width:22rem}.review-label a{font-weight:600}body.home .hero__tile--c{display:none}
.review-foot{margin:0;padding:.6rem 0;font-size:.92rem}.review-foot a{font-weight:600}