/* ============================================================
   PROGENIC BIOTECH — Design System v2
   ------------------------------------------------------------
   Bright, card-based, friendly clinical.
     · White cards on a soft blue-grey canvas, generous radii,
       soft shadows.
     · Bright blue + cyan for action. The Progenic wordmark blue
       (#034E99) anchors it.
     · Pastel icon circles carry the colour — they do the job
       photography does in the reference, since we use report
       and equipment imagery rather than people.
     · Every text colour still passes WCAG AA.
   Fonts: Manrope (display) + Inter (body)
   ============================================================ */

/* ============================================================
   1. TOKENS
   ============================================================ */
:root{
  /* --- Brand navy — sampled from the logo artwork.
         The mark is a single blue wordmark: no icon, no second hue. --- */
  --navy-900:#04182F;
  --navy-800:#052E5C;
  --navy-700:#023B75;
  --navy-600:#034E99;   /* ★ the PROGENIC wordmark */
  --navy-400:#4A82C4;

  /* --- Green is no longer a brand colour. Kept only as the semantic
         success tone and the mint pastel used on icon circles. --- */
  --green-600:#237A42;  /* 5.62:1 white — success text + icons */
  --green-500:#73CC7D;  /* fills only, never text */
  --green-100:#DBF2DE;

  /* --- Action blue — the bright, energetic CTA colour --- */
  --blue-700:#1442B0;
  --blue-600:#1B57D8;   /* ★ primary buttons */
  --blue-500:#2F7BEF;
  --blue-100:#DCE8FD;
  --blue-50: #EEF4FE;

  /* --- Cyan — secondary action, highlights --- */
  --cyan-600:#0A7099;   /* 5.42:1 white / 4.96:1 canvas — icons + small text */
  --cyan-500:#16B5E8;   /* fills only */
  --cyan-100:#D5F0FB;
  --cyan-50: #EAF8FD;

  /* --- Pastel tints for icon circles + soft blocks --- */
  --mint:    #D8F1DC;  --mint-ink:  #1E6B38;
  --sky:     #D3E4FB;  --sky-ink:   #14458F;
  --lilac:   #E2DDF8;  --lilac-ink: #4634A0;
  --peach:   #FDE0D2;  --peach-ink: #92451A;
  --lemon:   #FCEEC6;  --lemon-ink: #7A5606;
  --rose:    #FBDDE6;  --rose-ink:  #94254B;

  /* --- Ink. All AA-verified on white and on --bg. --- */
  --ink-900:#0C1A33;   /* 16.6:1  headings                 */
  --ink-800:#1C2B45;   /* 13.0:1                           */
  --ink-700:#33405A;   /*  9.9:1  body — the default       */
  --ink-600:#4A5772;   /*  7.1:1  secondary                */
  --ink-500:#576584;   /*  5.9:1  muted                    */
  --ink-400:#616D89;   /*  5.1:1 white / 4.66:1 canvas    */
  --ink-300:#818BA2;   /*  3.36:1 white / 3.07:1 canvas   */

  /* --- Lines + surfaces --- */
  --line:    #E6EAF2;
  --line-mid:#D2D9E6;
  /* Control boundaries need 3:1 (WCAG 1.4.11) and --line-mid is 1.42:1,
     so it is decorative only. --ink-300 was already declared and unused;
     it measures 3.42:1 on white and 3.13:1 on the canvas. */
  --line-strong:var(--ink-300);
  --bg:      #F2F5FA;   /* page canvas — soft blue-grey     */
  --card:    #FFFFFF;
  --bg-deep: #0C1A33;

  /* --- Semantic --- */
  --ok:#0B7A50;      --ok-bg:#DFF5EC;
  --warn:#8A5A08;    --warn-bg:#FDF1D9;
  --danger:#B02525;  --danger-bg:#FCEAEA;

  /* --- Type --- */
  --font-display:'Manrope','Noto Sans Thai','Inter',system-ui,sans-serif;
  /* Noto Sans Thai carries the Thai glyphs Manrope and Inter do not — without
   it every Thai string on the site rendered as tofu boxes. */
  --font-body:'Inter','Noto Sans Thai',system-ui,-apple-system,'Segoe UI',sans-serif;
  --prose:68ch;

  /* --- Radii — generous, friendly --- */
  --r-sm:10px;
  --r:16px;
  --r-lg:22px;
  --r-xl:28px;
  --r-pill:999px;

  /* --- Shadows — soft, diffuse, never harsh --- */
  --sh-sm:0 2px 8px rgba(12,26,51,.05);
  --sh:   0 4px 18px rgba(12,26,51,.07);
  --sh-md:0 10px 30px rgba(12,26,51,.09);
  --sh-lg:0 20px 50px rgba(12,26,51,.13);
  --sh-blue:0 8px 22px rgba(27,87,216,.26);

  /* --- Layout --- */
  --maxw:1220px;
  --gut:28px;
  --header-h:76px;
  --ease:cubic-bezier(.2,.7,.3,1);
}

/* ============================================================
   2. RESET + BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:1rem;line-height:1.65;
  color:var(--ink-700);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}
/* Inline icons are 24-viewBox glyphs. Without an explicit size they stretch
   to fill their container — cap them, then let components size up from here. */
svg{max-width:100%;display:block}
a svg,button svg,li svg,span svg,p svg,h1 svg,h2 svg,h3 svg,dt svg,dd svg{
  width:1.05em;height:1.05em;flex:none}
a{color:var(--blue-600);text-decoration:none}
a:hover{color:var(--blue-700)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{margin:0;padding:0}
h1,h2,h3,h4,h5,h6{margin:0;font-family:var(--font-display);color:var(--ink-900);font-weight:800;line-height:1.14;letter-spacing:-.028em}
p{margin:0}
table{border-collapse:collapse;width:100%}

:focus-visible{outline:3px solid var(--blue-600);outline-offset:3px;border-radius:4px}
/* Every navy surface, not only the four that happened to be listed. The
   "Order this test" button sits on .aside-block--cta and had a 1.33:1 ring. */
.on-dark :focus-visible,.site-footer :focus-visible,.cta :focus-visible,.lb :focus-visible,
.aside-block--cta :focus-visible,.help-strip :focus-visible{outline-color:#fff}

.skip-link{position:absolute;left:-9999px;top:8px;z-index:9999;padding:12px 20px;
  background:var(--blue-600);color:#fff;border-radius:var(--r-sm);font-weight:600;font-size:.9rem}
.skip-link:focus{left:12px}
.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}

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

/* ============================================================
   3. LAYOUT
   ============================================================ */
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.container--narrow{max-width:840px}

.section{padding:72px 0}
.section--lead{padding:56px 0 64px}
.section--tight{padding:48px 0}
.section--white{background:var(--card)}

/* Section head — title left, "View all" right (reference pattern) */
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:32px;flex-wrap:wrap}
.head-txt{max-width:640px}
.head .eyebrow{display:block;font-size:.74rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blue-600);margin-bottom:10px}
.head h2{font-size:clamp(1.65rem,3.2vw,2.35rem)}
.head p{margin-top:10px;font-size:1.02rem;color:var(--ink-600)}
.head .viewall{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:.95rem;
  color:var(--blue-600);white-space:nowrap;padding-bottom:4px}
.head .viewall svg{width:16px;height:16px;transition:transform .2s var(--ease)}
.head .viewall:hover svg{transform:translateX(4px)}

.prose{max-width:var(--prose)}
.prose p{margin-bottom:1.1em;color:var(--ink-700)}
.prose p:last-child{margin-bottom:0}
.prose h3{font-size:1.2rem;margin:1.8em 0 .5em}
.prose ul,.prose ol{margin:0 0 1.1em 1.15em;padding-left:.5em}
.prose li{margin-bottom:.42em}

