/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Bitter Fallback";src:local("Georgia");font-weight:400;size-adjust:105.60%;ascent-override:88.54%;descent-override:25.09%;line-gap-override:0.00%}
@font-face{font-family:"Bitter Fallback";src:local("Georgia Bold");font-weight:600 900;size-adjust:92.32%;ascent-override:101.28%;descent-override:28.71%;line-gap-override:0.00%}
@font-face{font-family:"Karla Fallback";src:local("Arial");font-weight:400;size-adjust:103.91%;ascent-override:88.25%;descent-override:24.25%;line-gap-override:0.00%}
@font-face{font-family:"Karla Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:100.22%;ascent-override:91.50%;descent-override:25.14%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* ============================================================================
   gotrimoryn.com -- Trimoryn, one capsule a day.

   DESIGN SLOT (_generators/batch12_assignments.py, row 82)
     type    Bitter / Karla
     layout  centred hero, bottle on the axis, headline above and the pack
             ladder directly beneath it in one row; every section below is
             centred to the same 68ch measure
     cards   filled cards on a deeper tint of the ground, radius 14, no border;
             the featured tier reads by fill weight alone
     ground  warm sand paper with a soft olive gradient wash behind the product
             ONLY, flat everywhere else
     depth   soft lift -- wide low-opacity shadows, nothing hard-edged
     motion  burn / wick-draw          mark  arch / leaf
     header  centred wordmark over a centred destination row, both on sand,
             no rule
     footer  an olive block, the index in two generous columns, the returns
             address in its own full-width row above them

   THE GROUND LEVER IS THE ONE TO READ TWICE. The wash lives behind the
   product and nowhere else, which is why the hero motif takes a RADIAL
   centred low on the column rather than a linear across the whole band, and
   why every section below .hero paints flat sand or a flat tint. Do not add a
   gradient to a section here to "match" another site in this estate.

   COLOUR COMES FROM THE BOTTLE. The Trimoryn label is white with a deep
   pine-green wrap and a warm gold rule; the vendor's own hero art stands that
   bottle in leaves on cream. So the ground is warm sand, the accent is the
   olive those leaves read as, and the label's pine and the artwork's gold are
   both carried as named tokens rather than mixed out of the accent.
   ========================================================================= */

:root{
  /* ground -- warm sand paper */
  --paper:#f7f1e4;
  --paper-tint:#efe5d1;
  --paper-deep:#e7dbc2;
  --paper-card:#fdfaf4;

  /* ink */
  --ink:#23201a;
  --ink-soft:#423c31;
  --muted:#5b5346;
  --faint:#665e4e;          /* was #837a69: 3.04:1 on the hero wash, 3.77:1 on paper */
  --line:#e2d6bd;
  --line-soft:#efe7d6;

  /* accent, the olive -- deliberately the most saturated token in the block,
     because hero_motifs.py and brand_marks.py both pick the site accent by
     saturation and the slot says the wash behind the product is olive */
  --accent:#5f7d1e;
  --accent-deep:#3d5212;
  --accent-tint:#e9eed8;
  --accent-edge:#c7d3a4;
  --accent-lift:#dde5c4;    /* the edge green on the LIGHTENED slab, where #c7d3a4 is 4.24:1 */
  --accent-on:#ffffff;
  --olive-slab:#445719;

  /* the label's own pine, and the gold rule on the vendor artwork */
  --pine:#17423c;
  --brass:#917b45;
  --brass-deep:#7a6533;     /* the gold as TEXT: 5.2:1 on a card, where --brass is 3.93 */
  --brass-soft:#d9c9a4;
  --brass-line:#c9b68a;

  --on-dark:#f4f0e4;
  --on-dark-soft:#d9d3c2;

  /* type */
  --serif:"Bitter","Bitter Fallback",Georgia,"Times New Roman",serif;
  --sans:"Karla","Karla Fallback","Segoe UI",Helvetica,Arial,sans-serif;

  /* metrics */
  --wrap:1120px;
  --measure:68ch;
  --measure-wide:86ch;
  --r:14px;
  --r-s:8px;
  --r-l:22px;
  --navh:104px;

  /* depth: soft lift only. Nothing in this file uses a hard-edged shadow. */
  --shadow-sm:0 4px 18px rgba(46,40,26,.06);
  --shadow:0 12px 38px rgba(46,40,26,.09);
  --shadow-lg:0 26px 70px rgba(46,40,26,.13);

  --figw:320px;
}

*,*::before,*::after{box-sizing:border-box}
*{min-width:0}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17.5px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
img,svg,video,table{max-width:100%}
img{height:auto}
a{color:var(--accent-deep);text-underline-offset:3px}
a:hover{color:var(--accent)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;line-height:1.2;margin:0 0 .5em;
  letter-spacing:-.008em}
h1{font-size:clamp(2rem,1.36rem+1.7vw,2.9rem);line-height:1.13}
h2{font-size:clamp(1.5rem,1.14rem+1.2vw,2.1rem)}
h3{font-size:clamp(1.14rem,1.03rem+.4vw,1.34rem)}
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:700;color:var(--ink)}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;
  padding:10px 16px;z-index:200;border-radius:0 0 var(--r-s) 0}
.skip:focus{left:0}

.wrap{width:min(var(--wrap),calc(100% - 44px));margin-inline:auto}

/* ---------------------------------------------------------------- topline */
/* Five facts above the navigation so the menu does not have to carry any. */
.util{background:var(--olive-slab);color:var(--on-dark);font-size:.9rem}
.util__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:8px 22px;padding:8px 0;text-align:center}
.util__item{display:inline-flex;gap:6px;align-items:baseline;color:var(--on-dark-soft)}
.util__item b{color:#fff;font-weight:700}
.util__tel{color:#fff;font-weight:700;text-decoration:none;letter-spacing:.01em}
.util__tel:hover{color:var(--accent-edge)}

/* ------------------------------------------------------------------- nav */
/* Centred wordmark over a centred destination row, both on sand, no rule.
   The bar is two stacked rows and it must NEVER wrap into three: the menu
   sheds to a burger below 1024 rather than folding. */
.nav{position:sticky;top:0;z-index:90;background:var(--paper);
  transition:transform .28s ease,box-shadow .28s ease}
.nav--away{transform:translateY(-104%)}
.nav.is-stuck{box-shadow:var(--shadow-sm)}
.nav__row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:14px;padding:16px 0 4px}
.brand{grid-column:2;display:inline-flex;align-items:center;gap:12px;
  text-decoration:none;color:var(--ink);justify-self:center}
.brand svg{width:40px;height:40px;flex:none}
.brand__t{display:flex;flex-direction:column;line-height:1.05}
.brand__prod{font-family:var(--serif);font-weight:700;font-size:1.62rem;
  letter-spacing:-.02em;color:var(--ink)}
.brand__prod span{color:var(--accent)}
.brand__firm{font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);margin-top:3px}
.nav__cta{grid-column:3;justify-self:end}
.nav__cta .btn{font-size:.93rem;padding:11px 20px}
.navmenus{grid-column:1 / -1;grid-row:2}
.nav__track{display:flex;justify-content:center}
.menu{display:flex;flex-wrap:nowrap;gap:26px;list-style:none;margin:0;
  padding:6px 0 14px}
.menu a{text-decoration:none;color:var(--muted);font-size:.95rem;font-weight:500;
  white-space:nowrap;padding:4px 0;border-bottom:2px solid transparent;
  transition:color .18s ease,border-color .18s ease}
.menu a:hover,.menu a[aria-current]{color:var(--accent-deep);border-color:var(--accent)}
.burger{display:none;grid-column:1;justify-self:start;background:none;border:0;
  width:44px;height:44px;padding:9px;cursor:pointer}
.burger span{display:block;height:2px;background:var(--ink);margin:5px 0;border-radius:2px;
  transition:transform .2s ease,opacity .2s ease}

