/* SmartCrew web fonts → src/styles/fonts.css. The files live in public/fonts/ (served at /fonts/).
   Both families are SIL Open Font License 1.1 with no Reserved Font Name; the licences ship next to
   the files: public/fonts/OFL-SpecialGothic.txt, public/fonts/OFL-FinlandicaText.txt.

   SmartCrew Display = Special Gothic v1.011 (Alistair McCready), variable: wdth 75–110, wght 400–700
   SmartCrew Text    = Finlandica Text v3.103 (Helsinki Type Studio), variable: wght 400–700,
                       with its ten digits from Special Gothic at wdth 104 (Finlandica's zero is as
                       wide and round as its capital O, so "5–100" read "5–1OO" and "$7,500" "$7,5OO").
   Rebuilt from the upstream TTFs by type/ship/tools/build_fonts.py (subset + axis limits; U+202F and
   U+2009, which Intl date/time formatting emits, are mapped to the space glyphs).

   Coverage: Basic Latin, Latin-1 (accents for names), dashes, quotes, bullet, ellipsis, ← ↑ → ↓ ↔,
   minus, ≈ ≠ ≤ ≥, €, ™. NOT in either font: ✓ (U+2713) and ⚑ (U+2691): draw them as inline SVG.
   src is plain format("woff2"): a tech(variations) hint makes older iOS WebKit drop the whole rule. */

/* ── Display: Special Gothic ─────────────────────────────────────────────────────────── */
@font-face {
  font-family: "SmartCrew Display";
  src: url(/fonts/special-gothic-var.latin.woff2) format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 110%; /* without this range the condensed times silently render at 100% */
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2009, U+2013-2014,
    U+2018-201A, U+201C-201E, U+2022, U+2026, U+202F, U+2030, U+2032-2033, U+2039-203A, U+2044, U+20AC,
    U+2122, U+2190-2195, U+2212, U+2248, U+2260, U+2264-2265, U+25CF;
}

/* ── Text: Finlandica Text ───────────────────────────────────────────────────────────── */
@font-face {
  font-family: "SmartCrew Text";
  src: url(/fonts/finlandica-text-var.latin.woff2) format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2009, U+2013-2014,
    U+2018-201A, U+201C-201E, U+2022, U+2026, U+202F, U+2030, U+2032-2033, U+2039-203A, U+2044, U+20AC,
    U+2122, U+2190-2195, U+2212, U+2248, U+2260, U+2264-2265, U+25CF;
}

/* …and its figures, from Special Gothic. Declared AFTER the face above (the last declared face
   wins for the digits) and with EXACTLY the same weight/style/stretch descriptors: if they
   differ, Chrome drops the Finlandica face and sets the words in a fallback font. */
@font-face {
  font-family: "SmartCrew Text";
  src: url(/fonts/special-gothic-figures-w104.woff2) format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0030-0039;
}

/* ── Metric-matched fallbacks (no layout jump when the fonts swap in) ───────────────────
   Measured in Chromium on the page's own copy: width ratio → size-adjust; the fonts' ascent and
   descent (Special Gothic 1005/295, Finlandica Text 950/250 per 1000) divided by it.
   Display is matched at the headline setting (wdth 96, wght 700); Arial for iOS/macOS/Windows,
   Roboto for Android (a missing local() font is skipped, so each stack falls through). */
@font-face {
  font-family: "SmartCrew Display Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Arimo Bold");
  font-weight: 400 700;
  size-adjust: 90.25%;
  ascent-override: 111.36%;
  descent-override: 32.69%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "SmartCrew Display Fallback R";
  src: local("Roboto Bold"), local("Roboto-Bold");
  font-weight: 400 700;
  size-adjust: 95.96%;
  ascent-override: 104.73%;
  descent-override: 30.74%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "SmartCrew Text Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"), local("Arimo");
  font-weight: 400 549;
  size-adjust: 105.45%;
  ascent-override: 90.09%;
  descent-override: 23.71%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "SmartCrew Text Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Arimo Bold");
  font-weight: 550 700;
  size-adjust: 103.41%;
  ascent-override: 91.87%;
  descent-override: 24.18%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "SmartCrew Text Fallback R";
  src: local("Roboto"), local("Roboto-Regular");
  font-weight: 400 549;
  size-adjust: 106.18%;
  ascent-override: 89.47%;
  descent-override: 23.54%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "SmartCrew Text Fallback R";
  src: local("Roboto Bold"), local("Roboto-Bold");
  font-weight: 550 700;
  size-adjust: 109.95%;
  ascent-override: 86.4%;
  descent-override: 22.74%;
  line-gap-override: 0%;
}

/* Design tokens for the product page, popup and /book. Andrew's palette (warm off-white ground,
   near-black ink, orange as a signal), made cinematic. Orange is never body text on light
   grounds (contrast 2.5:1); use --sc-orange-ink for orange words on light. */

