/* Self-hosted type (SIL Open Font License): Inter for interface and
   figures, Instrument Serif for headlines. */
@font-face { font-family: "Inter"; src: url("/fonts/inter-var-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/fonts/instrument-serif-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/fonts/instrument-serif-italic-latin.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

/* Theme: light by default; dark when the device prefers it, unless the
   visitor picked a theme (html[data-theme], set before first paint).
   The dark values appear twice on purpose: once for "system", once for an
   explicit choice. Keep the two blocks identical. */
:root {
  --paper: #f6f4ee;
  --card: #fffdf8;
  --ink: #15171a;
  --muted: #5b6066;
  --rule: #ddd7c8;
  --rule-strong: #15171a;
  --accent: #0a6b3b;
  --accent-ink: #ffffff;
  --accent-soft: #e3f0e6;
  --glow: rgba(10, 107, 59, 0.16);
  --row-hover: #efece2;
  /* Link colour inside the green masthead band: dark enough to read on
     --accent-soft, which is the band's background in both themes. */
  --band-ink: #0f4d2e;
  --header: rgba(246, 244, 238, 0.82);
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* Charts. Sector slots are a validated categorical set (colour-blind
     separation checked against these exact backgrounds); the green ramp is
     sequential, light to dark for "more". */
  --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100;
  --series-5: #e87ba4; --series-6: #008300; --series-7: #4a3aa7; --series-8: #e34948;
  --series-other: #a8a59b;
  --seq-100: #e2f1e6; --seq-200: #bfe1c9; --seq-300: #91c9a3; --seq-400: #5fae7e;
  --seq-500: #2f9159; --seq-600: #157444; --seq-700: #0b5a33;
  --tile-empty: #ebe7db; --tile-ink-low: #16181b; --tile-ink-high: #ffffff;
  --grid: #e8e3d6; --axis: #c9c3b3; --muted-ink: #6b685f;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0b0e11; --card: #12161b; --ink: #ecebe6; --muted: #98a0a8; --rule: #232a31;
    --rule-strong: #ecebe6; --accent: #5fd68f; --accent-ink: #06150c; --accent-soft: #10241a;
    --glow: rgba(95, 214, 143, 0.14); --row-hover: #171c22; --header: rgba(11, 14, 17, 0.78);
    --band-ink: #a8e6c1;
    --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500;
    --series-5: #d55181; --series-6: #008300; --series-7: #9085e9; --series-8: #e66767;
    --series-other: #6f6d66;
    --seq-100: #1b2d22; --seq-200: #1f4430; --seq-300: #245e3f; --seq-400: #2b7b51;
    --seq-500: #389a65; --seq-600: #58ba80; --seq-700: #8bd8a6;
    --tile-empty: #1a1f25; --tile-ink-low: #ecebe6; --tile-ink-high: #0c1a11;
    --grid: #232a31; --axis: #343c45; --muted-ink: #8d929a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0b0e11; --card: #12161b; --ink: #ecebe6; --muted: #98a0a8; --rule: #232a31;
  --rule-strong: #ecebe6; --accent: #5fd68f; --accent-ink: #06150c; --accent-soft: #10241a;
  --glow: rgba(95, 214, 143, 0.14); --row-hover: #171c22; --header: rgba(11, 14, 17, 0.78);
  --band-ink: #a8e6c1;
  --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500;
  --series-5: #d55181; --series-6: #008300; --series-7: #9085e9; --series-8: #e66767;
  --series-other: #6f6d66;
  --seq-100: #1b2d22; --seq-200: #1f4430; --seq-300: #245e3f; --seq-400: #2b7b51;
  --seq-500: #389a65; --seq-600: #58ba80; --seq-700: #8bd8a6;
  --tile-empty: #1a1f25; --tile-ink-low: #ecebe6; --tile-ink-high: #0c1a11;
  --grid: #232a31; --axis: #343c45; --muted-ink: #8d929a;
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* The masthead is sticky, so the real top of the readable page is below it.
   scroll-padding-top tells the browser that, which makes every anchor jump,
   every :target and every scrollIntoView land under the header instead of
   behind it — on this page's section index, and equally on #pipeline,
   #saved, #files, #compare and the rest. The height is measured in app.js
   because it grows when the navigation wraps. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--masthead-h, 76px) + 16px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.55 var(--sans);
}
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
a:hover { color: var(--accent); text-decoration-color: currentColor; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Masthead: sticky, frosted, with the theme switch */
.masthead { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--rule); background: var(--header); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); }
.masthead::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--accent), transparent 70%); }
.masthead-row { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; min-height: 60px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 8px; }
.masthead-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wordmark { font: 400 2.1rem/1 var(--serif); color: var(--ink); text-decoration: none; letter-spacing: -0.005em; display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; }
.theme-switch { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1px var(--rule); }
.theme-switch button { all: unset; cursor: pointer; width: 28px; height: 26px; display: grid; place-items: center; border-radius: 999px; color: var(--muted); }
.theme-switch button:hover { color: var(--ink); }
.theme-switch button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.theme-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.theme-switch svg { width: 15px; height: 15px; }
.no-js .theme-switch { display: none; }
.wordmark .mark { display: block; width: 44px; height: 44px; flex: none; }

/* The green band under the tall tier: every way of slicing the data, the
   Explore link, and the one figure in the header that changes. */
.band { background: var(--accent-soft); border-top: 1px solid var(--rule); }
.band-row { display: flex; align-items: center; gap: 18px; padding-top: 8px; padding-bottom: 8px; font-size: 0.93rem; }
.band-links { display: flex; align-items: center; gap: 18px; }
.band-row a { text-decoration: none; color: var(--band-ink); white-space: nowrap; }
.band-row a:hover, .band-row a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--accent); }
/* Outlined, not filled: the only filled button in the header is the one that
   takes you to the thing you pay for. */
.band-explore { padding: 3px 12px; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent) !important; font-weight: 600; font-size: 0.86rem; }
.band-explore:hover, .band-explore[aria-current="page"] { background: var(--accent); color: var(--accent-ink) !important; box-shadow: none !important; }
.band-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.band-live { display: inline-flex; align-items: center; gap: 8px; font-size: 0.86rem; color: var(--muted) !important; }
.band-live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.band-live b { color: var(--ink); font-weight: 600; }
.band-live:hover { box-shadow: none !important; }
.band-live:hover b { box-shadow: inset 0 -2px 0 var(--accent); }

/* Help and Settings: two utilities, one pair, a hair apart from the account
   button so they read as a group rather than three equal choices. */
.util { display: inline-flex; align-items: center; gap: 2px; }
.nav-icon { display: inline-flex; align-items: center; padding: 5px; line-height: 0; color: var(--muted); text-decoration: none; border-radius: 8px; }
.nav-icon svg { display: block; }
.nav-icon:hover, .nav-icon[aria-current="page"] { color: var(--accent); background: var(--accent-soft); }
.nav-icon[hidden] { display: none; }

/* Scrolled: the tall tier rolls away and the band carries a small wordmark
   and the account button, so nothing is ever more than a scroll from reach.
   Both are in the markup from the start; only their display changes. */
[data-stuck-only], .band .stuck-pro { display: none; }
.wordmark.mini { font-size: 1.1rem; gap: 9px; }
.wordmark.mini .mark { width: 24px; height: 24px; }
.masthead.is-stuck .masthead-row { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; }
.masthead.is-stuck [data-stuck-only] { display: inline-flex; }
.masthead.is-stuck .band .stuck-pro { display: inline-block; }
.masthead.is-stuck .band { border-top-color: transparent; }
.masthead.is-stuck .band-explore { font-size: 0.84rem; }
@media (prefers-reduced-motion: no-preference) {
  .masthead-row { transition: max-height 0.22s ease, opacity 0.16s ease, padding 0.22s ease; max-height: 180px; }
}
/* The count is the first thing to go when the band runs out of room: it is
   the only item there that nothing else depends on. */
@media (max-width: 1040px) { .band-live { display: none; } }

main { padding-top: 24px; padding-bottom: 56px; }
h1, h2 { font-family: var(--serif); letter-spacing: -0.01em; line-height: 1.15; }
h1 { font-size: clamp(2rem, 5vw, 3.1rem); margin: 0.2em 0 0.3em; }
h2 { font-size: 1.3rem; margin: 1.6em 0 0.6em; }
.lede { font-size: 1.12rem; color: var(--muted); max-width: 46rem; margin-top: 0; }
.crumbs { font-size: 0.85rem; color: var(--muted); }
.crumbs a { color: var(--muted); }

