/* ============================================================================
   ABYLAY — theme layer (2026-09)
   Loaded AFTER base.css and app.css. It only restyles; it adds no behaviour and
   renames nothing, so removing the one <link> in index.html reverts the site to
   the previous design exactly.

   Contents
     1. Tokens              — the palette and type scale from the design spec
     2. Dark theme          — [data-theme="dark"] remaps every token
     3. Typography
     4. Boot screen         — the loading animation
     5. Header / brand
     6. Hero + describe card
     7. The loop strip
     8. Cards, panels, buttons, chips
     9. Dark CTA panel
    10. Catalog, product, modals
    11. Mobile
    17. Ambient canvas     — the soft blooms and grid behind the content
    18. Dark theme surfaces — the whites the older stylesheets hardcoded
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  --bg: #F5F4FA;
  --bg-deep: #EFEDF7;
  --surface: #FFFFFF;
  --surface2: #F4F3FB;
  --ink: #1F1D2B;
  --ink-soft: #3C3950;
  --muted: #6E6B80;
  --line: #E4E2EF;
  --line-strong: #D3D0E4;

  --violet: #6B4EF2;
  --violet2: #9B84FF;
  --violet-deep: #5438D8;
  --violetSoft: #EDE8FF;

  --green: #1B7F5C;
  --greenSoft: #E6F4EE;
  --amber: #8A5E12;
  --amberSoft: #FBF1DC;
  --red: #A33F4B;
  --redSoft: #FBE9EB;

  --shadow: 0 30px 80px rgba(31, 29, 43, .10);
  --shadow2: 0 10px 30px rgba(31, 29, 43, .06);
  --shadow-card: 0 1px 2px rgba(31, 29, 43, .04);
  --r: 16px;
  --r2: 22px;
  --r3: 28px;

  --sans: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Arial, sans-serif;
  --display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, "Roboto Mono", monospace;

  /* Derived colours. They live here as tokens, not as literals in the rules
     below, so the monochrome block only has to override this short list. */
  --violet-line: #DCD3FF;
  --violet-ink: #FFFFFF;
  --focus: rgba(107, 78, 242, .10);
  --focus-strong: rgba(107, 78, 242, .14);
  --dark-surface: #2A2739;
  --dark-line: #3C3950;
  --dark-text: #A9A6BC;
  --dark-accent: #D6CFFF;
  --warnSoft: #FBF4E2;
  --warnLine: #E7D8AE;
  --warnInk: #6B4D00;

  /* Panels that deliberately invert against the page (the evidence band, the
     CTA, the primary button). They used --ink as a background, which breaks
     the moment --ink becomes light, so they get their own pair. */
  --inverse-bg: #1F1D2B;
  --inverse-ink: #FFFFFF;
  --header-bg: rgba(245, 244, 250, .88);

  /* The ambient canvas. */
  --glow-a: rgba(107, 78, 242, .20);
  --glow-b: rgba(92, 148, 255, .15);
  --glow-c: rgba(255, 164, 116, .11);
  --glow-d: rgba(140, 110, 255, .10);
  --grid: rgba(31, 29, 43, .05);
}

/* ---------- 2. Dark theme -----------------------------------------------
   One switch, one place. Every colour on the site resolves through the tokens
   above, so remapping them here turns the whole interface greyscale without
   touching a single component rule. The three verdict colours (worked /
   partial / failed) keep DIFFERENT LIGHTNESS values rather than collapsing to
   one grey — otherwise the outcome pills would become indistinguishable, and
   those pills carry real meaning.                                          */
:root[data-theme="dark"] {
  --bg: #0A0A0C;
  --bg-deep: #07070A;
  --surface: #131317;
  --surface2: #1A1A1F;
  --ink: #F1F1F3;
  --ink-soft: #CBCBD2;
  --muted: #8C8C96;
  --line: #26262C;
  --line-strong: #37373F;

  /* Monochrome: the accent becomes near-white, so emphasis is carried by
     contrast instead of hue. */
  --violet: #EDEDF0;
  --violet2: #9E9EA8;
  --violet-deep: #FFFFFF;
  --violetSoft: #1F1F25;
  --violet-line: #30303A;
  --violet-ink: #0A0A0C;

  /* The three verdicts keep distinct lightness. Collapsed to one grey they
     would stop telling a researcher whether a reagent worked. */
  --green: #DEDEE2;
  --greenSoft: #1D1D24;
  --amber: #ADADB6;
  --amberSoft: #1A1A21;
  --red: #8E8E98;
  --redSoft: #19191F;

  --focus: rgba(255, 255, 255, .10);
  --focus-strong: rgba(255, 255, 255, .17);
  --dark-surface: #1C1C22;
  --dark-line: #30303A;
  --dark-text: #9E9EA8;
  --dark-accent: #E4E4E8;
  --warnSoft: #1C1C22;
  --warnLine: #30303A;
  --warnInk: #CBCBD2;

  --inverse-bg: #17171C;
  --inverse-ink: #F1F1F3;
  --header-bg: rgba(10, 10, 12, .86);

  --shadow: 0 30px 80px rgba(0, 0, 0, .55);
  --shadow2: 0 12px 34px rgba(0, 0, 0, .40);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .35);

  --glow-a: rgba(255, 255, 255, .105);
  --glow-b: rgba(186, 198, 232, .085);
  --glow-c: rgba(255, 255, 255, .055);
  --glow-d: rgba(206, 214, 240, .055);
  --grid: rgba(255, 255, 255, .040);

  color-scheme: dark;
}
/* Photographs and the logo mark are pixels, not tokens — desaturate them. */
:root[data-theme="dark"] .founder-photo,
:root[data-theme="dark"] .brand-mark,
:root[data-theme="dark"] .boot-mark,
:root[data-theme="dark"] .founder-link .li {
  filter: grayscale(1) contrast(1.02);
}

