/* ============================================================
   RediCell Biologics — design system
   Trust & Authority. Signature motif: the logo's parallel tracks.
   ============================================================ */

:root{
  /* Boundary of an interactive control — must clear 3:1 (WCAG 1.4.11). #7C8BA1 = 3.46:1. */
  --field-line:#7C8BA1;

  --red:#C8102E; --red-dark:#A00D25; --red-tint:#FDF2F4;
  --s950:#080F1C; --s900:#0F172A; --s850:#16213A; --s800:#1E293B;
  --s700:#334155; --s600:#475569; --s500:#64748B; --s400:#94A3B8;
  --s300:#CBD5E1; --s200:#E2E8F0; --s100:#F1F5F9; --s50:#F8FAFC;
  --white:#fff;
  --ink:var(--s900); --muted:var(--s600); --line:var(--s200);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --display:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --wrap:1200px; --gut:24px;
  --r:10px; --r-lg:16px;
  --t:200ms cubic-bezier(.4,0,.2,1);
  --shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px -12px rgba(15,23,42,.12);
  --shadow-lg:0 2px 4px rgba(15,23,42,.04),0 24px 48px -20px rgba(15,23,42,.22);
}

*,*::before,*::after{box-sizing:border-box}
/* [hidden] must beat component display rules (e.g. .btn{display:inline-flex}) */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:150px}
body{
  margin:0;font-family:var(--body);font-size:16px;line-height:1.65;
  color:var(--ink);background:var(--white);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:"cv05" 1,"ss01" 1;
  overflow-x:hidden;
}
img,video,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--display);margin:0;line-height:1.12;letter-spacing:-.022em;font-weight:700}
p{margin:0}
::selection{background:var(--red);color:#fff}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap-wide{max-width:1440px;margin-inline:auto;padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* skip link */
.skip{position:absolute;left:16px;top:-60px;z-index:200;background:var(--s900);color:#fff;
  padding:12px 18px;border-radius:0 0 var(--r) var(--r);font-weight:600;transition:top var(--t)}
.skip:focus{top:0}

/* ---------- signature: the track mark ---------- */
.eyebrow{
  display:flex;align-items:center;gap:14px;
  font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--s500);margin-bottom:20px;
}
.eyebrow::before{
  content:"";width:30px;height:10px;flex:none;border-radius:1px;
  background:repeating-linear-gradient(to bottom,var(--red) 0 2px,transparent 2px 4px);
}
.eyebrow.on-dark{color:var(--s400)}

/* ---------- type ---------- */
.h-xl{font-size:clamp(2.6rem,1.4rem + 3.6vw,4.6rem);letter-spacing:-.032em;font-weight:800}
.h-lg{font-size:clamp(2rem,1.3rem + 2.2vw,3.1rem);letter-spacing:-.028em}
.h-md{font-size:clamp(1.4rem,1.15rem + .9vw,1.85rem);letter-spacing:-.02em}
.h-sm{font-size:1.0625rem;letter-spacing:-.012em;font-weight:700}
.lede{font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);line-height:1.6;color:var(--muted);max-width:62ch}
.small{font-size:.875rem;line-height:1.6;color:var(--muted)}
.fine{font-size:.78125rem;line-height:1.6;color:var(--s500)}
.mono{font-family:var(--mono);font-size:.8125rem;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.red{color:var(--red)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:0 26px;border-radius:8px;border:1px solid transparent;
  font-family:var(--body);font-size:.9375rem;font-weight:600;letter-spacing:-.005em;
  cursor:pointer;transition:background var(--t),border-color var(--t),color var(--t),transform var(--t),box-shadow var(--t);
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 1px 2px rgba(200,16,46,.2)}
.btn-primary:hover{background:var(--red-dark);box-shadow:0 4px 14px -4px rgba(200,16,46,.5)}
.btn-dark{background:var(--s900);color:#fff}
.btn-dark:hover{background:var(--s800)}
.btn-ghost{background:transparent;border-color:var(--s300);color:var(--s800)}
.btn-ghost:hover{border-color:var(--s900);background:var(--s50)}
.btn-on-dark{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.28);color:#fff;backdrop-filter:blur(6px)}
.btn-on-dark:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.55)}
.btn-sm{min-height:44px;padding:0 20px;font-size:.875rem}
:focus-visible{outline:3px solid var(--red);outline-offset:2px;border-radius:4px}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:100;background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);transition:box-shadow var(--t),border-color var(--t);
}
.nav.scrolled{box-shadow:0 1px 20px -8px rgba(15,23,42,.22)}
.nav-in{display:flex;align-items:center;gap:32px;height:76px}
.nav-logo{height:48px;width:auto;flex:none}
.nav-links{display:flex;align-items:center;gap:30px;margin-left:auto}
.nav-links a:not(.btn){
  font-size:.875rem;font-weight:500;color:var(--s600);position:relative;padding:6px 0;
  transition:color var(--t);
}
.nav-links a:not(.btn)::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--red);
  transition:right var(--t);
}
.nav-links a:not(.btn):hover{color:var(--s900)}
.nav-links a:not(.btn):hover::after{right:0}
.nav-cta{margin-left:8px}
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:8px;
  width:46px;height:46px;align-items:center;justify-content:center;cursor:pointer}
.nav-panel{display:none}

