/* iair.vc: shared styles for the placeholder, 404 and stats pages. Light only.
   Design source: design-options/option-b2-acronym.html ("Instrument, Strapline", acronym version).
   The home page section below is that mockup's CSS unchanged; production additions follow it. */

/* IBM Plex Sans and Mono (SIL Open Font License), self-hosted: no third-party requests. */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/ibm-plex-sans-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/fonts/ibm-plex-sans-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/fonts/ibm-plex-sans-latin-ext-600-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Mono only sets labels, indices and the footer: Latin is enough. */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==================== Home page (from the mockup) ==================== */

:root {
  --bg: #F2EFE9;          /* warm white */
  --field: #FAF8F4;       /* input well */
  --ink: #1E2124;         /* graphite, 14.1:1 on bg */
  --ink-2: #565A5F;       /* muted graphite, 6.0:1 on bg */
  --ink-3: #7C8085;       /* control border, 3.5:1 on bg */
  --rule: #D3CDC3;        /* hairlines (decorative) */
  --signal: #FFC20E;      /* safety yellow: fills and marks only, never text */
  --signal-hover: #F2B600;

  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --gx: max(clamp(20px, 3.4vw, 56px), calc((100vw - 1344px) / 2)); /* side gutter; the grid stops growing past 1440 */
  --pl: max(var(--gx), env(safe-area-inset-left, 0px));  /* gutters clear the notch in landscape */
  --pr: max(var(--gx), env(safe-area-inset-right, 0px));
  --cell: clamp(16px, 1.7vw, 28px);           /* inner cell padding */
  --bar: clamp(52px, 7.6vh, 68px);            /* top bar height */
  --sub: clamp(1rem, 1.32vw, 1.1875rem);      /* subheadline size */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
::selection { background: var(--signal); color: var(--ink); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}
.nw { white-space: nowrap; }

/* Mono label: status, indices */
.label {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.06em;
  word-spacing: -0.2em;    /* a mono space is already a full cell; keep word gaps from reading as double */
  text-transform: uppercase;
  color: var(--ink-2);
}

/* The page is one 4-column instrument grid: header, hero, focus row and footer share it. */
.grid4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-left: var(--pl);
  padding-right: var(--pr);
}

/* ---------- Top bar ---------- */
header {
  flex: none;
  height: var(--bar);
  border-bottom: 1px solid var(--rule);
}
.wordmark {
  grid-column: 1 / 4;
  align-self: center;
  margin: 0;
  font-size: 24px;
  line-height: 1;
  white-space: nowrap;
}
.wordmark b { font-weight: 600; letter-spacing: -0.02em; }
.wordmark span { font-weight: 400; letter-spacing: -0.005em; color: var(--ink-2); }

