/* ============================================================================
   PetSmartMeds — design system
   Soft UI Evolution · teal + amber · Figtree / Noto Sans
   Light + dark, WCAG AA, reduced-motion safe.
   ========================================================================= */

/* ------------------------------------------------------------------ tokens */
:root{
  /* brand */
  --ink:#0B3B38; --ink-2:#123F3C; --teal-deep:#0B5C57; --teal:#0D9488;
  --teal-lt:#16B8A6; --teal-100:#CCFBF1; --teal-50:#F0FDFA;
  --amber:#EA7A18; --amber-lt:#F0A028; --amber-50:#FEF6EC;
  --danger:#C81E1E; --danger-50:#FEF2F2; --ok:#0F7B4F; --ok-50:#ECFDF5;

  /* semantic surfaces */
  --bg:#FFFFFF; --bg-sub:#F6FBFA; --bg-sunk:#EDF6F5;
  --surface:#FFFFFF; --surface-2:#F6FBFA; --surface-raise:#FFFFFF;
  --fg:#0B3B38; --fg-2:#3D6360; --fg-3:#63857F; --fg-inv:#FFFFFF;
  --border:#D6E9E7; --border-2:#BFDDDA; --ring:#0D9488;
  --accent:var(--amber); --accent-fg:#FFFFFF;

  /* type */
  --ff-head:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ff-body:"Noto Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ff-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --fs-xs:.75rem; --fs-sm:.875rem; --fs-base:1rem; --fs-md:1.0625rem;
  --fs-lg:1.1875rem; --fs-xl:1.375rem; --fs-2xl:1.75rem; --fs-3xl:2.25rem;
  --fs-4xl:2.875rem; --fs-5xl:3.75rem; --fs-6xl:4.75rem;
  --lh-tight:1.1; --lh-snug:1.28; --lh-body:1.65; --lh-loose:1.78;

  /* space — 4/8 rhythm */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.25rem;
  --s-6:1.5rem; --s-8:2rem; --s-10:2.5rem; --s-12:3rem; --s-16:4rem;
  --s-20:5rem; --s-24:6rem; --s-32:8rem;
  --wrap:1180px; --wrap-wide:1400px; --wrap-text:68ch;

  /* shape + depth (Soft UI Evolution: softer than flat, clearer than neumorphic) */
  --r-sm:8px; --r:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(11,59,56,.06), 0 1px 3px rgba(11,59,56,.05);
  --sh-2:0 2px 4px rgba(11,59,56,.05), 0 6px 16px -4px rgba(11,59,56,.10);
  --sh-3:0 4px 8px rgba(11,59,56,.05), 0 14px 34px -8px rgba(11,59,56,.14);
  --sh-4:0 8px 18px rgba(11,59,56,.07), 0 28px 60px -14px rgba(11,59,56,.20);
  --sh-ring:0 0 0 1px var(--border);

  /* motion */
  --t-fast:140ms; --t:220ms; --t-slow:340ms; --t-xslow:520ms;
  --ease:cubic-bezier(.22,.61,.36,1);        /* ease-out, entering */
  --ease-in:cubic-bezier(.55,.06,.68,.19);   /* exiting */
  --ease-spring:cubic-bezier(.34,1.42,.48,1);

  /* z scale */
  --z-base:0; --z-raise:10; --z-sticky:20; --z-nav:40; --z-overlay:100; --z-toast:1000;
  --nav-h:68px;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#071A18; --bg-sub:#0A221F; --bg-sunk:#061512;
    --surface:#0C2724; --surface-2:#0A221F; --surface-raise:#113230;
    --fg:#E6F5F3; --fg-2:#A8CFCA; --fg-3:#7FB0AA; --fg-inv:#071A18;
    --border:#1B4340; --border-2:#245450; --ring:#16B8A6;
    --teal-100:#123F3C; --teal-50:#0A221F; --amber-50:#2A1C0C;
    --danger:#F87171; --danger-50:#2A1112; --ok:#34D399; --ok-50:#06231A;
    --sh-1:0 1px 2px rgba(0,0,0,.34); --sh-2:0 2px 6px rgba(0,0,0,.38),0 8px 20px -6px rgba(0,0,0,.44);
    --sh-3:0 4px 10px rgba(0,0,0,.40),0 18px 40px -10px rgba(0,0,0,.52);
    --sh-4:0 10px 24px rgba(0,0,0,.46),0 34px 70px -16px rgba(0,0,0,.60);
  }
}
:root[data-theme="dark"]{
  --bg:#071A18; --bg-sub:#0A221F; --bg-sunk:#061512;
  --surface:#0C2724; --surface-2:#0A221F; --surface-raise:#113230;
  --fg:#E6F5F3; --fg-2:#A8CFCA; --fg-3:#7FB0AA; --fg-inv:#071A18;
  --border:#1B4340; --border-2:#245450; --ring:#16B8A6;
  --teal-100:#123F3C; --teal-50:#0A221F; --amber-50:#2A1C0C;
  --danger:#F87171; --danger-50:#2A1112; --ok:#34D399; --ok-50:#06231A;
  --sh-1:0 1px 2px rgba(0,0,0,.34); --sh-2:0 2px 6px rgba(0,0,0,.38),0 8px 20px -6px rgba(0,0,0,.44);
  --sh-3:0 4px 10px rgba(0,0,0,.40),0 18px 40px -10px rgba(0,0,0,.52);
  --sh-4:0 10px 24px rgba(0,0,0,.46),0 34px 70px -16px rgba(0,0,0,.60);
}

/* ------------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html:focus-within{scroll-padding-top:calc(var(--nav-h) + var(--s-4))}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font:var(--fs-md)/var(--lh-body) var(--ff-body);
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5{font-family:var(--ff-head);font-weight:700;line-height:var(--lh-tight);
  margin:0 0 var(--s-4);letter-spacing:-.021em;color:var(--fg);text-wrap:balance}
h1{font-size:clamp(2.1rem,1.25rem + 4.1vw,var(--fs-5xl))}
h2{font-size:clamp(1.65rem,1.1rem + 2.3vw,var(--fs-3xl))}
h3{font-size:clamp(1.22rem,1.02rem + .8vw,var(--fs-xl));letter-spacing:-.014em}
h4{font-size:var(--fs-lg);letter-spacing:-.008em}
p,ul,ol,dl,figure,table,blockquote{margin:0 0 var(--s-4)}
p{max-width:var(--wrap-text);text-wrap:pretty}
a{color:var(--teal-deep);text-decoration-color:color-mix(in srgb,var(--teal) 42%,transparent);
  text-underline-offset:3px;transition:color var(--t-fast) var(--ease)}
a:hover{color:var(--teal);text-decoration-color:currentColor}
:root[data-theme="dark"] a,:where(@media (prefers-color-scheme:dark)) a{color:var(--teal-lt)}
img,svg,video,canvas{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
strong,b{font-weight:700}
small{font-size:var(--fs-sm)}
hr{border:0;border-top:1px solid var(--border);margin:var(--s-12) 0}
code,kbd,samp{font-family:var(--ff-mono);font-size:.92em}
[hidden]{display:none!important}
::selection{background:var(--teal-100);color:var(--ink)}

/* focus — never removed, always visible */
:focus-visible{outline:3px solid var(--ring);outline-offset:2px;border-radius:4px}
:focus:not(:focus-visible){outline:none}

.skip{position:absolute;left:var(--s-4);top:-100px;z-index:var(--z-toast);
  background:var(--surface);color:var(--fg);padding:var(--s-3) var(--s-5);
  border-radius:var(--r-sm);box-shadow:var(--sh-3);font-weight:600;
  transition:top var(--t) var(--ease)}
.skip:focus{top:var(--s-4)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ------------------------------------------------------------------ layout */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s-5)}
.wrap-wide{max-width:var(--wrap-wide)}
.wrap-text{max-width:var(--wrap-text)}
@media (min-width:768px){.wrap{padding-inline:var(--s-8)}}
@media (min-width:1280px){.wrap{padding-inline:var(--s-6)}}
section{position:relative}
.sec{padding-block:clamp(var(--s-16),8vw,var(--s-32))}
.sec-sm{padding-block:clamp(var(--s-10),5vw,var(--s-16))}
.sec-sub{background:var(--bg-sub)}
.sec-sunk{background:var(--bg-sunk)}
.sec-ink{background:var(--ink);color:#E6F5F3}
.sec-ink h1,.sec-ink h2,.sec-ink h3,.sec-ink h4{color:#fff}
.sec-ink a{color:var(--teal-lt)}
.grid{display:grid;gap:var(--s-6)}
.g-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.g-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.g-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,208px),1fr))}
.split{display:grid;gap:clamp(var(--s-8),4vw,var(--s-16));align-items:center}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr}.split-wide{grid-template-columns:1.25fr .85fr}}
.stack>*+*{margin-top:var(--s-4)}
.row{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}
.center{text-align:center}.center p{margin-inline:auto}
.eyebrow{font-family:var(--ff-head);font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--teal);
  margin:0 0 var(--s-3);display:flex;align-items:center;gap:var(--s-2)}