/* persistent research-use notice — sits under the nav on every screen */
.ruo-bar{
  display:flex;align-items:center;gap:9px;margin:0;
  background:var(--s900);color:var(--s400);
  padding:7px max(var(--gut),calc((100% - var(--wrap))/2 + var(--gut)));
  font-size:.75rem;line-height:1.4;border-top:1px solid rgba(200,16,46,.55);
}
.ruo-bar svg{flex:none;color:var(--s500);width:13px;height:13px}
.ruo-bar strong{color:var(--s200);font-weight:600}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--s950);color:#fff;overflow:hidden;isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg,rgba(8,15,28,.95) 0%,rgba(8,15,28,.86) 42%,rgba(8,15,28,.5) 72%,rgba(8,15,28,.36) 100%),
    linear-gradient(to top,rgba(8,15,28,.88) 0%,transparent 44%);
}
/* faint track texture over the hero — the logo motif at page scale */
.hero-scrim::after{
  content:"";position:absolute;inset:0;opacity:.5;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.045) 0 1px,transparent 1px 5px);
  mask-image:linear-gradient(105deg,#000 0%,transparent 58%);
  -webkit-mask-image:linear-gradient(105deg,#000 0%,transparent 58%);
}
.hero-in{position:relative;padding:118px 0 0;min-height:min(84vh,760px);display:flex;flex-direction:column;justify-content:center}
.hero h1{max-width:none;margin-bottom:26px;text-wrap:balance;line-height:1.2}
.hero h1 span{display:block}
/* underline drawn as a background so it repeats correctly on every wrapped line */
.hero h1 em{
  font-style:normal;color:#fff;
  padding-bottom:.16em;
  background-image:repeating-linear-gradient(to bottom,var(--red) 0 2px,transparent 2px 4px);
  background-repeat:no-repeat;background-size:100% 6px;background-position:0 100%;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.hero-lede{color:rgba(255,255,255,.8);max-width:56ch;font-size:clamp(1.0625rem,1rem + .4vw,1.3125rem)}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.hero-note{margin-top:22px;color:rgba(255,255,255,.5);font-size:.8125rem}

/* price flags in hero */
.hero-flags{display:flex;flex-wrap:wrap;gap:12px;margin-top:44px;padding-bottom:56px}
.flag{
  display:flex;align-items:baseline;gap:12px;padding:14px 20px;border-radius:10px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(8px);
}
.flag b{font-family:var(--display);font-size:1.375rem;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.flag span{font-size:.8125rem;color:rgba(255,255,255,.62);line-height:1.35;max-width:24ch}

/* ---------- trust strip ---------- */
.strip{border-bottom:1px solid var(--line);background:var(--s50)}
.strip-in{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.strip-item{background:var(--s50);padding:30px 26px}
.strip-item b{display:block;font-family:var(--display);font-size:clamp(1.3rem,1.05rem + .85vw,1.75rem);font-weight:800;
  letter-spacing:-.03em;line-height:1.15;color:var(--s900);font-variant-numeric:tabular-nums;text-wrap:balance}
.strip-item span{display:block;font-size:.8125rem;color:var(--s600);margin-top:5px;line-height:1.45}

/* ---------- sections ---------- */
.sec{padding:clamp(64px,8vw,116px) 0}
.sec-tight{padding:clamp(52px,6vw,84px) 0}
.sec-dark{background:var(--s950);color:#fff}
.sec-dark .lede,.sec-dark .small{color:var(--s400)}
.sec-alt{background:var(--s50)}
.sec-head{max-width:64ch;margin-bottom:clamp(36px,4vw,56px)}
.sec-head .lede{margin-top:18px}
.sec-head-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;max-width:none}
.sec-head-row > div{max-width:64ch}

/* ---------- featured products ---------- */
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.feature{
  display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);
  background:#fff;overflow:hidden;transition:box-shadow var(--t),border-color var(--t),transform var(--t);
}
.feature:hover{box-shadow:var(--shadow-lg);border-color:var(--s300);transform:translateY(-3px)}
.feature-img{aspect-ratio:16/10;background:var(--s100);overflow:hidden}
.feature-img img{width:100%;height:100%;object-fit:cover;transition:transform 600ms cubic-bezier(.4,0,.2,1)}
.feature:hover .feature-img img{transform:scale(1.04)}
.feature-body{padding:30px;display:flex;flex-direction:column;flex:1;gap:16px}
.feature .sku{font-family:var(--mono);font-size:.75rem;letter-spacing:.02em;color:var(--red);font-weight:600}
.feature h3{font-size:1.3125rem;letter-spacing:-.02em}
.spec-list{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line);margin-top:auto}
.spec-row{display:flex;justify-content:space-between;gap:18px;padding:11px 0;border-bottom:1px solid var(--line);font-size:.875rem}
.spec-row dt{color:var(--s500);flex:none}
.spec-row dd{margin:0;text-align:right;font-weight:500;color:var(--s800)}
.price-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding-top:20px}
.price{font-family:var(--display);font-size:2.5rem;font-weight:800;letter-spacing:-.038em;line-height:1;color:var(--s900);font-variant-numeric:tabular-nums}
.price-unit{font-size:.8125rem;color:var(--s500);margin-top:6px}

/* ---------- pricing table ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:22px}
.chip{
  min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--field-line);background:#fff;
  font-size:.8125rem;font-weight:600;color:var(--s600);cursor:pointer;
  transition:all var(--t);display:inline-flex;align-items:center;gap:8px;
}
.chip:hover{border-color:var(--s900);color:var(--s900)}
.chip[aria-pressed="true"]{background:var(--s900);border-color:var(--s900);color:#fff}
.chip .n{font-size:.6875rem;opacity:.62;font-variant-numeric:tabular-nums}
.search{
  position:relative;margin-left:auto;min-width:250px;flex:0 1 300px;
}
.search input{
  width:100%;min-height:44px;padding:0 14px 0 38px;border:1px solid var(--field-line);border-radius:8px;
  background:#fff;font-size:.875rem;transition:border-color var(--t),box-shadow var(--t);
}
.search input:focus-visible{outline:2px solid var(--red);outline-offset:2px;
  border-color:var(--red);box-shadow:0 0 0 3px rgba(200,16,46,.13)}
.search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--s400);pointer-events:none}

.table-wrap{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;overflow:hidden}
/* own scroll container so the sticky header actually sticks (it cannot stick to the
   viewport from inside an overflow container) */
.table-scroll{overflow:auto;-webkit-overflow-scrolling:touch;max-height:min(72vh,780px);overscroll-behavior:contain}
table.cat{width:100%;border-collapse:collapse;min-width:940px}
table.cat thead th{
  position:sticky;top:0;z-index:5;background:var(--s50);
  text-align:left;font-size:.6875rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--s500);padding:14px 16px;border-bottom:1px solid var(--line);white-space:nowrap;
}
table.cat thead th.rt{text-align:right}
table.cat tbody td{padding:15px 16px;border-bottom:1px solid var(--s100);font-size:.875rem;vertical-align:top}
table.cat tbody tr:last-child td{border-bottom:0}
table.cat tbody tr{transition:background var(--t)}
table.cat tbody tr:hover{background:var(--s50)}
td.sku{font-family:var(--mono);font-size:.75rem;color:var(--s500);white-space:nowrap}
td.name{font-weight:500;color:var(--s900);min-width:270px;line-height:1.45}
td.name .rt-tag{display:block;font-size:.75rem;color:var(--s500);font-weight:400;margin-top:3px}
td.spec{color:var(--s600);white-space:nowrap;font-size:.8125rem}
td.p{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--s600);font-size:.8125rem}
td.p.list{font-weight:700;color:var(--s900);font-size:.9375rem}
tr.grp td{
  position:sticky;top:43px;z-index:4;
  background:var(--s900);color:#fff;font-family:var(--display);font-weight:700;font-size:.8125rem;
  letter-spacing:.1em;text-transform:uppercase;padding:11px 16px;border:0;
}
tr.grp td .cnt{font-weight:500;opacity:.6;letter-spacing:0;text-transform:none;margin-left:8px;font-size:.75rem}
.table-foot{padding:16px 20px;background:var(--s50);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center}
.noresult{padding:56px 20px;text-align:center;color:var(--s500)}

/* mobile pricing cards */
.cat-cards{display:none;flex-direction:column;gap:12px}
.cat-card{border:1px solid var(--line);border-radius:12px;padding:18px;background:#fff}
.cat-card .sku{font-family:var(--mono);font-size:.6875rem;color:var(--red);font-weight:600}
.cat-card h3{font-size:.9375rem;font-weight:600;margin:6px 0 10px;line-height:1.4;font-family:var(--body)}
.cat-card .meta{font-size:.8125rem;color:var(--s600);margin-bottom:12px}
.cat-card .prices{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;border-top:1px solid var(--line);padding-top:12px}
.cat-card .prices div{text-align:center}
.cat-card .prices span{display:block;font-size:.625rem;color:var(--s500);text-transform:uppercase;letter-spacing:.04em}
.cat-card .prices b{display:block;font-size:.875rem;font-variant-numeric:tabular-nums;margin-top:2px}
.cat-card .prices div:first-child b{color:var(--red)}

/* ---------- tiers ---------- */
.tier-head{font-family:var(--display);font-size:1.0625rem;font-weight:700;letter-spacing:-.01em;
  color:var(--s900);margin:0 0 16px}
/* Five cards now: four published tiers plus the call-for-pricing band above 50. */
.tier-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:38px}
.tier{border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 24px;background:#fff;position:relative;overflow:hidden;transition:border-color var(--t),box-shadow var(--t)}
.tier:hover{border-color:var(--s300);box-shadow:var(--shadow)}
.tier::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:repeating-linear-gradient(to right,var(--s300) 0 3px,transparent 3px 7px)}
.tier.best::before{background:repeating-linear-gradient(to right,var(--red) 0 3px,transparent 3px 7px)}
.tier .qty{font-family:var(--mono);font-size:.75rem;color:var(--s500);letter-spacing:.04em}
.tier .off{font-family:var(--display);font-size:2.25rem;font-weight:800;letter-spacing:-.035em;margin:10px 0 4px;color:var(--s900)}
.tier.best .off{color:var(--red)}
/* The call band is not a discount, so it reads as an invitation rather than a fifth number. */
.tier.call{background:var(--s50,#f8fafc);border-style:dashed}
.tier.call::before{background:none}
.tier.call .off{font-size:1.75rem;color:var(--s700)}
.tier .lbl{font-size:.8125rem;color:var(--s600)}
.tier .ex{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:.8125rem;color:var(--s500)}
.tier .ex b{color:var(--s900);font-variant-numeric:tabular-nums}

/* ---------- generic card grids ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,4vw,60px);align-items:center}
.card{border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;background:#fff;transition:border-color var(--t),box-shadow var(--t),transform var(--t)}
.card:hover{border-color:var(--s300);box-shadow:var(--shadow);transform:translateY(-2px)}
.card .ico{width:42px;height:42px;border-radius:10px;background:var(--red-tint);color:var(--red);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.card h3{font-size:1.0625rem;margin-bottom:9px;letter-spacing:-.015em}
.card p{font-size:.9375rem;color:var(--muted);line-height:1.6}

.sec-dark .card{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.11)}
.sec-dark .card:hover{border-color:rgba(255,255,255,.26);box-shadow:none}
.sec-dark .card h3{color:#fff}
.sec-dark .card p{color:var(--s400)}
.sec-dark .card .ico{background:rgba(200,16,46,.17);color:#FF6076}

/* panel image */
.shot{border-radius:var(--r-lg);overflow:hidden;background:var(--s100);position:relative}
.shot img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.shot.tall img{aspect-ratio:3/4}
.shot-cap{position:absolute;left:0;right:0;bottom:0;padding:34px 22px 16px;color:#fff;font-size:.8125rem;
  font-weight:500;text-shadow:0 1px 3px rgba(8,15,28,.9);
  background:linear-gradient(to top,rgba(8,15,28,.94) 0%,rgba(8,15,28,.78) 45%,transparent 100%)}

/* ---------- release panel (checklist) ---------- */
.panel-list{display:grid;grid-template-columns:repeat(2,1fr);gap:0 32px;margin:0;padding:0;list-style:none}
.panel-list li{display:flex;gap:13px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:.9375rem;align-items:flex-start}
.panel-list li svg{flex:none;margin-top:3px;color:#FF6076}
.panel-list li b{display:block;font-weight:600;color:#fff}
.panel-list li span{display:block;color:var(--s400);font-size:.8125rem;margin-top:2px}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.step{padding:30px 26px 30px 0;border-top:2px solid var(--line);position:relative}
.step:not(:last-child){padding-right:36px}
.step::before{content:"";position:absolute;top:-2px;left:0;width:36px;height:2px;background:var(--red)}
.step .n{font-family:var(--mono);font-size:.75rem;color:var(--red);font-weight:600;letter-spacing:.06em}
.step h3{font-size:1.0625rem;margin:12px 0 8px}
.step p{font-size:.875rem;color:var(--muted);line-height:1.6}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  display:flex;align-items:flex-start;gap:20px;padding:24px 0;cursor:pointer;list-style:none;
  font-family:var(--display);font-weight:600;font-size:1.0625rem;letter-spacing:-.012em;
  transition:color var(--t);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--red)}
.faq summary .pm{margin-left:auto;flex:none;width:22px;height:22px;position:relative;margin-top:3px}
.faq summary .pm::before,.faq summary .pm::after{
  content:"";position:absolute;background:var(--s400);border-radius:2px;transition:transform var(--t),background var(--t);
  left:50%;top:50%;
}
.faq summary .pm::before{width:14px;height:2px;transform:translate(-50%,-50%)}
.faq summary .pm::after{width:2px;height:14px;transform:translate(-50%,-50%)}
.faq details[open] summary .pm::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.faq details[open] summary{color:var(--s900)}
.faq details[open] summary .pm::before{background:var(--red)}
.faq .ans{padding:0 46px 26px 0;color:var(--muted);font-size:.9375rem;line-height:1.7;max-width:80ch}
.faq .ans p + p{margin-top:12px}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(32px,5vw,72px)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:.8125rem;font-weight:600;color:var(--s700)}
.field label .req{color:var(--red)}
.field input,.field select,.field textarea{
  min-height:48px;padding:12px 14px;border:1px solid var(--field-line);border-radius:8px;background:#fff;
  font-size:.9375rem;transition:border-color var(--t),box-shadow var(--t);width:100%;
}
.field textarea{min-height:110px;resize:vertical;line-height:1.55}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:2px solid var(--red);outline-offset:2px;
  border-color:var(--red);box-shadow:0 0 0 3px rgba(200,16,46,.13)}