:root {
  /* ground and ink */
  --ground: #fbf8f4;
  --ground-2: #f4eee7;
  --paper: #ffffff;
  --night: #14110e;
  --night-2: #1d1a16;
  --ink: #17130f;
  --ink-2: #4a4038;
  --ink-3: #74665a;
  --line: #e8dfd5;
  --line-night: #2e2822;

  /* signal */
  --orange: #ff7a01;
  --orange-2: #ffa94a;
  --orange-ink: #b84f00;
  --green: #1f9d55;
  --red: #e5484d;

  /* time of day (the One Day scene tints between these) */
  --dawn: #eef1f3;
  --day: #fbf8f4;
  --dusk: #f6e7d4;
  --evening: #1d1a16;

  /* type: see the type block at the end of this file */

  /* shape and depth */
  --r-sm: 0.625rem;
  --r-md: 0.875rem;
  --r-lg: 1.375rem;
  --shadow-1: 0 1px 0.125rem rgb(23 19 15 / 6%), 0 0.5rem 1.5rem rgb(23 19 15 / 6%);
  --shadow-2: 0 1.875rem 5rem rgb(23 19 15 / 18%);

  /* Andrew's bevelled dark button: retired as the page's primary (that is the orange <Cta>);
     still the dark surface of /book's add-to-calendar button and the popup's selected size chip */
  --btn-dark: #1d1a16;
  --btn-dark-border: #3b332b;
  --btn-dark-bevel: inset 0 -0.25rem 0.25rem #0f0d0b, inset 0 0.25rem 0.25rem #3b332b;

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* layout */
  --header-h: 4rem;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --max: 82rem;
}

@media (max-width: 760px) {
  :root {
    --header-h: 3.5rem;
  }
}

/* Page size. Every length in the CSS is rem (px-rem.postcss.ts), so this is the one dial: on a desktop
   the page shows at 90%, the size Andrew picked by zooming out (Oct 23). Phones and touch tablets stay
   at 100%. Widths in media queries still follow the real window. */
@media (min-width: 1024px) and (hover: hover) {
  html {
    font-size: 90%;
  }
}

/* ── Extensions for the One Day page (added by the lead; names above are unchanged) ── */
:root {
  /* ink on dark grounds */
  --ink-night: #f4eee7;
  --ink-night-2: #b9ab9c;
  --ink-night-3: #85786b;

  /* motion */
  --ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1);
  --ease-snap: cubic-bezier(0.7, 0, 0.2, 1);
  --dur-1: 160ms;
  --dur-2: 280ms;
  --dur-3: 560ms;

  /* layers */
  --z-backdrop: -1;
  --z-stage: 0;
  --z-content: 1;
  --z-header: 50;
  --z-sticky: 50;
  --z-popup: 100;

  /* the phone's sticky CTA bar */
  --sticky-h: 4rem;
}

/* ── Type: Special Gothic (display, instruments) + Finlandica Text (reading, UI). See src/styles/fonts.css ── */
:root {
  /* families: "SmartCrew Text" is Finlandica Text with Special Gothic's figures (fonts.css),
     so every digit on the page has one voice and 0 never reads as O */
  --font-display: "SmartCrew Display", "SmartCrew Display Fallback", "SmartCrew Display Fallback R", system-ui, sans-serif;
  --font-text: "SmartCrew Text", "SmartCrew Text Fallback", "SmartCrew Text Fallback R", system-ui, sans-serif;

  /* Special Gothic widths by role (wdth axis; the shipped file covers 75–110) */
  --wdth-head: 96; /* H1, H2, moment titles: an American gothic, not a squeezed poster */
  --wdth-sub: 100; /* h3, row names, small titles, the CTA label */
  --wdth-quote: 100; /* Phil's quote */
  --wdth-state: 88; /* big state labels: "Clocked in", "+$4,120 today", "Load #14 logged" */
  --wdth-time: 75; /* instruments only: clock times, timers, odometers, counts, money totals */
  --wdth-label: 108; /* caps labels, ONLY on the receipt and the spec sheet */
  --display-wdth: var(--wdth-head); /* old name, still read by base.css and day.css */

  /* weights (Special Gothic 400–700, Finlandica Text 400–700 in the shipped files) */
  --display-wght: 700;
  --sub-wght: 650;
  --time-wght: 700;
  --label-wght: 600;
  --text-wght: 400;

  /* tracking: light. Heavy negative tracking is itself an AI-template tell */
  --display-track: -0.012em;
  --track-head: -0.012em;
  --track-sub: -0.006em;
  --track-quote: -0.008em;
  --track-state: -0.004em;
  --track-time: -0.01em; /* the colon already sits tight; do not go tighter */
  --track-label: 0.06em;
  --display-word: 0.04em; /* Special Gothic's space is narrow (0.188em at 700): "every job" ran together */
  --text-track: 0em;

  /* figures */
  --num-tabular: "tnum" 1, "lnum" 1;
  --num-time: "tnum" 1, "lnum" 1, "case" 1; /* "case" lifts the colon to the figures' centre */

  /* type scale. Special Gothic at wdth 96 sets 18% narrower than Archivo at 112 (measured on
     the page copy), so headlines and times go up a step at the same line length. Finlandica
     Text sets 5% wider than Hanken with a bigger x-height (0.535 vs 0.493), so the reading
     sizes stay put and still read larger. */
  --fs-hero: clamp(2.5rem, 2.4vw + 2.1svh + 0.625rem, 4.75rem);
  --fs-display: clamp(2.625rem, 3.6vw + 2.6svh, 6.5rem);
  --fs-time: clamp(4.5rem, 6.6vw + 4.6svh, 11.5rem);
  --fs-h2: clamp(1.9375rem, 2.4vw + 1.3svh + 0.375rem, 3.75rem);
  --fs-h3: clamp(1.3125rem, 0.9vw + 0.75rem, 1.75rem);
  --fs-lead: clamp(1.03125rem, 0.35vw + 0.8125rem, 1.1875rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.8125rem;
  --fs-label: 0.78125rem; /* caps labels never smaller: Special Gothic caps are 0.71em tall */
}

@media (max-height: 620px) {
  :root {
    --fs-hero: clamp(2.375rem, 2.2vw + 2.2svh + 0.375rem, 4rem);
  }
}

/* ── Cards (James, Oct 20: "all the borders around all the cards need to be perfect, all the text
   sizes"). One set for every card in the classic look, the same values as the feature cards
   (src/site/features): each section's CSS applies them under html.look-classic. ── */
:root {
  --card-r: 0.875rem; /* cards, panels, the popup, photos */
  --card-r-sm: 0.625rem; /* small pieces inside or beside them: chips, tabs, rows, inputs, icon wells */
  --card-line: rgb(23 19 15 / 13%);
  --card-line-hover: rgb(23 19 15 / 26%);
  --card-line-night: rgb(246 240 232 / 12%); /* the same hairline on the dark bands */
  --card-shadow: 0 1px 0.125rem rgb(23 19 15 / 6%);
  --card-shadow-on: 0 0.875rem 1.75rem -1rem rgb(23 19 15 / 55%); /* a picked card (ink fill) */
  --card-pad: 1rem; /* compact cards, and every card on phones */
  --card-pad-lg: 1.5rem; /* big content cards on laptops: testimonials, /book's calendar card */
  --card-gap: 1rem;

  /* the type scale inside cards: nothing between these steps */
  --fs-card-meta: 0.8125rem; /* kickers, "Replaces", times, notes, fine print */
  --fs-card-small: 0.875rem; /* the second line in a compact card */
  --fs-card-name: 0.9375rem; /* names and labels */
  --fs-card-body: 1rem; /* body copy and bullets */
  --fs-card-title: 1.125rem; /* card headlines */
  --fs-card-quote: 1.375rem; /* testimonial quotes (20px on phones) */
}

@media (max-width: 760px) {
  :root {
    --card-pad-lg: 1rem;
    --fs-card-quote: 1.25rem;
  }
}

/* The SEO library's one template (src/seo/render.ts): a docs-style page in the product page's type
   and colours (tokens.css). Plain CSS, no script. Card radius, border and type steps follow the
   card standard in tokens.css (14px / 10px corners, one thin line, 13/14/15/16/18/22). */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--ground);
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 5.25rem;
}