/* ----------------------------------------------------------------- button */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-weight:700;font-size:1rem;line-height:1.2;
  padding:15px 28px;border-radius:999px;text-decoration:none;border:2px solid transparent;
  cursor:pointer;transition:transform .16s ease,box-shadow .2s ease,background .2s ease}
.btn--cta{background:var(--accent);color:var(--accent-on);box-shadow:var(--shadow-sm)}
.btn--cta:hover{background:var(--accent-deep);color:#fff;transform:translateY(-2px);
  box-shadow:var(--shadow)}
.btn--ghost{background:transparent;color:var(--accent-deep);border-color:var(--accent-edge)}
.btn--ghost:hover{background:var(--accent-tint);color:var(--accent-deep)}
.btn--gold{background:var(--brass);color:#fff}
.btn--gold:hover{background:#7b6737;color:#fff}
.btn--lg{padding:17px 34px;font-size:1.06rem}
.btn--block{display:flex;width:100%}

/* ------------------------------------------------------------------- hero */
/* CENTRED. Bottle on the axis, headline above it, the pack ladder in one row
   directly beneath it. Everything is one column at every width, so the only
   thing that changes on a phone is the scale. */
.hero{position:relative;overflow:hidden;overflow:clip;
  background:radial-gradient(120% 80% at 50% 72%,var(--accent-tint),var(--paper) 58%,var(--paper));
  padding:20px 0 46px}
.hero__grid{display:grid;grid-template-columns:1fr;justify-items:center;
  text-align:center;gap:0}
.hero__copy{display:contents}
.hero .eyebrow{order:1}
.hero h1{order:2;max-width:30ch;margin:2px auto .3em}
.hero .answer{order:3}
.hero__media{order:4}
.hero .packladder{order:5}
.hero__cta{order:6}
.hero .ticks{order:7}
.hero .pay{order:8}
.hero__sub{order:9}
.hero .factpills{order:10}
.hero .figures{order:11}

.eyebrow{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent-deep);margin:0 0 6px}

.answer{background:var(--paper-card);border-radius:var(--r);padding:18px 24px;
  box-shadow:var(--shadow-sm);max-width:70ch;margin:0 auto 12px;text-align:left}
.answer .qtag,.qtag{display:inline-block;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;font-weight:700;color:var(--accent);margin-bottom:6px}
.answer p{margin:0 0 .6em}
.answer p:last-child{margin-bottom:0}
.answer .first{font-size:1.06rem;color:var(--ink)}

/* A TALL panel with the bottle standing at the bottom of it, and it clips.
   The wick-draw plume is sized and travelled in percentages of THIS box, so
   the box is what decides whether the motion stays around the product or runs
   up across the headline. It stays here. */
.hero__media{position:relative;width:min(560px,100%);margin:2px auto 4px;
  min-height:clamp(300px,36vh,430px);overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.hero__stick{position:relative;display:flex;flex-direction:column;align-items:center}
.hero__card{position:relative;z-index:2;background:transparent;display:flex;
  align-items:flex-end;justify-content:center}
.hero__card img{width:auto;max-width:100%;height:auto;
  max-height:clamp(250px,36vh,420px);object-fit:contain;
  filter:drop-shadow(0 26px 34px rgba(46,40,26,.22))}
.hero__tag{position:relative;z-index:3;margin-top:10px;display:inline-block;
  background:var(--paper-card);color:var(--muted);border-radius:999px;
  padding:6px 16px;font-size:.82rem;box-shadow:var(--shadow-sm)}
.floaty{position:absolute;z-index:3;background:var(--paper-card);border-radius:var(--r-s);
  padding:9px 14px;font-weight:700;font-size:.86rem;color:var(--ink);
  box-shadow:var(--shadow);line-height:1.25;text-align:left}
.floaty small{display:block;font-weight:500;color:var(--muted);font-size:.78rem}
.floaty--tl{left:-6px;top:6%}
.floaty--br{right:-6px;bottom:22%}

/* the pack ladder, directly beneath the bottle, in one row */
.packladder{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  margin:14px auto 20px;padding:0;list-style:none;max-width:640px}
.packladder li{margin:0}
.packladder a{display:flex;flex-direction:column;align-items:center;gap:1px;
  text-decoration:none;background:var(--paper-tint);border-radius:var(--r);
  padding:11px 20px;min-width:150px;color:var(--ink);box-shadow:var(--shadow-sm);
  transition:transform .16s ease,box-shadow .2s ease,background .2s ease}
.packladder a:hover{transform:translateY(-3px);box-shadow:var(--shadow);
  background:var(--accent-tint);color:var(--ink)}
.packladder b{font-family:var(--serif);font-size:1.16rem;line-height:1.1}
.packladder span{font-size:.82rem;color:var(--muted)}
.packladder .is-pick a{background:var(--accent-tint)}

.hero__cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:0 0 18px}
.ticks{list-style:none;padding:0;margin:0 auto 18px;max-width:62ch;text-align:left;
  display:grid;gap:7px}
.ticks li{display:flex;gap:10px;align-items:flex-start;margin:0;color:var(--ink-soft)}
.ck{color:var(--accent);font-weight:700;flex:none}
.pay{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:center;
  margin:0 0 16px;font-size:.86rem;color:var(--faint)}
.hero__sub{font-size:.9rem;color:var(--muted);margin:0 0 14px}
.hero__sub span{white-space:nowrap}
.factpills{list-style:none;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  padding:0;margin:0 0 16px}
.factpills li{margin:0;background:var(--paper-tint);border-radius:999px;
  padding:7px 16px;font-size:.88rem;color:var(--ink-soft)}
.factpills b{color:var(--accent-deep)}
.figures{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:2px 0 0}
.figures>div{background:var(--paper-card);border-radius:var(--r);padding:14px 22px;
  min-width:172px;box-shadow:var(--shadow-sm)}
.figures b{display:block;font-family:var(--serif);font-size:1.6rem;color:var(--accent-deep);
  line-height:1.1}
.figures span{display:block;font-size:.82rem;color:var(--muted);line-height:1.35}
.hero__rating{display:flex;gap:8px;align-items:center;justify-content:center;
  font-size:.9rem;color:var(--muted);margin:0 0 12px}
.stars{color:var(--brass-deep);letter-spacing:.06em}

/* ------------------------------------------------------------- trust strip */
.trust{background:var(--paper-tint);padding:26px 0}
.trust__row{display:flex;flex-wrap:wrap;gap:22px 30px;align-items:flex-start;
  justify-content:center}
.trust__row figure{margin:0;width:118px;text-align:center}
.trust__row img{width:72px;height:72px;object-fit:contain}
.trust__row figcaption{font-size:.82rem;color:var(--muted);line-height:1.35;margin-top:6px}
.trust__note{flex:1 1 100%;max-width:var(--measure);margin:6px auto 0;text-align:center;
  font-size:.92rem;color:var(--muted)}

/* --- 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.
   REGENERATED ON EVERY BUILD from the rules below the marker. Edit
   the originals; never this copy, which is overwritten. */
@media (max-width:760px){
  .hero{padding:22px 0 36px}
  /* The shot goes DIRECTLY after the H1: a buyer arriving from an ad wants the bottle confirmed before they read sixty words about it. The DOM order is unchanged, so the Quick Answer still follows the H1 in source. */ .hero__media{order:3;min-height:clamp(270px,36vh,360px)}
  .hero .packladder{order:4}
  .hero .answer{order:5}
  .hero__cta{order:6}
  .hero .ticks{order:7}
  .hero .pay{order:8}
  .hero__sub{order:9}
  .hero .factpills{order:10}
  .hero .figures{order:11}
  .hero h1{max-width:100%}
  .hero__card img{max-height:clamp(210px,34vh,300px)}
  /* The chips stay ON the bottle at phone width. Stacked as static blocks they read as two stray labels under the lot tag; .hero__media clips, so nothing they overhang can widen the page. */ .floaty{font-size:.8rem;padding:7px 11px}
  .hero__stick{width:auto}
}
@media (max-width:760px){
  body:has(.hero) .hero__stick::before{width:96%;aspect-ratio:1.16}
  body:has(.hero) .hero__stick::after{width:84%}
}
/* --- end of the copied hero responsive rules --- */

/*!SITE-HOME-CRIT-START*/
/* HOME PAGE ONLY. class="hero" is on index.html and on no other page of this
   site, and #pricing is a sibling of .hero inside main#main, so `.hero ~ '
   resolves on the home page alone. Layout only -- everything here moves a
   box, which is why it sits above the marker and the site is rebuilt after.

   1. THE BUY BUTTON ON THE FIRST SCREEN.
   The centred hero stacks eyebrow / headline / quick answer / BOTTLE / pack
   ladder / buttons, which left the hero CTA far below the fold on a 1440x900
   screen: the money page's first screen had nothing to click. On DESKTOP the
   buttons and the payment line move up to sit directly under the quick
   answer, and the product, the ladder and the evidence follow.
   The phone order is composed separately in @media (max-width:760px) below
   the marker and is deliberately untouched -- this block starts at 761.

   2. THE RECOMMENDED TIER READS AS RAISED.
   18px of negative margin, never a transform, because the reveal pass sets
   transform:none on .buy__card. The card's own head gives the same 18px back
   as padding, so the three Add To Cart buttons keep the single baseline that
   the fixed head, the fixed image box and the per-item min-heights exist to
   hold. Scoped to 1025 and up: below that the .buy grid is a single column
   and a negative margin would eat the row gap instead. */
@media (min-width:761px){
  .hero__cta{order:4;margin:6px 0 14px}
  .hero .pay{order:5;margin:0 0 22px}
  .hero__media{order:6}
  .hero .packladder{order:7}
  .hero .ticks{order:8}
}
@media (min-width:1025px){
  .hero ~ #pricing .buy__card--feature{margin-top:0}
  .hero ~ #pricing .buy__card--feature .buy__head{padding-top:36px}
}
/* Room under each feature row for the dashed rule painted below the marker.
   All three cards carry four rows, so the four identical additions land on
   all three and the Add To Cart baseline does not move. */
.hero ~ #pricing .buy__perks li{padding-bottom:7px}
.hero ~ #pricing .buy__perks li:last-child{padding-bottom:0}
/*!SITE-HOME-CRIT-END*/


/* ---- hero motif -- wick-draw ---------------------------------------- */
.hero{position:relative;overflow-x:clip;overflow-y:visible}
:where(.hero__media){position:relative}
.hero__card{position:relative;z-index:2}
.hero__card img{position:relative;z-index:3}
.hero{background:radial-gradient(120% 80% at 50% 72%,#dcdcc0,#f7f1e4 58%,#f7f1e4)}.hero__media::before{content:'';position:absolute;left:50%;bottom:-8%;width:44%;aspect-ratio:.42;translate:-50% 0;z-index:1;pointer-events:none;filter:blur(13px);border-radius:50% 50% 42% 42%;background:linear-gradient(0deg,rgba(95,125,30,0.40),transparent 88%);animation:gtrWick 12s cubic-bezier(.35,.05,.4,1) infinite}.hero__media::after{content:'';position:absolute;left:50%;bottom:2%;width:96%;aspect-ratio:2.6;translate:-50% 0;z-index:0;pointer-events:none;border-radius:50%;background:radial-gradient(closest-side,rgba(95,125,30,0.26),transparent 70%);animation:gtrEmber 12s ease-in-out infinite}@keyframes gtrWick{0%{transform:translateY(26%) scaleY(.6) scaleX(1.15);opacity:0}28%{opacity:.62}72%{transform:translateY(-118%) scaleY(1.2) scaleX(.62);opacity:.34}100%{transform:translateY(-168%) scaleY(1.3) scaleX(.44);opacity:0}}@keyframes gtrEmber{0%,100%{transform:scale(.92);opacity:.22}50%{transform:scale(1.06);opacity:.6}}
@media(prefers-reduced-motion:reduce){.hero__card{animation:none!important}.hero__media::before,.hero__media::after{animation:none!important;opacity:0!important}}

/*!CRITICAL-END*/

/* ---------------------------------------------------------------- sections */
/* Every section is centred on the same 68ch measure. The heads are centred,
   the prose is centred as a block, and only tables and card grids are allowed
   to run wider. That is the layout lever: one column, one measure, no rails. */
.sec{padding:62px 0}
.sec--tight{padding:34px 0}
.sec--lift{background:var(--paper-tint)}
.sec--slab{background:var(--olive-slab);color:var(--on-dark)}
.sec--center{text-align:center}
.sec>.wrap>p,.sec>.wrap>ul,.sec>.wrap>ol,.sec>.wrap>h3,.sec>.wrap>h4{
  max-width:var(--measure);margin-inline:auto}
.sec__head{max-width:var(--measure);margin:0 auto 30px;text-align:center}
.sec__head h2{margin-bottom:.35em}
.lead{font-size:1.06rem;color:var(--muted);margin:0}
.note{font-size:.92rem;color:var(--faint)}
.sec--slab .lead,.sec--slab .note{color:var(--on-dark-soft)}
.sec--slab a{color:var(--accent-edge)}
.sec--slab h2,.sec--slab h3,.sec--slab b,.sec--slab strong{color:#fff}
/* On the slab the eyebrow, the row headers and anything inside a LIGHT panel
   all inherited a colour meant for the other ground. Measured on pixels:
   eyebrow 1.09:1, .facts b 1.04:1, .dtable row header 2.35:1. */
.sec--slab .eyebrow{color:var(--accent-edge)}
.sec--slab .dtable tbody th{color:#fff}
.sec--slab .facts b,.sec--slab .facts strong,
.sec--slab .facts h2,.sec--slab .facts h3,.sec--slab .facts h4{color:var(--ink)}
.dropcap::first-letter{float:left;font-family:var(--serif);font-size:3.3rem;
  line-height:.82;padding:6px 10px 0 0;color:var(--accent-deep)}
.pullquote{max-width:var(--measure);margin:26px auto;background:var(--accent-tint);
  border-radius:var(--r);padding:24px 28px;box-shadow:var(--shadow-sm)}
.pullquote p{font-family:var(--serif);font-size:1.18rem;line-height:1.5;margin:0 0 .5em}
.pullquote cite{font-style:normal;font-size:.85rem;color:var(--muted)}
.sep{height:1px;background:var(--line);border:0;margin:34px auto;max-width:var(--measure)}

/* ------------------------------------------------------------------- cards */
/* Filled, no border, radius 14, soft lift. A featured card reads by FILL
   WEIGHT alone -- it is never raised, scaled or outlined. */
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--paper-card);border-radius:var(--r);padding:24px 26px;
  box-shadow:var(--shadow-sm)}
.sec--lift .card{background:var(--paper)}
.sec--slab .card{background:rgba(255,255,255,.07)}
.card h3{margin-bottom:.4em}
.card p:last-child{margin-bottom:0}
.flag{display:inline-block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--accent-deep);background:var(--accent-tint);
  border-radius:999px;padding:4px 12px;margin-bottom:10px}
.callout{max-width:var(--measure-wide);margin:24px auto;background:var(--accent-tint);
  border-radius:var(--r);padding:22px 26px}
.callout p:last-child{margin-bottom:0}
.alert{max-width:var(--measure-wide);margin:24px auto;background:#f6ecdc;
  border-radius:var(--r);padding:20px 24px;color:var(--ink-soft)}
.alert p:last-child{margin-bottom:0}

.whygrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.whycard{background:var(--paper-card);border-radius:var(--r);padding:24px 26px;
  box-shadow:var(--shadow-sm)}
.sec--lift .whycard{background:var(--paper)}
.whycard h3{font-size:1.1rem;margin-bottom:.4em}
.whycard p:last-child{margin-bottom:0}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:step}
.step{background:var(--paper-card);border-radius:var(--r);padding:26px;
  box-shadow:var(--shadow-sm)}
.sec--lift .step{background:var(--paper)}
.step__n{counter-increment:step;display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;background:var(--accent);color:#fff;
  font-family:var(--serif);font-weight:700;margin-bottom:12px}
.step__n::before{content:counter(step)}
.step p:last-child{margin-bottom:0}

.iconrow{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.iconrow figure{margin:0;background:var(--paper-card);border-radius:var(--r);
  padding:22px 24px;box-shadow:var(--shadow-sm)}
.sec--lift .iconrow figure{background:var(--paper)}
.iconrow img{width:58px;height:58px;object-fit:contain;margin-bottom:8px}
.iconrow figcaption{font-size:.95rem;color:var(--muted)}
.iconrow figcaption b{display:block;font-family:var(--serif);font-size:1.08rem;
  color:var(--ink);margin-bottom:4px}

/* ------------------------------------------------------------- ingredients */
.ing{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-bottom:26px}
.ingcard{background:var(--paper-card);border-radius:var(--r);padding:24px 26px;
  box-shadow:var(--shadow-sm)}
.sec--lift .ingcard{background:var(--paper)}
.ingcard h3{margin-bottom:.15em}
.ingsub,.ing__dose{display:block;font-size:.85rem;font-weight:700;color:var(--accent-deep);
  letter-spacing:.04em;margin-bottom:.7em}
.ingcard p:last-child{margin-bottom:0}
.ingthumbs{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* --------------------------------------------------------- the label panel */
.facts{max-width:640px;margin:0 auto 24px;background:var(--paper-card);
  border-radius:var(--r);padding:22px 24px;box-shadow:var(--shadow)}
.facts__h{font-family:var(--serif);font-size:1.7rem;font-weight:700;
  border-bottom:6px solid var(--ink);padding-bottom:4px;margin-bottom:8px;color:var(--ink)}
.facts__serve{font-size:.92rem;margin:0 0 10px;color:var(--ink-soft)}
.facttab{width:100%;border-collapse:collapse;font-size:.94rem}
.facttab th,.facttab td{text-align:left;padding:7px 4px;border-bottom:1px solid var(--line)}
.facttab thead th{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);border-bottom:2px solid var(--ink)}
.facttab tbody th{font-weight:500;color:var(--ink)}
.facttab td{text-align:right;white-space:nowrap;color:var(--ink-soft)}
.facts__foot{font-size:.82rem;color:var(--muted);margin:10px 0 0}

/* ------------------------------------------------------------------ tables */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 auto 22px;
  max-width:var(--measure-wide)}
.dtable{width:100%;border-collapse:collapse;font-size:.96rem;background:var(--paper-card);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm)}
.dtable caption{caption-side:top;text-align:left;font-size:.88rem;color:var(--faint);
  padding:0 0 8px}
