/* =========================================================
   wanyoda — design system
   Authorised export partner for Chinese plasma & vaccines
   Palette: clinical green #1B4F7E (H161) — regulated biotech, not organic
   ========================================================= */

/* Self-hosted variable font: one file, latin subset, 47 KB.
   Declaring Inter without shipping it was the old bug — macOS rendered
   Helvetica Neue, Windows rendered Segoe UI, so nothing aligned across machines. */
@font-face {
  font-family: "InterVar";
  src: url("../fonts/inter-latin-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------
   Palette: navy / blood-red / white — the language of regulated
   medical export. Blue = the cross-border + regulatory system,
   red = plasma (a product index, never a UI colour),
   white = cleanroom grade.
   Ratio measured on the live page: white 58 / blue 36.5 / red 3.
   --------------------------------------------------------- */
:root {
  /* brand: blue, 5 steps */
  --brand: #1B4F7E;        /* 600 — buttons, links, emphasis   8.51:1 on white */
  --brand-dark: #16406A;   /* 700 — hover */
  --brand-deep: #0C2340;   /* 900 — dark bands,  white on it 15.79:1 */
  --brand-mid: #A9C4DC;    /* 200 — rules and strokes on dark   8.73:1 on 900 */
  --brand-light: #E8F0F7;  /* 50  — status fill, thead, callout */
  --brand-wash: #F5F8FB;   /* 25  — alternate section ground */

  /* accent: red, only four elements may use it (see palette doc §4) */
  --accent: #A32638;       /* 600 — keyword, eyebrow, product line   7.26:1 */
  --accent-deep: #7A1A29;  /* 700 — a single figure, nothing else   10.60:1 */
  --accent-light: #FBEBED; /* 50  — error fill, kept under 1% */

  /* text: four levels, only three may carry information */
  --ink: #0E1A24;      /* 17.62:1 headings */
  --body: #43556B;     /* 7.64:1  body copy */
  --muted: #54667A;    /* 5.90:1  supporting text */
  --faint: #7A8A9C;    /* 3.53:1  dividers, icons, decoration only */

  /* text on dark surfaces */
  --on-dark-1: #FFFFFF;  /* 15.79:1 */
  --on-dark-2: #CFE0F0;  /* 11.71:1 */
  --on-dark-3: #A6BFD8;  /*  8.32:1 */

  --line: #DCE6F0;
  --line-strong: #C8D8E8;

  --white: #FFFFFF;
  --bg-alt: #F5F8FB;

  /* status colours are independent of the brand colour.
     Brand blue may never be a status: on 2026-10-29 "Registered" and
     "GMP approved" collapsed into the same blue, which is exactly the
     failure this block prevents. */
  --st-open-fg: #0F6E56;       --st-open-bg: #E3F1EC;      /* 5.34:1  Open — territory available */
  --st-review-fg: #8A5A0B;     --st-review-bg: #FCF3E2;    /* 5.37:1  Under review / GMP approved */
  --st-appointed-fg: #5A6B75;  --st-appointed-bg: #EDF1F4; /* 4.87:1  Appointed / dossier ready */
  --st-reg-fg: #0F6E56;        --st-reg-bg: #E3F1EC;       /* 5.34:1  Registered — the green light */
  /* one non-status colour, reserved for the vaccine product line */
  --teal: #0E6E7A;

  --amber: #8A5A0B;
  --amber-bg: #FCF3E2;
  --slate: #5A6B75;
  --slate-bg: #EDF1F4;

  --radius: 4px;
  --radius-lg: 8px;

  --wrap: 1200px;
  --nav-h: 74px;

  --shadow-sm: 0 1px 2px rgba(14, 26, 36, .04);
  --shadow: 0 4px 16px rgba(14, 26, 36, .06);
  --shadow-lg: 0 16px 48px rgba(14, 26, 36, .10);

  /* type scale: eight steps, nothing else gets a hand-picked size */
  --fs-micro: 12px;    /* badges, table heads, footnotes — the floor */
  --fs-sm: 14px;       /* meta, table cells, hints, spec labels */
  --fs-body: 16px;     /* body copy */
  --fs-lead: 18px;     /* standfirst */
  --fs-h4: 20px;
  --fs-stat: 32px;     /* hero figures */
  --fs-h3: 26px;
  --fs-h2: 38px;
  --fs-h1: 52px;

  --lh-tight: 1.14;
  --lh-body: 1.62;
  --lh-meta: 1.5;

  --ls-tight: -.02em;
  --ls-none: 0;
  --ls-caps: .1em;

  --sans: "InterVar", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: "SF Mono", ui-monospace, "Menlo", "Consolas", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1;
}

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

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-dark); }

/* Keyboard focus must be visible everywhere — before this, only inputs had a
   state and they only changed border colour. */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  padding: 10px 16px; background: #fff; color: var(--ink);
  border: 1px solid var(--brand); font-size: var(--fs-sm); font-weight: 600;
  z-index: 999;
}
.skip-link:focus { left: 12px; top: 12px; }

h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  margin: 0 0 .5em;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -.012em; }
h4 { font-size: var(--fs-h4); letter-spacing: -.008em; }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

strong { color: var(--ink); font-weight: 600; }

ul, ol { margin: 0 0 1em; padding-left: 1.15em; }
li { margin-bottom: .45em; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
.wrap-narrow { max-width: 820px; margin: 0 auto; padding: 0 28px; }

/* ---------- utility ---------- */
.eyebrow {
  display: inline-block;
  font-size: var(--fs-micro);
  font-weight: 650;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);   /* red, kind 2 of 4 — one per section, never two per screen */
  margin-bottom: 18px;
}
.lede { font-size: var(--fs-lead); line-height: 1.66; color: var(--body); }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }
.tiny { font-size: var(--fs-micro); line-height: 1.5; }
.center { text-align: center; }
.mono { font-family: var(--mono); letter-spacing: 0; }

/* ---------- announcement ---------- */
.announce {
  background: var(--brand-deep);
  color: #CFE0F0;
  font-size: var(--fs-micro);
  letter-spacing: .02em;
  text-align: center;
  padding: 9px 20px;
}
.announce b { color: #fff; font-weight: 600; }
.announce a { color: #fff; border-bottom: 1px solid rgba(255,255,255,.35); }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 0 28px;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 34px;
}
.brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand-mark {
  width: 34px; height: 34px; flex-shrink: 0;
  display: block; object-fit: contain;
}
.brand-name {
  font-size: var(--fs-h4); font-weight: 700; letter-spacing: -.045em;
  color: var(--ink); line-height: 1;
}
.brand-name span { color: var(--brand); }
.brand-sub {
  display: block; font-size: var(--fs-micro); letter-spacing: .17em;
  text-transform: uppercase; color: var(--muted);
  font-weight: 600; margin-top: 4px;
}

.nav-links { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.nav-links a {
  font-size: var(--fs-sm); font-weight: 500; color: var(--body);
  letter-spacing: -.005em; position: relative; padding: 4px 0;
  transition: color .16s;
}
.nav-links a:hover { color: var(--brand); }
.nav-links a.active { color: var(--brand); font-weight: 600; }
.nav-links a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--brand); border-radius: 1px;
}