.center .eyebrow{justify-content:center}
.sec-ink .eyebrow{color:var(--teal-lt)}
.eyebrow::before{content:"";width:22px;height:2px;background:currentColor;border-radius:2px;opacity:.6;flex:none}
.lede{font-size:clamp(var(--fs-lg),1rem + .7vw,var(--fs-xl));line-height:var(--lh-snug);
  color:var(--fg-2);font-weight:400;letter-spacing:-.008em}
.muted{color:var(--fg-2)}.muted-2{color:var(--fg-3)}
.mono{font-family:var(--ff-mono);font-variant-numeric:tabular-nums}
.tnum{font-variant-numeric:tabular-nums}

/* ----------------------------------------------------------------- buttons */
.btn{
  --btn-bg:var(--teal-deep); --btn-fg:#fff; --btn-bd:var(--teal-deep);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:48px;padding:var(--s-3) var(--s-6);
  font-family:var(--ff-head);font-size:var(--fs-base);font-weight:600;letter-spacing:-.004em;
  background:var(--btn-bg);color:var(--btn-fg);border:1.5px solid var(--btn-bd);
  border-radius:var(--r-pill);text-decoration:none;cursor:pointer;
  box-shadow:var(--sh-1);
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),
             box-shadow var(--t) var(--ease),transform var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.btn:hover{--btn-bg:var(--teal);--btn-bd:var(--teal);box-shadow:var(--sh-3);transform:translateY(-1px);color:#fff}
.btn:active{transform:translateY(0) scale(.985);box-shadow:var(--sh-1)}
.btn-accent{--btn-bg:var(--amber);--btn-bd:var(--amber)}
.btn-accent:hover{--btn-bg:#D46A0E;--btn-bd:#D46A0E}
.btn-ghost{--btn-bg:transparent;--btn-fg:var(--teal-deep);--btn-bd:var(--border-2)}
.btn-ghost:hover{--btn-bg:var(--teal-50);--btn-fg:var(--teal-deep);--btn-bd:var(--teal)}
.btn-on-dark{--btn-bg:#fff;--btn-fg:var(--ink);--btn-bd:#fff}
.btn-on-dark:hover{--btn-bg:var(--teal-100);--btn-fg:var(--ink);--btn-bd:var(--teal-100)}
.btn-ghost-on-dark{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.42)}
.btn-ghost-on-dark:hover{--btn-bg:rgba(255,255,255,.12);--btn-fg:#fff;--btn-bd:#fff}
.btn-sm{min-height:44px;padding:var(--s-2) var(--s-4);font-size:var(--fs-sm)}
.btn-lg{min-height:56px;padding:var(--s-4) var(--s-8);font-size:var(--fs-lg)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none;box-shadow:none}
.btn svg{width:1.1em;height:1.1em;flex:none}
.btn-block{width:100%}
.btn .spin{width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;
  border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.link-arrow{display:inline-flex;align-items:center;gap:var(--s-2);font-family:var(--ff-head);
  font-weight:600;text-decoration:none;color:var(--teal-deep)}
.link-arrow svg{width:1.05em;height:1.05em;transition:transform var(--t) var(--ease)}
.link-arrow:hover svg{transform:translateX(4px)}
.sec-ink .link-arrow{color:var(--teal-lt)}

/* ------------------------------------------------------------------- cards */
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--s-6);box-shadow:var(--sh-1);position:relative;
  transition:box-shadow var(--t) var(--ease),transform var(--t) var(--ease),
             border-color var(--t) var(--ease);
}
.card-hover:hover,.card-hover:focus-within{box-shadow:var(--sh-3);transform:translateY(-3px);border-color:var(--border-2)}
.card-flat{box-shadow:none;background:var(--surface-2)}
.card h3{margin-bottom:var(--s-2)}
.card>p:last-child,.card>*:last-child{margin-bottom:0}
.card-link{text-decoration:none;color:inherit;display:block}
.card-link:hover{color:inherit}
.card-ico{width:46px;height:46px;border-radius:var(--r);display:grid;place-items:center;
  background:var(--teal-50);color:var(--teal-deep);margin-bottom:var(--s-4);flex:none}
.card-ico svg{width:24px;height:24px}
.card-ico-amber{background:var(--amber-50);color:#A9530A}
:root[data-theme="dark"] .card-ico-amber{color:var(--amber-lt)}

.pill{display:inline-flex;align-items:center;gap:var(--s-2);padding:5px var(--s-3);
  border-radius:var(--r-pill);font-family:var(--ff-head);font-size:var(--fs-xs);
  font-weight:600;letter-spacing:.02em;background:var(--teal-50);color:var(--teal-deep);
  border:1px solid var(--border);max-width:100%;text-wrap:pretty}
/* Deliberately NOT white-space:nowrap. A short pill still sits on one line because
   nothing forces a break until the text runs out of room — and when it does run out,
   wrapping inside the pill beats the alternative, which was a 356px status label
   shoving a 333px card 28px past a 375px viewport and widening the whole document. */
.pill-amber{background:var(--amber-50);color:#A9530A;border-color:color-mix(in srgb,var(--amber) 28%,transparent)}
.pill-danger{background:var(--danger-50);color:var(--danger);border-color:color-mix(in srgb,var(--danger) 28%,transparent)}
.pill-ok{background:var(--ok-50);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 28%,transparent)}
.pill-ink{background:var(--ink);color:#fff;border-color:var(--ink)}
:root[data-theme="dark"] .pill-amber{color:var(--amber-lt)}

/* evidence tier chips — used across research, products, protocols */
.tier{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-pill);
  font-family:var(--ff-head);font-size:var(--fs-xs);font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;border:1px solid;max-width:100%;text-wrap:pretty}
.tier::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.tier-1{background:var(--ok-50);color:#0B6B44;border-color:#9BD9BE}       /* approved */
.tier-2{background:#EFF6FF;color:#1D4ED8;border-color:#BFD7FE}            /* controlled trial, target species */
.tier-3{background:var(--amber-50);color:#96490A;border-color:#F3C88C}    /* early / other species */
.tier-4{background:var(--bg-sunk);color:var(--fg-2);border-color:var(--border-2)} /* preclinical only */
.tier-5{background:var(--danger-50);color:var(--danger);border-color:#F3B4B4}    /* no evidence */
:root[data-theme="dark"] .tier-1{background:#06231A;color:#34D399;border-color:#1C5540}
:root[data-theme="dark"] .tier-2{background:#0E1E3A;color:#93B4FD;border-color:#27417A}
:root[data-theme="dark"] .tier-3{background:#2A1C0C;color:var(--amber-lt);border-color:#5C3A12}
:root[data-theme="dark"] .tier-5{background:#2A1112;color:#F87171;border-color:#5C2020}

/* -------------------------------------------------------------- navigation */
.nav{position:sticky;top:0;z-index:var(--z-nav);background:color-mix(in srgb,var(--bg) 86%,transparent);
  border-bottom:1px solid transparent;transition:border-color var(--t) var(--ease),
  background var(--t) var(--ease),box-shadow var(--t) var(--ease)}
@supports (backdrop-filter:blur(1px)){.nav{backdrop-filter:saturate(1.6) blur(14px)}}
.nav.is-stuck{border-bottom-color:var(--border);box-shadow:var(--sh-1)}
/* transparent over a video hero, opaque once scrolled */
.nav.on-hero{background:transparent;border-bottom-color:transparent;box-shadow:none}
.nav.on-hero .nav-link,.nav.on-hero .nav-brand{color:#fff}
.nav.on-hero .nav-link:hover{color:#fff;background:rgba(255,255,255,.14)}
.nav.on-hero .nav-toggle{color:#fff}
.nav-in{display:flex;align-items:center;gap:var(--s-4);min-height:var(--nav-h)}
.nav-brand{display:flex;align-items:center;gap:var(--s-3);text-decoration:none;
  color:var(--fg);font-family:var(--ff-head);font-weight:700;flex:none}
.nav-brand img{height:34px;width:auto}
.nav-links{display:none;align-items:center;gap:2px;margin-left:auto;list-style:none;padding:0;margin-block:0}
@media (min-width:1060px){.nav-links{display:flex}}
.nav-link{display:inline-flex;align-items:center;gap:5px;padding:9px var(--s-3);border-radius:var(--r-pill);
  font-family:var(--ff-head);font-size:var(--fs-sm);font-weight:600;color:var(--fg-2);
  text-decoration:none;white-space:nowrap;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.nav-link:hover{background:var(--teal-50);color:var(--teal-deep)}
.nav-link[aria-current="page"]{color:var(--teal-deep);background:var(--teal-50)}
.nav-link[aria-current="page"]::after{content:"";position:absolute}
.nav-actions{display:flex;align-items:center;gap:var(--s-2);margin-left:auto}
@media (min-width:1060px){.nav-actions{margin-left:var(--s-3)}}
.nav-toggle{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--border);
  background:var(--surface);border-radius:var(--r-sm);color:var(--fg)}
@media (min-width:1060px){.nav-toggle{display:none}}
.nav-toggle svg{width:22px;height:22px}
.nav-cta{display:none;white-space:nowrap;flex:none}
@media (min-width:560px){.nav-cta{display:inline-flex}}
/* The wordmark is an <img>, so `color:#fff` on the parent cannot reach it —
   two images, swapped by the on-hero state, is the only correct fix. */
.nav-brand .logo-dark{display:none}
.nav.on-hero .nav-brand .logo-light{display:none}
.nav.on-hero .nav-brand .logo-dark{display:block}

/* dropdown — click/tap driven, not hover-only */
.nav-has-sub{position:relative}
.nav-sub{position:absolute;top:calc(100% + 8px);left:0;min-width:264px;background:var(--surface-raise);
  border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh-4);
  padding:var(--s-2);list-style:none;margin:0;
  opacity:0;visibility:hidden;transform:translateY(-6px) scale(.985);transform-origin:top left;
  transition:opacity var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),visibility var(--t-fast)}
.nav-has-sub[data-open="true"] .nav-sub{opacity:1;visibility:visible;transform:none}
.nav-sub a{display:block;padding:10px var(--s-3);border-radius:var(--r-sm);text-decoration:none;
  color:var(--fg);font-size:var(--fs-sm);font-family:var(--ff-head);font-weight:500}
.nav-sub a:hover{background:var(--teal-50);color:var(--teal-deep)}
.nav-sub .nav-sub-note{display:block;font-family:var(--ff-body);font-weight:400;
  font-size:var(--fs-xs);color:var(--fg-3);margin-top:1px}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:var(--z-overlay);display:grid;
  grid-template-columns:1fr min(86vw,400px);pointer-events:none}
.drawer[data-open="true"]{pointer-events:auto}
.drawer-scrim{background:rgba(6,21,18,.56);opacity:0;transition:opacity var(--t) var(--ease)}
.drawer[data-open="true"] .drawer-scrim{opacity:1}
.drawer-panel{background:var(--surface);border-left:1px solid var(--border);
  padding:var(--s-5);overflow-y:auto;transform:translateX(100%);
  transition:transform var(--t-slow) var(--ease);box-shadow:var(--sh-4)}
.drawer[data-open="true"] .drawer-panel{transform:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s-5)}
.drawer a{display:block;padding:var(--s-3) 0;border-bottom:1px solid var(--border);
  text-decoration:none;color:var(--fg);font-family:var(--ff-head);font-weight:600}
.drawer a:hover{color:var(--teal)}
.drawer-group{margin-top:var(--s-5)}
.drawer-group>span{display:block;font-size:var(--fs-xs);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-3);margin-bottom:var(--s-1)}
.drawer-group a{font-weight:500;font-size:var(--fs-sm);padding:10px 0}

/* language + theme switches */
.switch{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-pill);padding:3px;gap:2px}
.switch a,.switch button{display:inline-grid;place-items:center;min-width:38px;min-height:34px;
  padding:0 var(--s-2);border:0;background:transparent;border-radius:var(--r-pill);
  font-family:var(--ff-head);font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;
  color:var(--fg-2);text-decoration:none;transition:background var(--t-fast),color var(--t-fast)}
.switch a[aria-current="true"],.switch button[aria-pressed="true"]{background:var(--surface-raise);
  color:var(--teal-deep);box-shadow:var(--sh-1)}
.switch a:hover,.switch button:hover{color:var(--teal-deep)}
.nav.on-hero .switch{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3)}
.nav.on-hero .switch a,.nav.on-hero .switch button{color:rgba(255,255,255,.85)}
.nav.on-hero .switch a[aria-current="true"],.nav.on-hero .switch button[aria-pressed="true"]{
  background:rgba(255,255,255,.94);color:var(--ink)}
.theme-btn svg{width:17px;height:17px}
:root[data-theme="dark"] .ico-sun,.ico-moon{display:none}
:root[data-theme="dark"] .ico-moon{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ico-sun{display:none}
  :root:not([data-theme="light"]) .ico-moon{display:block}}

/* ---------------------------------------------------------- hero + video */
.hero{position:relative;isolation:isolate;display:grid;align-items:end;
  min-height:clamp(560px,86svh,940px);margin-top:calc(-1 * var(--nav-h));
  padding-top:calc(var(--nav-h) + var(--s-12));padding-bottom:clamp(var(--s-12),7vw,var(--s-24));
  color:#fff;overflow:hidden;background:var(--ink)}
.hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
/* Scrim is BANDED to the text zone, not a flat inset-0 wash — keeps the footage
   looking like footage instead of a grey sheet, while text stays >=4.5:1. */
.hero-scrim{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(to top,
      rgba(6,21,18,.93) 0%, rgba(6,21,18,.88) 16%, rgba(6,21,18,.74) 34%,
      rgba(6,21,18,.46) 52%, rgba(6,21,18,.20) 70%, rgba(6,21,18,.06) 86%, rgba(6,21,18,0) 100%),
    linear-gradient(to right, rgba(6,21,18,.52) 0%, rgba(6,21,18,.22) 46%, rgba(6,21,18,0) 78%);}
.hero-top-scrim{position:absolute;inset:0 0 auto;height:calc(var(--nav-h) + 44px);z-index:-1;
  pointer-events:none;background:linear-gradient(to bottom,rgba(6,21,18,.60),rgba(6,21,18,0))}
.hero h1{color:#fff;max-width:19ch;margin-bottom:var(--s-5);
  text-shadow:0 2px 26px rgba(6,21,18,.42)}
.hero .lede{color:rgba(255,255,255,.93);max-width:54ch;font-weight:400;
  text-shadow:0 1px 14px rgba(6,21,18,.5)}
.hero-eyebrow{color:#7FE6D8!important}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-8)}
.hero-badges{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);margin-top:var(--s-10);
  padding-top:var(--s-6);border-top:1px solid rgba(255,255,255,.2)}
.hero-badge{display:flex;align-items:center;gap:var(--s-2);font-size:var(--fs-sm);
  color:rgba(255,255,255,.9);font-family:var(--ff-head);font-weight:500}
.hero-badge svg{width:18px;height:18px;color:var(--teal-lt);flex:none}
.hero-scroll{position:absolute;left:50%;bottom:var(--s-5);translate:-50% 0;z-index:2;
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.36);color:#fff;background:rgba(255,255,255,.08)}
.hero-scroll svg{width:18px;height:18px;animation:nudge 2.1s var(--ease) infinite}
@keyframes nudge{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
.video-ctl{position:absolute;right:var(--s-5);bottom:var(--s-5);z-index:2;
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:rgba(6,21,18,.52);border:1px solid rgba(255,255,255,.3);color:#fff}
.video-ctl:hover{background:rgba(6,21,18,.76)}
.video-ctl svg{width:17px;height:17px}
.video-ctl .ico-pause{display:none}
.video-ctl[data-paused="true"] .ico-pause{display:block}
.video-ctl[data-paused="true"] .ico-play{display:none}

/* inline video / explainer player */
.vframe{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--ink);
  box-shadow:var(--sh-3);aspect-ratio:16/9}
.vframe video,.vframe img{width:100%;height:100%;object-fit:cover}
.vframe-play{position:absolute;inset:0;display:grid;place-items:center;border:0;
  background:linear-gradient(to top,rgba(6,21,18,.6),rgba(6,21,18,.12));color:#fff}
.vframe-play span{display:grid;place-items:center;width:74px;height:74px;border-radius:50%;
  background:rgba(255,255,255,.95);color:var(--ink);box-shadow:var(--sh-4);
  transition:transform var(--t) var(--ease-spring)}
.vframe-play:hover span{transform:scale(1.08)}
.vframe-play svg{width:28px;height:28px;margin-left:3px}
.vframe-cap{position:absolute;left:0;right:0;bottom:0;padding:var(--s-5);
  background:linear-gradient(to top,rgba(6,21,18,.88),rgba(6,21,18,0));color:#fff;
  font-family:var(--ff-head);font-weight:600;pointer-events:none}
.vframe[data-playing="true"] .vframe-play,.vframe[data-playing="true"] .vframe-cap{display:none}

/* ------------------------------------------------- reveal (fails VISIBLE) */
/* The hide rule is gated on .js, set by an inline <head> script. With JS off,
   broken, or throttled, content is simply visible — never a blank page. */
.js .reveal{opacity:0;transform:translateY(18px);
  transition:opacity var(--t-xslow) var(--ease),transform var(--t-xslow) var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal-scale{opacity:0;transform:scale(.97)}
.js .reveal-scale.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal,.js .reveal-scale{opacity:1!important;transform:none!important;transition:none}
  .hero-scroll svg,.spin{animation:none}
  *{scroll-behavior:auto!important}
}

/* Screenshot/debug escape hatch: backdrop-filter hangs some headless renderers. */
.nobf .nav,.nobf [style*="backdrop"]{backdrop-filter:none!important}

/* ------------------------------------------------------------------- forms */
.field{display:block;margin-bottom:var(--s-5)}
.field>label,.label{display:block;font-family:var(--ff-head);font-size:var(--fs-sm);
  font-weight:600;color:var(--fg);margin-bottom:6px}
.req{color:var(--danger);margin-left:2px}
.hint{display:block;font-size:var(--fs-sm);color:var(--fg-3);margin-top:5px;line-height:1.5}
.input,.select,.textarea{
  width:100%;min-height:48px;padding:var(--s-3) var(--s-4);
  background:var(--surface);color:var(--fg);
  border:1.5px solid var(--border-2);border-radius:var(--r-sm);
  font-size:var(--fs-base);
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),
             background var(--t-fast) var(--ease)}
.textarea{min-height:132px;resize:vertical;line-height:var(--lh-body);padding-top:var(--s-3)}
.select{appearance:none;padding-right:var(--s-10);cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233D6360' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right var(--s-4) center;background-size:17px}
.input:hover,.select:hover,.textarea:hover{border-color:var(--teal)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--teal);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 22%,transparent)}
.input[aria-invalid="true"],.select[aria-invalid="true"],.textarea[aria-invalid="true"]{
  border-color:var(--danger);background:var(--danger-50)}
.input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 20%,transparent)}
.err{display:none;align-items:center;gap:6px;margin-top:6px;font-size:var(--fs-sm);
  font-weight:600;color:var(--danger)}
.err[data-show="true"]{display:flex}
.err svg{width:15px;height:15px;flex:none}
.field-row{display:grid;gap:var(--s-4)}
@media (min-width:640px){.field-row{grid-template-columns:1fr 1fr}.field-row-3{grid-template-columns:repeat(3,1fr)}}
fieldset{border:1px solid var(--border);border-radius:var(--r);padding:var(--s-5);margin:0 0 var(--s-5)}
legend{font-family:var(--ff-head);font-weight:700;font-size:var(--fs-sm);padding-inline:var(--s-2);
  letter-spacing:.02em;text-transform:uppercase;color:var(--teal-deep)}

/* choice chips — used for pet conditions, poster filters, protocol filters */
.choices{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:0;padding:0;list-style:none}
.choice{position:relative}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice span{display:inline-flex;align-items:center;gap:6px;min-height:42px;
  padding:var(--s-2) var(--s-4);border:1.5px solid var(--border-2);border-radius:var(--r-pill);
  background:var(--surface);font-family:var(--ff-head);font-size:var(--fs-sm);font-weight:600;
  color:var(--fg-2);cursor:pointer;user-select:none;
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.choice span:hover{border-color:var(--teal);color:var(--teal-deep);background:var(--teal-50)}
.choice span:active{transform:scale(.97)}
.choice input:checked+span{background:var(--teal-deep);border-color:var(--teal-deep);color:#fff}
.choice input:focus-visible+span{outline:3px solid var(--ring);outline-offset:2px}
.choice input:checked+span::before{content:"";width:13px;height:13px;flex:none;
  background:currentColor;-webkit-mask:var(--check) center/contain no-repeat;mask:var(--check) center/contain no-repeat}
:root{--check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")}

.checkline{display:flex;gap:var(--s-3);align-items:flex-start;margin-bottom:var(--s-3)}
.checkline input[type=checkbox],.checkline input[type=radio]{width:20px;height:20px;flex:none;
  margin-top:2px;accent-color:var(--teal-deep);cursor:pointer}
.checkline label{font-size:var(--fs-sm);line-height:1.55;color:var(--fg-2);cursor:pointer}

/* form status banner */
.formmsg{display:none;gap:var(--s-3);align-items:flex-start;padding:var(--s-4) var(--s-5);
  border-radius:var(--r);margin-bottom:var(--s-5);font-size:var(--fs-sm);line-height:1.55;
  border:1px solid}
.formmsg[data-state]{display:flex}
.formmsg[data-state="ok"]{background:var(--ok-50);border-color:#9BD9BE;color:#0B6B44}
.formmsg[data-state="err"]{background:var(--danger-50);border-color:#F3B4B4;color:var(--danger)}
.formmsg[data-state="busy"]{background:var(--teal-50);border-color:var(--border-2);color:var(--teal-deep)}
.formmsg svg{width:19px;height:19px;flex:none;margin-top:1px}
:root[data-theme="dark"] .formmsg[data-state="ok"]{color:#34D399;border-color:#1C5540}

/* ------------------------------------------------------------------ tables */
.tablewrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r);
  background:var(--surface);-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);margin:0}
caption{text-align:left;padding:var(--s-4) var(--s-5);font-family:var(--ff-head);
  font-weight:700;color:var(--fg);border-bottom:1px solid var(--border)}
th,td{padding:var(--s-3) var(--s-4);text-align:left;border-bottom:1px solid var(--border);
  vertical-align:top;line-height:1.5}
thead th{background:var(--surface-2);font-family:var(--ff-head);font-weight:700;
  font-size:var(--fs-xs);letter-spacing:.07em;text-transform:uppercase;color:var(--fg-2);
  white-space:nowrap;position:sticky;top:0;z-index:1}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--ff-mono)}
.t-compare td:first-child,.t-compare th:first-child{font-weight:600;color:var(--fg)}

/* allowed / banned claim table */
.t-claims td{width:50%}
.t-claims .allow{background:var(--ok-50)}
.t-claims .ban{background:var(--danger-50)}
:root[data-theme="dark"] .t-claims .allow{background:#06231A}
:root[data-theme="dark"] .t-claims .ban{background:#2A1112}

/* ---------------------------------------------------------------- disclose */
.acc{border:1px solid var(--border);border-radius:var(--r);background:var(--surface);
  overflow:hidden;margin-bottom:var(--s-3)}
.acc summary{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4) var(--s-5);
  cursor:pointer;font-family:var(--ff-head);font-weight:600;list-style:none;
  transition:background var(--t-fast) var(--ease)}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{background:var(--surface-2)}
.acc summary::after{content:"";width:18px;height:18px;margin-left:auto;flex:none;
  background:currentColor;transition:transform var(--t) var(--ease);
  -webkit-mask:var(--chev) center/contain no-repeat;mask:var(--chev) center/contain no-repeat}
.acc[open] summary::after{transform:rotate(180deg)}
.acc-body{padding:0 var(--s-5) var(--s-5);border-top:1px solid var(--border);padding-top:var(--s-4)}
.acc-body>*:last-child{margin-bottom:0}
:root{--chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}

/* tabs */
.tabs{display:flex;gap:var(--s-1);border-bottom:1px solid var(--border);margin-bottom:var(--s-6);
  overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{position:relative;padding:var(--s-3) var(--s-4);border:0;background:transparent;
  font-family:var(--ff-head);font-size:var(--fs-sm);font-weight:600;color:var(--fg-2);
  white-space:nowrap;border-bottom:2.5px solid transparent;margin-bottom:-1px;
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.tab:hover{color:var(--teal-deep)}
.tab[aria-selected="true"]{color:var(--teal-deep);border-bottom-color:var(--teal)}
.tabpanel[hidden]{display:none}

/* ------------------------------------------------------------------- stats */
.stats{display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.stat{padding:var(--s-5);border-radius:var(--r);background:var(--surface-2);border:1px solid var(--border)}
.sec-ink .stat{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.stat-n{display:block;font-family:var(--ff-head);font-size:clamp(1.9rem,1.2rem + 2vw,2.7rem);
  font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--teal-deep);
  font-variant-numeric:tabular-nums;margin-bottom:6px}
.sec-ink .stat-n{color:var(--teal-lt)}
.stat-l{font-size:var(--fs-sm);color:var(--fg-2);line-height:1.45}
.sec-ink .stat-l{color:rgba(255,255,255,.78)}
.stat-src{display:block;font-size:var(--fs-xs);color:var(--fg-3);margin-top:var(--s-2)}

/* --------------------------------------------------------------- callouts */
.note{display:flex;gap:var(--s-4);padding:var(--s-5);border-radius:var(--r);
  background:var(--surface-2);border:1px solid var(--border);border-left:3px solid var(--teal);
  margin-bottom:var(--s-5)}
.note>svg{width:21px;height:21px;flex:none;color:var(--teal-deep);margin-top:2px}
.note-body>*:last-child{margin-bottom:0}
.note-body strong{display:block;font-family:var(--ff-head);margin-bottom:4px}
.note-amber{background:var(--amber-50);border-left-color:var(--amber)}
.note-amber>svg{color:#A9530A}
.note-danger{background:var(--danger-50);border-left-color:var(--danger)}
.note-danger>svg{color:var(--danger)}
.note-ok{background:var(--ok-50);border-left-color:var(--ok)}
.note-ok>svg{color:var(--ok)}
:root[data-theme="dark"] .note-amber>svg{color:var(--amber-lt)}

/* regulatory / claim disclaimer block — deliberately plain and unmissable */
.legalbox{border:1px solid var(--border-2);border-radius:var(--r);background:var(--bg-sunk);
  padding:var(--s-5);font-size:var(--fs-sm);line-height:1.6;color:var(--fg-2)}
.legalbox strong{color:var(--fg);font-family:var(--ff-head)}
.legalbox p:last-child{margin-bottom:0}
.rx{display:inline-flex;align-items:center;gap:6px;font-family:var(--ff-head);font-weight:700;
  font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;
  color:var(--danger);border:1.5px solid currentColor;border-radius:var(--r-sm);padding:3px 8px}

/* ------------------------------------------------------- product + protocol */
.prod{display:flex;flex-direction:column;height:100%}
.prod-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-3)}
.prod-vial{width:52px;height:64px;flex:none;border-radius:6px 6px 10px 10px;position:relative;
  background:linear-gradient(105deg,#E7F4F2 0%,#FFF 42%,#D9EBE9 100%);
  border:1px solid var(--border-2);overflow:hidden;box-shadow:var(--sh-1)}
.prod-vial::before{content:"";position:absolute;inset:auto 0 0;height:var(--fill,54%);
  background:var(--fillc,linear-gradient(to top,#BFE6E0,#E6F6F3))}
.prod-vial::after{content:"";position:absolute;inset:0 0 auto;height:11px;
  background:var(--cap,#0B5C57);border-radius:5px 5px 2px 2px}
.prod-vial[data-kind="pen"]{width:34px;border-radius:4px 4px 16px 16px}
.prod-vial[data-kind="nasal"]{width:44px;border-radius:4px 4px 8px 8px}
.prod-vial[data-kind="cell"]{--fillc:linear-gradient(to top,#9AD9CF,#D9F2EE)}
.prod-vial[data-kind="exo"]{--fillc:linear-gradient(to top,#F6C888,#FDEBD2);--cap:#C2650C}
.prod-name{font-family:var(--ff-head);font-weight:700;font-size:var(--fs-lg);margin:0 0 2px;
  letter-spacing:-.012em;line-height:1.25}
.prod-sub{font-size:var(--fs-sm);color:var(--fg-3);margin:0}
.prod-meta{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:var(--s-3) 0}
.prod-body{font-size:var(--fs-sm);line-height:1.62;color:var(--fg-2);margin-bottom:var(--s-4)}
.prod-foot{margin-top:auto;padding-top:var(--s-4);border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3)}
.prod-price{font-family:var(--ff-head);font-weight:800;font-size:var(--fs-lg);
  color:var(--fg);font-variant-numeric:tabular-nums}
.prod-price small{display:block;font-family:var(--ff-body);font-weight:400;font-size:var(--fs-xs);
  color:var(--fg-3);letter-spacing:0}
/* Clinic-only pricing must never render on a public page: gated server/build side,
   this is only the visual fallback if a gate is ever missed. */
.price-gated{font-size:var(--fs-sm);color:var(--fg-3);font-style:italic}

.proto-head{border-left:3px solid var(--teal);padding-left:var(--s-5);margin-bottom:var(--s-8)}
.proto-grid{display:grid;gap:var(--s-4)}
@media (min-width:860px){.proto-grid{grid-template-columns:minmax(0,1fr) 310px;align-items:start}}
.proto-side{position:sticky;top:calc(var(--nav-h) + var(--s-4));display:grid;gap:var(--s-4)}
.steps{counter-reset:st;list-style:none;padding:0;margin:0}
.steps>li{counter-increment:st;position:relative;padding-left:var(--s-12);padding-bottom:var(--s-6)}
.steps>li::before{content:counter(st);position:absolute;left:0;top:0;width:34px;height:34px;
  border-radius:50%;display:grid;place-items:center;background:var(--teal-deep);color:#fff;
  font-family:var(--ff-head);font-weight:700;font-size:var(--fs-sm)}
.steps>li::after{content:"";position:absolute;left:17px;top:38px;bottom:0;width:2px;
  background:var(--border);}
.steps>li:last-child{padding-bottom:0}
.steps>li:last-child::after{display:none}
.steps h4{margin-bottom:6px}
.steps p,.steps ul{font-size:var(--fs-sm);color:var(--fg-2);margin-bottom:var(--s-2)}

.dl-spec{display:grid;grid-template-columns:auto 1fr;gap:var(--s-2) var(--s-5);margin:0;font-size:var(--fs-sm)}
.dl-spec dt{font-family:var(--ff-head);font-weight:600;color:var(--fg-3);white-space:nowrap}
.dl-spec dd{margin:0;color:var(--fg)}

/* citations */
.cite{font-size:var(--fs-sm);color:var(--fg-2);line-height:1.55}
.cite-list{list-style:none;padding:0;counter-reset:c}
.cite-list li{counter-increment:c;position:relative;padding-left:var(--s-8);margin-bottom:var(--s-3);
  font-size:var(--fs-sm);line-height:1.55;color:var(--fg-2)}
.cite-list li::before{content:"[" counter(c) "]";position:absolute;left:0;top:0;
  font-family:var(--ff-mono);font-size:var(--fs-xs);color:var(--teal);font-weight:500}
sup.ref{font-family:var(--ff-mono);font-size:.68em;vertical-align:super;line-height:0}
sup.ref a{text-decoration:none;padding:0 1px}

/* --------------------------------------------------------------- evidence bar */
.evbar{display:grid;gap:var(--s-2);margin:var(--s-2) 0}
.evbar-row{display:grid;grid-template-columns:minmax(88px,auto) 1fr auto;gap:var(--s-3);
  align-items:center;font-size:var(--fs-sm)}
.evbar-track{height:9px;border-radius:var(--r-pill);background:var(--bg-sunk);overflow:hidden}
.evbar-fill{height:100%;border-radius:var(--r-pill);background:var(--teal);
  width:var(--w,0%);transition:width 1s var(--ease)}
.evbar-fill[data-tone="amber"]{background:var(--amber)}
.evbar-fill[data-tone="grey"]{background:var(--fg-3)}
.evbar-v{font-family:var(--ff-mono);font-size:var(--fs-xs);color:var(--fg-2);white-space:nowrap}

/* ------------------------------------------------------------------ posters */
.poster-grid{display:grid;gap:var(--s-6);grid-template-columns:repeat(auto-fill,minmax(min(100%,272px),1fr))}
.poster{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--sh-1);display:flex;flex-direction:column;
  transition:box-shadow var(--t) var(--ease),transform var(--t) var(--ease)}
.poster:hover{box-shadow:var(--sh-3);transform:translateY(-3px)}
.poster-thumb{position:relative;background:var(--bg-sunk);aspect-ratio:1/1.4142;overflow:hidden}
.poster-thumb svg,.poster-thumb img{width:100%;height:100%;object-fit:contain;display:block}
.poster-meta{padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-2);flex:1}
.poster-meta h3{font-size:var(--fs-base);margin:0}
.poster-acts{margin-top:auto;display:flex;gap:var(--s-2);flex-wrap:wrap}
/* the editable clinic-name slot */
.clinic-slot{fill:var(--slot-fill,#0B5C57)}
.slot-note{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-xs);
  font-family:var(--ff-head);font-weight:600;color:var(--amber);letter-spacing:.02em}

/* ------------------------------------------------------------- portal chrome */
/* minmax(0,1fr), not the implicit `auto`. An auto-sized grid column takes the
   max-content width of its widest item, so one wide child inside portal-main was
   resolving the single mobile column to 1112px and dragging the sidebar — and the
   document — out with it. Pinning the column to the container makes overflow the
   inner element's problem to solve, which is where it can actually be scrolled. */
.portal{display:grid;grid-template-columns:minmax(0,1fr);min-height:calc(100svh - var(--nav-h))}
@media (min-width:960px){.portal{grid-template-columns:252px minmax(0,1fr)}}
.portal-side{background:var(--surface-2);border-right:1px solid var(--border);padding:var(--s-5)}
.portal-side h2{font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-3);margin-bottom:var(--s-3)}
.portal-nav{list-style:none;padding:0;margin:0 0 var(--s-8)}
.portal-nav a{display:flex;align-items:center;gap:var(--s-3);padding:11px var(--s-3);min-height:44px;
  border-radius:var(--r-sm);text-decoration:none;color:var(--fg-2);font-family:var(--ff-head);
  font-size:var(--fs-sm);font-weight:600;transition:background var(--t-fast),color var(--t-fast)}
.portal-nav a:hover{background:var(--teal-50);color:var(--teal-deep)}
.portal-nav a[aria-current="page"]{background:var(--teal-deep);color:#fff}
.portal-nav svg{width:18px;height:18px;flex:none}
.portal-main{padding:clamp(var(--s-5),3vw,var(--s-10))}
.portal-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4);
  padding-bottom:var(--s-5);margin-bottom:var(--s-6);border-bottom:1px solid var(--border)}
.portal-bar h1{margin:0;font-size:var(--fs-2xl)}
.portal-bar .row{margin-left:auto}
.wl-brand{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4);
  background:var(--surface);border:1px dashed var(--border-2);border-radius:var(--r);margin-bottom:var(--s-6)}
.wl-logo{width:46px;height:46px;border-radius:10px;display:grid;place-items:center;flex:none;
  background:var(--wl-color,var(--teal-deep));color:#fff;font-family:var(--ff-head);font-weight:800}

/* cart / order lines */
.lines{list-style:none;padding:0;margin:0}
.lines li{display:grid;grid-template-columns:1fr auto auto;gap:var(--s-4);align-items:center;
  padding:var(--s-3) 0;border-bottom:1px solid var(--border);font-size:var(--fs-sm)}
.lines li:last-child{border-bottom:0}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--border-2);border-radius:var(--r-pill);overflow:hidden}
.qty button{width:34px;height:38px;border:0;background:var(--surface);color:var(--fg);font-weight:700}
.qty button:hover{background:var(--teal-50);color:var(--teal-deep)}
.qty input{width:44px;height:38px;border:0;text-align:center;background:var(--surface);
  font-variant-numeric:tabular-nums;font-weight:600;-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.totals{display:grid;gap:var(--s-2);padding-top:var(--s-4);border-top:2px solid var(--border-2);
  font-size:var(--fs-sm)}
.totals div{display:flex;justify-content:space-between;gap:var(--s-4)}
.totals .grand{font-family:var(--ff-head);font-weight:800;font-size:var(--fs-lg);color:var(--fg);
  padding-top:var(--s-2);border-top:1px solid var(--border)}

/* ----------------------------------------------------------------- qr / tech */
.qr-card{display:grid;gap:var(--s-5);align-items:center;padding:var(--s-6);
  border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--sh-1)}
@media (min-width:640px){.qr-card{grid-template-columns:auto 1fr}}
.qr-box{width:156px;height:156px;padding:var(--s-3);background:#fff;border-radius:var(--r);
  border:1px solid var(--border);box-shadow:var(--sh-1)}
.qr-box svg{width:100%;height:100%;shape-rendering:crispEdges}
.flow{display:grid;gap:var(--s-4);counter-reset:f}
@media (min-width:900px){.flow-4{grid-template-columns:repeat(4,1fr)}.flow-3{grid-template-columns:repeat(3,1fr)}}
.flow-step{position:relative;padding:var(--s-5);border-radius:var(--r);background:var(--surface);
  border:1px solid var(--border);counter-increment:f}
.flow-step::before{content:counter(f);position:absolute;top:calc(-1 * var(--s-3));left:var(--s-5);
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--amber);color:#fff;font-family:var(--ff-head);font-weight:800;font-size:var(--fs-sm);
  box-shadow:var(--sh-2)}
.flow-step h4{margin:var(--s-3) 0 var(--s-2)}
.flow-step p{font-size:var(--fs-sm);color:var(--fg-2);margin:0}
@media (min-width:900px){
  .flow-4>.flow-step:not(:last-child)::after,.flow-3>.flow-step:not(:last-child)::after{
    content:"";position:absolute;top:50%;right:calc(-1 * var(--s-4) - 1px);width:var(--s-4);
    height:2px;background:var(--border-2)}
}

/* ------------------------------------------------------------------- footer */
.foot{background:var(--ink);color:rgba(255,255,255,.76);padding-block:var(--s-16) var(--s-8);
  font-size:var(--fs-sm)}
.foot a{color:rgba(255,255,255,.76);text-decoration:none}
.foot a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.foot-top{display:grid;gap:var(--s-10);padding-bottom:var(--s-10);
  border-bottom:1px solid rgba(255,255,255,.14)}
@media (min-width:760px){.foot-top{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.foot h3{color:#fff;font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:var(--s-4);font-weight:700}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.foot-brand img{height:34px;margin-bottom:var(--s-4)}
.foot-brand p{color:rgba(255,255,255,.66);max-width:34ch;font-size:var(--fs-sm)}
.foot-offices{display:grid;gap:var(--s-5);margin-top:var(--s-6)}
@media (min-width:520px){.foot-offices{grid-template-columns:1fr 1fr}}
.office{padding:var(--s-4);border-radius:var(--r);background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12)}
.office strong{display:flex;align-items:center;gap:var(--s-2);color:#fff;
  font-family:var(--ff-head);margin-bottom:6px}
.office strong svg{width:16px;height:16px;color:var(--teal-lt)}
.office span{display:block;color:rgba(255,255,255,.66);line-height:1.5;font-size:var(--fs-sm)}
.foot-bot{display:flex;flex-wrap:wrap;gap:var(--s-4);align-items:center;
  padding-top:var(--s-6);font-size:var(--fs-xs);color:rgba(255,255,255,.56)}
.foot-bot nav{display:flex;flex-wrap:wrap;gap:var(--s-4);margin-left:auto}
.foot-legal{margin-top:var(--s-8);padding:var(--s-5);border-radius:var(--r);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  font-size:var(--fs-xs);line-height:1.62;color:rgba(255,255,255,.66)}
.foot-legal strong{color:#fff}
.foot-legal p:last-child{margin-bottom:0}

/* ----------------------------------------------------------------- cta band */
.cta{position:relative;isolation:isolate;overflow:hidden;background:var(--teal-deep);color:#fff;
  padding-block:clamp(var(--s-12),6vw,var(--s-24))}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background:radial-gradient(ellipse 80% 130% at 12% 0%,rgba(22,184,166,.55),transparent 62%),
             radial-gradient(ellipse 70% 120% at 92% 108%,rgba(234,122,24,.42),transparent 60%)}
.cta h2{color:#fff;max-width:24ch}
.cta p{color:rgba(255,255,255,.9);max-width:56ch}
.cta-split{display:grid;gap:var(--s-8);align-items:center}
@media (min-width:880px){.cta-split{grid-template-columns:1.35fr auto}}

/* two-audience selector on the landing page */
.forks{display:grid;gap:var(--s-5)}
@media (min-width:820px){.forks{grid-template-columns:1fr 1fr}}
.fork{position:relative;display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-8);
  border-radius:var(--r-lg);text-decoration:none;color:inherit;overflow:hidden;
  border:1.5px solid var(--border);background:var(--surface);box-shadow:var(--sh-1);
  transition:box-shadow var(--t) var(--ease),transform var(--t) var(--ease),border-color var(--t) var(--ease)}
.fork:hover{box-shadow:var(--sh-4);transform:translateY(-4px);border-color:var(--teal);color:inherit}
.fork::after{content:"";position:absolute;inset:auto 0 0;height:4px;
  background:linear-gradient(90deg,var(--teal),var(--teal-lt));
  transform:scaleX(0);transform-origin:left;transition:transform var(--t-slow) var(--ease)}
.fork:hover::after{transform:scaleX(1)}
.fork-owner::after{background:linear-gradient(90deg,var(--amber),var(--amber-lt))}
.fork h3{font-size:var(--fs-2xl);margin:0}
.fork p{color:var(--fg-2);margin:0;font-size:var(--fs-base)}
.fork ul{list-style:none;padding:0;margin:var(--s-2) 0 0;display:grid;gap:8px;font-size:var(--fs-sm)}
.fork li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-2);align-items:start;color:var(--fg-2);overflow-wrap:anywhere}
.fork li svg{width:16px;height:16px;color:var(--teal);flex:none;margin-top:3px}
.fork-owner li svg{color:var(--amber)}
.fork .link-arrow{margin-top:auto;padding-top:var(--s-4)}

/* logo strip / trust row */
.strip{display:flex;flex-wrap:wrap;gap:var(--s-4) var(--s-8);align-items:center;justify-content:center}
.strip-item{display:flex;align-items:center;gap:var(--s-2);font-family:var(--ff-head);
  font-size:var(--fs-sm);font-weight:600;color:var(--fg-3)}
.strip-item svg{width:19px;height:19px;color:var(--teal);flex:none}

/* pet profile result panel */
.match{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);
  box-shadow:var(--sh-2);overflow:hidden}
.match-head{padding:var(--s-5) var(--s-6);background:var(--teal-deep);color:#fff;
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3)}
.match-head h3{color:#fff;margin:0;font-size:var(--fs-lg)}
.match-head .pill{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.28)}
.match-body{padding:var(--s-6);display:grid;gap:var(--s-5)}
.match-empty{padding:var(--s-10) var(--s-6);text-align:center;color:var(--fg-3)}
.match-empty svg{width:46px;height:46px;margin:0 auto var(--s-4);color:var(--border-2)}

/* map / offices */
.mapcard{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);
  background:var(--surface);box-shadow:var(--sh-1)}
.mapcard-art{aspect-ratio:16/10;background:var(--bg-sunk);position:relative;overflow:hidden}
.mapcard-art svg{width:100%;height:100%}
.mapcard-body{padding:var(--s-5)}

/* utilities */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.mt-4{margin-top:var(--s-4)}.mt-6{margin-top:var(--s-6)}.mt-8{margin-top:var(--s-8)}
.mt-10{margin-top:var(--s-10)}.mt-12{margin-top:var(--s-12)}
.mb-4{margin-bottom:var(--s-4)}.mb-6{margin-bottom:var(--s-6)}.mb-8{margin-bottom:var(--s-8)}
.mb-10{margin-bottom:var(--s-10)}.mb-12{margin-bottom:var(--s-12)}
.full{width:100%}.nowrap{white-space:nowrap}
.hide{display:none}
@media (max-width:639px){.sm-hide{display:none}}
@media (min-width:640px){.sm-only{display:none}}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.listreset{list-style:none;padding:0;margin:0}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:10px}
/* min-width:0 is load-bearing, not tidy-up. A grid item's automatic minimum size
   is its min-content width, and min-content here is the icon plus the longest
   unbreakable run of text. "acetaminophen/paracetamol" is one such run — a slash
   is not a break opportunity — and at 218px it resolved this list's column to
   376px inside a 285px card, which pushed the FIP protocol 46px past the
   viewport. break-word is the second half: it lets a token that still cannot fit
   break rather than overflow on a 320px screen. */
/* grid, not flex, so the text sits in a real minmax(0,1fr) cell. As a flex
   container the text was an anonymous flex item whose automatic minimum size is
   its longest word — and protocol prose carries bare DOI URLs, one of which
   measured 336px. `anywhere` rather than `break-word` because only `anywhere`
   also shrinks min-content, which is the number that was doing the damage. */
.ticks li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-3);align-items:start;
  font-size:var(--fs-base);color:var(--fg-2);min-width:0;overflow-wrap:anywhere}
.ticks li>svg{width:18px;height:18px;color:var(--teal);flex:none;margin-top:5px}
.ticks-amber li>svg{color:var(--amber)}
.sec-ink .ticks li{color:rgba(255,255,255,.82)}
.sec-ink .ticks li>svg{color:var(--teal-lt)}

/* print — posters and protocols must print cleanly */
@media print{
  .nav,.drawer,.foot,.hero-scroll,.video-ctl,.skip,.no-print{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .sec{padding-block:12pt}
  .card,.note,.legalbox{box-shadow:none;border:1px solid #999;break-inside:avoid}
  a{color:#000;text-decoration:underline}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#555}
  .js .reveal,.js .reveal-scale{opacity:1!important;transform:none!important}
  h1,h2,h3{break-after:avoid}
  .steps>li{break-inside:avoid}
}

/* ===================================================== corrections pass 1 */

/* 1. CONTRAST. `.lede` carries --fg-2, which is a dark teal — unreadable on an
   ink band. .sec-ink sets a light colour on the section but cannot reach a
   child with its own explicit colour, so it must be overridden here. */
.sec-ink .lede,.cta .lede{color:rgba(255,255,255,.90)}
.sec-ink .muted,.sec-ink .muted-2,.cta .muted{color:rgba(255,255,255,.74)}
.sec-ink .prod-sub,.sec-ink .cite,.sec-ink .hint{color:rgba(255,255,255,.74)}
.sec-ink .stat-src{color:rgba(255,255,255,.62)}
.sec-ink p{color:rgba(255,255,255,.88)}
.sec-ink .eyebrow{color:var(--teal-lt)}

/* 2. Inner-page hero band: a title block, not a full-height section. */
.sec-band{padding-block:clamp(var(--s-10),5vw,var(--s-16)) clamp(var(--s-8),4vw,var(--s-12))}
.sec-band h1{margin-bottom:var(--s-4)}
.sec-band+.sec{padding-top:clamp(var(--s-10),5vw,var(--s-16))}

/* 3. MOBILE NAV OVERFLOW — the real bug behind clipped pages at 390px.
   The 210px wordmark plus two switches plus the toggle exceeded the viewport,
   which widened the document and clipped every section below it. */
.nav-in{min-width:0}
.nav-brand{min-width:0}
.nav-brand img{max-width:100%}
@media (max-width:620px){
  .nav-in{gap:var(--s-2)}
  .nav-brand img{height:28px}
  .nav-actions{gap:6px}
  .switch a,.switch button{min-width:32px;min-height:32px}
}
@media (max-width:440px){
  .theme-switch{display:none}          /* the OS setting still drives the theme */
  .nav-brand img{height:26px}
}

/* 4. Nothing may exceed the viewport. Belt and braces for long tokens:
   PMIDs, DOIs, SKU codes and URLs in citation text. */
.cite,.cite-list li,.dl-spec dd,.prod-sub{overflow-wrap:anywhere}
/* Protocol prose quotes DOIs and PMIDs inline, and a bare DOI is one unbreakable
   token up to ~355px wide. Enumerating the classes that happen to contain one
   was always going to miss some — at 320px it missed eight protocol pages — so
   every text container gets the break opportunity instead. `anywhere` rather
   than `break-word` so the same token also stops inflating min-content sizing
   when the container is a grid or flex item. */
p,li,dd,dt,td,th,figcaption,blockquote,summary,.lede{overflow-wrap:anywhere}
/* Headings get hyphenation rather than a raw break. Spanish clinical titles are
   the reason: "Gingivoestomatitis" is one 281px word at h1 size and does not fit
   a 257px column on a 320px phone. Every page carries a lang attribute, so the
   browser hyphenates it correctly; break-word only catches what it cannot. */
h1,h2,h3,h4{hyphens:auto;overflow-wrap:break-word}
.mono{overflow-wrap:anywhere}
.note-body,.legalbox{min-width:0}
.card,.note,.stat,.poster,.flow-step{min-width:0}
.split>*,.grid>*{min-width:0}

/* tier 6 — tested and judged inappropriate. Distinct from tier 5 ("we found
   nothing"): saying "no evidence located" about a use that was actually studied
   and rejected is a factually different, and weaker, statement. */
.tier-6{background:var(--danger-50);color:var(--danger);border-color:#F3B4B4}
:root[data-theme="dark"] .tier-6{background:#2A1112;color:#F87171;border-color:#5C2020}
/* untranslated-region marker: better to say so than to print English under a Spanish heading */
.untranslated{display:block;font-size:var(--fs-xs);color:var(--fg-3);font-style:italic;
  border-left:2px solid var(--border-2);padding-left:var(--s-3);margin-bottom:var(--s-3)}

/* ================================================================= touch sizing
   Measured at 375x812, not guessed. Every control below came back under the 44px
   minimum on a real mobile viewport. Two of them — the language switch and the
   brand — cannot simply grow, because the nav bar is already the tightest row on
   the page and enlarging them re-creates the overflow that section 3 above fixed.
   So those two get their hit area extended with a pseudo-element instead: the
   painted size stays, the tappable size reaches 44px. Scoped to coarse pointers
   so a mouse-driven layout is not padded out for no reason. */
@media (pointer:coarse){
  .nav-brand{min-height:44px}

  /* Visually 32-34px, tappable 44px. The ::after is centred on the control and
     sits above it; the switch itself is the positioning context. */
  .switch a,.switch button{position:relative}
  .switch a::after,.switch button::after{content:"";position:absolute;
    left:50%;top:50%;translate:-50% -50%;width:100%;height:44px;min-width:44px}

  /* Standalone call-to-action links. Inline links inside a sentence are exempt —
     they are read, not aimed at — so this targets the block-level ones only. */
  .link-arrow{min-height:44px}

  /* Footer lists: 20px links 10px apart gave a 30px pitch. Padding the links
     rather than the gap keeps the visual rhythm and makes each target 44px. */
  .foot ul{gap:2px}
  .foot ul a{display:inline-flex;align-items:center;min-height:44px}

  /* Accordion summaries are the main way protocols and evidence blocks open. */
  summary{min-height:44px;display:flex;align-items:center}
}

/* Captions and citation lines sat at 12px. That is the floor of legibility on a
   phone held at arm's length, and this site asks people to actually read its
   citations, so they get a point back on small screens. */
@media (max-width:620px){
  :root{--fs-xs:.8125rem}
}

/* The footer prints its legal links twice — once in the Company column, once in
   the bottom bar. The column copy was covered by `.foot ul a`; the bottom-bar
   copy is a bare <nav> and was not. */
@media (pointer:coarse){
  .foot-bot nav a{display:inline-flex;align-items:center;min-height:44px}

  /* A 20px checkbox is the visual language this form wants, so the box keeps its
     size and the label carries the target: `for=` already forwards the tap, so
     making the whole row 44px tall gives a finger somewhere to land. */
  .checkline{align-items:center;min-height:44px}
  .checkline input[type=checkbox],.checkline input[type=radio]{width:24px;height:24px}

  /* Range tracks are 16px of paint and were 16px of target. The thumb is what
     gets dragged, so it grows; the input gets vertical padding so the whole
     control is reachable without hitting the label above it. */
  input[type=range]{min-height:44px;padding-block:var(--s-2)}
  input[type=range]::-webkit-slider-thumb{width:26px;height:26px}
  input[type=range]::-moz-range-thumb{width:26px;height:26px}
}

/* ============================================ scroll-linked motion
   Everything here is driven by CSS scroll timelines, so it runs on the
   compositor, needs no JavaScript, and costs nothing on browsers that do not
   support it. Two rules govern the whole block:

   1. TRANSFORM AND COLOUR ONLY — never opacity, never visibility. A scroll
      timeline that never advances (a hidden tab, a UA that half-supports the
      property, a container that turns out not to scroll) would otherwise leave
      content stuck at its from-state and invisible. That failure mode has bitten
      this codebase before. Animate only properties whose from-state is still a
      readable page.
   2. Reduced motion turns all of it off, not down.

   The whole block is inside @supports, so a browser without scroll timelines
   simply renders the static layout it already had. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* Hero footage drifts slower than the page. `scroll()` on the root gives a
       true parallax rather than an entry animation, and the 12% travel stays
       inside .hero's overflow:hidden so no edge is ever exposed. */
    .hero-media{
      animation:hero-drift linear both;
      animation-timeline:scroll(root block);
      animation-range:0 100svh;
      will-change:transform;
    }
    @keyframes hero-drift{to{transform:translate3d(0,12%,0) scale(1.06)}}

    /* The nav grows a read-progress rule. It is the clearest "the page is
       responding to me" signal available for the cost of one pseudo-element. */
    .nav::after{
      content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;
      transform-origin:0 50%;transform:scaleX(0);
      background:linear-gradient(90deg,var(--teal),var(--accent,var(--teal-lt)));
      animation:read-progress linear both;
      animation-timeline:scroll(root block);
    }
    @keyframes read-progress{to{transform:scaleX(1)}}

    /* Cards and stats lift as they cross into view and settle at centre. The
       `view()` range means the motion tracks the scroll position rather than
       firing once, so a slow scroll reads as the page flowing with the finger. */
    .card.reveal,.stat.reveal,.vframe.reveal,.fork.reveal{
      animation:rise-settle linear both;
      animation-timeline:view(block);
      animation-range:entry 4% cover 34%;
    }
    @keyframes rise-settle{from{transform:translate3d(0,26px,0) scale(.985)}
                             to{transform:none}}

    /* Section headings ease up a little later than their content, which is what
       makes a long evidence page feel paced instead of uniform. */
    .sec>.wrap>h2,.sec>.wrap>.lede{
      animation:head-rise linear both;
      animation-timeline:view(block);
      animation-range:entry 0% cover 26%;
    }
    @keyframes head-rise{from{transform:translate3d(0,16px,0)}to{transform:none}}

    /* Poster thumbnails and hero imagery breathe very slightly across their own
       view range — a few pixels, enough to register as alive, not enough to
       compete with the text beside them. */
    .poster img,.vframe img,.vframe video{
      animation:slow-push linear both;
      animation-timeline:view(block);
      animation-range:cover 0% cover 100%;
    }
    @keyframes slow-push{from{transform:scale(1.045)}to{transform:scale(1)}}
  }
}

/* ---------------------------------------------------------------- photo block
   Intrinsic ratio comes from a custom property so a caller can hand in 3/2 or
   4/5 without a new class, and the box is reserved before the file arrives —
   this host is fast but a phone on mobile data is not, and a late image that
   pushes the text down is a worse experience than a slightly emptier one. */
.photo{margin:0;border-radius:var(--r-lg);overflow:hidden;background:var(--bg-sunk);
  border:1px solid var(--border);box-shadow:var(--sh-1)}
.photo picture{display:block}
.photo img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:var(--photo-ratio,16/9)}
.photo figcaption{padding:var(--s-3) var(--s-4);font-size:var(--fs-xs);line-height:1.5;
  color:var(--fg-3);background:var(--surface);border-top:1px solid var(--border)}
.sec-ink .photo figcaption{background:rgba(255,255,255,.06);color:rgba(255,255,255,.72);
  border-top-color:rgba(255,255,255,.14)}
/* a section that sits tight under the one above it — used where a photo follows
   a hero band and should read as part of it rather than as a new chapter */
.sec-tight{padding-top:clamp(var(--s-8),3vw,var(--s-12));padding-bottom:0}

/* ============================================== immersive media rows
   One media column, one text column, alternating sides down a page. The text
   column is minmax(0,1fr) and never auto: a bare DOI inside it would otherwise
   size the column to its own unbreakable width and take the viewport with it. */
.mediaband{display:grid;gap:var(--s-8);align-items:center;margin-block:clamp(var(--s-10),5vw,var(--s-16))}
@media (min-width:900px){
  .mediaband{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(var(--s-8),4vw,var(--s-14))}
  .mediaband-flip .mediaband-media{order:2}
}
.mediaband-media{min-width:0}
.mediaband-body{min-width:0}
.mediaband-inner{max-width:52ch}
.mediaband h2,.mediaband h3{margin-top:0}
.mediaband .photo,.mediaband .vframe{box-shadow:var(--sh-3)}

/* Full-bleed band: media spans the viewport with text laid over it. Kept to a
   fixed min-height rather than a viewport unit so mobile browser chrome cannot
   make it jump, and the scrim is banded to the text zone so the photograph still
   reads as a photograph. */
/* Layered with POSITIVE z-index only. The first cut put the picture at z-index:-2
   over an --ink background and the photograph never appeared on screen: a negative
   z-index child paints behind its own stacking-context root's background, so the
   band rendered as a solid dark rectangle with the caption on it. Everything here
   now stacks upward from the background — picture, scrim, text — which needs no
   reasoning about painting order to stay correct. */
.fullbleed{position:relative;display:grid;align-items:end;
  min-height:clamp(340px,52vw,560px);overflow:hidden;color:#fff;background:var(--ink)}
.fullbleed>picture,.fullbleed>video{position:absolute;inset:0;z-index:0;display:block}
.fullbleed img,.fullbleed video{width:100%;height:100%;object-fit:cover}
.fullbleed::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(6,21,18,.90) 0%,rgba(6,21,18,.72) 26%,
    rgba(6,21,18,.36) 54%,rgba(6,21,18,.08) 80%,rgba(6,21,18,0) 100%)}
.fullbleed .wrap{position:relative;z-index:2;padding-block:clamp(var(--s-8),5vw,var(--s-14))}
.fullbleed h2{color:#fff;margin-bottom:var(--s-3);text-shadow:0 2px 22px rgba(6,21,18,.45)}
.fullbleed p{color:rgba(255,255,255,.92);max-width:56ch;margin-bottom:0;
  text-shadow:0 1px 12px rgba(6,21,18,.5)}

/* A photo used as a section's quiet backdrop rather than its subject. */
.photo-plain{border:0;box-shadow:none;background:transparent;border-radius:var(--r-lg)}