.grid{display:grid;gap:22px}
.grid--auto{grid-template-columns:repeat(auto-fill,minmax(285px,1fr))}
.grid--3{grid-template-columns:repeat(3,1fr)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
/* When one column is a tall form, centring the short one leaves a void. */
.split--top{align-items:start}

/* ============================================================
   4. TYPE UTILITIES
   ============================================================ */
.display{font-family:var(--font-display);font-weight:800;font-size:clamp(2.4rem,5.6vw,4rem);
  line-height:1.05;letter-spacing:-.036em;color:var(--ink-900)}
.eyebrow{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-600)}
.lead{font-size:1.1rem;line-height:1.65;color:var(--ink-600);max-width:var(--prose)}
.meta{font-size:.86rem;color:var(--ink-500)}
.micro{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-500)}
.num{font-family:var(--font-display);font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.accent{color:var(--blue-600)}

/* ============================================================
   5. ICON CIRCLES — these carry the colour
   ============================================================ */
.ic{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--sky);transition:transform .2s var(--ease)}
.ic img{width:30px;height:30px;object-fit:contain}
.ic svg{width:26px;height:26px;color:var(--navy-600)}
.ic--sm{width:44px;height:44px}
.ic--sm img{width:24px;height:24px}
.ic--sm svg{width:21px;height:21px}
.ic--lg img{width:36px;height:36px}
.ic--mint{background:var(--mint)}   .ic--mint svg{color:var(--mint-ink)}
.ic--sky{background:var(--sky)}     .ic--sky svg{color:var(--sky-ink)}
.ic--lilac{background:var(--lilac)} .ic--lilac svg{color:var(--lilac-ink)}
.ic--peach{background:var(--peach)} .ic--peach svg{color:var(--peach-ink)}
.ic--lemon{background:var(--lemon)} .ic--lemon svg{color:var(--lemon-ink)}
.ic--rose{background:var(--rose)}   .ic--rose svg{color:var(--rose-ink)}

/* ============================================================
   6. BUTTONS
   ============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-body);font-weight:600;font-size:.96rem;line-height:1;
  min-height:50px;padding:15px 28px;border-radius:var(--r-pill);
  border:1.5px solid transparent;white-space:nowrap;
  transition:background .16s var(--ease),box-shadow .2s var(--ease),
    transform .16s var(--ease),color .16s,border-color .16s}
.btn svg{width:17px;height:17px;flex:none}

.btn--primary{background:var(--blue-600);color:#fff;box-shadow:var(--sh-blue)}
.btn--primary:hover{background:var(--blue-700);color:#fff;transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(27,87,216,.34)}
/* White on cyan-500 measures 2.38:1 — the phone CTA was the least legible
   element on the page. cyan-600 is 5.42:1. cyan-500 stays a fill colour only,
   which is what the token comment always claimed. */