.dtable th,.dtable td{padding:12px 14px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line-soft)}
.dtable thead th{background:var(--accent-tint);font-family:var(--serif);font-size:.92rem;
  color:var(--accent-deep)}
.dtable tbody th{font-weight:700;color:var(--ink)}
.dtable tr:last-child th,.dtable tr:last-child td{border-bottom:0}
.sec--slab .dtable{background:rgba(255,255,255,.06);color:var(--on-dark)}
.sec--slab .dtable thead th{background:rgba(255,255,255,.12);color:#fff}
.sec--slab .dtable th,.sec--slab .dtable td{border-color:rgba(255,255,255,.14)}
.sec--slab .dtable caption{color:var(--on-dark-soft)}

/* --------------------------------------------------------------- who it is for */
.whofor{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;
  max-width:var(--measure-wide);margin-inline:auto}
.forlist{background:var(--accent-tint);border-radius:var(--r);padding:24px 26px;
  box-shadow:var(--shadow-sm)}
.forlist--no{background:var(--paper-deep)}
.forlist h3{margin-bottom:.5em}
.forlist ul{margin:0;padding-left:1.15em}
.forlist li:last-child{margin-bottom:0}

/* --------------------------------------------------------------- the panel */
.shots{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;
  max-width:var(--measure-wide);margin:0 auto 22px}
.shots--wide{grid-template-columns:repeat(3,1fr)}
.shots figure{margin:0;background:var(--paper-card);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--shadow-sm)}
.sec--lift .shots figure{background:var(--paper)}
.shots img{display:block;width:100%;height:auto}
.shots figcaption{padding:16px 20px;font-size:.94rem;color:var(--muted)}
.shots figcaption b{display:block;font-family:var(--serif);font-size:1.06rem;
  color:var(--ink);margin-bottom:4px}
