/* ===========================================================================
   Tokens. The only place a value is chosen. Every other stylesheet reads these.
   Derivation and the constraint each choice answers: site/TOKENS.md
   Palette is computed, not picked: src/palette_derivation.py
   =========================================================================== */

/* ---- typefaces (Direction B, 2026 rebrand): a geometric grotesk for display
        and Inter for text and UI. Self-hosted, OFL. The former serif/mono pair
        is retained below (unused) so any direct reference still resolves. ---- */
@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/space-grotesk-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/space-grotesk-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/space-grotesk-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
/* retained, unused - not downloaded unless referenced */
@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/SourceSerif4Variable-Roman.ttf.woff2") format("woff2-variations");
  font-weight: 200 900; font-style: normal; font-display: swap;
}

:root {
  --face-disp: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --face-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --face-data: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---- palette: four fluorescence emission maxima, hue preserved,
          lightness solved for a WCAG contrast target on white ---- */
  --ink:         #242C37;  /* DAPI hue, chroma 0.022, 14.1:1 on paper */
  --ink-soft:    #4F5B69;  /* same hue, 7.0:1 on paper - secondary text */
  --ink-faint:   #67707D;  /* same hue, 5.0:1 on paper and 4.6:1 on panel  */
  --dapi:        #0558AB;  /* 461 nm, 7.0:1  - links, primary action      */
  --fitc:        #25845A;  /* 519 nm, 4.6:1  - published / confirmed      */
  --cy3:         #78791E;  /* 570 nm, 4.6:1  - provisional / caution      */
  --cy5:         #C35048;  /* 670 nm, 4.6:1  - unanswered / withheld      */

  --paper:       #FFFFFF;
  --panel:       #F2F5F8;  /* DAPI hue, chroma 0.006, L 0.968 */
  --rule:        #D5D8DB;
  --rule-strong: #919397;  /* 3.1:1 on paper - control boundaries, 1.4.11 */
  --field:       #000000;  /* the acquisition background. A real black,
                              so a full-bleed data image has no seam.      */
  --on-field:         #FFFFFF;
  --on-field-soft:    #B9C0C8;  /* 9.3:1 on field */
  --on-field-link:    #9EC4EE;  /* DAPI hue lifted for 9.0:1 on field */

  /* ---- spacing: 4 px base, doubling with two intermediate steps ---- */
  --s1: 0.25rem; --s2: 0.5rem;  --s3: 0.75rem; --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;    --s8: 4rem;
  --s9: 6rem;    --s10: 8rem;

  /* ---- type scale: 17 px text, ratio 1.25, capped at 52 px ---- */
  --t-xs:   0.75rem;    /* 12 - tables, source tags */
  --t-sm:   0.875rem;   /* 14 - captions, spec cells */
  --t-base: 1.0625rem;  /* 17 - body */
  --t-lg:   1.25rem;    /* 20 - lead */
  --t-xl:   1.5rem;     /* 24 - h3 */
  --t-2xl:  1.875rem;   /* 30 - h2 */
  --t-3xl:  2.5rem;     /* 40 - h1 */
  --t-4xl:  3.25rem;    /* 52 - display, homepage only */

  --lh-tight: 1.08;  /* Space Grotesk display */
  --lh-data:  1.35;
  --lh-body:  1.55;  /* Inter body */

  --measure: 68ch;   /* under 80 characters, per the brief */

  /* ---- radii (Direction B): controls and buttons rounded, cards softer ---- */
  --r-control: 8px;
  --r-btn:     8px;
  --r-card:    14px;

  /* ---- dark surfaces: the single navy band + card image wells ---- */
  --navy:       #0B1B2E;   /* the one dark section (data band, "all N" card) */
  --navy-soft:  #0A1622;
  --on-navy:        #FFFFFF;
  --on-navy-soft:   #9DB0C4;  /* ~7:1 on navy */
  --accent-cyan:    #5AC7D2;  /* stat numerals on navy only */

  /* ---- elevation: restrained, cards only ---- */
  --shadow-card: 0 1px 2px rgba(16,34,51,.05), 0 10px 26px rgba(16,34,51,.06);
  --shadow-lg:   0 24px 64px rgba(11,27,46,.20);

  --tap: 44px;       /* minimum interactive target */
}

/* ---- reset, only what is needed ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--face-text);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
/* every raster image is emitted with width and height attributes; this keeps
   the box reserved before the bytes arrive, so nothing reflows on load */
img[width][height] { aspect-ratio: attr(width) / attr(height); }

h1, h2, h3, h4 { font-family: var(--face-disp); font-weight: 600; line-height: var(--lh-tight);
                 margin: 0 0 var(--s4); text-wrap: balance; letter-spacing: -0.02em; }
h1 { font-size: var(--t-3xl); letter-spacing: -0.03em; }
h2 { font-size: var(--t-2xl); margin-top: var(--s7); }
h3 { font-size: var(--t-xl); margin-top: var(--s6); }
h4 { font-size: var(--t-lg); margin-top: var(--s5); }
p, ul, ol, dl { margin: 0 0 var(--s4); max-width: var(--measure); }
li { margin-bottom: var(--s2); }
strong { font-weight: 600; }
abbr[title] { text-decoration: underline dotted; cursor: help; }
hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s7) 0; }

.lead { font-size: var(--t-lg); color: var(--ink-soft); max-width: 60ch; }
.small { font-size: var(--t-sm); }
.meta { font-family: var(--face-data); font-size: var(--t-xs); color: var(--ink-faint);
        line-height: var(--lh-data); max-width: 78ch; }