/* Stat strip */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 24px 0 8px; border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule); }
.stats > div { padding: 14px 16px 12px 0; }
.stats > div + div { padding-left: 16px; border-left: 1px solid var(--rule); }
.stats dt { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.stats dd { margin: 2px 0 0; font: 600 clamp(1.5rem, 4vw, 2.2rem)/1.1 var(--mono); font-variant-numeric: tabular-nums; color: var(--accent); }
.stats p { margin: 4px 0 0; font-size: 0.8rem; color: var(--muted); }
.asof { font-size: 0.88rem; color: var(--muted); }

.hero { margin-bottom: 8px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
.side { position: sticky; top: 16px; }
.side h2 { font-size: 1.05rem; }

/* The ledger table */
.tablewrap { overflow-x: auto; border-top: 1px solid var(--rule-strong); }
table.ledger { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.ledger caption { text-align: left; font-weight: 600; padding: 8px 0; }
.ledger th { text-align: left; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); font-weight: 600; padding: 10px 10px 8px 0; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.ledger th[data-sort] { cursor: pointer; user-select: none; }
.ledger th[data-sort]:hover { color: var(--ink); }
.ledger th[aria-sort="ascending"]::after { content: " ↑"; }
.ledger th[aria-sort="descending"]::after { content: " ↓"; }
.ledger td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.ledger tbody tr:hover { background: var(--row-hover); }
.ledger td:first-child a { font-weight: 600; text-decoration: none; }
.ledger td:first-child a:hover { text-decoration: underline; }
.ledger .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ledger th.num { font-family: var(--sans); }
.ledger td.amt { color: var(--accent); font-weight: 600; }
.ledger .dim { color: var(--muted) !important; font-weight: 400 !important; }
.empty { color: var(--muted); }

.filter { display: block; margin: 0 0 10px; }
.filter input { width: 100%; max-width: 360px; font: inherit; padding: 8px 12px; border: 1px solid var(--rule); border-radius: 6px; background: var(--card); color: var(--ink); }
.filter input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Chips */
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips a { display: inline-flex; gap: 6px; align-items: baseline; padding: 5px 10px; border: 1px solid var(--rule); border-radius: 999px; text-decoration: none; font-size: 0.9rem; background: var(--card); }
.chips a:hover { border-color: var(--accent); }
.chips span { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); }

/* Signup and calls to action */
.signup { background: var(--card); border: 1px solid var(--rule); border-top: 4px solid var(--accent); border-radius: 8px; padding: 18px; margin: 32px 0; }
.side .signup { margin-top: 0; }
.signup h2 { margin-top: 0; font-size: 1.15rem; }
.signup form { display: flex; gap: 8px; flex-wrap: wrap; }
.signup input { flex: 1 1 180px; min-width: 0; font: inherit; padding: 9px 12px; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); color: var(--ink); }
.signup button, .button { font: 600 0.95rem var(--sans); padding: 10px 16px; border: 0; border-radius: 6px; background: var(--accent); color: var(--accent-ink); cursor: pointer; text-decoration: none; display: inline-block; }
.signup button:hover, .button:hover { filter: brightness(1.08); color: var(--accent-ink); }
.fine, .note { font-size: 0.86rem; color: var(--muted); }
.pitch { border-top: 1px solid var(--rule); margin-top: 24px; }
.sponsor { font-size: 0.9rem; padding: 10px 14px; background: var(--accent-soft); border-radius: 6px; }
.more { font-size: 0.92rem; }

.pager { display: flex; justify-content: space-between; margin: 16px 0; font-size: 0.92rem; }
details.aside { margin: 28px 0; }
details.aside summary { cursor: pointer; font-weight: 600; margin-bottom: 10px; }

/* Company pages */
.company .where { color: var(--muted); margin: 0 0 12px; }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 24px; margin: 24px 0; border-top: 1px solid var(--rule-strong); }
.facts > div { padding: 10px 0; border-bottom: 1px solid var(--rule); }
.facts dt { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); }
.facts dd { margin: 2px 0 0; font-weight: 600; }

.selfdesc { margin: 0 0 8px; padding: 12px 16px; border-left: 3px solid var(--accent); background: var(--card); max-width: 46rem; }
.selfdesc p { margin: 0 0 6px; font-family: var(--serif); font-size: 1.05rem; }
.selfdesc footer { font-size: 0.82rem; color: var(--muted); }

/* Long-form pages */
.prose { max-width: 44rem; }
.prose li { margin-bottom: 6px; }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
.plans section { border: 1px solid var(--rule); border-radius: 8px; padding: 4px 18px 18px; background: var(--card); }
.plans .featured { border: 2px solid var(--accent); }

.footer { border-top: 1px solid var(--rule); font-size: 0.86rem; color: var(--muted); }
.footer-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2.4fr); gap: 32px; padding-top: 24px; padding-bottom: 32px; }
/* Grouped into columns by what the link is for, rather than one long stack
   mixing browsing, reading, account and legal together. */
.footer-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; align-content: start; }
.foot-col h2 { font: 600 0.78rem/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.foot-col a { font-size: 0.9rem; }
.foot-col .foot-pro { color: var(--accent); font-weight: 700; }
.foot-legal { margin: 12px 0 0; font-size: 0.82rem; color: var(--muted); }
.foot-legal a { color: var(--muted); }
@media (max-width: 900px) { .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; } }
.footer p { margin: 0; }

/* ---- Home: hero ---------------------------------------------------------- */
.hero2 { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 28px 0 36px; }
/* Full-bleed backdrop: a soft accent glow (the grid itself is fixed, below). */
.hero2::before { content: ""; position: absolute; z-index: -1; top: -24px; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
  background:
    radial-gradient(60% 70% at 78% 30%, var(--glow), transparent 70%),
    radial-gradient(40% 50% at 12% 10%, color-mix(in srgb, var(--glow) 60%, transparent), transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent);
  mask-image: linear-gradient(to bottom, #000 30%, transparent);
  opacity: 0.9; }
/* The ledger grid stays still while the page scrolls over it. Fades toward
   the bottom of the screen so long tables stay easy to read. */
body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(var(--rule) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, var(--rule) 1px, transparent 1px) 0 0 / 44px 44px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.18) 70%, rgba(0, 0, 0, 0.1));
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.18) 70%, rgba(0, 0, 0, 0.1)); }
@media print { body::before { display: none; } }
.hero2 h1 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; }
.herocard { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.kicker { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
.live { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); animation: pulse 2.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.hero2 h1 { font-size: clamp(2.6rem, 6.5vw, 4.4rem); margin: 0.1em 0 0.25em; line-height: 1.02; }
.hero2 h1 em { font-style: italic; color: var(--accent); }
.hero2 h1.long { font-size: clamp(2.2rem, 4.8vw, 3.4rem); line-height: 1.06; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.button.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); }
.button.ghost:hover { color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); filter: none; }
.herocard { background: var(--card); border: 1px solid var(--rule); border-radius: 14px; padding: 20px 20px 8px; box-shadow: 0 1px 0 var(--rule), 0 18px 40px -28px rgba(0, 0, 0, 0.35); }
.herocard .figure { font: 650 clamp(2.8rem, 6vw, 3.6rem)/1 var(--sans); letter-spacing: -0.02em; margin: 4px 0 6px; }
.herocard .sub { color: var(--muted); font-size: 0.92rem; margin: 0 0 6px; }
.minis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 4px; }
.minis div { background: var(--paper); border-radius: 8px; padding: 8px 10px; }
.minis dt { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); }
.minis dd { margin: 2px 0 0; font: 600 1.15rem var(--sans); }

/* ---- Ticker --------------------------------------------------------------- */
.ticker { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); overflow: hidden; white-space: nowrap; background: var(--card); font-size: 0.9rem; }
.ticker-track { display: inline-flex; gap: 0; animation: ticker 90s linear infinite; padding: 9px 0; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker a { text-decoration: none; padding: 0 22px; border-right: 1px solid var(--rule); }
.ticker b { font-weight: 650; }
.ticker .amt { color: var(--accent); font-family: var(--mono); }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker { overflow-x: auto; } .ticker-track { animation: none; } .live { animation: none; } }

/* ---- Sections, panels, cards ---------------------------------------------- */
.sect { margin: 40px 0 0; }

/* The posting desk: every section is work for a different site, and they
   used to run together into one wall. Each is now a card in that site's own
   colour, with the site named in the corner, so you can find "the LinkedIn
   one" by looking rather than by reading. */
