/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Tomorrow Fallback";src:local("Arial");font-weight:400;size-adjust:108.07%;ascent-override:92.53%;descent-override:18.51%;line-gap-override:0.00%}
@font-face{font-family:"Tomorrow Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:110.11%;ascent-override:90.82%;descent-override:18.16%;line-gap-override:0.00%}
@font-face{font-family:"SUSE Fallback";src:local("Arial");font-weight:400;size-adjust:99.05%;ascent-override:98.94%;descent-override:28.27%;line-gap-override:0.00%}
@font-face{font-family:"SUSE Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:94.01%;ascent-override:104.24%;descent-override:29.78%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* ==========================================================================
   alphaesteel.com -- AlphaSteel, USA Authorized AlphaSteel Retailer
   --------------------------------------------------------------------------
   SLOT (build_set row 223):
     type    Tomorrow (geometric, machined display) + SUSE (neutral grotesk)
     layout  asymmetric 7/5 hero, bottle RIGHT on a glowing stage card, a
             vertical fact rail overlapping the stage's left edge
     cards   OUTLINED cards, 1.5px steel keyline, red corner NOTCH; a top
             TAB variant for labelled cards
     ground  CSS-only dot texture on the tint and dark bands, the hero wash
     depth   soft lift + inner highlight, tinted with the site ink #191517
     radius  16px cards (--radius) / 12px controls (--radius-sm) / 999px pills.
             The slot asked 10px for controls; house rule 11 floors
             --radius-sm at 12px and modern_surface.py (postbuild) would
             otherwise overwrite this sheet's --shadow and --lift tokens and
             strip the inset highlight, so the floor is met at source.
     motion  "steel-counterflow" (the CIRCULATE family): two counter-rotating
             arcs at different radii circling the bottle, sized beyond the
             stage card (alphaeCirculateOuter 18s / alphaeCirculateInner 12s).
             A men's vitality capsule, so the movement circulates, slowly.
             Nothing animates the stage card, the <img> (LCP) or the H1; all
             of it is off under prefers-reduced-motion.
   PALETTE, from the bottle: black label #0f1009 -> ink #191517; label red
     #d0241b with a deep #9b1319; the steel ring and pedestal -> #8b929c.
   GRADIENTS, two places only: the buying CTA (--grad-cta) and one ground (the
     hero / page-head wash). Small icon badges reuse the CTA ramp.
   BUILD RULES:
     * everything that moves a box, and the hero's responsive rules, sit ABOVE
       the critical marker (inlined into every page at build time); hover,
       transitions and the reveal sit below it. Any block appended later must
       be delimited at both ends.
     * the sticky header carries NO backdrop-filter, no transform at rest and
       no will-change: any of them would trap the dropdown menu.
   ========================================================================== */

/* ---- fallback faces sized to the webfonts (measured in Chromium 21 Sep 2026:
   Tomorrow 700 is 8.95% wider than Arial Bold, 600 is 5.9% wider; SUSE 400 is
   2.3% narrower than Arial). Keeps the swap from reflowing the H1. */
@font-face{font-family:"Tomorrow Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Arial");font-weight:700;size-adjust:108.9%}
@font-face{font-family:"Tomorrow Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Arial");font-weight:600;size-adjust:105.9%}
@font-face{font-family:"Tomorrow Fallback";src:local("Arial");font-weight:500;size-adjust:104%}
@font-face{font-family:"SUSE Fallback";src:local("Arial");font-weight:400;size-adjust:97.7%}
@font-face{font-family:"SUSE Fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:700;size-adjust:97%}

:root{
  /* ground */
  --paper:#f2f3f6; --paper-tint:#e6e9ee; --paper-card:#ffffff;
  --tint:#e6e9ee; --wash-a:#f8f8fa; --wash-b:#e9ecf0;
  --ink:#191517; --muted:#4d4a4f; --faint:#625e66;
  --line:#d8dce2; --line-soft:#e6e9ed;
  /* accent, from the bottle */
  --accent:#d0241b; --accent-hi:#dc2e24; --accent-deep:#9b1319; --accent-ink:#b01c16;
  --accent-tint:#fcecea; --accent-line:#f2c6c2;
  /* steel ramp, from the ring and pedestal */
  --steel:#8b929c; --steel-deep:#434a53; --steel-soft:#eef0f3; --steel-line:#cdd2d9;
  /* the dark proof band and the footer */
  --night:#141417; --night-2:#1c1d22; --night-line:rgba(255,255,255,.12);
  --on-dark:#f1f2f4; --on-dark-muted:#bcc0c8;
  /* type */
  --display:"Tomorrow","Tomorrow Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sans:"SUSE","SUSE Fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* metrics */
  --wrap:1200px; --measure:760px; --measure-wide:980px; --navh:76px;
  /* curve: a scale, not a value */
  --radius:16px;          /* cards, panels, tables, media */
  --radius-sm:12px;       /* buttons, inputs, chips, wells (house floor 12px) */
  /* shade: soft lift + inner highlight, tinted with the ink, never neutral black */
  --shadow:0 2px 4px rgba(25,21,23,.06), 0 16px 36px rgba(25,21,23,.08), inset 0 1px 0 rgba(255,255,255,.75);
  --lift:0 4px 10px rgba(25,21,23,.09), 0 26px 48px rgba(25,21,23,.15), inset 0 1px 0 rgba(255,255,255,.85);
  --glow:0 10px 26px rgba(208,36,27,.32), 0 2px 6px rgba(155,19,25,.28);
  --glow-lift:0 16px 34px rgba(208,36,27,.40), 0 3px 8px rgba(155,19,25,.32);
  /* the buying CTA -- worst stop #dc2e24 still holds white text at 4.7:1 */
  --grad-cta:linear-gradient(135deg,#dc2e24 0%,#c11d17 55%,#951218 100%);
  --grad-text:linear-gradient(100deg,#b01c16 0%,#d0241b 55%,#951218 100%);
  /* texture */
  --dots:radial-gradient(rgba(25,21,23,.075) 1px, transparent 1.4px);
  --dots-dark:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.4px);
  /* per-element knobs, stamped inline by the generator */
  --imgw:100%; --imgr:1; --pack-img:200px; --figw:360px; --w:0%;
}

/* ---- base ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{min-width:0}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:1.0625rem;line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video,table{max-width:100%}
img{height:auto;display:block}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);line-height:1.15;margin:0 0 .5em;
  font-weight:700;letter-spacing:-.005em;overflow-wrap:break-word}
h2{font-size:clamp(1.65rem,1.1rem + 1.6vw,2.4rem)}
h3{font-size:1.25rem;font-weight:600;line-height:1.25}
p{margin:0 0 1em}
a{color:var(--accent-ink);text-underline-offset:3px;text-decoration-thickness:1px}
b,strong{font-weight:700}
small{font-size:.92rem}
[id]{scroll-margin-top:96px}
.wrap{width:min(var(--wrap),100% - 32px);margin-inline:auto}
@media(min-width:768px){.wrap{width:min(var(--wrap),100% - 48px)}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:8px}
.skip:focus{left:12px;z-index:100;background:#fff;color:var(--ink);padding:10px 14px;border-radius:var(--radius-sm)}

/* ---- topline: the five trust facts -------------------------------------- */
.util{background:var(--night);color:var(--on-dark-muted);font-size:.9rem;line-height:1.35}
.util__row{display:flex;align-items:center;justify-content:space-between;gap:8px 18px;padding-block:8px}
.util__item{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.util__item b{color:#fff;font-weight:600}
.util__role b{color:#ff8b82}
/* inline-flex trims a flex item's trailing space, so the words need a gap */
.util__tel{color:#fff;font-weight:700;text-decoration:none;white-space:nowrap;min-height:28px;display:inline-flex;align-items:center;gap:.35em}
@media(max-width:1150px){.util__item:nth-child(2){display:none}}
@media(max-width:980px){.util__item:nth-child(3){display:none}}
@media(max-width:700px){.util__item:nth-child(4){display:none}.util__row{padding-block:6px}}
@media(max-width:460px){.util__long{display:none}.util{font-size:.86rem}}

/* ---- header ---------------------------------------------------------------
   Solid white, a hairline and a two-stop ink shadow. No backdrop-filter, no
   transform at rest, no will-change: the dropdown hangs from this box. */
.nav{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(25,21,23,.03), 0 10px 26px rgba(25,21,23,.06);
  transition:transform .28s ease, box-shadow .2s ease}
.nav__row{display:flex;align-items:center;gap:22px;min-height:70px;padding-block:10px;flex-wrap:nowrap}
.brand{display:flex;align-items:center;gap:10px;flex:none;text-decoration:none;color:var(--ink);white-space:nowrap}
.brand__mark{width:44px;height:44px;flex:none}
.brand__t{display:flex;flex-direction:column;line-height:1.05}
.brand__prod{font:700 1.34rem/1 var(--display);letter-spacing:.01em;color:var(--ink)}
.brand__prod span{color:var(--accent)}
.brand__firm{font:500 .86rem/1.2 var(--sans);color:var(--faint);letter-spacing:.03em;margin-top:3px}
.navmenus{flex:1;display:flex;justify-content:center;align-items:center}
.menu{display:flex;flex-wrap:nowrap;gap:26px;list-style:none;margin:0;padding:0}
/* `*{min-width:0}` lets flex items shrink under their text, and the labels
   then overprint each other. Menu items never shrink; the bar sheds instead. */
.menu>li{flex:none}
.menu a{position:relative;display:inline-flex;align-items:center;min-height:40px;font:600 .98rem/1 var(--sans);
  color:var(--ink);text-decoration:none;white-space:nowrap}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.menu a[aria-current="page"]::after,.menu a:hover::after{transform:scaleX(1)}
/* (0,2,0): `.btn{display:inline-flex}` comes later in the sheet and would
   otherwise put the drawer's order button into the desktop bar. */
.navmenus .menu__cta{display:none}
.nav__cta{display:flex;align-items:center;gap:16px;flex:none}
.burger{display:none;flex:none;width:46px;height:46px;border-radius:var(--radius-sm);border:1.5px solid var(--steel-line);
  background:#fff;padding:0;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px}
@media(max-width:1360px){.menu{gap:20px}.menu a{font-size:.95rem}}
@media(max-width:1180px){
  .burger{display:flex;margin-left:0}
  .nav__cta{margin-left:auto}
  .navmenus{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;align-items:stretch;
    background:#fff;border-top:1px solid var(--line);box-shadow:0 20px 40px rgba(25,21,23,.16);
    max-height:calc(100vh - 90px);overflow-y:auto;padding:6px 16px 18px}
  .navmenus.open{display:flex}
  .menu{flex-direction:column;gap:0}
  .menu li{border-bottom:1px solid var(--line-soft)}
  .menu a{display:flex;min-height:50px;font-size:1.06rem}
  .menu a::after{display:none}
  .navmenus .menu__cta{display:flex;margin-top:14px}
}
/* A phone keeps its order button in the bar: "Order", with the brand word
   kept for screen readers and search, clipped rather than removed. */
@media(max-width:560px){
  .nav__row{min-height:62px;gap:12px}
  .brand__firm{display:none}
  .brand__prod{font-size:1.2rem}
  .nav__cta .btn{min-height:44px;padding:10px 16px;font-size:.98rem;box-shadow:0 6px 16px rgba(208,36,27,.28)}
  .nav__cta .btn__long{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media(max-width:359px){.brand__mark{width:36px;height:36px}.brand__prod{font-size:1.02rem}.nav__cta .btn{padding:10px 12px}}

/* ---- buttons --------------------------------------------------------------
   The gradient primary and the SOLID graphite secondary read as two weights.
   Guarded at (0,2,0) so no `a` rule can repaint the text (rule 12 E1). */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 22px;
  border-radius:var(--radius-sm);border:2px solid transparent;font:600 1rem/1.15 var(--display);letter-spacing:.01em;
  text-decoration:none;cursor:pointer;white-space:nowrap;text-align:center}
.btn svg{flex:none}
.btn--lg{min-height:56px;padding:14px 28px;font-size:1.06rem}
.btn--block{display:flex;width:100%}
.btn.btn--cta,a.btn.btn--cta{background:var(--grad-cta);background-color:#c11d17;color:#fff;border-color:transparent;box-shadow:var(--glow)}
.btn.btn--solid,a.btn.btn--solid{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.btn--ghost,a.btn.btn--ghost{background:#fff;color:var(--ink);border-color:var(--steel-line)}
.sec--dark .btn.btn--solid,.final .btn.btn--solid,.site-foot .btn.btn--solid{background:#fff;color:var(--ink);border-color:#fff}
@media(max-width:420px){.btn--lg{padding:14px 20px}}

/* ---- the hero -------------------------------------------------------------
   The richest ground on the site: a label-red glow behind the bottle, a deep
   red ember top-right, a steel glow top-left and one machined sheen streak,
   over a vertical steel wash, with the dot texture on a masked pseudo-element.
   Nothing tints the bottom edge, so the wash meets its divider seamlessly.
   Clips horizontally only, so the sticky media column can travel. */
.hero{position:relative;isolation:isolate;overflow-x:clip;overflow-y:visible;
  padding-block:clamp(20px,2.8vw,40px) clamp(40px,5vw,72px);
  background:
    radial-gradient(44% 58% at 78% 46%, rgba(208,36,27,.24) 0%, rgba(208,36,27,0) 70%),
    radial-gradient(30% 36% at 96% 8%, rgba(155,19,25,.16) 0%, rgba(155,19,25,0) 70%),
    radial-gradient(44% 58% at 4% 4%, rgba(139,146,156,.40) 0%, rgba(139,146,156,0) 70%),
    linear-gradient(180deg,var(--wash-a) 0%,var(--wash-b) 100%)}
/* the machined sheen: one diagonal light streak, faded out well before the
   bottom edge so the divider below meets a flat wash */
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(112deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.6) 40%, rgba(255,255,255,0) 50%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 45%,transparent 85%);
          mask-image:linear-gradient(180deg,#000 0%,#000 45%,transparent 85%)}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--dots);background-size:20px 20px;
  -webkit-mask-image:radial-gradient(70% 80% at 72% 42%,#000 0%,transparent 78%);
          mask-image:radial-gradient(70% 80% at 72% 42%,#000 0%,transparent 78%)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}
/* phone first: the copy column dissolves and its children are ordered one by
   one -- pill, H1, the bottle, the Quick Answer, CTA, trust, proof, figures */
.hero__copy{display:contents}
.hero__pill{order:1;justify-self:start}
.hero__copy>h1{order:2}
.hero__media{order:3}
.hero__copy>.answer{order:4}
.hero__cta{order:5}
.ticks{order:6}
.trustrow{order:7}
.hero__proof{order:8}
.figures{order:9}
.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:#fff;
  border:1px solid var(--line);font:600 .86rem/1.2 var(--display);letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-ink);box-shadow:var(--shadow)}
.hero h1{font-size:clamp(2rem,1.2rem + 2.6vw,3.1rem);line-height:1.08;margin:0;letter-spacing:-.012em}
.hl{color:var(--accent-ink)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hl{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}}
.answer{background:rgba(255,255,255,.9);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 20px 14px;box-shadow:inset 4px 0 0 var(--accent), var(--shadow);color:var(--ink)}
.answer p{margin:0 0 10px;font-size:1.0625rem;line-height:1.62;color:var(--muted)}
.answer p:first-of-type{color:var(--ink);font-weight:500;font-size:1.09rem}
.answer p:last-child{margin-bottom:0}
.qtag{display:inline-flex;font:600 .86rem/1.2 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:6px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}
/* four benefit ticks: the label's three claim lines plus the printed panel.
   On a phone they follow the CTA (order above); on desktop they sit between
   the Quick Answer and the CTA, two by two. */
.ticks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.ticks li{display:flex;align-items:center;gap:10px;font:600 .97rem/1.35 var(--sans);color:var(--ink)}
.ticks .ck{width:24px;height:24px;margin-top:0;box-shadow:0 0 0 3px rgba(35,96,58,.08)}
@media(min-width:600px){.ticks{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px}}
.trustrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;list-style:none;margin:0;padding:14px 0 0;
  border-top:1px dashed var(--steel-line)}
.trustrow li{display:flex;align-items:center;gap:8px;font:600 .97rem/1.2 var(--sans);color:var(--muted)}
.trustrow img{width:44px;height:44px;flex:none}
.trustrow__pay{flex-direction:column;align-items:flex-start!important;gap:4px!important}
.trustrow__pay img{width:190px;height:auto}
.trustrow__pay span{font-size:.97rem}
.hero__proof{margin:0;font-size:1.0625rem;color:var(--muted);line-height:1.55}
.hero__proof a{font-weight:600}
.hero__proof a[href^="tel:"]{white-space:nowrap}
.hero__score{display:inline-flex;align-items:center;gap:5px;color:var(--ink);white-space:nowrap}
.hero__score svg{color:#c98a0b;fill:#e6a51a}
.hero__score b{font:700 1.15rem/1 var(--display)}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.figures div{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 12px 12px;box-shadow:var(--shadow)}
.figures div::before{content:"";position:absolute;left:0;top:0;width:38px;height:4px;background:var(--accent);border-radius:0 0 4px 0}
.figures b{display:block;font:700 clamp(1.35rem,1rem + 1vw,1.9rem)/1 var(--display);color:var(--ink)}
.figures span{display:block;margin-top:6px;font:500 .97rem/1.3 var(--sans);color:var(--muted)}

/* the stage: a translucent glowing card with a floor glow, the red corner
   notch and the lot tab; the arcs behind it show through its outer zone */
.hero__media{position:relative;display:flex;flex-direction:column;align-items:center;--ring-x:0px;--ring-y:calc(50% - 52px)}
.hero__stick{position:relative;width:100%;max-width:520px;margin-inline:auto;z-index:1}
.hero__card{position:relative;z-index:1;border-radius:var(--radius);padding:10px;overflow:hidden;
  background:radial-gradient(circle at 50% 46%, rgba(255,255,255,.97) 0%, rgba(255,255,255,.86) 34%, rgba(255,255,255,.52) 66%, rgba(240,242,245,.42) 100%);
  border:1px solid rgba(25,21,23,.09);
  box-shadow:0 2px 4px rgba(25,21,23,.06), 0 16px 36px rgba(25,21,23,.10), 0 44px 60px -34px rgba(155,19,25,.42), inset 0 1px 0 rgba(255,255,255,.9)}
.hero__card::before{content:"";position:absolute;left:14%;right:14%;bottom:7%;height:16%;z-index:0;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(208,36,27,.30) 0%, rgba(208,36,27,0) 72%)}
.hero__card::after{content:"";position:absolute;top:0;right:0;width:34px;height:34px;z-index:2;
  background:linear-gradient(225deg,var(--accent) 0 50%,transparent 50%)}
.hero__card img{position:relative;z-index:1;width:100%;height:auto}
.hero__tag{position:absolute;left:12px;bottom:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:999px;background:var(--night);color:#fff;font:600 .92rem/1.2 var(--display);letter-spacing:.02em}
.hero__rail{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;position:relative;z-index:2}
.chip{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:10px;border-radius:var(--radius-sm);
  background:rgba(255,255,255,.92);border:1px solid var(--line);box-shadow:var(--shadow)}
.chip b{display:block;font:700 1.02rem/1.1 var(--display);color:var(--ink)}
.chip small{display:block;font:500 .97rem/1.25 var(--sans);color:var(--muted)}

/* the motif: two arcs on masked rings, counter-rotating at different radii,
   sized LARGER than the stage so they read outside it (motif rule 6) */
.hero__media::before,.hero__media::after{content:"";position:absolute;left:calc(50% + var(--ring-x));top:var(--ring-y);
  aspect-ratio:1/1;border-radius:50%;pointer-events:none;z-index:0;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3.5px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3.5px));
  transform:translate(-50%,-50%) rotate(0deg)}
.hero__media::before{width:132%;
  background:conic-gradient(from 0deg, rgba(139,146,156,0) 0deg, rgba(139,146,156,.58) 70deg, rgba(208,36,27,.95) 124deg, rgba(208,36,27,0) 128deg, rgba(139,146,156,.26) 210deg, rgba(139,146,156,0) 320deg);
  animation:alphaeCirculateOuter 18s linear infinite}
.hero__media::after{width:112%;
  background:conic-gradient(from 180deg, rgba(67,74,83,0) 0deg, rgba(67,74,83,.40) 80deg, rgba(155,19,25,.85) 150deg, rgba(155,19,25,0) 154deg, rgba(67,74,83,.14) 240deg, rgba(67,74,83,0) 330deg);
  animation:alphaeCirculateInner 12s linear infinite}
@keyframes alphaeCirculateOuter{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes alphaeCirculateInner{to{transform:translate(-50%,-50%) rotate(-360deg)}}
@media(prefers-reduced-motion:reduce){
  .hero__media::before,.hero__media::after{animation:none}}

@media(min-width:600px){
  .hero__rail{gap:12px}
  .chip{padding:12px}
}
/* two columns from 981px: copy LEFT (7), product RIGHT (5), side by side */
@media(min-width:981px){
  .hero__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,4vw,64px)}
  .hero__copy{display:block;padding-top:6px}
  .hero__copy>*+*{margin-top:20px}
  .hero__copy>h1{margin-top:16px}
  .hero__copy>.ticks{margin-top:16px}
  .hero__media{order:0;--ring-x:36px;--ring-y:50%}
  .hero__stick{max-width:none;padding-left:72px}
  .hero__card{padding:14px}
  .hero__rail{position:absolute;left:0;top:50%;transform:translateY(-50%);margin:0;width:170px;
    display:flex;flex-direction:column;gap:12px}
  .chip{flex-direction:row;align-items:center;gap:10px;padding:10px 12px;
    background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .chip small{font-size:.97rem}
  .hero__media::before{width:118%}
  .hero__media::after{width:100%}
}
@media(min-width:981px) and (max-width:1199px){
  .hero__stick{padding-left:62px}
  .hero__rail{width:152px}
  .hero__media{--ring-x:31px}
}

/* ---- hero: sticky, centred product column ------------------------------
   The product column holds its place, vertically centred, until the hero has
   fully scrolled past.

   --navh is measured and published by site.js: nav heights run 66-99px across
   the estate and change when a bar compacts, and a hardcoded offset tucks the
   product under the bar on the taller ones.

   min-height makes the sticky box a full screen tall so the shot can be
   CENTRED inside it. Without it the box is only as tall as the image and
   `top` merely pins it under the header, which is what the old house rule did.

   Requires .hero NOT to clip on the block axis -- any non-visible overflow on
   an ancestor becomes the scrollport sticky resolves against. See pitfall 65,
   whose first fix got this wrong. */
@media (min-width: 981px) {
  .hero__grid { align-items: start; }
  .hero__media {
    position: sticky;
    top: calc(var(--navh, 88px) + 14px);
    align-self: start;
    min-height: calc(100vh - var(--navh, 88px) - 28px);
    min-height: calc(100svh - var(--navh, 88px) - 28px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
/* Cancelling the sticky column must NOT cancel the containing block. Every
   hero motif sizes its .hero__media pseudo-elements in PERCENT, so they
   resolve against the nearest positioned ancestor; `static` re-parents them to
   a box several times wider -- measured at 1800px against a 523px column --
   and the ring lands across the headline. Worse, the same query stops it
   animating, so it SITS there: ask for less motion, get the one broken hero.

   `relative` lays out identically to `static` and keeps the containing block.
   `top:0` is not decoration: the rule above sets a top offset of one nav height
   plus 14px, which a relative box would apply for real and push the plate
   ~110px down the page (pitfall 65). Written WITHOUT naming that custom
   property in the usual var() form on purpose -- preflight's undefined-variable
   check reads comments too, so a property named here is a property it believes
   the sheet uses. Measured on 7 sites before and after (pitfall 107). */
@media (prefers-reduced-motion: reduce) {
  .hero__media { position: relative; top: 0; min-height: 0; }
}

/* ---- crumbs + inner page head (first paint on every inner page) --------- */
.crumbs{background:var(--wash-a);border-bottom:1px solid var(--line-soft)}
.crumbs__row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding-block:10px;font-size:.95rem;color:var(--faint)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--accent-ink);text-decoration:underline}
.pagehead{position:relative;isolation:isolate;overflow-x:clip;padding-block:clamp(26px,3.6vw,52px) clamp(30px,4vw,56px);
  background:
    radial-gradient(46% 64% at 86% 34%, rgba(208,36,27,.18) 0%, rgba(208,36,27,0) 70%),
    radial-gradient(28% 40% at 98% 4%, rgba(155,19,25,.12) 0%, rgba(155,19,25,0) 70%),
    radial-gradient(40% 60% at 4% 0%, rgba(139,146,156,.34) 0%, rgba(139,146,156,0) 70%),
    linear-gradient(180deg,var(--wash-a) 0%,var(--wash-b) 100%)}
.pagehead::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--dots);background-size:20px 20px;
  -webkit-mask-image:radial-gradient(60% 90% at 85% 40%,#000 0%,transparent 75%);mask-image:radial-gradient(60% 90% at 85% 40%,#000 0%,transparent 75%)}
.pagehead__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
.pagehead h1{font-size:clamp(1.95rem,1.2rem + 2vw,2.75rem);line-height:1.1;margin:10px 0 18px}
.pagehead .eyebrow{margin-bottom:0}
.pagehead .answer{background:#fff}
.pagehead .lead{margin-top:16px}
.pagehead__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.pagehead__fig{max-width:520px;width:100%;margin-inline:auto}
@media(min-width:981px){
  .pagehead__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:52px}
  .pagehead__grid--solo{grid-template-columns:minmax(0,1fr)}
  .pagehead__grid--solo .pagehead__copy{max-width:880px}
}

/* ---- sections and grounds ----------------------------------------------- */
.sec{position:relative;padding-block:clamp(52px,6vw,88px)}
/* Every glow below is centred on the band's MIDDLE and fades out before
   either edge, so each band meets its SVG divider on its flat base colour. */
.sec--paper{background-color:var(--paper);
  background-image:radial-gradient(38% 42% at 100% 50%, rgba(139,146,156,.16) 0%, rgba(139,146,156,0) 70%)}
.sec--white{background:#fff}
.sec--tint{background-color:var(--tint);
  background-image:
    radial-gradient(36% 46% at 94% 50%, rgba(208,36,27,.08) 0%, rgba(208,36,27,0) 70%),
    radial-gradient(40% 50% at 4% 50%, rgba(139,146,156,.26) 0%, rgba(139,146,156,0) 70%),
    var(--dots);
  background-size:auto,auto,20px 20px}
.sec--dark{background-color:var(--night);color:var(--on-dark);
  background-image:
    radial-gradient(42% 48% at 88% 50%, rgba(208,36,27,.26) 0%, rgba(208,36,27,0) 70%),
    radial-gradient(36% 46% at 6% 50%, rgba(139,146,156,.16) 0%, rgba(139,146,156,0) 70%),
    var(--dots-dark);
  background-size:auto,auto,22px 22px}
.sec--narrow .wrap{width:min(920px,100% - 32px)}
.sec__head{max-width:800px;margin-bottom:clamp(26px,3vw,40px)}
.sec--center .sec__head{margin-inline:auto;text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:600 .86rem/1.2 var(--display);letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-ink);margin-bottom:12px}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--accent);flex:none}
.sec__head h2{margin:0}
.lead{font-size:clamp(1.08rem,1rem + .3vw,1.2rem);line-height:1.6;color:var(--muted);margin:12px 0 0}
.sec--dark h2,.sec--dark h3,.sec--dark h4{color:#fff}
.sec--dark .eyebrow,.eyebrow--light{color:#ff9a90}
.sec--dark .eyebrow::before,.eyebrow--light::before{background:#ff6b60}
.sec--dark p,.sec--dark li,.sec--dark .sec__head .lead{color:var(--on-dark-muted)}
.sec--dark a:not(.btn){color:#ffb3ab}
.sec + .sec{border-top:0}

/* ---- dividers: inline SVG edges, filled with the band below ------------ */
.divider{display:block;line-height:0;margin:0;position:relative;z-index:1}
.divider svg{display:block;width:100%;height:clamp(28px,4.5vw,64px)}
.dv--wash{background:var(--wash-b)}.dv--paper{background:var(--paper)}.dv--white{background:#fff}
.dv--tint{background:var(--tint)}.dv--dark{background:var(--night)}
.dvf--wash path{fill:var(--wash-b)}.dvf--paper path{fill:var(--paper)}.dvf--white path{fill:#fff}
.dvf--tint path{fill:var(--tint)}.dvf--dark path{fill:var(--night)}

/* ---- grids --------------------------------------------------------------- */
.grid{display:grid;gap:clamp(16px,2vw,24px);grid-template-columns:minmax(0,1fr)}
@media(min-width:700px){.g2,.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.grid + .grid,.grid + .tablecard,.tablecard + .grid,.split + .split{margin-top:clamp(20px,3vw,32px)}

/* ---- cards: outlined, steel keyline, red corner notch ------------------- */
.card,.ingcard,.tier,.step,.tl__body,.pc,.forlist,.badge,.relcard,.post,.qa,.stat,.facts,.panel,.frame,.refs,.toc,.guarantee,.starbars,.tablecard,.callout,.trust,.tablewrap,.faq,.split__img{
  border-radius:var(--radius)}
.card{position:relative;overflow:hidden;background:#fff;border:1.5px solid var(--steel-line);padding:24px 22px 22px;
  box-shadow:var(--shadow);color:var(--ink)}
.card::after{content:"";position:absolute;top:0;right:0;width:26px;height:26px;
  background:linear-gradient(225deg,var(--accent) 0 50%,transparent 50%)}
.card h3{margin:0 0 8px;font-size:1.2rem}
.card p{margin:0;color:var(--muted)}
.card p + p{margin-top:10px}
.card--tab{padding-top:46px}
.card__tab{position:absolute;top:0;left:20px;padding:6px 12px;border-radius:0 0 var(--radius-sm) var(--radius-sm);
  background:var(--night);color:#fff;font:600 .86rem/1.1 var(--display);letter-spacing:.08em;text-transform:uppercase}
.icard .ico{margin-bottom:14px}
.ico{display:inline-grid;place-items:center;flex:none;width:48px;height:48px;border-radius:var(--radius-sm);
  background:var(--grad-cta);color:#fff;box-shadow:0 6px 14px rgba(208,36,27,.26), inset 0 1px 0 rgba(255,255,255,.35)}
.ico svg{width:24px;height:24px}
.ico--sm{width:34px;height:34px}
.ico--sm svg{width:18px;height:18px}
.ico--steel{background:linear-gradient(135deg,#3b3f47,#15161a);box-shadow:0 6px 14px rgba(25,21,23,.22), inset 0 1px 0 rgba(255,255,255,.2)}
.sec--dark .card,.sec--dark .step,.sec--dark .tl__body,.sec--dark .pc,.sec--dark .forlist,.sec--dark .panel{
  background:var(--night-2);border-color:var(--night-line);color:var(--on-dark);box-shadow:0 18px 36px rgba(0,0,0,.28)}
.sec--dark .card h3,.sec--dark .step h3,.sec--dark .tl__body h3,.sec--dark .pc h3,.sec--dark .forlist h3{color:#fff}
.sec--dark .card p,.sec--dark .step p,.sec--dark .tl__body p,.sec--dark .panel p{color:var(--on-dark-muted)}
.theme__n{display:inline-grid;place-items:center;min-width:52px;height:52px;padding-inline:10px;border-radius:999px;background:var(--night);color:#fff;
  font:700 1.3rem/1 var(--display);margin-bottom:12px}
.theme__line{font:600 1.08rem/1.4 var(--display);color:var(--ink)!important}

/* ---- ingredient cards ---------------------------------------------------- */
.inggrid{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
@media(min-width:700px){.inggrid{grid-template-columns:repeat(2,minmax(0,1fr))}.inggrid>:nth-child(2n+1):last-child{grid-column:1/-1}}
@media(min-width:1100px){.inggrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .inggrid>:nth-child(2n+1):last-child{grid-column:auto}.inggrid>:nth-child(3n+1):last-child{grid-column:1/-1}}
.ingcard{position:relative;overflow:hidden;background:#fff;border:1.5px solid var(--steel-line);padding:22px 20px 18px;
  box-shadow:var(--shadow);color:var(--ink)}
.ingcard::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--accent)}
.ingcard--berry::before{background:#8e3a7c}.ingcard--root::before{background:#9a6a2e}.ingcard--leaf::before{background:#2f7a4a}
.ingcard--mineral::before{background:#3d6493}
.ingcard__top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.ingcard h3{font-size:1.3rem;margin:0}
.ingcard__latin{margin:2px 0 12px;color:var(--faint);font-size:1.0625rem}
.ingcard__amt{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:0 0 12px;padding:10px 12px;border-radius:var(--radius-sm);background:var(--steel-soft)}
.ingcard__amt b{font:700 1.75rem/1 var(--display);color:var(--accent-ink)}
.ingcard__amt span{font-size:.95rem;color:var(--muted)}
.ingcard__role{margin:0;color:var(--muted)}
.ingcard>p:last-child{margin-bottom:0}
.ingcard>p + p:not(.ingcard__amt):not(.ingcard__role){margin-top:10px}
.tag{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;font:600 .85rem/1.2 var(--display);letter-spacing:.06em;text-transform:uppercase}
.tag--berry{background:#f3e8f1;color:#6e2a5f}.tag--root{background:#f4ece2;color:#6b4418}.tag--leaf{background:#e6f2e8;color:#23603a}
.tag--mineral{background:#e7edf5;color:#2d4a6e}.tag--extract{background:var(--accent-tint);color:var(--accent-deep)}
.ingcard--berry .ico{background:linear-gradient(135deg,#a8488f,#6e2a5f)}.ingcard--root .ico{background:linear-gradient(135deg,#b67f37,#6b4418)}
.ingcard--leaf .ico{background:linear-gradient(135deg,#3a9159,#1f5a35)}.ingcard--mineral .ico{background:linear-gradient(135deg,#4f78a8,#2d4a6e)}

/* ---- stat band ------------------------------------------------------------ */
.stats{display:flex;flex-wrap:wrap;gap:14px}
.stat{flex:1 1 210px;position:relative;overflow:hidden;padding:22px 20px 20px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);color:var(--ink)}
.stat::after{content:"";position:absolute;left:20px;bottom:0;width:44px;height:4px;background:var(--accent);border-radius:4px 4px 0 0}
.stat b{display:block;font:700 clamp(2rem,1.4rem + 1.8vw,2.9rem)/1 var(--display);color:var(--ink)}
.stat span{display:block;margin-top:10px;font-weight:600;color:var(--ink);line-height:1.35}
.stat small{display:block;margin-top:4px;color:var(--muted);font-size:.95rem;line-height:1.45}
.stats--slab{background-color:var(--night);background-image:var(--dots-dark);background-size:22px 22px;padding:16px;border-radius:var(--radius)}
.sec--dark .stat,.stats--slab .stat{background:rgba(255,255,255,.05);border-color:var(--night-line);box-shadow:none}
.sec--dark .stat b,.sec--dark .stat span,.stats--slab .stat b,.stats--slab .stat span{color:#fff}
.sec--dark .stat small,.stats--slab .stat small{color:var(--on-dark-muted)}

/* ---- numbered steps and the vertical timeline ---------------------------- */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:minmax(0,1fr);counter-reset:st}
@media(min-width:900px){.steps{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}}
.step{position:relative;background:#fff;border:1.5px solid var(--steel-line);padding:22px 20px 20px;box-shadow:var(--shadow);
  color:var(--ink);counter-increment:st}
.step__n{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--night);color:#fff;
  font:700 1.02rem/1 var(--display);margin-bottom:14px;box-shadow:0 0 0 5px var(--accent-tint)}
.step__n::before{content:counter(st,decimal-leading-zero)}
.step>.ico{position:absolute;top:22px;right:20px}
.step h3{font-size:1.16rem;margin:0 0 6px}
.step p{margin:0;color:var(--muted)}
@media(min-width:900px){.step:not(:last-child)::after{content:"";position:absolute;top:43px;left:100%;width:16px;height:2px;background:var(--accent)}}
.timeline{list-style:none;margin:0;padding:0;position:relative;max-width:var(--measure-wide)}
.timeline::before{content:"";position:absolute;left:21px;top:10px;bottom:10px;width:2px;background:var(--steel-line)}
.tl{position:relative;padding-left:62px}
.tl + .tl{margin-top:16px}
.tl__dot{position:absolute;left:10px;top:20px;width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid var(--accent);
  box-shadow:0 0 0 5px var(--accent-tint)}
.tl__body{background:#fff;border:1.5px solid var(--steel-line);padding:18px 20px;box-shadow:var(--shadow);color:var(--ink)}
.tl__when{display:inline-block;font:600 .86rem/1.2 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:6px}
.tl__body h3{margin:0 0 6px;font-size:1.16rem}
.tl__body p{margin:0;color:var(--muted)}

/* ---- framed figures, splits and shot grids ------------------------------ */
/* --natw is the file's own width, stamped by blocks.figure(): a frame never
   stretches a 568px pack shot across a 760px article column */
.frame{margin:0;background:#fff;border:1px solid var(--line);padding:10px;box-shadow:var(--shadow);color:var(--ink);
  max-width:calc(var(--natw,1600px) + 22px)}
.shots .frame,.article .frame,.split__img .frame{margin-inline:auto}
.frame__img{border-radius:calc(var(--radius) - 6px);overflow:hidden;background:var(--steel-soft)}
.frame img{width:100%;height:auto}
.frame figcaption{padding:12px 8px 4px;font-size:.97rem;line-height:1.55;color:var(--muted)}
.frame figcaption b{display:block;color:var(--ink);font:600 1.04rem/1.3 var(--display);margin-bottom:4px}
.split{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(22px,3vw,48px);align-items:start}
.split + .split{margin-top:clamp(36px,5vw,64px)}
.split__img img{width:100%;height:auto}
.split__copy>*:first-child{margin-top:0}
.split__copy>*:last-child{margin-bottom:0}
.split__copy h3{font-size:1.35rem;margin:0 0 10px}
.split__copy p{color:var(--muted)}
@media(min-width:761px){
  .split__img{width:100%;max-width:min(100%,var(--imgw,100%));margin-inline:auto}
  .split--band .split__img{max-width:100%}
}
@media(min-width:820px){
  .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .split__img{order:2}
  .split--rev .split__img{order:0}
  .split--tall{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
  .split--tall.split--rev{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr)}
  .split--band{grid-template-columns:minmax(0,1fr)}
  .split--band .split__img{order:0}
}
.shots{display:grid;gap:20px;grid-template-columns:minmax(0,1fr)}
@media(min-width:700px){.shots--c2,.shots--c3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.shots--c3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---- tables in cards ----------------------------------------------------- */
.tablecard{overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);color:var(--ink)}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.dtable{width:100%;min-width:560px;border-collapse:collapse;font-size:1rem;line-height:1.55}
.dtable--compact{min-width:720px}
.dtable caption{caption-side:top;text-align:left;padding:14px 18px;font:600 1.02rem/1.35 var(--display);color:var(--ink);
  background:var(--steel-soft);border-bottom:1px solid var(--line)}
.dtable th{font:600 .92rem/1.3 var(--display);letter-spacing:.04em;text-transform:uppercase;text-align:left;padding:12px 16px;
  background:var(--night);color:#fff;vertical-align:bottom}
.dtable td{padding:13px 16px;border-top:1px solid var(--line-soft);vertical-align:top;color:var(--ink)}
.dtable tbody tr:nth-child(even) td{background:#fafbfc}
.dtable th.is-hl{background:var(--accent-deep)}
.dtable td.is-hl,.dtable tbody tr:nth-child(even) td.is-hl{background:#fdf0ef;font-weight:600}
.tablecard__note{margin:0;padding:12px 18px 14px;font-size:.95rem;color:var(--muted);border-top:1px solid var(--line-soft)}

/* ---- prose, panels, lists ------------------------------------------------ */
.prose{max-width:68ch}
.prose p{margin:0 0 16px}
.prose>*:last-child{margin-bottom:0}
.panel{background:#fff;border:1px solid var(--line);padding:clamp(20px,3vw,32px);box-shadow:var(--shadow);max-width:var(--measure-wide);color:var(--ink)}
.panel p{max-width:68ch;color:var(--muted)}
.panel>p:last-child{margin-bottom:0}
.panel--accent{box-shadow:inset 5px 0 0 var(--accent), var(--shadow)}
.panel__t{margin:0 0 10px;font-size:1.3rem}
.subhead{font-size:1.3rem;margin:30px 0 12px}
.list{margin:0 0 16px;padding-left:1.25em;max-width:68ch}
.list li{margin-bottom:8px}
.list--num li::marker{color:var(--accent);font-weight:700}
.checklist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.checklist li{display:flex;gap:12px;align-items:flex-start}
.ck{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;margin-top:2px}
.ck--check{background:#e3f1e7;color:#23603a}
.ck--cross{background:var(--accent-tint);color:var(--accent-deep)}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{padding:8px 14px;border-radius:999px;background:#fff;border:1px solid var(--steel-line);font-weight:600;color:var(--ink);font-size:1rem}
.callout{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);
  color:var(--ink);margin-block:18px}
.callout__b{flex:1}
.callout__t{display:block;font:600 1.06rem/1.3 var(--display);margin-bottom:4px;color:var(--ink)}
.callout p{margin:0;color:var(--muted)}
.callout p + p{margin-top:8px}
.callout--accent{background:var(--accent-tint);border-color:var(--accent-line)}
.callout--note .ico{background:linear-gradient(135deg,#5b636d,#2b3038)}
.callout--alert{background:#fff7e8;border-color:#efd6a2}
.callout--alert .ico{background:linear-gradient(135deg,#d58a18,#9a5b08)}
.callout--dark{background:var(--night);border-color:var(--night);color:var(--on-dark)}
.callout--dark .callout__t{color:#fff}
.callout--dark p{color:var(--on-dark-muted)}
.pull{position:relative;margin:26px 0;padding:24px 26px 22px 30px;border-radius:var(--radius);background:var(--night);color:#fff;box-shadow:var(--shadow);max-width:var(--measure-wide)}
.pull::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:4px;background:var(--accent);border-radius:0 4px 4px 0}
.pull p{font:600 clamp(1.2rem,1rem + .8vw,1.5rem)/1.35 var(--display);margin:0 0 8px;color:#fff}
.pull cite{font-style:normal;color:var(--on-dark-muted);font-size:.97rem}
.proscons,.whofor{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
@media(min-width:800px){.proscons,.whofor{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pc,.forlist{position:relative;overflow:hidden;background:#fff;border:1.5px solid var(--steel-line);padding:24px 22px 22px;box-shadow:var(--shadow);color:var(--ink)}
.pc::before,.forlist::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:#2f7a4a}
.pc--con::before,.forlist--no::before{background:var(--accent)}
.pc h3,.forlist h3{margin:0 0 14px}
.keypoints{background:var(--accent-tint);border:1px solid var(--accent-line);border-radius:var(--radius);padding:20px 22px;
  box-shadow:inset 5px 0 0 var(--accent);color:var(--ink);max-width:var(--measure-wide)}
.keypoints__t{display:block;font:700 1.1rem/1.3 var(--display);margin-bottom:8px}
.keypoints ul{margin:0;padding-left:1.1em}
.keypoints li{margin-bottom:8px;color:var(--ink)}
.facts{overflow:hidden;background:#fff;border:1.5px solid var(--steel-line);box-shadow:var(--shadow);color:var(--ink);max-width:var(--measure-wide)}
.facts__h{background:var(--night);color:#fff;font:700 1.1rem/1.3 var(--display);padding:14px 20px}
.facttab{width:100%;border-collapse:collapse}
.facttab th,.facttab td{padding:12px 20px;border-top:1px solid var(--line-soft);text-align:left;font-size:1rem;vertical-align:top}
.facttab th{font-weight:600;width:42%;color:var(--ink)}
.facttab td{color:var(--muted)}
.facttab__total th,.facttab__total td{background:var(--accent-tint);font-weight:700;color:var(--ink)}

/* ---- pricing: three packs, one button line ------------------------------ */
.pricing{display:grid;gap:26px 20px;grid-template-columns:minmax(0,1fr);max-width:440px;margin-inline:auto;align-items:stretch;padding-top:14px}
.tier--feature{order:-1}
@media(min-width:900px){.pricing{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none}.tier--feature{order:0}}
.tier{position:relative;display:flex;flex-direction:column;background:#fff;border:1.5px solid var(--steel-line);padding:30px 20px 20px;
  box-shadow:var(--shadow);color:var(--ink);text-align:center}
.tier--feature{border:2px solid var(--accent);box-shadow:var(--lift), 0 0 0 5px var(--accent-tint)}
.tier__ribbon,.tier__flag{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:6px;
  padding:6px 16px;border-radius:999px;font:600 .86rem/1.2 var(--display);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.tier__ribbon{background:var(--grad-cta);background-color:#c11d17;color:#fff;box-shadow:var(--glow)}
.tier__flag{background:var(--steel-soft);color:var(--steel-deep);border:1px solid var(--steel-line)}
.tier__name{font:700 1.5rem/1.15 var(--display);margin:0}
.tier__supply{margin:4px 0 0;color:var(--muted);font-size:1rem}
/* The pack shots are RGB on white. `multiply` lets the white take the well's
   own tint, so the bottles sit IN the well instead of on a pasted rectangle;
   `isolation` keeps the blend inside the well. (0,2,1) outranks the
   `.card--pack img` margin that pack_cards.py appends. */
.tier__well{position:relative;isolation:isolate;display:grid;place-items:center;margin:16px 0;padding:14px;min-height:calc(var(--pack-img) + 28px);
  border-radius:var(--radius-sm);
  background:radial-gradient(70% 62% at 50% 46%,#ffffff 0%,#f6f7f9 48%,#e7eaee 100%);
  box-shadow:inset 0 2px 10px rgba(25,21,23,.07), inset 0 -18px 26px -18px rgba(208,36,27,.16)}
.tier .tier__well img{height:var(--pack-img);width:auto;max-width:100%;object-fit:contain;margin:0 auto;mix-blend-mode:multiply}
.tier--feature .tier__well{background:radial-gradient(70% 62% at 50% 46%,#ffffff 0%,#fbf3f2 50%,#f3dedb 100%)}
.tier__price{margin:0 0 14px;padding:12px;border-radius:var(--radius-sm);border:1px dashed var(--steel-line)}
.tier__price b{display:block;font:700 1.22rem/1.2 var(--display);color:var(--ink)}
.tier__price span{display:block;font-size:.95rem;color:var(--muted);margin-top:4px}
.tier__perks{list-style:none;margin:0 0 12px;padding:0;text-align:left;display:grid;gap:8px}
.tier__perks li{display:flex;gap:8px;align-items:flex-start;font-size:1.0625rem}
.tier__perks svg{color:#2f7a4a;flex:none;margin-top:5px}
.tier__why{margin:0 0 18px;color:var(--muted);text-align:left;font-size:1.0625rem}
.tier__add{margin-top:auto}
.paystrip{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 24px;margin-top:24px;padding:16px 20px;
  border-radius:var(--radius);background:#fff;border:1px solid var(--line);color:var(--muted);box-shadow:var(--shadow)}
.paystrip img{width:254px;height:auto}
.paystrip p{margin:0;max-width:640px;font-size:1rem}

/* ---- contact forms: two outlined cards, 16px+ inputs ------------------- */
.form{display:grid;gap:22px;grid-template-columns:minmax(0,1fr)}
@media(min-width:860px){.form{grid-template-columns:repeat(2,minmax(0,1fr))}}
.formcard{position:relative;overflow:hidden;background:#fff;border:1.5px solid var(--steel-line);border-radius:var(--radius);
  padding:clamp(20px,3vw,30px);box-shadow:var(--shadow);color:var(--ink)}
.formcard::after{content:"";position:absolute;top:0;right:0;width:26px;height:26px;background:linear-gradient(225deg,var(--accent) 0 50%,transparent 50%)}
.formcard__ico{display:block;margin-bottom:12px}
.formcard h3{font-size:1.25rem;margin:0 0 6px}
.formcard .note{color:var(--muted);margin:0 0 14px}
.formcard label{display:block;margin:14px 0 6px;font:600 .9rem/1.3 var(--display);letter-spacing:.02em;color:var(--ink)}
.formcard input,.formcard textarea{display:block;width:100%;min-height:48px;padding:12px 14px;font:400 1rem/1.4 var(--sans);color:var(--ink);
  background:var(--paper);border:1.5px solid var(--steel-line);border-radius:var(--radius-sm);box-shadow:inset 0 1px 2px rgba(25,21,23,.05)}
.formcard input:focus,.formcard textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-tint)}
.formcard textarea{min-height:130px;resize:vertical}
.formcard .btn{margin-top:18px}

/* ---- guarantee ----------------------------------------------------------- */
.guarantee{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:center;
  padding:clamp(22px,3vw,36px);background:#fff;border:1.5px solid var(--steel-line);box-shadow:var(--shadow);color:var(--ink)}
.guarantee::after{content:"";position:absolute;top:0;right:0;width:34px;height:34px;background:linear-gradient(225deg,var(--accent) 0 50%,transparent 50%)}
@media(min-width:760px){.guarantee{grid-template-columns:210px minmax(0,1fr)}}
.guarantee__seal img{width:min(210px,62vw);height:auto;margin-inline:auto;filter:drop-shadow(0 14px 20px rgba(155,19,25,.22))}
.guarantee h3{font-size:1.45rem;margin:0 0 8px}
.guarantee p{color:var(--muted)}
.guarantee__steps{margin:14px 0;padding-left:1.25em}
.guarantee__steps li{margin-bottom:8px}
.guarantee__steps li::marker{color:var(--accent);font-weight:700}
.guarantee__addr{display:flex;gap:8px;align-items:center;margin:0;font-size:1rem}

/* ---- seals, trust strip, reviews ----------------------------------------- */
.trust{padding:22px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.trust__row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}
@media(min-width:640px){.trust__row{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1024px){.trust__row{grid-template-columns:repeat(7,minmax(0,1fr))}}
.trust__row li{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font:600 .97rem/1.25 var(--sans);color:var(--ink)}
.trust__row img{width:64px;height:64px}
.trust__note{margin:14px 0 0;text-align:center;color:var(--muted);font-size:1rem}
.badgewall{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.badge{margin:0;display:flex;gap:14px;align-items:flex-start;padding:16px;background:#fff;border:1.5px solid var(--steel-line);box-shadow:var(--shadow);color:var(--ink)}
.badge img{width:78px;height:78px;flex:none}
.badge figcaption{display:grid;gap:6px;font-size:.97rem;line-height:1.5}
.badge b{font:600 1.06rem/1.25 var(--display);color:var(--ink)}
.badge__can{color:var(--muted)}
.badge__no{color:var(--accent-deep)}
.starbars{display:grid;gap:22px;grid-template-columns:minmax(0,1fr);background:#fff;border:1.5px solid var(--steel-line);padding:24px;box-shadow:var(--shadow);color:var(--ink)}
@media(min-width:820px){.starbars{grid-template-columns:280px minmax(0,1fr);align-items:center}}
.starbars__score b{display:block;font:700 3.6rem/1 var(--display);color:var(--ink)}
.starbars__score span{display:block;color:var(--muted);margin-top:8px;font-size:1rem}
.starbars ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.starbars li{display:grid;grid-template-columns:72px minmax(0,1fr) 48px;gap:12px;align-items:center;font-size:1rem}
.bar{height:12px;border-radius:999px;background:var(--steel-soft);overflow:hidden}
.bar i{--w:0%;display:block;height:100%;width:var(--w);background:var(--accent);border-radius:999px}

/* ---- FAQ accordion ------------------------------------------------------- */
.faq{max-width:var(--measure-wide);margin-inline:auto;display:grid;gap:12px;text-align:left}
.qa{overflow:hidden;background:#fff;border:1.5px solid var(--steel-line);box-shadow:var(--shadow);color:var(--ink)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;
  min-height:58px;padding:16px 20px;font:600 1.08rem/1.35 var(--display);color:var(--ink)}
.qa summary::-webkit-details-marker{display:none}
.qa__pm{position:relative;flex:none;width:32px;height:32px;border-radius:50%;background:var(--steel-soft)}
.qa__pm::before,.qa__pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;background:var(--accent-deep);transform:translate(-50%,-50%)}
.qa__pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.qa[open] .qa__pm::after{transform:translate(-50%,-50%) rotate(0deg)}
.qa[open]{border-color:var(--accent-line)}
.qa__b{padding:0 20px 18px;color:var(--muted)}
.qa__b p{margin:0 0 10px}
.qa__b p:last-child{margin-bottom:0}

/* ---- sources, byline, keep reading --------------------------------------- */
.refs{background:#fff;border:1px solid var(--line);padding:22px 24px;box-shadow:var(--shadow);color:var(--ink)}
.refs ol{margin:0;padding-left:1.3em;display:grid;gap:10px}
.refs li{font-size:1rem;line-height:1.55;color:var(--muted);overflow-wrap:anywhere}
.byline{display:flex;gap:18px;align-items:flex-start;margin-top:26px;padding:22px;border-radius:var(--radius);background:var(--steel-soft);
  border:1px solid var(--line);color:var(--ink);max-width:var(--measure-wide)}
.byline svg{flex:none;width:64px;height:64px}
.byline b{display:block;font:600 1.1rem/1.3 var(--display);margin-bottom:6px}
.byline p{margin:0;color:var(--muted)}
@media(max-width:560px){.byline{flex-direction:column}}
.rel{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media(min-width:800px){.rel{grid-template-columns:repeat(3,minmax(0,1fr))}}
.relcard{position:relative;display:flex;flex-direction:column;gap:6px;padding:22px 60px 22px 22px;background:#fff;border:1.5px solid var(--steel-line);
  box-shadow:var(--shadow);color:var(--ink);text-decoration:none;text-align:left}
.relcard b{font:600 1.15rem/1.3 var(--display)}
.relcard span{color:var(--muted)}
.relcard__go{position:absolute;right:18px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--accent-tint);color:var(--accent-deep);font-style:normal;font-weight:700}

/* ---- closing CTA ---------------------------------------------------------- */
.sec--final{padding-block:clamp(40px,5vw,72px)}
.final{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:center;padding:clamp(24px,4vw,48px);
  border-radius:var(--radius);background-color:var(--night);background-image:var(--dots-dark);background-size:22px 22px;color:var(--on-dark);box-shadow:var(--lift)}
.final::after{content:"";position:absolute;top:0;right:0;width:40px;height:40px;background:linear-gradient(225deg,var(--accent) 0 50%,transparent 50%)}
@media(min-width:820px){.final{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
/* the six-bottle shot is RGB on white: it gets a lit, rounded well of its own
   on the dark slab, with the white multiplied into the well */
.final__img{position:relative;isolation:isolate;justify-self:center;width:min(380px,100%);padding:18px;border-radius:var(--radius);
  background:radial-gradient(72% 66% at 50% 44%,#ffffff 0%,#f3f4f6 55%,#dfe2e7 100%);
  box-shadow:0 2px 4px rgba(0,0,0,.25), 0 26px 44px rgba(0,0,0,.42), 0 0 0 6px rgba(255,255,255,.05), inset 0 -22px 30px -20px rgba(208,36,27,.28)}
.final__img img{width:100%;height:auto;margin-inline:auto;mix-blend-mode:multiply}
.final--mini .final__img{padding:10px;width:100%}
.final h2{color:#fff;margin:8px 0 12px}
.final p{color:var(--on-dark-muted)}
.final__cta{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0 12px}
.final__note{font-size:.97rem;margin:0}
.final--mini{grid-template-columns:minmax(0,1fr);margin-block:30px;padding:22px}
@media(min-width:640px){.final--mini{grid-template-columns:150px minmax(0,1fr)}}
.final__h{font:700 1.25rem/1.3 var(--display);color:#fff!important;margin:0 0 6px}

/* ---- blog ---------------------------------------------------------------- */
.posts{display:grid;gap:22px;grid-template-columns:minmax(0,1fr)}
@media(min-width:640px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:960px){.posts{grid-template-columns:repeat(3,minmax(0,1fr))}}
.post{overflow:hidden;display:flex;flex-direction:column;background:#fff;border:1.5px solid var(--steel-line);box-shadow:var(--shadow);color:var(--ink)}
.post__img img{width:100%;height:auto}
.post__b{padding:18px 20px 20px}
.post h3{font-size:1.18rem;margin:0 0 8px}
.post h3 a{color:var(--ink);text-decoration:none}
.post__meta{font-size:.95rem;color:var(--faint);margin:10px 0 0}
.article{max-width:var(--measure);margin-inline:auto}
.article h2{scroll-margin-top:110px;font-size:clamp(1.45rem,1.1rem + 1vw,1.9rem);margin:42px 0 12px}
.article h3{margin:26px 0 8px}
.article .frame{margin-block:26px}
.article figure.portrait{max-width:var(--figw,360px);margin-inline:auto}
/* the article head: the same wash as every page head, the post's own H1,
   dek and byline row, and an optional framed image on the right */
.pagehead--article h1{font-size:clamp(1.9rem,1.2rem + 2vw,2.7rem)}
.pagehead--article .lead{margin-top:0;max-width:62ch}
.pagehead--article .postmeta{margin:18px 0 0;border-color:var(--steel-line)}
.postmeta span{display:inline-flex;align-items:center;gap:6px}
.postmeta span+span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);margin-right:12px}
.toc{background:#fff;border:1px solid var(--line);padding:18px 22px;box-shadow:var(--shadow);margin-block:20px}
.toc__t{display:block;font:600 .95rem/1.3 var(--display);margin-bottom:8px;text-transform:uppercase;letter-spacing:.1em;color:var(--accent-ink)}
.toc ol{margin:0;padding-left:1.2em;display:grid;gap:6px}
.toc a{color:var(--ink)}
.postmeta{display:flex;flex-wrap:wrap;gap:6px 18px;padding-block:12px;border-block:1px solid var(--line);color:var(--faint);font-size:.97rem;margin:14px 0 18px}

/* ---- footer ----------------------------------------------------------------
   Running text 16px, column headings 15.2px (house rule 10). The bottom
   padding keeps the last line clear of the buy bar. */
.site-foot{background-color:#111114;background-image:var(--dots-dark);background-size:22px 22px;color:var(--on-dark-muted);
  padding-block:clamp(36px,5vw,64px) 120px;font-size:1rem;line-height:1.65}
.site-foot a{color:#fff;text-decoration-color:rgba(255,255,255,.35)}
.fband{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:center;padding:22px;border-radius:var(--radius);background:var(--night-2);
  border:1px solid var(--night-line);box-shadow:0 20px 40px rgba(0,0,0,.35);margin-bottom:38px;text-align:center}
.fband img{width:96px;height:96px;margin-inline:auto}
.fband__h{font:700 clamp(1.25rem,1rem + 1vw,1.6rem)/1.2 var(--display);color:#fff;margin:0 0 6px}
.fband p{margin:0;font-size:1rem}
@media(min-width:820px){.fband{grid-template-columns:96px minmax(0,1fr) auto;text-align:left}}
.fgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
@media(min-width:700px){.fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.fgrid{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr))}}
.fdesk{background:#1a1b20;border:1px solid var(--night-line);border-radius:var(--radius);padding:20px}
.fbrand{display:flex;align-items:center;gap:10px;font:700 1.3rem/1 var(--display);color:#fff;margin-bottom:10px}
.fbrand span span{color:#ff6257}
.fdesk__role{color:#fff;font-weight:600;margin:0 0 12px;font-size:1rem}
.fdesk p{margin:0 0 12px;font-size:1rem}
.fdesk p:last-child{margin-bottom:0}
.fdesk b{color:#fff}
.fcol h4{display:inline-block;font:600 .95rem/1.3 var(--display);letter-spacing:.12em;text-transform:uppercase;color:#fff;margin:0 0 12px;
  padding-bottom:10px;border-bottom:2px solid var(--accent)}
.fcol ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.fcol a{display:inline-block;padding-block:6px;color:var(--on-dark-muted);font-size:1rem;text-decoration:none}
.fstrip{display:flex;flex-wrap:wrap;gap:18px 28px;justify-content:space-between;align-items:center;margin-top:36px;padding-block:22px;border-block:1px solid var(--night-line)}
.fseals{display:flex;flex-wrap:wrap;align-items:center;gap:12px;max-width:660px}
.fseals img{width:56px;height:56px}
.fseals span{font-size:1rem;flex:1 1 240px}
.fpay{display:flex;flex-direction:column;gap:6px}
.fpay img{width:254px;height:auto;background:#fff;border-radius:var(--radius-sm);padding:6px}
.fpay span{font-size:1rem}
.fmini{display:flex;flex-wrap:wrap;gap:8px 22px;margin:22px 0;font-size:1rem}
.disc p{font-size:1rem;margin:0 0 12px}
.disc b{color:#fff}
.copy{color:#a4a9b1}

/* ---- the bottom buy bar ---------------------------------------------------
   Exists on every width (house rule 8); hidden by transform, never display. */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#15151a;color:#fff;border-top:1px solid rgba(255,255,255,.1);
  box-shadow:0 -12px 30px rgba(0,0,0,.25);transform:translateY(110%);padding-bottom:env(safe-area-inset-bottom)}
.buybar.show{transform:translateY(0)}
.buybar__in{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-block:10px}
.buybar__t{display:flex;flex-direction:column;line-height:1.3}
.buybar__t b{font:700 1.02rem/1.25 var(--display)}
.buybar__t span{font-size:.95rem;color:var(--on-dark-muted)}
@media(max-width:560px){.buybar__t span{display:none}.buybar__t b{font-size:.95rem}.buybar .btn{padding-inline:16px}}
/* --- 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 print{
  .util,.nav,.buybar,.divider,.hero__media::before,.hero__media::after{display:none!important}
}
/* --- end of the copied hero responsive rules --- */

/*!CRITICAL-END*/

/* ==========================================================================
   PAINT AND MOTION -- loaded async. Nothing below moves a box.
   ========================================================================== */

/* ---- motion: every clickable surface answers the pointer ---------------- */
.btn,.card,.ingcard,.tier,.step,.tl__body,.frame,.relcard,.post,.badge,.qa,.stat,.pc,.forlist,.chip,.figures div{
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease}
.buybar{transition:transform .3s ease}
.btn.btn--cta:hover,a.btn.btn--cta:hover{transform:translateY(-2px);box-shadow:var(--glow-lift);color:#fff}
.btn.btn--solid:hover{transform:translateY(-2px);box-shadow:var(--lift)}
.btn.btn--ghost:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:var(--shadow)}
.card:hover,.ingcard:hover,.tier:hover,.step:hover,.tl__body:hover,.frame:hover,.relcard:hover,.post:hover,.badge:hover,.pc:hover,.forlist:hover,.stat:hover{
  transform:translateY(-3px);box-shadow:var(--lift);border-color:var(--accent-line)}
.tier--feature:hover{box-shadow:var(--lift), 0 0 0 6px var(--accent-tint);border-color:var(--accent)}
.qa:hover{box-shadow:var(--lift)}
.relcard:hover .relcard__go{background:var(--accent);color:#fff}
.chip:hover,.figures div:hover{transform:translateY(-2px);box-shadow:var(--lift)}
.sec--dark .card:hover,.sec--dark .step:hover,.sec--dark .stat:hover{box-shadow:0 26px 48px rgba(0,0,0,.4);border-color:rgba(255,120,110,.45)}
.fcol a:hover{color:#fff}
.post h3 a:hover{color:var(--accent-ink)}
a:focus-visible,.btn:focus-visible,summary:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:var(--radius-sm)}
.relcard:focus-visible,.post a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* ---- reveal on entry (site.js tags the targets; tables never fade) ------ */
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .5s ease, transform .5s ease}
[data-reveal].in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .btn,.card,.ingcard,.tier,.step,.tl__body,.frame,.relcard,.post,.badge,.qa,.stat,.pc,.forlist,.chip,.figures div,.buybar,.nav{transition:none}
  .btn:hover,.card:hover,.ingcard:hover,.tier:hover,.step:hover,.tl__body:hover,.frame:hover,.relcard:hover,.post:hover,.badge:hover,
  .pc:hover,.forlist:hover,.stat:hover,.chip:hover,.figures div:hover{transform:none}
  [data-reveal]{opacity:1;transform:none;transition:none}
}

@media print{
  .util,.nav,.buybar,.divider,.hero__media::before,.hero__media::after{display:none!important}
  body{background:#fff}
}

/* ==== directional chrome (fix_chrome_scroll.py) ==== */
.nav--away{transform:translateY(-100%)}
html.chrome-up .buybar{transform:translateY(110%)}
/* ==== 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 ==== */

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

/* ==== 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 .nav__cta .btn{font-size:16px}
/* ==== end footer type floor ==== */
.review-foot{margin:0;padding:.6rem 0;font-size:.92rem}.review-foot a{font-weight:600}