.shots figcaption p{margin:0}
/* Every caption in a row starts on the same line.
   The vendor pack mixes shapes, and a .shots row put them side by side at
   their own heights: on the home page the three-up row ran 284px, 544px and
   544px, so the first caption began 260px above the other two and the first
   card carried 234px of empty ground under its own words; the ingredients
   row paired a 1:1 listing shot against a 1.91 scene and read worse. A fixed
   media box with object-fit:contain crops nothing -- the picture is scaled
   whole and centred on the figure's own ground -- and every caption in the
   row then starts level. Desktop only: below 761px .shots is one column and
   each picture should fill the phone at its own shape. */
@media (min-width:761px){
  .shots img{height:400px;object-fit:contain}
  .shots--wide img{height:320px}
}

/* ---------------------------------------------------------------- the band */
.promo{max-width:var(--measure-wide);margin-inline:auto;background:var(--accent-tint);
  border-radius:var(--r-l);padding:26px 30px;display:flex;flex-wrap:wrap;gap:18px;
  align-items:center;justify-content:space-between}
.promo p{margin:0;flex:1 1 380px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:center;
  background:var(--olive-slab);border-radius:var(--r-l);padding:28px 24px;color:var(--on-dark)}
.stats b{display:block;font-family:var(--serif);font-size:2rem;color:#fff;line-height:1.1}
.stats span{display:block;font-size:.85rem;color:var(--on-dark-soft);line-height:1.35}
.badgewall{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.badgewall figure{margin:0;width:132px;text-align:center}
.badgewall img{width:84px;height:84px;object-fit:contain}
.badgewall figcaption{font-size:.82rem;color:var(--muted);margin-top:6px}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;list-style:none;
  padding:0;margin:0 0 18px}
.chips li{margin:0;background:var(--paper-tint);border-radius:999px;padding:6px 14px;
  font-size:.86rem;color:var(--ink-soft)}

/* ------------------------------------------------------ the add-to-cart panel */
/* The featured card differs ONLY by fill. No lift, no scale, no border --
   that is the cards lever, and it is why .buy__card--feature sets a darker
   background and nothing else. */
.buy{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  max-width:var(--measure-wide);margin:0 auto 18px}
.buy__card{display:flex;flex-direction:column;background:var(--paper-card);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm)}
.buy__card--feature{background:var(--accent-tint)}
.buy__head{padding:18px 22px 10px;text-align:center}
.buy__flag{display:inline-block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:#fff;background:var(--accent);border-radius:999px;padding:4px 12px;
  min-height:22px}
.buy__flag--ghost{visibility:hidden}
.buy__name{font-family:var(--serif);font-size:1.32rem;font-weight:700;margin:8px 0 2px}
.buy__supply{font-size:.86rem;color:var(--muted);margin:0;min-height:2.6em}
.buy__body{padding:0 22px 22px;text-align:center;display:flex;flex-direction:column}
/* ONE image slot. The vendor ships the 2 and 3 bottle shots at 1080x1350 and
   the 6-bottle shot at 1080x800, so an auto height made the featured card's
   picture 97px shorter and put its Add To Cart button on its own baseline.
   A fixed box with object-fit:contain gives all three cards one slot. */
.buy__img{width:100%;max-width:200px;height:240px;margin:0 auto 10px;object-fit:contain}
.buy__price{font-family:var(--serif);font-size:2.5rem;line-height:1;margin:0 0 4px;
  color:var(--accent-deep)}
