/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Parkinsans Fallback";src:local("Arial");font-weight:400;size-adjust:115.24%;ascent-override:91.11%;descent-override:30.37%;line-gap-override:0.00%}
@font-face{font-family:"Parkinsans Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:108.80%;ascent-override:96.51%;descent-override:32.17%;line-gap-override:0.00%}
@font-face{font-family:"Funnel Sans Fallback";src:local("Arial");font-weight:400;size-adjust:101.78%;ascent-override:98.25%;descent-override:24.56%;line-gap-override:0.00%}
@font-face{font-family:"Funnel Sans Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:95.78%;ascent-override:104.41%;descent-override:26.10%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
:root{
  /* ---- grounds. Duotone split: the hero and every page head sit on the
     cobalt accent ramp; the body sits on a cool neutral. Each ground has a
     FLAT edge colour (--g-*) that the section dividers are filled with, and
     the decorative gradients inside a band fade out before its edges. ---- */
  --g-paper:#f5f7fb;
  --g-white:#ffffff;
  --g-tint:#e9eefa;
  --g-night:#0b1838;

  /* ---- ink: the charcoal of "Harm" and the DIETARY SUPPLEMENT pill ---- */
  --ink:#0f1a33;
  --ink-2:#1e2a44;
  --muted:#3c4760;
  --faint:#5a6680;
  --line:#d7deeb;
  --line-2:#e6ebf4;

  /* ---- accent, sampled from the bottle: "Brain" is #203878-#284078 on the
     label, deepened to cobalt; the label band runs slate #687898 to
     periwinkle #a8b8d0; the key visuals light it with electric azure. ---- */
  --cobalt:#22449a;
  --cobalt-2:#2f5fd6;
  --azure:#4f86f2;
  --sky:#8fb3ff;
  --ice:#dce7ff;
  --periwinkle:#a8b8d6;
  --slate:#687898;
  --accent:#2748a8;

  --grad-cta:linear-gradient(135deg,#3b6ff0 0%,#1f47b8 100%);
  /* the buy button on the accent ramp: white at the lit corner running into
     the label's periwinkle, so it reads as a gradient against the cobalt */
  --grad-ice:linear-gradient(135deg,#ffffff 0%,#dfe9ff 42%,#a9c5ff 100%);
  --grad-ico:linear-gradient(140deg,#4f86f2 0%,#1f47b8 100%);

  /* ---- warm: safety callouts and the gold guarantee well only ---- */
  --warm:#b86e0c;
  --warm-bg:#fff6e6;

  /* ---- type ---- */
  --display:'Parkinsans','Parkinsans Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sans:'Funnel Sans','Funnel Sans Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* ---- metrics. Two-token radius scale: --r 16px for every card, --r-c 10px
     for every control. Anything larger or smaller is DERIVED from one of the
     two with calc(), never typed, so the scale stays two tokens. Depth is two
     crisp tight stops, tinted with the ink, never neutral black. ---- */
  --wrap:1200px;
  --r:16px;
  --r-c:10px;
  --shadow:0 1px 1px rgba(15,26,51,.10), 0 4px 10px rgba(15,26,51,.08);
  --lift:0 1px 1px rgba(15,26,51,.12), 0 12px 26px rgba(15,26,51,.15);
  --glow:0 10px 26px rgba(47,95,214,.36);
  --navh:72px;
}

/* ==========================================================================
   Harmoebrain - harmoebrain.com
   Design slot: build_set row 235.

   TYPE      Parkinsans (geometric display) / Funnel Sans (neutral grotesk)
   HERO      copy LEFT; the single bottle RIGHT on a tall rounded glass stage,
             three fact chips hung off its edges
   CARDS     borderless white cards, a strong 3px rule at the head of each,
             separated by whitespace
   GROUND    duotone: hero + page heads on the cobalt ramp, body on neutral
   DEPTH     0 1px 1px / 0 4px 10px, ink-tinted
   MOTIF     drift: the white dots printed on the label's blue band rise
             slowly behind the bottle (harmoeRise / harmoeRiseSway)

   Everything above the critical-end marker is inlined into every page at build
   time: tokens, base, the chrome, the hero and the page head, INCLUDING
   their responsive rules, so a phone never paints the desktop hero first.
   ========================================================================== */

/* ---- metric-matched fallback faces: the swap to the webfont moves nothing */
@font-face{font-family:'Parkinsans Fallback';src:local('Arial');size-adjust:104%;
  ascent-override:93%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:'Funnel Sans Fallback';src:local('Arial');size-adjust:99%;
  ascent-override:96%;descent-override:25%;line-gap-override:0%}

/* ---- RESET AND BASE ------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box;min-width:0}
html{scroll-behavior:smooth;font-size:16px;scroll-padding-top:96px}
html,body{overflow-x:clip}
body{font-family:var(--sans);background:var(--g-paper);color:var(--muted);
  line-height:1.68;-webkit-font-smoothing:antialiased;font-size:1.0625rem}
img,svg,table,video{max-width:100%}
img{height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
ul,ol{list-style:none}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);line-height:1.18;font-weight:700;
  letter-spacing:-.012em}
b,strong{color:var(--ink-2);font-weight:700}
.skip{position:absolute;left:-9999px;top:0;background:var(--cobalt-2);color:#fff;
  padding:10px 16px;z-index:9999;border-radius:0 0 var(--r-c) 0}
.skip:focus{left:0}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
.i{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---- 0. TOPLINE TRUST STRIP --------------------------------------------- */
.util{background:#081433;color:#b9c7e8;font-size:13.5px;line-height:1.3}
.util__row{display:flex;align-items:center;gap:22px;padding-block:9px;white-space:nowrap;
  overflow:hidden}
.util__item b{color:#fff;font-weight:600}
.util__tel{margin-left:auto;color:#fff;font-weight:600}
.util__tel:hover{color:var(--sky)}

/* ---- 1. HEADER: solid white bar, NO backdrop-filter (trap 7) ------------ */
.nav{position:sticky;top:0;z-index:50;background:#fff;
  box-shadow:0 1px 0 rgba(15,26,51,.08),0 6px 18px rgba(15,26,51,.06);
  transition:transform .28s ease}
.nav__row{display:flex;align-items:center;gap:20px;min-height:72px;padding-block:10px}
.brand{display:flex;align-items:center;gap:11px;flex:none;color:var(--ink);text-decoration:none}
.brand:hover{text-decoration:none}
.brand svg{width:40px;height:40px;flex:none}
.brand__t{display:flex;flex-direction:column}
.brand__prod{font-family:var(--display);font-weight:700;font-size:1.3rem;line-height:1.05;
  color:var(--ink);letter-spacing:-.015em}
.brand__prod b{color:var(--cobalt-2);font-weight:800}
.brand__firm{font-size:13.5px;color:var(--faint);line-height:1.3;margin-top:3px}
.navmenus{margin-left:auto}
.menu{display:flex;align-items:center;gap:2px}
.menu a{display:block;padding:10px 12px;border-radius:var(--r-c);color:var(--ink-2);
  font-weight:600;font-size:15.5px;white-space:nowrap}
.menu a:hover,.menu a[aria-current]{background:var(--g-tint);color:var(--cobalt);
  text-decoration:none}
.nav__cta{flex:none}
.nav__cta .btn,.buybar .btn{gap:0;white-space:nowrap}
.nav__long{margin-left:.3em}
.burger{display:none;width:46px;height:46px;border:0;border-radius:var(--r-c);
  background:var(--g-tint);cursor:pointer;flex:none;align-items:center;justify-content:center;
  flex-direction:column;gap:5px}
.burger span{display:block;width:20px;height:2px;border-radius:2px;background:var(--ink)}

/* ---- 2. BUTTONS: gradient buy, solid/ghost secondary -------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;
  padding:12px 22px;border-radius:var(--r-c);font-family:var(--display);font-weight:700;
  font-size:1rem;line-height:1.2;text-align:center;border:0;cursor:pointer;
  text-decoration:none;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn--cta{background:var(--grad-cta);color:#fff;box-shadow:0 1px 1px rgba(15,26,51,.18),var(--glow)}
.btn--cta:hover{box-shadow:0 1px 1px rgba(15,26,51,.2),0 14px 32px rgba(47,95,214,.48)}
.btn--ghost{background:transparent;color:var(--cobalt);box-shadow:inset 0 0 0 2px var(--cobalt-2)}
.btn--ghost:hover{background:rgba(47,95,214,.07)}
.btn--lg{min-height:54px;padding:15px 28px;font-size:1.06rem}
.btn--block{display:flex;width:100%}

/* ---- 3. HERO: copy left, the bottle right on a tall rounded stage -------- */
.hero{position:relative;color:#dfe8ff;overflow-x:clip;overflow-y:visible;
  padding:clamp(26px,3.4vw,50px) 0 clamp(70px,7.5vw,112px);
  background:
    radial-gradient(46% 58% at 76% 46%,rgba(111,160,255,.42) 0%,rgba(111,160,255,0) 70%),
    radial-gradient(38% 52% at 3% 2%,rgba(79,134,242,.34) 0%,rgba(79,134,242,0) 70%),
    radial-gradient(42% 46% at 100% 100%,rgba(168,184,214,.26) 0%,rgba(168,184,214,0) 70%),
    linear-gradient(160deg,#0a1840 0%,#15317a 48%,#2447a6 100%)}
.hero__grid{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(28px,4vw,64px);
  align-items:center}
.hero__copy{display:flex;flex-direction:column;align-items:flex-start}
.pill{display:inline-flex;align-items:center;gap:9px;padding:7px 14px;border-radius:999px;
  background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
  color:#dfe8ff;font-size:13.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.pill__dot{width:8px;height:8px;border-radius:50%;background:var(--sky);
  box-shadow:0 0 0 4px rgba(143,179,255,.25)}
.hero h1{color:#fff;font-weight:800;font-size:clamp(2rem,1.2rem + 2.4vw,3.3rem);
  line-height:1.06;letter-spacing:-.022em;margin:16px 0 18px}
.h1__k{display:block;font-size:max(.42em,19px);font-weight:600;letter-spacing:0;
  color:#b9ccff;line-height:1.3;margin-bottom:.4em}
.grad{background:linear-gradient(90deg,#9cc0ff 0%,#e4edff 65%,#ffffff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.answer{border-radius:var(--r)}
.hero .answer{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
  padding:18px 20px;color:#e6edff;font-size:1.0625rem;line-height:1.62;max-width:640px}
.answer p+p{margin-top:8px}
.hero .answer__map{color:#b9ccff;font-size:15.5px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.hero .btn--cta{background:var(--grad-ice);color:#0f2a6b;
  box-shadow:0 1px 0 #fff inset,0 0 0 1px rgba(255,255,255,.5),0 10px 30px rgba(143,179,255,.55)}
.hero .btn--cta:hover{box-shadow:0 1px 0 #fff inset,0 0 0 1px rgba(255,255,255,.6),0 16px 40px rgba(143,179,255,.72)}
.hero .btn--ghost{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.hero .btn--ghost:hover{background:rgba(255,255,255,.08)}
.ticks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 22px;margin-top:22px;
  max-width:640px}
.ticks li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;line-height:1.45;
  color:#dbe5ff}
.ck{flex:none;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--grad-ico);color:#fff;margin-top:1px}
.ck .i{width:13px;height:13px;stroke-width:3}
.hero .ck{background:rgba(143,179,255,.28);box-shadow:inset 0 0 0 1px rgba(191,211,255,.5)}
.hero__trust{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:22px;
  padding-top:18px;box-shadow:0 -1px 0 rgba(255,255,255,.14);width:100%;max-width:640px}
.heroseals{display:flex;flex-wrap:wrap;gap:12px 14px}
.heroseals figure{display:flex;align-items:center;gap:8px}
/* flex:none -- a flex item may shrink below its width, and at 412 the three
   seals were squeezed to 36, 30 and 27px wide at 40px tall. */
.heroseals img{flex:none;width:46px;height:46px}
.heroseals figcaption{font-size:14.5px;line-height:1.25;color:#cdd9f7;max-width:92px}
/* align-items:flex-start -- a column flexbox stretches its items, so the
   strip was drawn 250px wide at 28px tall: 1271x225 art squashed 37%. */
.pay{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.pay img{height:28px;width:auto;object-fit:contain}
.pay figcaption{font-size:14.5px;line-height:1.4;color:#b9c7e8}
.hero__rating{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px;
  font-size:15.5px;color:#cfdcff}
.hero__rating b{color:#fff}
.stars{position:relative;display:inline-block;line-height:0;white-space:nowrap}
.stars svg{fill:currentColor;display:inline-block}
.stars__off{color:rgba(255,255,255,.28)}
.stars__on{position:absolute;inset:0 auto 0 0;overflow:hidden;color:#f5b942}

/* the stage, the bottle and the rising dots */
.hero__media{position:relative;display:flex;justify-content:center}
.hero__stick{position:relative;width:min(100%,420px);margin-inline:auto;padding-block:22px 34px}
.hero__stage{position:relative;height:clamp(440px,60vh,580px);border-radius:calc(var(--r) * 1.75);
  display:flex;align-items:flex-end;justify-content:center;
  background:
    radial-gradient(78% 42% at 50% 100%,rgba(143,179,255,.5) 0%,rgba(143,179,255,0) 72%),
    linear-gradient(180deg,rgba(255,255,255,.17) 0%,rgba(255,255,255,.05) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 1px 0 rgba(255,255,255,.4),
    0 1px 1px rgba(3,10,35,.2),0 30px 60px rgba(3,10,35,.34)}
.hero__stage::before{content:"";position:absolute;inset:0;border-radius:inherit;
  background-image:radial-gradient(rgba(255,255,255,.2) 1.6px,transparent 2.1px);
  background-size:20px 20px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 45%,transparent 70%);
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 45%,transparent 70%)}
.hero__stage::after{content:"";position:absolute;left:50%;bottom:4%;width:74%;height:46px;
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(220,231,255,.55),rgba(220,231,255,0))}
.hero__card{--imgr:.5444;position:relative;z-index:2;height:84%;aspect-ratio:var(--imgr);
  margin-bottom:7%}
.hero__card img{width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 18px 22px rgba(3,10,35,.45))}
.hero__floor{position:absolute;z-index:1;left:50%;bottom:6.5%;width:50%;height:22px;
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(3,10,35,.6),rgba(3,10,35,0))}
.hero__drift{position:absolute;inset:-12% -26% -2%;z-index:0;pointer-events:none}
.hero__drift i{--x:50%;--s:12px;--d:18s;--dl:0s;--rise:-480px;--y:30%;
  position:absolute;bottom:0;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;
  opacity:0;
  background:radial-gradient(circle at 36% 34%,#fff 0%,rgba(236,242,255,.96) 40%,
    rgba(160,192,255,.42) 66%,rgba(143,179,255,0) 72%);
  box-shadow:0 0 18px rgba(160,192,255,.35);
  animation:harmoeRise var(--d) linear var(--dl) infinite}
.hero__drift i:nth-child(1){--x:3%;--s:18px;--d:21s;--dl:-2s;--rise:-560px;--y:62%}
.hero__drift i:nth-child(2){--x:12%;--s:11px;--d:17s;--dl:-9s;--rise:-470px;--y:28%;animation-name:harmoeRiseSway}
.hero__drift i:nth-child(3){--x:21%;--s:26px;--d:24s;--dl:-15s;--rise:-620px;--y:80%}
.hero__drift i:nth-child(4){--x:30%;--s:13px;--d:19s;--dl:-5s;--rise:-520px;--y:44%;animation-name:harmoeRiseSway}
.hero__drift i:nth-child(5){--x:41%;--s:10px;--d:16s;--dl:-12s;--rise:-440px;--y:90%}
.hero__drift i:nth-child(6){--x:52%;--s:20px;--d:23s;--dl:-18s;--rise:-600px;--y:12%;animation-name:harmoeRiseSway}
.hero__drift i:nth-child(7){--x:63%;--s:12px;--d:18s;--dl:-7s;--rise:-500px;--y:70%}
.hero__drift i:nth-child(8){--x:72%;--s:28px;--d:26s;--dl:-20s;--rise:-640px;--y:36%;animation-name:harmoeRiseSway}
.hero__drift i:nth-child(9){--x:81%;--s:15px;--d:20s;--dl:-3s;--rise:-540px;--y:84%}
.hero__drift i:nth-child(10){--x:90%;--s:11px;--d:17s;--dl:-13s;--rise:-460px;--y:22%;animation-name:harmoeRiseSway}
.hero__drift i:nth-child(11){--x:97%;--s:22px;--d:22s;--dl:-10s;--rise:-580px;--y:54%}
@keyframes harmoeRise{
  0%{transform:translate3d(0,0,0) scale(.7);opacity:0}
  14%{opacity:.9}
  72%{opacity:.55}
  100%{transform:translate3d(0,var(--rise),0) scale(1.06);opacity:0}}
@keyframes harmoeRiseSway{
  0%{transform:translate3d(0,0,0) scale(.7);opacity:0}
  14%{opacity:.85}
  38%{transform:translate3d(16px,calc(var(--rise) * .38),0) scale(.86)}
  68%{transform:translate3d(-12px,calc(var(--rise) * .7),0) scale(.96);opacity:.5}
  100%{transform:translate3d(6px,var(--rise),0) scale(1.06);opacity:0}}
.chip{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;
  padding:9px 14px 9px 9px;border-radius:calc(var(--r-c) * 1.4);background:#fff;color:var(--ink);max-width:220px;
  box-shadow:0 1px 1px rgba(3,10,35,.18),0 10px 24px rgba(3,10,35,.26)}
.chip__ico{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:var(--r-c);
  background:var(--grad-ico);color:#fff}
.chip__ico .i{width:20px;height:20px}
.chip__t{display:flex;flex-direction:column;line-height:1.25}
.chip__t b{font-family:var(--display);font-weight:800;font-size:1.05rem;color:var(--ink)}
.chip__t small{font-size:13.5px;color:var(--faint)}
/* Chips sit on the cap, the shoulder and the foot of the bottle, never on
   the "Harm::: Brain" wordmark, which runs across 52-62% of the stage. */
.chip--a{top:9%;left:-14%}
.chip--b{top:27%;right:-16%}
.chip--c{bottom:9%;left:-11%}
.hero__tag{position:absolute;z-index:3;left:50%;bottom:10px;transform:translateX(-50%);
  white-space:nowrap;font-size:13.5px;font-weight:600;color:#dce7ff;padding:6px 13px;
  border-radius:999px;background:rgba(8,20,60,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.edge{position:absolute;left:0;right:0;bottom:-1px;height:clamp(26px,4vw,60px);line-height:0;
  z-index:2;pointer-events:none}
.edge svg{display:block;width:100%;height:100%;overflow:visible}
.edge--paper path{fill:var(--g-paper)}
.edge--white path{fill:var(--g-white)}
.edge--tint path{fill:var(--g-tint)}
.edge--night path{fill:var(--g-night)}

/* ---- 4. INNER PAGE HEAD: the same accent ramp, shorter ------------------ */
.phead{position:relative;color:#dfe8ff;overflow-x:clip;
  padding:clamp(22px,3vw,40px) 0 clamp(64px,7vw,100px);
  background:
    radial-gradient(40% 70% at 84% 40%,rgba(111,160,255,.36) 0%,rgba(111,160,255,0) 70%),
    radial-gradient(34% 60% at 0% 0%,rgba(79,134,242,.3) 0%,rgba(79,134,242,0) 70%),
    linear-gradient(160deg,#0a1840 0%,#15317a 55%,#2447a6 100%)}
.phead__dots{position:absolute;right:0;top:0;width:min(48%,600px);height:100%;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.17) 1.7px,transparent 2.2px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(70% 70% at 70% 40%,#000 0%,transparent 75%);
  mask-image:radial-gradient(70% 70% at 70% 40%,#000 0%,transparent 75%)}
.phead__grid{position:relative;z-index:1}
.phead__main{max-width:860px}
.phead__grid--two{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:44px;
  align-items:center}
.phead h1{color:#fff;font-weight:800;font-size:clamp(1.95rem,1.25rem + 2.2vw,3rem);line-height:1.08;
  letter-spacing:-.02em;margin:10px 0 18px}
.phead .answer{background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
  padding:18px 22px 20px;color:#e6edff;font-size:1.0625rem;line-height:1.62;max-width:780px}
.qtag{display:inline-block;margin-bottom:10px;padding:4px 11px;border-radius:999px;background:var(--ice);
  color:#0f2a6b;font-size:13.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.phead .lead{color:#c9d6f5;margin-top:16px;max-width:70ch;font-size:1.1rem;line-height:1.6}
.phead__aside{position:relative}
.phead .postmeta{font-size:14.5px;color:#c9d6f5}
.phead .postmeta b{color:#fff}
.phead .postmeta .sep{margin:0 6px}
.hart{position:relative;max-width:380px;margin-inline:auto;padding:26px 26px 20px;border-radius:calc(var(--r) * 1.5);
  background:radial-gradient(70% 40% at 50% 100%,rgba(143,179,255,.45),rgba(143,179,255,0) 72%),
    linear-gradient(180deg,rgba(255,255,255,.17),rgba(255,255,255,.05));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 1px 1px rgba(3,10,35,.2),0 24px 48px rgba(3,10,35,.3)}
.hart img{width:100%;height:auto;filter:drop-shadow(0 16px 20px rgba(3,10,35,.4))}
.hart--flat{padding:10px}
.hart--flat img{border-radius:calc(var(--r) - 2px);filter:none}
.hart figcaption{margin-top:10px;text-align:center;font-size:14.5px;line-height:1.45;color:#c9d6f5}
.crumbs{font-size:14.5px;color:#b9c7e8;margin-bottom:16px}
.crumbs a{color:#dce7ff}
.crumbs i{font-style:normal;opacity:.6;margin:0 6px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--cobalt-2);margin-bottom:12px}
.eyebrow::before{content:"";width:28px;height:3px;border-radius:2px;background:var(--grad-cta)}
.eyebrow--light{color:#9cc0ff}
.eyebrow--light::before{background:linear-gradient(90deg,#9cc0ff,#fff)}

/* ---- 5. BUY BAR (fixed; resting off-screen) ----------------------------- */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:60;transform:translateY(110%);
  transition:transform .3s ease;background:#fff;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  box-shadow:0 -1px 0 rgba(15,26,51,.08),0 -8px 24px rgba(15,26,51,.1)}
.buybar.show{transform:none}
.buybar__in{max-width:var(--wrap);margin-inline:auto;display:flex;align-items:center;
  justify-content:space-between;gap:16px}
.buybar__t{font-size:15px;line-height:1.35;color:var(--muted)}
.buybar__t b{display:block;color:var(--ink)}

/* ---- ABOVE-THE-FOLD RESPONSIVE ------------------------------------------- */
@media(max-width:1240px){
  .menu a{padding:10px 9px;font-size:15px}
  .util__item:nth-child(3){display:none}
  .chip--b{right:-6%}
}
@media(max-width:1100px){
  .burger{display:flex}
  .navmenus{position:absolute;top:100%;left:0;right:0;display:none;background:#fff;
    box-shadow:0 12px 24px rgba(15,26,51,.14);border-top:1px solid var(--line-2)}
  .navmenus.open{display:block}
  .menu{flex-direction:column;align-items:stretch;gap:0;padding:8px 16px 14px}
  .menu a{padding:14px 12px;font-size:17px;border-radius:var(--r-c)}
  .nav__cta{margin-left:auto}
  .chip--a{left:-6%}
  .chip--b{right:-3%}
  .chip--c{left:-4%}
}
@media(max-width:980px){
  .util__item:nth-child(2){display:none}
  .hero{padding:22px 0 64px}
  .hero__grid{grid-template-columns:minmax(0,1fr);gap:18px}
  .hero__copy{display:contents}
  .hero .pill{order:1;justify-self:start}
  .hero h1{order:2;margin:4px 0 0;max-width:none}
  .hero__media{order:3}
  .hero .answer{order:4}
  .hero__cta{order:5;margin-top:0}
  .ticks{order:6;margin-top:0}
  .hero__trust{order:7;margin-top:0}
  .hero__rating{order:8;margin-top:0}
  .hero__stick{width:min(100%,680px);padding-block:10px 30px}
  .hero__stage{width:min(100%,380px);margin-inline:auto;height:clamp(360px,88vw,460px)}
  .hero__drift{inset:-6% -30% -2%}
  .chip--a{top:12%;left:0}
  .chip--b{top:40%;right:0}
  .chip--c{bottom:14%;left:0}
  .phead__grid--two{grid-template-columns:minmax(0,1fr);gap:24px}
  .hart{max-width:300px}
}
@media(max-width:640px){
  .wrap{padding-inline:16px}
  .util__item:nth-child(4){display:none}
  .nav__row{gap:12px;min-height:64px}
  .brand svg{width:34px;height:34px}
  .brand__prod{font-size:1.15rem}
  .nav__cta .btn{min-height:44px;padding:10px 14px;font-size:.94rem}
  .hero__cta .btn{flex:1 1 100%}
  .ticks{grid-template-columns:minmax(0,1fr)}
  .brand__firm{display:none}
  .hero__stick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;
    padding-block:6px 0;width:100%}
  .hero__stage{grid-column:1 / -1;width:100%}
  .hero__drift{inset:-6% -4% -2%}
  .chip{position:static;flex-direction:column;align-items:center;text-align:center;max-width:none;
    gap:6px;padding:10px 6px 11px}
  .chip__ico{width:32px;height:32px}
  .chip__t b{font-size:.98rem}
  .hero__tag{position:static;grid-column:1 / -1;justify-self:center;transform:none;margin-top:4px}
  .heroseals img{width:40px;height:40px}
  /* three seals side by side at 390: mark over caption, one column each */
  .heroseals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%}
  .heroseals figure{flex-direction:column;text-align:center;gap:6px}
  .heroseals figcaption{max-width:none}
  .buybar__t span{display:none}
}
@media(max-width:480px){
  .nav__long{display:none}
}
@media(max-width:420px){
  .util__long{display:none}
  .hero__stage{height:clamp(330px,92vw,380px)}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero__drift i{animation:none;opacity:.45;bottom:var(--y)}
  .btn,.nav,.buybar{transition:none}
}

/* ---- hero: sticky, centred product column ------------------------------
   The product column holds its place, vertically centred, until the hero has
   fully scrolled past. Written here, above the critical marker, so the first
   paint on desktop is already the final layout; hero_sticky.py finds this
   marker and refreshes the block in place rather than appending a copy.

   --navh is measured and published by site.js. min-height makes the sticky
   box a full screen tall so the shot can be CENTRED inside it.

   Requires .hero NOT to clip on the block axis -- any non-visible overflow on
   an ancestor becomes the scrollport sticky resolves against (pitfall 65). */
@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; }
}

/*!CRITICAL-END*/

/* ==========================================================================
   Below this line: paint and below-the-fold layout, loaded async.
   ========================================================================== */

/* ---- 6. SECTIONS AND GROUNDS -------------------------------------------- */
.sec{position:relative;padding-block:clamp(56px,7vw,100px)}
.sec--paper{background:var(--g-paper)}
.sec--white{background:var(--g-white)}
.sec--tint{background:
  radial-gradient(42% 40% at 88% 50%,rgba(143,179,255,.26) 0%,rgba(143,179,255,0) 70%),
  radial-gradient(38% 40% at 6% 52%,rgba(168,184,214,.3) 0%,rgba(168,184,214,0) 70%),
  var(--g-tint)}
.sec--night{color:#c9d5f2;background:
  radial-gradient(46% 42% at 82% 50%,rgba(79,134,242,.3) 0%,rgba(79,134,242,0) 70%),
  radial-gradient(40% 40% at 10% 50%,rgba(47,95,214,.24) 0%,rgba(47,95,214,0) 70%),
  var(--g-night)}
/* On the night band only the section head, bare prose and the night
   variants of .card/.stat are light-on-dark. Every white component keeps its
   own dark-on-light colours (the list below), so a table or a rating card
   dropped into a night band never inherits pale text. */
.sec--night .sec__head h2,.sec--night .card h3{color:#fff}
.sec--night .eyebrow{color:#9cc0ff}
.sec--night .eyebrow::before{background:linear-gradient(90deg,#9cc0ff,#fff)}
.sec--night .sec__head .lead,.sec--night .wrap > .prose p,.sec--night .split__copy > .prose p,
.sec--night .note{color:#c9d5f2}
.sec--night .sec__head a,.sec--night .wrap > .prose a,.sec--night .split__copy > .prose a,
.sec--night .card a{color:#9cc0ff}
.sec--night .wrap > .prose b,.sec--night .split__copy > .prose b,.sec--night .card b{color:#fff}
.panel,.tablewrap,.rating,.quote,.sfp,.faq details,.refs,.guar,.buy__card,.ingcard,.byline,.forlist,
.tl__item,.step,.badgewall figure,.shots figure,.frame,.rel a,.chips li,.callout,.alert,.tip{color:var(--muted)}
.sec--narrow .wrap{max-width:900px}
.sec__head{max-width:780px;margin-bottom:clamp(26px,3.6vw,44px)}
.sec__head--center{text-align:center;margin-inline:auto}
.sec__head h2{font-size:clamp(1.75rem,1.1rem + 1.9vw,2.6rem);line-height:1.12;letter-spacing:-.02em}
.lead{font-size:clamp(1.08rem,1rem + .3vw,1.2rem);line-height:1.6;color:var(--muted);margin-top:14px;
  max-width:68ch}
.sec__head--center .lead{margin-inline:auto}
.sec .wrap > * + *{margin-top:clamp(20px,2.4vw,30px)}
.sec .wrap > .sec__head + *{margin-top:0}

/* ---- 7. DIVIDERS: curved / angled / wave / dip, between grounds ---------- */
.dvd{display:block;height:clamp(30px,4.4vw,64px);line-height:0;position:relative;z-index:1;
  margin-block:-1px}
.dvd svg{display:block;width:100%;height:100%;overflow:visible}
.dvd--a-paper{background:var(--g-paper)}
.dvd--a-white{background:var(--g-white)}
.dvd--a-tint{background:var(--g-tint)}
.dvd--a-night{background:var(--g-night)}
.dvd--b-paper path{fill:var(--g-paper)}
.dvd--b-white path{fill:var(--g-white)}
.dvd--b-tint path{fill:var(--g-tint)}
.dvd--b-night path{fill:var(--g-night)}
.dvd--foot{height:clamp(34px,5vw,72px)}

/* ---- 8. TEXT: prose at the measure, panels, lists ----------------------- */
.prose{max-width:70ch}
.prose p+p{margin-top:1em}
.panel{background:#fff;border-radius:var(--r);box-shadow:var(--shadow);padding:clamp(22px,3vw,36px)}
.panel > * + *{margin-top:16px}
.panel__h{font-size:1.28rem;color:var(--ink);padding-bottom:12px;box-shadow:0 2px 0 var(--ink)}
.subh{font-size:1.15rem;color:var(--ink);margin-top:24px}
.list li{position:relative;padding-left:22px;margin-top:9px}
.list li::before{content:"";position:absolute;left:3px;top:.68em;width:8px;height:8px;border-radius:50%;
  background:var(--cobalt-2)}
.checks li{display:flex;gap:12px;align-items:flex-start;margin-top:11px}
.olist{counter-reset:ol}
.olist li{counter-increment:ol;position:relative;padding-left:42px;margin-top:14px}
.olist li::before{content:counter(ol);position:absolute;left:0;top:1px;display:grid;place-items:center;
  width:28px;height:28px;border-radius:50%;background:var(--g-tint);color:var(--cobalt);
  font-family:var(--display);font-weight:700;font-size:14.5px}
.pull{margin-block:26px;padding:4px 0 4px 22px;box-shadow:inset 4px 0 0 var(--cobalt-2)}
.pull p{font-family:var(--display);font-size:1.34rem;line-height:1.4;color:var(--ink);font-weight:600}
.pull cite{display:block;margin-top:8px;font-style:normal;font-size:14.5px;color:var(--faint)}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,28px);
  align-items:start}
.note{font-size:14.5px;line-height:1.55;color:var(--faint);max-width:80ch}

/* ---- 9. CARDS: borderless, a strong rule at the head, whitespace -------- */
.cgrid{display:grid;gap:clamp(16px,2vw,26px)}
.cgrid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cgrid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cgrid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:#fff;border-radius:var(--r);box-shadow:var(--shadow);padding:28px 26px 26px}
.card h3{font-size:1.2rem;line-height:1.28;margin-bottom:10px}
.card h3::before{content:"";display:block;width:38px;height:3px;border-radius:2px;
  background:var(--grad-cta);margin-bottom:16px}
.card--ico h3::before{width:100%;height:2px;background:var(--ink);margin-bottom:14px}
.ico{display:grid;place-items:center;width:54px;height:54px;border-radius:calc(var(--r-c) * 1.4);color:#fff;
  background:var(--grad-ico);margin-bottom:18px;
  box-shadow:0 1px 1px rgba(15,26,51,.12),0 8px 18px rgba(47,95,214,.28),inset 0 1px 0 rgba(255,255,255,.35)}
.ico .i{width:26px;height:26px}
.ico--round{border-radius:50%}
.ico--sm{width:42px;height:42px;border-radius:calc(var(--r-c) * 1.2);margin-bottom:0}
.ico--sm .i{width:21px;height:21px}
.sec--night .card{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.sec--night .card p{color:#c9d5f2}
.sec--night .card--ico h3::before{background:rgba(255,255,255,.5)}

/* ingredient cards: tag, name over a strong rule, amount, role */
.ing{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.ingcard{display:flex;flex-direction:column;gap:8px;background:#fff;border-radius:var(--r);
  box-shadow:var(--shadow);padding:24px 24px 22px}
.ingcard__top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.ingcard h3{font-size:1.18rem;line-height:1.28;padding-top:14px;box-shadow:0 -2px 0 var(--ink)}
.ing__amt{font-family:var(--display);font-weight:800;font-size:1.3rem;line-height:1.25;color:var(--cobalt-2)}
.ing__role{font-weight:600;color:var(--ink-2)}
.ing__line{margin-top:auto;padding-top:12px;box-shadow:0 -1px 0 var(--line-2);font-size:14.5px;
  line-height:1.5;color:var(--faint)}
.tag{display:inline-block;padding:5px 11px;border-radius:999px;font-size:13.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.tag--cobalt{background:#e2e9ff;color:#1c3c94}
.tag--sky{background:#ddeeff;color:#0d4f8c}
.tag--steel{background:#e5eaf2;color:#33465e}
.tag--night{background:#dde2f0;color:#18234c}
.tag--ice{background:#ebf2ff;color:#274b9f}
.tag--slate{background:#e7eaf0;color:#434f66}

/* stat band */
.stats{display:grid;gap:clamp(14px,2vw,22px)}
.stats--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.stats--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.stats--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stats--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.stats--6{grid-template-columns:repeat(3,minmax(0,1fr))}
.stat{padding:22px 20px;border-radius:var(--r);background:#fff;box-shadow:var(--shadow)}
.stat__n{display:block;font-family:var(--display);font-weight:800;line-height:1;letter-spacing:-.02em;
  font-size:clamp(1.9rem,1.3rem + 1.6vw,2.7rem);color:var(--cobalt-2);
  background:linear-gradient(90deg,#1f47b8,#4f86f2);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}
.stat__l{display:block;margin-top:10px;font-weight:600;font-size:16px;line-height:1.4;color:var(--ink-2)}
.stat small{display:block;margin-top:6px;font-size:14.5px;line-height:1.45;color:var(--faint)}
.sec--night .stats .stat{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.sec--night .stats .stat__n{color:#fff;background:linear-gradient(90deg,#9cc0ff,#fff);-webkit-background-clip:text;
  background-clip:text}
.sec--night .stats .stat__l{color:#e6edff}
.sec--night .stats .stat small{color:#aebde0}

/* numbered steps, joined by a dashed rule through the gaps */
.steps{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:clamp(16px,2vw,24px);counter-reset:st}
.steps::before{content:"";position:absolute;left:40px;right:40px;top:35px;
  border-top:2px dashed var(--periwinkle)}
.step{position:relative;counter-increment:st;background:#fff;border-radius:var(--r);
  box-shadow:var(--shadow);padding:66px 22px 22px}
.step__n{position:absolute;top:18px;left:22px;display:grid;place-items:center;width:36px;height:36px;
  border-radius:50%;background:var(--grad-ico);color:#fff;font-family:var(--display);font-weight:700;
  box-shadow:0 0 0 5px #fff}
.step__n::before{content:counter(st)}
.step .ico{position:absolute;top:14px;right:18px}
.step h3{font-size:1.14rem;margin-bottom:8px}

/* vertical timeline */
.tl{position:relative;max-width:880px;padding-left:36px}
.tl::before{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:3px;border-radius:2px;
  background:linear-gradient(180deg,#4f86f2,#a8b8d6)}
.tl__item{position:relative;background:#fff;border-radius:var(--r);box-shadow:var(--shadow);
  padding:20px 24px}
.tl__item + .tl__item{margin-top:18px}
.tl__item::before{content:"";position:absolute;left:-32px;top:24px;width:18px;height:18px;
  border-radius:50%;background:#fff;box-shadow:inset 0 0 0 4px var(--cobalt-2)}
.tl__when{display:inline-block;margin-bottom:6px;font-size:13.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--cobalt-2)}
.tl__item h3{font-size:1.14rem;margin-bottom:6px}

/* chips, fits / think-twice lists */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips li{display:inline-flex;align-items:center;gap:8px;padding:8px 15px 8px 8px;border-radius:999px;
  background:#fff;box-shadow:var(--shadow);font-weight:600;font-size:15.5px;color:var(--ink-2)}
.forlist{background:#fff;border-radius:var(--r);padding:26px;
  box-shadow:inset 0 4px 0 var(--cobalt-2),var(--shadow)}
.forlist--no{box-shadow:inset 0 4px 0 var(--warm),var(--shadow)}
.forlist h3{font-size:1.18rem;margin-bottom:10px}
.forlist li{position:relative;padding-left:28px;margin-top:10px}
.forlist li::before{content:"";position:absolute;left:2px;top:.5em;width:14px;height:8px;
  border-left:3px solid var(--cobalt-2);border-bottom:3px solid var(--cobalt-2);transform:rotate(-45deg)}
.forlist--no li::before{width:14px;height:3px;border:0;background:var(--warm);transform:none;top:.8em}

/* ---- 10. IMAGES: framed figures, splits, captioned rows, seals ---------- */
.frame{background:#fff;border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.frame img{width:100%;height:auto}
.frame figcaption{padding:14px 18px 16px;font-size:14.5px;line-height:1.55;color:var(--faint)}
.frame figcaption b{color:var(--ink)}
.frame--dark{background:#0d1a3f}
.frame--dark figcaption{color:#b9c7e8}
.frame--dark figcaption b{color:#fff}
.frame--pack img{padding:18px 18px 0;background:linear-gradient(180deg,#eef3ff,#dfe8fb)}
.frame--label img{background:#fff}
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,60px);
  align-items:center}
.split--rev .split__media{order:2}
.split__copy > * + *{margin-top:18px}
.split__media .frame{max-width:560px;margin-inline:auto}
.shots{display:grid;gap:clamp(16px,2vw,24px)}
.shots--1{grid-template-columns:minmax(0,680px);justify-content:center}
.shots--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.shots--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.shots--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.shots figure{background:#fff;border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.shots figure img{width:100%}
.shots figcaption{padding:14px 18px 16px;font-size:14.5px;line-height:1.55;color:var(--faint)}
.shots figcaption b{color:var(--ink)}
.badgewall{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.6vw,18px)}
.badgewall figure{background:#fff;border-radius:var(--r);box-shadow:var(--shadow);padding:20px 16px 18px;
  text-align:center}
.badgewall img{width:84px;height:84px;margin:0 auto 12px}
.badgewall figcaption{font-size:14.5px;line-height:1.5;color:var(--faint)}
.badgewall figcaption b{display:block;margin-bottom:6px;font-size:15px;color:var(--ink)}

/* ---- 11. TABLES: every table in a card ---------------------------------- */
.tablewrap{background:#fff;border-radius:var(--r);box-shadow:var(--shadow);overflow-x:auto;
  -webkit-overflow-scrolling:touch}
.dtable{width:100%;min-width:620px;border-collapse:collapse;font-size:16px;line-height:1.5}
.dtable caption{caption-side:top;text-align:left;padding:18px 20px 8px;font-family:var(--display);
  font-weight:700;font-size:1.05rem;color:var(--ink)}
.dtable thead th{padding:14px 18px;text-align:left;vertical-align:bottom;font-size:14.5px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink);
  background:linear-gradient(180deg,#eef3ff,#e3eafb);box-shadow:inset 0 -2px 0 var(--ink)}
.dtable td,.dtable tbody th{padding:14px 18px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line-2)}
.dtable tbody th{font-weight:700;color:var(--ink);font-size:16px}
.dtable tbody tr:nth-child(even){background:#f8faff}
.dtable tbody tr:last-child td,.dtable tbody tr:last-child th{border-bottom:0}
.tablewrap + .note{margin-top:14px}

/* the Supplement Facts panel, set like the label: black rules on white */
.sfp{max-width:560px;background:#fff;border-radius:var(--r);box-shadow:var(--shadow);
  padding:22px 24px 20px;color:#111}
.sfp__h{font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,1.3rem + 1vw,2rem);
  line-height:1.1;color:#000;padding-bottom:6px;box-shadow:0 1px 0 #000}
.sfp__srv{padding:8px 0 10px;font-size:15.5px;line-height:1.45;box-shadow:0 10px 0 #000;margin-bottom:10px}
.sfp .tablewrap{background:transparent;box-shadow:none;border-radius:0;overflow-x:visible;margin-top:10px}
.sfp__t{width:100%;border-collapse:collapse;font-size:16px;line-height:1.4;color:#111}
.sfp__t thead th{padding:6px 0 6px 8px;font-size:14.5px;font-weight:700;text-align:right;
  border-bottom:1px solid #000}
.sfp__t thead th:first-child{text-align:left;padding-left:0}
.sfp__t tbody th{padding:9px 0;text-align:left;font-weight:700;border-bottom:1px solid #000}
.sfp__t td{padding:9px 0 9px 10px;text-align:right;white-space:nowrap;border-bottom:1px solid #000}
.sfp__t .sfp__list td{padding:8px 0 12px;text-align:left;white-space:normal;font-size:16px;color:#222;
  border-bottom:6px solid #000}
.sfp__foot{padding-top:8px;font-size:14.5px;line-height:1.45;color:#333}
.sfp__other{margin-top:10px;font-size:15.5px;line-height:1.5;color:#222}
.sfp__other b{color:#000}

/* ---- 12. CALLOUTS, KEY POINTS ------------------------------------------- */
.callout,.alert,.tip{display:flex;gap:16px;align-items:flex-start;border-radius:var(--r);
  padding:20px 22px;box-shadow:var(--shadow)}
.callout{background:linear-gradient(135deg,#e8f0ff 0%,#f6f9ff 100%);
  box-shadow:inset 4px 0 0 var(--cobalt-2),var(--shadow)}
.alert{background:linear-gradient(135deg,#fff3dd 0%,#fffaf1 100%);
  box-shadow:inset 4px 0 0 var(--warm),var(--shadow)}
.tip{background:#fff;box-shadow:inset 4px 0 0 var(--ink),var(--shadow)}
.callout__i{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:calc(var(--r-c) * 1.2);
  color:#fff;background:var(--grad-ico)}
.alert .callout__i{background:linear-gradient(140deg,#e2a23a,#b0650a)}
.tip .callout__i{background:linear-gradient(140deg,#3c4760,#0f1a33)}
.callout__i .i{width:22px;height:22px}
.callout__t{display:block;margin-bottom:4px;font-family:var(--display);font-size:1.06rem;color:var(--ink)}
.callout__b p{max-width:74ch;color:var(--ink-2)}
.callout__b p+p{margin-top:8px}
.keypoints{border-radius:var(--r);padding:24px 26px;color:#dde6ff;
  background:linear-gradient(140deg,#0e2258 0%,#2447a6 100%);box-shadow:var(--shadow)}
.keypoints__t{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-family:var(--display);
  font-weight:700;font-size:1.1rem;color:#fff}
.keypoints__t .i{width:18px;height:18px;color:var(--sky)}
.keypoints li{padding:10px 0;box-shadow:0 -1px 0 rgba(255,255,255,.14)}
.keypoints li b{color:#fff}

/* ---- 13. REVIEWS -------------------------------------------------------- */
.rating{display:grid;grid-template-columns:auto minmax(0,1.3fr) minmax(0,1fr);gap:clamp(20px,3vw,34px);
  align-items:center;background:#fff;border-radius:var(--r);box-shadow:var(--shadow);
  padding:clamp(22px,3vw,34px);color:var(--muted)}
.rating__score{text-align:center;padding-right:clamp(18px,3vw,34px);box-shadow:2px 0 0 var(--ink)}
.rating__n{display:block;font-family:var(--display);font-weight:800;font-size:3.6rem;line-height:1;color:var(--ink)}
.rating__score > span{display:block;margin:4px 0 10px;font-size:14.5px;color:var(--faint)}
.rating__score small{display:block;max-width:210px;margin:10px auto 0;font-size:14.5px;line-height:1.45;
  color:var(--faint)}
.rating .stars__off,.quote .stars__off{color:#d3dbea}
.bar{display:grid;grid-template-columns:60px minmax(0,1fr) 46px;gap:10px;align-items:center;
  margin:7px 0;font-size:15px;color:var(--ink-2)}
.bar i{display:block;height:10px;border-radius:99px;background:var(--g-tint);overflow:hidden}
.bar em{display:block;height:100%;border-radius:inherit;background:var(--grad-cta)}
.bar b{text-align:right}
.rating__side{display:grid;gap:12px}
.rating__side .stat{background:var(--g-paper);box-shadow:none;padding:14px 16px}
.rating__side .stat__n{font-size:1.55rem}
.rating__side .stat__l{margin-top:6px;font-size:15px}
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,22px)}
.quote{background:#fff;border-radius:var(--r);box-shadow:var(--shadow);padding:24px 24px 20px}
.quote .i{width:26px;height:26px;color:var(--cobalt-2)}
.quote blockquote p{margin-top:10px;font-family:var(--display);font-size:1.3rem;font-weight:600;
  line-height:1.35;color:var(--ink)}
.quote figcaption{margin-top:14px;padding-top:12px;box-shadow:0 -2px 0 var(--ink);font-size:14.5px;
  color:var(--faint)}

/* ---- 14. THE PACK CARDS: a subgrid, so the three buttons share one line -- */
.buy{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px clamp(16px,2vw,24px);
  align-items:stretch;padding-top:14px}
.buy__card{position:relative;display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:16px;
  background:#fff;border-radius:var(--r);box-shadow:var(--shadow);padding:30px 22px 22px}
.buy__card--feature{box-shadow:0 0 0 2px var(--cobalt-2),0 1px 1px rgba(15,26,51,.12),0 14px 30px rgba(47,95,214,.22)}
.buy__ribbon{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);white-space:nowrap;
  padding:7px 16px;border-radius:999px;background:var(--grad-cta);color:#fff;font-size:13.5px;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;box-shadow:var(--glow)}
.buy__head{text-align:center}
.buy__flag{display:inline-block;font-size:13.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--cobalt-2)}
.buy__card--feature .buy__flag{visibility:hidden}
.buy__name{margin-top:4px;font-size:1.6rem;font-weight:800;color:var(--ink)}
.buy__supply{margin-top:2px;font-size:15px;color:var(--faint)}
.buy__well{display:grid;place-items:center;height:230px;padding:14px;border-radius:calc(var(--r) - 2px);
  background:radial-gradient(60% 55% at 50% 58%,#fff 0%,rgba(255,255,255,0) 100%),
    linear-gradient(180deg,#eef3ff,#dce6fb)}
.buy__img{width:auto;height:196px;max-width:100%;object-fit:contain}
.buy__price{padding:12px;border-radius:calc(var(--r-c) * 1.2);background:var(--g-paper);text-align:center}
.buy__price b{display:block;font-family:var(--display);font-weight:800;font-size:1.28rem;color:var(--ink)}
.buy__price span{display:block;font-size:14.5px;line-height:1.4;color:var(--faint)}
.buy__perks li{display:flex;gap:10px;align-items:flex-start;margin-top:9px;font-size:15.5px;
  line-height:1.4;color:var(--ink-2)}
.buy__perks li:first-child{margin-top:0}
.buy__add{min-height:54px;font-size:1.08rem}
.buy__cart{flex:none}
.buy__foot{text-align:center}
.buy__payfig{margin:0 0 12px}
/* .card--pack (added by pack_cards.py) sizes EVERY img in the card to 168px
   with object-fit:contain, which boxed this 24px strip in 324x168 and left
   ~110px of dead space under Add To Cart. Two classes outrank it. */
.buy__pay,.card--pack .buy__pay{height:24px;width:auto;margin:0 auto 6px;object-fit:contain}
.buy__payfig figcaption{font-size:14.5px;line-height:1.4;color:var(--faint)}
.buy__why{font-size:14.5px;line-height:1.5;color:var(--faint)}
.buy__note{max-width:760px;margin-inline:auto;text-align:center;font-size:14.5px;line-height:1.55;
  color:var(--faint)}
@supports not (grid-template-rows:subgrid){
  .buy__card{display:flex;flex-direction:column;gap:16px}
  .buy__head{min-height:92px}
  .buy__perks{min-height:128px}
}

/* guarantee panel */
.guar{display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(22px,4vw,48px);align-items:center;
  background:#fff;border-radius:var(--r);box-shadow:var(--shadow);padding:clamp(24px,3.4vw,40px)}
.guar__seal{padding:24px 18px;border-radius:calc(var(--r) - 2px);text-align:center;
  background:radial-gradient(circle at 50% 38%,#fffaf0 0%,#f4e6c0 100%)}
.guar__seal img{width:132px;height:132px;margin:0 auto 12px}
.guar__seal b{display:block;font-family:var(--display);font-size:1.6rem;color:var(--ink)}
.guar__seal span{font-size:14.5px;color:#5c4a22}
.guar__route{margin-top:16px;padding-top:14px;box-shadow:0 -2px 0 var(--ink);color:var(--ink-2)}

/* ---- 15. FAQ ACCORDION -------------------------------------------------- */
.faq{display:grid;gap:12px;max-width:880px;margin-inline:auto;border-radius:var(--r)}
.faq details{background:#fff;border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:58px;
  padding:16px 22px;cursor:pointer;list-style:none;font-family:var(--display);font-weight:600;
  font-size:1.08rem;line-height:1.35;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--cobalt)}
.faq__pm{position:relative;flex:none;width:30px;height:30px;border-radius:50%;background:var(--g-tint)}
.faq__pm::before,.faq__pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;
  border-radius:2px;background:var(--cobalt-2);transform:translate(-50%,-50%);transition:transform .25s ease}
.faq__pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] .faq__pm::after{transform:translate(-50%,-50%) rotate(0deg)}
.faq details[open] summary{box-shadow:0 1px 0 var(--line-2)}
.faq__b{padding:16px 22px 20px}
.faq__b p{max-width:74ch}

/* ---- 16. SOURCES, BYLINE, RELATED --------------------------------------- */
.refs{background:#fff;border-radius:var(--r);box-shadow:var(--shadow);padding:18px 26px}
.refs ol{counter-reset:rf}
.refs li{counter-increment:rf;position:relative;padding:11px 0 11px 40px;font-size:15.5px;line-height:1.55;
  color:var(--muted);overflow-wrap:anywhere;box-shadow:0 -1px 0 var(--line-2)}
.refs li:first-child{box-shadow:none}
.refs li::before{content:counter(rf);position:absolute;left:0;top:11px;display:grid;place-items:center;
  width:28px;height:28px;border-radius:calc(var(--r-c) * .8);background:var(--g-tint);color:var(--cobalt);font-size:13.5px;
  font-weight:700}
.refs a{word-break:break-all}
.refs__t{font-family:var(--display);font-weight:700;font-size:1.2rem;color:var(--ink);margin-bottom:6px}
.byline{display:flex;gap:18px;align-items:flex-start;background:#fff;border-radius:var(--r);
  box-shadow:var(--shadow);padding:22px 24px}
.byline svg{flex:none}
.byline b{display:block;margin-bottom:6px;font-family:var(--display);font-size:1.08rem;color:var(--ink)}
.byline p{color:var(--muted)}
.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,20px)}
.rel a{display:flex;flex-direction:column;gap:8px;background:#fff;border-radius:var(--r);
  box-shadow:var(--shadow);padding:22px 22px 20px;color:var(--ink);text-decoration:none}
.rel a:hover{text-decoration:none}
.rel__k{font-size:13.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cobalt-2)}
.rel b{font-family:var(--display);font-size:1.12rem;line-height:1.3;color:var(--ink);padding-bottom:10px;
  box-shadow:0 2px 0 var(--ink)}
.rel a > span:last-child{font-size:16px;line-height:1.5;color:var(--muted)}

/* ---- 17. CLOSING CTA ON THE ACCENT RAMP --------------------------------- */
.sec--final{background:var(--g-paper)}
.final{position:relative;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(22px,4vw,56px);align-items:center;overflow:hidden;border-radius:calc(var(--r) * 1.5);
  padding:clamp(26px,4vw,56px);color:#d4def7;
  background:
    radial-gradient(46% 70% at 22% 50%,rgba(143,179,255,.45) 0%,rgba(143,179,255,0) 70%),
    linear-gradient(140deg,#0a1840 0%,#1a3a8f 55%,#2d58c4 100%);
  box-shadow:0 1px 1px rgba(15,26,51,.12),0 18px 40px rgba(15,26,51,.22)}
.final__dots{position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.15) 1.6px,transparent 2.1px);background-size:22px 22px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 55%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 55%,transparent 100%)}
.final__img,.final__body{position:relative;z-index:1}
.final__img img{width:100%;max-width:320px;margin-inline:auto;filter:drop-shadow(0 20px 28px rgba(0,0,0,.35))}
/* .final__img is a <figure>; inside a blog .article the article's own figure
   card (white ground, shadow, faint caption) must not land on the dark panel. */
.final .final__img{margin:0;background:none;box-shadow:none;border-radius:0;overflow:visible;
  text-align:center}
.final .final__img figcaption{margin-top:12px;padding:0;font-size:14.5px;line-height:1.45;
  color:#cfdcff}
.final h2,.final__h{font-family:var(--display);font-weight:800;color:#fff;
  font-size:clamp(1.6rem,1.1rem + 1.5vw,2.3rem);line-height:1.14;letter-spacing:-.02em}
.final__body > p{margin-top:12px;color:#d4def7}
.final__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.final .btn--cta{background:var(--grad-ice);color:#0f2a6b;
  box-shadow:0 1px 0 #fff inset,0 10px 30px rgba(143,179,255,.45)}
.final .btn--ghost{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.final .btn--ghost:hover{background:rgba(255,255,255,.08)}
.final__note{font-size:14.5px;color:#b3c3e8}
.final--mid{margin-block:34px;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}
.final--mid .btn{margin-top:18px}

/* ---- 18. BLOG ----------------------------------------------------------- */
.sec--article{padding-top:clamp(30px,4vw,52px)}
.article{max-width:840px}
.article .crumbs{color:var(--faint)}
.article .crumbs a{color:var(--cobalt)}
.article h1{margin:12px 0 12px;font-weight:800;font-size:clamp(2rem,1.3rem + 2vw,2.9rem);line-height:1.1;
  letter-spacing:-.022em}
.postmeta{font-size:14.5px;color:var(--faint)}
.postmeta .sep{margin:0 6px}
.article > .lead{margin-top:16px}
.article > h2{margin:46px 0 12px;font-size:clamp(1.5rem,1.1rem + 1.2vw,2rem);scroll-margin-top:96px}
.article > h3{margin:28px 0 8px;font-size:1.2rem}
.article > p,.article > ul,.article > ol{margin-top:14px;max-width:72ch}
.article > .keypoints,.article > .tablewrap,.article > .callout,.article > .alert,.article > .tip{margin-top:26px}
.article figure{margin:28px 0;background:#fff;border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.article figure img{width:100%}
.article figure figcaption{padding:12px 16px 14px;font-size:14.5px;line-height:1.55;color:var(--faint)}
.toc{margin:26px 0;background:#fff;border-radius:var(--r);box-shadow:var(--shadow);padding:20px 24px}
.toc__t{margin-bottom:8px;font-family:var(--display);font-weight:700;color:var(--ink)}
.toc ol{counter-reset:tc}
.toc li{counter-increment:tc;padding:7px 0;box-shadow:0 -1px 0 var(--line-2)}
.toc li:first-child{box-shadow:none}
.toc li::before{content:counter(tc,decimal-leading-zero);margin-right:10px;font-family:var(--display);
  font-weight:700;color:var(--cobalt-2)}
.toc a{font-weight:600;color:var(--ink-2)}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.posts article{display:flex;flex-direction:column;overflow:hidden;background:#fff;border-radius:var(--r);
  box-shadow:var(--shadow)}
.posts__img img{width:100%;aspect-ratio:4/3;object-fit:cover}
.posts__b{padding:18px 22px 22px}
.posts__m{font-size:13.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cobalt-2)}
.posts h3{margin:8px 0;font-size:1.18rem;line-height:1.3}
.posts h3 a{color:var(--ink)}

/* ---- 19. FORMS (contact page) ------------------------------------------- */
.form{display:grid;gap:14px;max-width:640px}
.form label{display:grid;gap:6px;font-size:14.5px;font-weight:600;color:var(--ink-2)}
.form input,.form textarea,.form select{width:100%;min-height:48px;padding:12px 14px;font:inherit;
  font-size:16px;color:var(--ink);background:#fff;border:0;border-radius:var(--r-c);
  box-shadow:inset 0 0 0 1.5px var(--line)}
.form input:focus,.form textarea:focus,.form select:focus{outline:0;box-shadow:inset 0 0 0 2px var(--cobalt-2)}
.form textarea{min-height:140px;resize:vertical}

/* ---- 20. FOOTER: a dark slab under a curved edge ------------------------ */
.site-foot{background:var(--g-night);color:#b9c7e8;padding:clamp(34px,5vw,60px) 0 110px;font-size:16px}
.site-foot a{color:#dce7ff}
.foot__grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,40px)}
.foot__brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;
  font-size:1.3rem;color:#fff;text-decoration:none}
.foot__brand svg{width:38px;height:38px}
.foot__brand b{color:var(--sky)}
.foot__role{margin-top:10px;font-weight:600;color:#fff}
.foot__desk p{margin-top:10px;line-height:1.6}
.foot__contact li{margin-top:10px;line-height:1.45}
.foot__contact span{display:block;font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;color:#8ea3d0}
.fcol__h{font-family:var(--display);font-weight:700;line-height:1.18;
  font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:#fff;padding-bottom:10px;
  margin-bottom:6px;box-shadow:0 2px 0 rgba(255,255,255,.18)}
.fcol li{margin-top:8px}
.fseal,.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:34px;padding-top:24px;
  box-shadow:0 -1px 0 rgba(255,255,255,.12)}
.fseal img{width:56px;height:56px}
.fseal p{flex:1 1 280px;line-height:1.55}
.fnap{margin-top:24px;line-height:1.7}
.fnap strong{color:#fff}
.fpay img{height:36px;width:auto}
.fpay p{flex:1 1 280px}
.fmini{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:24px}
.disc{margin-top:26px;padding-top:22px;box-shadow:0 -1px 0 rgba(255,255,255,.12);line-height:1.6}
.disc p+p{margin-top:12px}
.disc b{color:#fff}
.disc .copy{color:#8ea3d0}

/* ---- 21. MOTION: rise on entry (translate, so hover transform is free) -- */
[data-reveal]{opacity:0;translate:0 16px;
  transition:opacity .6s ease,translate .6s ease,transform .25s ease,box-shadow .25s ease}
[data-reveal].in{opacity:1;translate:none}
.card,.ingcard,.step,.stat,.quote,.rel a,.posts article,.shots figure,.badgewall figure,.buy__card,.tl__item{
  transition:transform .25s ease,box-shadow .25s ease}
.card:hover,.ingcard:hover,.step:hover,.quote:hover,.rel a:hover,.posts article:hover,.shots figure:hover,
.badgewall figure:hover,.buy__card:hover,.tl__item:hover{transform:translateY(-3px);box-shadow:var(--lift)}
.buy__card--feature:hover{box-shadow:0 0 0 2px var(--cobalt-2),0 1px 1px rgba(15,26,51,.14),0 18px 36px rgba(47,95,214,.28)}
.sec--night .card:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.24),0 12px 26px rgba(0,0,0,.25)}
@media(prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;translate:none;transition:none}
  .card:hover,.ingcard:hover,.step:hover,.quote:hover,.rel a:hover,.posts article:hover,.shots figure:hover,
  .badgewall figure:hover,.buy__card:hover,.tl__item:hover,.btn:hover{transform:none}
  .faq__pm::before,.faq__pm::after{transition:none}
}

/* ---- 22. RESPONSIVE ----------------------------------------------------- */
@media(max-width:1100px){
  .cgrid--4,.stats--4,.stats--5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .badgewall{grid-template-columns:repeat(4,minmax(0,1fr))}
  .foot__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot__desk{grid-column:1 / -1}
}
@media(max-width:980px){
  .cgrid--3,.ing,.quotes,.rel,.posts,.shots--3,.shots--4,.stats--3,.stats--6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split{grid-template-columns:minmax(0,1fr)}
  .split--rev .split__media{order:0}
  .rating{grid-template-columns:minmax(0,1fr)}
  .rating__score{padding-right:0;padding-bottom:18px;box-shadow:0 2px 0 var(--ink)}
  .guar{grid-template-columns:minmax(0,1fr)}
  .guar__seal{max-width:320px;margin-inline:auto;width:100%}
  .final,.final--mid{grid-template-columns:minmax(0,1fr);text-align:center}
  .final__cta{justify-content:center}
  .final__img img{max-width:240px}
  .steps::before{display:none}
}
@media(max-width:900px){
  .buy{grid-template-columns:minmax(0,1fr);max-width:480px;margin-inline:auto}
  .buy__card--feature{order:-1}
}
@media(max-width:768px){
  .two{grid-template-columns:minmax(0,1fr)}
  .badgewall{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .cgrid--2,.cgrid--3,.cgrid--4,.ing,.quotes,.rel,.posts,.shots--2,.shots--3,.shots--4,.stats--3,.stats--6{
    grid-template-columns:minmax(0,1fr)}
  .badgewall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card{padding:24px 20px 22px}
  .panel{padding:22px 18px}
  .rating__n{font-size:3rem}
  .dtable{min-width:560px}
  .refs{padding:14px 18px}
  .refs li{padding-left:36px}
  .foot__grid{grid-template-columns:minmax(0,1fr)}
  .byline{flex-direction:column}
}

/* ==== directional chrome (fix_chrome_scroll.py) ==== */
.nav--away{transform:translateY(-100%)}
html.chrome-up .buybar{transform:translateY(110%)}
/* ==== end directional chrome ==== */

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

/* ==== 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 89 box-shadow declaration(s)
   and 14 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 (15,26,51), 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(15,26,51,.06), 0 6px 18px rgba(15,26,51,.07);
  --lift:0 2px 6px rgba(15,26,51,.09), 0 16px 34px rgba(15,26,51,.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. */
.final{border-radius:var(--r)}

/* A surface a reader can click answers the pointer. 2px
   registers without reflowing the row beside it. */
.rel a,
.posts article,
.shots figure,
.card--pack,
.badgewall figure,
.posts h3 a{transition:box-shadow .2s ease, transform .2s ease}
.rel a:hover,
.posts article:hover,
.shots figure:hover,
.card--pack:hover,
.badgewall figure:hover,
.posts h3 a:hover{box-shadow:var(--lift);transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){
.rel a:hover,
.posts article:hover,
.shots figure:hover,
.card--pack:hover,
.badgewall figure:hover,
.posts h3 a:hover{transform:none}
}
/* ==== end modern surface ==== */

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