.status {
  grid-column: 4;
  margin: 0;
  padding-left: var(--cell);
  border-left: 1px solid var(--rule);
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.status::before {
  content: "";
  flex: none;
  width: 8px; height: 8px;
  background: var(--signal);
  box-shadow: 0 0 0 1px var(--ink);
  animation: pulse 3.2s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { background: var(--signal); } 50% { background: var(--bg); } }

/* ---------- Hero ---------- */
main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
.hero {
  flex: 1 0 auto;
  padding-top: clamp(28px, 7vh, 88px);
  padding-bottom: clamp(28px, 7vh, 88px);
  align-content: center;
  /* Headline size. Two lines, broken after the colon; the longer line is ~17.2em wide.
     Scaled for presence on a one-message page: ~63px at 1440 and ~56px at 1280, so the headline
     runs about a quarter of a column past the column-4 rule and ends well left of the button's
     right edge. The 8.4vh term keeps short screens on one page. */
  --h1: clamp(2.25rem, min(4.4vw, 8.4vh), 3.95rem);
}
/* Strapline: a second heading level in the headline's own face and ink, read before the h1.
   Locked to the headline at 7/16, so the pair keeps one clear step at every size: the headline
   is always ~2.3x the strapline, which makes them a pair rather than two competing headlines.
   The line is ~22.1em wide, so at 1440 and 1280 it spans columns 1-2 and ends short of the
   column-3 rule, where the form starts.
   Its 0.5em gap sits between the headline's own line gap and the headline-to-subheadline gap
   (23 / 35 / 60px baseline-to-cap at 1440), so strapline and headline read as one group.
   Optical: the lowercase i's side bearing (~0.036em, ~1px at 1440) already puts its ink on the
   same edge as the headline's W and the subheadline's i, so no shift is needed. */
.eyebrow {
  grid-column: 1 / -1;
  margin: 0 0 0.5em;
  font-weight: 500;
  font-size: max(1.125rem, calc(var(--h1) * 0.4375));
  line-height: 1.3;
  letter-spacing: -0.008em;
  color: var(--ink-2);
  text-wrap: balance;
}
/* Acronym key: the letters that form the name (i, AI, R, and "iAIR" in the brackets) in full ink
   at 600; the rest of the line in muted graphite at 500, echoing the wordmark ("iAIR" strong,
   ".vc" quieter). Screen readers get the plain sentence from the visually hidden copy, because
   some split words at inline-element boundaries ("i" / "ndustrial"). */
.eyebrow b {
  font-weight: 600;
  color: var(--ink);
}
h1 {
  grid-column: 1 / -1;
  /* No optical shift: the W's own side bearing (0.02em) puts its ink ~1px inside the grid line,
     the same inset as the strapline and the subheadline. */
  margin: 0 0 clamp(24px, 4.6vh, 48px);
  font-weight: 500;
  font-size: var(--h1);
  line-height: 1.06;
  letter-spacing: -0.022em;
}
h1 .line { display: block; }

.sub {
  grid-column: 1 / 3;
  margin: 0;
  padding-right: var(--cell);
  max-width: 34em;
  font-size: var(--sub);
  line-height: 1.55;
  text-wrap: pretty;
}

.signup {
  grid-column: 3 / 5;
  align-self: start;
  /* optical: input top edge sits on the cap height of the subheadline's first line */
  margin-top: calc(var(--sub) * 0.44);
  padding-left: var(--cell);
  /* field row + message slot: the block keeps one height in every state, so the hero never re-centres */
  min-height: calc(48px + 10px + 14px * 1.4);
}
/* The input fills column 3; the button starts exactly on the column-4 rule and hangs into it. */
.field-row {
  display: grid;
  grid-template-columns: calc(50% - var(--cell) / 2) auto;
  justify-content: start;
}
/* (password: the stats page's key field shares the look) */
input[type="email"], input[type="password"] {
  width: 100%;
  min-width: 0;
  height: 48px;
  margin: 0;
  padding: 0 14px;
  font: 400 16px/1 var(--sans);
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--ink-3);
  border-right: 0;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
input[type="email"]::placeholder { color: #666A6F; opacity: 1; }
input[type="email"][aria-invalid="true"], input[type="password"][aria-invalid="true"] {
  border-color: var(--ink);
  box-shadow: inset 4px 0 0 var(--signal);
  padding-left: 16px;
}
button {
  flex: none;
  height: 48px;
  min-width: 44px;
  margin: 0;
  padding: 0 22px;
  font: 500 16px/1 var(--sans);
  letter-spacing: 0.005em;
  color: var(--ink);
  background: var(--signal);
  border: 1px solid var(--ink);
  border-radius: 0;
  cursor: pointer;
}
button:hover { background: var(--signal-hover); }
/* Focus rings sit inside the joined field so they never collide with the neighbour. */
input:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
button:focus-visible { outline: 2px solid var(--ink); outline-offset: -5px; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* One message slot under the field: the error takes the note's place instead of adding a line. */
.msg { display: grid; margin-top: 10px; }
.msg > p { grid-area: 1 / 1; }
.error:not([hidden]) + .note { visibility: hidden; }

.error {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 14px;
  line-height: 1.4;
}
.error::before {
  content: "";
  flex: none;
  width: 8px; height: 8px;
  background: var(--signal);
  box-shadow: 0 0 0 1px var(--ink);
}
.error[hidden] { display: none; }

.done {
  margin: 0;
  width: fit-content;
  min-width: calc(50% - var(--cell) / 2); /* the confirmation plate fills column 3, where the field was */
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: 0 22px 0 18px;
  font-size: 17px;
  font-weight: 500;
  border: 1px solid var(--ink);
  box-shadow: inset 4px 0 0 var(--signal);
}
.done[hidden] { display: none; }
.done:focus { outline: none; }

.note {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-2);
}

/* ---------- Focus areas ---------- */
.focus {
  flex: none;
  margin: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}
.focus li {
  padding: clamp(14px, 2.6vh, 26px) var(--cell) clamp(16px, 3vh, 30px);
  border-left: 1px solid var(--rule);
}
.focus li:first-child { padding-left: 0; border-left: 0; }
.focus .idx { display: block; margin-bottom: clamp(8px, 1.4vh, 14px); }
.focus h2 {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.focus p {
  margin: 0;
  max-width: 18.5em;  /* every cell sets as two balanced lines, like datasheet entries */
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-2);
  text-wrap: balance;
}

/* ---------- Footer: a title block continuing the focus-row rules ---------- */
footer {
  flex: none;
  min-height: 52px;
  border-top: 1px solid var(--rule);
  font-size: 14px;
  color: var(--ink-2);
}
footer p { margin: 0; }
.tagline { grid-column: 1 / 3; align-self: center; padding: 10px var(--cell) 10px 0; }
.contact, .legal { display: flex; align-items: center; padding-left: var(--cell); border-left: 1px solid var(--rule); }
.contact { grid-column: 3; }
.legal { grid-column: 4; font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; }
footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  margin: 0 -10px;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--ink-3);
}
footer a:hover { text-decoration-color: var(--ink); }
footer a:focus-visible { outline-offset: -9px; } /* ring hugs the text; the 44px target stays */

