/* ==========================================================================
   Ledgr — public website stylesheet
   --------------------------------------------------------------------------
   Every colour token here mirrors composeApp/.../ui/theme/LedgrColors.kt and
   every font mirrors LedgrType.kt, so the marketing/docs site and the app are
   visibly the same product. When a token changes in LedgrColors.kt, change it
   here too.

   Typefaces are self-hosted (assets/fonts/*.ttf, copied from
   composeApp/src/commonMain/composeResources/font/). They are NOT loaded from
   a CDN on purpose: the server sets Cross-Origin-Embedder-Policy:require-corp
   globally for the WASM app, which blocks cross-origin font fetches.
   ========================================================================== */

/* ── Fonts ─────────────────────────────────────────────────────────────── */
@font-face { font-family: 'DM Sans'; src: url('/assets/fonts/dmsans_regular.ttf') format('truetype');  font-weight: 400; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('/assets/fonts/dmsans_medium.ttf') format('truetype');   font-weight: 500; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('/assets/fonts/dmsans_semibold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('/assets/fonts/dmsans_bold.ttf') format('truetype');     font-weight: 700; font-display: swap; }
@font-face { font-family: 'Outfit';  src: url('/assets/fonts/outfit_semibold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Outfit';  src: url('/assets/fonts/outfit_bold.ttf') format('truetype');     font-weight: 700; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/assets/fonts/jetbrainsmono_regular.ttf') format('truetype');  font-weight: 400; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/assets/fonts/jetbrainsmono_semibold.ttf') format('truetype'); font-weight: 600; font-display: swap; }

/* ── Tokens ────────────────────────────────────────────────────────────── */
:root {
  /* Brand */
  --pri: #0D47A1;
  --sec: #00838F;
  --cyan: #00BCD4;
  --chart-blue: #1565C0;

  /* Dark chrome (app sidebar gradient) */
  --nav-1: #0A1628;
  --nav-2: #0D2137;
  --nav-3: #0A2A3C;

  /* Surfaces */
  --page: #F5F7FA;
  --card: #FFFFFF;
  --surface: #FAFBFD;
  --feature-bg: #F4F7FA;
  --border: #E2E8F0;
  --border-soft: #E8ECF0;
  --divider: #F1F5F9;

  /* Text */
  --text: #0B1929;
  --text-2: #1B2638;
  --muted: #7A8BA0;
  --neutral: #64748B;
  --faint: #A8B8CC;

  /* Semantic */
  --success: #16A34A;
  --success-bg: #ECFDF5;
  --success-bd: #BBF7D0;
  --warn: #D97706;
  --warn-bg: #FFFBEB;
  --warn-bd: #FDE68A;
  --error: #DC2626;
  --error-bg: #FEF2F2;
  --error-bd: #FECACA;
  --info-bg: #E0F7FA;
  --info-bd: #B2EBF2;
  --purple: #7C3AED;
  --purple-bg: #F5F3FF;
  --whatsapp: #25D366;

  /* Code */
  --code-bg: #0F172A;
  --code-fg: #E2E8F0;

  /* Shape + rhythm */
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 20px;
  --maxw: 1180px;
  --nav-h: 68px;

  --shadow-sm: 0 1px 3px rgba(11, 25, 41, .06);
  --shadow: 0 4px 20px rgba(11, 25, 41, .07);
  --shadow-lg: 0 18px 48px rgba(11, 25, 41, .13);
  --glow: 0 6px 22px rgba(13, 71, 161, .28);
}

/* ── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--card);
  color: var(--text);
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
h1, h2, h3, h4 { font-family: 'Outfit', 'DM Sans', sans-serif; font-weight: 700; line-height: 1.2; margin: 0; letter-spacing: -.015em; }
p { margin: 0; }
a { color: var(--pri); text-decoration: none; }
a:hover { text-decoration: underline; }
code, kbd, pre, .mono, .num { font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; }
ul, ol { margin: 0; padding-left: 1.25rem; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Skip link — keyboard users land on content, not 12 nav items */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--pri); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--r-sm) 0; font-weight: 600;
}
.skip:focus { left: 0; }

/* ── Layout helpers ────────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: 84px 0; }
.section--tight { padding: 56px 0; }
.section--alt { background: var(--page); }
.section--soft { background: var(--feature-bg); }
/* The desktop rhythm reads as dead space on a phone: 84px top + 84px bottom
   puts ~168px of nothing between consecutive sections on a 390px screen, which
   is nearly half a viewport of scrolling past nothing. */
@media (max-width: 640px) {
  .section { padding: 52px 0; }
  .section--tight { padding: 36px 0; }
  .section-head { margin-bottom: 30px; }
}
.center { text-align: center; }
.stack-sm > * + * { margin-top: 8px; }

.eyebrow {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--sec); margin-bottom: 14px;
}
.eyebrow--onDark { color: var(--cyan); }