.desk .sect[data-site] { position: relative; margin: 34px 0 0; padding: 0 0 18px; border: 1px solid var(--rule); border-top: 4px solid var(--site, var(--accent)); border-radius: 14px; background: var(--card); overflow: hidden; }
.desk .sect[data-site] > * { padding-left: 20px; padding-right: 20px; }
.desk .sect[data-site] > .sect-head { padding-top: 16px; margin-bottom: 14px; border-bottom: 1px solid var(--rule); padding-bottom: 12px; background: color-mix(in srgb, var(--site, var(--accent)) 7%, transparent); }
.desk .sect[data-site] > .sect-head h2 { color: var(--ink); }
.desk .sect[data-site]::after { content: attr(data-site-label); position: absolute; top: 14px; right: 18px; font: 700 0.64rem/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--site, var(--accent)); background: color-mix(in srgb, var(--site, var(--accent)) 14%, var(--card)); padding: 5px 9px; border-radius: 999px; }
.desk .sect[data-site] .post { border-left: 3px solid color-mix(in srgb, var(--site, var(--accent)) 40%, var(--rule)); }
/* Brand colours, only as an identifying stripe: never behind text. */
.desk .sect[data-site="x"] { --site: #6a7684; }
.desk .sect[data-site="linkedin"] { --site: #0a66c2; }
.desk .sect[data-site="reddit"] { --site: #ff4500; }
.desk .sect[data-site="hn"] { --site: #ff6600; }
.desk .sect[data-site="indiehackers"] { --site: #4799eb; }
.desk .sect[data-site="youtube"] { --site: #cc0000; }
/* A launch step is one site's job, so it carries that site's colour too and
   says which site in the corner, rather than six identical grey cards. */
.desk .launch-step[data-site] { position: relative; border-left: 4px solid var(--site, var(--rule)); }
.desk .launch-step[data-site] > header { padding-right: 110px; }
.desk .launch-step[data-site-label]:not([data-site-label=""])::after { content: attr(data-site-label); position: absolute; top: 12px; right: 14px; font: 700 0.62rem/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--site, var(--muted)); background: color-mix(in srgb, var(--site, var(--muted)) 14%, var(--card)); padding: 5px 9px; border-radius: 999px; }
.desk .launch-step[data-site="reddit"] { --site: #ff4500; }
.desk .launch-step[data-site="linkedin"] { --site: #0a66c2; }
.desk .launch-step[data-site="hn"] { --site: #ff6600; }
.desk .launch-step[data-site="indiehackers"] { --site: #4799eb; }
.desk .launch-step[data-site="mixed"] { --site: var(--muted); }
/* The reply queue mixes X and Hacker News, and they need different things
   doing, so each item says which it is. */
.desk .reply-item[data-site] { position: relative; border-left: 4px solid var(--site, var(--rule)); }
.desk .reply-item[data-site] > header { padding-right: 112px; }
.desk .reply-item[data-site]::after { content: attr(data-site-label); position: absolute; top: 12px; right: 14px; font: 700 0.62rem/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--site, var(--muted)); background: color-mix(in srgb, var(--site, var(--muted)) 14%, var(--card)); padding: 5px 9px; border-radius: 999px; }
.desk .reply-item[data-site="x"] { --site: #6a7684; }
.desk .reply-item[data-site="hn"] { --site: #ff6600; }
.desk .reply-thread { margin: 0 0 4px; color: var(--muted); }
@media (max-width: 640px) {
  .desk .reply-item[data-site] > header { padding-right: 0; }
  .desk .reply-item[data-site]::after { position: static; display: inline-block; margin-bottom: 8px; }
}
@media (max-width: 640px) {
  .desk .launch-step[data-site] > header { padding-right: 0; }
  .desk .launch-step[data-site-label]:not([data-site-label=""])::after { position: static; display: inline-block; margin-bottom: 8px; }
}
@media (max-width: 640px) {
  .desk .sect[data-site] > * { padding-left: 12px; padding-right: 12px; }
  .desk .sect[data-site]::after { position: static; display: inline-block; margin: 14px 0 0 12px; }
  .desk .sect[data-site] > .sect-head { padding-top: 10px; }
}
.sect-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--rule-strong); padding-bottom: 6px; margin-bottom: 16px; }
.sect-head h2 { margin: 0; font-size: 1.45rem; }
.sect-head p { margin: 0; color: var(--muted); font-size: 0.88rem; }
.panels { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; }
.panel { background: var(--card); border: 1px solid var(--rule); border-radius: 12px; padding: 16px 18px; min-width: 0; }
.panel h3 { margin: 0 0 2px; font: 600 1.02rem var(--sans); }
.panel .note { margin: 0 0 10px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.card { position: relative; background: var(--card); border: 1px solid var(--rule); border-radius: 12px; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
.card { overflow: hidden; }
.card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.2s ease; background: radial-gradient(120% 80% at 100% 0%, var(--glow), transparent 60%); }
.card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 70%, var(--rule)); box-shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.55), 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent); }
.card:hover::before { opacity: 1; }
.card .tag { font-size: 0.78rem; color: var(--muted); display: flex; align-items: center; }
.card .amount { font: 650 1.9rem/1.1 var(--sans); letter-spacing: -0.01em; margin-top: 4px; }
.card .name { font: 600 1.08rem/1.25 var(--serif); display: flex; align-items: center; gap: 10px; }
/* Company logos (or a lettered badge when there is none). The white tile keeps
   transparent logos legible in dark mode. */
.co-logo { flex: none; box-sizing: border-box; border-radius: 7px; object-fit: contain; background: #fff; border: 1px solid var(--rule); padding: 2px; }
.co-mono { display: inline-grid; place-items: center; padding: 0; background: var(--accent-soft); color: var(--accent); border-color: transparent; font: 700 0.85rem/1 var(--sans); }
h1.co-title { display: flex; align-items: center; gap: 14px; }
h1.co-title .co-logo { border-radius: 10px; padding: 3px; }
h1.co-title .co-mono { font-size: 1.35rem; padding: 0; }
/* "raised $5M" under the company name: part of the heading, the name stays the headline. */
h1.co-title .co-verb { display: block; font-size: 0.5em; line-height: 1.2; margin-top: 0.2em; color: var(--muted); }
.card .name a { text-decoration: none; }
.card .name a::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.card .where2 { font-size: 0.86rem; color: var(--muted); }
.card .blurb { font-size: 0.86rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; }
.card .rank { position: absolute; top: 12px; right: 14px; font: 600 0.78rem var(--mono); color: var(--muted); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; flex: none; vertical-align: 0.05em; }

/* ---- Charts --------------------------------------------------------------- */
.chart { width: 100%; height: auto; display: block; overflow: visible; font-family: var(--sans); }
.chart .grid { stroke: var(--grid); stroke-width: 1; }
.chart .base { stroke: var(--axis); stroke-width: 1; }
.chart .tick, .chart .xl { fill: var(--muted-ink); font-size: 12px; }
.chart .xl-now { fill: var(--ink); font-weight: 600; }
.chart .val { fill: var(--ink); font-size: 12.5px; font-weight: 600; }
.chart .bl { fill: var(--muted); font-size: 13px; }
.chart .col { fill: var(--seq-300); }
.chart .col-now { fill: var(--seq-600); }
.chart .hit { fill: transparent; cursor: pointer; }
.chart a:hover .col, .chart g:focus .col { fill: var(--seq-500); }
.chart a:hover path, .chart a:focus path { filter: brightness(1.08); }
.chart a:focus, .chart g:focus, .chart rect:focus { outline: none; }
.chart a:focus-visible .tile, .chart a:hover .tile { stroke: var(--ink); stroke-width: 2; }
.map .tile { fill: var(--tile-empty); }
/* Every tile carries both scales (c = number of raises, m = capital raised);
   the wrapper's class decides which one is painted, so switching between them
   needs no redraw. */
/* Scoped to .tile: these class names are on the label too, and without the
   .tile the shade was painted over the state abbreviation as well, which
   made half the labels vanish into their own tile. */
.map-by-count .map .tile.c1 { fill: var(--seq-200); } .map-by-count .map .tile.c2 { fill: var(--seq-300); } .map-by-count .map .tile.c3 { fill: var(--seq-400); }
.map-by-count .map .tile.c4 { fill: var(--seq-500); } .map-by-count .map .tile.c5 { fill: var(--seq-700); }
.map-by-money .map .tile.m1 { fill: var(--seq-200); } .map-by-money .map .tile.m2 { fill: var(--seq-300); } .map-by-money .map .tile.m3 { fill: var(--seq-400); }
.map-by-money .map .tile.m4 { fill: var(--seq-500); } .map-by-money .map .tile.m5 { fill: var(--seq-700); }
.map .tl { font-size: 12px; font-weight: 600; fill: var(--tile-ink-low); pointer-events: none; }
.map-by-count .map .tl.c0, .map-by-money .map .tl.m0 { fill: var(--muted-ink); font-weight: 400; }
.map-by-count .map .tl.c4, .map-by-count .map .tl.c5, .map-by-money .map .tl.m4, .map-by-money .map .tl.m5 { fill: var(--tile-ink-high); }
.map-by-count .legend-money, .map-by-money .legend-count { display: none; }
.map-switch { display: inline-flex; margin: 0 0 10px; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
.map-switch[hidden] { display: none; }
.map-switch .g-btn { border: 0; border-radius: 0; font-size: 0.85rem; padding: 6px 12px; background: var(--card); color: var(--ink); cursor: pointer; }
.map-switch .g-btn + .g-btn { border-left: 1px solid var(--rule); }
.map-switch .g-btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 0.8rem; color: var(--muted); margin-top: 10px; }
.lk { display: inline-flex; align-items: center; gap: 6px; }
.tile-key { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }
.tile-key.b1 { background: var(--seq-200); } .tile-key.b2 { background: var(--seq-300); } .tile-key.b3 { background: var(--seq-400); }
.tile-key.b4 { background: var(--seq-500); } .tile-key.b5 { background: var(--seq-700); }
#tip { position: fixed; z-index: 50; pointer-events: none; background: var(--ink); color: var(--paper); font: 500 0.82rem/1.35 var(--sans); padding: 7px 10px; border-radius: 7px; max-width: 260px; opacity: 0; transform: translateY(4px); transition: opacity 0.12s, transform 0.12s; }
#tip.on { opacity: 1; transform: none; }
details.table-view { margin-top: 10px; font-size: 0.86rem; }
details.table-view summary { cursor: pointer; color: var(--muted); }
.meter { height: 10px; border-radius: 5px; background: var(--seq-100); overflow: hidden; margin: 14px 0 6px; max-width: 46rem; }
.meter-fill { height: 100%; background: var(--seq-500); border-radius: 5px; }
.meter-cap { margin: 0; font-size: 0.86rem; color: var(--muted); }

/* ---- Finish ---------------------------------------------------------------- */
/* The hero backdrop is 100vw wide, which includes the scrollbar; clip it at
   the root so it never causes sideways scrolling. */
html, body { overflow-x: clip; }
body { -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01"; }
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.015em; }
h2 { font-size: 1.6rem; }
.sect-head h2 { font-size: 1.75rem; }
.card .name { font: 600 1.02rem/1.3 var(--sans); }
.card .amount, .herocard .figure, .stats dd, .minis dd { font-variant-numeric: normal; }
.new { display: inline-block; margin-left: 7px; padding: 1px 6px; border-radius: 999px; font: 700 0.62rem/1.5 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); vertical-align: 0.15em; }
.ledger tbody tr { transition: background-color 0.12s; }
/* Pinned under the masthead, whose height now changes: tall at the top of
   the page, just the band once it collapses. public/app.js keeps the
   measurement current; 61px is only the pre-JS fallback. */
.ledger thead th { position: sticky; top: var(--masthead-h, 61px); background: var(--paper); z-index: 1; }
.panel, .herocard, .card, .signup { box-shadow: 0 1px 0 color-mix(in srgb, var(--rule) 60%, transparent); }
.button { border-radius: 8px; transition: transform 0.12s ease, filter 0.12s ease; }
.button:hover { transform: translateY(-1px); }
/* Sections rise in as they scroll into view (only when JavaScript runs). */
.reveal-armed .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.reveal-armed .reveal.in { opacity: 1; transform: none; }
.footer { background: var(--card); margin-top: 48px; }
.footer .brand { display: flex; align-items: center; gap: 9px; font: 400 1.35rem var(--serif); color: var(--ink); margin-bottom: 8px; }
@media (prefers-reduced-motion: reduce) {
  .reveal-armed .reveal { opacity: 1; transform: none; transition: none; }
  .card, .button { transition: none; }
}

/* ---- Press badges ---------------------------------------------------------------- */
.quiet { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px; font: 600 0.62rem/1.6 var(--sans); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); background: color-mix(in srgb, var(--series-4) 22%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--series-4) 45%, transparent); vertical-align: 0.12em; white-space: nowrap; }
.press { margin: 14px 0 4px; padding: 10px 14px; border-radius: 10px; background: var(--card); box-shadow: inset 0 0 0 1px var(--rule); font-size: 0.92rem; max-width: 46rem; }
.context { list-style: none; margin: 14px 0 4px; padding: 0; display: grid; gap: 6px; max-width: 46rem; font-size: 0.92rem; }
.context li { padding: 10px 14px; border-radius: 10px; background: var(--card); box-shadow: inset 3px 0 0 var(--accent), inset 0 0 0 1px var(--rule); }
.press-quiet { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--series-4) 80%, transparent), inset 0 0 0 1px var(--rule); }

/* ---- Posting desk (private page) ------------------------------------------------ */
.desk .post { background: var(--card); border: 1px solid var(--rule); border-radius: 12px; padding: 14px 16px; margin: 0 0 12px; }
.desk .post header { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; margin-bottom: 8px; }
.desk .kind { font: 600 0.78rem var(--sans); text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); }
.desk .post-part + .post-part { border-top: 1px dashed var(--rule); margin-top: 10px; padding-top: 10px; }
.desk .post-text { white-space: pre-wrap; word-break: break-word; font: 0.95rem/1.5 var(--sans); margin: 0 0 10px; color: var(--ink); }
.desk .post-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.desk .post-actions .button { padding: 7px 12px; font-size: 0.85rem; }
.desk .count { font: 0.8rem var(--mono); color: var(--muted); margin-left: auto; }
.desk .count.over { color: #d03b3b; font-weight: 700; }
.desk details.sect > summary { cursor: pointer; margin-bottom: 12px; }
.desk .routine li { margin-bottom: 8px; }
/* Reply queue */
.desk .reply-story { margin: 0 0 10px; font-weight: 600; line-height: 1.35; }
.desk .reply-story a:first-child { color: var(--ink); }
.desk .reply-item .kind { text-transform: none; letter-spacing: 0; font-size: 0.85rem; }
/* Follow list */
.desk .follow-group { margin-top: 18px; }
.desk .follow-group h3 { margin: 0 0 2px; font: 600 1rem var(--sans); }
.desk .follow { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; }
.desk .follow li { background: var(--card); border: 1px solid var(--rule); border-radius: 8px; padding: 8px 10px; display: grid; gap: 1px; }
.desk .follow a { font: 600 0.95rem var(--mono); }
.desk .follow li > span:not(.fine) { font-weight: 600; font-size: 0.9rem; }
/* Posting calendar */
.desk .cal-next { margin: 0 0 20px; padding: 12px 14px; border-radius: 10px; background: var(--accent-soft); border-left: 3px solid var(--accent); }
.desk .cal-next .fine { display: block; margin-top: 2px; }
.desk .cal-week + .cal-week { margin-top: 18px; }
.desk .cal-wk { font: 600 0.78rem var(--sans); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0 0 6px; }
.desk .cal-days { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.desk .cal-day { background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 8px; min-width: 0; }
.desk .cal-day.today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 6px 18px var(--glow); }
.desk .cal-day.past { opacity: 0.5; }
.desk .cal-date { margin: 0 0 6px; font: 600 0.8rem var(--sans); color: var(--muted); }
.desk .cal-date b { font: 400 1.35rem/1 var(--serif); color: var(--ink); margin-left: 2px; }
.desk .cal-day.today .cal-date span::after { content: " · today"; color: var(--accent); }
.desk .cal-note { margin: 0 0 6px; font-size: 0.75rem; color: var(--muted); font-style: italic; }
.desk .cal-day ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.desk .cal-item { font-size: 0.78rem; line-height: 1.3; padding: 5px 6px; border-radius: 6px; background: var(--paper); cursor: help; }
.desk .cal-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.desk .cal-item time { display: block; font: 600 0.72rem var(--mono); color: var(--accent); }
.desk .cal-item.launch { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
.desk .cal-item.past { text-decoration: line-through; text-decoration-color: var(--muted); opacity: 0.6; }
@media (max-width: 720px) {
  .desk .cal-days { grid-template-columns: 1fr; }
  .desk .cal-day.past { display: none; }
  .desk .cal-date b { font-size: 1.1rem; }
}
/* Posted (remembered in this browser): the card goes dark, the button greys out. */
.desk .post { transition: background-color 0.25s ease, border-color 0.25s ease; }
.desk .post.is-posted { background: color-mix(in srgb, var(--card), #000 42%); border-color: transparent; }
.desk .post-part.is-posted .post-text, .desk .post.is-posted .kind, .desk .post.is-posted header .fine { opacity: 0.45; }
.desk .post-part.is-posted .count { opacity: 0.45; }
.desk .button.is-used, .desk .button.is-used:hover { background: var(--rule); color: var(--muted); box-shadow: none; filter: none; transform: none; cursor: default; }
.desk .posted-stamp { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin: 10px 0 0; padding: 7px 10px; border-radius: 8px; background: var(--paper); color: var(--ink); font: 600 0.85rem var(--sans); }
.desk .posted-stamp .fine { font-weight: 400; color: var(--muted); }
.desk .posted-stamp .link { margin-left: auto; background: none; border: 0; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer; }
.desk .posted-stamp.nudge { animation: nudge 0.4s ease; }
@keyframes nudge { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .desk .posted-stamp.nudge { animation: none; outline: 2px solid var(--accent); } }
.banner-preview { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--rule); margin-top: 8px; }

/* ---- Pro Plus waitlist -------------------------------------------------------- */
/* Pro page: tiers and the sample alert */
.pro-hero { max-width: 48rem; margin: 8px 0 28px; }
.pro-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.3rem); line-height: 1.04; margin: 0.15em 0 0.35em; }
.tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: stretch; margin: 0 0 40px; }
.tier { position: relative; display: flex; flex-direction: column; padding: 20px 18px 18px; border-radius: 16px; background: var(--card); border: 1px solid var(--rule); }
.tier h2 { margin: 0; font: 600 1.05rem var(--sans); letter-spacing: 0.01em; }
.tier .price { margin: 6px 0 2px; font: 400 2.6rem/1 var(--serif); color: var(--ink); }
.tier .price span { font: 500 0.9rem var(--sans); color: var(--muted); margin-left: 3px; }
.tier .price-alt { margin: 2px 0 4px; font-size: 0.85rem; color: var(--accent); font-weight: 600; }
.tier .yearly, .pitch .yearly { display: block; margin-top: 10px; text-align: center; font-size: 0.88rem; font-weight: 600; }
.tier .for { margin: 0 0 14px; font-size: 0.88rem; color: var(--muted); }
.tier ul { list-style: none; margin: 0 0 18px; padding: 0; display: grid; align-content: start; gap: 9px; font-size: 0.9rem; flex: 1; }
.tier li { position: relative; padding-left: 22px; line-height: 1.4; }
.tier li::before { content: ""; position: absolute; left: 2px; top: 0.42em; width: 10px; height: 6px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.tier .button { text-align: center; }
.tier .fine { margin: 8px 0 0; text-align: center; }
.tier.featured { border: 2px solid var(--accent); box-shadow: 0 18px 50px -18px var(--glow), 0 0 0 6px color-mix(in srgb, var(--accent) 8%, transparent); }
.tier .badge { position: absolute; top: -11px; left: 18px; margin: 0; padding: 3px 10px; border-radius: 999px; font: 600 0.72rem var(--sans); letter-spacing: 0.06em; text-transform: uppercase; background: var(--accent); color: var(--accent-ink); }
.tier .badge.soft { background: var(--paper); color: var(--muted); box-shadow: inset 0 0 0 1px var(--rule); }
.new-tag { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 4px; font: 700 0.66rem var(--sans); letter-spacing: 0.05em; text-transform: uppercase; vertical-align: 1px; background: var(--accent-soft); color: var(--accent); }
@media (max-width: 1000px) { .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; } }
@media (max-width: 560px) { .tiers { grid-template-columns: 1fr; } .tier.featured { order: -1; } }