.field .hint{font-size:.75rem;color:var(--s500)}
.contact-aside{background:var(--s50);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(26px,3vw,38px)}
.contact-line{display:flex;gap:15px;padding:17px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.contact-line:last-of-type{border-bottom:0}
.contact-line svg{flex:none;color:var(--red);margin-top:2px}
.contact-line b{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--s500);font-weight:600}
.contact-line a,.contact-line span{font-size:1rem;font-weight:500;color:var(--s900);transition:color var(--t)}
.contact-line a:hover{color:var(--red)}

/* ---------- footer ---------- */
.foot{background:var(--s950);color:var(--s400);padding:76px 0 0}
.foot .small,.foot .fine{color:var(--s400)}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:44px;padding-bottom:52px;border-bottom:1px solid rgba(255,255,255,.1)}
.foot-logo{height:64px;width:auto;margin-bottom:22px}
.foot h3{font-family:var(--body);font-size:.6875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin-bottom:18px}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.foot a{font-size:.875rem;transition:color var(--t)}
.foot a:hover{color:#fff}
.foot-legal{padding:34px 0 46px;font-size:.8125rem;line-height:1.75;color:var(--s400)}
.foot-legal strong{color:#fff;font-weight:600}
.foot-bar{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;padding-top:24px;
  border-top:1px solid rgba(255,255,255,.08);margin-top:26px;font-size:.8125rem;color:var(--s400)}

.disclaimer{
  border:1px solid rgba(255,255,255,.13);border-left:3px solid var(--red);border-radius:8px;
  padding:22px 24px;margin-bottom:28px;background:rgba(255,255,255,.03);
}
.disclaimer b{display:block;color:#fff;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:9px}
.disclaimer p{color:var(--s300)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.4,0,.2,1),transform .7s cubic-bezier(.4,0,.2,1)}
.rv.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .strip-in{grid-template-columns:repeat(2,1fr)}
  .tier-grid{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .foot-top{grid-template-columns:1fr 1fr;gap:36px}
}
@media (max-width:900px){
  .nav-links{display:none}
  .nav-toggle{display:flex}
  .nav-panel{display:block;position:fixed;inset:132px 0 auto;background:#fff;border-bottom:1px solid var(--line);
    padding:20px var(--gut) 28px;transform:translateY(-110%);visibility:hidden;
    transition:transform 260ms cubic-bezier(.4,0,.2,1),visibility 0s linear 260ms;
    box-shadow:0 18px 40px -18px rgba(15,23,42,.3);z-index:99;max-height:calc(100dvh - 132px);overflow-y:auto}
  .nav-panel.open{transform:none;visibility:visible;transition:transform 260ms cubic-bezier(.4,0,.2,1),visibility 0s}
  .nav-panel a{display:block;padding:15px 0;border-bottom:1px solid var(--s100);font-weight:600;font-size:1rem}
  .nav-panel .btn{width:100%;margin-top:18px}
  .grid-2,.contact-grid,.feature-grid,.grid-3{grid-template-columns:1fr}
  .panel-list{grid-template-columns:1fr}
  .hero-in{padding-top:96px;min-height:auto}

  /* ---- hero scrim on a narrow screen ----
     The copy runs full width here, so the wide layout's left-to-right ramp
     starts at 95% ink across the whole frame and the footage disappears. Swap
     it for a vertical ramp: dark behind the headline where contrast is needed,
     clearing lower down so the shot is actually visible. */
  .hero-scrim{
    background:
      linear-gradient(to bottom,rgba(8,15,28,.9) 0%,rgba(8,15,28,.88) 44%,rgba(8,15,28,.62) 74%,rgba(8,15,28,.5) 100%);
  }
  /* The diagonal track texture is tuned for the wide layout and only muddies
     the frame at this width. */
  .hero-scrim::after{display:none}
}
@media (max-width:720px){
  :root{--gut:18px}
  /* The product listing has a card fallback below; the checkout review table does not,
     so hiding it would ask the buyer to approve a total they cannot see. It scrolls. */
  .table-wrap:not(.review-wrap){display:none}
  .review-wrap .table-scroll{overflow-x:auto;max-height:none}
  .review-wrap table.cat{min-width:660px}
  .cat-cards{display:flex}
  .form{grid-template-columns:1fr}
  .search{margin-left:0;flex:1 1 100%;min-width:0}
  .strip-item{padding:22px 18px}
  .steps{grid-template-columns:1fr}
  .step{padding-right:0!important}
  .tier-grid{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr}
  .hero-flags{flex-direction:column}
  .flag{width:100%}
  .feature-body{padding:24px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}

@media print{
  .nav,.hero-media,.hero-actions,.nav-toggle,.foot ul,form{display:none}
  body{color:#000}
  .sec{padding:24px 0}
  .table-wrap{display:block!important}.cat-cards{display:none!important}
  .table-scroll{max-height:none;overflow:visible}
  .review-wrap .table-scroll{overflow-x:auto}
  table.cat thead th,tr.grp td{position:static}
}

/* ============================================================
   Application layer — animated icons, forms, portal, admin
   ============================================================ */

/* ---------- animated icons ----------
   Each stroke is measured at runtime (getTotalLength) and drawn in when the
   card enters view; hover adds a small, non-layout-shifting lift.            */
.ico{position:relative;overflow:hidden}
.ico::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(circle at 30% 25%,rgba(200,16,46,.22),transparent 70%);
  opacity:0;transition:opacity var(--t);
}
.ico svg{position:relative;transition:transform 420ms cubic-bezier(.34,1.56,.64,1)}
.ico svg [data-draw]{
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 900ms cubic-bezier(.65,0,.35,1);
}
.ico.drawn svg [data-draw]{stroke-dashoffset:0}
.ico svg [data-pulse]{transform-box:fill-box;transform-origin:center;opacity:0;
  transition:opacity 300ms ease 600ms}
.ico.drawn svg [data-pulse]{opacity:1;animation:icoPulse 2.6s ease-in-out 1s infinite}
@keyframes icoPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.28)}}
.card:hover .ico svg,.step:hover .ico svg{transform:scale(1.12) rotate(-4deg)}
.card:hover .ico::after,.step:hover .ico::after{opacity:1}
@media (prefers-reduced-motion:reduce){
  .ico svg [data-draw]{stroke-dashoffset:0!important}
  .ico.drawn svg [data-pulse]{animation:none;opacity:1}
  .card:hover .ico svg{transform:none}
}