/* ---------- 3. Typography ------------------------------------------------ */
body {
  background: var(--bg);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62; font-weight: 450; }

h1, h2, .hero-x h1, .section-head h2, .layers h2, .cta h2,
.modal h2, .auth-copy h2, .founder-copy h2, .panel-head h2 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -.022em;
}

.hero-x h1 {
  font-size: clamp(42px, 5.4vw, 68px);
  line-height: 1.04;
  letter-spacing: -.02em;
  margin: 18px 0 20px;
  max-width: 15ch;
}
.hero-x h1 em { font-style: normal; color: var(--violet); }
.hero-x p { font-size: 16px; line-height: 1.62; color: var(--muted); max-width: 54ch; }

.section-head h2 { font-size: clamp(32px, 3.6vw, 46px); line-height: 1.06; }
.layers h2 { font-size: clamp(34px, 4vw, 52px); line-height: 1.05; letter-spacing: -.02em; }
.cta h2, .modal h2, .founder-copy h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.08; }
.panel-head h2 { font-size: 28px; line-height: 1.12; }
.auth-copy h2 { font-size: 30px; line-height: 1.1; }

/* Card and product titles stay in the sans: at 17–18px the serif turns mushy,
   and these are labels to scan, not prose to read. */
.card h3, .match h3, .mini-card h3, .product-title h3, .layer-card h3, .cap strong {
  font-family: var(--sans);
  font-weight: 650;
  letter-spacing: -.012em;
}

.eyebrow, .describe-label, .modal-kicker {
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
}

.meta { color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.cat, .contextline, .code { font-family: var(--mono); }

/* ---------- 4. Boot screen ----------------------------------------------
   Sits above everything until the page is ready, then fades out. The markup is
   inert (no JS needed to draw it) and the inline script in index.html removes
   it on a timer as well as on load, so a failure in app.js can never leave a
   visitor stuck behind it.                                                  */
#boot {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  gap: 0;
  background: var(--bg);
  transition: opacity .45s ease, visibility .45s ease;
}
#boot .boot-inner { display: grid; justify-items: center; gap: 22px; }
.boot-mark { width: 104px; height: 104px; display: block; }
.boot-word {
  font-family: var(--display);
  font-size: 30px;
  letter-spacing: -.022em;
  color: var(--ink);
  opacity: 0;
  animation: bootWord .7s ease-out .5s both; font-weight: 600; }
.boot-line {
  width: 132px;
  height: 2px;
  border-radius: 2px;
  background: var(--line-strong);
  overflow: hidden;
  position: relative;
}
.boot-line i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  border-radius: 2px;
  background: var(--violet);
  animation: bootSweep 1.5s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes bootWord { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes bootSweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}
html.booted #boot { opacity: 0; visibility: hidden; pointer-events: none; }
/* The page must not scroll behind the boot screen, but the lock has to lift
   even if the class is never added — hence it keys off :not(.booted). */
html:not(.booted) body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  #boot { transition: none; }
  .boot-word { animation: none; opacity: 1; }
  .boot-line i { animation: none; width: 100%; }
}