h2.h-section { font-size: clamp(28px, 3.4vw, 40px); }
.lede { color: var(--neutral); font-size: 17px; max-width: 68ch; }
.lede--onDark { color: #A9C4D8; }
.section-head { max-width: 780px; margin: 0 auto 48px; text-align: center; }
.section-head .lede { margin: 14px auto 0; }

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 600; line-height: 1;
  padding: 13px 22px; border-radius: 10px; border: 1px solid transparent;
  cursor: pointer; transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: linear-gradient(120deg, var(--pri), var(--sec)); color: #fff; box-shadow: var(--glow); }
.btn-primary:hover { box-shadow: 0 10px 28px rgba(13, 71, 161, .34); }
.btn-ghost { background: var(--card); color: var(--text); border-color: var(--border); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { border-color: var(--cyan); color: var(--pri); }
.btn-onDark { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .26); backdrop-filter: blur(4px); }
.btn-onDark:hover { background: rgba(255, 255, 255, .18); }
.btn-cyan { background: var(--cyan); color: #05202B; }
.btn-sm { padding: 9px 15px; font-size: 14px; border-radius: var(--r-sm); }
.btn-lg { padding: 15px 28px; font-size: 16px; }

/* ── Top navigation ────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 100; height: var(--nav-h);
  background: rgba(255, 255, 255, .92); backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-inner { display: flex; align-items: center; gap: 28px; height: 100%; }
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand:hover { text-decoration: none; }
.brand img { width: 32px; height: 32px; border-radius: 8px; display: block; }
.brand span {
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 20px; letter-spacing: -.02em; color: var(--text);
}
.brand small {
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sec); background: var(--info-bg); border: 1px solid var(--info-bd);
  padding: 2px 7px; border-radius: 5px; align-self: center;
}
.nav-links { display: flex; align-items: center; gap: 4px; margin-right: auto; }
.nav-links a {
  color: var(--text-2); font-size: 15px; font-weight: 500; padding: 8px 13px; border-radius: var(--r-sm);
  transition: background .13s ease, color .13s ease;
}
.nav-links a:hover { background: var(--page); color: var(--pri); text-decoration: none; }
.nav-links a[aria-current="page"] { color: var(--pri); background: #E9F1FC; font-weight: 600; }
.nav-cta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav-toggle {
  display: none; background: none; border: 1px solid var(--border); border-radius: var(--r-sm);
  width: 42px; height: 38px; cursor: pointer; align-items: center; justify-content: center;
}
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--text); position: relative; }
.nav-toggle span::before, .nav-toggle span::after {
  content: ''; position: absolute; left: 0; width: 18px; height: 2px; background: var(--text);
}
.nav-toggle span::before { top: -6px; } .nav-toggle span::after { top: 6px; }

@media (max-width: 1024px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute; top: var(--nav-h); left: 0; right: 0; display: none;
    flex-direction: column; align-items: stretch; gap: 2px; margin: 0; padding: 12px 16px 18px;
    background: var(--card); border-bottom: 1px solid var(--border); box-shadow: var(--shadow);
  }
  .nav[data-open="true"] .nav-links { display: flex; }
  .nav-links a { padding: 12px 14px; font-size: 16px; }
  .nav-cta .btn-ghost { display: none; }
}

/* Must follow the 1024px block — it re-shows the ghost button hidden above. */
@media (max-width: 430px) {
  /* On a small phone the brand, a wide CTA and the toggle will not share a
     line. Swap the wide "Get started free" for the short "Sign in" so the
     header still offers a way in without pushing the page sideways. */
  .wrap { padding: 0 16px; }
  .nav-inner { gap: 12px; }
  .brand span { font-size: 18px; }
  .nav-cta .btn-primary { display: none; }
  .nav-cta .btn-ghost { display: inline-flex; }
  /* Long CTA labels ("Start free — 5 invoices a month") wrap instead of
     overflowing; nowrap is only worth keeping while there is room for it. */
  .btn { white-space: normal; text-align: center; }
  .btn-lg { padding: 13px 18px; font-size: 15px; }
}

/* ── Hero (dark app chrome) ────────────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(135deg, var(--nav-1) 0%, var(--nav-2) 52%, var(--nav-3) 100%);
}
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(760px 420px at 88% -8%, rgba(0, 188, 212, .22), transparent 62%),
    radial-gradient(620px 380px at -6% 108%, rgba(13, 71, 161, .38), transparent 60%);
}
.hero-inner {
  position: relative; z-index: 1; display: grid;
  /* minmax(0,…) everywhere a grid holds mono numerals: the default `auto`
     minimum refuses to shrink below min-content and the page then scrolls
     sideways on a phone. */
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: 56px; align-items: center;
  /* padding-block, never the `padding` shorthand: this element is also .wrap,
     and .wrap's horizontal padding IS the page gutter. A shorthand of
     `84px 0 96px` zeroed it, so on a phone — where nothing else constrains the
     width — the hero heading, lede and buttons sat flush against the screen
     edge while every section below them was inset. */
  padding-block: 84px 96px;
}
@media (max-width: 1024px) { .hero-inner { grid-template-columns: 1fr; gap: 44px; padding-block: 60px 68px; } }
.hero h1 { font-size: clamp(36px, 5.2vw, 60px); letter-spacing: -.03em; }
.hero h1 .grad {
  background: linear-gradient(96deg, var(--cyan), #7FE3F0);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.lede { color: #B4CBDD; font-size: 18px; margin-top: 20px; max-width: 54ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 30px; }
.hero-meta li { list-style: none; display: flex; align-items: center; gap: 8px; font-size: 14px; color: #9FBBD0; }
.hero-meta li::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan);
  box-shadow: 0 0 0 4px rgba(0, 188, 212, .18); flex-shrink: 0;
}
.hero-visual { position: relative; }

/* Fake app window used as the hero screenshot stand-in */
.shot {
  background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255, 255, 255, .16); overflow: hidden;
}
.shot-bar {
  display: flex; align-items: center; gap: 8px; padding: 11px 14px;
  background: linear-gradient(120deg, var(--nav-1), var(--nav-3)); border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.shot-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .22); display: block; }