/* ---------- Short screens ---------- */
@media (max-height: 760px) and (min-width: 721px) {
  .focus h2 { font-size: 16px; }
  footer { min-height: 48px; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1000px) and (min-width: 721px) {
  .sub { grid-column: 1 / -1; padding-right: 0; }
  .hero { --h1: clamp(2.25rem, min(5vw, 10vh), 3.125rem); } /* both lines full width; short landscape phones get a smaller headline */
  .signup { grid-column: 1 / -1; padding-left: 0; margin-top: 28px; max-width: 32rem; }
  .field-row { grid-template-columns: minmax(0, 1fr) auto; }
  .done { width: auto; min-width: 0; }
  .focus { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .focus li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .focus li:nth-child(n + 3) { border-top: 1px solid var(--rule); }
  /* The rule between the two rows runs full-bleed like every other horizontal rule; text axes stay put. */
  .focus li:nth-child(3) { margin-left: calc(-1 * var(--pl)); padding-left: var(--pl); }
  .focus li:nth-child(4) { margin-right: calc(-1 * var(--pr)); padding-right: calc(var(--pr) + var(--cell)); }
}

/* ---------- Phone ---------- */
@media (max-width: 720px) {
  :root { --bar: 56px; }
  header.grid4 { display: flex; align-items: center; justify-content: space-between; }
  .wordmark { font-size: 21px; }
  .status { padding-left: 0; border-left: 0; gap: 8px; }
  .label { font-size: 11px; }

  .hero {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    padding-top: 32px;
    padding-bottom: 40px;
  }
  /* 19px at 390: two balanced lines, "industrial AI & Robotics / venture capital (iAIR.vc)".
     The 14px margin makes the strapline-to-headline step ~26px baseline to cap, over twice the
     ~11.5px inside each block, so the two lines and the four read as two blocks, not one of six. */
  .eyebrow { font-size: clamp(1.125rem, 4.9vw, 1.3125rem); margin-bottom: 14px; }
  h1 {
    /* The colon break holds; each half then balances onto two lines:
       "Where intelligence / meets operations:" and "the systems that / sense, reason and act." */
    font-size: clamp(1.75rem, 8.2vw, 2.5rem);
    line-height: 1.06;
    margin-bottom: 18px;
    text-wrap: balance;
  }
  .sub { grid-column: 1; padding-right: 0; }
  .signup { grid-column: 1; padding-left: 0; margin-top: 24px; max-width: none; }
  .field-row { grid-template-columns: minmax(0, 1fr) auto; }
  .done { width: auto; min-width: 0; }
  button { padding: 0 18px; }

  .focus { grid-template-columns: minmax(0, 1fr); }
  .focus li {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    padding: 16px 0;
    border-left: 0;
    border-top: 1px solid var(--rule);
  }
  .focus li:first-child { border-top: 0; }
  .focus .idx { grid-row: 1 / 3; margin: 3px 0 0; }
  .focus p { max-width: 26em; }

  footer.grid4 {
    grid-template-columns: minmax(0, 1fr) auto;
    padding-top: 14px;
    padding-bottom: 8px;
  }
  .tagline { grid-column: 1 / -1; padding: 0 0 2px; }
  .contact, .legal { border-left: 0; }
  .contact { grid-column: 1; padding-left: 0; }
  .legal { grid-column: 2; padding-left: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .status::before { animation: none; }
}

/* ==================== Production additions ==================== */

/* Honeypot: off-screen for people, still there for naive bots (not [hidden], which bots skip). */
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* While sending: the label stays; the button holds its pressed (hover) shade, so a tap visibly registers
   on touch screens, which have no progress cursor. */
button:disabled { cursor: progress; }
#signup[aria-busy="true"] button, #signup[aria-busy="true"] button:hover { background: var(--signal-hover); }

/* Without JavaScript the form can't send, so the quiet email line takes its place. */
.noscript {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-2);
}
.noscript a, .back a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--ink-3);
}
.noscript a:hover, .back a:hover { text-decoration-color: var(--ink); }
@media (scripting: none) {
  #signup { display: none; }
}