.btn--cyan{background:var(--cyan-600);color:#fff;box-shadow:0 8px 22px rgba(10,112,153,.28)}
.btn--cyan:hover{background:var(--cyan-600);color:#fff;transform:translateY(-2px)}
.btn--ghost{background:var(--card);color:var(--ink-900);border-color:var(--line-strong);box-shadow:var(--sh-sm)}
.btn--ghost:hover{border-color:var(--blue-600);color:var(--blue-600);transform:translateY(-2px)}
.btn--light{background:#fff;color:var(--navy-900)}
.btn--light:hover{background:var(--blue-50);color:var(--navy-900);transform:translateY(-2px)}
.btn--quiet{padding:0;min-height:0;border:0;border-radius:0;background:none;box-shadow:none;
  color:var(--blue-600);font-weight:600;font-size:.95rem;gap:7px}
.btn--quiet:hover{color:var(--blue-700);transform:none;box-shadow:none}
.btn--quiet svg{transition:transform .2s var(--ease)}
.btn--quiet:hover svg{transform:translateX(4px)}

.btn--sm{min-height:42px;padding:12px 20px;font-size:.88rem}
.btn--lg{min-height:56px;padding:18px 34px;font-size:1.03rem}
@media (pointer:coarse){ .btn--sm{min-height:48px;padding:15px 22px} }
.btn-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ============================================================
   7. CARDS
   ============================================================ */
.card{display:flex;flex-direction:column;background:var(--card);
  border-radius:var(--r-lg);box-shadow:var(--sh);overflow:hidden;
  transition:box-shadow .22s var(--ease),transform .22s var(--ease)}
.card:hover{box-shadow:var(--sh-md);transform:translateY(-4px)}
.card-body{padding:26px;display:flex;flex-direction:column;gap:12px;flex:1}
.card-body .micro{color:var(--ink-500)}
.card h3{font-size:1.12rem;line-height:1.35}
.card p{font-size:.93rem;color:var(--ink-600);line-height:1.62;flex:1}
.card .ic{margin-bottom:4px}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 26px;border-top:1px solid var(--line);margin-top:auto}
.card-foot .meta{font-size:.84rem}
.card-foot .go{width:34px;height:34px;border-radius:50%;background:var(--blue-50);
  color:var(--blue-600);display:grid;place-items:center;flex:none;transition:all .2s var(--ease)}
.card-foot .go svg{width:15px;height:15px}
.card:hover .card-foot .go{background:var(--blue-600);color:#fff}

/* Hero card — first item in a featured grid */

/* Colour-blocked quick links (reference: the yellow / orange / pink tiles).
   The arrow sits in a white disc rather than a black one — a solid black
   circle was the only near-black thing in an otherwise pastel row. */
.tile{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:20px;
  min-height:172px;padding:28px;border-radius:var(--r-xl);overflow:hidden;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.tile:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.tile h3{font-size:1.32rem;line-height:1.22;max-width:11ch;position:relative;z-index:1}
.tile .go{width:42px;height:42px;border-radius:50%;background:#fff;
  display:grid;place-items:center;position:relative;z-index:1;
  box-shadow:0 2px 10px rgba(12,26,51,.10);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.tile .go svg{width:17px;height:17px}
.tile:hover .go{transform:translateX(3px);box-shadow:0 4px 16px rgba(12,26,51,.16)}
.tile .deco{position:absolute;right:-18px;bottom:-18px;width:132px;height:132px;
  opacity:.26;pointer-events:none}
/* One hue per tile: deep ink for the title, mid tone for the arrow glyph. */
.tile--mint{background:var(--mint)}
.tile--mint h3{color:#0F4A26}  .tile--mint .go svg,.tile--mint .deco{color:var(--mint-ink)}
.tile--peach{background:var(--peach)}
.tile--peach h3{color:#6E340F} .tile--peach .go svg,.tile--peach .deco{color:var(--peach-ink)}
.tile--sky{background:var(--sky)}
.tile--sky h3{color:#0E3468}   .tile--sky .go svg,.tile--sky .deco{color:var(--sky-ink)}

/* Plain white panel */
.panel{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh);padding:30px}

/* ============================================================
   8. HEADER
   ============================================================ */
.site-header{position:sticky;top:0;z-index:60;height:var(--header-h);
  background:rgba(255,255,255,.94);backdrop-filter:saturate(180%) blur(14px);
  box-shadow:0 1px 0 var(--line)}
.hdr{display:flex;align-items:center;gap:26px;height:100%}
.brand{display:flex;align-items:center;flex:none}
/* The logo is the home link; give it the same affordance the nav links have. */
.brand{border-radius:var(--r-sm);transition:opacity .15s}
.brand:hover{opacity:.82}
.brand[aria-current="page"]{cursor:default}
.brand img{height:38px;width:auto}
.nav{display:flex;align-items:center;gap:2px;list-style:none;margin-left:6px}
.nav a{display:block;padding:10px 15px;border-radius:var(--r-pill);
  font-size:.94rem;font-weight:500;color:var(--ink-700);transition:color .15s,background .15s}
.nav a:hover{color:var(--blue-600);background:var(--blue-50)}
.nav a[aria-current="page"]{color:var(--blue-600);font-weight:600;background:var(--blue-50)}
/* --- Categories drop-down ------------------------------------------------ */
.has-drop{position:relative}
.drop-btn{display:flex;align-items:center;gap:6px;padding:10px 15px;border-radius:var(--r-pill);
  font-size:.94rem;font-weight:500;color:var(--ink-700);background:none;transition:color .15s,background .15s}
.drop-btn:hover{color:var(--blue-600);background:var(--blue-50)}
.drop-btn svg{width:13px;height:13px;transition:transform .2s var(--ease)}
.drop-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.drop{position:absolute;top:calc(100% + 12px);left:0;width:min(640px,calc(100vw - 32px));
  display:none;grid-template-columns:1fr 1fr;gap:4px;padding:14px;
  background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-lg);z-index:70}
.drop[data-open="true"]{display:grid}
.drop a{display:flex;gap:14px;align-items:center;padding:13px;border-radius:var(--r-sm);transition:background .15s}
.drop a:hover{background:var(--blue-50)}
.drop .dt{display:flex;flex-direction:column;gap:2px;min-width:0}
.drop .dt b{font-size:.95rem;color:var(--ink-900);font-weight:600}
.drop .dt span{font-size:.8rem;color:var(--ink-600);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.drop .ic{width:38px;height:38px;flex:none}

.hdr-actions{display:flex;align-items:center;gap:10px;margin-left:auto;flex:none}
.hdr-call{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  border:1.5px solid var(--ink-400);color:var(--navy-600);background:var(--card);transition:all .18s var(--ease)}
.hdr-call:hover{border-color:var(--blue-600);color:var(--blue-600);transform:translateY(-2px)}
.hdr-call svg{width:19px;height:19px}


/* The drawer is a full-height fixed sheet; the page behind it scrolled under
   the finger, which on a 6,000px catalogue loses the reader's place entirely. */
body.is-nav-open{overflow:hidden}
.nav-toggle{display:none;width:48px;height:48px;place-items:center;border-radius:50%;
  border:1.5px solid var(--ink-400);background:var(--card);color:var(--navy-700)}
.nav-toggle svg{width:22px;height:22px}

/* ============================================================
   9. HERO
   ============================================================ */
.hero{padding:56px 0 68px}
.hero-inner{background:var(--card);border-radius:var(--r-xl);box-shadow:var(--sh-md);
  padding:60px 56px;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:56px;align-items:center;position:relative;overflow:hidden}
.hero-inner::before{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;
  border-radius:50%;background:var(--cyan-50);pointer-events:none}
.hero-txt{position:relative;z-index:1}
/* The hero's second column. It held a photograph; the photograph was removed
   because a licensed medical facility may not publish stock imagery of its own
   premises, and the empty column read as a failed image load. What goes there
   instead is the thing this reader actually scans — the catalogue facts. */
.hero-panel{align-self:center;background:var(--bg);border-radius:var(--r-lg);
  padding:28px 26px;display:grid;gap:16px;align-content:start;
  /* above ::before, which is a decorative circle that otherwise covers it */
  position:relative;z-index:1}
.hp-label{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-500)}
.hero-panel .hero-facts{margin:0;display:grid;gap:10px}
.hero-panel .hero-facts li{background:var(--card);width:100%;justify-content:flex-start;
  white-space:normal;line-height:1.45}
.hp-note{margin:0;padding-top:14px;border-top:1px solid var(--line-mid);
  font-size:.86rem;line-height:1.6;color:var(--ink-600)}
@media (max-width:1080px){
  .hero-panel{align-self:stretch}
}
.hero .eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--blue-50);
  padding:8px 16px;border-radius:var(--r-pill);margin-bottom:20px}
.hero .eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cyan-500)}
.hero h1{font-size:clamp(2.3rem,5vw,3.7rem);line-height:1.05;letter-spacing:-.036em}
.hero h1 em{font-style:normal;color:var(--blue-600)}
.hero .lead{margin:20px 0 30px;font-size:1.09rem}
.hero-facts{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.hero-facts li{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;
  border-radius:var(--r-pill);background:var(--bg);font-size:.87rem;font-weight:500;color:var(--ink-700)}
.hero-facts svg{width:16px;height:16px;color:var(--cyan-600);flex:none}

/* Same placeholder flag as .photo — see §12b. */

/* ============================================================
   10. FEATURE LIST
   ============================================================ */
.feat-list{list-style:none;display:grid;gap:18px}
.feat-list li{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;
  background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:26px}
.feat-list h3{font-size:1.12rem;margin-bottom:7px}
.feat-list p{color:var(--ink-600);font-size:.95rem}
.feat-list .fl-note{display:inline-block;margin-top:11px;font-size:.9rem;font-weight:600;color:var(--blue-600)}

/* ============================================================
   11. CATEGORY LIST
   ============================================================ */
/* --- Dual-model blocks. Two pastel cards, no borders: the tint alone
       separates them, which keeps the section quiet next to feat-list. --- */
.duo{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.duo li{border-radius:var(--r-lg);padding:30px 32px}
.duo h3{font-size:1.16rem;margin-bottom:10px;letter-spacing:-.018em}
.duo p{font-size:.95rem;line-height:1.62}
.duo .duo-ic{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  margin-bottom:18px;background:rgba(255,255,255,.72)}
.duo .duo-ic svg{width:21px;height:21px}
.duo--sky{background:var(--sky)}
.duo--sky h3{color:#0E3468}   .duo--sky p{color:#173F72}   .duo--sky .duo-ic svg{color:var(--sky-ink)}
.duo--mint{background:var(--mint)}
.duo--mint h3{color:#0F4A26}  .duo--mint p{color:#1B4F2F}  .duo--mint .duo-ic svg{color:var(--mint-ink)}

.cat-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.cat-list a{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;
  background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:22px;
  transition:box-shadow .2s var(--ease),transform .2s var(--ease)}
.cat-list a:hover{box-shadow:var(--sh-md);transform:translateY(-3px)}
.cat-list a:hover .ic{transform:scale(1.06)}
.cat-list h3{font-size:1.05rem;margin-bottom:4px}
.cat-list p{font-size:.87rem;color:var(--ink-600);line-height:1.5}

/* ============================================================
   12. STATS
   ============================================================ */

/* ============================================================
   12b. PHOTOGRAPHY
   ------------------------------------------------------------
   [data-placeholder] paints a corner flag so stand-in stock
   photography cannot reach production unnoticed. Remove the
   attribute when the real photo is dropped in.
   ============================================================ */
.photo--wide img{aspect-ratio:16/10}

/* ============================================================
   12c. TEAM
   ------------------------------------------------------------
   Initial avatars rather than photographs. .is-placeholder marks
   stand-in profiles so they are visible in review and cannot ship
   unnoticed — see renderTeam() in app.js.
   ============================================================ */
.team-grid{list-style:none;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}
.team-card{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;
  background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:24px;
  transition:box-shadow .2s var(--ease),transform .2s var(--ease)}
.team-card:hover{box-shadow:var(--sh);transform:translateY(-3px)}
.team-card h3{font-size:1.05rem;margin-bottom:3px;letter-spacing:-.018em}
.team-card .micro{display:block;color:var(--blue-600);margin-bottom:9px}
.team-card p{font-size:.9rem;color:var(--ink-600);line-height:1.55}
.team-card .fl-note{display:inline-block;margin-top:9px;font-size:.86rem;font-weight:600;color:var(--blue-600)}
.team-photo{width:76px;height:76px;border-radius:50%;object-fit:cover;flex:none}
.team-avatar{width:76px;height:76px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  font-family:var(--font-display);font-weight:800;font-size:1.32rem;letter-spacing:-.02em}
.team-avatar.ic--sky{background:var(--sky);color:var(--sky-ink)}
.team-avatar.ic--mint{background:var(--mint);color:var(--mint-ink)}
.team-avatar.ic--lilac{background:var(--lilac);color:var(--lilac-ink)}
.team-avatar.ic--peach{background:var(--peach);color:var(--peach-ink)}
.team-avatar.ic--lemon{background:var(--lemon);color:var(--lemon-ink)}
.team-avatar.ic--rose{background:var(--rose);color:var(--rose-ink)}
.team-card.is-placeholder{position:relative;background:var(--bg);box-shadow:none;
  outline:1px dashed var(--line-mid);outline-offset:-1px}
.team-card.is-placeholder h3{color:var(--ink-500)}
.team-card.is-placeholder::after{content:"Placeholder";position:absolute;top:12px;right:12px;
  padding:4px 10px;border-radius:var(--r-pill);background:var(--warn-bg);color:#59410A;
  font-size:.62rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase}

/* ============================================================
   13. PARTNERS
   ============================================================ */
.partners{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:16px}
.partners li{background:var(--card);border-radius:var(--r);box-shadow:var(--sh-sm);
  min-height:98px;display:grid;place-items:center;padding:20px;transition:box-shadow .2s,transform .2s}
.partners li:hover{box-shadow:var(--sh);transform:translateY(-3px)}
.partners img{max-height:42px;width:auto;object-fit:contain}

/* Trust row on detail pages.
   No pill, no plate — this already sits on a white card, so another
   container just adds edges. A hairline rule opens the group, the
   partner logo does the work, and the certification reads as the
   quiet supporting line it is. */
.trust-group{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.trust{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.trust img{height:34px;width:auto;max-width:100%;flex:none}
/* min-width:0 or the text column refuses to shrink and takes the row past the
   viewport on a narrow phone. */
.trust > div{display:flex;flex-direction:column;gap:1px;min-width:0;
  padding-left:16px;border-left:1px solid var(--line)}
/* No logo means this div is the first child, and the rule would open
   against nothing. */
.trust > div:first-child{padding-left:0;border-left:0}
.trust > div > *{min-width:0}
.trust .micro{font-size:.66rem;color:var(--ink-400)}
.trust b{font-size:.98rem;font-weight:600;color:var(--ink-900);letter-spacing:-.01em}
.cert{display:flex;align-items:flex-start;gap:9px;margin-top:14px;
  font-size:.86rem;color:var(--ink-600);min-width:0}
.cert span{min-width:0}
.cert svg{width:16px;height:16px;flex:none;color:var(--green-600)}

/* ============================================================
   14. FAQ
   ============================================================ */
.faq{list-style:none;display:grid;gap:12px}
.faq li{background:var(--card);border-radius:var(--r);box-shadow:var(--sh-sm);overflow:hidden}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 26px;text-align:left;font-family:var(--font-display);font-size:1.03rem;
  font-weight:700;color:var(--ink-900);letter-spacing:-.014em;line-height:1.4}
.faq-q:hover{color:var(--blue-600)}
.faq-i{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:var(--blue-50);color:var(--blue-600);transition:all .25s var(--ease)}
.faq-i svg{width:15px;height:15px;transition:transform .25s var(--ease)}
.faq-q[aria-expanded="true"] .faq-i{background:var(--blue-600);color:#fff}
.faq-q[aria-expanded="true"] .faq-i svg{transform:rotate(45deg)}
.faq-a{padding:0 26px 24px;max-width:var(--prose);color:var(--ink-700);font-size:.96rem}
.faq-a[hidden]{display:none}

/* ============================================================
   15. FORMS
   ============================================================ */
.form{display:grid;gap:20px}
.form-card{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-md);padding:36px}
.field{display:grid;gap:7px}
/* The header is sticky, so anything the browser scrolls to — a failed field
   after submit, an in-page anchor — otherwise lands underneath it. */
.field,.check,[id]{scroll-margin-top:calc(var(--header-h) + 16px)}
.field label{font-size:.9rem;font-weight:600;color:var(--ink-800)}
.field label .req{color:var(--danger);margin-left:2px}
/* The only boundary on these was a 1.09:1 fill difference against the white
   form card — six inputs with no visible edge. */
.field input,.field textarea,.field select{font:inherit;font-size:1rem;color:var(--ink-900);
  min-height:50px;padding:14px 18px;background:var(--card);
  border:1.5px solid var(--line-strong);border-radius:var(--r-sm);
  transition:border-color .15s,box-shadow .15s}
.field textarea{min-height:130px;resize:vertical;line-height:1.6}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:0;background:var(--card);border-color:var(--blue-600);box-shadow:0 0 0 4px var(--blue-100)}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-400)}
.field .hint{font-size:.83rem;color:var(--ink-500)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--danger)}
/* flex-wrap plus a full-width .err: without it the error became a third flex
   column and "Please accept the privacy notice before submitting." rendered in
   78px — eight lines of one word each, at the right edge of the row. */
.check{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
/* 20px failed WCAG 2.5.8 (24px minimum). The label is a target too, but the box
   is what a finger aims at. */
.check input{width:24px;height:24px;min-height:0;margin-top:0;accent-color:var(--blue-600);flex:none}
.check label{font-size:.88rem;font-weight:400;color:var(--ink-600);line-height:1.55;flex:1;min-width:0}
.check .err{flex:1 0 100%;margin-top:2px}
@media (pointer:coarse){
  /* A checkbox is a replaced element and grows no pseudo-element of its own, so
     the padding comes from the label — which toggles the same control. 46px of
     hit area over a 24px box, with the visual layout untouched. */
  .check{position:relative}
  .check label::before{content:"";position:absolute;left:-6px;top:-6px;width:46px;height:46px}
}
.form-note{padding:15px 18px;background:var(--blue-50);border-radius:var(--r-sm);
  font-size:.87rem;color:var(--ink-700)}
.form-ok{display:flex;gap:14px;padding:22px;background:var(--ok-bg);border-radius:var(--r);color:#08543A}
.form-ok svg{width:22px;height:22px;flex:none;color:var(--ok)}

/* ============================================================
   16. CHIPS / FILTERS / BADGES
   ============================================================ */
.chip-row{display:flex;flex-wrap:wrap;gap:9px}

.filter{display:inline-flex;align-items:center;min-height:42px;padding:11px 20px;
  border-radius:var(--r-pill);border:1.5px solid var(--ink-400);font-size:.89rem;font-weight:500;
  color:var(--ink-700);background:var(--card);transition:all .16s var(--ease)}
.filter:hover{border-color:var(--blue-500);color:var(--blue-600)}
.filter[aria-pressed="true"]{background:var(--navy-900);border-color:var(--navy-900);color:#fff}
@media (pointer:coarse){ .filter{min-height:48px} }

.badge--new{background:var(--cyan-600);color:#fff}
.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--r-pill);
  font-size:.74rem;font-weight:700;letter-spacing:.02em}

/* ============================================================
   17. DETAIL PAGE
   ============================================================ */
.crumb{display:flex;flex-wrap:wrap;gap:8px;font-size:.85rem;color:var(--ink-500);margin-bottom:20px}
.crumb a{color:var(--ink-500)}
.crumb a:hover{color:var(--blue-600)}

.detail-hero{padding:36px 0 8px}
.detail-hero-inner{background:var(--card);border-radius:var(--r-xl);box-shadow:var(--sh-md);
  padding:44px 46px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:48px;align-items:start}
.detail-hero h1{font-size:clamp(1.8rem,3.7vw,2.7rem);margin-bottom:14px}
.detail-hero .lead{margin-bottom:26px}

.spec{list-style:none;display:grid;gap:12px}
/* Three fixed tracks so the values line up as a column a reader can scan.
   With `auto 1fr auto` the key column took the slack and the values sat
   ragged against the right edge — text-align alone could not fix that. */
.spec li{display:grid;grid-template-columns:auto minmax(0,6.5rem) minmax(0,1fr);
  gap:14px;align-items:baseline;padding:15px 18px;background:var(--bg);border-radius:var(--r-sm)}
.spec svg{width:17px;height:17px;color:var(--cyan-600)}
.spec .sk{font-size:.87rem;color:var(--ink-500)}
.spec .sv{font-size:.93rem;font-weight:600;color:var(--ink-900);text-align:right}
/* The three fixed tracks are a desktop device. On a phone the 6.5rem key column
   left the value 97px wide, so "Epitope Detection in Monocytes (EDIM), flow
   cytometry" set as five lines of one or two words — in the block a provider
   reads first. Below 620 the key becomes a caption above its value and the
   value gets the full row. */
@media (max-width:620px){
  .spec li{grid-template-columns:auto minmax(0,1fr);gap:6px 12px;padding:14px 16px}
  .spec svg{grid-row:span 2;align-self:start;margin-top:3px}
  .spec .sk{font-size:.72rem;font-weight:700;letter-spacing:.08em;
    text-transform:uppercase;color:var(--ink-500)}
  .spec .sv{font-size:.98rem}
}

.detail-body{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:40px;padding:44px 0 72px;align-items:start}
.detail-main > section{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-sm);
  padding:32px 34px;margin-bottom:20px}
.detail-main h2{font-size:1.45rem;margin-bottom:14px}
.detail-main h3{font-size:1.12rem;margin:1.7em 0 .5em}
.detail-main p,.detail-main li{max-width:var(--prose);color:var(--ink-700);font-size:.98rem;line-height:1.7}
.detail-main p{margin-bottom:1.05em}
.detail-main ul,.detail-main ol{margin:0 0 1.1em 1.15em;padding-left:.5em}
.detail-main li{margin-bottom:.45em}
.detail-main li > b{color:var(--ink-900);font-weight:600}
.detail-main li ul{margin:.4em 0 .2em 1.1em}
.detail-main li ul li{margin-bottom:.25em;font-size:.95em;color:var(--ink-600)}

.aside{position:sticky;top:calc(var(--header-h) + 20px);display:grid;gap:18px}
.aside-block{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:26px}
.aside-block h3{font-size:1.02rem;margin-bottom:10px}
.aside-block p{font-size:.9rem;color:var(--ink-600);margin-bottom:16px}
/* Dark variant. These must come AFTER the base rules — equal specificity,
   so source order is what decides. */
.aside-block--cta{background:var(--navy-600)}
.aside-block--cta h3{color:#fff}
.aside-block--cta p{color:#DCE6F6}   /* 8.9:1 on --navy-600 */
.aside-block--cta a:not(.btn){color:#fff;text-decoration:underline;text-underline-offset:3px}
.aside-links{list-style:none;display:grid;gap:2px}
.aside-links a{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;margin:0 -14px;border-radius:var(--r-sm);font-size:.9rem;
  color:var(--ink-700);font-weight:500;transition:background .15s}
.aside-links a:hover{color:var(--blue-600);background:var(--blue-50)}
.aside-links svg{width:14px;height:14px;flex:none;color:var(--ink-400)}
.aside-links a:hover svg{color:var(--blue-600)}

.dtable{font-size:.9rem;margin:1.3em 0}
.dtable th{text-align:left;padding:13px 16px;background:var(--bg);color:var(--ink-600);
  font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.dtable th:first-child{border-radius:var(--r-sm) 0 0 var(--r-sm)}
.dtable th:last-child{border-radius:0 var(--r-sm) var(--r-sm) 0}
.dtable td{padding:14px 16px;border-bottom:1px solid var(--line);color:var(--ink-700);vertical-align:top}
.dtable tr:last-child td{border-bottom:0}
.table-scroll{overflow-x:auto;position:relative}
.table-scroll table{min-width:440px}
/* The fade hints that a table scrolls. It has to match the surface behind it,
   which is the card by default and the canvas inside a guide accordion. */
.table-scroll{--fade:var(--card)}
.accordion .table-scroll{--fade:var(--bg)}
.table-scroll::after{content:"";position:absolute;top:0;right:0;bottom:0;width:34px;
  background:linear-gradient(90deg,transparent,var(--fade));pointer-events:none}
/* The catalogue table fills its wrapper and stacks on mobile — it never
   scrolls, so the hint would just be a smear over the header row. */
.table-scroll:has(.ptable)::after{display:none}

.refs{margin-top:24px;padding:20px;background:var(--bg);border-radius:var(--r-sm)}
/* Inside an accordion the surface is already --bg, so the block had no
   visible boundary. */
.accordion .refs{background:var(--card);border:1px solid var(--line)}
.refs h4{font-size:.73rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-500);
  font-family:var(--font-body);font-weight:700;margin-bottom:11px}
.refs ol{margin:0 0 0 1.3em;padding:0;font-size:.83rem;color:var(--ink-600);line-height:1.6}
.refs li{margin-bottom:6px}

/* Downloads */
.dl{list-style:none;display:grid;gap:12px}
.dl a{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;
  padding:18px 20px;background:var(--bg);border-radius:var(--r);transition:all .18s var(--ease)}
.dl a:hover{background:var(--blue-50);transform:translateX(3px)}
.dl b{display:block;font-size:.95rem;font-weight:600;color:var(--ink-900)}
.dl span{font-size:.84rem;color:var(--ink-500)}
.dl .dl-go{width:34px;height:34px;border-radius:50%;background:var(--card);color:var(--blue-600);
  display:grid;place-items:center;flex:none}
.dl .dl-go svg{width:15px;height:15px}
.dl li[data-pending] b::after{content:" · coming soon";font-weight:400;color:var(--ink-500);font-size:.84rem}

/* Sample report — one stacked cover, not a wall of thumbnails.
   The offset layers behind it read as "there are more pages". */
.report-stack-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:32px;align-items:center}
.report-stack{
  position:relative;width:200px;flex:none;cursor:pointer;
  border-radius:var(--r-sm);
  transition:transform .22s var(--ease);
}
.report-stack img{
  position:relative;z-index:2;width:100%;
  aspect-ratio:1/1.294;object-fit:cover;object-position:top;
  border-radius:var(--r-sm);background:var(--card);
  box-shadow:var(--sh-md);
}
.report-stack.is-stacked::before,
.report-stack.is-stacked::after{
  content:"";position:absolute;inset:0;
  border-radius:var(--r-sm);background:var(--card);
  box-shadow:var(--sh-sm);
}
.report-stack.is-stacked::before{transform:translate(10px,10px) rotate(2.4deg);z-index:0}
.report-stack.is-stacked::after {transform:translate(5px,5px)  rotate(1.1deg);z-index:1}
.report-stack:hover{transform:translateY(-4px)}
.report-stack:hover img{box-shadow:var(--sh-lg)}

.report-stack .rs-open{
  position:absolute;z-index:3;left:50%;bottom:14px;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  padding:9px 16px;border-radius:var(--r-pill);
  background:var(--blue-600);color:#fff;font-size:.82rem;font-weight:600;
  box-shadow:var(--sh-blue);
  opacity:0;transition:opacity .2s var(--ease),transform .2s var(--ease);
}
.report-stack .rs-open svg{width:14px;height:14px}
.report-stack:hover .rs-open,
.report-stack:focus-visible .rs-open{opacity:1;transform:translateX(-50%) translateY(-3px)}

.report-stack-meta{display:grid;gap:7px;justify-items:start}
.report-stack-meta b{font-family:var(--font-display);font-weight:800;font-size:1.08rem;color:var(--ink-900);letter-spacing:-.014em}
.report-stack-meta p{font-size:.93rem;color:var(--ink-600);max-width:46ch;margin:4px 0 12px}

/* ============================================================
   18. GUIDES
   ============================================================ */
.guide-body{display:grid;grid-template-columns:250px minmax(0,1fr);gap:36px;padding:36px 0 72px;align-items:start}
.guide-nav{position:sticky;top:calc(var(--header-h) + 20px);background:var(--card);
  border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:22px}
.guide-nav ol{list-style:none;display:grid;gap:2px}
.guide-nav a{display:block;padding:10px 14px;margin:0 -14px;border-radius:var(--r-sm);
  font-size:.88rem;color:var(--ink-600);line-height:1.45;transition:all .15s}
.guide-nav a:hover{color:var(--blue-600);background:var(--blue-50)}
.guide-nav a[aria-current="true"]{color:var(--blue-600);font-weight:600;background:var(--blue-50)}

.accordion{display:grid;gap:12px}
.accordion > div{background:var(--bg);border-radius:var(--r);overflow:hidden}
.acc-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:20px 24px;text-align:left;font-family:var(--font-display);font-size:1.02rem;
  font-weight:700;color:var(--ink-900);letter-spacing:-.014em}
.acc-q:hover{color:var(--blue-600)}
.acc-q .n{font-size:.76rem;color:var(--ink-400);font-family:var(--font-body);
  font-weight:700;letter-spacing:.06em;margin-right:13px;flex:none}
.acc-i{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:var(--card);color:var(--blue-600);transition:all .25s var(--ease)}
.acc-i svg{width:14px;height:14px;transition:transform .25s var(--ease)}
.acc-q[aria-expanded="true"] .acc-i{background:var(--blue-600);color:#fff}
.acc-q[aria-expanded="true"] .acc-i svg{transform:rotate(45deg)}
.acc-a{padding:0 24px 24px;max-width:var(--prose)}
.acc-a[hidden]{display:none}

.keypoints{list-style:none;padding:20px 22px;background:var(--cyan-50);border-radius:var(--r-sm);
  margin:0 0 1.2em;display:grid;gap:10px}
.keypoints li{font-size:.93rem;color:var(--ink-700);padding-left:20px;position:relative;max-width:none}
.keypoints li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;
  border-radius:50%;background:var(--cyan-500)}

.expert{padding:22px;background:var(--lemon);border-radius:var(--r-sm);margin:1.3em 0}
.expert .micro{color:var(--lemon-ink);margin-bottom:11px;display:block}
.expert dl{display:grid;gap:10px;margin:0}
.expert dt{font-size:.77rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--lemon-ink)}
.expert dd{margin:2px 0 0;font-size:.92rem;color:var(--ink-800)}

/* ============================================================
   19. CTA BANNER
   ============================================================ */
.cta{padding:0 0 72px}
.cta-inner{background:var(--navy-900);border-radius:var(--r-xl);padding:60px 56px;
  color:#C3D3EC;position:relative;overflow:hidden}
.cta-inner::before{content:"";position:absolute;right:-90px;top:-90px;width:340px;height:340px;
  border-radius:50%;background:rgba(45,123,239,.16);pointer-events:none}
.cta-inner > *{position:relative;z-index:1}
/* Scoped to .cta-inner: a page that forgot the wrapper rendered white
   text on the light canvas instead of on the navy panel. */
.cta-inner h2{font-size:clamp(1.7rem,3.4vw,2.5rem);color:#fff;margin-bottom:12px;max-width:20ch}
.cta-inner p{font-size:1.04rem;margin-bottom:30px;max-width:56ch;color:#AFC2E0}

/* Help strip (reference: "Need help with booking your test?") */
.help-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px;
  background:var(--navy-600);border-radius:var(--r-lg);padding:28px 34px;color:#D6E2F5}
.help-strip h3{color:#fff;font-size:1.2rem;margin-bottom:5px}
.help-strip p{font-size:.9rem;color:#B9CBE8}
.help-strip .btn{flex:none}

/* ============================================================
   20. FOOTER
   ============================================================ */
.site-footer{background:var(--navy-900);color:#94A6C4;padding:64px 0 36px;font-size:.9rem;margin-top:auto}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:44px;
  padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.1)}
/* Footer logo is a single light tone rather than the three-colour mark.
   A plain grayscale() filter leaves the navy figure at 1.4:1 on this
   background, so the tone is baked into a dedicated asset instead. */
.site-footer img.f-logo{height:34px;width:auto;margin-bottom:20px;opacity:.95}
.site-footer p{max-width:38ch;line-height:1.65;color:#94A6C4}
.site-footer h3{font-size:.73rem;letter-spacing:.13em;text-transform:uppercase;color:#fff;
  font-family:var(--font-body);font-weight:700;margin-bottom:15px}
.site-footer ul{list-style:none;display:grid;gap:11px}
.site-footer a{color:#94A6C4}
.site-footer a:hover{color:#fff}
.f-contact{display:grid;gap:13px}
.f-contact div{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start}
.f-contact svg{width:16px;height:16px;color:var(--cyan-500);margin-top:3px;flex:none}
.f-bottom{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;
  padding-top:26px;font-size:.83rem;color:#74869F}
.f-bottom ul{display:flex;flex-wrap:wrap;gap:20px}

/* ============================================================
   21. NOTICES
   ============================================================ */
.notice{padding:22px 24px;background:var(--warn-bg);border-radius:var(--r);
  font-size:.88rem;color:#59410A;line-height:1.62;margin:28px 0}
.notice b{display:block;margin-bottom:6px;color:#48340A;font-weight:700;
  font-size:.73rem;letter-spacing:.1em;text-transform:uppercase}
/* For panels whose limits must not be scrolled past — e.g. screening tests. */
.notice--strong{margin:0 0 24px;border-left:4px solid var(--warn);
  background:var(--warn-bg);font-size:.92rem}
.notice--strong b{font-size:.76rem}
.notice p{max-width:var(--prose)}

.cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:80;display:flex;flex-wrap:wrap;
  gap:16px;align-items:center;justify-content:space-between;max-width:760px;margin:0 auto;
  padding:20px 24px;background:var(--card);border-radius:var(--r);box-shadow:var(--sh-lg)}
.cookie p{font-size:.87rem;color:var(--ink-600);flex:1;min-width:250px}

/* ============================================================
   22. LOADING
   ============================================================ */
.is-loading{min-height:150px;display:grid;place-content:center;gap:16px;justify-items:center;padding:32px 0}
.is-loading .lt{font-size:.82rem;color:var(--ink-500);letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--blue-100);
  border-top-color:var(--blue-600);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============================================================
   23. FLOATING CONTACT
   ============================================================ */
.float{position:fixed;right:20px;bottom:20px;z-index:70;display:grid;gap:12px}
.float a{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:var(--blue-600);color:#fff;box-shadow:var(--sh-blue);transition:all .18s var(--ease)}
.float a:hover{background:var(--blue-700);color:#fff;transform:scale(1.06)}
.float a:first-child{background:var(--cyan-600);box-shadow:0 8px 22px rgba(10,112,153,.3)}
.float a:first-child:hover{background:#095f83}
.float svg{width:24px;height:24px}

/* ============================================================
   24. LIGHTBOX
   ============================================================ */
.lb{position:fixed;inset:0;z-index:100;display:none;place-items:center;padding:32px 32px 130px;
  background:rgba(12,26,51,.93)}
.lb[data-open="true"]{display:grid}
.lb img{max-width:min(94vw,900px);max-height:calc(100vh - 210px);object-fit:contain;border-radius:var(--r)}
/* The disc was rgba(255,255,255,.14) — 14% white. Over the navy backdrop that
   reads; over a report page, which is white paper, it is literally invisible,
   and on touch there is no hover to reveal it. A solid disc reads on both. */
.lb-btn{position:absolute;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;
  background:rgba(12,26,51,.82);color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.35);
  transition:background .15s}
.lb-btn:hover{background:rgba(12,26,51,.95)}
.lb-btn svg{width:20px;height:20px}
/* .lb-stage is position:relative and comes later in the DOM, so without this it
   paints over the close button once the page is zoomed past the viewport. */
.lb-close{top:24px;right:24px;z-index:3}
.lb-prev{left:24px;top:50%}
.lb-next{right:24px;top:50%}
.lb-cap{position:absolute;bottom:112px;left:0;right:0;text-align:center;color:#C3D3EC;font-size:.86rem}

/* --- Zoom -------------------------------------------------------------------
   A 63-page hormone report rendered at 366×474 on a phone is a grey blur; the
   page that is meant to sell the panel could not be read at all, and there was
   no way to make it bigger. The image lives in a scroller: tapping it swaps
   max-height for a fixed multiple of the viewport width, and the scroller pans.
   touch-action stays free so a real pinch still works on top of that. */
.lb-stage{position:relative;display:grid;place-items:center;
  max-width:100%;max-height:100%;overflow:auto;-webkit-overflow-scrolling:touch;
  touch-action:pinch-zoom pan-x pan-y;overscroll-behavior:contain}
.lb-stage img{cursor:zoom-in}
/* Fill the grid area once zoomed so the scroller has a fixed frame to pan
   inside. Unzoomed it stays image-sized, which keeps the backdrop around it
   clickable to close. */
.lb-stage.is-zoomed{place-items:start;width:100%;height:100%}
.lb-stage.is-zoomed img{max-width:none;max-height:none;width:230%;cursor:zoom-out;border-radius:0}

/* --- Controls ---------------------------------------------------------------
   The image is min(94vw,900px) wide, so the side arrows sat over it at every
   width below about 1100 — over the left margin of the report, which is where
   the marker names are. Above 1080 the layout is unchanged: display:contents
   dissolves the bar so prev, next and the caption position against .lb exactly
   as they always did. Below it, §25 turns the bar into a real row. */
.lb-bar{display:contents}
.lb-prev svg{transform:rotate(90deg)}
.lb-next svg{transform:rotate(-90deg)}
.lb-zoom{display:none}

/* Page rail — the thumbnail grid moved off the page and into the viewer */
.lb-strip{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;gap:8px;align-items:flex-end;
  padding:14px 20px;overflow-x:auto;overflow-y:hidden;
  background:linear-gradient(180deg,transparent,rgba(12,26,51,.85) 45%);
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent;
}
.lb-strip::-webkit-scrollbar{height:6px}
.lb-strip::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3);border-radius:99px}
.lb-strip button{
  position:relative;flex:none;width:52px;padding:0;border-radius:5px;overflow:hidden;
  border:2px solid transparent;background:#fff;line-height:0;
  transition:border-color .15s,transform .15s var(--ease);
}
.lb-strip button img{width:100%;aspect-ratio:1/1.294;object-fit:cover;object-position:top}
.lb-strip button span{
  position:absolute;left:0;right:0;bottom:0;padding:2px 0;
  font-size:9px;font-weight:600;line-height:1.4;text-align:center;
  color:#fff;background:rgba(12,26,51,.72);
}
.lb-strip button:hover{transform:translateY(-3px)}
.lb-strip button[aria-current="true"]{border-color:var(--cyan-500);transform:translateY(-3px)}
.lb-strip button[aria-current="true"] span{background:var(--cyan-600)}

/* Two CTAs that exist only below the 1080 breakpoint: the drawer copy of the
   header button, and the ordering button on a panel page (above 1081 the
   sticky aside carries that one). Declared here, revealed in §25 — the other
   way round and the base rule wins at every width. */
/* Long product names — "GI-MAP® (Comprehensive Stool)" — have no break
   opportunity and pushed the document sideways at 320px. */
h1,h2,h3,h4,.display,p,li,dd,dt,td,th{overflow-wrap:break-word}
/* A table that cannot fit scrolls inside its own wrapper; it must never be the
   thing that widens the page. */
.table-scroll{max-width:100%}

/* Contact details are a definition list. They were reusing .hero-facts, which
   is an inline-flex pill sized for a five-word chip — a 180-character address
   inside a 999px radius, with no space between the value and its caption. */
/* Product mark supplied by the laboratory for a panel. Capped so a wide
   wordmark cannot outweigh the h1 beneath it. */
.panel-logo{display:block;height:auto;max-width:220px;margin:4px 0 14px}
@media (max-width:560px){.panel-logo{max-width:180px}}

.contact-facts{display:grid;gap:0;margin:0}
.contact-facts > div{display:grid;grid-template-columns:minmax(0,9rem) minmax(0,1fr);
  gap:20px;padding:20px 0;border-top:1px solid var(--line)}
.contact-facts > div:last-child{border-bottom:1px solid var(--line)}
.contact-facts dt{font-size:.72rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-500);padding-top:3px}
.contact-facts dd{margin:0;font-size:1.02rem;color:var(--ink-900);font-weight:600;line-height:1.45}
.contact-facts dd span{display:block;margin-top:6px;font-size:.88rem;
  font-weight:400;color:var(--ink-600);line-height:1.6}
@media (max-width:560px){
  .contact-facts > div{grid-template-columns:minmax(0,1fr);gap:6px}
}

.nav-cta{display:none}
.detail-cta{display:none}

/* ============================================================
   CATALOGUE TABLE
   ------------------------------------------------------------
   Replaces the card grid on labs.html. Hairline rules, tabular
   figures, no shadows — this is the page a clinician scans.
   ============================================================ */
.ptable{width:100%;border-collapse:collapse;font-size:.94rem;background:var(--card);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm)}
.ptable thead th{text-align:left;padding:14px 20px;background:var(--bg);color:var(--ink-600);
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  border-bottom:1px solid var(--line-mid)}
.ptable tbody th,.ptable td{padding:18px 20px;border-bottom:1px solid var(--line);
  vertical-align:top;font-weight:400;color:var(--ink-700);text-align:left}
.ptable tbody tr:last-child th,.ptable tbody tr:last-child td{border-bottom:0}
.ptable tbody tr:hover{background:var(--blue-50)}
.ptable tbody th a{font-family:var(--font-display);font-weight:700;font-size:1.02rem;
  color:var(--ink-900);letter-spacing:-.016em}
.ptable tbody tr:hover th a{color:var(--blue-600)}
.pt-sub{display:block;margin-top:4px;font-size:.85rem;color:var(--ink-600);
  line-height:1.5;max-width:44ch;font-family:var(--font-body)}
.ptable td:nth-child(4){font-variant-numeric:tabular-nums}

/* Five columns of prose stop being a table long before 760px. Measured across
   the band: at 768 the worst cell wrapped to seven lines ("Progenic Medical
   Technology Clinic" over four, "Whole blood (EDTA)" over three) and the rows
   went ragged; it only settles at about 960. 900 is the cut, so every tablet
   held in portrait — iPad 768/820/834, Surface 912 — gets the card and only
   landscape keeps the table. */
@media (max-width:900px){
  /* .table-scroll table{min-width:440px} kept applying after the table stopped
     being a table, so on every phone the stacked cards were laid out at 440px
     inside a 284–378px wrapper: "7 days from receipt of the specimen" and
     "Progenic Medical Technology Clinic" were cut off mid-word on all fifteen,
     and reading a card meant swiping it sideways. The overflow checker never
     saw it because it exempts anything inside .table-scroll by design. */
  .table-scroll .ptable{min-width:0}
  .table-scroll:has(.ptable){overflow-x:visible}

  .ptable{box-shadow:none;background:transparent}
  .ptable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .ptable,.ptable tbody,.ptable tr,.ptable tbody th,.ptable td{display:block;width:100%}
  /* Two cards abreast once each one can still hold ~320px. Fifteen full-width
     cards on a tablet in portrait is a column of banners, not a catalogue. */
  .ptable tbody{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
  /* flex column rather than block: it stacks identically, but it lets the
     "View panel" line sit on margin-top:auto so the affordance lands on the
     same baseline in both cards of a pair. */
  .ptable tr{position:relative;display:flex;flex-direction:column;
    background:var(--card);border-radius:var(--r);
    box-shadow:var(--sh-sm);padding:18px 20px 16px;margin:0}
  /* The row tint belongs to the table form. On a card it repaints the whole
     block blue, and a tap on touch leaves that :hover stuck there. */
  .ptable tbody tr:hover{background:var(--card)}
  .ptable tbody th,.ptable td{padding:0;border:0}

  /* The panel name was the only tap target in a 226px-tall card, and it was
     22px high. Stretching the anchor over the card makes the card the target,
     which is what a thumb aims at in any case. .ptable tr is the containing
     block for this because it is position:relative above. */
  .ptable tbody th a{font-size:1.06rem;line-height:1.3}
  .ptable tbody th a::after{content:"";position:absolute;inset:0;border-radius:var(--r)}
  /* Nothing in the stacked card said it led anywhere — no chevron, no colour,
     no underline, just a heading that happened to be a link. */
  .ptable tbody tr::after{content:"View panel \203A";display:block;margin-top:auto;
    padding-top:14px;font-size:.85rem;font-weight:600;color:var(--blue-600)}

  .ptable td{display:grid;grid-template-columns:minmax(0,7.5rem) minmax(0,1fr);gap:12px;
    margin-top:7px;font-size:.9rem;color:var(--ink-800);font-weight:500}
  /* Four labels repeated over fifteen cards is sixty shouted words carrying no
     information. They stay uppercase so they read as labels, but they drop out
     of the foreground; the value is what a provider is actually scanning for. */
  .ptable td::before{content:attr(data-l);font-size:.68rem;font-weight:700;
    letter-spacing:.08em;text-transform:uppercase;color:var(--ink-400);padding-top:2px}
}
@media (min-width:680px) and (max-width:900px){
  .ptable tbody{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ============================================================
   PAGE JUMP BAR (panel detail, narrow viewports only)
   ------------------------------------------------------------
   The panel page runs to about thirteen screens on a phone. Above
   1081px the sticky aside already gives the reader a fixed point,
   so this only exists below that. It is a horizontally scrolling
   rail, not a wrapping block — a wrapping list of nine headings
   would take a third of the viewport before the content starts.
   ============================================================ */
.page-jump{display:none}
@media (max-width:1080px){
  .page-jump{
    display:block;position:sticky;top:var(--header-h);z-index:55;
    /* The rail scrolls inside itself; without this the sticky container still
       contributes its children's width to the document scroll width. */
    overflow:hidden;max-width:100%;
    background:rgba(255,255,255,.96);backdrop-filter:saturate(180%) blur(12px);
    border-bottom:1px solid var(--line);
    padding:10px 0 11px;margin-bottom:4px}
  .pj-label{display:block;padding:0 var(--gut) 7px;font-size:.68rem;font-weight:700;
    letter-spacing:.1em;text-transform:uppercase;color:var(--ink-400)}
  .page-jump ul{list-style:none;display:flex;gap:8px;overflow-x:auto;
    padding:0 var(--gut) 2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .page-jump ul::-webkit-scrollbar{display:none}
  .page-jump li{flex:none}
  .page-jump a{display:block;padding:9px 15px;border-radius:var(--r-pill);
    background:var(--bg);color:var(--ink-700);font-size:.86rem;font-weight:500;
    white-space:nowrap;transition:background .15s,color .15s}
  .page-jump a[aria-current="true"]{background:var(--navy-600);color:#fff}
  /* The guide is a different destination from a section on this page, so it
     reads as a link rather than a position. */
  .page-jump a.pj-out{background:var(--blue-50);color:var(--blue-700);font-weight:600}
  .page-jump a.pj-out::after{content:" \2192"}
  /* Sections must clear both the header and this bar when jumped to. */
  .detail-main > section{scroll-margin-top:calc(var(--header-h) + 76px)}
}
@media (pointer:coarse){
  .page-jump a{min-height:44px;display:flex;align-items:center}
}

/* The Available panels table stacks rather than scrolling sideways. A
   horizontal scroll inside a vertically scrolling page is the least
   discoverable gesture on a phone, and the Notes column is where the
   ordering guidance lives. */
@media (max-width:620px){
  .table-scroll .dtable--stack{min-width:0}
  .dtable--stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .dtable--stack,.dtable--stack tbody,.dtable--stack tr,.dtable--stack td{display:block;width:100%}
  .dtable--stack tr{padding:16px 0;border-bottom:1px solid var(--line)}
  .dtable--stack tr:last-child{border-bottom:0}
  .dtable--stack td{padding:0;border:0;margin-top:10px}
  .dtable--stack td:first-child{margin-top:0}
  .dtable--stack td::before{content:attr(data-l);display:block;margin-bottom:3px;
    font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
    color:var(--ink-400)}
  .table-scroll:has(.dtable--stack){overflow-x:visible;min-width:0}
  .table-scroll:has(.dtable--stack)::after{display:none}
}

/* ============================================================
   25. RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  /* Header collapses at 1080, not 860: seven nav items plus the logo and the
     actions measure about 1,019px, so it overflowed on iPad (1024) and
     Surface (912). The whole drawer moves with it — splitting the collapse
     from its styling left the open menu unstyled between 861 and 1080. */
  .nav,.hdr-actions .btn--primary{display:none}
  .nav-toggle{display:grid}
  .hdr{gap:14px}
  .nav[data-open="true"]{display:grid;gap:3px;position:fixed;inset:var(--header-h) 0 auto 0;
    padding:18px var(--gut) 26px;background:var(--card);box-shadow:var(--sh-lg);
    max-height:calc(100dvh - var(--header-h));overflow-y:auto}
  .nav[data-open="true"] a,.nav[data-open="true"] .drop-btn{padding:14px 16px;font-size:1rem;
    width:100%;border-radius:var(--r-sm)}
  /* In the drawer the drop-down is a nested list, not an overlay. */
  .drop{position:static;width:100%;display:none;box-shadow:none;padding:0 0 0 14px;grid-template-columns:1fr}
  .drop[data-open="true"]{display:grid}
  .nav-cta{display:block;margin-top:8px}
  .nav-cta .btn{width:100%;justify-content:center}

  .hero-inner{grid-template-columns:minmax(0,1fr);gap:44px;padding:44px 36px}
  .detail-hero-inner{grid-template-columns:minmax(0,1fr);gap:36px;padding:36px}
  .detail-body{grid-template-columns:minmax(0,1fr);gap:28px}
  .aside{position:static}
  /* The sticky aside carries the ordering CTA above 1081; below that it lands
     after the whole page, so the hero copy takes over. Never both at once. */
  .detail-cta{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 4px}
  .detail-cta .btn{flex:1 1 auto;justify-content:center}
  /* Was max-width on each <section>, which capped the white cards at 800px but
     left the notice, the disclaimer line and the hero running the full 968px of
     an iPad in landscape — a right edge that stepped in and out down the page.
     One centred measure column instead, so every block shares an edge. */
  .detail-main,.aside{max-width:840px;margin:0 auto;width:100%}
  .guide-body{grid-template-columns:minmax(0,1fr);gap:24px}
  .guide-nav{position:static}
  .split{grid-template-columns:minmax(0,1fr);gap:36px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px}
  /* auto-fit rather than a hard 2 columns: three tiles in a 2-column grid
     left a half-width orphan through this whole band. */
  .grid--3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

  /* The drawer is fixed at z-index 60 (its header). The cookie banner is 80 and
     the floating call bubble 70, so both sat on top of the open menu and the
     banner covered the drawer's own "Order" button until it was dismissed. */
  .nav[data-open="true"]{z-index:90}
  body.is-nav-open .float,body.is-nav-open .cookie{display:none}

  /* Two columns inside the drawer once there is room. One column of eight
     category rows made the open menu 1,000px tall on an iPad. */
  .drop[data-open="true"]{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

  /* Lightbox: arrows out of the image and into a bar at the bottom of the
     screen — off the report, and in thumb reach. */
  .lb-bar{position:absolute;left:0;right:0;bottom:78px;display:flex;
    align-items:center;justify-content:center;gap:12px;padding:10px 14px}
  .lb-bar .lb-btn,.lb-bar .lb-cap{position:static;transform:none;inset:auto}
  .lb-bar .lb-cap{min-width:7.5em;font-size:.9rem;color:#fff;font-variant-numeric:tabular-nums}
  .lb-zoom{display:grid}
  .lb{padding:24px 16px 190px}
  .lb img{max-height:calc(100dvh - 250px)}
}

@media (max-width:860px){
  :root{--gut:18px;--header-h:66px}
  .section{padding:52px 0}
  .section--lead{padding:36px 0 44px}
  .section--tight{padding:36px 0}
  .hero{padding:24px 0 44px}
  .hero-inner{padding:34px 24px;border-radius:var(--r-lg)}
  .cta-inner{padding:40px 28px}
  .grid--3,.cat-list{grid-template-columns:minmax(0,1fr)}
  .team-grid{grid-template-columns:minmax(0,1fr)}
    .footer-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .head{margin-bottom:24px}
  .report-stack-row{grid-template-columns:minmax(0,1fr);gap:22px;justify-items:start}
  .detail-main > section{padding:26px 22px}
  /* The panel hero kept 36px of padding all round while the home hero dropped
     to 24 and the body sections to 22 — the page that sells was the one giving
     the most of a 390px screen away to margin. */
  .detail-hero-inner{padding:26px 22px;border-radius:var(--r-lg)}
  .detail-hero{padding:20px 0 4px}
  .form-card{padding:26px 22px}
}

@media (max-width:560px){
  .display,.hero h1{font-size:clamp(2rem,8.5vw,2.7rem)}
  .btn-row{flex-direction:column;align-items:stretch}
  .btn-row .btn{width:100%}
  .float a:not(:first-child){display:none}
  .cookie{left:12px;right:12px;bottom:12px;padding:18px}
  .lb{padding:16px 12px 178px}
  .lb-strip{padding:10px 12px}
  /* 40px was under every touch-target floor. A 63-page rail is thumbed, not
     clicked, so the page number has to survive the smaller screen too. */
  .lb-strip button{width:46px}
  .help-strip{flex-direction:column;align-items:flex-start;padding:24px}
  .feat-list li{grid-template-columns:1fr;gap:14px}
}

/* ============================================================
   26. PRINT
   ============================================================ */
/* ============================================================
   FIXES FROM THE PRE-LAUNCH AUDIT
   ============================================================ */

/* .photo-row had no mobile rule at all — at 360px the two images computed to
   115px and 74px tall, and the absolutely-positioned caption (34px of top
   padding) swamped them. */
@media (max-width:700px){
  }

/* One 790px-wide team card holding a 76px avatar is not a card. Hold two
   columns until the container is actually narrow. */
@media (max-width:860px) and (min-width:621px){
  .team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* The drawer copy of the CTA is only for the collapsed header. */
/* Quiet by design — the amber .notice is reserved for per-panel warnings
   that actually change ordering behaviour. Amber everywhere means amber
   means nothing. */
/* The quiet tier of the limitation notice. Same content as .notice--strong,
   without competing with it. */
.limits{margin:0 0 22px;border-left:2px solid var(--line-strong);padding-left:16px}
.limits summary{font-family:var(--font-display);font-weight:700;font-size:.95rem;
  color:var(--ink-800);cursor:pointer;padding:5px 0;list-style-position:outside}
.limits summary:hover{color:var(--blue-600)}
.limits summary:focus-visible{outline:2px solid var(--blue-600);outline-offset:3px;border-radius:3px}
.limits p{margin:8px 0 6px;font-size:.9rem;line-height:1.65;color:var(--ink-600);max-width:var(--prose)}

.micro-note{margin:0 0 22px;font-size:.83rem;color:var(--ink-500);line-height:1.55;
  padding-left:12px;border-left:2px solid var(--line-strong)}
.micro-note a{color:var(--blue-700);text-decoration:underline;text-underline-offset:2px}
.js-count-row{margin:20px 0 8px}
/* "View report" only appeared on hover, so on touch the sample report looked
   like an inert thumbnail. */
@media (hover:none){
  .report-stack .rs-open{opacity:1;transform:none}
}

/* Spec values were right-aligned, which gives a ragged left edge in the one
   column a reader actually scans. */
.spec .sv{text-align:left}

/* Section headings on the interior pages had no rule at all, so they rendered
   at the UA default 2em — smaller than a homepage section heading, and fixed
   at every viewport. */
.head h1{font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.9rem,3.4vw,2.5rem);line-height:1.1;letter-spacing:-.028em;color:var(--ink-900)}

/* Disabled download rows are no longer anchors, so they need their own box. */
/* A row you cannot have must not look more available than one you can. The
   live rows are flat grey; this is the same shape, outlined and dimmed. */
.dl-row{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;
  width:100%;padding:18px 20px;border-radius:var(--r);
  background:transparent;box-shadow:none;color:var(--ink-500);
  outline:1px dashed var(--line-mid);outline-offset:-1px}
.dl-row b{color:var(--ink-600);font-weight:600}

/* Inline form errors. The cleanup for these existed; the elements never did. */
/* The accordion question is now inside an h3 for screen-reader heading
   navigation; the h3 itself must not add any visual weight. */
.acc-h{margin:0;font:inherit;font-weight:inherit;letter-spacing:inherit}
.err{display:block;margin-top:6px;font-size:.82rem;font-weight:600;color:#A3231F}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{
  border-color:#A3231F;box-shadow:0 0 0 3px rgba(163,35,31,.12)}

/* Links inside body copy need an affordance other than position. */
.crumb a{color:var(--blue-700);text-decoration:underline;text-underline-offset:2px}
.site-footer a:not(.btn){text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}

@media print{
  .site-header,.site-footer,.float,.cookie,.btn,.aside,.guide-nav,.lb,.skip-link,.help-strip{display:none!important}
  body{color:#000;background:#fff;font-size:11pt;line-height:1.5}
  .container{max-width:100%;padding:0}
  .detail-body,.guide-body,.split,.hero-inner{grid-template-columns:1fr!important;gap:0}
  .card,.panel,.detail-main > section,.hero-inner,.detail-hero-inner{box-shadow:none!important;border:1px solid #ccc;border-radius:0}
  .acc-a[hidden],.faq-a[hidden]{display:block!important}
  .acc-i,.faq-i,.card-foot .go{display:none}
  .detail-main > section,.accordion > div{page-break-inside:avoid}
  thead{display:table-header-group}
  tr,img,figure{page-break-inside:avoid}
  h1,h2,h3{page-break-after:avoid}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}