/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Bodoni Moda Fallback";src:local("Georgia");font-weight:400;size-adjust:104.91%;ascent-override:107.23%;descent-override:38.13%;line-gap-override:0.00%}
@font-face{font-family:"Bodoni Moda Fallback";src:local("Georgia Bold");font-weight:600 900;size-adjust:94.67%;ascent-override:118.83%;descent-override:42.25%;line-gap-override:0.00%}
@font-face{font-family:"Inter Tight Fallback";src:local("Arial");font-weight:400;size-adjust:96.95%;ascent-override:99.92%;descent-override:24.88%;line-gap-override:0.00%}
@font-face{font-family:"Inter Tight Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:95.83%;ascent-override:101.09%;descent-override:25.17%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* ===========================================================================
   jellybllue.com - JellyBlue, U.S. stocking partner desk
   ---------------------------------------------------------------------------
   The design, in brief:

     type     Bodoni Moda / Inter Tight
     ground   cobalt-tinted porcelain broken by deep navy slabs
     depth    hairline everywhere, ONE soft lift, on the pack row only
     cards    flat fill, a single bottom rule, no side or top border
     layout   the jar in a 4-column well left of centre, the copy in the
              seven columns beside it; a 12-column grid throughout
     header   bone rail sitting over a navy rule, identity left,
              destinations flush right
     footer   navy slab on a five-column grid, the returns address
              occupying the first two

   The card radius is 16px, the floor this stylesheet keeps for every card.
   The card signature - flat fill, a single bottom rule, no shadow - is what
   makes these cards this desk's own.

   Gradients appear in exactly two places: the buying CTA and the hero wash.
   The navy slabs are solid, the secondary button is solid, and nothing else
   on the site is a gradient.
   =========================================================================== */

:root{
  /* --- ground: cobalt-tinted porcelain ----------------------------------- */
  --paper:#eceff7;          /* the page */
  --paper-2:#f5f7fc;        /* a lighter band */
  --card:#ffffff;           /* flat card fill */
  --bone:#f7f5ef;           /* the header rail - warm, so it reads as a rail */

  /* --- the navy slabs ---------------------------------------------------- */
  --navy:#0b1733;
  --navy-2:#13234a;
  --navy-3:#1b2f5e;

  /* --- ink --------------------------------------------------------------- */
  --ink:#101c39;
  --ink-2:#31406a;
  --muted:#53618a;
  --on-navy:#e7ecf8;
  --on-navy-dim:#a9b7d6;

  /* --- accent: the cobalt off the JellyBlue label ------------------------ */
  --cobalt:#1f5fd0;
  --cobalt-d:#12409a;
  --cobalt-l:#4f8bef;
  --gold:#c9a44c;           /* the label's shield and flavour band */

  /* --- rules and hairlines ----------------------------------------------- */
  --rule:#ccd5e9;
  --rule-2:#dbe2f1;
  --rule-navy:rgba(231,236,248,.20);

  /* --- curve: a scale, not a value (house rule 11) ------------------------ */
  --radius:16px;
  --radius-sm:12px;

  /* --- shade: layered, tinted with this site's own ink -------------------- */
  --shadow:0 1px 2px rgba(16,28,57,.07), 0 10px 26px rgba(16,28,57,.09);
  --lift:0 2px 6px rgba(16,28,57,.10), 0 18px 38px rgba(16,28,57,.16);

  /* --- the 12-column grid ------------------------------------------------- */
  --wrap:1200px;
  --gap:24px;

  --serif:'Bodoni Moda','Bodoni Moda Fallback',"Iowan Old Style",Georgia,'Times New Roman',serif;
  --sans:'Inter Tight','Inter Tight Fallback',"Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  overflow-x:clip;
  scroll-padding-top:120px;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 17px/1.68 var(--sans);
  font-synthesis-weight:none;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.008em;
  margin:0 0 .5em;
  color:var(--ink);
}
h1{font-size:clamp(1.74rem,1.02rem + 2.5vw,2.95rem);line-height:1.06}
h2{font-size:clamp(1.62rem,1.12rem + 1.8vw,2.4rem)}
h3{font-family:var(--sans);font-weight:650;font-size:1.2rem;letter-spacing:-.01em}
h4{font-family:var(--sans);font-weight:650;font-size:1.04rem}

p{margin:0 0 1.05em}
a{color:var(--cobalt-d);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--cobalt)}

:focus-visible{outline:3px solid var(--cobalt);outline-offset:2px;border-radius:4px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--navy);color:#fff;padding:12px 18px;border-radius:0 0 var(--radius-sm) 0;
  font-weight:600;
}
.skip:focus{left:0}

/* --- the container. The gutter comes from a WIDTH CONSTRAINT, never from
   padding, so no component's padding shorthand can wipe it (pitfall 46). --- */
.wrap{width:min(var(--wrap),91%);margin-inline:auto}

/* --- the 12-column grid used across the site --------------------------- */
.g12{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}

/* =======================================================================
   TOPLINE RAIL + HEADER
   A bone rail sitting over a navy rule. Identity left, destinations flush
   right. House rule 10: this is one of the two components on all 30 pages,
   so it is designed, not decorated.
   ======================================================================= */