/* ---------- 5. Header / brand -------------------------------------------- */
header {
  background: var(--header-bg);
  backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
.nav { height: 68px; gap: 22px; }
.brand { min-width: 0; gap: 9px; align-items: center; }
.brand-mark { width: 27px; height: 27px; display: block; flex: 0 0 27px; }
.brand-main {
  font: 400 27px/1 var(--display);
  letter-spacing: -.022em;
  color: var(--ink); font-size: 28px; font-weight: 600; }
.brand-check { display: none; }

nav { gap: 26px; }
nav a { font-size: 14.5px; font-weight: 500; color: var(--muted); }
nav a.active { color: var(--ink); font-weight: 650; }

.nav-actions { gap: 8px; }

/* ---------- 6. Hero + describe card ------------------------------------- */
.hero-x { padding: 64px 0 22px; max-width: none; }
.describe {
  border-radius: var(--r3);
  border: 1px solid var(--line);
  box-shadow: var(--shadow2);
  padding: 24px;
  background: var(--surface);
}
.describe textarea {
  background: var(--surface2);
  border: 1px solid transparent;
  border-radius: var(--r);
  padding: 15px;
  min-height: 112px;
  font-size: 17px; line-height: 1.6; }
.describe textarea:focus {
  border-color: var(--line-strong);
  background: var(--surface);
  box-shadow: 0 0 0 4px var(--focus);
}
.describe-label { margin: 0 0 10px 2px; }

.search-help button {
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 12.5px;
  padding: 9px 13px;
  color: var(--muted);
  font-weight: 500;
}
.search-help button:hover { color: var(--violet); border-color: var(--violet2); }

.capabilities { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 30px; }
.cap {
  border-radius: var(--r2);
  border: 1px solid var(--line);
  padding: 24px;
  box-shadow: var(--shadow-card);
}
.cap strong { font-size: 16.5px; margin-bottom: 9px; }
.cap span { font-size: 14.5px; line-height: 1.62; }

.stats-strip { gap: 22px; font-size: 13.5px; margin: 22px 0 6px; }
.stats-strip b { font-size: 14px; font-weight: 600; }

/* ---------- 7. The loop strip -------------------------------------------
   Grant → Budget → Experiment → Product → Vendor → Purchase → Lot → Outcome.
   A flex row, not a grid: the arrows have to wrap with their chips on narrow
   screens rather than leaving an orphaned arrow at the end of a line.       */
.loop {
  margin: 30px 0 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  padding: 26px 28px;
  box-shadow: var(--shadow-card);
}
.loop .eyebrow { margin-bottom: 14px; }
.loop-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.loop-chip {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  padding: 9px 15px;
  font-size: 13.5px;
  font-weight: 550;
  color: var(--ink-soft);
  white-space: nowrap;
}
.loop-chip.on {
  background: var(--violet);
  border-color: var(--violet);
  color: var(--violet-ink);
  font-weight: 650;
}
.loop-arrow { color: var(--line-strong); font-size: 12px; user-select: none; }
.loop p { margin: 16px 0 0; font-size: 15px; line-height: 1.7; color: var(--muted); max-width: 72ch; }

/* ---------- 8. Cards, panels, buttons, chips ---------------------------- */
.btn {
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font-weight: 600;
  font-size: 14.5px;
  padding: 12px 18px;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.btn:hover { border-color: var(--ink-soft); transform: none; }
.btn.primary { background: var(--inverse-bg); color: var(--inverse-ink); border-color: var(--inverse-bg); }
.btn.primary:hover { background: var(--ink-soft); border-color: var(--ink-soft); }
.btn.violet { background: var(--violet); color: var(--violet-ink); border-color: var(--violet); font-weight: 650; }
.btn.violet:hover { background: var(--violet-deep); border-color: var(--violet-deep); }
.icon-btn { border-radius: 12px; border-color: var(--line-strong); }

.panel, .card, .mini-card, .match, .list-row, .filters, .table-wrap {
  border-color: var(--line);
  background: var(--surface);
}
.panel { border-radius: var(--r3); padding: 26px; box-shadow: var(--shadow-card); }
.card { border-radius: var(--r2); padding: 22px; box-shadow: var(--shadow-card); }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow2); border-color: var(--line-strong); }
.mini-card, .match { border-radius: var(--r2); }
.product-grid { gap: 14px; }

.chip, .tag, .badge { border-radius: 999px; border-color: var(--line); }
.tag { background: var(--surface2); font-size: 10px; padding: 6px 10px; }
.badge { font-weight: 600; letter-spacing: .06em; }
.badge.violet { background: var(--violetSoft); color: var(--violet); border-color: var(--violet-line); }
.category { border-radius: 999px; background: var(--surface2); font-weight: 600; letter-spacing: .09em; }
.pill { border-radius: 999px; font-weight: 600; font-size: 10px; padding: 6px 10px; }
.feature-tab, .tabs button { border-radius: 999px; border-color: var(--line); font-weight: 550; }
.tabs button.active { background: var(--inverse-bg); color: var(--inverse-ink); border-color: var(--inverse-bg); }

.open {
  border-radius: 12px;
  border-color: var(--line-strong);
  font-weight: 550;
}
.open:hover { border-color: var(--ink-soft); color: var(--ink); }

.searchbox {
  border-radius: var(--r2);
  border-color: var(--line);
  box-shadow: var(--shadow-card);
  padding: 7px 7px 7px 4px;
}
.searchbox button { border-radius: 14px; background: var(--violet); color: var(--violet-ink); font-weight: 600; }
.searchbox input { font-size: 16px; }

.filters { border-radius: var(--r2); padding: 20px; }
.filter button.active, .filter button:hover { background: var(--violetSoft); color: var(--violet); }
.check input, .filter input[type=range], .issue-tags input { accent-color: var(--violet); }

.empty { border-radius: var(--r2); border-color: var(--line-strong); }
.banner { border-radius: var(--r); }

/* ---------- 9. Dark CTA panel ------------------------------------------- */
.layers { background: var(--inverse-bg); color: var(--inverse-ink); padding: 84px 0; }
.layers p { color: var(--dark-text); }
.layer-card {
  background: var(--dark-surface);
  border: 1px solid var(--dark-line);
  border-radius: var(--r2);
  padding: 22px;
}
.layer-card .n { color: var(--violet2); font-weight: 600; }
.layer-card strong { color: var(--dark-accent); font-weight: 500; }

.cta {
  background: var(--inverse-bg);
  border-radius: var(--r3);
  padding: 44px 46px;
  box-shadow: var(--shadow);
}
.cta p { color: var(--dark-text); }
.cta .btn { background: var(--violet); color: var(--violet-ink); border-color: var(--violet); }
.cta .btn.secondary { background: transparent; border-color: rgba(255, 255, 255, .28); }

