/* site.css — one chrome for the hand-written public pages (job62, 2026-09-23).
   index · pricing · founders · connect · billing · request-access · login · 404.

   Before this file each of those pages carried its own inline <style> and they
   had drifted: three container widths (1200 / 1080 / 640), two nav gaps, three
   button paddings, six h2 sizes on index alone, and connect.html's <nav> was
   missing .topnav entirely so its links rendered as "Get a keyAccount".

   Values follow lookthrough.css, which already dresses the 166 generated
   /managers, /marks and /private-credit pages — so the whole public site is one
   system. Load this AFTER a page's inline <style>: it is meant to win for the
   chrome selectors, and the page keeps everything else.

   The terminal (app.html) and the docs shell (guide / api-docs) have their own
   layouts and do not load this.

   sunset: "Fold the remaining inline <style> blocks in here as pages are next
   touched. Review 2026-12-23." */

/* ── tokens ─────────────────────────────────────────────────────────────── */
:root {
  --bg: #EFEEE9; --panel: #FBFAF7; --card: #fff;
  --ink: #12161B; --muted: #6E6A61; --faint: #8B857A;
  --line: #D6D3CA; --line-soft: #EBE9E2;
  --red: #8E2A22; --red-hover: #A03229; --green: #1F6B4B;
  --mono: 'IBM Plex Mono', monospace;
  --sans: 'Archivo', sans-serif;
  --gutter: 32px;
}
html[data-theme="dark"] {
  --bg: #141312; --panel: #1d1c1a; --card: #1d1c1a;
  --ink: #EFEEE9; --muted: #a8a49c; --faint: #8f8a80;
  --line: #33312d; --line-soft: #292724;
  color-scheme: dark;
}

/* ── container ──────────────────────────────────────────────────────────────
   Scoped to what this file owns: 404.html has no box-sizing reset of its own,
   so a padded full-width .wrap overflowed by exactly its two gutters. */
#topbar, #topbar *, footer, footer *, .wrap, .btn { box-sizing: border-box; }
/* min-width:0 because several pages make <body> a flex column — without it a
   wide child (the pricing comparison) sets the wrap's automatic minimum size
   and pushes the whole page past the viewport instead of scrolling itself. */
.wrap { width: 100%; max-width: 1080px; min-width: 0; margin: 0 auto; padding: 0 var(--gutter); }
/* A reading column for step-by-step pages (connect). The wrap keeps the site
   width so the column starts under the brand, rather than floating centred. */
.wrap.narrow > * { max-width: 780px; }
.page-404 { padding-top: 96px; padding-bottom: 120px; }

/* ── type scale ─────────────────────────────────────────────────────────────
   One ladder for every public page. Page rules may still set margin, max-width
   and colour; they should no longer set their own heading size. */
/* text-wrap:balance evens the lines so a heading does not drop one word alone
   ("The first job was matching the / loans.") */
h1 { font-weight: 800; font-size: clamp(34px, 4.4vw, 52px); line-height: 1.05; letter-spacing: -.022em; text-wrap: balance; }
h2 { font-weight: 800; font-size: clamp(26px, 2.9vw, 34px); line-height: 1.14; letter-spacing: -.018em; text-wrap: balance; }
h3 { font-weight: 800; font-size: 18px; line-height: 1.3; letter-spacing: -.01em; }

/* Card titles sit one tier below a section heading. Without this the shared
   h2 would blow "Trial / Tape / Matched / Terminal" up to section size. */
.plan h2 { font-size: 22px; line-height: 1.2; letter-spacing: -.015em; }
.ent h2, .card h2 { font-size: 20px; line-height: 1.25; letter-spacing: -.012em; }
.ds-card h3, .door h3, .who-col h3, .term-col h3, .step h3, .how h3,
.bridge h3, .fcard h3, .faq-item h3 { font-size: 17px; line-height: 1.35; }

.eyebrow {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--red);
}

/* ── buttons ────────────────────────────────────────────────────────────────
   One size, one primary. .btn-lg is for a page's single leading action. */
.btn {
  display: inline-block; font-size: 13px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 13px 22px; border-radius: 0;
  border: 1px solid var(--line); cursor: pointer;
  background: transparent; color: var(--ink); text-decoration: none;
  white-space: nowrap; transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--panel); }
.btn-primary { background: var(--red); border-color: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-hover); border-color: var(--red-hover); }
.btn-lg { padding: 16px 32px; font-size: 14px; }

/* ── top bar ────────────────────────────────────────────────────────────── */
#topbar {
  position: sticky; top: 0; z-index: 100;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
#topbar .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px; gap: 20px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.brand-word { font-weight: 800; font-size: 19px; letter-spacing: .01em; }
/* every nav in the bar gets the gap, so a missing .topnav can't run links together */
#topbar nav, .topnav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
#topbar nav a.plain, .topnav a.plain {
  font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: none;
}
#topbar nav a.plain:hover, .topnav a.plain:hover,
#topbar nav a.plain.on, .topnav a.plain.on { color: var(--ink); }
.topnav .btn { padding: 10px 16px; font-size: 12px; }

/* ── footer ─────────────────────────────────────────────────────────────── */
footer { border-top: 1px solid var(--line); padding: 30px 0; margin-top: 8px; }
/* align-items is restated because several pages set `align-items:center` on
   footer .wrap for the old single-row footer; left unset it would leak through */
footer .wrap { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
.f-nav {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  font-size: 13px; font-weight: 600;
}
.f-nav a { color: var(--ink); text-decoration: none; }
.f-nav a:hover { color: var(--red); }
.f-meta {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  color: var(--faint); text-transform: uppercase;
}
footer .f-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }

/* ── narrow ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  :root { --gutter: 20px; }
  #topbar .wrap { height: auto; padding-top: 12px; padding-bottom: 12px; }
  #topbar nav, .topnav { gap: 14px; }
}
@media (max-width: 680px) {
  #topbar nav a.plain, .topnav a.plain { display: none; }
  #topbar nav, .topnav { gap: 10px; }
  .topnav .btn { padding: 9px 13px; font-size: 11.5px; }
}