.mail { margin: 0 0 14px; max-width: 46rem; border-radius: 16px; background: var(--card); border: 1px solid var(--rule); box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.45); overflow: hidden; }
.mail-head { display: flex; gap: 12px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--rule); background: var(--paper); }
.mail-dot { width: 34px; height: 34px; border-radius: 50%; flex: none; background: var(--accent) url("/logo-mark.png") center / 22px no-repeat; }
.mail-from { margin: 0; font: 600 0.9rem var(--sans); }
.mail-subj { margin: 1px 0 0; font-size: 0.88rem; color: var(--muted); }
.mail-intro { margin: 14px 18px 4px; font-size: 0.92rem; }
.mail-rows { list-style: none; margin: 0; padding: 4px 18px 6px; }
.mail-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.mail-rows li:last-child { border-bottom: 0; }
.mail-co { display: flex; flex-direction: column; min-width: 0; }
.mail-co a { font-weight: 600; color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-co a:hover { color: var(--accent); }
.mail-co span { font-size: 0.82rem; color: var(--muted); }
.mail-amt { margin: 0; font: 600 1rem var(--mono); align-self: center; }
.mail-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px; }
.mail-chips:empty { display: none; }
.chip { padding: 2px 8px; border-radius: 999px; font: 600 0.72rem var(--sans); background: var(--paper); color: var(--muted); box-shadow: inset 0 0 0 1px var(--rule); }
.chip-first { background: var(--accent-soft); color: var(--accent); box-shadow: none; }
.chip-open { color: var(--ink); }
.chip-quiet { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--series-4) 70%, transparent); }
.mail figcaption { padding: 12px 18px; font-size: 0.85rem; color: var(--muted); background: var(--paper); border-top: 1px solid var(--rule); }