/* ---------- 10. Catalog, product, modals -------------------------------- */
.modal { border-radius: var(--r3); }
.close { border-radius: 12px; border-color: var(--line-strong); }
.ev, .intel-cell, .kv div, .money-grid div, .price-stat, .whatif input, .fp-grid input {
  border-radius: 12px;
  border-color: var(--line);
  background: var(--surface2);
}
.fp-grid input:focus, .form input:focus, .form select:focus, .form textarea:focus,
.table input:focus, .table select:focus {
  outline: 0;
  border-color: var(--violet2);
  box-shadow: 0 0 0 3px var(--focus);
}
.form input, .form select, .form textarea,
.inline-form input, .inline-form select,
.passport-grid input, .passport-grid select {
  border-radius: 12px;
  border-color: var(--line);
  background: var(--surface2);
}
.ai { border-radius: var(--r); border-color: var(--violet-line); background: var(--violetSoft); }
.ai small { color: var(--violet); font-weight: 600; }
.code-row input { border-radius: 14px; font-weight: 600; border-color: var(--line-strong); }
.code-row input:focus { border-color: var(--violet); box-shadow: 0 0 0 3px var(--focus-strong); }
.edu-input-wrap { border-radius: 14px; border-color: var(--line-strong); }
.edu-input-wrap:focus-within { border-color: var(--violet2); box-shadow: 0 0 0 4px var(--focus); }
.edu-badge { background: var(--violetSoft); color: var(--violet); font-weight: 600; }
.auth-icon { border-radius: var(--r); background: var(--violetSoft); color: var(--violet); font-weight: 600; }
.vendor-offer { border-radius: var(--r); border-color: var(--line); }
.vendor-offer .vendor-name { font-weight: 600; }
.user-chip { border-radius: 12px; border-color: var(--line-strong); font-weight: 550; }
.user-avatar { border-radius: 9px; background: var(--violetSoft); color: var(--violet); font-weight: 600; }

.founder-card {
  background: var(--surface);
  border-radius: var(--r3);
  border-color: var(--line);
  box-shadow: var(--shadow-card);
  padding: 30px;
}
.founder-photo { border-radius: var(--r2); border-color: var(--line); height: auto; }
.founder-role { font-weight: 650; }
.founder-link { border-radius: 12px; border-color: var(--line-strong); font-weight: 550; }

footer { background: var(--surface); border-color: var(--line); }
.footer-grid p, .footer-grid a, .footer-grid span { font-size: 13px; }
.footer-col strong { letter-spacing: .12em; font-weight: 700; }

.compare-dock { background: var(--inverse-bg); color: var(--inverse-ink); border-radius: var(--r); }
.toast { background: var(--inverse-bg); color: var(--inverse-ink); border-radius: 12px; font-size: 13px; }

/* The theme toggle in the header. */
.mono-btn { display: inline-grid; place-items: center; padding: 0; width: 41px; height: 41px; }
.mono-ico { width: 17px; height: 17px; display: block; color: var(--ink); }
:root[data-theme="dark"] .mono-ico { color: var(--ink); }
:root[data-theme="dark"] .mono-btn { background: var(--surface2); color: var(--ink); border-color: var(--line-strong); }

/* ---------- 11. Mobile --------------------------------------------------- */
@media (max-width: 1020px) {
  .capabilities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .hero-x h1 { max-width: none; }
}
@media (max-width: 680px) {
  .hero-x { padding: 40px 0 18px; }
  .hero-x h1 { font-size: clamp(34px, 9vw, 44px); margin: 14px 0 16px; }
  .hero-x p { font-size: 15px; }
  .describe { padding: 16px; border-radius: var(--r2); }
  .capabilities { grid-template-columns: 1fr; }
  .loop { padding: 18px; border-radius: var(--r2); }
  .loop-chip { padding: 7px 12px; font-size: 11.5px; }
  .loop-arrow { display: none; }
  .panel { padding: 20px; border-radius: var(--r2); }
  .cta { padding: 30px 22px; }
  .founder-card { padding: 18px; }
  .boot-mark { width: 86px; height: 86px; }
  .boot-word { font-size: 26px; }
  .nav { height: 62px; }
  .brand-main { font-size: 24px; }
  /* Keep the mono toggle reachable on a phone even though the other
     secondary buttons collapse into the menu. */
  .nav-actions .mono-btn { display: inline-grid !important; }
}


/* ---------- 13. Homepage layout -----------------------------------------
   The hero is two columns: the argument on the left, the thing you actually
   do on the right. Below it the page alternates full-width bands (loop,
   evidence, teaser) so nothing reads as a wall of equal cards.            */
.hero-split {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 52px;
  align-items: start;
  padding: 58px 0 10px;
}
.hero-copy h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(44px, 5.1vw, 74px);
  line-height: 1.04;
  letter-spacing: -.028em;
  margin: 16px 0 20px;
}
.hero-copy h1 em { font-style: normal; color: var(--violet); }
.hero-copy p { font-size: 19px; line-height: 1.65; color: var(--muted); max-width: 48ch; margin: 0; }
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; margin: 26px 0 18px; }
.hero-cta .btn { padding: 15px 24px; font-size: 15.5px; text-decoration: none; display: inline-flex; align-items: center; }
.hero-note {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 52ch;
}
.hero-note .ico { width: 14px; height: 14px; flex: 0 0 14px; margin-top: 2px; color: var(--muted); }

/* The describe card. Its own head, one field, the examples, then the action —
   read top to bottom, no competing buttons. */
.describe-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 16px;
}
.describe-head .ico { width: 17px; height: 17px; color: var(--violet); }
.describe-head strong { font-size: 16px; font-weight: 650; }
.describe-label-sub { margin-top: 16px; }
.describe .search-help { margin-top: 8px; }
.describe-go { width: 100%; margin-top: 16px; padding: 16px; font-size: 15.5px; }
.describe-note {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
}
.describe #analyzeStatus:not(:empty) { margin-top: 10px; }