.shot-bar .url {
  margin-left: 8px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #8FB2C8;
  background: rgba(255, 255, 255, .07); padding: 4px 10px; border-radius: 6px;
}
.shot-body { padding: 18px; background: var(--page); }
.kpi-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.shot-split {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 10px; margin-top: 10px;
}
.shot-runway { padding: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.shot-note { padding: 12px 14px; margin-top: 10px; display: flex; align-items: center; gap: 10px; }
.kpi {
  background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 12px;
}
.kpi .k-label { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.kpi .k-value { font-family: 'JetBrains Mono', monospace; font-size: 17px; font-weight: 600; color: var(--text); margin-top: 6px; }
.kpi .k-delta { font-size: 11px; font-weight: 600; margin-top: 2px; }
@media (max-width: 560px) {
  /* The mock is decorative — let it shrink rather than push the page sideways. */
  .shot-body { padding: 12px; }
  .kpi { padding: 9px; }
  .kpi .k-label { font-size: 8.5px; letter-spacing: .04em; }
  .kpi .k-value { font-size: 12px; }
  .kpi .k-delta { font-size: 9.5px; }
  .shot-note { flex-wrap: wrap; }
}
.k-delta.up { color: var(--success); } .k-delta.down { color: var(--error); }

/* ── Cards ─────────────────────────────────────────────────────────────── */
.card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r);
  padding: 24px; box-shadow: var(--shadow-sm);
}
.card--link { display: block; color: inherit; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.card--link:hover {
  text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow); border-color: #C9DCF0;
}
.card h3 { font-size: 18px; margin-bottom: 8px; }
.card p { color: var(--neutral); font-size: 14.5px; }
.card .more {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  font-size: 14px; font-weight: 600; color: var(--pri);
}
.card--link:hover .more { gap: 10px; }

.icon-tile {
  width: 44px; height: 44px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px; background: linear-gradient(135deg, var(--pri), var(--sec)); flex-shrink: 0;
}
.icon-tile svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.icon-tile--teal { background: linear-gradient(135deg, var(--sec), var(--cyan)); }
.icon-tile--cyan { background: linear-gradient(135deg, var(--cyan), #4DD0E1); }
.icon-tile--purple { background: linear-gradient(135deg, var(--purple), #A78BFA); }
.icon-tile--soft { background: var(--info-bg); border: 1px solid var(--info-bd); }
.icon-tile--soft svg { stroke: var(--sec); }

/* Module card gets a plan badge in the corner */
.mod { position: relative; }
.mod .plan-tag {
  position: absolute; top: 16px; right: 16px;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 5px; background: var(--divider); color: var(--neutral);
}
.plan-tag.free { background: var(--success-bg); color: #166534; }
.plan-tag.starter { background: var(--info-bg); color: var(--sec); }
.plan-tag.business { background: #E9F1FC; color: var(--pri); }
.plan-tag.professional { background: var(--purple-bg); color: var(--purple); }
.plan-tag.enterprise { background: var(--warn-bg); color: #92400E; }
/* The tier above Enterprise. Deliberately the darkest badge on the page — it is
   the only one that is a second product rather than more of the first. */
.plan-tag.manufacturing { background: #0D2137; color: #7DD3E0; }

/* ── Feature rows (alternating) ────────────────────────────────────────── */
.feature {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center;
}
.feature + .feature { margin-top: 88px; }
.feature--flip .feature-text { order: 2; }
@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; gap: 32px; }
  .feature + .feature { margin-top: 56px; }
  .feature--flip .feature-text { order: 0; }
}
.feature h3 { font-size: clamp(24px, 2.6vw, 30px); margin-bottom: 14px; }
.check-list { list-style: none; padding: 0; margin-top: 22px; }
.check-list li { position: relative; padding-left: 30px; margin-bottom: 11px; font-size: 15px; color: var(--text-2); }
.check-list li::before {
  content: ''; position: absolute; left: 0; top: 7px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--success-bg); border: 1px solid var(--success-bd);
}
.check-list li::after {
  content: ''; position: absolute; left: 5.5px; top: 12px; width: 7px; height: 3.5px;
  border-left: 2px solid var(--success); border-bottom: 2px solid var(--success);
  transform: rotate(-45deg);
}

/* ── Stat strip ────────────────────────────────────────────────────────── */
.stat-strip {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: var(--border); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden;
}
@media (max-width: 760px) { .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .stat-strip { grid-template-columns: minmax(0, 1fr); } }
.stat { background: var(--card); padding: 24px 20px; text-align: center; }
.stat b {
  display: block; font-family: 'JetBrains Mono', monospace; font-size: 24px; font-weight: 600;
  color: var(--pri); letter-spacing: -.02em;
}
.stat span { display: block; font-size: 13px; color: var(--neutral); margin-top: 6px; }

/* ── Pricing ───────────────────────────────────────────────────────────── */
.price-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 1080px) { .price-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .price-grid { grid-template-columns: 1fr; } }
.plan {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 24px 20px;
  display: flex; flex-direction: column; height: 100%;
}
.plan--featured {
  border-color: var(--pri); box-shadow: var(--glow); position: relative;
}
.plan--featured::before {
  content: 'Most popular'; position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(120deg, var(--pri), var(--sec)); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 20px; white-space: nowrap;
}
.plan h3 { font-size: 17px; }
.plan .amount {
  font-family: 'JetBrains Mono', monospace; font-size: 30px; font-weight: 600; color: var(--text);
  margin: 12px 0 2px; letter-spacing: -.03em;
}
.plan .amount small { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.plan .seats { font-size: 13px; color: var(--neutral); padding-bottom: 16px; border-bottom: 1px solid var(--divider); }
.plan ul { list-style: none; padding: 16px 0 0; margin: 0 0 20px; flex: 1; }
.plan li { font-size: 13.5px; color: var(--text-2); padding: 5px 0 5px 22px; position: relative; }
.plan li::before {
  content: '✓'; position: absolute; left: 0; color: var(--sec); font-weight: 700; font-size: 12px;
}
.plan li.off { color: var(--faint); }
.plan li.off::before { content: '—'; color: var(--faint); }
.plan .btn { width: 100%; }

/* Comparison matrix */
.matrix-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r); background: var(--card); }
/* border-collapse: separate (not the global collapse) is deliberate: a sticky
   thead with collapsed borders drops its cell borders and lets the header
   columns size independently of the body, which is exactly the "headers not
   lined up with the content" bug. Separate borders + zero spacing keeps the
   auto layout (so the label column stays wide enough not to wrap) while making
   the header columns track the body columns instead of drifting out of line.
   The bottom border is re-applied per cell since collapse is off. */
.matrix { min-width: 720px; width: 100%; font-size: 14px; border-collapse: separate; border-spacing: 0; }
.matrix th, .matrix td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--divider); }
.matrix thead th {
  background: var(--surface); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--neutral); position: sticky; top: 0; z-index: 1;
}
.matrix tbody th { font-weight: 600; color: var(--text-2); }
.matrix td { text-align: center; color: var(--neutral); }
.matrix td.yes { color: var(--success); font-weight: 700; }
.matrix td.no { color: var(--faint); }
.matrix tbody tr:hover { background: var(--surface); }
.matrix caption { caption-side: bottom; padding: 12px 16px; font-size: 13px; color: var(--muted); text-align: left; }
/* The plan matrix centres its cells because they hold a tick or a dash. A table
   whose cells are sentences needs them ragged-right, or every row reads as a
   caption. */