.chip-hiring { background: color-mix(in srgb, var(--series-1) 16%, transparent); color: var(--ink); box-shadow: none; }
.hiring { margin: 14px 0 4px; max-width: 46rem; padding: 16px 18px; border-radius: 14px; background: var(--card); border: 1px solid var(--rule); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 26px; }
.hiring-head { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.hiring-head .fine { margin: 0; }
.hiring-count { margin: 0; font-size: 1rem; }
.hiring-count b { font: 400 2rem/1 var(--serif); margin-right: 4px; }
.hiring-bars, .hiring-roles { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; align-content: start; font-size: 0.86rem; }
.hiring-bars li { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) 2rem; align-items: center; gap: 8px; }
.hiring-bars i { display: block; height: 8px; width: var(--w); border-radius: 0 4px 4px 0; background: var(--accent); }
.hiring-bars b { font: 600 0.8rem var(--mono); text-align: right; }
.hiring-roles li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hiring-roles li span, .hiring-roles .more { color: var(--muted); }
@media (max-width: 640px) { .hiring { grid-template-columns: 1fr; } }
.card-flags { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0 0; }
.pro-band { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; align-items: center; margin: 48px 0; padding: 30px; border-radius: 20px; background: var(--card); border: 1px solid var(--rule); overflow: hidden; }
.pro-band::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 80% at 0% 100%, var(--glow), transparent 65%); }
.pro-band > * { position: relative; }
.pro-band h2 { margin: 0.15em 0 0.4em; font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1.08; }
.pro-band p { color: var(--muted); }
.pro-band .pro-band-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.pro-band .mail { margin: 0; transform: rotate(0.6deg); }
.pro-band .mail figcaption { display: none; }
@media (max-width: 860px) { .pro-band { grid-template-columns: 1fr; padding: 22px 16px; } .pro-band .mail { transform: none; } }

.plus { position: relative; margin: 40px 0 8px; padding: 26px 24px 22px; border-radius: 16px; background: var(--card); border: 1px solid var(--rule); overflow: hidden; }
.plus::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 90% at 100% 0%, var(--glow), transparent 60%); }
.plus > * { position: relative; }
.plus h2 { margin: 0.1em 0 0.3em; font-size: clamp(1.7rem, 3.5vw, 2.3rem); }
.roles { border: 0; padding: 0; margin: 18px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.role { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); cursor: pointer; transition: box-shadow 0.15s; }
.role:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 60%, var(--rule)); }
.role:has(input:checked) { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-soft); }
.role input { margin-top: 4px; accent-color: var(--accent); }
.role-body { display: flex; flex-direction: column; gap: 3px; font-size: 0.88rem; color: var(--muted); }
.role-body strong { color: var(--ink); font-size: 0.97rem; }
.plus-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px; margin: 10px 0; align-items: end; }
.plus-row label { display: flex; flex-direction: column; gap: 6px; font-size: 0.88rem; color: var(--muted); }
.plus-row select, .plus-row input[type="text"], .plus-row input[type="email"] { box-sizing: border-box; min-height: 42px; font: inherit; color: var(--ink); padding: 9px 12px; border-radius: 8px; border: 1px solid var(--rule); background: var(--paper); }
.plus-submit { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.waitlist-error { padding: 10px 14px; border-radius: 8px; background: color-mix(in srgb, #d03b3b 14%, var(--card)); color: var(--ink); }
@media (max-width: 640px) { .plus-row, .plus-submit { grid-template-columns: 1fr; } .plus { padding: 20px 16px; } }

/* ---- Company pages ---------------------------------------------------------- */
.co-head { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 32px; align-items: start; margin: 4px 0 22px; }
.co-head h1 { font-size: clamp(2.3rem, 5.2vw, 3.8rem); line-height: 1.02; margin: 0.15em 0 0.3em; overflow-wrap: anywhere; }
.co-head .kicker { text-transform: none; letter-spacing: 0; font-size: 0.92rem; }
.co-head .lede { font-size: 1.05rem; }
.co-raise .meter { margin: 10px 0 4px; }
.co-raise .meter-cap { font-size: 0.8rem; }
.share { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 18px 0 6px; font-size: 0.88rem; color: var(--muted); }
.share > span { margin-right: 4px; }
.share a, .share button { font: 600 0.85rem var(--sans); color: var(--ink); text-decoration: none; padding: 7px 12px; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1px var(--rule); cursor: pointer; border: 0; }
.share a:hover, .share button:hover { box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); }
.share button.done { color: var(--accent); }
.company .facts { margin-top: 10px; }

/* On phones the header wraps to several rows; let it scroll away rather
   than pinning a third of the screen. */
@media (max-width: 640px) {
  .masthead { position: relative; }
  /* The header scrolls away here rather than sticking, so a jump to an
     anchor needs no room left for it: --masthead-h is ~190px on a phone,
     which would drop the target most of a screen too low. */
  html { scroll-padding-top: 16px; }
  .ledger thead th { top: 0; }
  /* Compact: theme switch beside the wordmark, the menu on one swipeable
     line, then search. Three short rows instead of four or five. */
  .masthead-row { position: relative; gap: 8px 10px; padding-top: 8px; padding-bottom: 6px; }
  .masthead-right { width: 100%; gap: 8px; }
  .wordmark { font-size: 1.45rem; gap: 8px; }
  .wordmark .mark { width: 30px; height: 30px; }
  .theme-switch { position: absolute; top: 10px; right: var(--gutter, 16px); }
  /* Three short rows: the name, then the search, then what you do next.
     Beats the wider breakpoint's rule, which puts search last. */
  .masthead-right .search { order: -1; flex-basis: 100%; }
  .masthead-right .search input, .masthead-right .search input:focus { width: 100%; }
  /* Help and Settings to the far edge of their row, so the row reads as
     "what you do next" on the left and "help me" on the right. */
  .masthead-right .util { margin-left: auto; }
  /* The band becomes one swipeable line rather than four stacked rows; the
     count is the first thing to go, as it is on a narrow desktop window. */
  .band-row { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; gap: 14px; font-size: 0.9rem; padding-right: 28px; }
  .band-row::-webkit-scrollbar { display: none; }
  .band-row > *, .band-links a { flex: none; }
  .band-links { gap: 14px; }
  .band-live { display: none; }
  .band-right { margin-left: 0; }
  /* The tall tier is several rows here, so collapsing it would move the page
     under the reader's thumb. It scrolls away instead. */
  .masthead.is-stuck .masthead-row { max-height: none; opacity: 1; padding-top: 10px; padding-bottom: 8px; }
  .masthead.is-stuck [data-stuck-only], .masthead.is-stuck .band .stuck-pro { display: none; }
}

/* A sticky header sticks within its nearest scrolling box. The table wrapper
   scrolls sideways, so on wide screens (where tables fit) it must not be a
   scroll box, or the header lands 61px down, on top of the rows. */
@media (min-width: 901px) {
  .tablewrap { overflow-x: visible; }
}
@media (max-width: 900px) {
  .ledger thead th { top: 0; }
  .hero2, .panels, .co-head { grid-template-columns: 1fr; }
  .split { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .side { position: static; }
}
@media (max-width: 640px) {
  .ledger .wide { display: none; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats > div:nth-child(3) { display: none; }
  .plans, .footer-row { grid-template-columns: 1fr; }
}

/* Company page: funding since 2020 and placement agents */
.funding { margin: 14px 0 4px; max-width: 46rem; padding: 16px 18px; border-radius: 14px; background: var(--card); border: 1px solid var(--rule); }
.funding-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 8px; }
.funding-head .fine { margin: 0; }
.funding-total { margin: 0; }
.funding-total b { font: 400 2rem/1 var(--serif); margin-right: 4px; }
.ledger.compact td, .ledger.compact th { padding-top: 6px; padding-bottom: 6px; font-size: 0.88rem; }
.funding .ledger thead th { position: static; }
.agents { margin: 10px 0 0; font-size: 0.9rem; }

/* A short form that asks for more than an address: label above field, one
   per line. .signup is a single inline row and crowds anything longer. */
.form-stack { display: grid; gap: 4px; max-width: 30rem; margin: 20px 0 24px; padding: 18px 20px; border: 1px solid var(--rule); border-radius: 14px; background: var(--card); }
.form-stack label { font-weight: 600; font-size: 0.92rem; }
.form-stack label + input { margin-bottom: 10px; }
.form-stack input[type="text"] { font: inherit; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); width: 100%; }
.form-stack input[type="text"]:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.form-stack button { justify-self: start; margin-top: 6px; font: 600 0.95rem var(--sans); padding: 10px 18px; border: 0; border-radius: 8px; background: var(--accent); color: var(--accent-ink); cursor: pointer; }
.form-stack button:hover { filter: brightness(1.08); }

/* Site search in the masthead */
.search { position: relative; }
.search input { width: 19rem; font: inherit; font-size: 0.93rem; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--rule); background: var(--card); color: var(--ink); }
.search input:focus { outline: 2px solid var(--accent); outline-offset: 1px; width: 22rem; }
.search-results { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: min(26rem, 92vw); margin: 0; padding: 6px; list-style: none; border-radius: 12px; background: var(--card); border: 1px solid var(--rule); box-shadow: 0 18px 50px -20px rgba(0, 0, 0, 0.5); }
.search-results a { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.search-results b { font-weight: 600; font-size: 0.92rem; }
.search-results span { font-size: 0.8rem; color: var(--muted); }
.search-results [aria-selected="true"] a, .search-results a:hover { background: var(--accent-soft); }
.search-results .none { padding: 8px 10px; color: var(--muted); font-size: 0.88rem; }
@media (max-width: 900px) { .search { order: 3; flex-basis: 100%; } .search input, .search input:focus { width: 100%; } .search-results { left: 0; right: auto; width: 100%; } }

/* Monthly report */
.report h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.05; margin: 0.15em 0 0.5em; }
.report-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 24px; }
.report-stats > div { padding: 14px 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--rule); }
.report-stats .kicker { margin: 0; }
.report-stats .figure { margin: 6px 0 2px; font: 600 clamp(1.6rem, 3.4vw, 2.2rem)/1 var(--mono); color: var(--accent); }
.report-stats .sub { margin: 0; font-size: 0.85rem; color: var(--muted); }
.report .panels { margin: 22px 0; }
.report .panel h3 { margin-top: 0; }
@media (max-width: 640px) { .report-stats { grid-template-columns: 1fr; } }