.buy__cur{font-size:1.1rem;vertical-align:super;margin-right:2px}
.buy__per{display:block;font-family:var(--sans);font-size:.8rem;font-weight:500;
  color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-top:4px}
.buy__total{font-size:.92rem;color:var(--ink-soft);margin:0 0 12px;min-height:3.2em}
.buy__was{text-decoration:line-through;color:var(--faint)}
.buy__perks{list-style:none;padding:0;margin:0 0 14px;text-align:left;font-size:.9rem;
  min-height:7.4em}
.buy__perks li{margin:0 0 5px;padding-left:20px;position:relative;color:var(--ink-soft)}
.buy__perks li::before{content:"\2713";position:absolute;left:0;color:var(--accent);
  font-weight:700}
.buy__add{min-height:54px;width:100%}
.buy__pay{display:block;margin:12px auto 8px;max-width:180px;height:auto}
.buy__why{font-size:.84rem;color:var(--muted);margin:0;text-align:left}
.buy__foot{max-width:var(--measure-wide);margin-inline:auto;text-align:center}

/* --------------------------------------------------------------- guarantee */
.guarantee{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start;
  max-width:var(--measure-wide);margin-inline:auto;background:var(--paper-card);
  border-radius:var(--r);padding:26px 30px;box-shadow:var(--shadow-sm)}
.sec--lift .guarantee{background:var(--paper)}
.guarantee img{width:140px;height:140px;object-fit:contain;flex:none}
.guarantee>div{flex:1 1 340px}
.guarantee p:last-child{margin-bottom:0}

/* ----------------------------------------------------------------- reviews */
.dist{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center;
  max-width:var(--measure-wide);margin:0 auto 26px;background:var(--paper-card);
  border-radius:var(--r);padding:26px 30px;box-shadow:var(--shadow-sm)}
.sec--lift .dist{background:var(--paper)}
.bigscore{font-family:var(--serif);font-size:3.2rem;line-height:1;margin:0 0 8px;
  color:var(--accent-deep)}
.bigscore small{display:block;font-family:var(--sans);font-size:.85rem;color:var(--muted);
  margin-top:6px}
.bars{display:grid;gap:8px}
.bar{display:grid;grid-template-columns:56px 1fr 44px;gap:10px;align-items:center;
  font-size:.86rem;color:var(--muted)}
.bar__t{display:block;height:9px;background:var(--paper-deep);border-radius:999px;
  overflow:hidden}
.bar__f{display:block;height:100%;background:var(--accent);border-radius:999px}
.rev__stars{color:var(--brass-deep);letter-spacing:.08em}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tcard{background:var(--paper-card);border-radius:var(--r);padding:22px 24px;
  box-shadow:var(--shadow-sm)}
.sec--lift .tcard{background:var(--paper)}
.tlife{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  max-width:var(--measure-wide);margin:0 auto 20px}
.tlife figure{margin:0;background:var(--paper-card);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow-sm)}
.tlife img{display:block;width:100%;height:auto}
.tlife figcaption{padding:14px 18px;font-size:.9rem;color:var(--muted)}

/* --------------------------------------------------------------------- faq */
.faq{max-width:var(--measure);margin:0 auto 20px;display:grid;gap:10px}
.faq details{background:var(--paper-card);border-radius:var(--r);padding:0;
  box-shadow:var(--shadow-sm);overflow:hidden}
.sec--lift .faq details{background:var(--paper)}
.faq summary{cursor:pointer;list-style:none;padding:17px 22px;font-family:var(--serif);
  font-weight:700;font-size:1.04rem;position:relative;padding-right:52px;min-height:56px;
  display:flex;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:22px;top:50%;translate:0 -50%;
  font-size:1.5rem;color:var(--accent);line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq__b{padding:0 22px 18px;color:var(--ink-soft)}
.faq__b p:last-child{margin-bottom:0}

/* ------------------------------------------------------------------- forms */
.form{max-width:var(--measure);margin-inline:auto;display:grid;gap:14px}
.formcard{background:var(--paper-card);border-radius:var(--r);padding:26px 28px;
  box-shadow:var(--shadow-sm);max-width:var(--measure);margin:0 auto 20px}
.sec--lift .formcard{background:var(--paper)}
.form label{display:block;font-weight:700;font-size:.95rem;margin-bottom:5px}
.form input,.form select,.form textarea{width:100%;font-family:var(--sans);font-size:17px;
  padding:13px 14px;border:1px solid var(--line);border-radius:var(--r-s);
  background:var(--paper);color:var(--ink)}
.form textarea{min-height:140px}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--accent);
  outline-offset:1px}

/* ------------------------------------------------------- refs, byline, misc */
.refs{max-width:var(--measure-wide);margin-inline:auto;background:var(--paper-card);
  border-radius:var(--r);padding:24px 28px;box-shadow:var(--shadow-sm)}
.sec--lift .refs{background:var(--paper)}
.refs h2{font-size:1.2rem}
.refs ol{font-size:.92rem;color:var(--muted);margin:0;padding-left:1.4em}
.refs a{word-break:break-word}
.byline{display:flex;gap:18px;align-items:flex-start;max-width:var(--measure-wide);
  margin:26px auto 0;background:var(--accent-tint);border-radius:var(--r);padding:24px 28px}
.byline svg{width:56px;height:56px;flex:none}
.byline b{display:block;font-family:var(--serif);font-size:1.1rem;margin-bottom:6px}
.byline p{margin:0;font-size:.95rem;color:var(--ink-soft)}
.crumbs{font-size:.85rem;color:var(--faint);margin:16px 0 0}
.crumbs a{color:var(--muted)}
.meta{font-size:.85rem;color:var(--faint)}
.qa{max-width:var(--measure-wide);margin-inline:auto;background:var(--paper-card);
  border-radius:var(--r);padding:8px 28px 22px;box-shadow:var(--shadow-sm)}
.sec--lift .qa{background:var(--paper)}
.sec--slab .qa{background:rgba(255,255,255,.07)}
.qa__h{font-family:var(--serif);font-weight:700;font-size:1.02rem;color:var(--accent-deep);
  padding:16px 0 10px;border-bottom:1px solid var(--line)}
.sec--slab .qa__h{color:var(--accent-lift);border-color:rgba(255,255,255,.18)}
.sec--slab .qa a{color:var(--accent-lift)}
.qa dl{margin:0;display:grid;grid-template-columns:200px 1fr;gap:0}
.qa dt{font-weight:700;padding:12px 16px 12px 0;border-bottom:1px solid var(--line-soft)}
.qa dd{margin:0;padding:12px 0;border-bottom:1px solid var(--line-soft);color:var(--ink-soft)}
.sec--slab .qa dt{color:#fff}
.sec--slab .qa dd{color:var(--on-dark)}
.sec--slab .qa dt,.sec--slab .qa dd{border-color:rgba(255,255,255,.14)}
.preclist{max-width:var(--measure-wide);margin-inline:auto;columns:2;column-gap:34px;
  font-size:.94rem}
.preclist li{break-inside:avoid}
/* A .split is a pair: the picture and the paragraph that belongs to it start
   on the same line. Centring them left the first line of copy 89-114px away from the top of
   its own image (measured on this site at 1440), so the copy floated in the
   middle of the column with dead air above and below it and stopped reading as
   part of the picture beside it. Nothing overlaps and nothing overflows, which
   is why no checker has ever seen it. */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:start;
  max-width:var(--measure-wide);margin-inline:auto}
.split--rev .split__media{order:-1}
.split__media img{display:block;width:100%;height:auto;border-radius:var(--r)}
/* The artwork is sized by the artwork, not by half the wrap. Filled to its
   own column these square and portrait shots stand two to five times the
   height of the two or three paragraphs beside them, and no alignment rescues
   a pair that far out of proportion. The cap is on the HEIGHT and the width
   follows it, so a wide panel shot -- whose height is set by the column width
   and not by this rule -- is untouched, and the picture keeps its aspect-ratio
   box so the cap costs no CLS. Desktop only: below the stacking breakpoint the
   split is one column and the picture should fill the phone. */