.num, .tabular { font-family: var(--face-data); font-variant-numeric: tabular-nums;
                 font-feature-settings: "tnum" 1; }

/* ---- links ---- */
a { color: var(--dapi); text-decoration: underline; text-underline-offset: 2px;
    text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a:visited { color: var(--dapi); }

/* ---- focus: one visible treatment everywhere, never removed ---- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--dapi);
  outline-offset: 2px;
  border-radius: 1px;
}
.on-field :focus-visible { outline-color: var(--on-field); }

.skip {
  position: absolute; left: var(--s4); top: -3rem; z-index: 10;
  background: var(--paper); color: var(--dapi);
  padding: var(--s2) var(--s4); border: 2px solid var(--dapi);
  font-family: var(--face-data); font-size: var(--t-sm);
}
.skip:focus { top: var(--s2); }

/* ---- motion: no entrance animation anywhere. Two hover transitions, and
       they are the first thing to go under a reduced-motion preference ---- */
@media (prefers-reduced-motion: no-preference) {
  a, .btn, .filter-chip { transition: color 120ms linear, background-color 120ms linear,
                                      border-color 120ms linear; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important; transition-duration: 0.001ms !important;
    scroll-behavior: auto !important; }
}

/* ===========================================================================
   Layout. Asymmetric by default: a reading column with a metadata rail, not a
   centred column. Section spacing is set per content type, not by one rhythm.
   =========================================================================== */
.wrap { max-width: 82rem; margin-inline: auto; padding-inline: var(--s5); }
.wrap-narrow { max-width: 52rem; margin-inline: auto; padding-inline: var(--s5); }

/* reading column + rail. The rail carries sources, versions, cross-links -
   the things a PI checks, kept out of the reading measure. */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: var(--s7); align-items: start; }
.rail { font-family: var(--face-data); font-size: var(--t-xs); line-height: var(--lh-data);
        color: var(--ink-soft); border-top: 2px solid var(--ink); padding-top: var(--s3); }
.rail h2, .rail h3 { font-family: var(--face-data); font-size: var(--t-xs); font-weight: 600;
                     color: var(--ink); margin: var(--s4) 0 var(--s2); }
.rail ul { list-style: none; padding: 0; margin: 0 0 var(--s4); }
.rail li { margin-bottom: var(--s2); }
/* align-self:start keeps the rail from being stretched to the grid row height
   (Firefox then treats it as immovable and content images scroll over it);
   z-index lifts it above content figures in the stacking order. */
.rail-sticky { position: sticky; top: var(--s5); align-self: start; z-index: 5; }

/* section spacing, chosen per type rather than applied uniformly */
.band       { padding-block: var(--s8); }
.band-tight { padding-block: var(--s5); }
.band-open  { padding-block: var(--s9); }
.band-panel { background: var(--panel); border-block: 1px solid var(--rule); }

/* full-bleed data band. Real imagery is the one place the design is loud. */
.bleed { width: 100vw; margin-left: calc(50% - 50vw); background: var(--field); color: var(--on-field); }
.bleed a { color: var(--on-field-link); }

/* ---- masthead: white, Direction B ---- */
.masthead { background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--rule);
            position: sticky; top: 0; z-index: 20; }
.masthead a { color: var(--ink); text-decoration: none; }
.masthead a:hover { color: var(--dapi); }
.masthead-inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s6);
                  padding-block: var(--s3); }
.wordmark { font-weight: 600; font-size: var(--t-sm); letter-spacing: 0.01em; line-height: 1.3; }
.wordmark span { display: block; font-weight: 400; color: var(--ink-faint); font-size: var(--t-xs); }
.nav-primary { margin-left: auto; display: flex; align-items: center; gap: var(--s4); }
.nav-primary ul { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s4);
                  list-style: none; margin: 0; padding: 0; font-size: var(--t-sm); font-weight: 500; }
.nav-primary li { margin: 0; }
.nav-primary a { display: inline-block; padding-block: var(--s2); color: var(--ink-soft);
                 border-bottom: 2px solid transparent; }
.nav-primary a:hover { color: var(--dapi); }
.nav-primary a[aria-current="page"], .nav-primary a.is-section {
  color: var(--ink); border-bottom-color: var(--dapi); }
/* nav call-to-action, last item */
.nav-primary a.nav-cta { background: var(--dapi); color: var(--on-navy); border-radius: var(--r-btn);
  padding: var(--s2) var(--s4); border-bottom: 0; font-weight: 600; }
.nav-primary a.nav-cta:hover { background: #04407f; color: var(--on-navy); }

/* ---- section rail nav (second level) ---- */
.nav-section { border-bottom: 1px solid var(--rule); background: var(--paper); }
.nav-section ul { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); list-style: none;
                  margin: 0; padding-block: var(--s3); font-family: var(--face-data);
                  font-size: var(--t-sm); }
.nav-section li { margin: 0; }
.nav-section a { text-decoration: none; color: var(--ink-soft); padding-block: var(--s1);
                 border-bottom: 2px solid transparent; }
.nav-section a:hover { color: var(--dapi); }
.nav-section a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }

.breadcrumb { font-family: var(--face-data); font-size: var(--t-xs); color: var(--ink-faint);
              padding-block: var(--s3); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: var(--s2); color: var(--rule-strong); }

/* ---- footer: light, two blocks, not four columns of links ---- */
.footer { background: var(--paper); color: var(--ink-soft); margin-top: var(--s9);
          border-top: 1px solid var(--rule); padding-block: var(--s7); font-size: var(--t-sm); }