/* Pro page: plan comparison */
.compare { margin: 8px 0 44px; }
.compare-wrap { border-radius: 16px; border: 1px solid var(--rule); background: var(--card); overflow-x: auto; }
@media (min-width: 901px) { .compare-wrap { overflow: visible; } }
.compare-table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; font-size: 0.92rem; }
.compare-table th, .compare-table td { padding: 11px 14px; text-align: center; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.compare-table .feat { text-align: left; font-weight: 500; color: var(--ink); width: 38%; }
.compare-table thead th { position: sticky; top: var(--masthead-h, 61px); z-index: 2; background: var(--card); padding: 18px 12px 14px; vertical-align: bottom; border-bottom: 2px solid var(--rule-strong); }
.compare-table thead th:first-child { border-top-left-radius: 16px; }
.compare-table thead th:last-child { border-top-right-radius: 16px; }
.compare-table .plan { display: block; font: 600 0.95rem var(--sans); }
.compare-table .price { display: block; margin: 4px 0 0; font: 400 1.9rem/1 var(--serif); color: var(--ink); }
.compare-table .price small { font: 500 0.8rem var(--sans); color: var(--muted); margin-left: 2px; }
.compare-table .alt { display: block; min-height: 1.2em; margin: 2px 0 10px; font-size: 0.78rem; color: var(--muted); }
.compare-table thead .button { padding: 7px 12px; font-size: 0.82rem; white-space: nowrap; }
.compare-table .featured { background: color-mix(in srgb, var(--accent) 7%, var(--card)); }
.compare-table thead th.featured { background: color-mix(in srgb, var(--accent) 12%, var(--card)); box-shadow: inset 0 3px 0 var(--accent); }
.compare-table tr.group th { padding: 22px 14px 8px; text-align: left; font: 600 0.74rem var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); background: var(--card); border-bottom: 1px solid var(--rule); }
.compare-table tbody tr:not(.group):hover th, .compare-table tbody tr:not(.group):hover td { background: var(--row-hover); }
.compare-table .yes { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.compare-table .no { color: var(--muted); opacity: 0.6; font-size: 1.1rem; }
.compare-table .val { font-weight: 600; font-size: 0.86rem; color: var(--ink); }
.compare-table tbody:last-of-type tr:last-child th, .compare-table tbody:last-of-type tr:last-child td { border-bottom: 0; }
@media (max-width: 900px) {
  .compare-table thead th { top: 0; }
  .compare-table .feat { position: sticky; left: 0; z-index: 1; background: var(--card); min-width: 180px; box-shadow: 1px 0 0 var(--rule); }
  .compare-table tr.group th { position: sticky; left: 0; }
}
/* Phones: the whole table fits the screen; the plan cards above carry the buttons. */
@media (max-width: 640px) {
  .compare-wrap { overflow: visible; }
  .compare-table { min-width: 0; table-layout: fixed; font-size: 0.8rem; }
  .compare-table th, .compare-table td { padding: 8px 3px; }
  .compare-table .feat { position: static; width: 40%; min-width: 0; box-shadow: none; padding-left: 10px; font-size: 0.8rem; }
  .compare-table thead th { padding: 12px 2px 10px; }
  .compare-table thead .button, .compare-table .alt { display: none; }
  .compare-table .plan { font-size: 0.74rem; }
  .compare-table .price { font-size: 1.15rem; }
  .compare-table .price small { display: block; margin: 0; font-size: 0.64rem; }
  .compare-table .val { font-size: 0.68rem; line-height: 1.25; display: inline-block; }
  .compare-table .yes { width: 20px; height: 20px; }
  .compare-table tr.group th { position: static; padding: 16px 10px 6px; }
}

/* Pro, hard to miss: masthead button, footer band, live status bar. The one
   filled button in the header, so nothing else competes with it. */
.nav-pro { padding: 7px 16px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 0.93rem; text-decoration: none; white-space: nowrap; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent), 0 6px 18px -6px var(--glow); }
.nav-pro:hover, .nav-pro[aria-current="page"] { filter: brightness(1.08); color: var(--accent-ink); }
/* Inside the band the generic link colour would win on specificity and paint
   the label the same green as the button it sits on. */
.band .nav-pro { padding: 5px 14px; font-size: 0.88rem; color: var(--accent-ink) !important; }
.band .nav-pro:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent), 0 6px 18px -6px var(--glow); }
/* Settings: the title, who you are and the section index all live in a
   column to the LEFT of the form, which keeps its own readable measure
   (the same 44rem as .prose, so the page is no wider than the rest of the
   site). The whole left column sticks, so the index is always in reach
   however far down the form you have scrolled. */
.set-layout { display: grid; grid-template-columns: 228px minmax(0, 44rem); gap: 40px; align-items: start; padding-top: 8px; }
/* Locked, with no travel at all: the offset equals the sticky masthead's real
   height (measured in app.js, since it grows when the nav wraps) plus the
   layout's own padding, which is exactly where the column already sits. So
   it is pinned from the first pixel of scroll and never slides under the
   header. */
.set-side { position: sticky; top: calc(var(--masthead-h, 76px) + 8px); font-size: 0.92rem;
  display: flex; flex-direction: column; max-height: calc(100vh - var(--masthead-h, 76px) - 24px); }
.set-side .crumbs { margin: 0 0 10px; }
.set-head { margin: 0 0 16px; }
.set-head h1 { margin: 0 0 8px; }
.set-who { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }
.set-plan { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
.set-email { color: var(--muted); font-size: 0.85rem; overflow-wrap: anywhere; }
/* Only the list of sections may ever scroll, and only when the window is too
   short to hold it. The breadcrumbs, title, plan and address are never inside
   a scroll container: when they were, a wheel over the column scrolled the
   column instead of the page and pushed them out of sight. */
.set-index { display: flex; flex-direction: column; min-height: 0; }
.set-index .kicker { margin: 0 0 8px; }
.set-index ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: s; min-height: 0; overflow: auto; }
.set-index li { counter-increment: s; }
.set-index a { display: block; padding: 6px 10px; border-left: 2px solid var(--rule); color: var(--muted); text-decoration: none; border-radius: 0 6px 6px 0; }
.set-index a::before { content: counter(s) ". "; opacity: 0.6; }
.set-index a:hover, .set-index a:focus-visible, .set-index a.is-here { border-left-color: var(--accent); color: var(--ink); background: var(--accent-soft); }
.set-side-back { margin: 14px 0 0; padding-left: 12px; }
.set-main > h2:first-child { margin-top: 0; }

/* The same frozen index, for any long page that is a list of jobs rather
   than a form: the posting desk uses it. Wider main column than Settings,
   which keeps a form's readable measure; here the content is tables, posts
   and a calendar that want the room. public/pageindex.js marks the section
   you are looking at. */
.page-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 36px; align-items: start; padding-top: 8px; }
.page-side { position: sticky; top: calc(var(--masthead-h, 76px) + 8px); font-size: 0.92rem;
  display: flex; flex-direction: column; max-height: calc(100vh - var(--masthead-h, 76px) - 24px); }
.page-side .kicker { margin: 0 0 8px; }
/* Only the list may scroll, and only when the window is too short for it:
   a wheel over the column must move the page, not the column. */
.page-index { display: flex; flex-direction: column; min-height: 0; }
.page-index ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; min-height: 0; overflow: auto; }
.page-index a { display: flex; align-items: baseline; gap: 8px; padding: 6px 10px; border-left: 2px solid var(--rule); color: var(--muted); text-decoration: none; border-radius: 0 6px 6px 0; }
.page-index a:hover, .page-index a:focus-visible, .page-index a.is-here { border-left-color: var(--accent); color: var(--ink); background: var(--accent-soft); }
/* A count beside a section, so the index says how much is waiting. */
.page-index .n { margin-left: auto; font: 600 0.72rem var(--sans); color: var(--muted); background: var(--card); border: 1px solid var(--rule); border-radius: 999px; padding: 1px 7px; }
.page-index a.is-here .n { color: var(--accent); border-color: var(--accent); }
/* Nothing left in that section: a tick instead of a number, so the index
   reads as a to-do list that is being finished. */
.page-index a.is-done::after { content: "✓"; margin-left: auto; color: var(--accent); font-size: 0.85rem; }
/* Accounts the X API says we already follow: dimmed, with a quiet marker,
   so the list reads as "these are the ones left". */
.follow li.is-followed { opacity: 0.55; }
.follow-done { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font: 700 0.6rem/1.6 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); vertical-align: 0.1em; }
.page-main > .sect:first-child { margin-top: 0; }
@media (max-width: 1000px) {
  .page-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .page-side { position: static; max-height: none; margin-bottom: 18px; }
  .page-index ol { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; gap: 6px; }
  .page-index a { border-left: 0; border-bottom: 2px solid var(--rule); border-radius: 6px 6px 0 0; white-space: nowrap; }
  .page-index a:hover, .page-index a:focus-visible, .page-index a.is-here { border-left: 0; border-bottom-color: var(--accent); }
}
/* Only below the point where a left column stops fitting does it go on top. */
@media (max-width: 1000px) {
  .set-layout { grid-template-columns: 1fr; gap: 16px; }
  .set-side { position: static; }
  .set-index ol { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; gap: 4px; padding-bottom: 4px; }
  .set-index a { border-left: 0; border-bottom: 2px solid var(--rule); border-radius: 6px 6px 0 0; white-space: nowrap; }
}

/* The outreach preview: the same email the kit produces, filling in as the
   fields above are typed. */