.matrix--prose td { text-align: left; line-height: 1.55; }
.matrix--prose td.yes, .matrix--prose td.no { text-align: center; }

/* ── Dark band (SA features) ───────────────────────────────────────────── */
.band {
  background: linear-gradient(135deg, var(--nav-1), var(--nav-2) 55%, var(--nav-3));
  color: #fff; padding: 84px 0; position: relative; overflow: hidden;
}
.band::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(680px 380px at 92% 6%, rgba(0, 188, 212, .16), transparent 60%);
}
.band .wrap { position: relative; z-index: 1; }
.band h2 { color: #fff; }
.band-card {
  background: rgba(255, 255, 255, .055); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r); padding: 22px;
}
.band-card h3 { font-size: 16.5px; color: #fff; margin-bottom: 8px; }
.band-card p { color: #A9C4D8; font-size: 14px; }
.band-card .tag {
  display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: var(--cyan); background: rgba(0, 188, 212, .12); border: 1px solid rgba(0, 188, 212, .28);
  padding: 2px 8px; border-radius: 5px; margin-bottom: 12px;
}

/* ── CTA ───────────────────────────────────────────────────────────────── */
.cta {
  background: linear-gradient(120deg, var(--pri), var(--sec) 60%, #00A0AE);
  border-radius: var(--r-lg); padding: 52px 44px; color: #fff; text-align: center;
}
.cta h2 { color: #fff; font-size: clamp(26px, 3.2vw, 36px); }
.cta p { color: rgba(255, 255, 255, .86); margin: 14px auto 0; max-width: 60ch; }
.cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
@media (max-width: 620px) { .cta { padding: 38px 22px; } }

/* ── Footer ────────────────────────────────────────────────────────────── */
.footer { background: var(--nav-1); color: #93B0C6; padding: 60px 0 28px; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(5, minmax(0, 1fr)); gap: 32px; }
/* Six columns stop fitting well before the mobile breakpoint — step down to
   three first, otherwise the section headings wrap mid-word around 1000px. */
@media (max-width: 1100px) { .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.footer h4 {
  font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: #5C7C93; margin-bottom: 14px;
}
.footer ul { list-style: none; padding: 0; }
.footer li { margin-bottom: 9px; }
.footer a { color: #B9D0E0; font-size: 14px; }
.footer a:hover { color: var(--cyan); text-decoration: none; }
.footer .brand span { color: #fff; }
.footer .about { font-size: 14px; color: #7E9FB6; margin-top: 14px; max-width: 34ch; }
.footer-base {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .09);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: 13px; color: #6B8CA4;
}

/* ══ Docs layout ═══════════════════════════════════════════════════════ */
.docs { display: grid; grid-template-columns: 264px minmax(0, 1fr) 216px; gap: 40px; align-items: start; }
@media (max-width: 1200px) { .docs { grid-template-columns: 250px minmax(0, 1fr); } .toc { display: none; } }
@media (max-width: 900px) { .docs { grid-template-columns: 1fr; gap: 0; } }

.doc-nav {
  position: sticky; top: calc(var(--nav-h) + 24px); max-height: calc(100vh - var(--nav-h) - 48px);
  overflow-y: auto; padding: 32px 0 40px;
}
.doc-nav h4 {
  font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint); margin: 22px 0 8px;
}
.doc-nav h4:first-child { margin-top: 0; }
.doc-nav a {
  display: block; padding: 7px 12px; border-radius: var(--r-sm); font-size: 14.5px;
  color: var(--text-2); border-left: 2px solid transparent;
}
.doc-nav a:hover { background: var(--page); text-decoration: none; color: var(--pri); }
.doc-nav a[aria-current="page"] {
  background: #E9F1FC; color: var(--pri); font-weight: 600; border-left-color: var(--pri);
}
@media (max-width: 900px) {
  .doc-nav {
    position: static; max-height: none; padding: 16px 0;
    border-bottom: 1px solid var(--border); margin-bottom: 8px;
  }
  .doc-nav details { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 12px; }
  .doc-nav summary { font-weight: 600; cursor: pointer; font-size: 15px; }
}

/* ── Guide search ──────────────────────────────────────────────────────
   Ships with the `hidden` attribute and is revealed by ledgr.js, so a
   reader with no JavaScript never sees a box that would not search. The
   results panel is absolutely positioned so opening it never reflows the
   guide list underneath — a list that jumps as you type is unusable. */
.doc-search { position: relative; margin: 0 0 20px; }
.doc-search input {
  width: 100%; padding: 9px 12px; font: inherit; font-size: 14px;
  color: var(--text); background: var(--card);
  border: 1px solid var(--border); border-radius: var(--r-sm);
}
.doc-search input::placeholder { color: var(--faint); }
.doc-search input:focus {
  outline: none; border-color: var(--sec); box-shadow: 0 0 0 3px rgba(0, 131, 143, .14);
}
.doc-search-results {
  position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm);
  box-shadow: 0 12px 32px rgba(11, 25, 41, .16);
  max-height: 340px; overflow-y: auto; padding: 6px;
}
.doc-search-results a {
  display: block; padding: 8px 10px; border-radius: 6px; border-left: 0;
  font-size: 14px; color: var(--text-2);
}
.doc-search-results a strong { display: block; font-weight: 600; }
.doc-search-results a small { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
.doc-search-results a:hover,
.doc-search-results a.active { background: #E9F1FC; color: var(--pri); text-decoration: none; }
.doc-search-results a:hover small,
.doc-search-results a.active small { color: var(--pri); }
.doc-search-empty { margin: 0; padding: 10px; font-size: 13.5px; color: var(--muted); }

.doc-main { padding: 34px 0 88px; min-width: 0; }
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--pri); }
.crumbs span { margin: 0 6px; color: var(--faint); }

.doc-main h1 { font-size: clamp(30px, 3.6vw, 40px); }
.doc-main > p.lede { margin-top: 14px; font-size: 17px; }
.doc-main h2 {
  font-size: 25px; margin: 52px 0 14px; padding-top: 14px; scroll-margin-top: calc(var(--nav-h) + 20px);
}
.doc-main h3 { font-size: 18.5px; margin: 30px 0 10px; scroll-margin-top: calc(var(--nav-h) + 20px); }
.doc-main p { margin-top: 12px; color: var(--text-2); }
.doc-main ul, .doc-main ol { margin-top: 12px; color: var(--text-2); }
.doc-main li { margin-bottom: 7px; }
.doc-main li > ul, .doc-main li > ol { margin-top: 6px; }
.doc-main hr { border: 0; border-top: 1px solid var(--divider); margin: 44px 0; }
.doc-main table { margin-top: 18px; font-size: 14.5px; }
/* Reference tables can be wider than the content column. Let the table itself
   scroll rather than the page — no per-page wrapper markup needed. */
@media (max-width: 1100px) { .doc-main table { display: block; overflow-x: auto; } }
.doc-main th, .doc-main td { padding: 11px 14px; border: 1px solid var(--border); text-align: left; vertical-align: top; }
.doc-main th { background: var(--surface); font-weight: 600; font-size: 13px; }
.doc-main :not(pre) > code {
  background: var(--divider); border: 1px solid var(--border-soft); border-radius: 5px;
  padding: 1.5px 6px; font-size: .87em; color: #14416F;
  /* Endpoint paths are single unbreakable tokens — without this they widen the
     table past the column and the whole page scrolls sideways. */
  overflow-wrap: anywhere;
}
.doc-main img { border: 1px solid var(--border); border-radius: var(--r); }

/* Numbered step list */
.steps { list-style: none; padding: 0; margin-top: 22px; counter-reset: step; }
.steps > li {
  position: relative; padding: 0 0 22px 46px; margin: 0; counter-increment: step;
  border-left: 2px solid var(--divider);
}
.steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps > li::before {
  content: counter(step); position: absolute; left: -15px; top: -2px;
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--pri), var(--sec)); color: #fff;
  font-family: 'JetBrains Mono', monospace; font-size: 12.5px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.steps > li > strong { display: block; font-size: 16px; color: var(--text); margin-bottom: 4px; }
.steps p { margin-top: 6px; }

/* Callouts */
.note {
  border-radius: var(--r-sm); padding: 15px 18px; margin-top: 22px; font-size: 14.5px;
  border: 1px solid var(--info-bd); background: var(--info-bg); color: #14555C;
  border-left: 4px solid var(--sec);
}
.note strong { color: var(--sec); }
.note.warn { background: var(--warn-bg); border-color: var(--warn-bd); border-left-color: var(--warn); color: #7C4A02; }
.note.warn strong { color: #92400E; }
.note.tip { background: var(--success-bg); border-color: var(--success-bd); border-left-color: var(--success); color: #14532D; }
.note.tip strong { color: #166534; }
.note.plan { background: var(--purple-bg); border-color: #DDD6FE; border-left-color: var(--purple); color: #4C1D95; }
.note.plan strong { color: var(--purple); }
.note p { color: inherit; margin-top: 6px; }
.note p:first-child { margin-top: 0; }
.note a { color: inherit; font-weight: 600; text-decoration: underline; }

/* In-page table of contents */
.toc { position: sticky; top: calc(var(--nav-h) + 34px); padding: 34px 0; font-size: 13.5px; }
.toc h4 {
  font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 10px;
}
.toc a { display: block; padding: 5px 10px; color: var(--neutral); border-left: 2px solid var(--divider); }
.toc a:hover { color: var(--pri); text-decoration: none; }
.toc a.active { color: var(--pri); border-left-color: var(--cyan); background: var(--surface); font-weight: 600; }

/* Prev/next */
.doc-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 56px; }
@media (max-width: 620px) { .doc-pager { grid-template-columns: 1fr; } }
.doc-pager a {
  border: 1px solid var(--border); border-radius: var(--r); padding: 16px 18px; color: inherit;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.doc-pager a:hover { border-color: var(--cyan); text-decoration: none; box-shadow: var(--shadow-sm); }
.doc-pager small { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); }
.doc-pager b { display: block; margin-top: 4px; font-size: 15.5px; color: var(--pri); font-weight: 600; }
.doc-pager .next { text-align: right; }

/* ── Code blocks ───────────────────────────────────────────────────────── */
.code {
  position: relative; margin-top: 20px; border-radius: var(--r-sm); overflow: hidden;
  background: var(--code-bg); border: 1px solid #1E2A44;
}
.code-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 12px 8px 14px; background: #0B1322; border-bottom: 1px solid #1E2A44;
}
.code-head span {
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: #7D9CB8;
  letter-spacing: .04em; text-transform: uppercase;
}
.code-copy {
  background: rgba(255, 255, 255, .07); color: #C3D6E6; border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 6px; font-size: 11.5px; font-weight: 600; padding: 4px 10px; cursor: pointer;
  font-family: 'DM Sans', sans-serif;
}
.code-copy:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.code-copy[data-done="true"] { color: #4ADE80; border-color: rgba(74, 222, 128, .4); }
.code pre {
  margin: 0; padding: 15px 16px; overflow-x: auto; color: var(--code-fg);
  font-size: 13px; line-height: 1.62; tab-size: 2;
}
.code pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }

/* Method pills reused from the API sandbox */
.m {
  display: inline-block; min-width: 52px; text-align: center; color: #fff;
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 600;
  padding: 3px 7px; border-radius: 5px; letter-spacing: .03em;
}
.m.get { background: var(--success); } .m.post { background: #0EA5E9; }
.m.put { background: var(--warn); } .m.delete { background: var(--error); }

.ep-table { margin-top: 20px; font-size: 14px; }
.ep-table td:first-child { width: 76px; }
.ep-table td code { white-space: nowrap; }

/* ── Misc ──────────────────────────────────────────────────────────────── */
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.pill {
  font-size: 13px; font-weight: 500; padding: 6px 13px; border-radius: 20px;
  background: var(--card); border: 1px solid var(--border); color: var(--text-2);
}
.pill--onDark { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .16); color: #C7DCEA; }

.kbd {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; background: var(--card);
  border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px; padding: 2px 6px; color: var(--text-2);
}

/* ── Product page: one block per module ────────────────────────────────── */
.mod-block { scroll-margin-top: calc(var(--nav-h) + 16px); }
.mod-block + .mod-block { margin-top: 60px; padding-top: 60px; border-top: 1px solid var(--divider); }
.mod-head { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 26px; }
.mod-head .icon-tile { margin-bottom: 0; width: 52px; height: 52px; }
.mod-head .icon-tile svg { width: 25px; height: 25px; }
.mod-head h2 { font-size: clamp(23px, 2.6vw, 29px); }
.mod-head .meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mod-head .lede { margin-top: 10px; font-size: 16px; }
@media (max-width: 560px) { .mod-head { flex-direction: column; gap: 12px; } }

.feat { border: 1px solid var(--border); border-radius: var(--r); padding: 18px 20px; background: var(--card); }
.feat h4 { font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 700; margin: 0 0 6px; }
.feat p { font-size: 14px; color: var(--neutral); }

/* Jump bar on the product page */
.jump { display: flex; flex-wrap: wrap; gap: 8px; }
.jump a {
  font-size: 13.5px; font-weight: 500; padding: 7px 14px; border-radius: 20px;
  background: var(--card); border: 1px solid var(--border); color: var(--text-2);
}
.jump a:hover { border-color: var(--cyan); color: var(--pri); text-decoration: none; }
/* On a phone the wrapped bar stacked into several rows and swallowed half the
   screen. Below 720px it becomes a single row that scrolls sideways instead. */
@media (max-width: 720px) {
  .jump {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .jump::-webkit-scrollbar { display: none; }
  .jump a { flex: 0 0 auto; white-space: nowrap; }
}

/* ==========================================================================
   API playground (/developers/playground/)
   --------------------------------------------------------------------------
   The console used to ship its own document — its own :root, its own type,
   its own chrome — so it looked like a different product. Everything below is
   scoped to .pg* and draws entirely on the tokens above, so it inherits the
   site's palette, radii and shadows and cannot drift away from them again.
   ========================================================================== */
.pg { display: grid; grid-template-columns: 250px minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
@media (max-width: 1180px) { .pg { grid-template-columns: 230px minmax(0, 1fr); } .pg-side { grid-column: 1 / -1; } }
@media (max-width: 760px)  { .pg { grid-template-columns: 1fr; } .pg-side { grid-column: auto; } }

.pg-panel {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r);
  padding: 16px; box-shadow: var(--shadow-sm);
}
/* Sticky only where there is room beside the content; on a narrow screen the
   panels are stacked and pinning one would hide the thing below it.

   The index is a flex column pinned to the viewport: its search header does not
   shrink and does not scroll, and only the list beneath it scrolls. The earlier
   build made the whole panel scroll with the search box sticky INSIDE it — two
   nested scroll/sticky contexts, whose height maths disagreed (it pinned at
   nav-h + 16 but sized itself against nav-h + 48), so the last rows fell past
   the panel's bottom edge and the sticky header could jump over them. One scroll
   region, one height, and the list can never hide a row again. */
@media (min-width: 761px) {
  .pg-index {
    position: sticky; top: calc(var(--nav-h) + 16px);
    max-height: calc(100vh - var(--nav-h) - 32px);
    display: flex; flex-direction: column; overflow: hidden;
  }
}
@media (min-width: 1181px) {
  .pg-side { position: sticky; top: calc(var(--nav-h) + 16px); max-height: calc(100vh - var(--nav-h) - 32px); overflow-y: auto; }
}

.pg-h {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  color: var(--faint); margin: 0 0 10px;
}
.pg-cat {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  color: var(--faint); margin: 16px 0 6px;
}
.pg-index .pg-cat:first-child { margin-top: 0; }

.pg-ep {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 6px 8px; margin-bottom: 2px; border: 0; border-radius: var(--r-sm);
  background: transparent; cursor: pointer; font: inherit;
}
.pg-ep:hover { background: var(--surface); }
.pg-ep.active { background: #E9F1FC; }
.pg-ep .pg-path {
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.pg-method {
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em; color: #fff;
  padding: 3px 6px; border-radius: 5px; min-width: 42px; text-align: center; flex-shrink: 0;
}
.pg-method.GET { background: var(--success); }
.pg-method.POST { background: var(--chart-blue); }
.pg-method.PUT, .pg-method.PATCH { background: var(--warn); }
.pg-method.DELETE { background: var(--error); }

.pg-auth-badge {
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 5px; background: var(--surface); color: var(--neutral);
  border: 1px solid var(--border);
}
.pg-auth-badge.none { background: var(--success-bg); color: var(--success); border-color: var(--success-bd); }
.pg-auth-badge.jwt { background: var(--info-bg); color: var(--sec); border-color: var(--info-bd); }
.pg-auth-badge.api-key { background: var(--purple-bg); color: var(--purple); border-color: #DDD6FE; }
.pg-auth-badge.admin { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-bd); }
/* The five credential kinds nobody signing in here holds. They share one neutral
   treatment on purpose: the distinction that matters to a reader is "this is
   not my session", not which of the five it is. `signed-url` is the odd one —
   there is no token at all, the HMAC in the query string is the credential —
   but it lands in the same place for the reader: not callable from this console. */
.pg-auth-badge.driver-token,
.pg-auth-badge.supplier-token,
.pg-auth-badge.portal-token,
.pg-auth-badge.signed-url,
.pg-auth-badge.oidc { background: var(--surface); color: var(--neutral); border-color: var(--border); }

.pg-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 24px; box-shadow: var(--shadow-sm); }
.pg-sig { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 0; }
.pg-sig code { font-size: 14px; font-weight: 600; color: var(--text); background: none; padding: 0; }
.pg-summary { color: var(--neutral); font-size: 14.5px; margin-top: 12px; }
.pg-card .pg-h { margin-top: 22px; }

.pg-pre {
  background: var(--code-bg); color: var(--code-fg); border-radius: var(--r-sm);
  padding: 14px 16px; font-family: 'JetBrains Mono', monospace; font-size: 12px; line-height: 1.55;
  overflow-x: auto; white-space: pre;
}
.pg-pre--resp { white-space: pre-wrap; max-height: 340px; overflow: auto; margin-top: 8px; }

.pg-empty {
  border: 1px dashed var(--border); border-radius: var(--r); padding: 28px;
  text-align: center; color: var(--muted); font-size: 14px;
}
.pg-side .pg-empty { padding: 18px; font-size: 13px; }

.pg-auth, .pg-runner { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-sm); padding: 14px; }
.pg-status { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); margin: 0 0 10px; }
.pg-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex-shrink: 0; }
.pg-dot.on { background: var(--success); }

.pg-auth label, .pg-runner label {
  display: block; font-size: 11.5px; font-weight: 600; color: var(--neutral); margin: 10px 0 4px;
}
.pg-auth input, .pg-runner input, .pg-runner textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--card); color: var(--text); font-family: inherit; font-size: 12.5px;
}
.pg-runner textarea { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; line-height: 1.5; resize: vertical; }
.pg-auth input:focus, .pg-runner input:focus, .pg-runner textarea:focus { outline: 2px solid var(--cyan); outline-offset: 1px; border-color: var(--cyan); }
.pg-row { display: flex; gap: 8px; margin-top: 10px; }
.pg-row .btn { flex: 1; justify-content: center; }
.pg-note { font-size: 11.5px; line-height: 1.6; color: var(--muted); margin-top: 12px; }

.pg-status-line { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--neutral); margin: 10px 0 0; }
.pg-status-line.ok { color: var(--success); }
.pg-status-line.err { color: var(--error); }

/* --------------------------------------------------------------------------
   Finding one endpoint among ~800
   --------------------------------------------------------------------------
   The catalogue became the whole registered surface, so the index stopped
   being a list somebody scans and became one they search. Everything below
   exists to make that possible: a search field, method chips, and categories
   that stay shut until asked. Nothing here is decoration — an always-expanded
   index at this size is 800 rows of monospace and no way through it.
   -------------------------------------------------------------------------- */
.pg-search {
  width: 100%; padding: 8px 10px; margin-bottom: 8px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--card); color: var(--text); font-family: inherit; font-size: 12.5px;
}
.pg-search:focus { outline: 2px solid var(--cyan); outline-offset: 1px; border-color: var(--cyan); }

/* The search header is a fixed row at the top of the flex column: it keeps its
   height, never scrolls away, and the list below it owns the only scrollbar.
   Bled to the panel edges so the divider spans the full width. */
.pg-searchbar {
  flex: 0 0 auto; background: var(--card);
  margin: -16px -16px 0; padding: 16px 16px 12px;
  border-bottom: 1px solid var(--border-soft);
}

/* The one scroll region. Given room to breathe at top and bottom so the first
   category clears the divider and the last row never sits flush against the
   panel edge — the two places rows used to disappear. */
#pg-index {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  margin: 0 -16px -16px; padding: 12px 16px 16px;
  overscroll-behavior: contain;
}
@media (max-width: 760px) {
  /* Stacked: the panel is not pinned, so the list grows with its content and
     the page scrolls as one. No inner scrollbar to trap the pointer. */
  #pg-index { overflow: visible; margin: 0; padding: 0; }
}

.pg-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.pg-chip {
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em; color: #fff;
  padding: 3px 7px; border: 0; border-radius: 5px; cursor: pointer; font-family: inherit;
}
.pg-chip.GET { background: var(--success); }
.pg-chip.POST { background: var(--chart-blue); }
.pg-chip.PUT, .pg-chip.PATCH { background: var(--warn); }
.pg-chip.DELETE { background: var(--error); }
/* Switched off reads as drained rather than hidden, so the row keeps its
   shape and the chip stays where the eye last left it. */
.pg-chip.off { background: var(--surface); color: var(--faint); box-shadow: inset 0 0 0 1px var(--border); }

.pg-result-count {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: 11px; color: var(--faint); margin: 0 0 10px;
}
.pg-linkbtn {
  border: 0; background: none; padding: 0; cursor: pointer; font: inherit;
  font-size: 11px; color: var(--sec); text-decoration: underline; flex-shrink: 0;
}
.pg-linkbtn:hover { color: var(--pri); }

.pg-group { margin-bottom: 2px; }
.pg-cat-toggle {
  display: flex; align-items: center; gap: 6px; width: 100%; text-align: left;
  padding: 6px 4px; border: 0; border-radius: var(--r-sm);
  background: transparent; cursor: pointer; font: inherit;
}
.pg-cat-toggle:hover { background: var(--surface); }
.pg-cat-name {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  color: var(--faint); flex: 1; min-width: 0;
}
.pg-cat-toggle.open .pg-cat-name { color: var(--text-2); }
.pg-caret { color: var(--faint); transition: transform .12s ease; flex-shrink: 0; }
.pg-cat-toggle.open .pg-caret { transform: rotate(90deg); }
.pg-count {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--faint);
  background: var(--surface); border-radius: 9px; padding: 1px 6px; flex-shrink: 0;
}
.pg-eps { padding-left: 4px; }
.pg-eps[hidden] { display: none; }
.pg-blurb { font-size: 11px; line-height: 1.55; color: var(--muted); margin: 2px 4px 6px; }

/* Derived on the server from Plans.kt and ApiScopes, so these are the figures
   the licence guard and the key check will actually use. */
.pg-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pg-fact {
  display: inline-flex; align-items: baseline; gap: 6px; font-size: 11.5px; color: var(--text-2);
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-sm); padding: 5px 10px;
}
.pg-fact b {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--faint);
}
.pg-fact code { font-size: 11.5px; background: none; padding: 0; color: var(--text); }