.footer a { color: var(--dapi); }
.footer-inner { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s7); }
.footer h2 { font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
             color: var(--ink); margin: 0 0 var(--s3); }
.footer address { font-style: normal; max-width: 42ch; }
.footer ul { list-style: none; margin: 0; padding: 0; }

@media (max-width: 60rem) {
  .layout { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .rail-sticky { position: static; }
  .footer-inner { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .nav-primary { margin-left: 0; width: 100%; }
  .band { padding-block: var(--s6); }
  .band-open { padding-block: var(--s7); }
  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
}

/* ---- Logos (review round 2, B1/B2/B3) --------------------------------- */
/* Masthead-inner uses baseline alignment for the text wordmark; the logo needs
   center. Scope the override to when a logo is present. */
.masthead-inner { align-items: center; }
/* A1: the logo is the unit's pride - give it room, keep its 4:1 aspect, and
   never let flex shrink it. */
.wordmark { display: inline-flex; align-items: center; flex: 0 0 auto; margin-right: var(--s4); }
.masthead-logo { display: block; height: 160px; width: auto; max-width: 100%;
  flex: 0 0 auto; padding-block: var(--s1); }
@media (max-width: 40rem){ .masthead-logo { height: 128px; } }

/* Footer institutional marks: full colour on the light footer, divider above. */
.footer-logos { background: var(--paper); border-bottom: 1px solid var(--rule); }
.footer-logos-row { display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: var(--s7); padding-block: var(--s5); }
.footer-logos-row img { height: 38px; width: auto; }

/* About page institutional row: same marks, larger, full colour on white. */
.inst-logos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s6);
  margin: var(--s4) 0; }
.inst-logos img { height: 52px; width: auto; }

/* About dropdown: Team + Accreditations live under About (CSS only, no JS). */
.nav-primary .has-sub { position: relative; }
.nav-primary .subnav { position: absolute; top: 100%; left: 0; min-width: 12rem;
  list-style: none; margin: 0; padding: var(--s2) 0; display: none; flex-direction: column;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-card);
  box-shadow: var(--shadow-card); z-index: 30; }
.nav-primary .has-sub:hover .subnav,
.nav-primary .has-sub:focus-within .subnav,
.nav-primary .has-sub > a:focus ~ .subnav { display: flex; }
.nav-primary .subnav li { width: 100%; }
.nav-primary .subnav a { display: block; width: 100%; padding: var(--s2) var(--s4);
  border-bottom: 0; white-space: nowrap; color: var(--ink-soft); }