/* ---- evidence cards ---- */
.evidence-four { padding: 58px 0 6px; }
.evidence-four h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(32px, 3.7vw, 48px);
  line-height: 1.08;
  letter-spacing: -.024em;
  margin: 0 0 28px;
}
.evidence-four .capabilities { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 0; }
.cap .ico { width: 18px; height: 18px; color: var(--violet); margin-bottom: 12px; display: block; }
.evidence-also {
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 78ch;
}

/* ---- product page teaser ---- */
.teaser {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 48px;
  align-items: center;
  padding: 62px 0 10px;
}
.teaser-copy h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.08;
  letter-spacing: -.024em;
  margin: 0 0 16px;
}
.teaser-copy p { font-size: 18px; line-height: 1.7; color: var(--muted); margin: 0 0 20px; max-width: 38ch; }
.teaser-link { font-size: 14.5px; font-weight: 650; color: var(--violet); text-decoration: none; }
.teaser-link:hover { text-decoration: underline; }
.teaser-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  padding: 28px;
  box-shadow: var(--shadow2);
}
.teaser-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.teaser-kicker { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--muted); }
.teaser-name {
  font-family: var(--display);
  font-size: 30px;
  line-height: 1.1;
  margin-top: 8px;
  color: var(--ink);
}
.teaser-price { font-family: var(--display); font-size: 27px; color: var(--ink); white-space: nowrap; }
.teaser-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 22px 0 0; }
.teaser-cell { border: 1px solid var(--line); background: var(--surface2); border-radius: 12px; padding: 15px; }
.teaser-cell span { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.teaser-cell strong { display: block; margin-top: 7px; font-size: 15px; font-weight: 600; }
.teaser-note {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 15px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted);
}