.kit-preview { margin: 14px 0 4px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); }
.kit-preview .kicker { margin: 0 0 8px; color: var(--accent); }
.kit-preview pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 0.9rem/1.6 var(--sans); color: var(--ink); }
.kit-preview .note { margin: 10px 0 0; }
.pro-cta { margin-top: 56px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background:
  radial-gradient(50% 120% at 100% 0%, var(--glow), transparent 70%),
  radial-gradient(40% 120% at 0% 100%, color-mix(in srgb, var(--glow) 70%, transparent), transparent 70%), var(--card); }
.pro-cta-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 32px; align-items: center; padding-top: 34px; padding-bottom: 34px; }
.pro-cta .kicker { margin: 0 0 6px; color: var(--accent); }
.pro-cta-head { margin: 0; font: 400 clamp(1.6rem, 3.2vw, 2.3rem)/1.1 var(--serif); color: var(--ink); max-width: 30ch; }
.pro-cta-sub { margin: 10px 0 0; color: var(--muted); font-size: 0.93rem; max-width: 62ch; }
.pro-cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.pro-cta-actions .button { padding: 12px 20px; font-size: 1rem; }
@media (max-width: 760px) { .pro-cta-row { grid-template-columns: 1fr; } }
.pro-cta + .footer { margin-top: 0; }

/* Founding-member offer: the band on /pro/ and the one-line strip on the home
   page. Both disappear on their own when the offer closes (lib/founding.mjs). */
.founding { margin: 0 0 28px; padding: 22px 24px; border: 2px solid var(--accent); border-radius: 12px;
  background: radial-gradient(60% 140% at 100% 0%, var(--glow), transparent 70%), var(--card); }
.founding .kicker { margin: 0 0 6px; color: var(--accent); }
.founding h2 { margin: 0; font: 400 clamp(1.5rem, 3vw, 2.1rem)/1.15 var(--serif); color: var(--ink); max-width: 28ch; }
.founding p { margin: 10px 0 0; color: var(--muted); font-size: 0.95rem; max-width: 62ch; }
.founding .button { margin-top: 4px; padding: 12px 20px; font-size: 1rem; }
.founding-strip { margin: 18px 0 0; }
.founding-strip a { display: inline-block; padding: 9px 14px; border: 1px solid var(--accent); border-radius: 999px;
  background: var(--accent-soft); color: var(--ink); text-decoration: none; font-size: 0.9rem; line-height: 1.35; }
.founding-strip a:hover { border-color: var(--accent-ink); }
.tier .price s { color: var(--muted); font-size: 0.6em; font-weight: 400; margin-right: 6px; }

.statusbar { position: fixed; z-index: 35; left: 50%; bottom: 14px; transform: translateX(-50%); width: min(760px, calc(100vw - 24px)); display: flex; align-items: center; gap: 12px; padding: 9px 10px 9px 16px; border-radius: 999px;
  background: color-mix(in srgb, var(--card) 88%, transparent); border: 1px solid var(--rule); box-shadow: 0 18px 50px -18px rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  font: 500 0.82rem var(--mono); color: var(--muted); animation: sbIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.statusbar[hidden] { display: none; }
.statusbar .sb-live { display: inline-flex; align-items: center; gap: 7px; color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.statusbar .sb-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.statusbar .sb-cta { flex: none; padding: 7px 14px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: 700 0.82rem var(--sans); text-decoration: none; }
.statusbar .sb-cta:hover { filter: brightness(1.08); color: var(--accent-ink); }
.statusbar .sb-close { all: unset; cursor: pointer; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); font-size: 1.1rem; }
.statusbar .sb-close:hover { background: var(--row-hover); color: var(--ink); }
body.has-statusbar { padding-bottom: 76px; }
@keyframes sbIn { from { opacity: 0; transform: translate(-50%, 16px); } }
@media (max-width: 640px) { .statusbar { bottom: 8px; gap: 8px; padding-left: 12px; } .statusbar .sb-text { display: none; } .statusbar .sb-cta { margin-left: auto; } }

/* Home headline: words rise in one after another */
.rise > span, .rise > em > span { display: inline-block; animation: riseIn 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.rise > span:nth-child(2) { animation-delay: 0.08s; }
.rise > em > span { animation-delay: 0.18s; }
.rise > span:nth-child(3) { animation-delay: 0.28s; }
@keyframes riseIn { from { opacity: 0; transform: translateY(0.35em); filter: blur(6px); } }
@media (prefers-reduced-motion: reduce) { .rise > span, .rise > em > span, .statusbar { animation: none; } }
.funding .ledger td:first-child { white-space: nowrap; }
@media (max-width: 640px) { .funding { padding: 14px 12px; } .funding .ledger th, .funding .ledger td { padding-left: 4px; padding-right: 4px; font-size: 0.8rem; } }

/* List filters */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 12px; padding: 10px; border-radius: 12px; background: var(--card); border: 1px solid var(--rule); }
.filters input[type="search"], .filters select { font: inherit; font-size: 0.88rem; color: var(--ink); padding: 7px 10px; border-radius: 8px; border: 1px solid var(--rule); background: var(--paper); }
.filters .ftext { flex: 1 1 200px; }
.filters .ftext input { width: 100%; box-sizing: border-box; }
.filters select { max-width: 13rem; }
.fchecks { display: flex; flex-wrap: wrap; gap: 6px; }
.fchk { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; font-size: 0.84rem; color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); cursor: pointer; user-select: none; }
.fchk:has(input:checked) { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); font-weight: 600; }
.fchk input { accent-color: var(--accent); margin: 0; }
.fcount { flex-basis: 100%; margin: 0; font-size: 0.82rem; color: var(--muted); }
.fcount:empty { display: none; }
@media (max-width: 640px) { .filters select { flex: 1 1 45%; max-width: none; } }

/* Pro dashboard (functions/me.js) */
.is-pro .pro-cta, .is-pro .statusbar { display: none; }
.dash { padding-top: 18px; }
.dash-notice { margin: 4px 0 18px; padding: 14px 16px; border: 2px solid var(--accent); border-radius: 8px; background: var(--accent-soft); font-weight: 600; }
.dash-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px 24px; margin: 8px 0 22px; }
.dash-head h1 { margin: 0.1em 0 0.2em; font: 400 clamp(2rem, 4vw, 2.8rem)/1.05 var(--serif); }
.dash-head .lede { margin: 0; max-width: 60ch; }
.dash-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.dash-files { display: grid; gap: 10px; padding-left: 1.1em; }
.dash-files code { font-size: 0.8rem; word-break: break-all; }
.dash-signin { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0; }
.dash-signin input { font: inherit; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--rule); background: var(--card); color: var(--ink); min-width: min(22rem, 100%); }

/* Explore (public/explore.js): multi-select filters, chips, results */
.ex-head .lede { max-width: 70ch; }
.ex-examples { font-size: 0.92rem; color: var(--muted); }
.ex-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; margin: 18px 0 10px; }
.ex-q { flex: 1 1 260px; max-width: 420px; font: inherit; padding: 9px 12px; border: 1px solid var(--rule); border-radius: 10px; background: var(--card); color: var(--ink); }
.ex-pickers { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 100%; }
.ms { position: relative; }
.ms-btn { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 9.5rem; max-width: 16rem; padding: 7px 30px 7px 12px; font: inherit; text-align: left; background: var(--card); color: var(--ink); border: 1px solid var(--rule); border-radius: 10px; cursor: pointer; position: relative; }
.ms-btn::after { content: "▾"; position: absolute; right: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 0.8rem; }
.ms-btn:hover, .ms-btn[aria-expanded="true"] { border-color: var(--accent); }
.ms-label { font: 600 0.7rem var(--sans); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.ms-val { font-size: 0.9rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-on .ms-btn { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ms-on .ms-label { color: var(--accent); }
.ms-pop { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: min(22rem, 92vw); max-height: min(28rem, 70vh); display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--rule); border-radius: 12px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18); }
.ms-wide .ms-pop { width: min(26rem, 92vw); }
.ms-pop[hidden] { display: none; }
.ms-q { margin: 10px 10px 4px; font: inherit; font-size: 0.9rem; padding: 7px 10px; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); color: var(--ink); }
.ms-list { overflow: auto; padding: 4px 6px 6px; }
.ms-group { margin: 10px 6px 2px; font: 700 0.7rem var(--sans); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.ms-opt { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; font-size: 0.9rem; cursor: pointer; }
.ms-opt:hover { background: var(--row-hover); }
.ms-opt span:first-of-type { flex: 1; }
.ms-n { font: 600 0.75rem var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }
.ms-zero { opacity: 0.45; }
.ms-opt[hidden] { display: none; }
.ms-foot { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--rule); }
.ms-foot button { font: inherit; font-size: 0.85rem; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); cursor: pointer; }
.ms-foot .ms-done { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.ex-more { flex: 1 1 100%; }
.ex-more summary { cursor: pointer; font-size: 0.9rem; color: var(--accent); width: fit-content; }
.ex-more-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 10px 14px; margin-top: 10px; }
.ex-more-grid label { display: grid; gap: 4px; font-size: 0.8rem; color: var(--muted); }
.ex-more-grid input, .ex-more-grid select { font: inherit; font-size: 0.9rem; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--rule); background: var(--card); color: var(--ink); }
.ex-jobs { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 14px 0 0; }
.ex-job { font: 600 0.82rem var(--sans); padding: 5px 11px; border-radius: 999px; border: 1px solid var(--rule); background: var(--card); color: var(--ink); text-decoration: none; }
.ex-job:hover, .ex-job.on { border-color: var(--accent); color: var(--accent); }
.ex-job.on { background: var(--accent-soft); }
.ex-filters-btn { display: none; align-items: center; gap: 6px; font: 600 0.9rem var(--sans); padding: 8px 14px; border-radius: 10px; border: 1px solid var(--rule); background: var(--card); color: var(--ink); cursor: pointer; }
.ex-filters-btn .n { font-size: 0.75rem; padding: 1px 7px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); }
/* Phones: a filter list opens as a sheet at the bottom of the screen, never
   past the right edge. */