.nav-primary .subnav a:hover { color: var(--ink); background: var(--wash, #f2f6fb); }
@media (max-width: 40rem) {
  /* On mobile the nav stacks; show the submenu inline and indented, always open. */
  .nav-primary .subnav { position: static; display: flex; box-shadow: none;
    border: 0; border-radius: 0; padding: 0 0 var(--s2) var(--s4); }
}

/* ===========================================================================
   Components. Every one of these appears on /styleguide/.
   =========================================================================== */

/* ---- buttons: two, and they do not grow a trailing arrow ---- */
.btn, .btn-quiet {
  display: inline-flex; align-items: center; min-height: var(--tap);
  padding: var(--s3) var(--s5); font-family: var(--face-text); font-weight: 600; font-size: var(--t-sm);
  border-radius: var(--r-btn); text-decoration: none; cursor: pointer;
}
.btn { background: var(--dapi); color: var(--paper); border: 1px solid var(--dapi); }
/* a:visited (specificity 0,1,1) otherwise beats .btn's colour and turns the
   primary button text purple-on-blue once /assays/ has been visited (review
   round 2, C3). Pin the link/visited colour so the primary action stays white. */
.btn:link, .btn:visited { color: var(--paper); }
.btn:hover { background: #02407E; border-color: #02407E; color: var(--paper); }
.btn-quiet { background: transparent; color: var(--ink); border: 1px solid var(--rule-strong); }
.btn-quiet:hover { border-color: var(--ink); color: var(--ink); }

/* ---- confidence markers. The whitelist made visible.
       publishable = published | stated | derived. Everything else is withheld. */
.v { font-family: var(--face-data); font-variant-numeric: tabular-nums; }
.v-src { font-size: 0.6875rem; color: var(--ink-faint); margin-left: 0.3em; white-space: nowrap; }
.v[data-confidence="published"] .v-src { color: var(--fitc); }
.v[data-confidence="stated"]    .v-src { color: var(--fitc); }
.v[data-confidence="derived"]   .v-src { color: var(--fitc); }
.v-withheld { color: var(--ink-faint); font-style: italic; font-family: var(--face-text); }
.v-todo { font-family: var(--face-data); font-size: var(--t-xs); color: var(--cy5);
          border-left: 2px solid var(--cy5); padding-left: var(--s2); display: inline-block;
          max-width: 46ch; line-height: var(--lh-data); text-align: left; }

/* ---- callouts: three, distinguished by border colour and nothing else ---- */
.callout { border-left: 3px solid var(--rule-strong); padding: var(--s4) var(--s5);
           background: var(--panel); margin: var(--s5) 0; max-width: var(--measure); }
.callout > :last-child { margin-bottom: 0; }
.callout h3 { font-family: var(--face-data); font-size: var(--t-sm); font-weight: 600;
              margin: 0 0 var(--s2); }
.callout-note   { border-left-color: var(--dapi); }
.callout-caution{ border-left-color: var(--cy3); }
.callout-policy { border-left-color: var(--ink); background: var(--paper);
                  border: 1px solid var(--rule); border-left: 3px solid var(--ink); }

/* ---- badges: sentence case, mono, no tracking-out ---- */
.badge { display: inline-block; font-family: var(--face-data); font-size: var(--t-xs);
         line-height: 1.4; padding: 1px var(--s2); border: 1px solid var(--rule-strong);
         border-radius: var(--r-control); color: var(--ink-soft); background: var(--paper); }
.badge-stub  { border-color: var(--cy5); color: var(--cy5); }
.badge-live  { border-color: var(--fitc); color: var(--fitc); }
.badge-quote { border-color: var(--cy3); color: var(--cy3); }

/* ---- figures. Caption carries platform, field size and scale, per the brief ---- */
figure { margin: 0 0 var(--s5); }
figure img { max-width: 100%; height: auto; }  /* no border, no panel mat - review round 3, A6 */
figure .ph { border: 1px solid var(--rule); }
.bleed figure img, .bleed figure .ph { border: 0; }
figcaption { font-family: var(--face-data); font-size: var(--t-xs); line-height: var(--lh-data);
             color: var(--ink-faint); margin-top: var(--s2); max-width: 78ch; }
figcaption b { color: var(--ink-soft); font-weight: 500; }
.bleed figcaption { color: var(--on-field-soft); }
.bleed figcaption b { color: var(--on-field); }
.figrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--s4); }

/* ---- placeholder image. Labelled, sized to the real intent, never mistaken
       for content. No vendor marketing imagery is used anywhere on this site. */
.ph { display: grid; place-items: center; width: 100%;
      background-image: repeating-linear-gradient(135deg, var(--panel) 0 8px, #E7EBEF 8px 16px);
      color: var(--ink-soft); font-family: var(--face-data); font-size: var(--t-xs);
      text-align: center; padding: var(--s4); }
.ph span { display: block; max-width: 34ch; }
.ph-dark, .bleed .ph { background-color: var(--field); background-image: repeating-linear-gradient(135deg, #0A0A0A 0 8px, #141414 8px 16px);
           color: var(--on-field-soft); border: 0; }

/* ---- forms (contact and quote request; both POST to one Worker endpoint) ---- */
.field { display: block; margin-bottom: var(--s5); max-width: 34rem; }
.field > label { display: block; font-family: var(--face-data); font-size: var(--t-sm);
                 font-weight: 500; margin-bottom: var(--s2); }
.field .hint { display: block; font-family: var(--face-data); font-size: var(--t-xs);
               color: var(--ink-faint); margin-bottom: var(--s2); }
input[type="text"], input[type="email"], select, textarea {
  width: 100%; min-height: var(--tap); padding: var(--s2) var(--s3);
  font-family: var(--face-data); font-size: var(--t-sm); color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule-strong);
  border-radius: var(--r-control);
}
textarea { min-height: 8rem; line-height: var(--lh-data); }
input:hover, select:hover, textarea:hover { border-color: var(--ink-soft); }
.field-error input, .field-error textarea { border-color: var(--cy5); border-width: 2px; }
.error-text { display: block; font-family: var(--face-data); font-size: var(--t-xs);
              color: var(--cy5); margin-top: var(--s2); }
fieldset { border: 1px solid var(--rule); padding: var(--s4) var(--s5); margin: 0 0 var(--s5); }
legend { font-family: var(--face-data); font-size: var(--t-sm); font-weight: 600; padding-inline: var(--s2); }
.check { display: flex; gap: var(--s3); align-items: flex-start; margin-bottom: var(--s3);
         font-size: var(--t-sm); }
.check input { width: 1.1rem; height: 1.1rem; min-height: 0; margin-top: 0.25rem; accent-color: var(--dapi); }

/* ---- estimator step chart. A procedure genuinely is a sequence, so it is
       numbered. Steps mirror the universal cost model in CATALOG_SCHEMA.md ---- */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; max-width: 46rem; }
.steps > li { counter-increment: step; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr);
              gap: var(--s4); padding-block: var(--s4); border-top: 1px solid var(--rule); margin: 0; }
.steps > li::before { content: counter(step, decimal-leading-zero);
  font-family: var(--face-data); font-size: var(--t-sm); font-weight: 600; color: var(--ink-faint); }
/* every child after ::before must sit in column 2; otherwise the paragraph
   falls into the 2.5rem number column and wraps one word per line */
.steps > li > * { grid-column: 2; }
.steps h3 { margin: 0 0 var(--s1); font-size: var(--t-base); font-family: var(--face-text); }
.steps p  { margin: 0; font-size: var(--t-sm); color: var(--ink-soft); max-width: 56ch; }
.steps .num { color: var(--ink); }

/* ---- filter chips (homepage comparison) ---- */
.filters { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s6); align-items: flex-start;
           padding-block: var(--s4); }
.filters fieldset { border: 0; padding: 0; margin: 0; }
.filters legend { padding: 0; font-size: var(--t-xs); color: var(--ink-faint); font-weight: 400;
                  margin-bottom: var(--s2); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.filter-chip { position: relative; display: inline-flex; align-items: center; min-height: 2rem;
               padding: 0 var(--s3); border: 1px solid var(--rule-strong);
               border-radius: var(--r-control); background: var(--paper);
               font-family: var(--face-data); font-size: var(--t-xs); color: var(--ink-soft);
               cursor: pointer; }
.filter-chip input { position: absolute; opacity: 0; width: 100%; height: 100%; left: 0; top: 0;
                     margin: 0; cursor: pointer; }
.filter-chip:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--on-field); }
.filter-chip:has(input:focus-visible) { outline: 3px solid var(--dapi); outline-offset: 2px; }
.filter-status { font-family: var(--face-data); font-size: var(--t-xs); color: var(--ink-soft);
                 padding-block: var(--s2); }

