:root {
    --charcoal:var(--ink); --coral:#2DD4BF; --coral-dark:#1FB5A2; --offwhite:var(--strong);
    --midgrey:var(--second); --coral-tint:#0F3A34; --warm-grey:var(--hair); --near-black:var(--strong);
    --body-grey:var(--muted); --grid:var(--gridc);
    --ok:#31C48D; --bad:#d64545; --mid:#eda100; --info:#2a78d6;
  }
  *,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
  body { background: var(--bg); color:var(--charcoal); font-family:'Inter',Arial,sans-serif;
         font-weight:300; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; }
  .shell { max-width:1100px; margin:0 auto; padding:0 24px; }

  nav { position:sticky; top:0; z-index:100; background: var(--bg); border-bottom:1px solid var(--warm-grey);
        display:flex; align-items:center; justify-content:space-between; padding:0 60px; height:72px; }
  @media (max-width:700px){ nav{ padding:0 20px; } }
  .nav-logo { display:flex; align-items:center; gap:12px; text-decoration:none; }
  .nav-wordmark { display:flex; flex-direction:column; }
  .nav-wordmark .altima { font-size:15px; letter-spacing:4px; color:var(--charcoal); line-height:1; }
  .nav-wordmark .partners { font-size:15px; letter-spacing:4px; color:var(--coral); line-height:1.4; }
  .nav-links { display:flex; align-items:center; gap:40px; list-style:none; }
  .nav-links a { font-size:13px; letter-spacing:1px; color:var(--midgrey); text-decoration:none; transition:color .2s; }
  .nav-links a:hover { color:var(--coral); }
  .nav-cta { background:var(--coral); color:#071F1B; padding:10px 24px; font-size:13px;
             letter-spacing:1px; border-radius:3px; text-decoration:none; margin-left:24px; }
  .nav-cta:hover { background:var(--coral-dark); }
  @media (max-width:860px){ .nav-links{ display:none; } }

  header.hero { background-color:var(--band);background-image:url('/patterns/flow-field-2.svg');background-size:cover;background-position:center; color:var(--offwhite); padding:56px 0 54px; }
  .eyebrow { font-size:13px; letter-spacing:3px; text-transform:uppercase; color:var(--coral);
             margin-bottom:18px; display:flex; align-items:center; gap:14px; }
  .eyebrow::after { content:''; display:block; width:50px; height:1px; background:var(--coral); }
  h1 { font-size:clamp(30px,4vw,44px); font-weight:200; line-height:1.15; color:var(--strong);
       letter-spacing:.5px; margin-bottom:16px; max-width:24ch; }
  .hero p { color:var(--muted); max-width:64ch; font-size:16.5px; }
  .hero-stats { display:flex; gap:44px; flex-wrap:wrap; margin-top:30px; }
  .hero-stats b { display:block; font-size:26px; font-weight:200; font-variant-numeric:tabular-nums; color:var(--strong); }
  .hero-stats span { font-size:12.5px; color:var(--body-grey); letter-spacing:.5px; }

  main { padding:40px 0 70px; }
  .controls { display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-bottom:10px; }
  .controls input[type=search] { flex:1 1 300px; padding:13px 16px; font-size:16px; font-family:inherit;
      border:1px solid var(--warm-grey); background: var(--panel); color:var(--charcoal); }
  .controls input[type=search]:focus { outline:2px solid var(--coral-tint); border-color:var(--coral); }
  .controls select { padding:12px 12px; font-size:14px; font-family:inherit; border:1px solid var(--warm-grey);
      background: var(--panel); color:var(--midgrey); }
  .agchecks { display:flex; gap:14px; font-size:13.5px; color:var(--midgrey); align-items:center; }
  .agchecks label { display:inline-flex; gap:6px; align-items:center; cursor:pointer; }
  .hint { font-size:13px; color:var(--body-grey); margin-bottom:26px; }


  .group { background: var(--panel); border:1px solid var(--warm-grey); margin-bottom:14px; }
  .group summary { list-style:none; cursor:pointer; padding:16px 22px; display:flex; gap:14px;
      align-items:center; flex-wrap:wrap; }
  .group summary::-webkit-details-marker { display:none; }
  .group summary:hover { background:var(--band); }
  .gname { font-size:16.5px; font-weight:400; letter-spacing:.3px; margin-right:auto; }
  .chip { font-size:11px; letter-spacing:1px; padding:4px 9px; border-radius:3px; white-space:nowrap;
          text-transform:uppercase; }
  .chip.recommended { background:rgba(27,175,122,.12); color:var(--ok); }
  .chip.restricted { background:rgba(237,161,0,.14); color:#b57b00; }
  .chip.not-recommended { background:rgba(214,69,69,.12); color:var(--bad); }
  .chip.deferred { background:rgba(237,161,0,.14); color:#b57b00; }
  .chip.appraised { background:rgba(42,120,214,.12); color:var(--info); }
  .chip.other, .chip.advice, .chip.non-submission, .chip.withdrawn, .chip.terminated, .chip.no-benefit { background:var(--warm-grey); color:var(--midgrey); }
  .divflag { font-size:11px; letter-spacing:1.5px; color:var(--bad); border:1px solid rgba(214,69,69,.4);
             padding:4px 9px; border-radius:3px; text-transform:uppercase; }
  .gbody { padding:0 22px 18px; overflow-x:auto; }
  table { width:100%; border-collapse:collapse; font-size:13.5px; min-width:560px; }
  th { text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:1.2px; color:var(--body-grey);
       font-weight:400; padding:8px 10px; border-bottom:1px solid var(--warm-grey); }
  td { padding:9px 10px; border-bottom:1px solid var(--grid); color:var(--midgrey); vertical-align:top; }
  td a { color:var(--coral); text-decoration:none; }
  td a:hover { text-decoration:underline; }
  .more { text-align:center; margin:24px 0; }
  .more button { border:1px solid var(--warm-grey); background: var(--panel); padding:12px 28px; font-size:14px;
      font-family:inherit; color:var(--midgrey); cursor:pointer; }
  .more button:hover { border-color:var(--coral); color:var(--coral); }
  .nores { color:var(--body-grey); padding:30px 0; text-align:center; }

  .cta { background: var(--band); color:var(--offwhite); padding:48px 30px; text-align:center; margin-top:52px; }
  .cta h2 { font-size:26px; font-weight:200; margin-bottom:12px; color:var(--strong); }
  .cta p { color:var(--muted); max-width:60ch; margin:0 auto 22px; font-size:15px; }
  .cta a { display:inline-block; background:var(--coral); color:#071F1B; text-decoration:none;
           padding:13px 28px; font-size:15px; letter-spacing:1px; }
  .cta a:hover { background:var(--coral-dark); }

  footer { background: var(--band); padding:44px 60px 34px; color:var(--body-grey); font-size:12.5px; }
  @media (max-width:700px){ footer{ padding:36px 24px 28px; } }
  footer .inner { max-width:1100px; margin:0 auto; }
  footer p { max-width:92ch; margin-bottom:9px; }
  footer a { color:#7FE0D2; }

  .ratesband { background: var(--panel); border:1px solid var(--warm-grey); padding:20px 24px; margin:8px 0 30px; }
  .ratesband h3 { font-size:14.5px; font-weight:500; margin-bottom:6px; }
  .ratesband p { font-size:13.5px; color:var(--body-grey); margin-bottom:12px; }

/*ALT-LAYOUT-V1*/
.alt-navbox{display:none}
.alt-burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:12px 10px;margin-left:auto}
.alt-burger span{width:22px;height:2px;background:var(--charcoal,var(--ink));transition:transform .2s,opacity .2s}
@media (max-width:900px){
  nav{padding:0 20px !important;position:relative}
  nav .nav-links{display:none !important}
  nav .alt-navbox:checked ~ .nav-links{display:flex !important;flex-direction:column;align-items:stretch;
    position:absolute;top:72px;left:0;right:0;background:var(--panel);
    border-bottom:1px solid var(--warm-grey,var(--hair));box-shadow:0 14px 28px rgba(0,0,0,.10);
    padding:8px 24px 16px;gap:0;z-index:99;margin:0}
  nav .nav-links li{list-style:none}
  nav .nav-links a{display:block;padding:13px 0;font-size:15px !important;border-bottom:1px solid var(--warm-grey,var(--hair))}
  nav .nav-links li:last-child a{border-bottom:none}
  .alt-burger{display:flex}
  nav .alt-navbox:checked ~ .alt-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  nav .alt-navbox:checked ~ .alt-burger span:nth-child(2){opacity:0}
  nav .alt-navbox:checked ~ .alt-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
@media (max-width:480px){ nav .nav-cta{display:none} }

/*ALT-LAYOUT-V1c*/
@media (min-width:901px) and (max-width:1280px){
  nav{padding:0 28px !important}
  nav .nav-links{gap:20px !important}
  nav .nav-cta{margin-left:14px !important}
}

/*ALT-NAV-DD*/
.nav-dd{position:relative;list-style:none}
.nav-dd-label{font-size:13px;letter-spacing:1px;color:var(--midgrey,var(--second));cursor:pointer;transition:color .2s}
.nav-dd-label::after{content:' \25be';font-size:10px;color:var(--body-grey,var(--muted))}
.nav-dd:hover .nav-dd-label,.nav-dd:focus-within .nav-dd-label{color:var(--coral,#2DD4BF)}
.nav-dd-menu{display:none;position:absolute;top:100%;left:-18px;background:var(--panel);
  border:1px solid var(--warm-grey,var(--hair));box-shadow:0 14px 28px rgba(0,0,0,.10);
  min-width:275px;padding:6px 0;margin:0;z-index:120}
.nav-dd:hover .nav-dd-menu,.nav-dd:focus-within .nav-dd-menu{display:block}
.nav-dd-menu li{list-style:none}
.nav-dd-menu a{display:block;padding:10px 18px;font-size:13px;letter-spacing:1px;white-space:nowrap}
@media (max-width:900px){
  .nav-dd-label{display:block;padding:13px 0 4px;font-size:12px !important;letter-spacing:2px;
    text-transform:uppercase;color:var(--body-grey,var(--muted))}
  .nav-dd-label::after{content:''}
  .nav-dd-menu{display:block !important;position:static;border:none;box-shadow:none;background:none;
    min-width:0;padding:0 0 0 14px}
}

/*ALT-THEME-V1*/
:root{--bg:#0B0E12;--band:#10141A;--panel:#12161C;--hair:#232830;--gridc:#1E232B;
--ink:#E7EAEE;--strong:#F3F5F7;--second:#B6BCC4;--muted:#8A919B;--faint:#3C434D;--accent2:#FB923C;--accent2-tint:rgba(251,146,60,.12)}
[data-theme="light"]{--bg:#F7F3EC;--band:#EFE9DF;--panel:#FFFFFF;--hair:#E4DCD0;--gridc:#EBE4D9;
--ink:#2A2622;--strong:#1A1512;--second:#57504A;--muted:#6A6159;--faint:#CEC6BA;
--charcoal:#2A2622;--offwhite:#1A1512;--near-black:#1A1512;--midgrey:#57504A;
--body-grey:#6A6159;--warm-grey:#E4DCD0;--grid:#EBE4D9;
--coral:#0E9C87;--coral-dark:#0B7E6E;--coral-tint:#0A6B5D;--accent2:#C2410C;--accent2-tint:rgba(194,65,12,.10)}
[data-theme="light"] svg [stroke="#ECECEA"],[data-theme="light"] svg [stroke="#F3F5F7"],[data-theme="light"] svg [stroke="#E7EAEE"]{stroke:#2A2622}
[data-theme="light"] svg [fill="#ECECEA"],[data-theme="light"] svg [fill="#F3F5F7"],[data-theme="light"] svg [fill="#E7EAEE"]{fill:#2A2622}
[data-theme="light"] svg [fill="#1A2129"]{fill:#8A8177}
#theme-toggle{background:none;border:1px solid var(--hair);color:var(--muted);border-radius:3px;
cursor:pointer;font-size:11px;letter-spacing:1px;padding:6px 10px;margin-left:18px;font-family:inherit}
#theme-toggle:hover{color:var(--coral);border-color:var(--coral)}

/*ALT-FULLBLEED*/
body{background-image:url('/patterns/flow-field-2.svg');background-size:cover;background-position:center;background-attachment:fixed}
.hero, header.hero{background-attachment:fixed}
@media (max-width:900px){body,.hero, header.hero{background-attachment:scroll}}

/*ALT-DISPLAY-V1*/
/* Display type set solid.
   Targets h1/h2 DIRECTLY rather than enumerating wrapper classes. Three
   successive attempts to list the wrappers each missed cases -- .cta-band,
   .legal-hero, then .col/.prose/.shell -- leaving headings of identical size
   on the same page 20px of leading apart. Selecting the elements themselves is
   complete by construction; the exceptions are named instead, and there are
   only two.
   Exempt: .panel h2 (20-22px) and .legal h2 (22px, carries its own 1.3) are
   subheads, not display type -- set solid reads cramped at that size. */
h1,h2{line-height:1.04;letter-spacing:-.02em}
/* these carry their own line-height, so bare h1/h2 loses to them on
   specificity and they have to be named explicitly */
.hero h1,.page-hero h1,.legal-hero h1,.title-ov h1{line-height:1.02}
.problem h2,.why h2{line-height:1.04}
/* subheads (20-23px) keep their looser leading and their own tracking */
.panel h2{line-height:1.35}
.legal h2,.step h2{letter-spacing:normal}
.alt-tool .t-title{line-height:1.06;letter-spacing:-.015em}
.t-stat{line-height:1.1;letter-spacing:-.02em}

/* Optical sizing: 1.02 is right at 52px and cramped at 30px. Below the site's
   900px breakpoint display sizes drop to 30-42px, so leading opens back up
   and the tracking eases off. */
@media (max-width:900px){
  h1,h2{line-height:1.16;letter-spacing:-.01em}
  .hero h1,.page-hero h1,.legal-hero h1,.title-ov h1{line-height:1.12}
  .problem h2,.why h2{line-height:1.16}
  .panel h2{line-height:1.4}
  .legal h2,.step h2{letter-spacing:normal}
  .alt-tool .t-title{line-height:1.2;letter-spacing:-.005em}
  .t-stat{line-height:1.15}
}

/*ALT-PRINT-V1*/
@page{margin:18mm}
@media print{
  /* 1. paper palette, forced over whichever theme is active */
  :root,[data-theme="light"]{
    --bg:#FFFFFF;--band:#FFFFFF;--panel:#FFFFFF;--hair:#C8C2B8;--gridc:#DCD6CC;
    --ink:#1A1512;--strong:#000000;--second:#3D3831;--muted:#4F4841;--faint:#9A938A;
    --charcoal:#1A1512;--offwhite:#000000;--near-black:#000000;--midgrey:#3D3831;
    --body-grey:#4F4841;--warm-grey:#C8C2B8;--grid:#DCD6CC;
    --coral:#0B6E60;--coral-dark:#095A4E;--coral-tint:#095A4E;
    --accent2:#9A3412;--accent2-tint:rgba(154,52,18,.10);
  }
  html,body{background:#FFFFFF !important;color:var(--ink) !important}
  /* the flow-field is a full-bleed fixed image: pure ink cost on paper */
  body,.page-hero{background-image:none !important;background-attachment:scroll !important}
  .alt-tools,.page-hero,.legal-hero,.cta-band,.cta-section,.problem,.services,.process{
    background:#FFFFFF !important}

  /* 2. SVG swaps, unscoped from the theme attribute */
  svg [stroke="#ECECEA"],svg [stroke="#F3F5F7"],svg [stroke="#E7EAEE"]{stroke:#1A1512 !important}
  svg [fill="#ECECEA"],svg [fill="#F3F5F7"],svg [fill="#E7EAEE"]{fill:#1A1512 !important}
  svg [fill="#1A2129"]{fill:#6F675E !important}

  /* 3. never print a half-finished reveal */
  .hero-line{animation:none !important;clip-path:none !important;
    opacity:1 !important;transform:none !important}
  .hero-eyebrow::after{animation:none !important;width:60px !important}
  .reveal,.reveal-stagger>*{opacity:1 !important;transform:none !important;
    animation:none !important;transition:none !important}

  /* 4. Colour, done by exhaustion rather than enumeration.
     Enumerating hardcoded hexes missed most of them (a static parse found 12;
     rendering under print media and measuring every element found 212). So:
     drive ALL text to ink, then re-introduce only accents dark enough for
     paper. `*` has zero specificity, so every rule below wins over it.
     Every colour here measured >=4.5:1 on white. */
  *,*::before,*::after{color:#1A1512 !important}

  /* Same exhaustion applied to backgrounds. Browsers drop backgrounds when
     printing, so anything relying on a filled shape for contrast loses it --
     and several grounds are hardcoded dark (.pr-card #12161C, .pr-band
     #10141A), which survives the token override and prints text at 1:1.
     Clear every fill, restore paper, give structural blocks a border back. */
  *{background-color:transparent !important;background-image:none !important}
  html,body{background:#FFFFFF !important}
  .alt-tool,.panel,.pr-card,.team-card,.group,.service-card,.pw-strip{
    border:1px solid #C8C2B8 !important}

  a{color:#0B6E60 !important;text-decoration:none}
  .chip,.divflag,.step-circle,.team-initial{
    border:1px solid currentColor !important;padding:1px 6px;border-radius:3px}
  .step-circle,.team-initial{color:#0B6E60 !important}

  /* status keeps its meaning: hue preserved, darkened for ink */
  .chip.recommended{color:#0A6B3D !important}
  .chip.restricted,.chip.deferred{color:#7A5200 !important}
  .chip.not-recommended,.divflag{color:#A32121 !important}
  .chip.appraised{color:#1A4F94 !important}
  .chip.ser{color:#9A3412 !important}

  /* pale dark-theme greys and teals used for body copy */
  .stat-label,.statband a,.macronote a,.gate .alt a{color:#0B6E60 !important}
  .step p,.legal-hero p,.m-item p,.service-card.dark p,
  .pr-band p{color:#3D3831 !important}
  .d-lira{color:#8A5A00 !important}
  .service-card.dark{background:#FFFFFF !important;border:1px solid var(--hair) !important}

  /* chrome off, wordmark kept */
  .nav-links,.nav-cta,#theme-toggle,.alt-burger,.alt-navbox,
  .btn-primary,.btn-outline,.btn-dark,.searchbar,.geomenu{display:none !important}
  nav{position:static !important;box-shadow:none !important;border-bottom:1px solid var(--hair) !important}

  /* keep blocks whole across page breaks */
  .alt-tool,.team-card,.panel,.group,.pw-strip,table,figure,tr{
    break-inside:avoid;page-break-inside:avoid}
  h1,h2,h3{break-after:avoid;page-break-after:avoid}
  a{text-decoration:none;color:var(--ink) !important}
}

/*ALT-LIGHTFIX-V1*/
/* 1. dark boxes ------------------------------------------------------- */
/* --coral-tint should be a light wash on a light ground, like --accent2-tint */
[data-theme="light"]{--coral-tint:#DCEEEA}
[data-theme="light"] .step .card{background:rgba(255,255,255,.92);
  border:1px solid var(--hair);border-left:2px solid var(--coral)}
[data-theme="light"] .pr-card{background:var(--panel)}
[data-theme="light"] .pr-band{background:var(--band)}
[data-theme="light"] .pr-btn.ghost:hover{background:var(--band);color:var(--strong)}
/* The chart tooltip declares a dark background but no colour, so its text
   inherits and goes dark-on-dark in the light theme. It is display:none until
   hover, which is why the rendered contrast audit never saw it -- found by
   grepping for "dark background + no text colour" instead. */
[data-theme="light"] .tooltip{background:rgba(255,255,255,.97);
  border:1px solid var(--hair);color:var(--ink);
  box-shadow:0 6px 20px rgba(0,0,0,.14)}

/* 2. teal ------------------------------------------------------------- */
/* #0E9C87 is a mid-tone: too light to carry white, too dark to read on paper.
   #0B6E60 passes both ways. Dark theme is unaffected. */
[data-theme="light"]{--coral:#0B6E60;--coral-dark:#095A4E}
[data-theme="light"] .nav-cta,[data-theme="light"] .cta a,[data-theme="light"] .team-initial,[data-theme="light"] .endmatter a.btn,[data-theme="light"] .btn,[data-theme="light"] .btn-primary,[data-theme="light"] .step-circle.active,[data-theme="light"] .tag.coral,[data-theme="light"] .pr-btn,[data-theme="light"] .gate a{color:#FFFFFF}
[data-theme="light"] .pr-btn.ghost{color:var(--strong)}
/* ghost/outline variants have no teal fill, so they must not take white */
[data-theme="light"] .btn.ghost,[data-theme="light"] .btn-outline,
[data-theme="light"] a.btn.ghost{color:var(--strong)}

/* 3. dark-theme literals leaking into the light theme ----------------- */
/* Same exhaustion as the print pass: these are hardcoded hexes tuned for a
   dark ground, so no token redefinition reaches them. Hue is preserved and
   darkened; every value below measured >=4.5:1 on both #FFFFFF and #F7F3EC. */
[data-theme="light"] .chip.recommended,[data-theme="light"] .d-aus{color:#0A6B3D}
[data-theme="light"] .chip.restricted,[data-theme="light"] .chip.deferred{color:#7A5200}
[data-theme="light"] .chip.not-recommended,[data-theme="light"] .divflag{color:#A32121}
[data-theme="light"] .chip.appraised,[data-theme="light"] .d-usa,
[data-theme="light"] .d-en,[data-theme="light"] .d-sema{color:#1A4F94}
[data-theme="light"] .chip.ser{color:#9A3412}
[data-theme="light"] .d-lira{color:#8A5A00}
[data-theme="light"] .d-fr,[data-theme="light"] .d-eng,
[data-theme="light"] .stat-label,[data-theme="light"] .statband a,
[data-theme="light"] .macronote a,[data-theme="light"] .gate .alt a{color:var(--coral)}
[data-theme="light"] .sub,[data-theme="light"] .hintscroll,
[data-theme="light"] .step p,[data-theme="light"] .m-item p,
[data-theme="light"] .pr-band p,[data-theme="light"] .legal-hero p{color:var(--second)}
[data-theme="light"] footer a{color:var(--coral)}
[data-theme="light"] .d-dula,[data-theme="light"] .d-rec{color:#0A6B3D}
[data-theme="light"] .d-tirz,[data-theme="light"] .d-no{color:var(--coral)}
[data-theme="light"] .d-res{color:#8A5A00}
[data-theme="light"] .d-def{color:#1A4F94}

/* inline style="color:#..." beats any class rule, so match the attribute */
[data-theme="light"] [style*="#7FE0D2"],[data-theme="light"] [style*="#2DD4BF"],
[data-theme="light"] [style*="#7fe0d2"],[data-theme="light"] [style*="#2dd4bf"]{
  color:var(--coral) !important}
[data-theme="light"] [style*="#31C48D"],[data-theme="light"] [style*="#31c48d"]{
  color:#0A6B3D !important}
[data-theme="light"] [style*="#5B9DFF"],[data-theme="light"] [style*="#2A78D6"],
[data-theme="light"] [style*="#5b9dff"],[data-theme="light"] [style*="#2a78d6"]{
  color:#1A4F94 !important}
[data-theme="light"] [style*="#D99A2B"],[data-theme="light"] [style*="#d99a2b"]{
  color:#8A5A00 !important}
/* JS that assigns el.style.color serialises to rgb(), so match that form too */
[data-theme="light"] [style*="rgb(127, 224, 210)"],
[data-theme="light"] [style*="rgb(45, 212, 191)"]{color:var(--coral) !important}
[data-theme="light"] [style*="rgb(42, 120, 214)"],
[data-theme="light"] [style*="rgb(91, 157, 255)"]{color:#1A4F94 !important}
[data-theme="light"] [style*="rgb(49, 196, 141)"]{color:#0A6B3D !important}
[data-theme="light"] [style*="rgb(217, 154, 43)"]{color:#8A5A00 !important}
/* the ClinicalTrials.gov links are written by JS as style="color:var(--s1)",
   so the inline attribute holds a var() rather than a hex -- match that form.
   Scoped to the inline style so the .bar chart series keeps its own colour. */
[data-theme="light"] [style*="color:var(--s1)"],
[data-theme="light"] [style*="color: var(--s1)"]{color:#1A4F94 !important}
[data-theme="light"] [style*="color:var(--s3)"],
[data-theme="light"] [style*="color: var(--s3)"]{color:#0A6B3D !important}
/* last three one-offs, each found by measurement rather than inspection */
[data-theme="light"] h1 em{color:var(--coral)}
[data-theme="light"] [style*="#b5b5b0"],[data-theme="light"] [style*="#B5B5B0"]{
  color:var(--second) !important}
[data-theme="light"] [style*="#3D6B4A"],[data-theme="light"] [style*="#3d6b4a"]{
  background:#DCEEDC !important;color:#1E4D2B !important}
/* remaining one-off literals found by measurement */
[data-theme="light"] .service-card.dark p,[data-theme="light"] .m-note,
[data-theme="light"] .pr-note{color:var(--second)}

/*ALT-LIGHTFIX-V1 HERO*/
/* same 250ms wipe as the homepage, on display elements only */
.page-hero .eyebrow,.page-hero .kicker,.page-hero h1,
.hero .eyebrow,.hero .kicker,.hero h1,.legal-hero h1{
  animation:heroIn .25s ease-out both}
.page-hero .eyebrow,.page-hero .kicker,.hero .eyebrow,.hero .kicker{animation-delay:.05s}
.page-hero h1,.hero h1,.legal-hero h1{animation-delay:.16s}
.page-hero>p,.page-hero .sub,.hero>p,.hero .sub,.legal-hero>p{
  animation:heroRise .25s ease-out .27s both}
@keyframes heroIn{
  from{clip-path:inset(-.12em 100% -.18em 0)}
  to{clip-path:inset(-.12em -.15em -.18em 0)}
}
@keyframes heroRise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* the from-states hide content, so anything suppressing the animation must
   restore it or the hero never appears */
@media (prefers-reduced-motion:reduce){
  .page-hero .eyebrow,.page-hero .kicker,.page-hero h1,
  .hero .eyebrow,.hero .kicker,.hero h1,.legal-hero h1{animation:none;clip-path:none}
  .page-hero>p,.page-hero .sub,.hero>p,.hero .sub,.legal-hero>p{
    animation:none;opacity:1;transform:none}
}

/*ALT-DARKFIX-V1*/
/* @media screen is load-bearing: these rules are scoped with
   html:not([data-theme="light"]), and print sets no theme attribute, so that
   selector MATCHES when printing. At (0,3,0) with !important it beat the print
   stylesheet's *{color:...!important} and painted dark-theme colours onto
   paper -- #7FB3F5 links at 2.17:1 on white. Dark styling is screen-only. */
@media screen{
/* status chips: same hue, lightened for a dark ground */
html:not([data-theme="light"]) .chip.not-recommended,html:not([data-theme="light"]) .divflag{color:#F28B8B}
html:not([data-theme="light"]) .chip.crit{color:#F08080}
/* restricted/deferred scraped past AA at 5.01:1 so the audit never flagged
   them, but they read visibly dimmer than the 7.6-8.4:1 of their siblings.
   Lightened for consistency rather than compliance. */
html:not([data-theme="light"]) .chip.restricted,html:not([data-theme="light"]) .chip.deferred{color:#E8A93B}
html:not([data-theme="light"]) .chip.appraised{color:#7FB3F5}

/* the ClinicalTrials.gov links are written by JS as style="color:var(--s1)" */
html:not([data-theme="light"]) [style*="color:var(--s1)"],html:not([data-theme="light"]) [style*="color: var(--s1)"]{color:#7FB3F5 !important}

/* --faint is a hairline colour; used as text it is unreadable */
html:not([data-theme="light"]) .no{color:#9AA2AD}

/* --muted on the dark teal tint panel. .cta-section carries the same tint,
   and its paragraph sets the colour inline, so that needs the attribute form. */
html:not([data-theme="light"]) .cta-band p,html:not([data-theme="light"]) .cta-band .sub,html:not([data-theme="light"]) .cta-section p{color:#C3CAD2}
html:not([data-theme="light"]) .cta-section [style*="--body-grey"],
html:not([data-theme="light"]) .cta-band [style*="--body-grey"]{color:#C3CAD2 !important}

/* Links with no colour rule fall back to the browser default #0000EE.
   Scoped to body-copy containers: a blanket a:not([class]) also caught links
   sitting inside teal-filled CTA blocks and made them teal-on-teal at 1:1. */
html:not([data-theme="light"]) .legal a,html:not([data-theme="light"]) .prose a,html:not([data-theme="light"]) .lede a,html:not([data-theme="light"]) footer p a,
html:not([data-theme="light"]) a.btn-dark,html:not([data-theme="light"]) .hero p a,html:not([data-theme="light"]) .page-hero p a{color:var(--coral)}

/* pale panels keep their colour in dark mode, so their text must go dark */
html:not([data-theme="light"]) [style*="#FDF3EF"],html:not([data-theme="light"]) [style*="#fdf3ef"],
html:not([data-theme="light"]) [style*="#FDF3EF"] *,html:not([data-theme="light"]) [style*="#fdf3ef"] *{color:#3A2F2A !important}

/* the "In Progress" tag carries its own inline green */
html:not([data-theme="light"]) [style*="#3D6B4A"],html:not([data-theme="light"]) [style*="#3d6b4a"]{color:#DFF3DF !important}
}

/*ALT-MOBILE-V1*/
@media (max-width:900px){
  /* Wide data tables scroll inside their own panel rather than pushing the
     document wider than the screen (which makes the browser zoom the whole
     page out). No overflow-x:hidden on body -- that would clip the table
     instead of letting it scroll, putting content out of reach. */
  .ratesband,.tablewrap,.panel,.group{
    max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
    box-sizing:border-box}
  img,svg,video,canvas{max-width:100%;height:auto}

  /* Scroll hint on the horizontally scrollable tables. Two mask gradients are
     attached 'local' so they travel with the content, and two shadows are
     attached 'scroll' so they stay put -- the shadow is therefore only visible
     while there is content past that edge, and fades out at the end. Pure CSS,
     no scroll listener. background-image only, so the panel's own
     background-color is left alone. The print stylesheet clears
     background-image, so none of this reaches paper. */
  .tablewrap,.ratesband{
    background-image:
      linear-gradient(to right,var(--panel) 40%,rgba(0,0,0,0)),
      linear-gradient(to left,var(--panel) 40%,rgba(0,0,0,0)),
      radial-gradient(farthest-side at 0 50%,rgba(42,38,34,.20),rgba(0,0,0,0)),
      radial-gradient(farthest-side at 100% 50%,rgba(42,38,34,.20),rgba(0,0,0,0));
    background-position:left center,right center,left center,right center;
    background-size:34px 100%,34px 100%,15px 100%,15px 100%;
    background-repeat:no-repeat;
    background-attachment:local,local,scroll,scroll}
  html:not([data-theme="light"]) .tablewrap,
  html:not([data-theme="light"]) .ratesband{
    background-image:
      linear-gradient(to right,var(--panel) 40%,rgba(0,0,0,0)),
      linear-gradient(to left,var(--panel) 40%,rgba(0,0,0,0)),
      radial-gradient(farthest-side at 0 50%,rgba(255,255,255,.16),rgba(0,0,0,0)),
      radial-gradient(farthest-side at 100% 50%,rgba(255,255,255,.16),rgba(0,0,0,0))}

  /* Timeline dates: the JS offset of 3 percent clears the 11px dot on a wide
     bar but overlaps it on a narrow one, hiding the leading digit. On small
     screens the dot keeps its position and the date right-aligns.
     Selectors are extra-specific because these pages carry a late in-body
     stylesheet that would otherwise win on document order. */
  #freetl .tlrow,.tlrow{grid-template-columns:92px 1fr;gap:10px;align-items:start}
  #freetl .tlbar,.tlrow .tlbar{height:auto;min-height:32px;padding-bottom:15px}
  #freetl .tllabel,.tlbar .tllabel{top:15px;left:0 !important;font-size:10.5px}

  /* Labs scrollytelling. On desktop the chart is a sticky left column and the
     cards scroll in a right column, so they never meet. On one mobile column
     they share the same space: an outgoing card fades as a whole -- background
     included -- so its text sits translucently over the chart's axis labels.
     Below 900px the chart stops being sticky and reads as a lead-in, and the
     steps become ordinary stacked content. Selectors are extra-specific
     because these pages carry a late in-body stylesheet. */
  #graphic.graphic,.graphic{position:static;height:52vh;margin-bottom:4px}
  .scrolly .step,.steps .step{min-height:auto;align-items:stretch}
  .scrolly .step .card,.steps .step .card{margin:0 16px 16px;opacity:1;transform:none}
}