/* ---------- product range (public, no pricing) ---------- */
.line-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;margin:0 0 8px}
.line-head h3{font-size:1.375rem;letter-spacing:-.02em}
.line-head .n{font-family:var(--mono);font-size:.75rem;color:var(--red);font-weight:600}
.line-blurb{max-width:70ch;margin-bottom:22px}
.line-note{display:inline-flex;align-items:center;gap:8px;margin-bottom:20px;padding:7px 13px;
  border-radius:999px;background:var(--red-tint);color:var(--red-dark);font-size:.78125rem;font-weight:600}
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.prod{border:1px solid var(--line);border-radius:11px;padding:16px 18px;background:#fff;
  transition:border-color var(--t),box-shadow var(--t),transform var(--t)}
.prod:hover{border-color:var(--s300);box-shadow:var(--shadow);transform:translateY(-2px)}
.prod .sku{font-family:var(--mono);font-size:.6875rem;color:var(--red);font-weight:600;letter-spacing:.02em}
.prod h4{font-family:var(--body);font-size:.9375rem;font-weight:600;line-height:1.4;margin:6px 0 7px;letter-spacing:0}
.prod .spec{font-size:.8125rem;color:var(--s600)}
/* ---------- opening prices (the only two published openly) ---------- */
.promo{margin-top:44px;padding:32px 34px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:#fff;box-shadow:var(--shadow);position:relative;overflow:hidden}
.promo::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:repeating-linear-gradient(to right,var(--red) 0 3px,transparent 3px 7px)}
.promo-head{max-width:64ch;margin-bottom:26px}
.promo-head h3{margin:0 0 10px}
.promo-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.promo-card{border:1px solid var(--line);border-radius:var(--r);padding:24px;background:var(--s50);
  display:flex;flex-direction:column;gap:5px}
.pc-sku{font-size:.75rem;color:var(--s500);letter-spacing:.02em}
.pc-name{font-family:var(--display);font-size:1.0625rem;font-weight:700;letter-spacing:-.012em;
  line-height:1.25;color:var(--s900)}
.pc-spec{font-size:.8125rem;color:var(--s600)}
.pc-price{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
  display:flex;align-items:baseline;gap:9px}
.pc-price .num{font-family:var(--display);font-size:2.25rem;font-weight:800;letter-spacing:-.035em;
  color:var(--red);line-height:1}
.pc-unit{font-size:.8125rem;color:var(--s500)}
.promo-fine{margin-top:18px}
@media (max-width:700px){ .promo{padding:26px 22px} .promo-cards{grid-template-columns:1fr} }