body {
  margin: 0;
  color: var(--ink-2);
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--orange-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.1875rem;
}
a:hover {
  color: var(--ink);
}

img {
  max-width: 100%;
  height: auto;
}

/* ── top bar ── */
.bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 4rem;
  padding-inline: max(1rem, calc((100% - 82rem) / 2));
  background: rgb(251 248 244 / 92%);
  backdrop-filter: saturate(1.4) blur(0.625rem);
  -webkit-backdrop-filter: saturate(1.4) blur(0.625rem);
  border-bottom: 1px solid var(--line);
}
.home img {
  display: block;
  height: 1.625rem;
  width: auto;
}
.bar-nav {
  display: flex;
  gap: 1.375rem;
  margin-left: 0.5rem;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.bar-nav::-webkit-scrollbar {
  display: none;
}
.bar-nav a {
  flex: none;
  color: var(--ink-2);
  font-size: 0.9375rem;
  font-weight: 550;
  text-decoration: none;
  white-space: nowrap;
}
.bar-nav a:hover {
  color: var(--ink);
}
.bar-cta {
  display: flex;
  gap: 0.625rem;
  margin-left: auto;
}

/* ── the button (the product page's orange CTA, flattened) ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0 1.375rem;
  border-radius: 62.4375rem;
  background: var(--orange);
  color: #1a0d00;
  font-family: var(--font-display);
  font-stretch: 100%;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-shadow:
    0 1px 0 rgb(255 255 255 / 45%) inset,
    0 0.5rem 1.25rem -0.5rem rgb(255 122 1 / 70%);
  transition: transform var(--dur-1, 160ms) var(--ease-out), box-shadow var(--dur-1, 160ms);
}
.btn:hover {
  color: #1a0d00;
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgb(255 255 255 / 45%) inset,
    0 0.75rem 1.625rem -0.5rem rgb(255 122 1 / 80%);
}
.btn-sm {
  min-height: 2.5rem;
  padding: 0 1rem;
  font-size: 0.9375rem;
}
/* the second button: Take a Quick Tour */
.btn-ghost,
.btn-ghost:hover {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 0.09375rem var(--ink);
}
.band .btn-ghost,
.band .btn-ghost:hover {
  color: #fff;
  box-shadow: inset 0 0 0 0.09375rem rgb(255 255 255 / 70%);
}

/* ── three columns: library nav · article · on this page ── */
.lay {
  display: grid;
  grid-template-columns: 14.5rem minmax(0, 47.5rem) 12.5rem;
  justify-content: center;
  gap: 3rem;
  padding: 0 1.5rem;
}
.side,
.right,
main {
  min-width: 0;
}
.side,
.right {
  position: sticky;
  top: 4rem;
  align-self: start;
  max-height: calc(100vh - 4rem);
  overflow: auto;
  padding: 2.25rem 0 2.5rem;
}
.side-d {
  display: none;
}
.nav-g + .nav-g {
  margin-top: 1.375rem;
}
.nav-h {
  display: block;
  margin-bottom: 0.375rem;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}
.side ul,
.toc ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.side li a {
  display: block;
  padding: 0.3125rem 0.625rem;
  margin-left: -0.625rem;
  border-radius: 0.625rem;
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.35;
  text-decoration: none;
}
.side li a:hover {
  background: var(--ground-2);
  color: var(--ink);
}
.side li a.on {
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--card-line);
}
.toc-h {
  margin: 0 0 0.5rem;
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.toc li a {
  display: block;
  padding: 0.25rem 0 0.25rem 0.75rem;
  border-left: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 0.875rem;
  line-height: 1.4;
  text-decoration: none;
}
.toc li a:hover {
  border-color: var(--orange);
  color: var(--ink);
}

/* ── the article ── */
.doc {
  padding: 2.25rem 0 4.5rem;
}
.crumbs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  font-size: 0.875rem;
}
.crumbs a {
  color: var(--ink-3);
  text-decoration: none;
}
.crumbs span {
  color: var(--line);
}
.eyebrow {
  margin: 0 0 0.625rem;
  color: var(--orange-ink);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
h1,
h2,
h3 {
  color: var(--ink);
  font-family: var(--font-display);
  font-stretch: 96%;
  font-weight: 700;
  letter-spacing: -0.012em;
  word-spacing: 0.04em;
  text-wrap: balance;
}
h1 {
  margin: 0;
  font-size: clamp(2.125rem, 2.6vw + 1.125rem, 3.25rem);
  line-height: 1.06;
}
h2 {
  margin: 3.5rem 0 0.875rem;
  font-size: clamp(1.625rem, 1.1vw + 1.125rem, 2rem);
  line-height: 1.15;
}
h3 {
  margin: 2rem 0 0.5rem;
  font-size: 1.375rem;
  line-height: 1.25;
  font-stretch: 100%;
}
.meta {
  margin: 0.875rem 0 0;
  color: var(--ink-3);
  font-size: 0.875rem;
}
.lede {
  margin: 1.375rem 0 0;
  color: var(--ink);
  font-size: 1.25rem;
  line-height: 1.55;
}
.doc p,
.doc li {
  text-wrap: pretty;
}
.doc > p,
.doc > ul,
.doc > ol {
  margin: 0.875rem 0;
}
.doc > ul,
.doc > ol {
  padding-left: 1.375rem;
}
.doc > ul li,
.doc > ol li {
  margin: 0.375rem 0;
  padding-left: 0.25rem;
}
.doc > ul li::marker {
  color: var(--orange);
}
strong {
  color: var(--ink);
  font-weight: 650;
}

/* the short version */
.tldr {
  margin: 1.75rem 0 0;
  padding: 1.125rem 1.375rem;
  border: 1px solid var(--card-line);
  border-radius: 0.875rem;
  background: var(--paper);
}
.tldr-h,
.note-h,
.rel-h {
  margin: 0 0 0.375rem;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tldr ul {
  margin: 0;
  padding-left: 1.25rem;
}
.tldr li {
  margin: 0.375rem 0;
  font-size: 1rem;
}
.tldr li::marker {
  color: var(--orange);
}

/* ── screens in devices ── */
.shots {
  display: grid;
  gap: 1.25rem;
  margin: 2rem 0 0.5rem;
  align-items: end;
}
.shots-2.shots-laptop-phone {
  grid-template-columns: minmax(0, 3.2fr) minmax(0, 1fr);
}
.shots-2.shots-phone-phone,
.shots-2.shots-laptop-laptop {
  grid-template-columns: 1fr 1fr;
}
.shots-1.shots-phone {
  grid-template-columns: minmax(0, 18.75rem);
  justify-content: center;
}
.shots-2.shots-phone-phone {
  grid-template-columns: repeat(2, minmax(0, 16.25rem));
  justify-content: center;
}
.shots-3.shots-phone-phone-phone {
  grid-template-columns: repeat(3, minmax(0, 14.375rem));
  justify-content: center;
}
.shot {
  margin: 0;
}
.dev {
  position: relative;
  overflow: hidden;
  background: #fff;
}
.dev-laptop {
  border-radius: 0.75rem;
  border: 1px solid rgb(23 19 15 / 14%);
  box-shadow:
    0 1px 0.125rem rgb(23 19 15 / 6%),
    0 1.5rem 3rem -1.5rem rgb(23 19 15 / 35%);
}
.dev-bar {
  display: flex;
  gap: 0.375rem;
  padding: 0.5625rem 0.75rem;
  background: #f3efe9;
  border-bottom: 1px solid rgb(23 19 15 / 8%);
}
.dev-bar i {
  width: 0.5625rem;
  height: 0.5625rem;
  border-radius: 50%;
  background: #d9d1c7;
}
.dev-phone {
  border-radius: 2.25rem;
  padding: 0.5rem;
  background: linear-gradient(145deg, #4a4540, #1c1915 40%, #2c2823);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 12%),
    0 1.5rem 3rem -1.25rem rgb(23 19 15 / 45%);
}
.dev-phone .dev-screen {
  overflow: hidden;
  border-radius: 1.75rem;
  background: #fff;
}
.dev-island {
  position: absolute;
  top: 1rem;
  left: 50%;
  z-index: 1;
  width: 28%;
  height: 1.125rem;
  border-radius: 62.4375rem;
  background: #000;
  transform: translateX(-50%);
}
.dev-screen img {
  display: block;
  width: 100%;
}
.shot figcaption,
.shots-cap {
  margin: 0.625rem 0.125rem 0;
  color: var(--ink-3);
  font-size: 0.875rem;
  line-height: 1.45;
}
.shots-cap {
  margin-bottom: 0.5rem;
}

/* ── tables ── */
.tbl-wrap {
  margin: 1.5rem 0 0.5rem;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--card-line);
  border-radius: 0.875rem;
  background: var(--paper);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.4;
}
caption {
  padding: 0.875rem 1rem 0;
  color: var(--ink);
  font-weight: 650;
  text-align: left;
  caption-side: top;
}
/* glance-h is display:flex; a caption has to stay table-caption or the browser drops it */
.gtab caption.glance-h {
  display: table-caption;
  padding: 0.875rem 1rem 0.5rem;
}
th,
td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
tbody tr:last-child th,
tbody tr:last-child td {
  border-bottom: 0;
}
thead th {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  background: var(--ground);
  white-space: nowrap;
}
thead th.us {
  color: var(--orange-ink);
}
tbody th {
  color: var(--ink);
  font-weight: 600;
  min-width: 10rem;
}
.mk {
  white-space: nowrap;
}
.mk-i {
  display: inline-grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.375rem;
  border-radius: 50%;
  vertical-align: -0.3125rem;
}
.mk-i svg {
  width: 0.8125rem;
  height: 0.8125rem;
}
.mk-yes .mk-i {
  background: rgb(31 157 85 / 12%);
  color: var(--green);
}
.mk-no .mk-i {
  background: rgb(229 72 77 / 10%);
  color: var(--red);
}
.mk-partial .mk-i {
  background: rgb(255 122 1 / 14%);
  color: var(--orange-ink);
}
.mk-unknown .mk-i {
  background: var(--ground-2);
  color: var(--ink-3);
}
.mk-w {
  color: var(--ink);
  font-weight: 600;
}
.mk-n {
  display: block;
  margin-top: 0.1875rem;
  color: var(--ink-3);
  font-size: 0.875rem;
  white-space: normal;
}
.tbl-note {
  margin: 0.5rem 0.125rem 0;
  color: var(--ink-3);
  font-size: 0.875rem;
}

/* ── notes, cards, steps, quote ── */
.note {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border-radius: 0.875rem;
  background: var(--ground-2);
  border: 1px solid var(--card-line);
}
.note p {
  margin: 0;
  font-size: 1rem;
}
.note-warn {
  background: #fff4e8;
  border-color: rgb(255 122 1 / 28%);
}
.cards {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0;
}
.cards-2 {
  grid-template-columns: 1fr 1fr;
}
.cards-3 {
  grid-template-columns: repeat(3, 1fr);
}
.card {
  padding: 1.25rem 1.375rem;
  border: 1px solid var(--card-line);
  border-radius: 0.875rem;
  background: var(--paper);
}
.card-us {
  border-color: rgb(255 122 1 / 45%);
  box-shadow: 0 0 0 0.1875rem rgb(255 122 1 / 8%);
}
.card h3 {
  margin: 0 0 0.625rem;
  font-size: 1.125rem;
}
.card ul {
  margin: 0;
  padding-left: 1.125rem;
}
.card li {
  margin: 0.375rem 0;
  font-size: 1rem;
}
.card-us li::marker {
  color: var(--orange);
}
.doc .steps {
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.doc .steps li {
  position: relative;
  margin: 0;
  padding: 0 0 1.125rem 3.25rem;
  counter-increment: step;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 0.625rem;
  background: var(--night);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
}
.steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 1.0625rem;
  top: 2.5rem;
  bottom: 0.25rem;
  width: 1px;
  background: var(--line);
}
.steps p {
  margin: 0;
}
.step-h {
  color: var(--ink);
  font-weight: 650;
}
.quote {
  margin: 2rem 0;
  padding: 0 0 0 1.25rem;
  border-left: 0.1875rem solid var(--orange);
}
.quote blockquote {
  margin: 0;
}
.quote p {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-stretch: 100%;
  line-height: 1.35;
}
.quote figcaption {
  margin-top: 0.5rem;
  color: var(--ink-3);
  font-size: 0.875rem;
}

/* ── byline, verdict, author, article index ── */
.byline {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.875rem 0 0.5rem;
}
.byline img,
.author img {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 15%;
}
.byline p {
  margin: 0;
  color: var(--ink-3);
  font-size: 0.875rem;
  line-height: 1.4;
}
.byline a {
  color: var(--ink);
  font-weight: 650;
  text-decoration: none;
}
.verdict {
  margin: 1.125rem 0;
  padding: 1rem 1.125rem;
  border-radius: 0.875rem;
  background: var(--paper);
  border: 1px solid var(--card-line);
}
.verdict-k,
.author-k,
.faq-jump-h {
  margin: 0 0 0.375rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--orange-ink);
}
.verdict p:last-child {
  margin: 0;
}
.author {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin: 2.25rem 0;
  padding: 1.125rem;
  border-radius: 0.875rem;
  border: 1px solid var(--card-line);
  background: var(--ground-2);
}
.author img {
  width: 4.5rem;
  height: 4.5rem;
  flex: none;
}
.author-n {
  margin: 0 0 0.375rem;
  color: var(--ink);
  font-weight: 700;
}
.author p:last-child {
  margin: 0;
}
.faq-jump {
  margin: 0.75rem 0 1.75rem;
  padding: 1rem 1.125rem;
  border-radius: 0.875rem;
  background: var(--ground-2);
}
.faq-jump > ol {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
}
.faq-jump ol ol {
  margin: 0.25rem 0 0.75rem;
  padding-left: 1.125rem;
}
.faq-jump a {
  text-decoration: none;
}
.faq-jump a:hover {
  text-decoration: underline;
}
.series-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin: 0.5rem 0 1.125rem;
  padding: 0;
  list-style: none;
}
.series-list a {
  font-weight: 600;
}
.hub-k {
  color: var(--ink-3);
  font-size: 0.8125rem;
}