@media (min-width:1025px){
  .split__media img{max-height:420px;width:auto;margin-inline:auto}
}

.legal{max-width:var(--measure);margin-inline:auto}
.legal h2,.legal h3{margin-top:1.4em}

/* ------------------------------------------------------------- closing CTA */
.final{max-width:var(--measure-wide);margin-inline:auto;background:var(--accent-tint);
  border-radius:var(--r-l);padding:34px 38px;box-shadow:var(--shadow-sm)}
.final--media{display:grid;grid-template-columns:270px 1fr;gap:30px;align-items:center}
.final__img img{display:block;width:100%;height:auto}
.final__body h2{margin-bottom:.35em}
.final__price{font-weight:700;color:var(--accent-deep);margin-bottom:1em}
.rel{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  max-width:var(--measure-wide);margin-inline:auto}
.rel a{display:block;background:var(--paper-card);border-radius:var(--r);padding:22px 24px;
  text-decoration:none;color:var(--ink);box-shadow:var(--shadow-sm);
  transition:transform .16s ease,box-shadow .2s ease}
.rel a:hover{transform:translateY(-3px);box-shadow:var(--shadow);color:var(--ink)}
.rel b{display:block;font-family:var(--serif);font-size:1.12rem;margin-bottom:5px}
.rel span{font-size:.9rem;color:var(--muted)}

/* ------------------------------------------------------------- the desk row */
.fdesk{background:var(--paper-tint);padding:44px 0}
.fdesk__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.fdesk__card{background:var(--paper-card);border-radius:var(--r);padding:22px 24px;
  box-shadow:var(--shadow-sm)}
.fdesk__card b{display:block;font-family:var(--serif);font-size:1.08rem;margin:4px 0 6px}
.fdesk__card p{margin:0;font-size:.94rem;color:var(--muted)}

/* ----------------------------------------------------------------- footer */
/* An olive block. The returns address takes its own full-width row ABOVE a
   two-column index -- deliberately two generous columns rather than the
   four-column grid the rest of this estate uses. */
footer{background:var(--olive-slab);color:var(--on-dark);padding:46px 0 34px;
  font-size:1rem}
footer a{color:var(--on-dark);text-decoration:underline;text-decoration-color:rgba(255,255,255,.4)}
footer a:hover{color:#fff;text-decoration-color:#fff}
.fseals{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-bottom:28px}
.fseals figure{margin:0}
.fseals img{width:52px;height:52px;object-fit:contain}
.fhead{display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center;
  padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,.16)}
.fbrand{font-family:var(--serif);font-size:2.1rem;font-weight:700;color:#fff;
  letter-spacing:-.02em;line-height:1.1}