.nav-cta { display: flex; align-items: center; gap: 10px; }

.burger {
  display: none; width: 40px; height: 40px; border: 1px solid var(--line);
  background: #fff; border-radius: var(--radius); cursor: pointer;
  margin-left: auto; align-items: center; justify-content: center;
}
.burger span { display: block; width: 16px; height: 1.5px; background: var(--ink); position: relative; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 16px; height: 1.5px; background: var(--ink);
}
.burger span::before { top: -5px; }
.burger span::after { top: 5px; }

.mobile-menu {
  display: none; border-bottom: 1px solid var(--line);
  background: #fff; padding: 8px 28px 22px;
}
.mobile-menu.open { display: block; }
.mobile-menu a {
  display: block; padding: 13px 0; border-bottom: 1px solid var(--line);
  font-size: var(--fs-body); color: var(--ink); font-weight: 500;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px;
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: -.005em;
  border-radius: var(--radius); border: 1px solid transparent;
  cursor: pointer; transition: all .16s ease; white-space: nowrap;
  font-family: inherit;
}
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-wash); }
.btn-quiet { background: transparent; color: var(--brand); padding: 0; height: auto; }
.btn-quiet:hover { color: var(--brand-dark); }
.btn-sm { height: 36px; padding: 0 15px; font-size: var(--fs-sm); }
.btn-lg { height: 50px; padding: 0 26px; font-size: var(--fs-body); }
.btn .arw { transition: transform .16s; }
.btn:hover .arw { transform: translateX(3px); }

.link-arw { font-weight: 600; font-size: var(--fs-sm); display: inline-flex; align-items: center; gap: 6px; }
.link-arw::after { content: "→"; transition: transform .16s; }
.link-arw:hover::after { transform: translateX(3px); }