/* ── FAQ, CTA band, sources, related ── */
.faq-i {
  padding: 0.25rem 0 0.375rem;
  border-bottom: 1px solid var(--line);
}
.faq-i h3 {
  margin: 1.125rem 0 0.375rem;
  font-size: 1.1875rem;
}
.faq-i p {
  margin: 0 0 0.75rem;
}
.band {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: 3rem 0;
  padding: 1.5rem;
  border-radius: 0.875rem;
  background: var(--night);
  color: var(--ink-night-2);
}
.band-t {
  flex: 1;
}
.band-h {
  margin: 0 0 0.25rem;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.2;
}
.band-p {
  margin: 0;
  font-size: 1rem;
}
.band-b {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.src {
  padding-left: 1.375rem;
  font-size: 0.9375rem;
}
.src li {
  margin: 0.375rem 0;
}
.src span {
  color: var(--ink-3);
  font-size: 0.875rem;
}
.rel {
  margin-top: 3rem;
}
.rel-g,
.hub {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 0.625rem;
}
.rel-c,
.hub-c {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--card-line);
  border-radius: 0.875rem;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--dur-1, 160ms);
}
.rel-c:hover,
.hub-c:hover {
  border-color: var(--card-line-hover);
  color: var(--ink);
}
.rel-k {
  color: var(--ink-3);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.rel-t,
.hub-t {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25;
}
.hub {
  margin-top: 2rem;
}
.hub-d {
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.45;
}

/* ── footer ── */
.foot {
  padding: 3rem max(1rem, calc((100% - 82rem) / 2)) 2.5rem;
  border-top: 1px solid var(--line);
  background: var(--ground-2);
}
.foot-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11.25rem, 1fr));
  gap: 1.75rem;
}
.foot-h {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.foot-h a {
  color: var(--ink);
  text-decoration: none;
}
.foot ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.foot li a {
  display: block;
  padding: 0.1875rem 0;
  color: var(--ink-2);
  font-size: 0.9375rem;
  text-decoration: none;
}
.foot li a:hover {
  color: var(--ink);
}
.foot-fine {
  max-width: 56.25rem;
  margin: 1.75rem 0 0;
  color: var(--ink-3);
  font-size: 0.8125rem;
  line-height: 1.5;
}
.foot-fine + .foot-fine {
  margin-top: 0.5rem;
}

/* ── narrower screens ── */
@media (max-width: 1240px) {
  .lay {
    grid-template-columns: minmax(0, 47.5rem) 13.75rem;
  }
  .side {
    grid-column: 1 / -1;
    position: static;
    max-height: none;
    overflow: visible;
    padding: 1rem 0 0;
  }
  .side-n {
    display: none;
  }
  .side-d {
    display: block;
    border: 1px solid var(--card-line);
    border-radius: 0.625rem;
    background: var(--paper);
  }
  .side-d summary {
    padding: 0.625rem 0.875rem;
    color: var(--ink);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
  }
  .side-d nav {
    padding: 0.25rem 0.875rem 0.875rem;
  }
  .side-d li a {
    margin-left: 0;
  }
}

@media (max-width: 900px) {
  .bar {
    gap: 0.75rem;
  }
  .bar-nav {
    display: none;
  }
  .lay {
    display: flex;
    flex-direction: column;
    padding: 0 1rem;
  }
  .side {
    order: 1;
  }
  /* phones: the H1 and the short answer come first; the H2s are on the page anyway */
  .right {
    display: none;
  }
  main {
    order: 3;
  }
  .doc {
    padding-top: 1.25rem;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 1.03125rem;
  }
  .lede {
    font-size: 1.125rem;
  }
  .home img {
    height: 1.375rem;
  }
  .cards-2,
  .cards-3,
  .rel-g,
  .hub {
    grid-template-columns: 1fr;
  }
  .shots-2.shots-laptop-phone {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.42fr);
    gap: 0.625rem;
  }
  .shots-3.shots-phone-phone-phone {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.625rem;
  }
  .dev-phone {
    border-radius: 1.5rem;
    padding: 0.3125rem;
  }
  .dev-phone .dev-screen {
    border-radius: 1.1875rem;
  }
  .dev-island {
    top: 0.625rem;
    height: 0.625rem;
  }
  .band {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }
  /* phones: no room for two buttons in the top bar; the tour button is in every band */
  .bar .tour {
    display: none;
  }
  table {
    font-size: 0.875rem;
  }
  th,
  td {
    padding: 0.625rem 0.75rem;
  }
  tbody th {
    min-width: 7.5rem;
  }
}