@media (max-width: 640px) {
  .ex-actions { gap: 6px; }
  .ex-actions .button { padding: 7px 12px; font-size: 0.88rem; }
  .ms { position: static; }
  .ms-btn { min-width: 0; }
  .ms-pop, .ms-wide .ms-pop { position: fixed; z-index: 45; left: 8px; right: 8px; bottom: 8px; top: auto; width: auto; max-height: 70vh; }
  /* Professions on one swipeable line; filters folded behind a button. */
  .ex-jobs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .ex-jobs > * { flex: none; }
  .ex-filters-btn { display: inline-flex; }
  .ex-bar:not(.open) .ex-pickers, .ex-bar:not(.open) .ex-more { display: none; }
}
.ex-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.ex-chip { font: 600 0.78rem var(--sans); padding: 4px 10px; border-radius: 999px; border: 0; background: var(--accent-soft); color: var(--accent); cursor: pointer; }
.ex-chip:hover { text-decoration: line-through; }
.ex-summary { margin: 6px 0 10px; font-size: 1rem; }
.ex-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.ex-actions .lock { font: 700 0.65rem var(--sans); padding: 2px 6px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); margin-left: 4px; vertical-align: 2px; }
.ex-table th.sortable button { font: inherit; color: inherit; padding: 0; }
.ex-table .co-cell { display: inline-flex; align-items: center; gap: 8px; }
.ex-table .co-logo { padding: 1px; border-radius: 5px; }
.ex-table .co-mono { font-size: 0.7rem; }
.ex-table td .chip { white-space: nowrap; }
.ex-empty { padding: 28px 12px; text-align: center; color: var(--muted); }
.ex-lock { margin: 14px 0 24px; padding: 22px; text-align: center; border: 1px dashed var(--accent); border-radius: 14px; background: color-mix(in srgb, var(--accent) 6%, var(--card)); }
.ex-lock-n { font: 650 1.3rem var(--sans); margin: 0 0 6px; }
.ex-lock-detail { margin: 0 0 10px; color: var(--accent); font-weight: 600; }
.ex-types { display: grid; gap: 8px; padding-left: 1.1em; font-size: 0.92rem; }
.ex-table th.sortable button, .ex-reset { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.ex-table th.sortable button { text-transform: inherit; letter-spacing: inherit; }
.ex-table th.sortable button:hover { color: var(--accent); }
.ex-reset { font-size: 0.9rem; color: var(--accent); text-decoration: underline; }

/* Explore: impossible to miss in the menu and on the home page */
.nav-new { margin-left: 5px; padding: 1px 6px; border-radius: 999px; font: 700 0.62rem var(--sans); letter-spacing: 0.04em; text-transform: uppercase; background: var(--accent-soft); color: var(--accent); vertical-align: 2px; }
.ex-band { margin: 18px 0 8px; padding: 20px 22px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--rule)); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--card)), var(--card)); display: grid; gap: 12px; }
.ex-band h2 { margin: 0; font: 400 clamp(1.5rem, 3vw, 2rem)/1.1 var(--serif); }
.ex-band p { margin: 0; color: var(--muted); }
.ex-band-types { display: flex; flex-wrap: wrap; gap: 8px; }
.ex-band-jobs { margin: 14px 0 0; font-size: 0.92rem; color: var(--muted); line-height: 1.8; }
.ex-band-jobs span { font: 700 0.72rem var(--sans); text-transform: uppercase; letter-spacing: 0.05em; margin-right: 4px; }
.ex-band-jobs a { color: var(--ink); }
.ex-band-types a { padding: 6px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--rule); text-decoration: none; font-size: 0.9rem; color: var(--ink); }
.ex-band-types a:hover { border-color: var(--accent); color: var(--accent); }
.ex-band-types a span { color: var(--muted); font-size: 0.8rem; margin-left: 4px; }
/* Lead score badge: darker green for better leads */
.score { display: inline-block; min-width: 2.2em; padding: 2px 6px; border-radius: 6px; text-align: center; font: 700 0.8rem var(--sans); font-variant-numeric: tabular-nums; background: var(--paper); color: var(--muted); box-shadow: inset 0 0 0 1px var(--rule); }
.score.s4 { background: var(--seq-200); color: #0b2a18; box-shadow: none; }
.score.s5 { background: var(--seq-400); color: #06150c; box-shadow: none; }
.score.s6 { background: var(--seq-600); color: #fff; box-shadow: none; }

/* Company page: lead score and outreach kit (the kit is Pro; others see a blurred preview) */
.kit { margin: 22px 0; display: grid; gap: 10px; }
.kit h3 { margin: 6px 0 0; }
.kit-head { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.kit-score { margin: 2px 0 0; font-size: 1rem; }
.kit-score .score { font-size: 1.15rem; padding: 4px 10px; }
.kit-why { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.kit-part { display: grid; gap: 6px; margin-bottom: 12px; }
.kit-part .kicker { margin: 0; }
.kit-part .post-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.kit-part .button { justify-self: start; }
.kit-roles { font-size: 0.92rem; }
.kit-body { position: relative; min-width: 0; }
/* Locked until app.js loads the real kit (the page only holds a stand-in).
   Signed-in members see "Loading" meanwhile; a refused session, the prompt. */
.kit-lock { display: none; }
.kit:not(.unlocked) .kit-body { filter: blur(5px); user-select: none; pointer-events: none; max-height: 220px; overflow: hidden; }
.kit:not(.unlocked) .kit-lock { display: block; margin-top: -60px; position: relative; padding: 18px; text-align: center; border: 1px dashed var(--accent); border-radius: 12px; background: var(--card); }
.kit-loading { display: none; margin: 0; font-weight: 600; }
html.is-pro .kit:not(.unlocked):not(.refused) .kit-loading { display: block; }
html.is-pro .kit:not(.unlocked):not(.refused) .kit-lock > :not(.kit-loading) { display: none; }
/* Explore: radius search */
.ex-near { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 6px 12px; border: 1px solid var(--rule); border-radius: 10px; background: var(--card); font-size: 0.9rem; }
.ex-near label { display: inline-flex; gap: 6px; align-items: center; }
.ex-near input, .ex-near select { font: inherit; padding: 5px 8px; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); color: var(--ink); }
.ex-near input { width: 6.5em; }
/* Pipeline (Pro): status colors mark identity; the label always says it */
:root { --pipe-todo: #7d7a72; --pipe-contacted: #b7791f; --pipe-talking: #2b6cb0; --pipe-won: var(--accent); --pipe-lost: #a8a59b; }
.pipe-row.pipe-todo { border-left-color: var(--pipe-todo); }
.pipe-row.pipe-contacted { border-left-color: var(--pipe-contacted); }
.pipe-row.pipe-talking { border-left-color: var(--pipe-talking); }
.pipe-row.pipe-won { border-left-color: var(--pipe-won); }
.pipe-row.pipe-lost { border-left-color: var(--pipe-lost); opacity: 0.8; }
.pipe-chip { color: var(--ink); white-space: nowrap; }
.pipe-chip::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: var(--pipe-todo); vertical-align: 0; }
.pipe-chip.pipe-contacted::before { background: var(--pipe-contacted); }
.pipe-chip.pipe-talking::before { background: var(--pipe-talking); }
.pipe-chip.pipe-won::before { background: var(--pipe-won); }
.pipe-chip.pipe-lost::before { background: var(--pipe-lost); }
.kit-pipe { margin-top: 6px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); display: grid; gap: 8px; }
.kit-pipe .pipe-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kit-pipe select, .kit-pipe input { font: inherit; font-size: 0.92rem; padding: 6px 9px; border: 1px solid var(--rule); border-radius: 8px; background: var(--card); color: var(--ink); }
.kit-pipe .pipe-note { flex: 1 1 240px; display: flex; }
.kit-pipe .pipe-note input { width: 100%; }
.kit-pipe .pipe-status { margin: 0; font-size: 0.85rem; color: var(--muted); }
/* Help videos (scripts/lib/help.mjs, public/help.js) */
.help-link { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; padding: 2px 9px 2px 7px; border-radius: 999px; border: 1px solid var(--rule); background: var(--card); font: 600 0.72rem var(--sans); letter-spacing: 0; text-transform: none; color: var(--accent); text-decoration: none; vertical-align: middle; white-space: nowrap; }
.help-link:hover { border-color: var(--accent); background: var(--accent-soft); }
.help-link .help-len { color: var(--muted); font-weight: 500; }
.help-off .help-link { display: none; }
/* The state has to be readable at a glance: "on" is the accent colour with a
   filled mark, "off" is muted with an empty one, so the label is never
   mistaken for the action a click would take. */
.help-toggle { font: inherit; font-size: 0.85rem; padding: 2px 8px; border: 1px solid var(--rule); border-radius: 999px; background: none; color: var(--muted); cursor: pointer; }
.help-toggle::before { content: "○ "; }
.help-toggle[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
.help-toggle[aria-pressed="true"]::before { content: "● "; }
.help-toggle:hover { border-color: var(--accent); }
.help-toggle[hidden] { display: none; }
.help-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, 0.62); }
.help-modal-card { width: min(960px, 100%); background: var(--card); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4); }
.help-modal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--rule); }
.help-modal-close { font-size: 1.6rem; line-height: 1; border: 0; background: none; color: var(--ink); cursor: pointer; padding: 0 4px; }
.help-modal-frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.help-modal-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.help-modal-foot { margin: 0; padding: 10px 14px; font-size: 0.88rem; }
/* The help page */
.help-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; margin: 18px 0 28px; }
.help-card { display: grid; gap: 8px; padding: 0 0 14px; border: 1px solid var(--rule); border-radius: 12px; background: var(--card); overflow: hidden; color: inherit; text-decoration: none; }
.help-card:hover { border-color: var(--accent); }
.help-card img { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; }
.help-card strong, .help-card span { padding: 0 14px; }
.help-card span { font-size: 0.9rem; color: var(--muted); }