/* ---- stub scaffolding blocks. Visible in audit builds only ---- */
.stub-open { border: 1px solid var(--cy5); border-left-width: 3px; padding: var(--s4) var(--s5);
             margin: var(--s6) 0; max-width: var(--measure); }
.stub-open h2 { font-family: var(--face-data); font-size: var(--t-sm); font-weight: 600;
                margin: 0 0 var(--s3); color: var(--cy5); }
.stub-open ol { margin: 0; padding-left: var(--s5); font-size: var(--t-sm); }
.stub-open .who { font-family: var(--face-data); font-size: var(--t-xs); color: var(--ink-faint); }
.cardlist { list-style: none; padding: 0; margin: 0; max-width: none;
            display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0; }
.cardlist li { margin: 0; border-top: 1px solid var(--rule); padding: var(--s4) var(--s5) var(--s4) 0; }
.cardlist a { text-decoration: none; font-weight: 600; }
.cardlist a:hover { text-decoration: underline; }
.cardlist p { font-size: var(--t-sm); color: var(--ink-soft); margin: var(--s2) 0 0; max-width: 40ch; }

/* ---- Cost estimator (client-side calculator) ------------------------------ */
.tabs { display: flex; gap: var(--s2); border-bottom: 1px solid var(--rule); margin: var(--s5) 0 var(--s4); }
.tab { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent;
  padding: var(--s2) var(--s3); font: inherit; color: var(--ink-soft); cursor: pointer; }
.tab:hover { color: var(--ink); }
.tab.is-active { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }
.tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.estimate-controls { display: grid; grid-template-columns: 2fr 1fr 1.5fr; gap: var(--s4); margin-bottom: var(--s5); }
.estimate-controls label { display: flex; flex-direction: column; gap: var(--s1); font-size: var(--t-sm); color: var(--ink-soft); }
.estimate-controls select, .estimate-controls input,
.ex-row select, .ex-row input {
  font: inherit; padding: var(--s2) var(--s3); border: 1px solid var(--rule);
  border-radius: var(--r-control); background: var(--paper); color: var(--ink); }
.estimate-out { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-control); padding: var(--s4) var(--s5); }
.estimate-total { font-size: var(--t-lg); margin: 0 0 var(--s4); }
.estimate-total strong { font-family: var(--face-data); }
.estimate-note { background: #FFF8E6; border-left: 3px solid #C99700; padding: var(--s2) var(--s3);
  margin: var(--s3) 0; font-size: var(--t-sm); }
.consult { background: var(--panel); border: 1px dashed var(--rule); padding: var(--s3) var(--s4); border-radius: var(--r-control); }

.ex-rows { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s3); }
.ex-row { display: grid; grid-template-columns: 2fr 0.7fr 1.3fr auto; gap: var(--s2); align-items: center; }
.ex-add, .ex-remove { appearance: none; font: inherit; cursor: pointer; border: 1px solid var(--rule);
  background: var(--paper); color: var(--ink); border-radius: var(--r-control); padding: var(--s2) var(--s3); }
.ex-add { margin-bottom: var(--s4); }
.ex-remove { color: var(--ink-soft); }
.ex-add:focus-visible, .ex-remove:focus-visible,
.estimate-controls select:focus-visible, .ex-row select:focus-visible,
.estimate-controls input:focus-visible, .ex-row input:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

@media (max-width: 40rem) {
  .estimate-controls { grid-template-columns: 1fr; }
  .ex-row { grid-template-columns: 1fr 1fr; }
}

/* ---- Guided wizard + pre-filter --------------------------------------- */
.estimate-filters { display: flex; flex-wrap: wrap; gap: var(--s4); margin-bottom: var(--s4);
  padding-bottom: var(--s4); border-bottom: 1px solid var(--rule); }
.estimate-filters .filter, .wiz-cart .filter { display: flex; flex-direction: column; gap: var(--s1);
  font-size: var(--t-sm); color: var(--ink-soft); }
.estimate-filters select, .wiz-cart select { font-size: var(--t-base); padding: var(--s1) var(--s2);
  border: 1px solid var(--rule); border-radius: var(--r-control); background: var(--bg); color: var(--ink); }
.wiz-choices { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s3) 0 var(--s5); }
.wiz-choice { appearance: none; cursor: pointer; text-align: left; font-size: var(--t-base);
  padding: var(--s3) var(--s4); min-width: 12rem; background: var(--panel);
  border: 1px solid var(--rule); border-radius: var(--r-control); color: var(--ink); }
.wiz-choice:hover { border-color: var(--ink); }
.wiz-choice:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.wiz-back { appearance: none; background: none; border: 0; cursor: pointer; color: var(--ink-soft);
  font-size: var(--t-sm); padding: 0; margin-bottom: var(--s3); }
.wiz-back:hover { color: var(--ink); }
.wiz-prep { display: flex; align-items: flex-start; gap: var(--s2); margin: var(--s3) 0;
  font-size: var(--t-sm); color: var(--ink); }
.wiz-add { appearance: none; cursor: pointer; margin-top: var(--s3); font-size: var(--t-base);
  padding: var(--s2) var(--s5); background: var(--dapi); color: var(--paper); font-weight: 600;
  border: 0; border-radius: var(--r-btn); }