/* ---------- 404 ---------- */
.back {
  grid-column: 1 / -1;
  margin: 16px 0 0;
  font-size: var(--sub);
  font-weight: 500;
}
.back a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Stats page (private, noindex): same grid, rules and type; yellow only for small markers ---------- */
.stats-page .status::before { animation: none; }

.stats-head {
  flex: none;
  padding-top: clamp(28px, 6vh, 64px);
  padding-bottom: clamp(20px, 3.4vh, 32px);
  align-items: end;
}
.stats-head h1 {
  grid-column: 1 / 3;
  margin: 0;
  font-size: clamp(2rem, 3vw, 2.75rem);
  line-height: 1.1;
}
.report-meta {
  grid-column: 3 / 5;
  margin: 0;
  padding-left: var(--cell);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 16px;
}
.report-meta[hidden] { display: none; }
.report-meta .label { margin: 0; }
.report-actions { margin: 0 -10px 0 0; display: flex; }
.link-button {
  height: 44px;
  min-width: 0;
  padding: 0 10px;
  font: 400 12px/1 var(--mono);
  letter-spacing: 0.02em;
  color: var(--ink);
  background: none;
  border: 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--ink-3);
}
.link-button:hover, .link-button:disabled:hover { background: none; text-decoration-color: var(--ink); }
.link-button:focus-visible { outline-offset: -9px; }
.link-button:disabled { color: var(--ink-2); }