.util{background:var(--navy);color:var(--on-navy);font-size:.94rem}
.util__row{
  display:flex;flex-wrap:wrap;gap:6px 26px;align-items:center;
  justify-content:center;padding:9px 0;
}
.util__item{display:inline-flex;align-items:center;gap:7px;color:var(--on-navy-dim)}
.util__item b{color:#fff;font-weight:600}
.util__item + .util__item::before{
  content:'';width:5px;height:5px;border-radius:50%;background:var(--cobalt-l);
  margin-right:12px;
}
.util__item a{color:#fff;font-weight:600;text-decoration:none}
.util__item a:hover{text-decoration:underline}

.nav{
  position:sticky;top:0;z-index:40;
  background:var(--bone);
  border-bottom:3px solid var(--navy);
  transition:transform .26s ease, box-shadow .26s ease;
}
.nav__top{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:13px 0;
}
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
.brand svg{width:40px;height:40px;flex:none}
.brand .bw{display:flex;flex-direction:column;line-height:1.08}
.brand .bw b{
  font-family:var(--serif);font-weight:700;font-size:1.5rem;letter-spacing:-.015em;
  color:var(--navy);
}
.brand .bw b em{font-style:normal;color:var(--cobalt)}
.brand .bw small{
  font-size:.85rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-top:2px;
}

.nav__rail{display:flex;align-items:center;gap:16px}
.nav__price{display:none;text-align:right;line-height:1.2}
.nav__price b{display:block;font-size:1rem;font-weight:650;color:var(--navy)}
.nav__price span{font-size:.85rem;color:var(--muted)}

.nav__strip{background:var(--bone);border-top:1px solid var(--rule)}
/* The row sheds, it never wraps (house rule 11). Twelve destinations fit one
   line above about 1090px; below that the row scrolls sideways from its own
   left edge, which is why justify-content flips at the same breakpoint --
   flex-end plus an overflow scroller starts the row off-screen and clips the
   first three links, which is how this shipped the first time. */
.menu{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:nowrap;justify-content:flex-end;gap:0 19px;
  overflow-x:auto;scrollbar-width:none;
}
.menu::-webkit-scrollbar{display:none}
.menu li a{
  display:block;padding:11px 0;text-decoration:none;color:var(--ink-2);
  font-weight:550;font-size:.95rem;letter-spacing:.004em;white-space:nowrap;
  border-bottom:3px solid transparent;margin-bottom:-1px;
}
.menu li a:hover{color:var(--cobalt-d);border-bottom-color:var(--cobalt)}
.menu li a[aria-current="page"]{color:var(--navy);border-bottom-color:var(--navy)}

.burger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:var(--navy);margin:5px 0;border-radius:2px}

/* =======================================================================
   BUTTONS
   Gradient primary, SOLID secondary - two weights, not one button drawn
   twice (house rule 11.4). Guarded at (0,2,0) so a later `.final a` rule
   cannot recolour the text on top of its own fill (rule 12, trap E1).
   ======================================================================= */
.btn,.btn:link,.btn:visited{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font:650 1rem/1 var(--sans);letter-spacing:.01em;
  padding:15px 26px;border-radius:var(--radius-sm);border:2px solid transparent;
  text-decoration:none;cursor:pointer;text-align:center;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn.btn--cyan,.btn.btn--cyan:link,.btn.btn--cyan:visited{
  background:linear-gradient(135deg,#2a6ee0 0%,var(--cobalt-d) 100%);
  color:#ffffff;border-color:var(--cobalt-d);
  box-shadow:0 1px 2px rgba(16,28,57,.10), 0 10px 22px rgba(18,64,154,.26);
}
.btn.btn--cyan:hover{transform:translateY(-2px);box-shadow:var(--lift)}
.btn.btn--ghost,.btn.btn--ghost:link,.btn.btn--ghost:visited{
  background:var(--card);color:var(--navy);border-color:var(--navy);
}
.btn.btn--ghost:hover{background:var(--navy);color:#fff}
.btn--lg{padding:17px 30px;font-size:1.06rem}
.btn--wide{width:100%}

/* =======================================================================
   THE HERO
   Asymmetric. A 12-column grid: the jar sits in a 4-column well offset
   LEFT OF CENTRE (columns 2-5) and the copy runs from column 5 to the
   right edge, its headline pulled back across the top edge of the well.
   The overlap is desktop-only; below 1080px the two stack in the order
   the reader needs them.
   ======================================================================= */
.hero{
  position:relative;
  background:var(--paper-2);
  border-bottom:1px solid var(--rule);
  padding:44px 0 56px;
  overflow-x:clip;overflow-y:visible;
}
.hero__grid{
  display:grid;grid-template-columns:repeat(12,1fr);gap:0 var(--gap);
  align-items:start;
}
/* The well no longer sits under the headline. At 1180px+ the H1 used to be
   pulled 176px back across the top edge of the well; at this headline's length
   (three lines) the crossing landed on line three INSIDE the card, cutting
   "200 mg" in half, and it gave the copy column two left edges (audit 21 Sep
   2026). The headline now keeps its own column and the well starts level with
   the headline's first line. */
.hero__media{grid-column:2 / span 4;grid-row:1;position:relative;
             padding-top:34px}
.hero__copy{grid-column:6 / span 7;grid-row:1;position:relative;z-index:4}

.hero__card{
  position:relative;z-index:2;
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:20px 16px 14px;
}
.hero__card img{
  position:relative;z-index:3;
  width:100%;height:auto;margin-inline:auto;
}
.hero__cap{
  margin:12px 0 0;font-size:.86rem;line-height:1.45;color:var(--muted);
  border-top:1px solid var(--rule-2);padding-top:10px;text-align:center;
}

.eyebrow{
  display:inline-block;font:600 .84rem/1 var(--sans);
  letter-spacing:.15em;text-transform:uppercase;color:var(--cobalt-d);
  margin-bottom:12px;
}
.hero h1{margin:0 0 18px}

/* The Quick Answer sits in the hero, directly after the H1. */
.answer{
  background:var(--card);
  border:1px solid var(--rule);
  border-left:5px solid var(--cobalt);
  border-radius:var(--radius);
  padding:18px 22px 6px;
  margin:0 0 18px;
}
.answer p{margin:0 0 .85em;font-size:1.062rem}
.answer p:first-child{font-size:1.1rem}

/* --muted measures 4.12:1 against the mid stop of the hero wash the motif
   writes (#c7d5f0), under the 4.5 floor for 15.7px text. The hero copy
   therefore uses the darker ink; --muted is kept for text on white. */
.hero__road{color:var(--ink-2);font-size:.98rem;margin:0 0 20px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 22px}

/* Four facts as a 2 x 2 of equal cells. As a wrapping flex row, three fitted
   the copy column and the fourth sat alone on a second line at 1440, and at
   390 the four stacked at four different widths (audit 21 Sep 2026). */
.factpills{
  list-style:none;margin:0 0 18px;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
}
.factpills li{
  background:var(--card);border:1px solid var(--rule);border-radius:999px;
  padding:8px 15px;font-size:.92rem;color:var(--ink-2);text-align:center;
  align-content:center;
}
.factpills li b{color:var(--navy);font-weight:650}

.figures{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin:0}
.figures > div{border-top:2px solid var(--navy);padding-top:10px}
.figures b{
  display:block;font-family:var(--serif);font-weight:700;font-size:1.85rem;
  line-height:1;color:var(--navy);
}
.figures span{display:block;font-size:0.9062rem;color:var(--muted);margin-top:5px}
.hero .figures span{color:var(--ink-2)}

/* --- the trust rail: rule 12's five checkable things, on the first screen */
.trustrail{
  grid-column:1 / -1;grid-row:2;
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);
  margin-top:30px;padding-top:20px;border-top:1px solid var(--rule);
}
.trustrail div{font-size:.93rem;line-height:1.5;color:var(--ink-2)}
.trustrail b{display:block;font-weight:650;color:var(--navy);font-size:.97rem}
.trustrail a{font-weight:600}

/* =======================================================================
   PAGE HEADS AND SECTIONS
   ======================================================================= */
.phead{background:var(--paper-2);border-bottom:1px solid var(--rule);padding:30px 0 38px}
.phead h1{margin:0 0 18px;font-size:clamp(1.9rem,1.1rem + 2.4vw,2.9rem)}
.crumbs{font-size:0.9062rem;color:var(--muted);margin:0 0 14px}
.crumbs a{color:var(--cobalt-d)}

.sec{padding:48px 0}
.sec__head{max-width:74ch;margin:0 0 26px}
.sec__head p{color:var(--muted);margin:0}
.sec--tint{background:var(--paper-2);border-block:1px solid var(--rule)}
.sec--panel{background:var(--card);border-block:1px solid var(--rule)}
.sec--center .sec__head{margin-inline:auto;text-align:center}

/* The navy slabs. Solid, never a gradient. */
.sec--dark{background:var(--navy);color:var(--on-navy)}
.sec--dark h2,.sec--dark h3,.sec--dark h4{color:#fff}
.sec--dark p,.sec--dark li,.sec--dark td,.sec--dark span{color:var(--on-navy)}
.sec--dark .eyebrow{color:var(--cobalt-l)}
.sec--dark .sec__head p{color:var(--on-navy-dim)}
.sec--dark a{color:#b9d0ff}
.sec--dark .card{background:var(--navy-2);border-bottom-color:var(--cobalt-l)}
.sec--dark .card h3{color:#fff}
.sec--dark .tablewrap table{background:var(--navy-2)}
.sec--dark th{background:var(--navy-3);color:#fff;border-bottom-color:var(--rule-navy)}
.sec--dark td{border-bottom-color:var(--rule-navy)}
.sec--dark .callout{background:var(--navy-2);border-left-color:var(--cobalt-l)}
.sec--dark .callout b{color:#fff}

.lead{font-size:1.12rem;line-height:1.62;color:var(--ink-2);max-width:74ch}
.sec--dark .lead{color:var(--on-navy)}

/* --- components that keep a LIGHT fill inside a navy slab ----------------
   Found by looking, not by any gate: `.sec--dark` sets a pale ink on the
   section, and every component inside it inherits that ink. Components that
   repaint themselves dark are fine; the three that keep their own light fill
   inherited pale text onto a pale ground and rendered at 1.10:1 to 1.18:1.
   Measured on the SETTLED element after the reveal, so this is a palette
   fault rather than a mid-fade artefact.

     .versus > div   white cells   rgb(231,236,248) on white   1.18:1
     .keypoints      white panel   same                        1.18:1
     .alert          cream panel   rgb(231,236,248) on #fdf6e6 1.10:1

   Stated as one rule per component rather than a blanket override, so a
   component added later is not silently assumed to be safe. */
.sec--dark .versus__row > div{color:var(--ink)}
.sec--dark .versus__row > div b{color:var(--navy)}
/* Specificity, not order: `.sec--dark .versus__row > div` above is (0,2,1)
   and would otherwise paint this header's ink dark navy ON navy, measured at
   1.05:1. The class is repeated on the child selector to win. */
.sec--dark .versus__row > div.versus__h{color:#fff}
.sec--dark .keypoints{color:var(--ink)}
.sec--dark .keypoints b{color:var(--navy)}
.sec--dark .keypoints li,.sec--dark .keypoints p{color:var(--ink-2)}
.sec--dark .keypoints a{color:var(--cobalt-d)}
.sec--dark .alert{color:#4a3406}
.sec--dark .alert b{color:#6b4c0c}
.sec--dark .alert p,.sec--dark .alert li{color:#4a3406}
.sec--dark .alert a{color:#7a4a08}
.sec--dark .qa,.sec--dark .refs,.sec--dark .faq details,
.sec--dark .ingcard,.sec--dark .step,.sec--dark .shots figcaption,
.sec--dark .badgewall figure,.sec--dark .form{color:var(--ink)}
.sec--dark .qa p,.sec--dark .refs li,.sec--dark .faq__body p,
.sec--dark .ingcard p,.sec--dark .step p,
.sec--dark .shots figcaption span,.sec--dark .badgewall figure span{color:var(--ink-2)}
.sec--dark .qa a,.sec--dark .refs a,.sec--dark .faq__body a,
.sec--dark .ingcard a,.sec--dark .step a{color:var(--cobalt-d)}

/* --- 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:1079px){
  /* The overlap is a desktop gesture. Below this the well sits in its own column and the headline stops crossing it. */ .hero__media{grid-column:1 / span 5;padding-top:0}
  .hero h1{margin-left:0}
}
@media (max-width:980px){
  .hero{padding:30px 0 40px}
  .hero__grid{grid-template-columns:1fr;gap:26px}
  .hero__copy{grid-column:1;grid-row:auto;display:contents}
  .hero__media{grid-column:1;grid-row:auto;order:3;margin:4px 0 18px;padding-top:0}
  .hero__card{max-width:420px;margin-inline:auto}
  .hero .eyebrow{order:1}
  .hero h1{order:1}
  .hero .answer{order:2}
  .hero__road{order:4}
  .hero__cta{order:5}
}
@media (max-width:560px){
  /* Two stacked hero buttons at two different widths looked unfinished. */ .hero__cta .btn{flex:1 1 100%}
}
/* --- end of the copied hero responsive rules --- */

/* --- pre-deployment audit fixes, 21 Sep 2026 ---------------------------
   Above the marker on purpose: each of these moves geometry, and the TOC
   sits on the first screen of every journal post.

   Tap targets (WCAG 2.5.8, 24px). An inline <a> reports the height of its
   font's content box, about 21px here, however tall the line it sits in.
   As an inline-block it takes the full line box instead (26-27px at these
   line-heights), so the hit area grows and nothing on the page moves.
   Three places had a link standing on its own line: the order-desk phone
   and email in the footer card, a contact cell in the who-to-ask tables,
   and every entry in a journal post's table of contents. */
.fdark .fcard p a,
.toc li a,
td > a.tlink,
.card p > a.more{display:inline-block;min-height:24px}
/* td > a.tlink, not td > a:only-child: :only-child ignores text nodes, so a
   link in the MIDDLE of a sentence in a table cell became an unbreakable
   inline-block and pushed its own full stop onto a line of its own (six of
   the seven ingredient rows at 390, audit 21 Sep 2026). The class marks the
   cells whose whole content is the link. `a.more` is the "Read the guide"
   link that stands alone in its own paragraph on guides.html (22px). */
/* A grid item's min-width is `auto`, so the who-runs-this table on the
   about page (in its own .tablewrap scroller) widened the single .split
   column to 400px on a 375px phone and pushed the copy 42px off-screen.
   min-width:0 lets the track hold the viewport and the wrapper scroll. */
.split > *{min-width:0}
/* --- end of the audit fixes --- */

/* ---- hero motif -- tide-glow ---------------------------------------- */
.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(188deg,#eceff7,#c7d5f0 52%,#eceff7)}.hero__media::before{content:'';position:absolute;pointer-events:none;border-radius:50%;z-index:0;left:50%;top:50%;width:136%;aspect-ratio:1.5;translate:-50% -50%;filter:blur(16px);background:radial-gradient(closest-side,rgba(31,95,208,0.30),transparent 68%);animation:b13TideGlow 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:84%;aspect-ratio:1.5;translate:-50% -50%;filter:blur(12px);background:radial-gradient(closest-side,rgba(31,95,208,0.23),transparent 60%);animation:b13TideGlow 13s ease-in-out infinite;animation-delay:4.3s}@keyframes b13TideGlow{0%,100%{transform:scale(.82);opacity:.16}52%{transform:scale(1.08);opacity:0.5}}
@media(prefers-reduced-motion:reduce){.hero__card{animation:none!important}.hero__media::before,.hero__media::after{animation:none!important;opacity:0!important}}

/* --- first-screen rules, copied into the critical block by first_screen.py
   Generated; edit the originals below the marker, never this copy.
   See first_screen.py for why it exists. --- */
.card{background:var(--card); border:0; border-bottom:3px solid var(--cobalt); border-radius:var(--radius); padding:24px 24px 22px;}
.card h3{margin:0 0 .5em;color:var(--navy)}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.grid{display:grid;gap:var(--gap)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.steps{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap);counter-reset:s}
.step{background:var(--card);border-bottom:3px solid var(--cobalt); border-radius:var(--radius);padding:22px 24px;position:relative;counter-increment:s;}
.step h3{margin:0 0 .45em;color:var(--navy)}
.step h3::before{content:counter(s);display:inline-flex;align-items:center;justify-content:center; width:26px;height:26px;margin-right:10px;border-radius:50%; background:var(--navy);color:#fff;font:650 .85rem/1 var(--sans); vertical-align:2px;}
.step p:last-child{margin-bottom:0}
.callout{background:var(--paper-2);border-left:4px solid var(--cobalt); border-radius:0 var(--radius) var(--radius) 0;padding:18px 22px;margin:0 0 22px;}
.callout b{display:block;font-weight:650;color:var(--navy);margin-bottom:.35em}
.callout p:last-child{margin-bottom:0}
.alert{background:#fdf6e6;border-left:4px solid var(--gold); border-radius:0 var(--radius) var(--radius) 0;padding:18px 22px;margin:0 0 22px;}
.alert b{display:block;font-weight:650;color:#6b4c0c;margin-bottom:.35em}
.alert p:last-child{margin-bottom:0}
.keypoints{background:var(--card);border-bottom:3px solid var(--navy); border-radius:var(--radius);padding:20px 24px;margin:0 0 22px;}
.keypoints b{display:block;font-weight:650;color:var(--navy);margin-bottom:.5em}
.keypoints ul{margin:0;padding-left:1.15em}
.keypoints li{margin-bottom:.4em}
.sec--dark ul.ticks li::before{background:var(--cobalt-l)}
.tablewrap{overflow-x:auto;margin:0 0 18px;border-radius:var(--radius)}
.tablewrap table{width:100%;border-collapse:collapse;background:var(--card);font-size:.97rem}
th,td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule-2)}
th{background:var(--navy);color:#fff;font:600 .88rem/1.3 var(--sans); letter-spacing:.06em;text-transform:uppercase;border-bottom:0;}
tbody tr:last-child td{border-bottom:0}
.tnote{font-size:.9rem;color:var(--muted);margin:0 0 1em}
.inglist{display:grid;gap:var(--gap)}
.ingcard{background:var(--card);border-bottom:3px solid var(--cobalt); border-radius:var(--radius);padding:22px 24px;}
.ingcard__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px; border-bottom:1px solid var(--rule-2);padding-bottom:12px;margin-bottom:14px;}
.ingcard__top h3{margin:0;color:var(--navy);font-size:1.22rem}
.ingcard p:last-child{margin-bottom:0}
.versus{display:grid;grid-template-columns:1.1fr 1fr 1.4fr;gap:0;border-radius:var(--radius);overflow:hidden;margin:0 0 18px}
.versus__row{display:contents}
.versus__row > div{padding:12px 15px;border-bottom:1px solid var(--rule-2);background:var(--card);font-size:.96rem}
.versus__h{background:var(--navy)!important;color:#fff; font:600 .86rem/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;}
.sec--dark .versus{box-shadow:0 0 0 1px var(--rule-navy)}
.sec--dark .versus__h{background:var(--navy-3)!important}
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.shots.s2{grid-template-columns:repeat(2,1fr)}
.shots figure{margin:0;background:var(--card);border-bottom:3px solid var(--cobalt);border-radius:var(--radius);overflow:hidden}
.shots figure img{width:100%;height:auto}
.shots figcaption{display:block;padding:16px 20px 20px}
.shots figcaption b{display:block;color:var(--navy);font-weight:650;margin-bottom:.35em}
.shots figcaption span{display:block;font-size:.94rem;color:var(--ink-2);line-height:1.55}
.badgewall{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.badgewall figure{margin:0;background:var(--card);border-bottom:3px solid var(--gold);border-radius:var(--radius);padding:20px;text-align:center}
.badgewall figure img{margin:0 auto 12px}
.badgewall b{display:block;color:var(--navy);font-weight:650;margin-bottom:.3em}
.badgewall span{display:block;font-size:.9rem;color:var(--ink-2);line-height:1.5}
.badgewall.bw2{grid-template-columns:repeat(2,1fr)}
.badgewall.bw3{grid-template-columns:repeat(3,1fr)}
.badgewall--off figure{border-bottom-color:var(--rule)}
.badgewall--off figure img{filter:grayscale(1);opacity:.6}
.badgewall__tag{display:inline-block;margin:0 0 8px;padding:3px 10px;border-radius:999px; background:var(--paper);color:var(--ink-2);font:600 .85rem/1.25 var(--sans); font-style:normal;letter-spacing:.05em;text-transform:uppercase;}
.split{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start;margin:0 0 22px}
.split--flip .split__img{order:2}
.split__img img{width:100%;max-width:var(--imgw,100%);height:auto; border-radius:var(--radius);border-bottom:3px solid var(--cobalt); margin-inline:auto;}
.split__body > :last-child{margin-bottom:0}
.split--tall{grid-template-columns:.8fr 1.2fr}
.split--band{grid-template-columns:1fr}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.stats > div{border-left:3px solid var(--cobalt-l);padding-left:16px}
.stats b{display:block;font-family:var(--serif);font-weight:700;font-size:2.3rem;line-height:1;color:#fff}
.stats span{display:block;font-size:.9rem;color:var(--on-navy-dim);margin-top:7px}
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);align-items:stretch}
.card--pack{background:var(--card);border:0;border-bottom:3px solid var(--cobalt); border-radius:var(--radius);padding:0;overflow:hidden;position:relative; display:flex;flex-direction:column; box-shadow:var(--shadow); transition:transform .2s ease, box-shadow .2s ease;}
.card--pack:hover{transform:translateY(-2px);box-shadow:var(--lift)}
.card--pack.featured{border-bottom-color:var(--gold)}
.pack__flag{display:block;background:var(--navy);color:#fff;text-align:center; font:650 .85rem/1 var(--sans);letter-spacing:.13em;text-transform:uppercase; padding:10px 8px;}
.card--pack.featured .pack__flag{background:var(--gold);color:#2b1f05}
.pack__head{padding:18px 22px 0;text-align:center}
.pack__head b{display:block;font-family:var(--serif);font-size:1.5rem;color:var(--navy)}
.pack__head span{display:block;font-size:.9rem;color:var(--muted);margin-top:3px}
.pack__body{padding:14px 22px 22px;display:flex;flex-direction:column;flex:1}
.pack__body img{margin:0 auto 12px}
.pack__per{font-family:var(--serif);font-weight:700;font-size:3rem;line-height:1;color:var(--navy);text-align:center;margin:0}
.pack__per sup{font-size:1.2rem;vertical-align:.9em;margin-right:2px}
.pack__unit{display:block;text-align:center;font-size:.88rem;color:var(--muted);margin-bottom:12px}
.pack__tot{text-align:center;margin:0 0 14px;font-size:1rem}
.pack__tot b{color:var(--navy);font-weight:650}
.pack__was{color:var(--muted);text-decoration:line-through;margin-left:8px;font-size:.92rem}
.pack__perks{list-style:none;margin:0 0 18px;padding:0;font-size:.93rem}
.pack__perks li{position:relative;padding-left:22px;margin-bottom:.45em;color:var(--ink-2)}
.pack__perks li::before{content:'';position:absolute;left:0;top:.5em;width:9px;height:9px;border-radius:2px;background:var(--cobalt)}
.pack__marks{font-size:.9062rem;color:var(--muted);text-align:center;margin:10px 0 0}
.card--pack .btn{margin-top:auto}
.buy__note{font-size:.92rem;color:var(--muted);max-width:80ch}
.faq{display:grid;gap:12px}
.faq details{background:var(--card);border-bottom:3px solid var(--cobalt);border-radius:var(--radius);overflow:hidden}
.faq summary{cursor:pointer;padding:16px 22px;font-weight:650;color:var(--navy); font-size:1.03rem;list-style:none;position:relative;padding-right:50px;}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:20px;top:50%;transform:translateY(-50%); font:400 1.5rem/1 var(--sans);color:var(--cobalt);}
.faq details[open] summary::after{content:'\2212'}
.faq__body{padding:0 22px 18px;border-top:1px solid var(--rule-2);padding-top:14px}
.faq__body p:last-child{margin-bottom:0}
.article{max-width:76ch}
.article h2{margin-top:1.4em}
.article h3{margin-top:1.3em}
.article figure{margin:0 0 22px}
.article figure img{border-radius:var(--radius);border-bottom:3px solid var(--cobalt);width:100%;height:auto}
.article figure.portrait img{max-width:var(--figw,340px);margin-inline:auto}
.article figcaption{font-size:.92rem;color:var(--muted);margin-top:9px;line-height:1.5}
.toc{background:var(--card);border-bottom:3px solid var(--navy);border-radius:var(--radius);padding:20px 24px;margin:0 0 26px}
.toc b{display:block;color:var(--navy);font-weight:650;margin-bottom:.5em}
.toc ol{margin:0;padding-left:1.2em;font-size:.96rem}
.toc li{margin-bottom:.35em}
.postmeta{font-size:.94rem;color:var(--muted);margin:0 0 20px}
@media (max-width:1079px){
  .menu{justify-content:flex-start}
  .hero__media{grid-column:1 / span 5;padding-top:0}
  .hero__copy{grid-column:6 / span 7}
  .hero h1{margin-left:0}
}
@media (max-width:980px){
  .hero{padding:30px 0 40px}
  .hero__grid{grid-template-columns:1fr;gap:26px}
  .hero__copy{grid-column:1;grid-row:auto;display:contents}
  .hero__media{grid-column:1;grid-row:auto;order:3;margin:4px 0 18px;padding-top:0}
  .hero__card{max-width:420px;margin-inline:auto}
  .hero .eyebrow{order:1}
  .hero h1{order:1}
  .hero .answer{order:2}
  .hero__road{order:4}
  .hero__cta{order:5}
  .trustrail{order:6;grid-column:1;grid-row:auto;grid-template-columns:repeat(2,1fr); margin-top:22px;padding-top:18px}
  .factpills{order:7}
  .figures{order:8}
  .g3,.g4,.shots,.rel,.prices,.stats{grid-template-columns:repeat(2,1fr)}
  .badgewall,.badgewall.bw3{grid-template-columns:repeat(2,1fr)}
  .versus{grid-template-columns:1fr;background:var(--card)}
  .versus__row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); column-gap:14px;padding:14px 16px;border-bottom:1px solid var(--rule)}
  .versus__row:last-child{border-bottom:0}
  .versus__row--h{display:none}
  .versus__row > div{padding:0;border-bottom:0;background:transparent}
  .versus__name{grid-column:1 / -1;margin-bottom:8px;font-size:1.02rem}
  .versus__v::before{content:attr(data-label);display:block;margin-bottom:3px; font:600 .85rem/1.3 var(--sans);letter-spacing:.05em;text-transform:uppercase; color:var(--muted);}
  .sec--dark .versus__row > div.versus__v::before{color:var(--muted)}
  .split__body .grid.g2{grid-template-columns:1fr}
}
@media (min-width:1080px){
  .nav__price{display:block}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .brand .bw small{display:none}
  .brand svg{width:34px;height:34px}
  .brand .bw b{font-size:1.35rem}
  .nav__top{padding:10px 0}
  .util__row{justify-content:center;gap:2px 18px;font-size:0.9062rem;padding:7px 0;text-align:center}
  .util__item + .util__item::before{display:none}
  .util__item--trim{display:none}
  .nav__strip{overflow-x:auto}
  .menu{flex-wrap:nowrap;justify-content:flex-start;gap:0 18px}
  .menu li a{white-space:nowrap;font-size:.94rem}
  .menu__more{display:none}
  .burger{display:block}
  .menu.open .menu__more{display:block}
  .g2,.g3,.g4,.steps,.shots,.shots.s2,.rel,.prices,.stats,.split,.split--tall,.postlist{grid-template-columns:1fr}
  .badgewall{grid-template-columns:repeat(2,1fr)}
  .figures{grid-template-columns:repeat(3,1fr);gap:14px}
  .figures b{font-size:1.4rem}
  .trustrail{grid-template-columns:1fr;gap:14px}
  .sec{padding:36px 0}
  .split--band{grid-template-columns:1fr}
}
@media (max-width:560px){
  .hero__cta .btn{flex:1 1 100%}
  .factpills li{border-radius:14px;padding:8px 10px}
  .util__item--wide{display:none}
}
@media (max-width:420px){
  .figures{grid-template-columns:1fr}
  .badgewall,.badgewall.bw2,.badgewall.bw3{grid-template-columns:1fr}
  .pack__per{font-size:2.5rem}
}
.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}
.nav--away{transform:translateY(-100%)}
html.chrome-up .buybar{transform:translateY(105%)}
.tablewrap[data-reveal],.tablewrap.reveal{opacity:1;transform:none;transition:none}
.callout, .alert, .byline, .faq, .article figure{border-radius:var(--radius)}
.rel a, .shots figure, .card--pack, .badgewall figure{transition:box-shadow .2s ease, transform .2s ease}
.rel a:hover, .shots figure:hover, .card--pack:hover, .badgewall figure:hover{box-shadow:var(--lift);transform:translateY(-2px)}
.grid + p, .badgewall + p, .prices + p, .prices + .buy__note, .steps + p, .shots + p, .inglist + p{margin-top:24px}
.card--pack img.pack__img--pad{transform:translateY(10.1%) scale(1.2);transform-origin:50% 89.4%}
.sec--panel .qa{background:transparent;border-bottom:0;border-radius:0;padding:0}
@media (max-width:640px){
  .tablewrap table.stack, .tablewrap table.stack tbody, .tablewrap table.stack tr, .tablewrap table.stack td{display:block;width:100%}
  .tablewrap table.stack thead{display:none}
  .tablewrap table.stack tr{padding:12px 0 10px;border-bottom:1px solid var(--rule-2)}
  .tablewrap table.stack tbody tr:last-child{border-bottom:0}
  .tablewrap table.stack td{border:0;padding:3px 16px 5px}
  .tablewrap table.stack td:first-child{color:var(--navy);font-weight:650;padding-bottom:6px}
  .tablewrap table.stack td::before{content:attr(data-label);display:block;margin-bottom:1px; font:600 .85rem/1.35 var(--sans);letter-spacing:.05em;text-transform:uppercase; color:var(--muted);}
  .tablewrap table.stack td:first-child::before{display:none}
  .tablewrap table.stack td:first-child .ing__latin{font-weight:400}
  .tablewrap table.stack td.td--s::before{display:inline;margin-right:8px}
  .sec--dark .tablewrap table.stack tr{border-bottom-color:var(--rule-navy)}
  .sec--dark .tablewrap table.stack td:first-child{color:#fff}
  .sec--dark .tablewrap table.stack td::before{color:var(--on-navy-dim)}
}
/* --- end of the copied first-screen rules --- */

/*!CRITICAL-END*/

/* =======================================================================
   CARDS - the slot's signature.
   Flat fill. A single rule along the BOTTOM edge, in cobalt. No side or
   top border, no shadow. The pack row is the one exception on the site and
   it carries the only soft lift.
   ======================================================================= */
.card{
  background:var(--card);
  border:0;
  border-bottom:3px solid var(--cobalt);
  border-radius:var(--radius);
  padding:24px 24px 22px;
}
.card h3{margin:0 0 .5em;color:var(--navy)}
.card p:last-child,.card ul:last-child{margin-bottom:0}

.grid{display:grid;gap:var(--gap)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

.steps{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap);counter-reset:s}
.step{
  background:var(--card);border-bottom:3px solid var(--cobalt);
  border-radius:var(--radius);padding:22px 24px;position:relative;counter-increment:s;
}
.step h3{margin:0 0 .45em;color:var(--navy)}
.step h3::before{
  content:counter(s);display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;margin-right:10px;border-radius:50%;
  background:var(--navy);color:#fff;font:650 .85rem/1 var(--sans);
  vertical-align:2px;
}
.step p:last-child{margin-bottom:0}

/* --- callouts, alerts, key points -------------------------------------- */
.callout{
  background:var(--paper-2);border-left:4px solid var(--cobalt);
  border-radius:0 var(--radius) var(--radius) 0;padding:18px 22px;margin:0 0 22px;
}
.callout b{display:block;font-weight:650;color:var(--navy);margin-bottom:.35em}
.callout p:last-child{margin-bottom:0}

.alert{
  background:#fdf6e6;border-left:4px solid var(--gold);
  border-radius:0 var(--radius) var(--radius) 0;padding:18px 22px;margin:0 0 22px;
}
.alert b{display:block;font-weight:650;color:#6b4c0c;margin-bottom:.35em}
.alert p:last-child{margin-bottom:0}

.keypoints{
  background:var(--card);border-bottom:3px solid var(--navy);
  border-radius:var(--radius);padding:20px 24px;margin:0 0 22px;
}
.keypoints b{display:block;font-weight:650;color:var(--navy);margin-bottom:.5em}
.keypoints ul{margin:0;padding-left:1.15em}
.keypoints li{margin-bottom:.4em}

.pullquote{
  margin:0 0 22px;padding:4px 0 4px 22px;border-left:4px solid var(--gold);
  font-family:var(--serif);font-size:1.3rem;line-height:1.4;color:var(--navy);
}
.pullquote cite{display:block;margin-top:.5em;font:500 .92rem/1.4 var(--sans);color:var(--muted);font-style:normal}

ul.ticks{list-style:none;margin:0 0 1em;padding:0}
ul.ticks li{position:relative;padding-left:26px;margin-bottom:.55em}
ul.ticks li::before{
  content:'';position:absolute;left:0;top:.52em;width:11px;height:11px;
  border-radius:3px;background:var(--cobalt);
}
.sec--dark ul.ticks li::before{background:var(--cobalt-l)}

/* --- tables ------------------------------------------------------------- */
.tablewrap{overflow-x:auto;margin:0 0 18px;border-radius:var(--radius)}
.tablewrap table{width:100%;border-collapse:collapse;background:var(--card);font-size:.97rem}
th,td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule-2)}
th{
  background:var(--navy);color:#fff;font:600 .88rem/1.3 var(--sans);
  letter-spacing:.06em;text-transform:uppercase;border-bottom:0;
}
tbody tr:last-child td{border-bottom:0}
.tnote{font-size:.9rem;color:var(--muted);margin:0 0 1em}

/* --- ingredient cards --------------------------------------------------- */
.inglist{display:grid;gap:var(--gap)}
.ingcard{
  background:var(--card);border-bottom:3px solid var(--cobalt);
  border-radius:var(--radius);padding:22px 24px;
}
.ingcard__top{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
  border-bottom:1px solid var(--rule-2);padding-bottom:12px;margin-bottom:14px;
}
.ingcard__top h3{margin:0;color:var(--navy);font-size:1.22rem}
.ing__latin{font-style:italic;color:var(--muted);font-size:.95rem}
.ing__dose{
  margin-left:auto;background:var(--navy);color:#fff;border-radius:999px;
  padding:5px 13px;font:650 .86rem/1 var(--sans);white-space:nowrap;
}
.ingcard p:last-child{margin-bottom:0}

/* --- the three-column comparison --------------------------------------- */
/* Each ingredient is a .versus__row. Wide, the row is display:contents and
   its three cells sit straight in the three-column grid. Narrow (see the 980px
   query) each row becomes its own labelled block. */
.versus{display:grid;grid-template-columns:1.1fr 1fr 1.4fr;gap:0;border-radius:var(--radius);overflow:hidden;margin:0 0 18px}
.versus__row{display:contents}
.versus__row > div{padding:12px 15px;border-bottom:1px solid var(--rule-2);background:var(--card);font-size:.96rem}
.versus__h{
  background:var(--navy)!important;color:#fff;
  font:600 .86rem/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;
}
/* Inside a navy slab a navy header row vanished into the slab: no visible top
   edge, square-looking top corners over rounded bottom ones (audit 21 Sep
   2026). A lighter navy and a hairline ring give the table its own edge. */
.sec--dark .versus{box-shadow:0 0 0 1px var(--rule-navy)}
.sec--dark .versus__h{background:var(--navy-3)!important}

/* --- figures with captions --------------------------------------------- */
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.shots.s2{grid-template-columns:repeat(2,1fr)}
.shots figure{margin:0;background:var(--card);border-bottom:3px solid var(--cobalt);border-radius:var(--radius);overflow:hidden}
.shots figure img{width:100%;height:auto}
.shots figcaption{display:block;padding:16px 20px 20px}
.shots figcaption b{display:block;color:var(--navy);font-weight:650;margin-bottom:.35em}
.shots figcaption span{display:block;font-size:.94rem;color:var(--ink-2);line-height:1.55}

.badgewall{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.badgewall figure{margin:0;background:var(--card);border-bottom:3px solid var(--gold);border-radius:var(--radius);padding:20px;text-align:center}
.badgewall figure img{margin:0 auto 12px}
.badgewall b{display:block;color:var(--navy);font-weight:650;margin-bottom:.3em}
.badgewall span{display:block;font-size:.9rem;color:var(--ink-2);line-height:1.5}
/* A wall of two or six takes two or three columns, so no seal sits alone on
   a row. The --off wall is stock marks this site does NOT claim: greyed and
   tagged, shown for recognition only. */
.badgewall.bw2{grid-template-columns:repeat(2,1fr)}
.badgewall.bw3{grid-template-columns:repeat(3,1fr)}
.badgewall--off figure{border-bottom-color:var(--rule)}
.badgewall--off figure img{filter:grayscale(1);opacity:.6}
.badgewall__tag{
  display:inline-block;margin:0 0 8px;padding:3px 10px;border-radius:999px;
  background:var(--paper);color:var(--ink-2);font:600 .85rem/1.25 var(--sans);
  font-style:normal;letter-spacing:.05em;text-transform:uppercase;
}

/* --- image + copy, starting LEVEL (house rule 12 D) --------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start;margin:0 0 22px}
.split--flip .split__img{order:2}
.split__img img{
  width:100%;max-width:var(--imgw,100%);height:auto;
  border-radius:var(--radius);border-bottom:3px solid var(--cobalt);
  margin-inline:auto;
}
.split__body > :last-child{margin-bottom:0}
.split--tall{grid-template-columns:.8fr 1.2fr}
.split--band{grid-template-columns:1fr}

/* --- number bands ------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.stats > div{border-left:3px solid var(--cobalt-l);padding-left:16px}
.stats b{display:block;font-family:var(--serif);font-weight:700;font-size:2.3rem;line-height:1;color:#fff}
.stats span{display:block;font-size:.9rem;color:var(--on-navy-dim);margin-top:7px}

/* --- rating meter ------------------------------------------------------- */
.meter{display:grid;gap:9px;margin:0 0 18px}
.meter__row{display:grid;grid-template-columns:64px 1fr 48px;gap:12px;align-items:center;font-size:.94rem}
.meter__bar{display:block;height:11px;background:var(--rule-2);border-radius:999px;overflow:hidden}
.meter__bar i{display:block;height:100%;background:var(--cobalt);border-radius:999px}
.stars{color:var(--gold);letter-spacing:2px}
.stars i{font-style:normal;opacity:.3}

/* =======================================================================
   THE PACK ROW - the one soft lift on the site
   ======================================================================= */
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);align-items:stretch}
.card--pack{
  background:var(--card);border:0;border-bottom:3px solid var(--cobalt);
  border-radius:var(--radius);padding:0;overflow:hidden;position:relative;
  display:flex;flex-direction:column;
  box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease;
}
.card--pack:hover{transform:translateY(-2px);box-shadow:var(--lift)}
.card--pack.featured{border-bottom-color:var(--gold)}
/* The featured tier carries a full-width ribbon across its TOP. */
.pack__flag{
  display:block;background:var(--navy);color:#fff;text-align:center;
  font:650 .85rem/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;
  padding:10px 8px;
}
.card--pack.featured .pack__flag{background:var(--gold);color:#2b1f05}
.pack__head{padding:18px 22px 0;text-align:center}
.pack__head b{display:block;font-family:var(--serif);font-size:1.5rem;color:var(--navy)}
.pack__head span{display:block;font-size:.9rem;color:var(--muted);margin-top:3px}
.pack__body{padding:14px 22px 22px;display:flex;flex-direction:column;flex:1}
.pack__body img{margin:0 auto 12px}
.pack__per{font-family:var(--serif);font-weight:700;font-size:3rem;line-height:1;color:var(--navy);text-align:center;margin:0}
.pack__per sup{font-size:1.2rem;vertical-align:.9em;margin-right:2px}
.pack__unit{display:block;text-align:center;font-size:.88rem;color:var(--muted);margin-bottom:12px}
.pack__tot{text-align:center;margin:0 0 14px;font-size:1rem}
.pack__tot b{color:var(--navy);font-weight:650}
.pack__was{color:var(--muted);text-decoration:line-through;margin-left:8px;font-size:.92rem}
.pack__perks{list-style:none;margin:0 0 18px;padding:0;font-size:.93rem}
.pack__perks li{position:relative;padding-left:22px;margin-bottom:.45em;color:var(--ink-2)}
.pack__perks li::before{content:'';position:absolute;left:0;top:.5em;width:9px;height:9px;border-radius:2px;background:var(--cobalt)}
.pack__marks{font-size:.9062rem;color:var(--muted);text-align:center;margin:10px 0 0}
.card--pack .btn{margin-top:auto}
.buy__note{font-size:.92rem;color:var(--muted);max-width:80ch}

/* =======================================================================
   FAQ, REFERENCES, BYLINE, RELATED
   ======================================================================= */
.faq{display:grid;gap:12px}
.faq details{background:var(--card);border-bottom:3px solid var(--cobalt);border-radius:var(--radius);overflow:hidden}
.faq summary{
  cursor:pointer;padding:16px 22px;font-weight:650;color:var(--navy);
  font-size:1.03rem;list-style:none;position:relative;padding-right:50px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'+';position:absolute;right:20px;top:50%;transform:translateY(-50%);
  font:400 1.5rem/1 var(--sans);color:var(--cobalt);
}
.faq details[open] summary::after{content:'\2212'}
.faq__body{padding:0 22px 18px;border-top:1px solid var(--rule-2);padding-top:14px}
.faq__body p:last-child{margin-bottom:0}

.refs{background:var(--card);border-bottom:3px solid var(--navy);border-radius:var(--radius);padding:22px 26px;margin:0 0 24px}
.refs ol{margin:0;padding-left:1.3em;font-size:.94rem;line-height:1.6}
.refs li{margin-bottom:.7em;color:var(--ink-2)}
.refs a{word-break:break-word}

.byline{
  display:grid;grid-template-columns:62px 1fr;gap:18px;align-items:start;
  background:var(--paper-2);border-left:4px solid var(--navy);
  border-radius:0 var(--radius) var(--radius) 0;padding:20px 24px;
}
.byline__mark{
  display:flex;align-items:center;justify-content:center;width:62px;height:62px;
  border-radius:50%;background:var(--navy);color:#fff;
  font:700 1.15rem/1 var(--serif);letter-spacing:.02em;
}
.byline b{display:block;color:var(--navy);font-weight:650;margin-bottom:.4em}
.byline p{margin:0;font-size:.95rem;color:var(--ink-2)}

.rel{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);text-align:left}
.rel a{
  display:block;background:var(--card);border-bottom:3px solid var(--cobalt);
  border-radius:var(--radius);padding:20px 22px;text-decoration:none;color:var(--ink);
  transition:transform .18s ease, box-shadow .18s ease;
}
.rel a:hover{transform:translateY(-2px);box-shadow:var(--lift)}
.rel b{display:block;color:var(--navy);font-weight:650;margin-bottom:.3em}
.rel span{display:block;font-size:.93rem;color:var(--muted);line-height:1.5}

/* --- the AI / answer-engine factsheet block ---------------------------- */
.qa{background:var(--card);border-bottom:3px solid var(--navy);border-radius:var(--radius);padding:22px 26px}
.qa > p{font-size:1.062rem}
.qa .tablewrap{margin-bottom:0}
.qa td{font-size:1rem}

/* =======================================================================
   THE CLOSING CTA + FOOTER
   ======================================================================= */
.final{
  display:grid;grid-template-columns:230px 1fr;gap:32px;align-items:start;
  background:var(--navy);color:var(--on-navy);border-radius:var(--radius);
  padding:30px 34px;
}
.final__img img{border-radius:var(--radius-sm);margin-inline:auto}
.final h2{color:#fff;margin-top:0}
.final p{color:var(--on-navy)}
.final__price{font-weight:650;color:#fff}
.final__sm{font-size:.88rem;color:var(--on-navy-dim);margin:12px 0 0}
/* Measured, not declared: white on #3b7cea is 3.99:1 and this button is
   17px at 650, which is not WCAG large text. The darker stop below
   renders at 4.77:1 and still separates cleanly from the navy slab. */
.final .btn.btn--cyan{background:linear-gradient(135deg,#2a6ee0 0%,var(--cobalt-d) 100%);border-color:#2a6ee0;color:#ffffff}

.fcta{background:var(--paper-2);border-top:1px solid var(--rule);padding:52px 0}
.fcta__box{display:grid;grid-template-columns:1fr 260px;gap:38px;align-items:start}
.fcta__eye{
  display:inline-block;font:600 .84rem/1 var(--sans);letter-spacing:.15em;
  text-transform:uppercase;color:var(--cobalt-d);margin-bottom:12px;
}
.fcta__h{font-family:var(--serif);font-weight:700;font-size:1.9rem;line-height:1.14;color:var(--navy);margin:0 0 .6em}
.fcta__sm{font-size:.9rem;color:var(--muted);margin:14px 0 0}
.fcta__img img{border-radius:var(--radius);margin-inline:auto}

footer{background:var(--navy);color:var(--on-navy)}
.fseals{background:var(--paper);border-top:1px solid var(--rule);padding:18px 0}
.fseals__row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.fseals__row img{flex:none}
.fseals__row span{font-size:1rem;color:var(--ink-2)}

.fdark{padding:46px 0 34px}
/* Five columns. The returns address takes the first two. */
.fgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:30px var(--gap)}
.fcard{grid-column:span 2}
.fbrand{font-family:var(--serif);font-weight:700;font-size:1.7rem;color:#fff;margin-bottom:6px}
.fbrand span{color:var(--cobalt-l)}
.frole{color:var(--on-navy-dim);margin-bottom:1em}
.fdark p{font-size:1.062rem;line-height:1.6;margin-bottom:.9em;color:var(--on-navy)}
.fdark b{color:#fff;font-weight:650}
.fdark a{color:#c3d6ff;text-decoration:none}
.fdark a:hover{text-decoration:underline}
.fh{
  font:650 .94rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  color:#fff;margin:0 0 12px;padding-bottom:9px;border-bottom:1px solid var(--rule-navy);
}
.fdark ul{list-style:none;margin:0 0 22px;padding:0}
.fdark ul li{margin-bottom:.5em}
.fdark ul li a{font-size:1.062rem;display:inline-block;padding:3px 0}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;border-top:1px solid var(--rule-navy);padding-top:20px;margin-top:8px}
.fpay span{font-size:1rem;color:var(--on-navy-dim)}

.disc{background:#081026;border-top:1px solid var(--rule-navy);padding:26px 0 30px}
.disc p{font-size:1rem;line-height:1.6;color:#b6c3e0;margin-bottom:1em}
.disc b{color:#fff}
.disc__list{margin:0 0 1em;padding-left:1.2em;font-size:1rem;line-height:1.6;color:#a4b3d4}
.disc__list li{margin-bottom:.45em}
.disc .copy{font-size:1rem;color:#8fa0c6;margin:0}

/* =======================================================================
   THE BOTTOM CTA BAR - house rule 8
   Declared at top level, NOT inside a media query, so the desktop reader
   gets it too.
   ======================================================================= */
.buybar{
  position:fixed;left:0;right:0;bottom:0;z-index:45;
  display:flex;background:var(--navy);border-top:3px solid var(--cobalt);
  transform:translateY(105%);transition:transform .28s ease;
}
.buybar.show{transform:translateY(0)}
.buybar__in{
  width:min(var(--wrap),91%);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;
}
.buybar__t b{display:block;color:#fff;font-weight:650;font-size:1rem}
.buybar__t span{display:block;font-size:0.9062rem;color:var(--on-navy-dim)}

/* --- scroll reveal ------------------------------------------------------ */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease, transform .5s ease}
.reveal.in{opacity:1;transform:none}

/* =======================================================================
   BLOG
   ======================================================================= */
.article{max-width:76ch}
.article h2{margin-top:1.4em}
.article h3{margin-top:1.3em}
.article figure{margin:0 0 22px}
.article figure img{border-radius:var(--radius);border-bottom:3px solid var(--cobalt);width:100%;height:auto}
.article figure.portrait img{max-width:var(--figw,340px);margin-inline:auto}
.article figcaption{font-size:.92rem;color:var(--muted);margin-top:9px;line-height:1.5}
.toc{background:var(--card);border-bottom:3px solid var(--navy);border-radius:var(--radius);padding:20px 24px;margin:0 0 26px}
.toc b{display:block;color:var(--navy);font-weight:650;margin-bottom:.5em}
.toc ol{margin:0;padding-left:1.2em;font-size:.96rem}
.toc li{margin-bottom:.35em}
.postmeta{font-size:.94rem;color:var(--muted);margin:0 0 20px}
.postlist{display:grid;gap:var(--gap)}
.postlist a{
  display:block;background:var(--card);border-bottom:3px solid var(--cobalt);
  border-radius:var(--radius);padding:22px 26px;text-decoration:none;color:var(--ink);
  transition:transform .18s ease, box-shadow .18s ease;
}
.postlist a:hover{transform:translateY(-2px);box-shadow:var(--lift)}
.postlist b{display:block;font-family:var(--serif);font-size:1.3rem;color:var(--navy);margin-bottom:.3em}
.postlist span{display:block;color:var(--ink-2);font-size:.97rem;line-height:1.55}
.final--media{margin:30px 0}

/* --- forms -------------------------------------------------------------- */
.form{display:grid;gap:16px;background:var(--card);border-bottom:3px solid var(--cobalt);border-radius:var(--radius);padding:26px}
.form label{display:block;font-weight:600;color:var(--navy);margin-bottom:6px;font-size:.97rem}
.form input,.form select,.form textarea{
  width:100%;font:400 16px/1.5 var(--sans);color:var(--ink);
  background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--radius-sm);
  padding:12px 14px;
}
.form textarea{min-height:140px;resize:vertical}
.form .btn{justify-self:start}

/* =======================================================================
   RESPONSIVE
   The phone hero is the block that decides mobile CLS. critical_hero.py
   copies these above the marker on the next build.
   ======================================================================= */
@media (max-width:1180px){
  .fgrid{grid-template-columns:repeat(3,1fr)}
  .fcard{grid-column:span 3}
}

@media (max-width:1079px){
  .menu{justify-content:flex-start}
  /* The overlap is a desktop gesture. Below this the well sits in its own
     column and the headline stops crossing it. */
  .hero__media{grid-column:1 / span 5;padding-top:0}
  .hero__copy{grid-column:6 / span 7}
  .hero h1{margin-left:0}
}

@media (max-width:980px){
  .hero{padding:30px 0 40px}
  .hero__grid{grid-template-columns:1fr;gap:26px}
  .hero__copy{grid-column:1;grid-row:auto;display:contents}
  .hero__media{grid-column:1;grid-row:auto;order:3;margin:4px 0 18px;padding-top:0}
  .hero__card{max-width:420px;margin-inline:auto}
  .hero .eyebrow{order:1}
  .hero h1{order:1}
  .hero .answer{order:2}
  .hero__road{order:4}
  .hero__cta{order:5}
  .trustrail{order:6;grid-column:1;grid-row:auto;grid-template-columns:repeat(2,1fr);
             margin-top:22px;padding-top:18px}
  .factpills{order:7}
  .figures{order:8}
  .g3,.g4,.shots,.rel,.prices,.stats{grid-template-columns:repeat(2,1fr)}
  .badgewall,.badgewall.bw3{grid-template-columns:repeat(2,1fr)}
  .fcta__box{grid-template-columns:1fr}
  /* The seal used to jump ABOVE the eyebrow and heading at about 175px. It is
     a sign-off, so it follows the text, smaller. */
  .fcta__img{order:2;max-width:128px}
  /* One labelled block per ingredient: the name across the top, then the
     bottle's figure and the trial figure side by side, each under its own
     label. Twenty-one identical unlabelled rows lost the comparison the
     section exists to make (audit 21 Sep 2026). */
  .versus{grid-template-columns:1fr;background:var(--card)}
  .versus__row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
               column-gap:14px;padding:14px 16px;border-bottom:1px solid var(--rule)}
  .versus__row:last-child{border-bottom:0}
  .versus__row--h{display:none}
  .versus__row > div{padding:0;border-bottom:0;background:transparent}
  .versus__name{grid-column:1 / -1;margin-bottom:8px;font-size:1.02rem}
  .versus__v::before{
    content:attr(data-label);display:block;margin-bottom:3px;
    font:600 .85rem/1.3 var(--sans);letter-spacing:.05em;text-transform:uppercase;
    color:var(--muted);
  }
  .sec--dark .versus__row > div.versus__v::before{color:var(--muted)}
  .split__body .grid.g2{grid-template-columns:1fr}
}

@media (min-width:1080px){
  .nav__price{display:block}
}


@media (max-width:760px){
  body{font-size:16.5px}
  /* The masthead role line wrapped to three lines here and made the
     header 149px tall before a word of content. The topline above it
     already prints the same role, so this is a duplicate, not a loss. */
  .brand .bw small{display:none}
  .brand svg{width:34px;height:34px}
  .brand .bw b{font-size:1.35rem}
  .nav__top{padding:10px 0}
  /* No separator dots on a phone. The row wraps here, and a dot carried to
     the start of each new line made the rail read as a bulleted list three
     lines deep (audit 21 Sep 2026). Centred items with a gap read as facts. */
  .util__row{justify-content:center;gap:2px 18px;font-size:0.9062rem;padding:7px 0;text-align:center}
  .util__item + .util__item::before{display:none}
  .util__item--trim{display:none}
  .nav__strip{overflow-x:auto}
  .menu{flex-wrap:nowrap;justify-content:flex-start;gap:0 18px}
  .menu li a{white-space:nowrap;font-size:.94rem}
  .menu__more{display:none}
  .burger{display:block}
  .menu.open .menu__more{display:block}
  .g2,.g3,.g4,.steps,.shots,.shots.s2,.rel,.prices,.stats,.split,.split--tall,.postlist{grid-template-columns:1fr}
  .badgewall{grid-template-columns:repeat(2,1fr)}
  .fgrid{grid-template-columns:1fr}
  .fcard{grid-column:span 1}
  .final{grid-template-columns:1fr;padding:24px}
  .final__img{max-width:190px}
  .figures{grid-template-columns:repeat(3,1fr);gap:14px}
  .figures b{font-size:1.4rem}
  .trustrail{grid-template-columns:1fr;gap:14px}
  .sec{padding:36px 0}
  .buybar__in{padding:10px 0;gap:10px}
  .buybar__t span{display:none}
  .buybar .btn{padding:13px 18px;font-size:.95rem}
  .byline{grid-template-columns:1fr}
  .split--band{grid-template-columns:1fr}
}

@media (max-width:560px){
  /* Two stacked hero buttons at two different widths looked unfinished. */
  .hero__cta .btn{flex:1 1 100%}
  .factpills li{border-radius:14px;padding:8px 10px}
  /* The window is printed in the hero and the trust rail; on a phone the
     topline keeps the seller and the telephone, on two centred lines. */
  .util__item--wide{display:none}
}

@media (max-width:420px){
  .figures{grid-template-columns:1fr}
  .badgewall,.badgewall.bw2,.badgewall.bw3{grid-template-columns:1fr}
  .pack__per{font-size:2.5rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  .btn:hover,.card--pack:hover,.rel a:hover,.postlist a:hover{transform:none}
}

@media print{
  .nav,.util,.buybar,.fcta,.skip{display:none}
  body{background:#fff}
}

/* --- 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 6 box-shadow declaration(s)
   and 1 of them layered, so every panel read flat however generous
   the radius was. Two stops -- a tight contact shadow and a wide
   ambient one -- is what makes a surface look raised. The tint is
   this site's own ink (16,28,57), not neutral black.

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

/* These panels declared no radius of their own, so raising
   the token alone left them square. House rule 11 is a
   floor: it outranks a slot that chose square corners. */
.callout,
.alert,
.byline,
.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,
.shots figure,
.card--pack,
.badgewall figure{transition:box-shadow .2s ease, transform .2s ease}
.rel a:hover,
.shots figure:hover,
.card--pack:hover,
.badgewall figure:hover{box-shadow:var(--lift);transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){
.rel a:hover,
.shots figure:hover,
.card--pack:hover,
.badgewall figure:hover{transform:none}
}
/* ==== end modern surface ==== */

/* ==== deployment audit, round 2 (21 Sep 2026) ==========================
   Each of these was found by looking at the rendered page, not by a gate. */

/* A paragraph that follows a grid of cards, the seal wall or the pack row sat
   6px or less under the cards' bottom rule and read as touching it (timeline,
   reviews, seals, pricing note). The grid containers carry no bottom margin
   and a <p> no top margin, so the gap is given to the paragraph. */
.grid + p,
.badgewall + p,
.prices + p,
.prices + .buy__note,
.steps + p,
.shots + p,
.inglist + p{margin-top:24px}

/* The pack images, one scale. The two-bottle file is padded: its jars fill
   77% of the frame's height against 92% for the three and six-bottle files,
   so in the same 168px slot they rendered visibly smaller and higher. Scaled
   about the jars' own base and moved down onto the shared baseline. A
   transform, so the card's layout does not move at all. */
.card--pack img.pack__img--pad{transform:translateY(10.1%) scale(1.2);transform-origin:50% 89.4%}

/* The answer-engine factsheet sits in a white panel section. As a white card
   it was invisible there: its intro and table looked oddly indented from the
   heading, a lone 3px rule floated under the table, and at 390 the padding
   cost the value column 50px. In the white panel it drops the card chrome
   and aligns to the heading's column. */
.sec--panel .qa{background:transparent;border-bottom:0;border-radius:0;padding:0}

/* Tables of three or more columns stack on a phone: one block per row, the
   first cell as its title, every other cell under its own column label.
   Squeezed into 390px the last column ran to about 120px and 10 to 16 lines
   of one to three words a line. */
@media (max-width:640px){
  .tablewrap table.stack,
  .tablewrap table.stack tbody,
  .tablewrap table.stack tr,
  .tablewrap table.stack td{display:block;width:100%}
  .tablewrap table.stack thead{display:none}
  .tablewrap table.stack tr{padding:12px 0 10px;border-bottom:1px solid var(--rule-2)}
  .tablewrap table.stack tbody tr:last-child{border-bottom:0}
  .tablewrap table.stack td{border:0;padding:3px 16px 5px}
  .tablewrap table.stack td:first-child{color:var(--navy);font-weight:650;padding-bottom:6px}
  .tablewrap table.stack td::before{
    content:attr(data-label);display:block;margin-bottom:1px;
    font:600 .85rem/1.35 var(--sans);letter-spacing:.05em;text-transform:uppercase;
    color:var(--muted);
  }
  .tablewrap table.stack td:first-child::before{display:none}
  .tablewrap table.stack td:first-child .ing__latin{font-weight:400}
  .tablewrap table.stack td.td--s::before{display:inline;margin-right:8px}
  .sec--dark .tablewrap table.stack tr{border-bottom-color:var(--rule-navy)}
  .sec--dark .tablewrap table.stack td:first-child{color:#fff}
  .sec--dark .tablewrap table.stack td::before{color:var(--on-navy-dim)}
}
/* ==== end deployment audit, round 2 ==== */