.wiz-add:hover { opacity: 0.9; }
.wiz-add:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.wiz-cart { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--rule); }
.wiz-cart .ex-remove { margin-left: var(--s2); }

/* ---- Landing + content components (v1 rework) ------------------------- */
.hero { max-width: var(--measure); }
.hero h1 { font-size: var(--t-4xl); line-height: var(--lh-tight); margin: 0 0 var(--s4); }
.hero .lead { font-size: var(--t-lg); color: var(--ink-soft); }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.btn-secondary { background: transparent; color: var(--ink); border: 1px solid var(--rule-strong); }
.btn-secondary:link, .btn-secondary:visited { color: var(--ink); }
.btn-secondary:hover { border-color: var(--ink); }

.platform-grid { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.platform-chip { display: inline-block; padding: var(--s2) var(--s3); border: 1px solid var(--rule);
  border-radius: var(--r-control); color: var(--ink); background: var(--panel); font-size: var(--t-sm); }
.platform-chip:hover { border-color: var(--ink); }

.distinctions { list-style: none; padding: 0; margin: var(--s3) 0; display: grid; gap: var(--s2); }
.distinctions li { padding-left: var(--s4); position: relative; }
.distinctions li::before { content: "\2014"; position: absolute; left: 0; color: var(--ink-faint); }

.assay-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--s4); margin-top: var(--s5); }
.assay-card { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4);
  border: 1px solid var(--rule); border-radius: var(--r-card); background: var(--paper);
  box-shadow: var(--shadow-card);
  color: var(--ink); text-decoration: none; }
.assay-card, .assay-card h3, .assay-card p, .assay-card-cta { text-decoration: none; }
.assay-card { transition: box-shadow 140ms ease, transform 140ms ease; }
.assay-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: var(--rule); }
.assay-card-thumb { aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-control);
  background: var(--panel); margin: calc(-1 * var(--s4)) calc(-1 * var(--s4)) 0;
  border-bottom: 1px solid var(--rule); }
.assay-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.assay-card-thumb-empty { aspect-ratio: 16 / 10; }
.assay-card h3 { margin: var(--s2) 0 0; font-size: var(--t-lg); }
.assay-card p { margin: 0; color: var(--ink-soft); font-size: var(--t-sm); flex: 1;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.assay-card-cta { color: var(--ink-soft); font-size: var(--t-sm); }

.figure-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--s4); }
.figure-row figure { margin: 0; min-width: 0; }  /* A4: grid item must be allowed to shrink or wide images overflow */
.figure-row img { width: 100%; height: auto; border-radius: var(--r-control); display: block; }
.figure-row figcaption { font-size: var(--t-sm); color: var(--ink-soft); margin-top: var(--s2); }

.contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--s6); align-items: start; }
.contact-form { display: grid; gap: var(--s3); }
.contact-form label { display: grid; gap: var(--s1); font-size: var(--t-sm); color: var(--ink); }
/* Light fields on the white page (review round 2, H4): --field is a real black
   acquisition background - dark-on-dark for a form. Use paper + ink. */
.contact-form input, .contact-form select, .contact-form textarea {
  font: inherit; padding: var(--s2); border: 1px solid var(--rule-strong); border-radius: var(--r-control);
  background: var(--paper); color: var(--ink); width: 100%; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  outline: 3px solid var(--dapi); outline-offset: 1px; border-color: var(--dapi); }
@media (max-width: 40rem) { .contact-grid { grid-template-columns: 1fr; } }

.includes { margin-top: var(--s3); border-top: 1px solid var(--rule); padding-top: var(--s2); }
.includes summary { cursor: pointer; font-size: var(--t-sm); color: var(--ink-soft); }
.includes ul { margin: var(--s2) 0 0; padding-left: var(--s4); font-size: var(--t-sm); color: var(--ink-soft); }
.includes li { margin: 0 0 var(--s1); }

/* Assay page action band (review round 2, G3): replaces the bare "Next" heading
   with a contained row of actions (estimate / consult / vendor). */
.assay-actions { margin-top: var(--s6); border-top: 1px solid var(--rule);
  padding-top: var(--s5); }
.assay-actions-inner { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* Two-column hero (review round 2, C2/C5): text left, a real spatial image
   right to fill what was ~half a blank band. Stacks on narrow screens. */
.hero-layout { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--s7);
  align-items: center; }
.hero-layout .hero { max-width: none; }
.hero-media { margin: 0; }
.hero-media img { width: 100%; height: auto; border-radius: var(--r-control); display: block; }
.hero-media figcaption { font-size: var(--t-sm); color: var(--ink-soft); margin-top: var(--s2); }
.hero-audiences { margin-top: var(--s4); color: var(--ink-soft); }
.hero-audiences strong { color: var(--ink); }
@media (max-width: 60rem) { .hero-layout { grid-template-columns: 1fr; } }

/* Platform groups (review round 2, C4) */
.platform-group { margin-top: var(--s5); }
.platform-group h3 { font-size: var(--t-base); color: var(--ink-soft); margin: 0 0 var(--s2);
  text-transform: uppercase; letter-spacing: 0.04em; }

/* Estimator mode subtitle (F1) + total unit-basis (F2) */
.tab-sub { color: var(--ink-soft); font-size: var(--t-sm); margin: var(--s2) 0 var(--s4); }
.estimate-basis { color: var(--ink-soft); font-weight: 400; font-size: var(--t-sm); }

/* ======================================================================
   Direction B homepage (2026 rebrand)
   ====================================================================== */