.fbrand span{color:var(--accent-edge)}
.fhead p{margin:8px 0 0;color:var(--on-dark-soft);font-size:1rem}
.fmark{width:112px;height:112px;object-fit:contain}
.freturns{padding:24px 0;border-bottom:1px solid rgba(255,255,255,.16)}
.freturns h4{font-size:.95rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-edge);margin:0 0 8px}
.freturns p{margin:0;color:var(--on-dark-soft);max-width:var(--measure-wide)}
.findex{display:grid;grid-template-columns:repeat(2,1fr);gap:26px 48px;padding:28px 0}
.findex__col h4{font-size:.95rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-edge);margin:0 0 12px}
.findex__col ul{list-style:none;margin:0;padding:0;columns:2;column-gap:28px}
.findex__col li{margin:0 0 9px;break-inside:avoid}
.findex__col a{font-size:1rem;text-decoration:none;color:var(--on-dark-soft)}
.findex__col a:hover{color:#fff;text-decoration:underline}
.fnap{padding:22px 0;border-top:1px solid rgba(255,255,255,.16)}
.fnap p{margin:0;color:var(--on-dark-soft);font-size:1rem;line-height:1.85}
.fnap strong{color:#fff}
.fpay{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;padding:18px 0;
  border-top:1px solid rgba(255,255,255,.16)}
.fpay img{max-width:230px;height:auto;background:#fff;border-radius:6px;padding:5px 8px}
.fpay span{font-size:.95rem;color:var(--on-dark-soft)}
.disc{padding-top:22px;border-top:1px solid rgba(255,255,255,.16)}
.disc p{font-size:1rem;color:var(--on-dark-soft);margin:0 0 .85em;line-height:1.8}
.disc b{color:#fff}
.disc .copy{font-size:1rem;color:var(--on-dark-soft);margin:0}

/* ------------------------------------------------------------- the buy bar */
/* Present at EVERY width. House rule 8 needs a bottom CTA on desktop too, and
   a bar declared display:none off the phone gives the direction classes an
   element that never renders. */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:95;display:flex;
  background:var(--paper-card);box-shadow:0 -10px 34px rgba(46,40,26,.14);
  transform:translateY(105%);transition:transform .3s ease}
.buybar.show{transform:translateY(0)}
html.chrome-up .buybar{transform:translateY(105%)}
.buybar__in{width:min(var(--wrap),calc(100% - 32px));margin-inline:auto;display:flex;
  flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;
  padding:12px 0}
.buybar__t{font-size:.94rem;color:var(--muted);line-height:1.4}
.buybar__t b{display:block;font-family:var(--serif);font-size:1.06rem;color:var(--ink)}
.from{color:var(--accent-deep);font-weight:700}
.buybar .btn{white-space:nowrap}

/* --------------------------------------------------------------- the blog */
.article{max-width:var(--measure);margin-inline:auto}
.postmeta{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.92rem;color:var(--muted);
  padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin-bottom:26px}
.toc{background:var(--paper-tint);border-radius:var(--r);padding:20px 26px;margin-bottom:26px}
.toc b{display:block;font-family:var(--serif);font-size:1.06rem;margin-bottom:8px}
.toc ol{margin:0;padding-left:1.3em;font-size:.95rem}
.toc li{margin:0 0 5px}
.article h2{scroll-margin-top:130px;margin-top:1.6em}
.article h3{margin-top:1.3em}
.keypoints{background:var(--accent-tint);border-radius:var(--r);padding:20px 26px;
  margin-bottom:26px}
.keypoints>b{display:block;font-family:var(--serif);font-size:1.08rem;margin-bottom:8px}
.keypoints ul{margin:0;padding-left:1.2em}
.keypoints li:last-child{margin-bottom:0}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.posts article{background:var(--paper-card);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.posts img{display:block;width:100%;height:auto}
.pbody{padding:20px 22px;display:flex;flex-direction:column;gap:6px}
.pbody h3{margin:0}
.pbody h3 a{text-decoration:none;color:var(--ink)}
.pbody h3 a:hover{color:var(--accent-deep)}
.pmeta{font-size:.84rem;color:var(--faint)}
.article figure{margin:26px 0}
.article figure img{display:block;width:100%;height:auto;border-radius:var(--r)}
.article figcaption{font-size:.9rem;color:var(--muted);margin-top:8px}
.article figure.portrait img{max-width:var(--figw);margin-inline:auto}
.article .final--media{grid-template-columns:180px 1fr;padding:24px 26px}
.article .final--media h2{margin-top:0}

/* -------------------------------------------------------------- the reveal */
[data-reveal]{opacity:0;transform:translateY(16px);
  transition:opacity .6s ease,transform .6s ease}
[data-reveal].in{opacity:1;transform:none}

/* --------------------------------------------------------------- breakpoints */
@media(max-width:1180px){
  .menu{gap:18px}
  .menu a{font-size:.9rem}
}
@media(max-width:1024px){
  .nav__row{grid-template-columns:auto 1fr auto;padding:12px 0}
  .burger{display:block}
  .brand{grid-column:2;justify-self:center}
  .navmenus{grid-column:1 / -1;grid-row:2;display:none}
  .navmenus.open{display:block}
  .menu{flex-direction:column;gap:0;padding:8px 0 14px;align-items:center}
  .menu a{display:block;padding:11px 0;font-size:1rem}
  .qa dl{grid-template-columns:1fr}
  .qa dt{padding-bottom:0;border-bottom:0}
  .qa dd{padding-top:4px}
  .buy{grid-template-columns:1fr;max-width:440px}
  .buy__card:nth-child(1){order:3}
  .buy__card:nth-child(2){order:1}
  .buy__card:nth-child(3){order:2}
  .buy__supply,.buy__total,.buy__perks{min-height:0}
  .whygrid,.steps,.iconrow,.tgrid,.rel,.fdesk__grid{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .final--media{grid-template-columns:1fr}
  .final__img{max-width:250px;margin-inline:auto}
  .posts{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
  .dist{grid-template-columns:1fr}
}
@media(max-width:820px){
  .findex{grid-template-columns:1fr;gap:22px}
  .findex__col ul{columns:2}
  .fhead{grid-template-columns:1fr}
  .fmark{width:92px;height:92px}
}
@media(max-width:760px){
  /* The strip keeps role, guarantee and the order phone. Five items wrapped to
     three lines and cost 139px of an 844px screen. */
  .util__item:nth-child(2),.util__item:nth-child(3){display:none}
  .hero{padding:22px 0 36px}
  /* The shot goes DIRECTLY after the H1: a buyer arriving from an ad wants the
     bottle confirmed before they read sixty words about it. The DOM order is
     unchanged, so the Quick Answer still follows the H1 in source. */
  .hero__media{order:3;min-height:clamp(270px,36vh,360px)}
  .hero .packladder{order:4}
  .hero .answer{order:5}
  .hero__cta{order:6}
  .answer{padding:18px 18px}
  /* The slot puts the ladder in ONE row under the bottle. At 390 three tiles
     at a 132px floor came to 396px of a 358px line, so the six-bottle tile --
     the best price on the page -- dropped to a second rank on its own. The
     three now share the line. */
  .packladder{gap:8px;max-width:none}
  .packladder li{flex:1 1 0;min-width:0}
  .packladder a{min-width:0;width:100%;padding:8px 9px}
  .packladder b{font-size:1.04rem}
  .packladder span{font-size:.75rem;line-height:1.25}
  .hero .ticks{order:7}
  .hero .pay{order:8}
  .hero__sub{order:9}
  .hero .factpills{order:10}
  .hero .figures{order:11}
  .hero h1{max-width:100%}
  .hero__card img{max-height:clamp(210px,34vh,300px)}
  /* The chips stay ON the bottle at phone width. Stacked as static blocks
     they read as two stray labels under the lot tag; .hero__media clips,
     so nothing they overhang can widen the page. */
  .floaty{font-size:.8rem;padding:7px 11px}
  .floaty small{font-size:.72rem}
  .floaty--tl{left:0;top:0}
  .floaty--br{right:0;bottom:6%}
  .hero__stick{width:auto}
  .sec{padding:44px 0}
  .g2,.g3,.g4,.whygrid,.steps,.iconrow,.tgrid,.rel,.fdesk__grid,.ing,.shots,
  .shots--wide,.whofor,.tlife,.posts{grid-template-columns:1fr}
  .preclist{columns:1}
  .article .final--media{grid-template-columns:1fr}
}
@media(max-width:560px){
  body{font-size:17px}
  .wrap{width:calc(100% - 32px)}
  /* The bar is burger + wordmark + ordering button on 358px of usable width.
     The sub-label is the first thing to go: the topline strip above already
     carries the role, which is the whole reason that strip exists. */
  .brand svg{width:34px;height:34px}
  .brand{gap:9px}
  .brand__prod{font-size:1.3rem}
  .brand__firm{display:none}
  .nav__cta .btn{font-size:.85rem;padding:10px 15px}
  .stats{grid-template-columns:1fr 1fr}
  .findex__col ul{columns:1}
  .guarantee{padding:22px}
  .guarantee img{width:104px;height:104px;margin-inline:auto}
  .buybar__in{padding:10px 0}
  .buybar__t{font-size:.86rem}
  .final{padding:26px 22px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1;transform:none;transition:none}
  .btn,.rel a,.packladder a{transition:none}
}

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

/*!SITE-HOME-PAINT-START*/
/* ===========================================================================
   HOME PAGE SURFACE -- gotrimoryn.com
   Slot: radius_card 18 / radius_control 12, depth "single soft lift, no
   contact stop (0 12px 30px)", ribbon "corner flag", motif family "settle".

   Paint only: border-radius, box-shadow, background, colour, transform and
   transition move no box, so this lives below the critical marker and needs a
   restamp rather than a rebuild.

   EVERY selector carries a `body:has(.hero)` prefix. That does two jobs at
   once: it is the home-page scope (.hero exists on index.html alone), and it
   lifts each rule to (0,2,x) so it beats modern_surface.py's bare `.answer',
   `.card', `.final' rules, which are re-appended AFTER this block on every
   build. Nothing here relies on source order, and nothing here redefines
   --r or --shadow, because modern_surface re-writes both.
   ======================================================================== */
body:has(.hero){
  --gtr-rcard:18px;                 /* slot radius_card    */
  --gtr-rctl:12px;                  /* slot radius_control */
  /* One soft stop, no tight contact shadow -- the slot's depth language --
     tinted with this site's own ink, rgb(35,32,26) = --ink #23201a. */
  --gtr-lift:0 12px 30px rgba(35,32,26,.10);
  --gtr-lift-hi:0 18px 44px rgba(35,32,26,.17);
  /* The buying CTA is the only gradient on the page. It runs accent to
     accent-deep and never lighter: the lightest stop still reads 4.7:1
     against white, so the button label stays legible at every point on it. */
  --gtr-cta:linear-gradient(140deg,#5f7d1e 0%,#54701a 45%,#3d5212 100%);
  --gtr-cta-hi:linear-gradient(140deg,#54701a 0%,#486116 45%,#33450e 100%);
  --gtr-ease:cubic-bezier(.2,.7,.3,1);
}

/* ---- curve: panels take the slot's card radius, controls take 12 -------- */
body:has(.hero) .answer,
body:has(.hero) .figures>div,
body:has(.hero) .card,
body:has(.hero) .ingcard,
body:has(.hero) .whycard,
body:has(.hero) .step,
body:has(.hero) .callout,
body:has(.hero) .faq,
body:has(.hero) .tablewrap,
body:has(.hero) .guarantee,
body:has(.hero) .dist,
body:has(.hero) .promo,
body:has(.hero) .final,
body:has(.hero) .split__media,
body:has(.hero) .shots figure,
body:has(.hero) .tlife figure,
body:has(.hero) .buy__card,
body:has(.hero) .packladder a{border-radius:var(--gtr-rcard)}

body:has(.hero) .btn,
body:has(.hero) .floaty{border-radius:var(--gtr-rctl)}

/* ---- shade: one wide soft lift, never a hairline ----------------------- */
body:has(.hero) .answer,
body:has(.hero) .figures>div,
body:has(.hero) .card,
body:has(.hero) .ingcard,
body:has(.hero) .whycard,
body:has(.hero) .step,
body:has(.hero) .callout,
body:has(.hero) .faq,
body:has(.hero) .tablewrap,
body:has(.hero) .guarantee,
body:has(.hero) .dist,
body:has(.hero) .promo,
body:has(.hero) .final,
body:has(.hero) .split__media,
body:has(.hero) .shots figure,
body:has(.hero) .tlife figure,
body:has(.hero) .floaty,
body:has(.hero) .hero__tag,
body:has(.hero) .buy__card,
body:has(.hero) .packladder a{box-shadow:var(--gtr-lift)}

/* ---- the two weights: gradient CTA, solid secondary -------------------- */
body:has(.hero) .btn--cta{background:var(--gtr-cta);box-shadow:var(--gtr-lift)}
body:has(.hero) .btn--cta:hover{background:var(--gtr-cta-hi);color:#fff;
  box-shadow:var(--gtr-lift-hi);transform:translateY(-2px)}
/* Solid, not a gradient and not a bare outline, so the pair reads as two
   weights rather than as one button and one link. */
body:has(.hero) .btn--ghost{background:var(--paper-card);
  border-color:var(--accent-edge);box-shadow:var(--gtr-lift)}
body:has(.hero) .btn--ghost:hover{background:var(--accent-tint);
  color:var(--accent-deep);box-shadow:var(--gtr-lift-hi);transform:translateY(-2px)}

/* ---- motion: 2px on anything clickable, and a visible focus ring ------- */
body:has(.hero) .btn,
body:has(.hero) .card,
body:has(.hero) .whycard,
body:has(.hero) .ingcard,
body:has(.hero) .buy__card,
body:has(.hero) .packladder a,
body:has(.hero) .shots figure,
body:has(.hero) .tlife figure{transition:transform .22s var(--gtr-ease),
  box-shadow .22s ease,background .22s ease}
body:has(.hero) .card:hover,
body:has(.hero) .whycard:hover,
body:has(.hero) .ingcard:hover,
body:has(.hero) .buy__card:hover,
body:has(.hero) .packladder a:hover,
body:has(.hero) .shots figure:hover,
body:has(.hero) .tlife figure:hover{transform:translateY(-2px);
  box-shadow:var(--gtr-lift-hi)}
body:has(.hero) a:focus-visible,
body:has(.hero) button:focus-visible,
body:has(.hero) summary:focus-visible{outline:3px solid var(--accent-deep);
  outline-offset:3px}

/* ---- the pricing ladder: corner flag, raised tier, dashed rows ---------- */
/* The flag is a pseudo-element, so it is out of flow and cannot move the
   Add To Cart baseline. .buy__card already clips, which is what gives the
   band its clean corner. No text is drawn in it: the words on that card are
   the ones the page already prints. */
body:has(.hero) .buy__card{position:relative}
body:has(.hero) .buy__card--feature{
  background:linear-gradient(170deg,#f0f4e3 0%,#e4ebd0 62%,#dde6c3 100%);
  box-shadow:var(--gtr-lift-hi)}
body:has(.hero) .buy__card--feature::before{content:"";position:absolute;
  top:0;right:0;width:96px;height:96px;pointer-events:none;z-index:1;
  background:linear-gradient(225deg,transparent 0 25%,var(--brass-line) 25% 27%,
    var(--accent) 27% 42%,var(--accent-deep) 42% 50%,transparent 50%)}
body:has(.hero) .buy__perks li{
  background-image:repeating-linear-gradient(90deg,
    var(--accent-edge) 0 5px,transparent 5px 10px);
  background-repeat:no-repeat;background-position:0 100%;
  background-size:100% 1px}
body:has(.hero) .buy__perks li:last-child{background-image:none}

/* ---- the hero motif: "settle" ------------------------------------------
   A soft halo on pseudo-elements of the product column, sized at 188% of it
   so it reads well OUTSIDE the bottle rather than behind it, and a single
   brass arc for the slot's arch mark. It breathes once, over eleven seconds,
   and then holds: no loop, because this is a capsule taken daily for weeks.
   .hero__media::before and ::after are already spoken for by the wick-draw
   motif, so this hangs off .hero__stick, which is the same column. transform
   and opacity only -- the hero <img> is the LCP element and is never touched.
   gtrHaloSettle: a new name. gtrWick and gtrEmber are this file's own and
   are left where they are, only slowed, so the hero settles as a whole. */
body:has(.hero) .hero__stick::before{content:"";position:absolute;
  left:50%;top:50%;width:188%;aspect-ratio:1.22;translate:-50% -50%;
  z-index:0;pointer-events:none;border-radius:50%;filter:blur(7px);
  background:radial-gradient(closest-side,rgba(95,125,30,.30),
    rgba(145,123,69,.13) 52%,transparent 74%);
  animation:gtrHaloSettle 11s cubic-bezier(.16,.72,.3,1) 1 both}
body:has(.hero) .hero__stick::after{content:"";position:absolute;
  left:50%;top:50%;width:150%;aspect-ratio:1;translate:-50% -50%;
  z-index:0;pointer-events:none;border-radius:50%;
  border:1px solid rgba(145,123,69,.26);
  -webkit-mask-image:linear-gradient(200deg,#000 0 40%,transparent 72%);
  mask-image:linear-gradient(200deg,#000 0 40%,transparent 72%)}
@keyframes gtrHaloSettle{
  0%{opacity:0;transform:scale(.82)}
  46%{opacity:.94;transform:scale(1.07)}
  100%{opacity:1;transform:scale(1)}
}
/* On a phone .hero__stick goes full width, so 188% of it runs past the media
   box and .hero__media clips -- the arc came out as two stray curves at the
   screen edges. These widths keep both shapes inside the box while still
   sizing them well outside the bottle, which is 230px wide there.
   Both shapes are absolutely positioned pseudo-elements: they are out of
   flow, so a width on them moves no box and costs no CLS, which is why the
   whole motif can live below the critical marker. */
@media (max-width:760px){
  body:has(.hero) .hero__stick::before{width:96%;aspect-ratio:1.16}
  body:has(.hero) .hero__stick::after{width:84%}
}
/* The file's own wick and ember were written at 12s. Against a halo that
   settles they read as a flame, so they are slowed rather than removed --
   the duration is paint and the keyframes are untouched. */
body:has(.hero) .hero__media::before,
body:has(.hero) .hero__media::after{animation-duration:23s}

@media(prefers-reduced-motion:reduce){
  body:has(.hero) .hero__stick::before{animation:none;opacity:1;transform:none}
  body:has(.hero) .btn,
  body:has(.hero) .card,
  body:has(.hero) .whycard,
  body:has(.hero) .ingcard,
  body:has(.hero) .buy__card,
  body:has(.hero) .packladder a,
  body:has(.hero) .shots figure,
  body:has(.hero) .tlife figure{transition:none}
  body:has(.hero) .btn--cta:hover,
  body:has(.hero) .btn--ghost:hover,
  body:has(.hero) .card:hover,
  body:has(.hero) .whycard:hover,
  body:has(.hero) .ingcard:hover,
  body:has(.hero) .buy__card:hover,
  body:has(.hero) .packladder a:hover,
  body:has(.hero) .shots figure:hover,
  body:has(.hero) .tlife figure:hover{transform:none}
}
/*!SITE-HOME-PAINT-END*/
/* ==== footer type floor (footer_type.py) ==== */
/* The footer carried the smallest text on the page -- the legal pages,
   the guarantee and the contact routes, set as fine print. Running text
   and links sit at 16px, column headings at 15px (uppercase and
   letter-spaced, so they read larger than the number). Last in the file
   on purpose: it outranks the phone breakpoints that shrank them. */
footer .fpay span{font-size:16px}
/* ==== end footer type floor ==== */

/* ==== modern surface (modern_surface.py) ==== */
/* House rule 11. This stylesheet had 41 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 (35,32,26), 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{
  --r:16px;
  --shadow:0 1px 2px rgba(35,32,26,.06), 0 6px 18px rgba(35,32,26,.07);
  --lift:0 2px 6px rgba(35,32,26,.09), 0 16px 34px rgba(35,32,26,.14);
}

.card,
.step,
.keypoints,
.callout,
.alert,
.toc,
.byline,
.posts article,
.shots figure,
.badgewall figure,
.tablewrap,
.faq,
.ingcard,
.final,
.figures>div,
.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. */
.badgewall figure,
.tablewrap,
.faq,
.article figure{border-radius:var(--r)}

/* A surface a reader can click answers the pointer. 2px
   registers without reflowing the row beside it. */
.rel a,
.posts article,
.shots figure,
.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 ==== */
.review-foot{margin:0;padding:.6rem 0;font-size:.92rem}.review-foot a{font-weight:600}