/* ---- the .edu panel ---- */
.edu-cta-wrap { padding: 66px 0 10px; }
.edu-cta {
  background: var(--inverse-bg);
  border-radius: var(--r3);
  padding: 44px 46px;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 44px;
  align-items: center;
  box-shadow: var(--shadow);
}
.edu-cta h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(32px, 3.7vw, 46px);
  line-height: 1.08;
  letter-spacing: -.024em;
  color: var(--inverse-ink);
  margin: 0 0 14px;
}
.edu-cta p { color: var(--dark-text); font-size: 17px; line-height: 1.7; margin: 0; max-width: 46ch; }
.edu-cta-form { display: grid; gap: 10px; }
.edu-cta-form label { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dark-text); font-weight: 700; }
.edu-cta-form input {
  border: 1px solid var(--dark-line);
  background: var(--dark-surface);
  color: var(--inverse-ink);
  border-radius: 14px;
  padding: 15px 16px;
  font-size: 17px;
  outline: 0;
}
.edu-cta-form input::placeholder { color: #7C7990; }
.edu-cta-form input:focus { border-color: var(--violet2); box-shadow: 0 0 0 3px rgba(255, 255, 255, .08); }
.edu-cta-form .btn { padding: 15px; font-size: 15.5px; }

/* ---- responsive ---- */
@media (max-width: 1080px) {
  .evidence-four .capabilities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .hero-split { grid-template-columns: 1fr; gap: 30px; padding-top: 44px; }
  .hero-copy p, .hero-note { max-width: none; }
  .teaser { grid-template-columns: 1fr; gap: 26px; }
  .teaser-copy p { max-width: none; }
  .edu-cta { grid-template-columns: 1fr; gap: 26px; padding: 34px; }
}
@media (max-width: 680px) {
  .hero-split { padding-top: 34px; gap: 24px; }
  .hero-copy h1 { font-size: clamp(30px, 8.4vw, 40px); }
  .hero-cta { margin: 20px 0 14px; }
  .hero-cta .btn { flex: 1 1 100%; justify-content: center; }
  .evidence-four { padding: 42px 0 4px; }
  .evidence-four .capabilities { grid-template-columns: 1fr; }
  .teaser { padding: 42px 0 4px; }
  .teaser-card { padding: 18px; border-radius: var(--r2); }
  .teaser-card-top { flex-direction: column; gap: 10px; }
  .teaser-name { font-size: 22px; }
  .teaser-split { grid-template-columns: 1fr; }
  .edu-cta-wrap { padding: 44px 0 6px; }
  .edu-cta { padding: 24px; border-radius: var(--r2); }
}


/* ---------- 12. Colours the older stylesheets hardcoded --------------------
   base.css and app.css set a few tints as literals rather than tokens, so the
   remap in section 2 cannot reach them. Routing them through tokens here is
   what makes monochrome mode complete rather than nearly complete.         */
.banner { background: var(--warnSoft); border-color: var(--warnLine); color: var(--warnInk); }
.banner.error { background: var(--redSoft); border-color: var(--redSoft); color: var(--red); }
.banner.ok { background: var(--greenSoft); border-color: var(--greenSoft); color: var(--green); }

.layers p, .compare-dock span, .score span { color: var(--dark-text); }
.layer-card .n { color: var(--violet2); }

.ai, .ai-chip, .issue-tags label, .badge.violet { border-color: var(--violet-line); }
.badge.green, .verify-card { border-color: var(--greenSoft); }
.badge.amber { border-color: var(--amberSoft); }
.badge.red { border-color: var(--redSoft); }
.mfr-box { border-color: var(--violet-line); background: var(--surface2); }
.hero-card { background: var(--surface); border-color: var(--line); }

.bar { background: var(--surface2); }
.table td, .history-row { border-color: var(--line); }
.cat { color: var(--muted); }

.card-actions button.active { border-color: var(--violet-line); background: var(--violetSoft); color: var(--violet); }
.open:hover, .mini-card.clickable:hover, .founder-link:hover { border-color: var(--line-strong); }
.review p { color: var(--ink-soft); }

/* base.css normalises colour on button/input/select/textarea but not on <a>,
   so an anchor wearing .btn inherits the browser's link blue. */
a.btn, a.btn:visited { color: var(--ink); text-decoration: none; }
a.btn.violet { color: var(--violet-ink); }
a.btn.primary { color: var(--inverse-ink); }


/* ---------- 14. Type floors ---------------------------------------------
   Nothing on the page reads below 12px, and small text gets leading rather
   than being packed tight. These rules catch the older stylesheets, which set
   several body sizes at 9-11px with 1.4-1.5 leading.                       */
.cat, .contextline, .card .ev-line, .section-note, .fp-notes,
.mini-card .meta, .list-row .meta, .price-note, .confidence-note,
.match .why, .sub ul, .kv span, .intel-cell span, .decision-chip span,
.layer-card p, .banner, .auth-note, .auth-copy p,
.review p, .profile-line span, .verify-card span {
  font-size: 13px;
  line-height: 1.65;
}
.tag, .chip, .badge, .pill, .category, .ev span, .money-grid span,
.price-stat span, .whatif label, .fp-grid label, .passport-grid label,
.inline-form label, .table th, .footer-col strong {
  font-size: 11px;
}
.ev strong, .money-grid strong, .price-stat strong, .metrics strong { letter-spacing: -.01em; }
.section-head p { font-size: 14px; line-height: 1.6; }
.layers p { font-size: 15px; line-height: 1.7; }
.layer-card h3 { font-size: 16px; }
.layer-card strong { font-size: 11px; line-height: 1.5; }
.layer-card .n { font-size: 11px; letter-spacing: .1em; }
.cta p { font-size: 16px; line-height: 1.7; }
.card h3, .match h3, .mini-card h3 { font-size: 17px; line-height: 1.35; }
.form label, .check { font-size: 13px; }
.code-row input { font-size: 24px; }

@media (max-width: 680px) {
  /* On a phone the two big serif headings are the only things that shrink;
     body copy keeps its size so it stays readable at arm's length. */
  .evidence-four h2 { margin-bottom: 20px; }
  .describe { padding: 18px; }
  .teaser-card { padding: 20px; }
  .loop { padding: 20px; }
}

/* The footer size rule above is `.footer-grid span`, which outranks
   `.brand-main` and was shrinking the footer wordmark to body size. */
.footer-grid .brand-main { font-size: 20px; line-height: 1; }
.footer-grid .brand { gap: 8px; margin-bottom: 10px; }
.footer-grid .brand-mark { width: 22px; height: 22px; flex: 0 0 22px; }


/* ---------- 15. Type: self-hosted Fraunces + Inter Tight ------------------
   Both are variable fonts with a 100-900 weight axis, so one file per family
   covers every weight the site uses. Served from this domain: no third-party
   request on the critical path, and the type still arrives for a visitor who
   cannot reach Google. `swap` means text paints immediately in the fallback
   and re-renders when the face lands, rather than sitting invisible.       */
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Tight";
  src: url("/assets/fonts/inter-tight-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body { font-optical-sizing: auto; text-rendering: optimizeLegibility; }

/* Balanced headings are the single biggest perceived-quality win in type:
   the browser evens out the lines instead of leaving one orphan word. */
h1, h2, .hero-copy h1, .evidence-four h2, .teaser-copy h2, .edu-cta h2,
.section-head h2, .layers h2, .cta h2, .modal h2, .auth-copy h2,
.founder-copy h2, .panel-head h2 {
  text-wrap: balance;
}
p, .cap span, .meta, .describe-note, .evidence-also, .teaser-note, .loop p {
  text-wrap: pretty;
}

/* Figures line up in columns, so they read as data rather than as words. */
.table td.num, .table input.num, .money-grid strong, .price-stat strong,
.metrics strong, .ev strong, .bar-row .num, .teaser-price, .stats-strip b {
  font-variant-numeric: tabular-nums;
}

/* Fraunces is a display face: it wants tighter tracking as it gets bigger,
   and it should never be asked to set small text. */
.teaser-name, .teaser-price { font-family: var(--display); letter-spacing: -.022em; }
.boot-word { font-weight: 500; letter-spacing: -.01em; }
.brand-main { font-weight: 600; letter-spacing: -.022em; }

@media (max-width: 680px) {
  body { font-size: 16.5px; }
  .hero-copy h1 { font-size: clamp(33px, 8.8vw, 44px); letter-spacing: -.018em; }
  .hero-copy p { font-size: 17px; }
  .evidence-four h2, .edu-cta h2 { font-size: clamp(27px, 7.4vw, 34px); }
  .teaser-copy h2 { font-size: clamp(26px, 7vw, 33px); }
  .teaser-name { font-size: 25px; }
  .teaser-price { font-size: 23px; }
  .cap strong { font-size: 16px; }
  .cap span { font-size: 14px; }
}


/* ---------- 16. Weight -----------------------------------------------------
   Inter Tight is a variable face, so 450/500/550 are real instances rather
   than a browser faking an in-between. Using them means body copy can sit a
   little heavier than 400 without jumping to the blockiness of 500.       */
p, .cap span, .meta, .evidence-also, .loop p, .teaser-copy p, .edu-cta p,
.hero-copy p, .hero-note, .describe-note, .teaser-note, .layers p, .cta p {
  font-weight: 450;
}
strong, b { font-weight: 650; }
.teaser-name, .teaser-price { font-weight: 600; }
.stats-strip b { font-weight: 650; }
.pill, .badge, .category, .tag { font-weight: 650; }
.table th { font-weight: 700; }
.code-row input { font-weight: 650; }
.evidence-four h2, .teaser-copy h2, .edu-cta h2, .hero-copy h1 { font-synthesis: none; }


/* ---------- 17. Ambient canvas ------------------------------------------
   A flat fill reads as unfinished at this size. Three very large, very soft
   blooms give the page depth, and a faint grid that fades as it descends
   gives it a sense of structure. Both are painted by pseudo-elements on
   <html> at z-index -1: above the canvas, below every element, and outside
   the layout, so nothing reflows and nothing can be clicked by accident.

   body must be transparent for this to show — base.css fills it with a light
   gradient of its own. */
html { background: var(--bg); }
body { background: transparent; }

html::before,
html::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
html::before {
  background:
    radial-gradient(44vmax 36vmax at 12% -8%, var(--glow-a), transparent 62%),
    radial-gradient(40vmax 32vmax at 94% 2%, var(--glow-b), transparent 60%),
    radial-gradient(52vmax 40vmax at 60% 44%, var(--glow-c), transparent 64%),
    radial-gradient(46vmax 34vmax at 26% 104%, var(--glow-d), transparent 62%);
  animation: ambient 54s ease-in-out infinite alternate;
  will-change: transform;
}
html::after {
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 76px 76px;
  -webkit-mask-image: radial-gradient(130% 78% at 50% -6%, #000 10%, transparent 74%);
          mask-image: radial-gradient(130% 78% at 50% -6%, #000 10%, transparent 74%);
}
@keyframes ambient {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-2.4%, 1.9%, 0) scale(1.07); }
}
@media (prefers-reduced-motion: reduce) {
  html::before { animation: none; }
}

/* ---------- 18. Dark theme: surfaces the older stylesheets fixed to white --
   base.css and app.css set a literal white on 52 selectors. They are listed
   explicitly rather than blanket-overridden so each one keeps the elevation
   it was given: cards and panels land on --surface, fields on --surface2. */
:root[data-theme="dark"] .ai-chip,
:root[data-theme="dark"] .cap,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .card-actions button,
:root[data-theme="dark"] .chip,
:root[data-theme="dark"] .close,
:root[data-theme="dark"] .decision-chip,
:root[data-theme="dark"] .describe,
:root[data-theme="dark"] .empty,
:root[data-theme="dark"] .feature-tab,
:root[data-theme="dark"] .filters,
:root[data-theme="dark"] .founder-card,
:root[data-theme="dark"] .founder-link,
:root[data-theme="dark"] .hero-card,
:root[data-theme="dark"] .history-wrap,
:root[data-theme="dark"] .issue-tags label,
:root[data-theme="dark"] .list-row,
:root[data-theme="dark"] .match,
:root[data-theme="dark"] .mfr-box,
:root[data-theme="dark"] .mini-card,
:root[data-theme="dark"] .mobile-nav a,
:root[data-theme="dark"] .modal,
:root[data-theme="dark"] .open,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .search-help button,
:root[data-theme="dark"] .table-wrap,
:root[data-theme="dark"] .tabs button,
:root[data-theme="dark"] .trust,
:root[data-theme="dark"] .user-chip,
:root[data-theme="dark"] .vendor-offer,
:root[data-theme="dark"] .verify-card b,
:root[data-theme="dark"] footer {
  background: var(--surface);
}
:root[data-theme="dark"] .code-row input,
:root[data-theme="dark"] .edu-input-wrap,
:root[data-theme="dark"] .ev,
:root[data-theme="dark"] .form input,
:root[data-theme="dark"] .form select,
:root[data-theme="dark"] .form textarea,
:root[data-theme="dark"] .fp-grid input,
:root[data-theme="dark"] .inline-form input,
:root[data-theme="dark"] .inline-form select,
:root[data-theme="dark"] .money-grid div,
:root[data-theme="dark"] .passport-grid input,
:root[data-theme="dark"] .passport-grid select,
:root[data-theme="dark"] .price-stat,
:root[data-theme="dark"] .searchbox,
:root[data-theme="dark"] .section-actions select,
:root[data-theme="dark"] .table input,
:root[data-theme="dark"] .table select,
:root[data-theme="dark"] .tag,
:root[data-theme="dark"] .whatif input {
  background: var(--surface2);
}
:root[data-theme="dark"] .describe textarea { background: var(--surface2); }
:root[data-theme="dark"] .describe textarea:focus { background: var(--surface); }
:root[data-theme="dark"] .search-help button { color: var(--muted); }
:root[data-theme="dark"] .modal::backdrop { background: rgba(0, 0, 0, .72); }
:root[data-theme="dark"] .edu-cta-form input { background: var(--surface2); }
:root[data-theme="dark"] .layer-card { background: var(--dark-surface); }
:root[data-theme="dark"] .founder-link .li { filter: grayscale(1) brightness(1.7); }
/* An <img> has no tokens; desaturate it so the portrait matches the theme. */
:root[data-theme="dark"] .founder-photo { filter: grayscale(1) contrast(1.05) brightness(.92); }

/* The eyebrow sits on the inverted band, where --muted only reaches 3.2:1. */
.layers .eyebrow { color: var(--violet2); }

/* ---------- 19. Administrator panel ---------------------------------------
   Denser than the rest of the site on purpose: this is a working surface for
   one person, not a page to be persuaded by.                              */
.admin-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 8px 0 22px;
}
.admin-stat {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--r);
  padding: 15px 16px;
}
.admin-stat strong {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.admin-stat span {
  display: block;
  margin-top: 5px;
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.admin-stat small { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); line-height: 1.5; }

.admin-list { display: grid; gap: 9px; }
.admin-row {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--r);
  padding: 15px 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: start;
}
.admin-row-main strong { font-size: 15.5px; font-weight: 650; display: block; }
.admin-row-main .meta { margin-top: 4px; }
.admin-row-main .tags { margin: 9px 0 0; }
.admin-row-actions { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.admin-row-actions .btn { padding: 9px 13px; font-size: 13px; }

/* The confirmation sits inside the row it is about, so it can explain what is
   attached instead of a browser dialog saying "are you sure". */
.admin-confirm {
  grid-column: 1 / -1;
  margin-top: 4px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
  display: grid;
  gap: 12px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.admin-confirm b { color: var(--ink); }
.admin-confirm-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-confirm .inline-form { margin: 0; }

.admin-form .admin-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
}
.admin-form .admin-grid label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  display: grid;
  gap: 6px;
}
.admin-form .admin-grid label.grow { grid-column: span 3; }
.admin-form .admin-grid input,
.admin-form .admin-grid select {
  border: 1px solid var(--line);
  background: var(--surface2);
  border-radius: 11px;
  padding: 11px 12px;
  font-size: 15px;
  font-weight: 450;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
}
.admin-note {
  margin-top: 14px;
  border: 1px solid var(--violet-line);
  background: var(--violetSoft);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}