/* ---------- sections ---------- */
.section { padding: 52px 0; }
.section-sm { padding: 36px 0; }
.section-alt { background: var(--bg-alt); }
.section-dark { background: var(--brand-deep); color: #BFD4E8; }
.section-dark h1, .section-dark h2, .section-dark h3 { color: #fff; }
.section-dark .eyebrow { color: #8FB6DC; }

.section-head { max-width: 720px; margin-bottom: 32px; }
.section-head.center { margin-left: auto; margin-right: auto; }
.section-head p { font-size: var(--fs-body); }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---------- hero ---------- */
.hero { padding: 40px 0 46px; position: relative; overflow: hidden; background: var(--white); }
.hero-grid {
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: 54px; align-items: center; position: relative;
}
.hero h1 { margin-bottom: 18px; max-width: 11.5em; }
.hero h1 em { font-style: normal; color: var(--accent); }  /* red, kind 1 of 4 */
.hero-lede { font-size: var(--fs-lead); line-height: 1.58; max-width: 560px; margin-bottom: 24px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 24px; }

.hero-facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;
  padding-top: 16px; border-top: 1px solid var(--line);
}
.hero-fact .n {
  font-size: var(--fs-stat); font-weight: 600; color: var(--ink);
  letter-spacing: -.03em; line-height: 1.1; display: block;
}
.hero-fact .l {
  font-size: var(--fs-sm); color: var(--muted); letter-spacing: .015em;
  line-height: 1.4; display: block; margin-top: 3px;
}

/* hero visual */
.hero-visual { position: relative; min-height: 420px; }
.hero-card {
  position: absolute; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden;
}
.hero-card img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.hc-1 { top: 0; left: 4%; width: 60%; height: 300px; z-index: 2; }
.hc-2 { bottom: 26px; right: 0; width: 53%; height: 250px; z-index: 3; }
.hero-chip {
  position: absolute; z-index: 4; background: var(--brand-deep); color: #fff;
  border-radius: var(--radius); padding: 12px 16px; box-shadow: var(--shadow);
  font-size: var(--fs-micro); line-height: 1.45; letter-spacing: .01em;
}
.hc-chip-1 { top: 84px; right: 6%; }
.hc-chip-2 { bottom: 0; left: 0; background: #fff; color: var(--ink); border: 1px solid var(--line); }
.hero-chip b { display: block; font-size: var(--fs-sm); font-weight: 650; margin-bottom: 2px; }

/* ---------- logo strip ---------- */
.mfr-strip { padding: 30px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.mfr-strip-inner { display: flex; align-items: center; gap: 44px; flex-wrap: wrap; justify-content: space-between; }
.mfr-strip-label { font-size: var(--fs-micro); letter-spacing: .13em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.mfr-items { display: flex; gap: 40px; flex-wrap: wrap; align-items: center; }
.mfr-item { display: flex; align-items: center; gap: 10px; }
.mfr-item .dot { width: 6px; height: 6px; background: var(--brand); border-radius: 50%; flex-shrink: 0; }
.mfr-item .nm { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.mfr-item .tg { font-size: var(--fs-micro); color: var(--muted); }

/* ---------- product cards ---------- */
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pcard {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: #fff; overflow: hidden; display: flex; flex-direction: column;
  transition: all .2s ease; position: relative;
}
.pcard:hover { border-color: var(--brand-mid); box-shadow: var(--shadow); transform: translateY(-2px); }
.pcard-img {
  height: 160px; background: #FBFCFD; display: flex; align-items: center; justify-content: center;
  padding: 14px; border-bottom: 1px solid var(--line); position: relative;
}
.pcard-img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.pcard-img.no-img {
  background: repeating-linear-gradient(45deg, #FAFCFD, #FAFCFD 10px, #F2F7FA 10px, #F2F7FA 20px);
  color: var(--muted); font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase;
}
.pcard-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.pcard-cat {
  font-size: var(--fs-micro); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); font-weight: 650; margin-bottom: 7px;
}
/* product-line coding: the scarce line gets the colour, so the eye finds it.
   14 plasma SKUs stay neutral; the 2 vaccine SKUs get the only teal on the page. */
.pcard-cat[data-cat="vaccine"] { color: var(--teal); }
/* The label already reads "Vaccines" (疫苗), so appending " · vaccine" printed
   the word twice — and printed it in English on the Chinese tree. */
.pcard-cat[data-cat="vaccine"]::after { content: ""; }
.pcard h3 { font-size: var(--fs-body); margin-bottom: 4px; line-height: 1.3; }
.pcard-inn {
  font-size: var(--fs-sm); color: var(--muted); margin-bottom: 12px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pcard-meta { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.pcard-meta dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: var(--fs-micro); }
.pcard-meta dt { color: var(--muted); }
.pcard-meta dd { margin: 0; color: var(--ink); font-weight: 500; text-align: right; }

/* ---------- badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: .02em;
  padding: 4px 10px; border-radius: 3px; text-transform: uppercase;
  white-space: nowrap; line-height: 1.2;
}
.badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.badge-open { background: var(--st-open-bg); color: var(--st-open-fg); box-shadow: inset 0 0 0 1px rgba(15,110,86,.18); }
.badge-review { background: var(--st-review-bg); color: var(--st-review-fg); }
.badge-appointed { background: var(--st-appointed-bg); color: var(--st-appointed-fg); }
.badge-reg { background: var(--st-reg-bg); color: var(--st-reg-fg); }
.badge-lg { font-size: var(--fs-sm); padding: 5px 12px; }

/* ---------- cards / feature grid ---------- */
.fgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.fgrid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.fcard {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 22px 22px 24px; background: #fff;
}
.fcard .fn {
  font-family: var(--mono); font-size: var(--fs-micro); color: var(--brand);
  letter-spacing: .04em; display: block; margin-bottom: 12px;
}
.fcard h3 { font-size: var(--fs-body); margin-bottom: 10px; }
.fcard p { font-size: var(--fs-body); color: var(--body); margin: 0; line-height: 1.6; }
.fcard ul { font-size: var(--fs-sm); padding-left: 1.05em; margin: 0; }
.fcard li { margin-bottom: .3em; }

/* ---------- table ---------- */
.tbl-wrap { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: #fff; }
.tbl-scroll { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
table.tbl th {
  text-align: left; padding: 11px 18px; background: var(--bg-alt);
  font-size: var(--fs-micro); letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.tbl td { padding: 11px 18px; border-bottom: 1px solid var(--line); vertical-align: middle;
  font-size: var(--fs-sm); line-height: 1.55; }
table.tbl tr:last-child td { border-bottom: 0; }
table.tbl tbody tr:hover { background: var(--brand-wash); }
table.tbl td.nm { color: var(--ink); font-weight: 600; font-size: var(--fs-sm); }
.tbl-region-head td {
  background: var(--brand-light); color: var(--brand-dark);
  font-size: var(--fs-micro); letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; padding: 9px 18px;
}

/* ---------- compare ---------- */
.compare { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.compare-row { display: grid; grid-template-columns: 1.1fr 1fr 1.25fr; border-bottom: 1px solid var(--line); }
.compare-row:last-child { border-bottom: 0; }
.compare-row > div { padding: 12px 16px; font-size: var(--fs-sm); }
.compare-row.head { background: var(--bg-alt); }
.compare-row.head > div {
  font-size: var(--fs-micro); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); font-weight: 650;
}
.compare-row .c-us { background: var(--brand-wash); color: var(--ink); font-weight: 550; }
.compare-row > div:first-child { color: var(--muted); font-weight: 500; }

/* ---------- home: inline deliverables line ---------- */
.deliv-inline {
  margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: var(--fs-sm); color: var(--muted); line-height: 1.65; max-width: 520px;
}
.deliv-inline b { color: var(--ink); font-weight: 600; }
.deliv-inline a { text-decoration: underline; text-underline-offset: 2px; }


/* ---------- steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: s; }
.step { padding: 0 26px 0 0; border-right: 1px solid var(--line); counter-increment: s; }
.step:last-child { border-right: 0; padding-right: 0; }
.step::before {
  content: "0" counter(s);
  font-family: var(--mono); font-size: var(--fs-sm); color: var(--brand);
  display: block; margin-bottom: 14px; letter-spacing: .04em;
}
.step h3 { font-size: var(--fs-body); margin-bottom: 7px; letter-spacing: var(--ls-none); }
.step p { font-size: var(--fs-sm); margin: 0; color: var(--body); }

/* ---------- product detail ---------- */
.pd-hero { padding: 48px 0 64px; border-bottom: 1px solid var(--line); }
.crumbs { font-size: var(--fs-micro); color: var(--muted); margin-bottom: 28px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--brand); }
.crumbs .sep { opacity: .5; }
.pd-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 60px; align-items: start; }
.pd-img {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: #FBFCFD; padding: 32px; display: grid; place-items: center;
  min-height: 420px;
}
.pd-img img { max-height: 360px; width: auto; object-fit: contain; }
.pd-img.no-img { background: var(--bg-alt); color: var(--muted); font-size: var(--fs-sm); }
.pd-title { margin-bottom: 12px; font-size: var(--fs-h1); }
.pd-sub { font-size: var(--fs-body); color: var(--muted); margin-bottom: 22px; }
.pd-badges { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 26px; }
.spec { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line); }
.spec-row { display: grid; grid-template-columns: 168px 1fr; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.spec-row dt { color: var(--muted); font-size: var(--fs-sm); }
.spec-row dd { margin: 0; color: var(--ink); font-weight: 500; }
.pd-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.pd-note {
  margin-top: 26px; padding: 16px 18px; background: var(--brand-wash);
  border-left: 2px solid var(--brand); font-size: var(--fs-sm); color: var(--body);
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* ---------- doc list ---------- */
.doclist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.docitem {
  display: flex; align-items: flex-start; gap: 11px; font-size: var(--fs-sm);
  padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; color: var(--ink);
}
.docitem .ic { color: var(--brand); flex-shrink: 0; margin-top: 2px; }

/* ---------- cta band ---------- */
.cta-band { background: var(--brand-deep); padding: 56px 0; position: relative; overflow: hidden; }
.cta-band::after {
  content: ""; position: absolute; right: -120px; bottom: -180px;
  width: 460px; height: 460px; border-radius: 50%;
  border: 1px solid rgba(169,196,220,.16);
  box-shadow: 0 0 0 60px rgba(169,196,220,.05), 0 0 0 120px rgba(169,196,220,.03);
}
.cta-band h2 { color: #fff; margin-bottom: 16px; }
.cta-band p { color: #B0CBE2; font-size: var(--fs-body); max-width: 560px; }
.cta-band .cta-actions { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.cta-band .btn-primary { background: #fff; color: var(--brand-deep); }
.cta-band .btn-primary:hover { background: var(--brand-light); color: var(--brand-deep); }
.cta-band .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }
.cta-band .btn-ghost:hover { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.5); }

/* ---------- forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); letter-spacing: -.005em; }
.field label .req { color: var(--brand); }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: var(--fs-sm); color: var(--ink);
  padding: 11px 13px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: #fff; transition: border-color .16s, box-shadow .16s; width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(15,110,86,.09);
}
.field textarea { min-height: 110px; resize: vertical; }
.field .hint { font-size: var(--fs-micro); color: var(--muted); }
.form-card {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 34px; background: #fff;
}

/* ---------- filter bar ---------- */
.filters { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin-bottom: 34px; }
.chip {
  font-family: inherit; font-size: var(--fs-sm); font-weight: 550; color: var(--body);
  background: #fff; border: 1px solid var(--line-strong); border-radius: 100px;
  padding: 7px 15px; cursor: pointer; transition: all .15s;
}
.chip:hover { border-color: var(--brand); color: var(--brand); }
.chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.filter-label { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 650; margin-right: 4px; }

/* ---------- footer ---------- */
.footer { background: #07131F; color: #8FA9C4; padding: 52px 0 26px; font-size: var(--fs-sm); }
.footer-top { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 36px; padding-bottom: 34px; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer .brand-name { color: #fff; }
.footer .brand-name span { color: #8FB6DC; }
.footer .brand-sub { color: #7B93AE; }
.footer-desc { margin-top: 16px; max-width: 300px; color: #7B93AE; line-height: 1.6; }
.footer h5 {
  color: #fff; font-size: var(--fs-micro); letter-spacing: .12em; text-transform: uppercase;
  margin: 0 0 16px; font-weight: 650;
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 7px; }
.footer a { color: #8FA9C4; }
.footer a:hover { color: #fff; }
.footer-bottom { padding-top: 26px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-size: var(--fs-micro); color: #7B93AE; }
.footer-legal { max-width: 700px; line-height: 1.6; }
.footer-legal strong { color: #8FB6DC; font-weight: 600; }

/* ---------- misc ---------- */
.note-box {
  border: 1px solid var(--line); border-left: 2px solid var(--brand-mid);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 18px 20px; background: var(--brand-wash); font-size: var(--fs-sm);
}
.tag-row { display: flex; gap: 6px; flex-wrap: wrap; }
.tag {
  font-size: var(--fs-micro); padding: 3px 9px; border-radius: 3px;
  background: var(--brand-light); color: var(--brand-dark); font-weight: 550;
}
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.asym { display: grid; grid-template-columns: .85fr 1.15fr; gap: 52px; align-items: start; }

/* Entrance animation is pure CSS with fill-mode both: content is visible the
   moment it exists, no script, no observer, no chance of a blank section. */
.reveal { animation: revealUp .55s cubic-bezier(.22,.61,.36,1) both; }
.reveal:nth-child(2) { animation-delay: .05s; }
.reveal:nth-child(3) { animation-delay: .1s; }
.reveal:nth-child(4) { animation-delay: .15s; }
.reveal:nth-child(5) { animation-delay: .2s; }
.reveal:nth-child(6) { animation-delay: .25s; }
@keyframes revealUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero-visual { min-height: 400px; max-width: 540px; }
  .pgrid { grid-template-columns: repeat(2, 1fr); }
  .fgrid-4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 32px 0; }
  .step:nth-child(2n) { border-right: 0; padding-right: 0; }
  .step { padding-right: 24px; }
  .pd-grid { grid-template-columns: 1fr; gap: 36px; }
  .two-col, .asym { grid-template-columns: 1fr; gap: 36px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; }
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .burger { display: flex; }
  .compare-row { grid-template-columns: 1fr 1fr 1.2fr; }
  .compare-row > div { padding: 13px 14px; font-size: var(--fs-sm); }
}

@media (max-width: 680px) {
  :root { --fs-h1: 32px; --fs-h2: 26px; --fs-h3: 20px; --fs-h4: 18px; }
  body { font-size: var(--fs-body); }
  .section { padding: 62px 0; }
  .section-sm { padding: 46px 0; }
  .hero { padding: 44px 0 56px; }
  .wrap, .wrap-narrow, .nav-inner { padding: 0 20px; }
  .pgrid { grid-template-columns: 1fr; }
  .fgrid, .fgrid-4, .doclist, .form-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .step { border-right: 0; padding: 0 0 0 0; border-bottom: 1px solid var(--line); padding-bottom: 24px; }
  .step:last-child { border-bottom: 0; }
  .hero-facts { gap: 22px; }
  .hero-visual { min-height: 340px; }
  .hc-1 { height: 220px; }
  .hc-2 { height: 180px; }
  .hc-chip-1 { top: 60px; }
  .compare-row { grid-template-columns: 1fr; }
  .compare-row.head { display: none; }
  .compare-row > div::before { content: attr(data-label); display: block; font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 3px; }
  .spec-row { grid-template-columns: 1fr; gap: 3px; }
  .footer-top { grid-template-columns: 1fr; }
  .cta-band .cta-actions .btn { width: 100%; }
  .form-card { padding: 22px; }
  .mfr-items { gap: 18px; }
  .mfr-strip-inner { gap: 16px; }
}

/* ---------- faq ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 19px 34px 19px 0;
  font-size: var(--fs-body); font-weight: 600; color: var(--ink);
  position: relative; letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 17px;
  font-size: var(--fs-lead); color: var(--brand); font-weight: 400;
  transition: transform .2s;
}
.faq details[open] summary::after { content: "−"; }
.faq summary:hover { color: var(--brand); }
.faq-body { padding: 0 40px 18px 0; font-size: var(--fs-sm); color: var(--body); line-height: 1.65; }
.faq details[open] summary { color: var(--brand-dark); }

/* credential cards now use .cred (see below) */

/* ---------- record list ---------- */
.record { border-top: 1px solid var(--line); }
.record-row {
  display: grid; grid-template-columns: 92px 1fr auto; gap: 20px;
  padding: 17px 0; border-bottom: 1px solid var(--line); align-items: baseline;
}
.record-row .yr { font-family: var(--mono); font-size: var(--fs-sm); color: var(--brand); }
.record-row .ev { font-size: var(--fs-sm); color: var(--ink); font-weight: 500; }
.record-row .ev span { display: block; font-size: var(--fs-sm); color: var(--muted); font-weight: 400; margin-top: 2px; }
.record-row .lb { font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }

@media (max-width: 680px) {
  .record-row { grid-template-columns: 66px 1fr; gap: 10px; }
  .record-row .lb { grid-column: 2; }
}

/* If scripting is unavailable, never hide content */
@media (scripting: none) {
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- responsive content grids (were inline, broke on mobile) ---------- */
.mandate-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.mfr-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: start; }
.contact-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 52px; align-items: start; }

@media (max-width: 1024px) {
  .mandate-grid { grid-template-columns: repeat(2, 1fr); }
  .mfr-grid, .contact-grid { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 680px) {
  .mandate-grid { grid-template-columns: 1fr; }
}

/* three-up feature grid + grid items must never force their track wider */
.fgrid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.fcard, .fcard > * { min-width: 0; }
@media (max-width: 1024px) { .fgrid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .fgrid-3 { grid-template-columns: 1fr; } }

/* mandate document: fill the page body with text rules */
.mandate-lines { flex: 1; gap: 8px; justify-content: space-between; padding-bottom: 30px; }
.mandate-doc { display: flex; flex-direction: column; }
/* lift body copy on dark sections for readability */
.section-dark .fcard p { color: #B4CFE4; }
.section-dark .fcard h3 { color: #fff; }

/* radio chips need a visible selected state */
label.chip:has(input:checked) {
  background: var(--brand-light);
  border-color: var(--brand);
  color: var(--brand-dark);
  font-weight: 600;
}
label.chip:has(input:checked) input { accent-color: var(--brand); }

/* =========================================================
   Revision pass — WP2 components + WP3 page blocks
   ========================================================= */

/* ---------- tap targets: visual size unchanged, hit area 44px ---------- */
.nav-links a { padding-block: 12px; }
.footer a { padding-block: 11px; display: inline-block; }
input:not([type="radio"]):not([type="checkbox"]), select, textarea { min-height: 44px; }
.chip { min-height: 45px; display: inline-flex; align-items: center; padding-block: 0; }
.brand { min-height: 44px; }
.burger { width: 44px; height: 44px; }
/* standalone links (not inline in a sentence) get a real 44px box */
.announce { padding-block: 3px; }
.announce a, .link-arw, .crumbs a, .cred-foot a, .card-foot a, .cred .foot a {
  display: inline-flex; align-items: center; min-height: 44px;
}
.crumbs { min-height: 44px; }
.fcard li a, .fcard .spec dd a { display: inline-flex; align-items: center; min-height: 44px; }
.fcard li { margin-bottom: 0; }

.link-arw { margin-top: 0 !important; }
@media (pointer: coarse) {
  .nav-links a, .footer a { padding-block: 14px; }
}
@media (max-width: 680px) {
  .btn { min-height: 44px; }
  .btn-sm { min-height: 44px; }
}

/* ---------- mobile: table becomes a stack of cards ---------- */
@media (max-width: 680px) {
  .tbl-wrap { border: 0; border-radius: 0; background: none; overflow: visible; }
  .tbl-wrap table.tbl, .tbl-wrap tbody, .tbl-wrap tr, .tbl-wrap td { display: block; width: auto; }
  .tbl-wrap thead { display: none; }
  .tbl-wrap tbody tr {
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 14px 16px; margin-bottom: 10px; background: #fff;
  }
  .tbl-wrap tbody tr:last-child { margin-bottom: 0; }
  .tbl-wrap tbody tr:hover { background: #fff; }
  .tbl-wrap td {
    display: grid; grid-template-columns: 88px minmax(0, 1fr);
    gap: 10px; align-items: baseline; padding: 7px 0; border: 0;
  }
  .tbl-wrap td::before {
    content: attr(data-label); flex: 0 0 auto;
    font-size: var(--fs-micro); letter-spacing: .04em; text-transform: uppercase;
    color: var(--muted);
  }
  .tbl-wrap td.nm > .tiny { grid-column: 2; }
  .tbl-wrap td.cell-cta { display: block; margin-top: 12px; }
  .tbl-wrap td.cell-cta::before { display: none; }
  .tbl-wrap td.cell-cta .btn { width: 100%; }
  .tbl-wrap tr.tbl-region-head {
    border: 0; border-radius: 0; padding: 18px 2px 8px; margin: 0; background: none;
  }
  .tbl-wrap tr.tbl-region-head td { display: block; padding: 0; background: none; }
  .tbl-wrap tr.tbl-region-head td::before { display: none; }
}

/* ---------- open territories list (home, screen 2) ---------- */
.open-list { border-top: 1px solid var(--line-strong); }
.open-list .head,
.open-row { display: grid; grid-template-columns: 1.05fr 1.5fr auto auto; gap: 18px; align-items: center; }
.open-list .head {
  padding: 10px 0; border-bottom: 1px solid var(--line);
  font-size: var(--fs-micro); letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.open-row { padding: 12px 0; border-bottom: 1px solid var(--line); }
.open-row .mk { font-size: var(--fs-h4); font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.open-row .pd { font-size: var(--fs-sm); color: var(--muted); }
.open-row .rg { font-size: var(--fs-micro); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--muted); }
.open-row .go { font-size: var(--fs-sm); font-weight: 600; color: var(--brand); white-space: nowrap; }
.open-row .go::after { content: " →"; }
.open-row:hover { background: var(--brand-wash); }
@media (max-width: 680px) {
  .open-list .head { display: none; }
  .open-row { grid-template-columns: 1fr auto; gap: 4px 14px; padding: 14px 0; }
  .open-row .pd { grid-column: 1 / -1; }
  .open-row .rg { display: none; }
}

/* ---------- evidence band: the third section tone ---------- */
.band { background: var(--brand-deep); padding: 44px 0 40px; }
.band-head { margin-bottom: 26px; }
.band-head .eyebrow { color: #8FB6DC; }
.band-head h2 { color: #fff; }
.band-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px;
  padding-top: 24px; border-top: 1px solid rgba(255,255,255,.14); }
.band-item .n {
  display: block; font-size: var(--fs-stat); font-weight: 600;
  color: var(--on-dark-1); letter-spacing: -.02em; line-height: 1.05;
}
.band-item .l { display: block; font-size: var(--fs-sm); color: var(--on-dark-3); margin-top: 7px; max-width: 220px; line-height: 1.5; }
.band-foot { margin-top: 26px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.band-note { margin: 0; max-width: 620px;
  font-size: var(--fs-micro); color: var(--on-dark-3); }
.band .btn-ghost { background: transparent; border-color: rgba(255,255,255,.32); color: #fff; }
.band .btn-ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.5); color: #fff; }
@media (max-width: 900px) { .band-inner { grid-template-columns: repeat(2, 1fr); gap: 26px; } }
@media (max-width: 680px) {
  .hero-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
  .hero-fact .l { max-width: 150px; }
}
@media (max-width: 680px) {
  .band-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
  .band-head { margin-bottom: 20px; }
  .band-foot { margin-top: 22px; }
}

/* ---------- service matrix ---------- */
.svc-matrix th:not(:first-child), .svc-matrix td:not(:first-child) { text-align: center; }
.svc-matrix td:first-child { font-weight: 600; color: var(--ink); }
.mk-dot { font-size: var(--fs-body); line-height: 1; }
.mk-dot.full { color: var(--brand); }
.mk-dot.part { color: var(--st-review-fg); }
.mk-dot.none { color: var(--faint); }
.matrix-legend { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 14px; font-size: var(--fs-micro); color: var(--muted); }
.matrix-legend span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- responsibility split: was a 12px footnote ---------- */
.resp-split { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 22px;
  border-top: 1px solid var(--line); padding-top: 18px; }
.resp-split h4 { font-size: var(--fs-micro); letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--muted); margin: 0 0 6px; font-weight: 600; }
.resp-split p { font-size: var(--fs-sm); line-height: 1.55; margin: 0; color: var(--body); }
@media (max-width: 680px) { .resp-split { grid-template-columns: 1fr; gap: 14px; } }

/* ---------- manufacturer record cards ---------- */
.mfr-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; padding: 24px; }
.mfr-card .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.mfr-card h3 { font-size: var(--fs-h4); margin: 0 0 4px; }
.mfr-card .code { font-family: var(--mono); font-size: var(--fs-micro); color: var(--muted); }
.mfr-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.mfr-facts b { display: block; font-size: var(--fs-body); color: var(--ink); font-weight: 600; line-height: 1.3; }
.mfr-facts span { display: block; font-size: var(--fs-micro); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
.mfr-card p { font-size: var(--fs-sm); line-height: 1.6; }
.mfr-record { margin-top: 14px; background: var(--brand-light); border-radius: 6px; padding: 12px 14px;
  font-size: var(--fs-sm); color: var(--brand-dark); line-height: 1.5; }
.mfr-record b { color: var(--brand-dark); font-weight: 600; }

/* ---------- product detail: registration status as the lead ---------- */
.pd-status { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.pd-status .hd { padding: 12px 16px; background: var(--bg-alt);
  font-size: var(--fs-micro); letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--muted); font-weight: 600; }
.pd-status .row { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 16px; border-top: 1px solid var(--line); }
.pd-status .row .mk { font-size: var(--fs-h4); font-weight: 600; color: var(--ink); }
.pd-status .row .sub { display: block; font-size: var(--fs-micro); color: var(--muted); font-weight: 400; margin-top: 2px; }
.pd-status .row a { font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
.pd-docs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.pd-docs span { font-size: var(--fs-micro); color: var(--muted); border: 1px solid var(--line); border-radius: 3px; padding: 5px 9px; }
.pd-img { aspect-ratio: 4 / 5; min-height: 0; padding: 24px; }
.pd-img img { max-height: 100%; }
@media (max-width: 680px) { .pd-img { aspect-ratio: 16 / 10; } }

/* ---------- credential card: honest, replaces the mock document ---------- */
.cred { border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; padding: 26px; display: flex; flex-direction: column; }
.cred .tag { font-size: var(--fs-micro); letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--brand); font-weight: 600; margin-bottom: 12px; }
.cred h3 { font-size: var(--fs-h4); margin: 0 0 6px; }
.cred .issuer { font-size: var(--fs-sm); color: var(--body); }
.cred dl { margin: 18px 0 0; border-top: 1px solid var(--line); }
.cred dl div { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.cred dt { font-size: var(--fs-sm); color: var(--muted); }
.cred dd { margin: 0; font-size: var(--fs-sm); color: var(--ink); font-weight: 500; text-align: right; }
.cred .foot { margin-top: auto; padding-top: 18px; font-size: var(--fs-micro); color: var(--muted); line-height: 1.5; }
.cred .foot a { font-weight: 600; }

/* ---------- forms: grouping + error state ---------- */
.form-card fieldset { border: 0; padding: 0; margin: 0 0 26px; }
.form-card fieldset:last-of-type { margin-bottom: 8px; }
.form-card legend { padding: 0; margin-bottom: 14px; font-size: var(--fs-micro); letter-spacing: var(--ls-caps);
  text-transform: uppercase; color: var(--muted); font-weight: 600; }
.field .hint.full { grid-column: 1 / -1; margin-top: -4px; }
.field input:user-invalid, .field textarea:user-invalid, .field select:user-invalid { border-color: #A32638; }
.field .err { display: none; color: #A32638; font-size: var(--fs-micro); }
.field.is-error .err { display: block; }

/* neutral category chip (kept for product detail hero) */
.badge-plain { background: var(--bg-alt); color: var(--body); }
.badge-plain::before { display: none; }

/* structure diagram wrapper (was a table shell) */
.struct-wrap { border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; padding: 34px 24px; }
@media (max-width: 680px) { .struct-wrap { padding: 18px 12px; } }

.open-row { color: inherit; }
.open-row:hover { color: inherit; }
.home-open-cta { margin-top: 22px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

/* ---------- service packages: compare first, then expand ---------- */
.svc { border-top: 1px solid var(--line); }
.svc:last-of-type { border-bottom: 1px solid var(--line); }
.svc summary {
  list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 16px;
  max-width: var(--wrap); margin: 0 auto; padding: 16px 28px; position: relative;
}
.svc summary::-webkit-details-marker { display: none; }
.svc summary::after { content: "+"; margin-left: auto; color: var(--brand); font-size: var(--fs-h4); line-height: 1; }
.svc[open] summary::after { content: "\2212"; }
.svc summary:hover { background: var(--brand-wash); }
.svc-no { font-family: var(--mono); font-size: var(--fs-sm); color: var(--brand); }
.svc-name { font-size: var(--fs-h4); font-weight: 600; color: var(--ink); letter-spacing: -.01em; margin: 0; }
.svc-body { padding-top: 6px; padding-bottom: 36px; }
details.svc + hr.rule { display: none; }
@media (max-width: 680px) { .svc summary { padding: 16px 20px; } }

.mfr-list { display: grid; gap: 20px; }

.hint-line { margin: 10px 0 0; font-size: var(--fs-micro); color: var(--muted); }

/* the tag inside a credential card is a label, not the generic .tag chip */
.cred .tag { background: none; padding: 0; border-radius: 0; display: block; }

/* grid items stretch by default — keep status pills at their natural width */
@media (max-width: 680px) {
  .tbl-wrap td .badge { justify-self: start; }
}

/* =========================================================
   Language switch
   The two language trees are real URLs, so the switch is a
   plain link pair — no JS, no flash, and a Chinese page can be
   sent to a factory while the English one goes to a buyer.
   ========================================================= */
.lang-switch {
  display: inline-flex; align-items: center; flex-shrink: 0;
  padding: 3px; gap: 2px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--white);
  font-size: var(--fs-micro); font-weight: 600; line-height: 1;
}
.lang-switch > span,
.lang-switch > a {
  display: block; padding: 5px 11px; border-radius: 999px;
  color: var(--muted); text-decoration: none;
  transition: color .16s, background .16s;
}
.lang-switch > a:hover { color: var(--brand); background: var(--brand-wash); }
.lang-switch > .on { background: var(--brand); color: #fff; }  /* 8.51:1 */

/* the horizontal nav is replaced by the burger below 1024px,
   and the mobile menu carries its own switch */
/* ".nav" also wraps the mobile menu, so scoping this to .nav-inner is what
   keeps the switch reachable when the horizontal nav collapses. */
@media (max-width: 1024px) {
  .nav-inner .lang-switch { display: none; }
}

.mobile-menu .lang-switch {
  margin-top: 16px; padding: 0; gap: 8px; border: 0;
  font-size: var(--fs-sm);
}
.mobile-menu .lang-switch > span,
.mobile-menu .lang-switch > a {
  padding: 8px 18px; border: 1px solid var(--line-strong);
}
.mobile-menu .lang-switch > .on { border-color: var(--brand); }

/* =========================================================
   Chinese (zh-CN) typography
   The Latin system is tuned for Inter: negative tracking on
   headings, +.10em~.17em on micro labels. Applied to Chinese the
   positive tracking strands characters apart and the negative
   tracking collides them. Tracking is therefore reset once here,
   leading is opened up, and display sizes drop one step so a CN
   headline carries the same visual weight as the EN original.
   Inter still leads the stack: dosages, approval numbers and
   product codes keep Latin metrics.
   ========================================================= */
html[lang^="zh"] {
  --sans: "InterVar", "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC",
          "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  --lh-body: 1.78;
  --lh-tight: 1.34;
  --lh-meta: 1.6;
  --fs-h1: 46px;
  --fs-h2: 34px;
  --fs-h3: 23px;
  --fs-h4: 19px;
  --fs-lead: 17px;
}

html[lang^="zh"] * { letter-spacing: normal !important; }

/* the two places where tracking is still doing work */
html[lang^="zh"] .brand-name { letter-spacing: -.04em !important; }
html[lang^="zh"] .eyebrow { letter-spacing: .07em !important; }
html[lang^="zh"] .brand-sub { letter-spacing: .09em !important; }

/* No text-wrap: balance on Chinese headings. Balance splits the two lines
   evenly, and in CJK that means cutting inside a word — the hero h1 broke
   "生产" across lines. Greedy wrapping fills line one and leaves the break
   at a natural boundary. */
html[lang^="zh"] h1, html[lang^="zh"] h2 { text-wrap: wrap; }
html[lang^="zh"] p, html[lang^="zh"] li { text-align: left; }

@media (max-width: 680px) {
  /* must win over the :root override above — hence the same selector
     the display-size block uses, declared later */
  html[lang^="zh"] {
    --fs-h1: 30px;
    --fs-h2: 24px;
    --fs-h3: 19px;
    --fs-h4: 17px;
  }
}

/* Product-scope lists are separated by " · ". Without keep-all the browser
   breaks inside product names — 免疫球蛋/白, 纤维蛋白/原 — because CJK may break
   between any two characters. Keep-all still breaks at the separators, which
   is the only place a list should break. */
html[lang^="zh"] dt + dd,
html[lang^="zh"] .pcard-inn,
html[lang^="zh"] .mfr-item .tg {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* Product-scope lists are separated by " · ". Without keep-all the browser
   breaks inside product names — 免疫球蛋/白, 纤维蛋白/原 — because CJK may break
   between any two characters. Keep-all still breaks at the separators, which
   is the only place a list should break. */
html[lang^="zh"] dt + dd,
html[lang^="zh"] .pcard-inn,
html[lang^="zh"] .mfr-item .tg {
  word-break: keep-all;
  overflow-wrap: break-word;
}


/* Keep-all on the value widened its min-content and squeezed the label down to
   one character per line ("范" over "围"). The label column must not shrink. */
html[lang^="zh"] .cred dt {
  flex-shrink: 0;
  white-space: nowrap;
}

/* =========================================================
   Audit fixes — 2026-10-30
   Blocks below exist because of a specific, measured defect.
   ========================================================= */

/* ---------- static lists need a real hidden state ----------
   .pcard sets display:flex and .tbl-wrap tr is display:block on mobile, so the
   UA rule for [hidden] loses on specificity and hidden cards stayed visible
   after filtering. Declared here, after both, to win. */
.pcard[hidden],
.open-row[hidden],
.tbl-wrap tr[hidden] { display: none; }

/* ---------- product imagery: one ratio, one ground ----------
   The 15 manufacturer photos arrived at five different aspect ratios
   (900x900, 900x684, 900x599, 900x597, 900x719) with their own grey studio
   ground. Displayed with "height:160px + contain", one row of three cards
   showed three different optical product sizes on two different backgrounds.
   The files are now normalised to a single 1200x900 white canvas
   (tools/normalise-images.py), so the card can simply take the ratio and let
   the image fill it — no letterboxing, no double ground. */
.pcard-img {
  height: auto;
  aspect-ratio: 4 / 3;
  padding: 0;
  background: #fff;
}
.pcard-img img { width: 100%; height: 100%; object-fit: cover; }
.pcard-img.no-img { aspect-ratio: 4 / 3; }

.pd-img { aspect-ratio: 4 / 3; padding: 0; background: #fff; }
.pd-img img { width: 100%; height: 100%; max-height: none; object-fit: contain; }

/* hero cards sit on the same white ground as the normalised images */
.hero-card { background: #fff; }
.hero-card img { object-fit: contain; padding: 6px; }

/* ---------- footer: Chinese licence block ----------
   A site that names prescription products has to state who is licensed to
   publish that information. These four items are mandatory in China and were
   absent from all 18 pages. */
.footer-cred {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
  padding: 16px 0 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  font-size: var(--fs-micro);
  line-height: 1.7;
  color: #7B93AE;
}
.footer-cred b { color: #8FB6DC; font-weight: 600; margin-right: 6px; }
.footer-cred a { color: #8FA9C4; }
.footer-cred a:hover { color: #fff; }
/* Unfilled fields are marked, not hidden: a missing licence number must never
   look like a present one. */
.todo {
  font-style: normal;
  color: #E3B368;
  border-bottom: 1px dashed rgba(227, 179, 104, .55);
  padding-bottom: 1px;
}

/* ---------- legal prose ---------- */
.legal-prose h2 { font-size: var(--fs-h3); margin: 40px 0 12px; }
.legal-prose h3 { font-size: var(--fs-h4); letter-spacing: -.005em; margin: 28px 0 10px; }
.legal-prose p,
.legal-prose li { font-size: var(--fs-body); }
.legal-prose ul { padding-left: 1.15em; }
.legal-prose > h2:first-child,
.legal-prose > div > h2:first-child { margin-top: 0; }
.legal-prose code {
  font-family: var(--mono);
  font-size: .92em;
  background: var(--brand-wash);
  padding: 1px 5px;
  border-radius: 3px;
}
/* The Chinese half of privacy.html lives inside a div[lang], so the
   html[lang^="zh"] typography block never reaches it. */
[lang="zh-CN"] {
  --lh-body: 1.78;
  line-height: 1.78;
}
[lang="zh-CN"] h2,
[lang="zh-CN"] h3 { letter-spacing: normal; }
[lang="zh-CN"] p { text-align: left; }

/* ---------- brand mark at nav size ----------
   34px forced three Han characters plus a capsule into ten pixels each, which
   renders as a green smudge. 40px plus the compact mark (glyph only, no
   lettering) keeps the identity legible without touching the full asset. */
.brand-mark { width: 40px; height: 40px; }

/* ---------- product detail: stop the left column from running dry ----------
   The record's right column (status card + 8 spec rows + two CTAs + note) is
   roughly twice the height of the image block. With a 4:3 image that left
   ~500px of empty white under the photo on every one of the 32 pages. Sticky
   keeps the product beside whatever specification is being read. */
@media (min-width: 1025px) {
  .pd-grid > div:first-child {
    position: sticky;
    top: calc(var(--nav-h) + 24px);
    align-self: start;
  }
}

/* ---------- services: the coverage matrix on a phone ----------
   Rendered as a data table it became 25 stacked label/value rows (5 packages x
   4 coverage columns), each label pushed hard right against an 88px column and
   the dot floating beside it. 1,600px of scroll to compare five dashboards.
   Restacked as one row per package: name on the left, four short-labelled dots
   in a fixed grid. The dot stays the signal; the abbreviation is only there so
   the column can be read without the desktop header. */
@media (max-width: 680px) {
  .tbl-wrap table.svc-matrix,
  .tbl-wrap table.svc-matrix tbody { display: block; }
  .tbl-wrap table.svc-matrix thead { display: none; }
  .tbl-wrap table.svc-matrix tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(4, 46px);
    align-items: center;
    gap: 0 2px;
    padding: 12px 14px;
    margin-bottom: 8px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
  }
  .tbl-wrap table.svc-matrix tr:last-child { margin-bottom: 0; }
  .tbl-wrap table.svc-matrix td {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 0;
    border: 0;
  }
  .tbl-wrap table.svc-matrix td::before {
    content: attr(data-abbr);
    order: 2;
    font-size: 9px;
    line-height: 1.1;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .tbl-wrap table.svc-matrix td:first-child {
    align-items: flex-start;
    padding-right: 6px;
    font-size: var(--fs-sm);
    line-height: 1.35;
    font-weight: 600;
    color: var(--ink);
  }
  .tbl-wrap table.svc-matrix td:first-child::before { display: none; }
  .tbl-wrap table.svc-matrix .mk-dot { order: 1; font-size: 15px; line-height: 1; }
}

/* ---------- announcement bar on a phone ----------
   At 390px the full audience sentence ran to three lines and pushed the nav
   below 100px of navy text before any content appeared. The qualifier stays in
   the HTML and in the desktop layout; on small screens the sentence that
   matters (B2B only, importers and distributors) survives alone. */
@media (max-width: 680px) {
  .announce { font-size: 11px; line-height: 1.45; padding: 7px 16px; }
  .announce-more { display: none; }
}

/* ---------- territory tables on a phone ----------
   Both the opportunity table and the per-product open-territory table were
   being card-stacked with one label/value row per field, each wrapped in a
   rule, plus a full-width button: ~310px per record, 33 records, 16,000px of
   page. Rebuilt around what the reader actually scans — the market and its
   status on the first line, the product under it, the note as small print.
   Labels disappear because position now carries the meaning. */
@media (max-width: 680px) {
  .tbl-wrap table.tbl-opp tbody tr:not(.tbl-region-head) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "market status"
      "product product"
      "note note"
      "cta cta";
    align-items: center;
    gap: 3px 12px;
    padding: 13px 15px;
    border-radius: var(--radius-lg);
  }
  .tbl-wrap table.tbl-opp tbody tr:not(.tbl-region-head) td {
    display: block;
    padding: 0;
    border: 0;
  }
  .tbl-wrap table.tbl-opp tbody tr:not(.tbl-region-head) td::before { display: none; }
  .tbl-wrap table.tbl-opp td:nth-child(1) { grid-area: product; }
  .tbl-wrap table.tbl-opp td:nth-child(2) {
    grid-area: market;
    font-size: var(--fs-h4);
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -.01em;
  }
  .tbl-wrap table.tbl-opp td:nth-child(3) { grid-area: status; justify-self: end; }
  .tbl-wrap table.tbl-opp td:nth-child(4) { grid-area: note; }
  .tbl-wrap table.tbl-opp td.cell-cta { grid-area: cta; margin-top: 8px; }

  .tbl-wrap table.tbl-terr tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "market status"
      "note note"
      "cta cta";
    align-items: center;
    gap: 3px 12px;
    padding: 13px 15px;
  }
  .tbl-wrap table.tbl-terr tbody tr td {
    display: block;
    padding: 0;
    border: 0;
  }
  .tbl-wrap table.tbl-terr tbody tr td::before { display: none; }
  .tbl-wrap table.tbl-terr td:nth-child(1) {
    grid-area: market;
    font-size: var(--fs-h4);
    font-weight: 600;
    color: var(--ink);
  }
  .tbl-wrap table.tbl-terr td:nth-child(2) { grid-area: status; justify-self: end; }
  .tbl-wrap table.tbl-terr td:nth-child(3) { grid-area: note; }
  .tbl-wrap table.tbl-terr td.cell-cta { grid-area: cta; margin-top: 8px; }

  /* the product cell carries the manufacturer as a sub-line */
  .tbl-wrap table.tbl-opp td.nm { font-size: var(--fs-sm); color: var(--body); font-weight: 400; }
  .tbl-wrap table.tbl-opp td.nm .tiny { display: inline !important; margin: 0 0 0 6px !important; }
}

/* Manufacturer under the product name, on its own line: inline it read as part
   of the product title ("...Injection China Resources Boya"), and the Apply
   button stretched the full 330px for a two-word label, once per record. */
@media (max-width: 680px) {
  .tbl-wrap table.tbl-opp td.nm .tiny {
    display: block !important;
    margin: 2px 0 0 !important;
  }
  .tbl-wrap table.tbl-opp td.cell-cta .btn,
  .tbl-wrap table.tbl-terr td.cell-cta .btn {
    width: auto;
    justify-self: start;
    padding-inline: 20px;
  }
}

/* One line, or it is not an announcement. Even trimmed, the bar wrapped to two
   lines at 390px because the inline link was given a 44px flex box. The link
   is still in the DOM and in every desktop layout; on a phone the footer
   carries the same route. */
@media (max-width: 680px) {
  .announce-link { display: none; }
  .announce b { display: inline; }
  /* text-wrap:balance split the red phrase itself ("plasma / and vaccine"),
     which is worse than the original break. Keeping the emphasis phrase on one
     line fixes the cause: it is one unit of meaning and must break outside it. */
  .hero h1 em { white-space: nowrap; }
}

/* Below 360px the emphasised phrase no longer fits on one line, so let it wrap
   rather than overflow the viewport. */
@media (max-width: 359px) {
  .hero h1 em { white-space: normal; }
}

/* ---------- ≤400px: manufacturer fact strip ----------
   Three-across is the right shape at 680px and above, but at 320px the
   uppercase labels with letter-spacing cannot fit three columns — the card
   pushed the page 12px past the viewport and produced a horizontal scrollbar
   on the one page that carries the three vendor profiles. */
@media (max-width: 400px) {
  .mfr-facts { grid-template-columns: repeat(2, 1fr); }
  .mfr-facts span,
  .mfr-card .code { overflow-wrap: anywhere; }
  .mfr-card .top { flex-wrap: wrap; }
}