.hero-eyebrow { font-size: var(--t-xs); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dapi); margin: 0 0 var(--s3); }
.hero-layout { display: grid; grid-template-columns: 1.02fr .98fr; gap: var(--s7); align-items: center; }
.hero h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); margin-top: 0; }
.hero-media { margin: 0; }
.hero-media img { border-radius: var(--r-card); box-shadow: var(--shadow-lg); background: #000; }
.hero-media figcaption { font-size: var(--t-xs); color: var(--ink-faint); margin-top: var(--s2); line-height: var(--lh-data); }
@media (max-width: 60rem){ .hero-layout { grid-template-columns: 1fr; } }

/* trust bar */
.trust-bar { background: var(--panel); border-block: 1px solid var(--rule); }
.trust-row { display: flex; align-items: center; justify-content: center; gap: var(--s5) var(--s7);
  flex-wrap: wrap; padding-block: var(--s4); }
.trust-label { font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.trust-row img { height: 34px; width: auto; }

/* featured platform tiles */
.featured-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s4);
  margin: var(--s5) 0 var(--s6); }
.feature-card { display: flex; flex-direction: column; background: var(--paper);
  border: 1px solid var(--rule); border-radius: var(--r-card); overflow: hidden;
  box-shadow: var(--shadow-card); text-decoration: none;
  transition: box-shadow 140ms ease, transform 140ms ease; }
.feature-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.feature-card figure { margin: 0; aspect-ratio: 1 / 1; background: var(--navy); overflow: hidden; }
.feature-card figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fc-body { padding: var(--s4); display: flex; flex-direction: column; gap: var(--s1); }
.fc-tag { font-size: var(--t-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--dapi); }
.feature-card h3 { margin: 0; font-size: var(--t-lg); }
.feature-card p { margin: 0; font-size: var(--t-sm); color: var(--ink-soft); }
@media (max-width: 60rem){ .featured-cards { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 34rem){ .featured-cards { grid-template-columns: 1fr; } }

/* also-available names */
.also-available { margin-top: var(--s5); }
.also-label { font-size: var(--t-xs); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0 0 var(--s3); }

/* navy data band - the single dark moment */
.home-databand { background: var(--navy); color: var(--on-navy); margin-block: var(--s8); }
.databand-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s7);
  align-items: center; padding-block: var(--s8); }
.databand-media { margin: 0; border-radius: var(--r-card); overflow: hidden;
  border: 1px solid rgba(255,255,255,.12); background: #000; }
.databand-media img { width: 100%; display: block; }
.databand-text h2 { color: var(--on-navy); margin-top: 0; }
.databand-sub { color: var(--on-navy-soft); margin-bottom: var(--s5); }
.databand-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s4); margin: 0; }
.databand-stats div { margin: 0; }
.databand-stats dt { font-family: var(--face-disp); font-size: 2.4rem; font-weight: 700;
  color: var(--accent-cyan); letter-spacing: -.02em; line-height: 1; }
.databand-stats dd { margin: var(--s1) 0 0; font-size: var(--t-sm); color: var(--on-navy-soft); }
@media (max-width: 60rem){ .databand-inner { grid-template-columns: 1fr; } }

/* certifications */
.cert-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: var(--s4); margin: var(--s5) 0; }
.cert-card { padding: var(--s4); background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.cert-card b { display: block; font-family: var(--face-disp); font-size: var(--t-base); margin-bottom: var(--s2); }
.cert-card p { margin: 0; font-size: var(--t-sm); color: var(--ink-soft); }
@media (max-width: 60rem){ .cert-cards { grid-template-columns: repeat(2,1fr); } }

/* ---- Team members (photo + bio), review round 3 ---------------------- */
.team-member { display: flex; gap: var(--s5); align-items: flex-start;
  margin: var(--s6) 0; padding-bottom: var(--s6); border-bottom: 1px solid var(--rule); }
.team-member:last-child { border-bottom: 0; }
.team-photo { flex: 0 0 auto; width: 160px; height: 200px; object-fit: cover;
  border-radius: var(--r-card); box-shadow: var(--shadow-card); background: var(--panel); }
.team-body { flex: 1 1 auto; min-width: 0; }
.team-body h3 { margin: 0 0 var(--s3); }
.team-role { font-size: var(--t-xs); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dapi); margin: 0 0 var(--s1); }
@media (max-width: 40rem){
  .team-member { flex-direction: column; gap: var(--s3); }
  .team-photo { width: 150px; height: 188px; }
}

/* ---- content-page figures + team hero (review round 3) --------------- */
.team-hero { margin: 0 0 var(--s5); }
.team-hero img { width: 100%; border-radius: var(--r-card); box-shadow: var(--shadow-card); display: block; }
.content-figure { margin: var(--s5) 0; }
.content-figure img { width: 100%; border-radius: var(--r-card); box-shadow: var(--shadow-card); display: block; }
.content-figure figcaption { font-size: var(--t-xs); color: var(--ink-faint); margin-top: var(--s2); }

/* ---- Promotions collage (home Newsflash slot, review round 3, E) ------ */
.promo-band { padding-block: var(--s8); }
.promo-band .databand-sub { margin: 0 0 var(--s5); letter-spacing: .1em;
  text-transform: uppercase; font-size: var(--t-xs); font-weight: 600; }