/* ── checkmark grids (glance on comparison pages, grid on hubs, guides and feature pages) ── */
.glance,
.grid {
  margin: 1.75rem 0 0.5rem;
}
.glance-h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.625rem;
  margin: 0 0 0.625rem;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}
.glance-h span {
  color: var(--orange-ink);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.glance-wrap {
  /* contains the absolutely placed screen-reader labels, so a wide chart can't widen the page */
  position: relative;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--card-line);
  border-radius: 0.875rem;
  background: var(--paper);
}
.gtab {
  font-size: 0.9375rem;
}
.gtab th,
.gtab td {
  padding: 0.625rem 0.875rem;
  vertical-align: middle;
}
.gtab thead th {
  font-size: 0.875rem;
  text-align: center;
  white-space: normal;
}
.gtab thead th:first-child {
  text-align: left;
}
.gtab tbody th {
  min-width: 0;
  font-weight: 500;
  color: var(--ink-2);
}
.gtab tbody th a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.gtab tbody th a:hover {
  color: var(--orange-ink);
}
.g {
  width: 6.875rem;
  text-align: center;
  white-space: nowrap;
}
.g-i {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--ink);
}
.g-i svg {
  width: 1.125rem;
  height: 1.125rem;
}
.g-w {
  color: var(--ink-3);
  font-size: 0.8125rem;
}
.g-partial .g-w {
  color: var(--orange-ink);
  font-weight: 600;
}
.g-no .g-w {
  color: var(--red);
  font-weight: 600;
}
.g-na {
  color: var(--ink-3);
}
.g-grp th,
.g-grp td {
  padding-top: 0.75rem;
  padding-bottom: 0.375rem;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.gtab tbody tr.g-grp th {
  color: var(--ink);
  font-weight: 700;
}
/* SmartCrew's column (glance) and row (grid) are the dark ones */
.gtab .g-us,
.gtab tr.g-grp td.g-us,
.g-usrow th,
.g-usrow td {
  background: var(--night);
  color: #fff;
  border-bottom-color: var(--line-night);
}
.gtab thead th.g-us {
  background: var(--night);
  color: #fff;
}
.g-us .g-i,
.g-usrow .g-i {
  color: #fff;
}
.g-usrow th {
  color: #fff;
  font-weight: 700;
}
.g-us .g-w,
.g-usrow .g-w {
  color: var(--orange-2);
}
.g-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.4375rem;
  border-radius: 50%;
  background: var(--orange);
  vertical-align: 1px;
}
.gtab-wide .g {
  width: auto;
  min-width: 5.75rem;
}
.gtab-wide tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 8.125rem;
  background: var(--paper);
  white-space: nowrap;
}
.gtab-wide thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
}
.gtab-wide .g-usrow th {
  background: var(--night);
}
.g-hl {
  background: rgb(255 122 1 / 7%);
}
thead th.g-hl {
  background: rgb(255 122 1 / 14%);
  color: var(--orange-ink);
}
.g-usrow .g-hl {
  background: #2a231c;
}
.glance-n {
  margin: 0.5rem 0.125rem 0;
  color: var(--ink-3);
  font-size: 0.875rem;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
@media (max-width: 640px) {
  .gtab th,
  .gtab td {
    padding: 0.5625rem 0.625rem;
  }
  .gtab {
    font-size: 0.875rem;
  }
  .g {
    width: 5.25rem;
  }
  .gtab-wide .g {
    min-width: 4.875rem;
  }
  .gtab-wide tbody th {
    min-width: 7rem;
  }
}
.gtab .g-usrow th {
  color: #fff;
}
.gtab thead th.g-us {
  white-space: nowrap;
}
@media (max-width: 640px) {
  .gtab-wide {
    font-size: 0.8125rem;
  }
  .gtab-wide th,
  .gtab-wide td {
    padding: 0.5625rem 0.25rem;
  }
  .gtab-wide thead th {
    font-size: 0.6875rem;
    line-height: 1.25;
  }
  .gtab-wide tbody th,
  .gtab-wide thead th:first-child {
    position: static;
    min-width: 0;
    padding-left: 0.75rem;
    white-space: normal;
  }
  .gtab-wide .g {
    min-width: 0;
    width: 3.25rem;
    white-space: normal;
  }
  .gtab-wide .g-w {
    font-size: 0.6875rem;
    line-height: 1.2;
  }
  .gtab-wide .g-i svg {
    width: 0.9375rem;
    height: 0.9375rem;
  }
}
.g-short {
  display: none;
  color: var(--ink-3);
  font-size: 1rem;
}
@media (max-width: 640px) {
  .gtab-wide .g-long {
    display: none;
  }
  .gtab-wide .g-short {
    display: inline;
  }
  .gtab-wide .g-short.g-th {
    color: inherit;
    font-size: inherit;
  }
}
@media (max-width: 640px) {
  .gtab-wide .g-usrow th {
    white-space: nowrap;
  }
}

/* ── feature charts (render.ts matrix/glance): SmartCrew's features down the left ── */
.mx {
  margin: 1.75rem 0 0.5rem;
}
.mx-set {
  margin: 1.375rem 0 0.125rem;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
}
.mx-line {
  margin: 0 0 0.625rem;
  color: var(--ink-3);
  font-size: 0.9375rem;
}
.mx-say {
  margin: 0.75rem 0.125rem 0.25rem;
  color: var(--ink-2);
  font-size: 0.9375rem;
}
.mx-plain {
  margin: 0.875rem 0.125rem 0;
  color: var(--ink-3);
  font-size: 0.8125rem;
  line-height: 1.45;
}
.mx-plain-h {
  margin: 0 0 0.375rem;
  color: var(--ink-2);
  font-size: 0.875rem;
  font-weight: 600;
}
.mx-plain ul {
  margin: 0;
  padding-left: 1.125rem;
}
.mx-plain li {
  margin: 0.1875rem 0;
}
.mx-plain li strong {
  color: var(--ink-2);
}
.mx-plain p {
  margin: 0.5rem 0 0;
}
@media (min-width: 900px) {
  .mx-plain ul {
    columns: 2;
    column-gap: 1.75rem;
  }
  .mx-plain li {
    break-inside: avoid;
  }
}
.mx-more {
  margin: -0.25rem 0 0.5rem;
  color: var(--ink-3);
  font-size: 0.8125rem;
}
.mx .glance-wrap + .mx-set {
  margin-top: 1.625rem;
}
.mxt thead th a {
  color: var(--ink);
  text-decoration: none;
}
.mxt thead th a:hover {
  color: var(--orange-ink);
}
.mxt thead th.g-hl a {
  color: var(--orange-ink);
}
.mxt {
  table-layout: fixed;
  width: 100%;
  min-width: 35rem;
}
.mxt thead th:first-child,
.mxt tbody th {
  width: 26%;
}
.mxt th,
.mxt td {
  padding: 0.5625rem 0.375rem;
}
.mxt tbody th,
.mxt thead th:first-child {
  padding-left: 0.75rem;
}
.mxt .g {
  width: auto;
  min-width: 0;
  white-space: normal;
  line-height: 1.2;
}
.mxt thead th {
  font-size: 0.8125rem;
  line-height: 1.25;
  hyphens: manual;
}
.mxt tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--paper);
}
.mxt thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--paper);
}
.mxt tbody tr.g-grp th {
  background: var(--ground);
}
.g-addon .g-w {
  color: var(--orange-ink);
  font-weight: 600;
}
.g-not_listed {
  color: var(--ink-3);
}
.mx-n {
  display: block;
  margin-top: 0.125rem;
  color: var(--ink-3);
  font-size: 0.75rem;
  line-height: 1.35;
  white-space: normal;
}
.glance .g {
  width: 9.375rem;
}
.mx-p {
  margin-left: 0.375rem;
  padding: 1px 0.375rem;
  border: 1px solid var(--card-line);
  border-radius: 0.625rem;
  color: var(--ink-3);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: none;
  font-weight: 600;
}
.mx-src {
  margin: 0.5rem 0.125rem 0;
  color: var(--ink-3);
  font-size: 0.875rem;
}
.mx-src summary {
  cursor: pointer;
  color: var(--ink-2);
  font-weight: 600;
}
.mx-src ul {
  margin: 0.5rem 0 0;
  padding-left: 1.125rem;
}
.mx-src li {
  margin: 0.25rem 0;
  overflow-wrap: anywhere;
}
.nav-sub {
  margin: 0.625rem 0 0.125rem;
  color: var(--ink-3);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.trades {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11.875rem, 1fr));
  gap: 0.375rem 1.125rem;
  padding-left: 1.125rem;
}
@media (max-width: 640px) {
  .mxt {
    font-size: 0.8125rem;
  }
  .mxt th,
  .mxt td {
    padding: 0.5rem 0.25rem;
  }
  .mxt thead th {
    font-size: 0.6875rem;
    line-height: 1.25;
  }
  .mxt {
    min-width: 0;
  }
  .mxt tbody th,
  .mxt thead th:first-child {
    width: 34%;
    padding-left: 0.625rem;
    white-space: normal;
  }
  .mxt .g-w {
    font-size: 0.625rem;
    line-height: 1.15;
  }
  .mxt td.g {
    padding: 0.5rem 1px;
  }
  .mxt thead th {
    padding: 0.5rem 1px;
    font-size: 0.65625rem;
  }
  .mxt thead th .g-dot {
    display: none;
  }
  .mxt thead th.g-c {
    overflow-wrap: anywhere;
    hyphens: manual;
  }
  .mxt .g-i svg {
    width: 0.9375rem;
    height: 0.9375rem;
  }
  .mxt .g-long {
    display: none;
  }
  .mxt .g-short {
    display: inline;
  }
  .mxt .g-short.g-th {
    color: inherit;
    font-size: inherit;
  }
  .glance .g {
    width: 6.5rem;
  }
  /* 7+ competitors don't fit a phone: let the chart scroll sideways, names column stays put */
  .mxt.mx-wide {
    min-width: calc(7.375rem + var(--n, 7) * 3.125rem);
  }
  .mxt.mx-wide tbody th,
  .mxt.mx-wide thead th:first-child {
    width: 7.375rem;
  }
}
/* 7+ competitors: each column keeps a readable width and the chart scrolls sideways instead */
@media (min-width: 641px) {
  .mxt.mx-wide {
    min-width: calc(20.625rem + var(--n, 7) * 5rem);
  }
  .mxt.mx-wide tbody th,
  .mxt.mx-wide thead th:first-child {
    width: 14.375rem;
  }
  .mxt.mx-wide thead th.g-us {
    width: 6.25rem;
  }
}
.mxt thead th.g-us {
  white-space: normal;
}