@media (max-width: 1020px) { .admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .admin-form .admin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-form .admin-grid label.grow { grid-column: span 2; }
}
@media (max-width: 620px) {
  .admin-stats { grid-template-columns: 1fr 1fr; }
  .admin-row { grid-template-columns: 1fr; }
  .admin-row-actions { justify-content: flex-start; }
  .admin-form .admin-grid { grid-template-columns: 1fr; }
  .admin-form .admin-grid label.grow { grid-column: span 1; }
}

/* ---------- 19. Admin console --------------------------------------------
   Dense on purpose: this is a working surface, not a marketing page. It uses
   the same tokens as everything else, so it follows the theme toggle without
   a single colour of its own.                                              */
.admin-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 8px 0 20px;
}
.admin-tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px;
}
.admin-tile span {
  display: block;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.admin-tile strong {
  display: block;
  margin: 8px 0 3px;
  font-size: 26px;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.admin-tile small { display: block; font-size: 12px; color: var(--muted); }

.admin-table td { vertical-align: top; }
.admin-table tr.off { opacity: .55; }
.admin-row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.admin-row-actions .btn { padding: 7px 11px; font-size: 12.5px; }

/* Destructive actions.
   In the light theme red carries the warning. The dark theme is monochrome, so
   --red is a grey and red text there would read as DISABLED — the opposite of
   the intent. Dark therefore signals it by weight and by inverting on hover,
   and the confirm dialog does the actual protecting. */
.btn.admin-danger { color: var(--red); border-color: var(--line-strong); font-weight: 650; }
.btn.admin-danger:hover { background: var(--redSoft); border-color: var(--red); }
:root[data-theme="dark"] .btn.admin-danger { color: var(--ink); }
:root[data-theme="dark"] .btn.admin-danger:hover {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

.admin-form {
  border: 1px solid var(--violet-line);
  background: var(--violetSoft);
  border-radius: var(--r2);
  padding: 20px;
  margin: 0 0 18px;
  display: grid;
  gap: 14px;
}
.admin-form-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.admin-form-head strong { font-size: 15px; font-weight: 650; }
.admin-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.admin-form label { display: grid; gap: 6px; font-size: 12.5px; font-weight: 650; }
.admin-form input {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 11px;
  padding: 11px 12px;
  font-size: 14.5px;
  font-weight: 450;
}
.admin-form input:focus { outline: 0; border-color: var(--violet2); box-shadow: 0 0 0 3px var(--focus); }
.admin-form input.readonly { background: var(--surface2); color: var(--muted); cursor: not-allowed; }
.admin-form small { font-size: 11.5px; color: var(--muted); font-weight: 450; line-height: 1.45; }
.admin-locked { max-width: 60ch; }

/* Why the console refused you. Every colour is a token so the dark theme
   follows; nothing here is smaller than 12px. */
.admin-why {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.45;
}
.admin-why th,
.admin-why td {
  text-align: left;
  vertical-align: top;
  padding: 7px 0;
  border-top: 1px solid var(--line);
}
.admin-why th {
  width: 17rem;
  font-weight: 500;
  color: var(--muted);
}
.admin-why td { color: var(--ink); font-variant-numeric: tabular-nums; }

@media (max-width: 1080px) { .admin-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .admin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  {
  .admin-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-grid { grid-template-columns: 1fr; }
  .admin-form { padding: 16px; }
}