.promo-collage { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s5); }
.promo-card { display: flex; flex-direction: column; overflow: hidden; text-decoration: none;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-card); transition: transform 140ms ease, border-color 140ms ease; }
.promo-card figure { margin: 0; aspect-ratio: 16 / 10; background: #000; overflow: hidden; }
.promo-card figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.promo-card .promo-body { padding: var(--s4); }
.promo-card h3 { color: var(--on-navy); margin: 0 0 var(--s2); font-size: 1.05rem; line-height: 1.25; }
.promo-card p { color: var(--on-navy-soft); font-size: var(--t-sm); margin: 0; }
.promo-card:hover { transform: translateY(-3px); border-color: var(--accent-cyan); }

/* Contact-form honeypot: off-screen so users never see it; bots auto-fill it. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Contact-form submit status (D6). */
.form-status { margin: var(--s3) 0 0; font-size: var(--t-sm); min-height: 1.2em; }
.form-status.is-pending { color: var(--ink-soft); }
.form-status.is-ok { color: var(--accent-deep, #0a7d55); font-weight: 600; }
.form-status.is-error { color: #b4232a; font-weight: 600; }

/* Contact form: multi-select service interest (matches the original site). */
.contact-form fieldset.service-choices { border: 1px solid var(--rule); border-radius: var(--r-control);
  padding: var(--s3) var(--s4); margin: 0; }
.service-choices legend { font-size: var(--t-sm); font-weight: 600; padding: 0 var(--s2); color: var(--ink); }
.service-choices label { display: flex; align-items: flex-start; gap: var(--s2); font-weight: 400;
  margin: var(--s1) 0; cursor: pointer; font-size: var(--t-sm); }
.service-choices input[type="checkbox"] { width: auto; min-width: 0; margin: 0; flex: 0 0 auto;
  block-size: 1em; inline-size: 1em; }

/* ===========================================================================
   Tables. The most important objects on the site, so they are designed here
   rather than defaulted: mono figures, tabular alignment, horizontal rules
   only, a sticky header and a sticky first column on the wide comparison.
   =========================================================================== */
.table-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.table-scroll:focus-visible { outline: 3px solid var(--dapi); outline-offset: 2px; }

table.spec { border-collapse: separate; border-spacing: 0; width: 100%;
             font-family: var(--face-data); font-size: var(--t-xs); line-height: var(--lh-data); }
table.spec caption { text-align: left; font-family: var(--face-data); font-size: var(--t-xs);
                     color: var(--ink-faint); padding-bottom: var(--s3); }
table.spec th, table.spec td { padding: var(--s2) var(--s4) var(--s2) 0;
                               border-bottom: 1px solid var(--rule); vertical-align: top;
                               text-align: left; }
table.spec thead th { font-weight: 600; color: var(--ink); background: var(--paper);
                      border-bottom: 2px solid var(--ink); position: sticky; top: 0; z-index: 2;
                      white-space: nowrap; }
table.spec tbody th { font-weight: 500; }
table.spec td.n, table.spec th.n { text-align: right; font-variant-numeric: tabular-nums;
                                   padding-right: var(--s5); }
table.spec tbody tr:hover td, table.spec tbody tr:hover th { background: var(--panel); }
table.spec tbody tr:last-child td, table.spec tbody tr:last-child th { border-bottom: 0; }

/* a field/value sheet is two columns, not a wide table: cap it so the value
   column does not sit against 800 px of empty paper */
table.spec.sheet { max-width: 58rem; }
table.spec.sheet .field-col { min-width: 18rem; }

/* row groups instead of zebra striping */
table.spec tbody.group th[scope="rowgroup"] { font-family: var(--face-text);
  font-size: var(--t-sm); font-weight: 600; padding-top: var(--s5); border-bottom: 1px solid var(--ink); }

/* the comparison: first column pinned so a platform name never scrolls away */
table.compare tbody th, table.compare thead th:first-child {
  position: sticky; left: 0; background: var(--paper); z-index: 1;
  border-right: 1px solid var(--rule); padding-right: var(--s4); min-width: 11rem; }
table.compare thead th:first-child { z-index: 3; }
table.compare tbody tr:hover th { background: var(--panel); }
table.compare tr[hidden] { display: none; }
table.compare tr.unknown-fit th::after {
  content: " unknown"; color: var(--cy5); font-size: 0.6875rem; }
table.compare a { text-decoration: none; }
table.compare a:hover { text-decoration: underline; }

/* a table of prose, not of numbers: text face, wider measure */
table.prose { border-collapse: collapse; width: 100%; font-size: var(--t-sm); }
table.prose th, table.prose td { text-align: left; vertical-align: top; padding: var(--s3) var(--s5) var(--s3) 0;
                                 border-bottom: 1px solid var(--rule); }
table.prose thead th { border-bottom: 2px solid var(--ink); font-family: var(--face-data);
                       font-size: var(--t-xs); }
table.prose td:first-child, table.prose th:first-child { padding-left: 0; }

@media (max-width: 40rem) {
  table.compare tbody th, table.compare thead th:first-child { min-width: 8.5rem; }
  table.spec th, table.spec td { padding-right: var(--s3); }
  /* a field/value sheet stacks rather than scrolls: the field column alone is
     wider than a phone, so side-scrolling it hides every value */
  table.spec.sheet thead { position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  table.spec.sheet tbody th[scope="row"], table.spec.sheet tbody td { display: block;
    width: auto; }
  table.spec.sheet tbody th[scope="row"] { border-bottom: 0; padding-bottom: 0;
    color: var(--ink-faint); }
  table.spec.sheet tbody td { padding-top: var(--s1); }
  table.spec.sheet tbody th[scope="rowgroup"] { display: block; }
}