.gate-note{margin-top:30px;padding:22px 26px;border:1px solid var(--line);border-left:3px solid var(--red);
  border-radius:10px;background:var(--s50);display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.gate-note p{max-width:62ch;font-size:.9375rem;color:var(--s700)}

/* ---------- reference links ---------- */
.ref-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.ref{display:block;border:1px solid var(--line);border-radius:12px;padding:20px 22px;background:#fff;
  transition:border-color var(--t),box-shadow var(--t),transform var(--t)}
.ref:hover{border-color:var(--red);box-shadow:var(--shadow);transform:translateY(-2px)}
.ref .org{font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.ref h4{font-family:var(--body);font-size:.9375rem;font-weight:600;margin:7px 0 6px;line-height:1.4;letter-spacing:0}
.ref p{font-size:.8125rem;color:var(--s600);line-height:1.55}
.ref .go{display:inline-flex;align-items:center;gap:6px;margin-top:11px;font-size:.78125rem;
  font-weight:600;color:var(--s500);transition:color var(--t),gap var(--t)}
.ref:hover .go{color:var(--red);gap:10px}

/* ---------- forms / auth ---------- */
.form-card{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;padding:clamp(26px,3vw,40px)}
.field .err{font-size:.78125rem;color:var(--red);font-weight:500}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--red)}
.check{display:flex;gap:12px;align-items:flex-start;font-size:.875rem;color:var(--s700);line-height:1.55}
.check input{width:20px;height:20px;min-height:0;flex:none;margin-top:2px;accent-color:var(--red)}
.notice{padding:14px 18px;border-radius:9px;font-size:.875rem;line-height:1.55;margin-bottom:18px;display:none}
.notice.show{display:block}
.notice.ok{background:#ECFDF5;border:1px solid #A7F3D0;color:#065F46}
.notice.err{background:#FEF2F2;border:1px solid #FECACA;color:#991B1B}
.auth-wrap{min-height:calc(100dvh - 200px);display:flex;align-items:center;justify-content:center;padding:56px var(--gut)}
.auth-box{width:100%;max-width:460px}
.auth-box .logo{height:56px;margin:0 auto 28px}
.pw-meter{height:4px;border-radius:2px;background:var(--s200);overflow:hidden;margin-top:8px}
.pw-meter i{display:block;height:100%;width:0;background:var(--red);transition:width var(--t),background var(--t)}

/* ---------- portal: pricing + cart ---------- */
.portal-bar{background:var(--s900);color:#fff;position:sticky;top:0;z-index:90}
.portal-bar .wrap-wide{display:flex;align-items:center;gap:20px;height:64px}
.portal-bar img{height:34px}
.portal-bar .who{margin-left:auto;font-size:.8125rem;color:var(--s400);text-align:right;line-height:1.3}
.portal-bar .who b{display:block;color:#fff;font-weight:600}
.portal-bar a.pl{font-size:.8125rem;color:var(--s300);font-weight:500}
.portal-bar a.pl:hover{color:#fff}

td.qty-cell{text-align:right;white-space:nowrap}
.qty{display:inline-flex;align-items:center;border:1px solid var(--field-line);border-radius:8px;overflow:hidden;background:#fff}
.qty button{width:34px;height:38px;border:0;background:none;cursor:pointer;color:var(--s600);font-size:1.05rem;line-height:1;
  transition:background var(--t),color var(--t)}
.qty button:hover{background:var(--s100);color:var(--red)}
.qty input{width:56px;height:38px;border:0;border-left:1px solid var(--s200);border-right:1px solid var(--s200);
  text-align:center;font-variant-numeric:tabular-nums;font-size:.875rem;min-height:0;padding:0}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty input[type=number]{-moz-appearance:textfield}

.cart{position:fixed;right:0;top:0;bottom:0;width:min(440px,100vw);background:#fff;z-index:120;
  box-shadow:-24px 0 60px -24px rgba(15,23,42,.35);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform 300ms cubic-bezier(.4,0,.2,1);visibility:hidden}
.cart.open{transform:none;visibility:visible}
.cart-head{display:flex;align-items:center;gap:14px;padding:20px 24px;border-bottom:1px solid var(--line)}
.cart-head h3{font-size:1.0625rem;margin-right:auto}
.cart-body{flex:1;overflow-y:auto;padding:8px 24px}
.cart-line{display:grid;grid-template-columns:1fr auto;gap:6px 14px;padding:16px 0;border-bottom:1px solid var(--s100)}
.cart-line .nm{font-size:.875rem;font-weight:500;line-height:1.4}
.cart-line .sk{font-family:var(--mono);font-size:.6875rem;color:var(--red)}
.cart-line .mt{font-size:.75rem;color:var(--s500);grid-column:1/-1}
.cart-line .amt{font-variant-numeric:tabular-nums;font-weight:600;font-size:.9375rem;white-space:nowrap}
.cart-line .rm{background:none;border:0;color:var(--s500);cursor:pointer;font-size:.75rem;padding:0;text-align:left}
.cart-line .rm:hover{color:var(--red)}
.cart-foot{border-top:1px solid var(--line);padding:20px 24px;background:var(--s50)}
.cart-total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.cart-total b{font-family:var(--display);font-size:1.5rem;font-variant-numeric:tabular-nums}
.cart-empty{padding:60px 24px;text-align:center;color:var(--s500);font-size:.9375rem}
.scrim{position:fixed;inset:0;background:rgba(8,15,28,.5);z-index:110;opacity:0;pointer-events:none;
  transition:opacity 280ms ease;backdrop-filter:blur(2px)}
.scrim.on{opacity:1;pointer-events:auto}
.cart-fab{position:fixed;right:22px;bottom:22px;z-index:100;box-shadow:0 10px 30px -8px rgba(200,16,46,.55)}
.cart-fab .badge{background:#fff;color:var(--red);border-radius:999px;min-width:22px;height:22px;
  display:inline-flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;padding:0 6px}

/* ---------- confirmation ---------- */
.confirm{max-width:640px;margin:0 auto;text-align:center}
.confirm .tick{width:72px;height:72px;margin:0 auto 26px;border-radius:50%;background:#ECFDF5;
  display:flex;align-items:center;justify-content:center;color:#047857}
.confirm .tick svg [data-draw]{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  animation:drawTick 700ms cubic-bezier(.65,0,.35,1) forwards}
@keyframes drawTick{to{stroke-dashoffset:0}}
.ref-badge{display:inline-block;font-family:var(--mono);font-size:1.0625rem;font-weight:600;
  padding:11px 20px;border:1px solid var(--line);border-radius:9px;background:var(--s50);margin:6px 0 22px}

/* ---------- admin ---------- */
.adm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:32px}

/* ---------- sales rep console ---------- */
/* Reuses the admin panel's .stat / .tabs / .adm / .pill / .act vocabulary — a rep and an
   admin are looking at the same kinds of object, so they should read the same way. */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:28px}
.rep-cols{display:grid;grid-template-columns:340px 1fr;gap:34px;align-items:start}
.stack{display:flex;flex-direction:column;gap:12px}
.stack label{display:flex;flex-direction:column;gap:5px;font-size:.8125rem;font-weight:600;color:var(--s700)}
.stack input,.stack select,.stack textarea{
  border:1px solid var(--field-line);border-radius:8px;padding:10px 12px;font-size:.9375rem;
  background:#fff;font-weight:400;color:var(--ink)}
.stack textarea{resize:vertical}
.due{border:1px solid var(--line);border-left:3px solid var(--red);border-radius:8px;
  padding:14px 16px;background:var(--red-tint);margin-bottom:16px}
.due b{font-size:.875rem}
.due ul{margin:8px 0 0;padding-left:18px;font-size:.8125rem;color:var(--s700)}
.linkish{background:none;border:0;padding:0;font:inherit;font-size:.75rem;
  color:var(--red);text-decoration:underline;cursor:pointer}
.timeline{list-style:none;margin:20px 0 0;padding:0;border-left:2px solid var(--line)}
.timeline li{padding:0 0 18px 18px;position:relative;font-size:.875rem;line-height:1.55}
.timeline li::before{content:"";position:absolute;left:-5px;top:7px;width:8px;height:8px;
  border-radius:50%;background:var(--s300)}
.rep-line{display:grid;grid-template-columns:1fr 90px minmax(190px,auto) 36px;gap:10px;
  align-items:center;margin-bottom:10px}
.rep-line select,.rep-line input{border:1px solid var(--field-line);border-radius:8px;
  padding:9px 11px;font-size:.875rem;background:#fff;min-width:0}
.rep-line .rl-price{font-size:.8125rem;color:var(--s600);text-align:right;
  font-variant-numeric:tabular-nums}
.rep-line .rl-del{border:1px solid var(--field-line);background:#fff;border-radius:8px;
  width:36px;height:36px;cursor:pointer;color:var(--s600);font-size:1.05rem;line-height:1}
.rep-line .rl-del:hover{border-color:var(--red);color:var(--red)}
.rep-total{border-top:1px solid var(--line);margin-top:18px;padding-top:16px;max-width:400px}
.rep-total div{display:flex;justify-content:space-between;gap:20px;font-size:.9375rem;padding:4px 0}
.rep-total b{font-variant-numeric:tabular-nums}
.rep-total .big{font-size:1.0625rem;font-weight:700;border-top:1px solid var(--line);
  margin-top:8px;padding-top:12px}
.rep-total .det{font-size:.8125rem;color:var(--s500)}
.ctl{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:.8125rem;color:var(--s600)}
.ctl select,.ctl input{border:1px solid var(--field-line);border-radius:8px;padding:8px 11px;
  font-size:.875rem;background:#fff}
@media (max-width:900px){
  .rep-cols{grid-template-columns:1fr}
  .rep-line{grid-template-columns:1fr 74px 36px}
  .rep-line .rl-price{grid-column:1/-1;text-align:left}
}
.stat{border:1px solid var(--line);border-radius:12px;padding:20px;background:#fff}
.stat b{display:block;font-family:var(--display);font-size:2rem;font-weight:800;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;line-height:1}
.stat span{display:block;font-size:.78125rem;color:var(--s600);margin-top:5px}
.stat.warn{border-color:#FCA5A5;background:#FEF2F2}
.stat.warn b{color:var(--red)}
.tabs{display:flex;flex-wrap:wrap;gap:8px;border-bottom:1px solid var(--line);margin-bottom:24px}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:12px 16px;cursor:pointer;
  font-size:.875rem;font-weight:600;color:var(--s500);transition:color var(--t),border-color var(--t)}
.tabs button[aria-selected="true"]{color:var(--s900);border-bottom-color:var(--red)}
.tabs button:hover{color:var(--s900)}
.panel[hidden]{display:none}
table.adm{width:100%;border-collapse:collapse;font-size:.875rem}
table.adm th{text-align:left;font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase;color:var(--s500);
  padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--s50)}
table.adm td{padding:14px;border-bottom:1px solid var(--s100);vertical-align:top}
table.adm tr:hover td{background:var(--s50)}
.pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.6875rem;font-weight:700;
  letter-spacing:.03em;text-transform:uppercase}
.pill.pending{background:#FEF3C7;color:#92400E}
.pill.approved,.pill.accepted{background:#D1FAE5;color:#065F46}
.pill.rejected,.pill.cancelled,.pill.failed{background:#FEE2E2;color:#991B1B}
.pill.suspended,.pill.closed{background:var(--s200);color:var(--s700)}
.pill.submitted,.pill.new{background:#DBEAFE;color:#1E40AF}
.pill.quoted,.pill.sent{background:#E0E7FF;color:#3730A3}
.act{display:inline-flex;gap:6px;flex-wrap:wrap}
.act button{padding:6px 12px;border-radius:7px;border:1px solid var(--field-line);background:#fff;cursor:pointer;
  font-size:.78125rem;font-weight:600;transition:all var(--t)}
.act button.go{border-color:#047857;color:#047857}
.act button.go:hover{background:#047857;color:#fff}
.act button.no{border-color:var(--red);color:var(--red)}
.act button.no:hover{background:var(--red);color:#fff}
.det{font-size:.8125rem;color:var(--s600);line-height:1.6}
.det code{font-family:var(--mono);font-size:.75rem;background:var(--s100);padding:1px 5px;border-radius:4px}
.smtp-warn{padding:16px 20px;border-radius:10px;background:#FEF3C7;border:1px solid #FCD34D;color:#92400E;
  font-size:.875rem;margin-bottom:24px;line-height:1.6}

@media (max-width:820px){
  .adm-wrap{overflow-x:auto}
  table.adm{min-width:720px}
  .cart{width:100vw}
}

/* legal reading layout */
.legal-body{max-width:78ch}
.legal-body h2{font-size:1.25rem;letter-spacing:-.016em;margin:42px 0 12px;padding-top:22px;border-top:1px solid var(--line)}
.legal-body h2:first-of-type{margin-top:0;padding-top:0;border-top:0}
.legal-body h3{font-size:1rem;margin:26px 0 8px}
.legal-body p{margin:0 0 14px;color:var(--s700);font-size:.9375rem;line-height:1.75}
.legal-body ul{margin:0 0 18px;padding-left:22px;color:var(--s700);font-size:.9375rem;line-height:1.75}
.legal-body li{margin-bottom:8px}
.legal-body strong{color:var(--s900)}
.legal-body a{color:var(--red);text-decoration:underline;text-underline-offset:2px}
.legal-body .effective{display:inline-block;font-family:var(--mono);font-size:.78125rem;color:var(--s600);
  background:var(--s100);padding:7px 14px;border-radius:7px;margin-bottom:30px}

/* ---------- admin price sheet ---------- */
.price-bar{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start;justify-content:space-between;
  padding:20px 22px;border:1px solid var(--line);border-radius:12px;background:var(--s50);margin-bottom:18px}
.price-bar > div:first-child{max-width:70ch}
.price-actions{display:flex;gap:10px;flex-wrap:wrap}
table.adm input.pxi{width:104px;min-height:38px;padding:6px 10px;border:1px solid var(--s300);
  border-radius:7px;font-variant-numeric:tabular-nums;text-align:right;font-size:.875rem}
table.adm input.pxi:focus-visible{outline:2px solid var(--red);outline-offset:1px;
  border-color:var(--red);box-shadow:0 0 0 3px rgba(200,16,46,.13)}
table.adm input.pxi.changed{border-color:var(--red);background:#FDF6F7;font-weight:700}
/* What a sales rep is paid out of a distributor's own commission, in percent. Narrower than a
   price because it is two or three digits and a decimal, and it sits beside a "%" in the cell. */
table.adm input.subrate{width:74px;min-height:38px;padding:6px 8px;border:1px solid var(--s300);
  border-radius:7px;font-variant-numeric:tabular-nums;text-align:right;font-size:.875rem;
  margin-right:4px}
table.adm input.subrate:focus-visible{outline:2px solid var(--red);outline-offset:1px;
  border-color:var(--red);box-shadow:0 0 0 3px rgba(200,16,46,.13)}
table.adm tr.off td{opacity:.5}
table.adm tr.off td .vis{opacity:1}
.vis{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:.8125rem;white-space:nowrap}
.vis input{width:18px;height:18px;min-height:0;accent-color:var(--red);cursor:pointer}
.tier-preview{font-family:var(--mono);font-size:.75rem;color:var(--s500);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.tier-preview b{color:var(--s900);font-weight:600}
.px-base{font-size:.75rem;color:var(--s500);white-space:nowrap}
/* The two SKUs whose price is printed on the public landing page. */
.px-ad{display:inline-block;margin-top:4px;font-size:.6875rem;color:var(--red);
  background:var(--red-tint);border-radius:4px;padding:2px 7px}

/* cart + review totals */
.cart-row{display:flex;justify-content:space-between;align-items:baseline;font-size:.875rem;
  color:var(--s600);padding:5px 0}
.cart-row em{font-style:normal;font-size:.75rem;color:var(--s500)}
.cart-total{padding-top:10px;margin-top:6px;border-top:1px solid var(--line)}
.totals{max-width:420px;margin-left:auto}
.totals div{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:7px 0;
  font-size:.9375rem;color:var(--s600)}
.totals div em{font-style:normal;font-size:.8125rem;color:var(--s500)}
.totals b{font-variant-numeric:tabular-nums;color:var(--s900);font-weight:600}
.totals .grand{border-top:1px solid var(--line);margin-top:6px;padding-top:12px}
.totals .grand b{font-family:var(--display);font-size:1.375rem;font-weight:800;letter-spacing:-.02em}

/* ---------- cell-type reference library ---------- */
.ref-group{margin-bottom:44px}
.ref-group-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;margin-bottom:6px}
.ref-group-head h3{font-size:1.1875rem;letter-spacing:-.018em}
.ref-group-head .skus{font-family:var(--mono);font-size:.6875rem;color:var(--red);font-weight:600}
.ref-group-head .cnt{font-size:.75rem;color:var(--s500);margin-left:auto}
.ref-more{border-top:1px solid var(--line);margin-top:8px}
.ref-more summary{display:flex;align-items:center;gap:14px;padding:18px 0;cursor:pointer;list-style:none;
  font-family:var(--display);font-weight:600;font-size:1.0625rem;letter-spacing:-.012em;transition:color var(--t)}
.ref-more summary::-webkit-details-marker{display:none}
.ref-more summary:hover{color:var(--red)}
.ref-more summary .skus{font-family:var(--mono);font-size:.6875rem;color:var(--red);font-weight:600}
.ref-more summary .cnt{margin-left:auto;font-size:.75rem;color:var(--s500);font-family:var(--body);font-weight:500}
.ref-more summary .chev{width:18px;height:18px;flex:none;transition:transform var(--t);color:var(--s400)}
.ref-more details[open] summary .chev{transform:rotate(90deg)}
.ref-more details{border-bottom:1px solid var(--line)}
.ref-more .inner{padding:2px 0 26px}

/* ---------- packing diagram ---------- */
.diagram{margin:0;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;
  padding:clamp(16px,2.5vw,30px)}
.diagram img{width:100%;height:auto;display:block}

/* ---------- range grouped by cell type ---------- */
.line-block{margin-bottom:56px}
.celltype{padding:24px 0;border-top:1px solid var(--line)}
.celltype:first-of-type{border-top:1px solid var(--s300)}
.celltype h4{font-family:var(--display);font-size:1.0625rem;font-weight:700;letter-spacing:-.014em;
  margin:0 0 8px;color:var(--s900)}
.celltype-desc{max-width:74ch;font-size:.9375rem;line-height:1.65;color:var(--muted);margin-bottom:16px}
.celltype .prod-grid{grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:10px}
.celltype .prod{padding:12px 14px}
.celltype .prod .sku{margin-bottom:4px}

/* ---------- CRM ---------- */
.crm-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:20px}
.crm-stages{display:flex;flex-wrap:wrap;gap:8px}
.crm-due{padding:16px 20px;border-radius:10px;background:#FEF3C7;border:1px solid #FCD34D;
  color:#92400E;margin-bottom:20px}
.crm-due h4{font-family:var(--body);font-size:.8125rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:10px}
.crm-due ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.crm-due li{display:flex;gap:12px;align-items:baseline;font-size:.875rem}
.crm-due .when{font-family:var(--mono);font-size:.75rem;min-width:96px;flex:none}
.crm-due .when.late{color:var(--red);font-weight:700}
.crm-due a{font-weight:600;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.stage{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.6875rem;font-weight:700;
  letter-spacing:.03em;text-transform:uppercase}
.stage.lead{background:#DBEAFE;color:#1E40AF}
.stage.qualified{background:#E0E7FF;color:#3730A3}
.stage.quoted{background:#FEF3C7;color:#92400E}
.stage.customer{background:#D1FAE5;color:#065F46}
.stage.dormant{background:var(--s200);color:var(--s700)}
.stage.lost{background:#FEE2E2;color:#991B1B}
.crm-detail{border:1px solid var(--line);border-radius:12px;background:var(--s50);padding:22px;margin-top:10px}
.crm-cols{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.crm-time{list-style:none;margin:0;padding:0;max-height:340px;overflow-y:auto}
.crm-time li{padding:11px 0;border-bottom:1px solid var(--line);font-size:.875rem;line-height:1.55}
.crm-time .meta{font-size:.75rem;color:var(--s500);margin-bottom:3px}
.crm-time .kind{display:inline-block;font-family:var(--mono);font-size:.6875rem;color:var(--red);
  text-transform:uppercase;margin-right:8px}
.crm-time p{white-space:pre-wrap}
.crm-task{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--line);font-size:.875rem}
.crm-task.done{opacity:.55}
.crm-task.done>span:not(.due){text-decoration:line-through}
.crm-task .due{font-family:var(--mono);font-size:.75rem;color:var(--s500);margin-left:auto;white-space:nowrap}
.crm-task .due.late{color:var(--red);font-weight:700}
.crm-task button{background:none;border:1px solid var(--field-line);border-radius:6px;width:20px;height:20px;
  flex:none;cursor:pointer;margin-top:1px}
.crm-task button:hover{border-color:#047857;background:#ECFDF5}
.crm-form{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.crm-form textarea,.crm-form input{flex:1 1 220px;min-height:40px;padding:9px 12px;
  border:1px solid var(--field-line);border-radius:8px;font-size:.875rem}
.crm-form textarea{min-height:74px;flex-basis:100%;resize:vertical}
.crm-form select{min-height:40px;padding:0 10px;border:1px solid var(--field-line);border-radius:8px;font-size:.875rem}
@media (max-width:900px){ .crm-cols{grid-template-columns:1fr} }
.crm-dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:.875rem;margin:0}
.crm-dl dt{color:var(--s500);font-weight:600}
.crm-dl dd{margin:0}
.crm-row td{background:var(--s50);padding:0 !important}
.h-xs{font-family:var(--body);font-size:.75rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--s500);margin-bottom:10px}

/* ---------- hero motion control ----------
   The looping background is decorative, but a moving image that cannot be stopped is a
   WCAG 2.2 Level A failure (2.2.2 Pause, Stop, Hide). The control is always present; the
   video only starts on its own when the visitor has not asked for reduced motion. */
.motion-toggle{
  position:absolute;right:16px;bottom:16px;z-index:3;
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px 8px 11px;border-radius:999px;cursor:pointer;
  background:rgba(11,15,26,.72);border:1px solid rgba(255,255,255,.34);
  color:#fff;font-family:var(--body);font-size:.75rem;font-weight:600;letter-spacing:.02em;
  backdrop-filter:blur(6px);transition:background .15s,border-color .15s}
.motion-toggle:hover{background:rgba(11,15,26,.9);border-color:rgba(255,255,255,.6)}
.motion-toggle:focus-visible{outline:3px solid #fff;outline-offset:2px}
.motion-ico{width:12px;height:12px;flex:none;background:currentColor;
  clip-path:polygon(0 0,38% 0,38% 100%,0 100%,0 0,62% 0,100% 0,100% 100%,62% 100%)}
.motion-toggle[aria-pressed="true"] .motion-ico{clip-path:polygon(6% 0,100% 50%,6% 100%)}
@media (max-width:600px){
  .motion-toggle{right:10px;bottom:10px;padding:7px 11px 7px 9px;font-size:.6875rem}
  .motion-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
/* A link that opens a panel is a button; styled as a link so it still reads as one. */
.linkish{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;
  font-weight:600;text-decoration:underline;text-underline-offset:2px}
.linkish:hover{text-decoration-thickness:2px}
.linkish:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:3px}

/* ---------- product shot ---------- */
.product-shot{margin:0 0 44px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--s50)}
.product-shot img{display:block;width:100%;height:auto}
.product-shot figcaption{padding:16px 22px;font-size:.875rem;line-height:1.6;color:var(--s600);
  border-top:1px solid var(--line);background:#fff}
@media (max-width:600px){ .product-shot figcaption{padding:14px 16px;font-size:.8125rem} }
/* the single-vial shot beside the packing spec list */
.vial-inline{margin:0 0 24px;display:flex;align-items:center;gap:18px;
  border:1px solid var(--line);border-radius:12px;padding:14px 18px 14px 14px;background:var(--s50)}
.vial-inline img{width:78px;height:auto;flex:none;border-radius:8px}
.vial-inline figcaption{font-size:.8125rem;line-height:1.55;color:var(--s600)}

/* ---------- products priced per order ---------- */
.p.onreq{font-family:var(--body);font-size:.8125rem;color:var(--s600);text-align:left;
  font-style:normal;letter-spacing:.01em}
.onreq-card{margin:10px 0 0;font-size:.8125rem;color:var(--s600);
  border:1px dashed var(--field-line);border-radius:8px;padding:9px 12px;background:var(--s50)}
.onreq-amt{font-family:var(--body);font-size:.75rem;font-weight:700;color:var(--s600);
  letter-spacing:.02em;white-space:nowrap}
.onreq-note{margin-top:12px;color:var(--s700);border-left:3px solid var(--red);padding-left:12px}

.cbline{flex-direction:row;align-items:flex-start;gap:10px;font-weight:400;font-size:.8125rem;
  line-height:1.5;color:var(--s700)}
.cbline input{flex:none;margin-top:2px;width:16px;height:16px}

/* ---------- FDA establishment registration strip (sourcing, dark section) ---------- */
/* Registration is a fact about us, not a claim about the products. The layout keeps the
   number and the "not approval" sentence in one block so they can never be screenshotted
   apart. */
.fei{
  margin-top:44px;padding:26px 28px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.11);
  display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:14px 34px;align-items:start;
}
.fei-id{display:flex;flex-direction:column;gap:5px}
.fei-label{font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase;color:var(--s400);font-weight:600}
.fei-num{font-family:var(--mono);font-size:1.0625rem;color:#fff;letter-spacing:.01em}
.fei-scope{font-size:.8125rem;color:var(--s400);line-height:1.5}
.fei-note{font-size:.875rem;color:var(--s300);line-height:1.65;margin:0}
.fei-note strong{color:#fff}
@media (max-width:760px){
  .fei{grid-template-columns:1fr;padding:22px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   CELL SCIENCE — the patient-facing education section (/science)
   Reading-first: a narrower measure than the marketing pages, larger body text,
   and a diagram block that stays legible on a phone. Nothing here is allowed to
   look like a product page, because it is not one.
   ═══════════════════════════════════════════════════════════════════════════ */

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.wrap-reading{max-width:820px;margin-inline:auto;padding-inline:var(--gut)}
.h-xl-sm{
  font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:1.08;
  font-size:clamp(2rem,1.3rem + 3.1vw,3.15rem);margin:0 0 18px;
}

.pt{padding:120px 0 96px}
.pt-hero{max-width:760px;margin-bottom:64px}
.pt-lede-lg{font-size:1.1875rem;line-height:1.62;color:var(--muted);margin:0}

.pt-crumbs{font-size:.8125rem;color:var(--s500);margin-bottom:26px}
.pt-crumbs a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--s300)}
.pt-crumbs a:hover{color:var(--red);border-color:var(--red)}
.pt-crumbs span[aria-hidden]{margin:0 7px;color:var(--s400)}

.pt-head{margin-bottom:40px}
.pt-head .h-lg{margin-bottom:16px}

/* ── Diagram ───────────────────────────────────────────────────────────── */
.pt-fig{
  margin:0 0 52px;padding:30px 24px 22px;border:1px solid var(--line);
  border-radius:var(--r-lg);background:var(--s50);
}
.pt-fig figcaption{
  margin-top:16px;font-size:.875rem;line-height:1.6;color:var(--muted);text-align:center;
}
.pt-fig-note{display:block;margin-top:5px;font-size:.8125rem;color:var(--s500)}

.dg{
  display:block;width:100%;height:auto;max-height:340px;
  /* Diagram palette. Declared here so both the light and dark contexts inherit
     something sensible without every shape naming a literal colour. */
  --dg-cell:var(--white);
  --dg-line:var(--s400);
  --dg-accent:var(--red);
  --dg-accent-soft:var(--red-tint);
  --dg-arrow:var(--s500);
  --dg-chip:var(--s100);
  --dg-ok:var(--s500);
}
.dg .dg-lbl{
  font-family:var(--body);font-size:12.5px;font-weight:600;fill:var(--ink);
}
.dg .dg-lbl-in{fill:var(--red-dark);font-size:11.5px}
.dg .dg-on-accent{fill:#fff}
.dg .dg-cap{font-family:var(--body);font-size:11px;fill:var(--s500)}
.dg .dg-wrap{font-size:11.5px;font-weight:500}

/* ── Prose ─────────────────────────────────────────────────────────────── */
.pt-sec{margin-bottom:48px}
.pt-h{
  font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:1.375rem;margin:0 0 16px;color:var(--ink);
}
.pt-lede{font-size:.9375rem;color:var(--muted);margin:0 0 18px;line-height:1.65}
.pt-prose p{font-size:1.0625rem;line-height:1.75;color:var(--s700);margin:0 0 17px}
.pt-prose p:last-child{margin-bottom:0}

/* ── Preparations table ────────────────────────────────────────────────── */
.pt-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
.pt-table{border-collapse:collapse;width:100%;min-width:520px;font-size:.9375rem}
.pt-table th,.pt-table td{
  text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top;
}
.pt-table thead th{
  background:var(--s50);font-size:.75rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--s600);font-weight:700;
}
.pt-table tbody tr:last-child td{border-bottom:0}
.pt-sku{font-family:var(--mono);font-size:.8125rem;color:var(--red-dark);white-space:nowrap}
.pt-spec{color:var(--muted);white-space:nowrap}

/* ── Patient notice ────────────────────────────────────────────────────── */
/* Deliberately the loudest block on the page. */
.pt-notice{
  margin:56px 0;padding:28px 30px;border-radius:var(--r-lg);
  background:var(--red-tint);border:1px solid rgba(200,16,46,.22);
  border-left:4px solid var(--red);
}
.pt-notice-h{
  display:flex;align-items:center;gap:9px;
  font-family:var(--display);font-size:1.0625rem;font-weight:700;letter-spacing:-.015em;
  color:var(--red-dark);margin:0 0 14px;
}
.pt-notice-h svg{flex:none}
.pt-notice p{font-size:.9375rem;line-height:1.68;color:var(--s700);margin:0 0 12px}
.pt-notice p:last-child{margin-bottom:0}
.pt-notice strong{color:var(--red-dark)}

/* ── Hub grid ──────────────────────────────────────────────────────────── */
.pt-group{margin-bottom:56px}
.pt-group-h{
  font-family:var(--display);font-size:.8125rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--s500);margin:0 0 20px;
  display:flex;align-items:center;gap:10px;
}
.pt-group-h::after{content:"";flex:1;height:1px;background:var(--line)}
.pt-group-h span{
  order:-1;font-family:var(--mono);font-size:.75rem;color:var(--red);
  background:var(--red-tint);border-radius:99px;padding:2px 9px;letter-spacing:0;
}
.pt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:18px}
.pt-card{
  display:flex;flex-direction:column;gap:8px;padding:24px;text-decoration:none;
  border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;
  transition:border-color var(--t),box-shadow var(--t),transform var(--t);
}
.pt-card:hover{border-color:var(--s300);box-shadow:var(--shadow);transform:translateY(-2px)}
.pt-card-eyebrow{
  font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--red);font-weight:700;
}
.pt-card-h{
  font-family:var(--display);font-size:1.0625rem;font-weight:700;
  letter-spacing:-.015em;color:var(--ink);line-height:1.3;
}
.pt-card-p{font-size:.875rem;line-height:1.6;color:var(--muted);flex:1}
.pt-card-go{
  display:inline-flex;align-items:center;gap:6px;margin-top:4px;
  font-size:.8125rem;font-weight:600;color:var(--red);
}
.pt-card:hover .pt-card-go svg{transform:translateX(3px)}
.pt-card-go svg{transition:transform var(--t)}

/* ── Pager ─────────────────────────────────────────────────────────────── */
.pt-pager{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:48px 0 26px}
.pt-pager-a{
  display:flex;flex-direction:column;gap:4px;padding:18px 20px;text-decoration:none;
  border:1px solid var(--line);border-radius:var(--r);background:#fff;
  transition:border-color var(--t),box-shadow var(--t);
}
.pt-pager-a:hover{border-color:var(--s300);box-shadow:var(--shadow)}
.pt-pager-a span{font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase;color:var(--s500);font-weight:600}
.pt-pager-a b{font-family:var(--display);font-size:.9375rem;color:var(--ink);letter-spacing:-.01em;line-height:1.35}
.pt-pager-next{text-align:right}
.pt-back{margin:0;font-size:.9375rem}
.pt-back a{color:var(--muted);text-decoration:none}
.pt-back a:hover{color:var(--red)}

.pt-forclinics{padding-top:8px;border-top:1px solid var(--line)}
.pt-forclinics .pt-h{margin-top:34px}

@media (max-width:700px){
  .pt{padding:96px 0 72px}
  .pt-fig{padding:20px 12px 16px}
  .pt-notice{padding:22px 20px}
  .pt-pager{grid-template-columns:1fr}
  .pt-pager-next{text-align:left}
  .pt-prose p{font-size:1rem}
}
/* Chip labels run long in some languages; a step down in size keeps them inside
   the box instead of bleeding over the stroke. */
.dg .dg-chip-lbl{font-size:11px}

/* ---------- Language switcher ---------- */
/* A <details> disclosure rather than a scripted dropdown: it opens with the
   keyboard, it works with JavaScript off, and it needs no ARIA beyond the
   label. Nav gap is tightened around it so six links plus a switcher still fit
   before the mobile breakpoint. */
.nav-links{gap:24px}
.lang{position:relative;flex:none}
.lang > summary{
  display:flex;align-items:center;gap:6px;cursor:pointer;list-style:none;
  font-size:.8125rem;font-weight:600;color:var(--s600);
  padding:6px 10px;border:1px solid var(--line);border-radius:8px;
  transition:border-color var(--t),color var(--t);
}
.lang > summary::-webkit-details-marker{display:none}
.lang > summary:hover{color:var(--s900);border-color:var(--s300)}
.lang[open] > summary{color:var(--s900);border-color:var(--s300)}
.lang > summary:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.lang-menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:60;min-width:168px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-lg);padding:6px;display:flex;flex-direction:column;
}
.lang-menu a{
  padding:9px 12px;border-radius:6px;font-size:.875rem;color:var(--s700);
  text-decoration:none;transition:background var(--t),color var(--t);
}
.lang-menu a:hover{background:var(--s100);color:var(--s900)}
.lang-menu a.is-on{color:var(--red);font-weight:600;background:var(--red-tint)}

/* Mobile panel: a plain row, always visible — no disclosure to discover. */
.nav-langs{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.nav-lang{
  padding:8px 14px;border:1px solid var(--line);border-radius:99px;
  font-size:.875rem;font-weight:500;color:var(--s600);text-decoration:none;
}
.nav-lang.is-on{border-color:var(--red);color:var(--red);font-weight:600;background:var(--red-tint)}

/* The desktop disclosure has no place in the mobile panel and vice versa. */
@media (max-width:1080px){
  .nav-links{display:none}
}
.nav-panel .lang{display:none}

/* Localised notice on the English-only legal pages. */
.legal-en-note{
  margin:0 0 28px;padding:14px 18px;border-radius:var(--r);
  background:var(--s100);border-left:3px solid var(--s400);
  font-size:.875rem;color:var(--s700);line-height:1.6;
}
/* Labels that need to wrap live in a <foreignObject>, so they are styled as
   HTML (color, not fill) and re-flow when a translation runs longer. */
.dg-fo{
  font-family:var(--body);font-size:11.5px;font-weight:600;line-height:1.25;
  color:var(--ink);text-align:center;margin:0;
}

/* ---------- Shipper x-ray ---------- */
/* Replaces the drawn cutaway. The numbered key sits outside the image so it
   stays crisp, reaches a screen reader, and translates — text baked into a
   raster is frozen in English. */
.diagram.xray{margin:0}
.diagram.xray img{
  display:block;width:100%;height:auto;border-radius:var(--r-lg);
  background:var(--s950);
}
.xray-key{
  list-style:none;margin:18px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px 22px;
}
.xray-key li{
  display:flex;align-items:baseline;gap:9px;
  font-size:.875rem;line-height:1.5;color:var(--muted);
}
.xray-key b{
  flex:none;width:19px;height:19px;border-radius:50%;
  background:var(--red);color:#fff;
  font-size:.6875rem;font-weight:700;line-height:19px;text-align:center;
  transform:translateY(2px);
}
.diagram.xray figcaption{
  margin-top:14px;font-size:.8125rem;color:var(--s500);line-height:1.55;
}

/* ---------- Brand band ---------- */
/* Sits between the hero and the trust strip. The clip's own background is
   --s950, so `contain` letterboxes invisibly and the mark is never cropped —
   the band just needs to be that same colour. Kept short so it reads as a
   breath between sections, not a second hero. */
.brandband{
  /* Not var(--s950): h264 is limited-range, so the clip's #080F1C decodes to
     about #030B18. Using the token here leaves a visible rectangle around the
     video. This is the colour the decoder actually paints. */
  background:#030B18;
  display:flex;align-items:center;justify-content:center;
  padding:26px 0;overflow:hidden;
}
.brandband-video{
  display:block;width:100%;max-width:760px;height:auto;
  aspect-ratio:16/9;object-fit:contain;
  /* The clip is 16:9 but the mark occupies the middle third; clipping the empty
     top and bottom keeps the band from becoming a letterboxed void. */
  clip-path:inset(26% 0 26% 0);
  margin:-6.5% 0;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%);
}
@media (max-width:700px){
  .brandband{padding:14px 0}
  .brandband-video{max-width:none;width:118%}
}
@media (prefers-reduced-motion:reduce){
  .brandband-video{display:none}
  .brandband{padding:0}
}

/* ---------- Intro overlay ---------- */
/* Hidden in markup, revealed by script — see src/partials/intro.html for why. */
.intro[hidden]{display:none}
.intro{
  position:fixed;inset:0;z-index:9999;
  /* The design token, not the decoded-video colour it used to carry. The clip's own
     background is now true black and the video is composited with `screen` below, so
     black contributes nothing and this surface shows through untouched. That removes
     the reason the two ever had to be matched by hand, and it lets the overlay sit on
     exactly the same colour as the hero it hands over to. */
  background:var(--s950);
  display:flex;align-items:center;justify-content:center;
  /* Contain the blend: the video must composite against this overlay and nothing behind it. */
  isolation:isolate;
  opacity:1;transition:opacity 420ms ease;
}
.intro.is-leaving{opacity:0;pointer-events:none}
/* There is no panel here, and that is the whole point.
   The clip's background was flattened to true black at encode time, and `screen` makes
   black a no-op: result = 1-(1-video)(1-backdrop), so every background pixel returns the
   overlay colour exactly and only the mark and the cells actually paint. What used to give
   it away was that the video's background could never be matched by hand — h264 decodes
   limited-range, so the authored #080F1C arrived as roughly #030B18, and the clip's own
   glow lifted it further mid-animation while the CSS behind it stayed put. A radial mask
   used to feather that rectangle away; it is gone because there is no longer a rectangle
   to hide, and the closing fade-to-black now reads as a dissolve into the page. */
.intro-video{
  width:min(96vw,1120px);height:auto;aspect-ratio:16/9;object-fit:contain;display:block;
  mix-blend-mode:screen;
}
.intro-skip{
  position:absolute;bottom:26px;right:22px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);
  color:rgba(255,255,255,.82);border-radius:99px;
  padding:9px 18px;font:inherit;font-size:.8125rem;font-weight:600;
  cursor:pointer;transition:background var(--t),color var(--t),border-color var(--t);
}
.intro-skip:hover{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.4)}
.intro-skip:focus-visible{outline:2px solid var(--red);outline-offset:3px}
/* A visible time-remaining bar, so the wait never feels indefinite. */
.intro-progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.1)}
.intro-progress i{display:block;height:100%;width:0;background:var(--red);transition:width 120ms linear}
/* While the overlay is up the page must not scroll behind it. */
html.intro-lock,html.intro-lock body{overflow:hidden}

@media (max-width:700px){
  .intro-skip{bottom:20px;right:16px}
}
/* Someone who has asked for less motion is never shown this at all — the
   script checks the same query before revealing. */
@media (prefers-reduced-motion:reduce){
  .intro{display:none!important}
}

/* Suggested retail sits visually apart from the wholesale ladder. It is what a practice might
   charge its own patients, not a RediCell price and not a condition of supply, and putting it
   in the same visual run as the tiers invites it to be read as one more thing we charge. */
.msrp-col{color:var(--ink-2);border-left:1px solid rgba(0,0,0,.09)}
th.msrp-col{font-weight:600}
.prices .msrp-row{margin-top:6px;padding-top:6px;border-top:1px solid rgba(0,0,0,.09);color:var(--ink-2)}