.unlock { flex: none; padding-bottom: clamp(28px, 6vh, 64px); }
.unlock[hidden] { display: none; }
.unlock > * { grid-column: 1 / 3; }
.unlock label { display: block; margin: 0 0 8px; font-size: 14px; color: var(--ink-2); }
.unlock .field-row { grid-template-columns: minmax(0, 1fr) auto; max-width: 30rem; }
.unlock .error { margin-top: 10px; }
.unlock button {
  color: var(--bg);
  background: var(--ink);
  border-color: var(--ink);
}
.unlock button:hover, .unlock button:disabled:hover { background: #34383C; }
.unlock button:focus-visible { outline-color: var(--bg); }
.report-error { grid-column: 1 / -1; margin-top: 12px; }
.report-error[hidden] { display: none; }

.report { flex: 1 0 auto; display: flex; flex-direction: column; }
.report[hidden] { display: none; }
.report:focus { outline: none; }

/* Tiles: one ruled strip, like the home page's focus row. */
.tiles {
  flex: none;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  padding-left: var(--pl);
  padding-right: var(--pr);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.tile {
  padding: clamp(14px, 2.6vh, 26px) var(--cell) clamp(16px, 3vh, 30px);
  border-left: 1px solid var(--rule);
}
.tile:first-child { padding-left: 0; border-left: 0; }
.tile dt { margin: 0 0 clamp(8px, 1.4vh, 14px); }
.tile dd { margin: 0; }
.tile-value {
  font-size: clamp(2rem, 2.6vw, 2.5rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.tile .tile-note { margin-top: 6px; font-size: 13px; line-height: 1.4; color: var(--ink-2); }

.tables {
  flex: none;
  padding-top: clamp(28px, 5vh, 48px);
  padding-bottom: clamp(28px, 5vh, 48px);
  row-gap: 40px;
}
.tables section { grid-column: span 2; min-width: 0; }
.tables section:first-child { padding-right: var(--cell); }
.tables section + section { padding-left: var(--cell); border-left: 1px solid var(--rule); }
.tables h2 {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.tables .meta { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.table-wrap { margin-top: 12px; overflow-x: auto; }
.stats-page table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.stats-page th, .stats-page td {
  padding: 9px 16px 9px 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  white-space: nowrap;
}
.stats-page thead th {
  padding-top: 0;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  word-spacing: -0.2em;
  text-transform: uppercase;
  color: var(--ink-2);
  border-bottom-color: var(--ink-3);
}
.stats-page tbody th { font-weight: 500; }
.stats-page .num { text-align: right; padding-right: 0; padding-left: 16px; }
.stats-page td.empty { color: var(--ink-2); text-align: left; }

.stats-notes {
  flex: 1 0 auto;
  align-content: start;
  padding-top: 20px;
  padding-bottom: 32px;
  border-top: 1px solid var(--rule);
}
.stats-notes p { grid-column: 1 / 4; margin: 0 0 6px; max-width: 62em; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.stats-page code { font-family: var(--mono); font-size: 13px; color: var(--ink); }
.stats-page .noscript { grid-column: 1 / 3; padding-bottom: 48px; }

@media (max-width: 1000px) {
  .stats-head h1, .report-meta { grid-column: 1 / -1; }
  .report-meta { padding-left: 0; margin-top: 8px; }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tile:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
  .tile:nth-child(n + 4) { border-top: 1px solid var(--rule); }
  .tables section { grid-column: 1 / -1; }
  .tables section:first-child, .tables section + section { padding: 0; border-left: 0; }
  .stats-notes p { grid-column: 1 / -1; }
}
@media (max-width: 1000px) and (min-width: 721px) {
  /* As on the home page, the rule between the two rows runs full-bleed. */
  .tile:nth-child(4) { margin-left: calc(-1 * var(--pl)); padding-left: var(--pl); }
  .tile:nth-child(6) { margin-right: calc(-1 * var(--pr)); padding-right: calc(var(--pr) + var(--cell)); }
}
@media (max-width: 720px) {
  .stats-head { grid-template-columns: minmax(0, 1fr); }
  .unlock { grid-template-columns: minmax(0, 1fr); }
  .unlock > * { grid-column: 1; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile:nth-child(n) { padding-left: var(--cell); border-left: 1px solid var(--rule); }
  .tile:nth-child(2n + 1) { padding-left: 0; border-left: 0; }
  .tile:nth-child(n + 3) { border-top: 1px solid var(--rule); }
  .tile dt { min-height: 2.9em; } /* labels may wrap to two lines; the numbers stay level across a row */
  .tile-value { font-size: 1.75rem; }
  .tables, .stats-notes { grid-template-columns: minmax(0, 1fr); }
  .tables section, .stats-notes p { grid-column: 1; }
}