.pg-warn {
  font-size: 12.5px; line-height: 1.6; color: #7C4A02; margin-top: 14px;
  background: var(--warn-bg); border: 1px solid var(--warn-bd);
  border-left: 3px solid var(--warn); border-radius: var(--r-sm); padding: 10px 12px;
}
.pg-row--left { justify-content: flex-start; }
.pg-row--left .btn { flex: 0 0 auto; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Support page enhancements (/support/)
   --------------------------------------------------------------------------
   Scoped to .sup* so they draw on the tokens above and cannot drift from the
   rest of the site. Three small touches: at-a-glance hero stats under the
   lede, a left accent rail on the four channel cards that colour-codes them
   to their icon tile, and a sticky jump bar that reads as a bar rather than a
   loose row of pills.
   ========================================================================== */

/* Hero stats — the answer to "is this worth reading" before the reading. Sits
   on the dark hero, so the numbers are light and the labels are muted. */
.sup-stats {
  display: flex; flex-wrap: wrap; gap: 14px 40px; margin-top: 32px;
  padding: 0; list-style: none;
}
.sup-stats li { display: flex; flex-direction: column; gap: 2px; }
.sup-stats b {
  font-family: 'JetBrains Mono', monospace; font-size: clamp(22px, 3vw, 28px);
  font-weight: 600; color: #fff; letter-spacing: -.02em; line-height: 1.1;
}
.sup-stats span { font-size: 13px; color: #9FBBD0; }

/* Accent channel cards — a coloured rail down the left edge that matches the
   card's icon tile, so the eye can pair "the teal one" with "email" without
   reading. Rides on top of .card, so it keeps the card's hover and shadow. */
.channel-card { position: relative; overflow: hidden; }
.channel-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--pri);
}
.channel-card--soft::before   { background: linear-gradient(var(--sec), var(--cyan)); }
.channel-card--teal::before   { background: linear-gradient(var(--sec), var(--cyan)); }
.channel-card--cyan::before   { background: linear-gradient(var(--cyan), #4DD0E1); }
.channel-card--purple::before { background: linear-gradient(var(--purple), #A78BFA); }

/* Sticky jump bar — the same pills as .jump, but wrapped so it reads as a bar:
   a hairline top and bottom, and it pins under the nav as the page scrolls. */
.sup-jumpbar {
  position: sticky; top: var(--nav-h); z-index: 40;
  background: var(--page);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 12px 0;
}
.sup-jumpbar .wrap { display: flex; align-items: center; }