/* ============================================================
   MARKETING PAGE — shared chrome for the simple content pages
   (about, blog, contact, api, privacy, terms, security, cookies).
   Mirrors the index.html .dnav + .ft styles so the brand surface
   is consistent. Pair with css/tokens.css + css/app.css.
   ============================================================ */

body { background: var(--bg); color: var(--text-1); font-family: var(--font-sans); }

/* Slim sticky top nav — same as homepage. */
/* min-height, never height: below 820px `.inner` is `flex-wrap: wrap`, and a
   fixed 56px cannot hold the rows it wraps onto — the CTAs rendered 64px below
   their own parent's bottom edge and painted over the hero <h1> on every one
   of the 23 marketing pages at phone width (found 2026-09-05). The bar still
   measures exactly 56px on desktop, where nothing wraps. */
.dnav {
  position: sticky; top: 0; z-index: 40; min-height: 56px;
  background: var(--surface); border-bottom: 1px solid var(--border-light);
}
.dnav .inner {
  max-width: 1280px; margin: 0 auto; min-height: 56px; padding: 0 24px;
  display: flex; align-items: center; gap: 28px;
}
.dnav nav { display: flex; gap: 22px; margin-left: 24px; }
.dnav nav a {
  font-size: 13px; font-weight: 500; color: var(--text-2);
  text-decoration: none; transition: color 100ms;
}
.dnav nav a:hover, .dnav nav a.active { color: var(--text-1); }
.dnav .ctas { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.dnav .login { font-size: 13px; color: var(--text-2); text-decoration: none; font-weight: 500; }
/* Pill text is 11px on the --muted grey; --text-3 (#9CA3AF) measured 2.3:1
   there. --text-2 clears AA with room to spare. The pill's accessible name
   is its visible text ("51 lenders on panel"); the dot is a pseudo-element
   and never reaches the accessibility tree. */
.dnav .live-dot {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-family: var(--font-mono); color: var(--text-2);
  padding: 3px 8px; background: var(--muted); border-radius: 999px;
}
.dnav .live-dot::before {
  content: ""; width: 6px; height: 6px; background: var(--pass-text);
  border-radius: 50%;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pass-text) 25%, transparent);
  animation: dnav-pulse 2.4s infinite;
}
@keyframes dnav-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) {
  .dnav .live-dot::before { animation: none; }
}

/* Inline text links inside prose are otherwise distinguished from the copy
   by colour alone (WCAG 1.4.1; axe link-in-text-block). Underline them.
   Buttons and the footer / nav lists are excluded — those are not in-text. */
.mp-wrap p a:not(.btn), .mp-wrap li a:not(.btn), .mp-wrap td a:not(.btn), .mp-wrap dd a:not(.btn) {
  text-decoration: underline; text-underline-offset: 2px;
}

/* Page container */
.mp-wrap { max-width: 880px; margin: 0 auto; padding: 64px 28px 96px; }
.mp-hero { padding-bottom: 32px; border-bottom: 1px solid var(--border-light); margin-bottom: 40px; }
.mp-hero .eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 14px;
}
.mp-hero h1 {
  font-family: var(--font-sans);
  font-size: 44px; font-weight: 700; letter-spacing: -1px;
  color: var(--text-1); line-height: 1.1; margin-bottom: 16px;
}
.mp-hero .lede {
  font-size: 18px; color: var(--text-2); line-height: 1.6;
  max-width: 640px;
}

.mp-body { font-size: 15px; color: var(--text-2); line-height: 1.7; }
.mp-body h2 {
  font-size: 22px; font-weight: 700; color: var(--text-1);
  letter-spacing: -.3px; margin: 36px 0 12px;
}
.mp-body h3 {
  font-size: 16px; font-weight: 600; color: var(--text-1);
  margin: 24px 0 8px;
}
.mp-body p { margin-bottom: 14px; }
.mp-body ul, .mp-body ol { margin: 0 0 14px 22px; }
.mp-body li { margin-bottom: 6px; }
.mp-body b, .mp-body strong { color: var(--text-1); font-weight: 600; }
/* Inline text links — scoped with :not(.btn) so we don't override
   the .btn / .btn-primary text colour (which would put blue text on a
   blue button = invisible). */
.mp-body a:not(.btn) { color: var(--accent); }

/* Inline contact-card grid used by contact.html */
.mp-contact-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px; margin: 24px 0;
}
.mp-contact-card {
  background: var(--surface); border: 1px solid var(--border-light);
  border-radius: 12px; padding: 20px;
}
.mp-contact-card h2, .mp-contact-card h3 { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--text-1); }
.mp-contact-card p { font-size: 13px; color: var(--text-2); margin: 0; }
.mp-contact-card a { color: var(--accent); font-weight: 600; }

/* Code block for the API page */
.mp-code {
  background: var(--text-1); color: #f9fafb;
  font-family: var(--font-mono); font-size: 12px;
  padding: 16px 18px; border-radius: 10px;
  overflow-x: auto; margin: 12px 0 18px; line-height: 1.55;
}

/* Footer (same as homepage) */
.ft { background: var(--surface); border-top: 1px solid var(--border-light); padding: 56px 0 20px; margin-top: 60px; }
.ft .inner {
  max-width: 1280px; margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 32px;
}
/* Footer column headings are <h2 class="ft-h"> (they were <h5>, which skipped
   levels after the page's h2/h3 — axe heading-order). Same look either way. */
.ft h5, .ft .ft-h { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-1); margin: 0 0 14px; }
.ft ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ft ul a { color: var(--text-2); text-decoration: none; font-size: 13px; }
.ft ul a:hover { color: var(--text-1); }
/* Muted copy uses --neutral-text (#6B7280, 4.8:1 on white) rather than
   --text-3 (#9CA3AF, 2.5:1) wherever it is real text. --text-3 itself is
   unchanged and still fine for placeholders and decorative glyphs. */
.ft .ft-tag { font-size: 13px; color: var(--neutral-text); margin-top: 12px; line-height: 1.5; max-width: 280px; }
.ft .ft-bottom {
  max-width: 1280px; margin: 40px auto 0; padding: 20px 24px 0;
  border-top: 1px solid var(--border-light);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--neutral-text);
}
@media (max-width: 980px) {
  .ft .inner { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 720px) {
  .ft .inner { grid-template-columns: 1fr 1fr; }
  .mp-hero h1 { font-size: 32px; }
}
/* Let the top nav wrap and drop the decorative "51 lenders" pill so the
   logo + pill + nav links + CTAs stop overflowing the viewport. The
   breakpoint is 820px, not the 720px the rest of the phone rules use: with
   the TrailScope link in the nav the one-row bar needs ~775px, so at a
   768px tablet the CTAs sat at 618–775 and the document scrolled sideways
   by 7px on every marketing page (phone-width sweep, 2026-09-03). The
   homepage carries an inline copy of these three rules — change both. */
@media (max-width: 820px) {
  /* The wrapped rows need their own vertical breathing room — on one row the
     56px min-height supplied it. Wrapped, the bar is ~140px, so it stops being
     sticky here: pinned it would hold 17% of an 812px phone screen for the
     whole scroll. One row on desktop, so it stays sticky there. */
  .dnav { position: static; }
  .dnav .inner { flex-wrap: wrap; row-gap: 10px; padding-top: 10px; padding-bottom: 10px; }
  .dnav .live-dot { display: none; }
  .dnav nav { margin-left: 0; }
}

/* A wide table on a marketing page scrolls inside its own labelled,
   focusable region (`<div class="mp-table-wrap" tabindex="0" role="region"
   aria-label="…">`) — never `display: block` on the <table>, which loses its
   semantics (DESIGN.md), and never the document. `position: relative` is
   load-bearing: a visually hidden `.sr-only` element inside the scroller is
   position:absolute and, without a positioned ancestor, is laid out against
   the initial containing block outside the clipped area, which makes Chrome
   size the mobile layout viewport to it (the dashboard bug, 2026-09-03). */
.mp-table-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.mp-table-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Wide data tables (comparison `.vs`, policy `.policy`) are ~370-385px of
   columns and were spilling past the viewport on phones, scrolling the whole
   page sideways. Let the table itself scroll instead of the document.

   Selector specificity matters here. Each compare page declares
   `table.vs { … overflow: hidden }` in its own inline <style> to clip the
   border-radius. That's (0,0,1,1) AND later in source order, so a plain
   `.vs` rule (0,0,1,0) loses on both counts — `display:block` applied but
   `overflow-x:auto` did not, which silently CLIPPED the third column with
   no way to scroll to it (worse than the original overflow). `.mp-body
   table.vs` is (0,0,2,1) and wins outright without needing !important. */
@media (max-width: 760px) {
  .mp-body table.vs,
  .mp-body table.policy {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
}

/* ─── Free-calculators embed builder (/free-calculators.html) ── */
.fc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin: 24px 0 40px;
}
.fc-panel {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 20px 18px;
  min-width: 0;
}
.fc-label {
  display: block;
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--neutral-text);
  margin: 16px 0 7px;
}
.fc-panel .fc-label:first-child { margin-top: 0; }
.fc-select, .fc-hex, .fc-snippet {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--border-light); border-radius: 8px;
  background: var(--surface); color: var(--text-1);
  font-family: inherit; font-size: 14px; padding: 10px 12px;
  min-height: 44px;   /* touch target */
}
.fc-hex.is-invalid { border-color: #DC2626; }
.fc-snippet {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px; line-height: 1.6; resize: vertical; min-height: 132px;
}
.fc-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fc-color {
  width: 44px; height: 44px; padding: 0; background: none;
  border: 1px solid var(--border-light); border-radius: 8px; cursor: pointer;
}
.fc-hex { flex: 1 1 130px; }
.fc-error { font-size: 12px; color: #DC2626; margin-top: 6px; }
.fc-swatches { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.fc-swatch {
  width: 26px; height: 26px; border-radius: 7px;
  border: 1px solid var(--border-light); cursor: pointer;
}
.fc-toggle {
  flex: 1 1 0; min-height: 44px; cursor: pointer;
  border: 1px solid var(--border-light); border-radius: 8px;
  background: var(--surface); color: var(--text-1);
  font-family: inherit; font-size: 14px;
}
.fc-toggle.is-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.fc-note { font-size: 12px; color: var(--neutral-text); margin: 8px 0 0; }
.fc-copy { width: 100%; margin-top: 10px; min-height: 44px; }
.fc-preview {
  width: 100%; height: 620px; max-width: 100%;
  border: 1px solid var(--border-light); border-radius: 8px;
}
.fc-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0 8px; }
.fc-card {
  background: var(--surface); border: 1px solid var(--border-light);
  border-radius: 12px; padding: 18px 18px; min-width: 0;
}
.fc-card h3 { font-size: 15px; margin: 0 0 8px; }
.fc-card p { font-size: 13px; color: var(--text-2); line-height: 1.7; margin: 0; }
@media (max-width: 820px) {
  .fc-grid, .fc-faq { grid-template-columns: 1fr; }
}

/* ============================================================
   FREE CALCULATORS — embed builder
   Layout ported from the Claude Design "Free Calculators" page, measured from
   the export: 300px picker beside an 848px column at a 28px gap inside a
   1240px container, 16px card radius, a 560px scrolling list, and the snippet
   on a dark panel. Colour and type are LendScope's tokens — same design, this
   brand — so the page does not carry a second visual language.
   ============================================================ */

.fce { padding: 56px 0 96px; }
.fce-hero { max-width: 880px; margin: 0 auto 44px; padding: 0 24px; text-align: center; }

.fce-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 13px 5px 9px; border-radius: 999px;
  border: 1px solid var(--border-light); background: var(--surface);
  font-size: 12.5px; color: var(--text-2); box-shadow: var(--sh-xs);
}
.fce-pill-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); flex: none; }

.fce-hero h1 {
  margin: 22px 0 18px;
  font-size: clamp(38px, 5.2vw, 64px); font-weight: 500;
  line-height: 1.02; letter-spacing: -0.035em; color: var(--text-1);
}
.fce-lede {
  max-width: 52ch; margin: 0 auto;
  font-size: 17px; line-height: 1.55; color: var(--text-2);
}
/* What an embedded calculator tells the visitor, on the page that hands it
   out (brand review 2026-09-12). */
.fce-note {
  max-width: 52ch; margin: 10px auto 0;
  font-size: 13.5px; line-height: 1.5; color: var(--neutral-text);
}

/* Prose sits at reading width; the tool needs the room. */
.fce-wide { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

.fce-builder {
  display: grid; grid-template-columns: 300px minmax(0, 1fr);
  gap: 28px; align-items: start;
}
.fce-right { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.fce-card {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  overflow: hidden;
}
.fce-card-h {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 16px; border-bottom: 1px solid var(--border-light);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--text-2);
}
.fce-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }

/* ── Picker ─────────────────────────────────────────────── */
.fce-pick-body { padding: 14px; }
.fce-search {
  width: 100%; box-sizing: border-box; height: 36px; padding: 0 11px;
  border: 1px solid var(--border-medium); border-radius: 10px;
  background: var(--bg); color: var(--text-1);
  font-family: inherit; font-size: 13.5px;
  transition: border-color var(--tx-med), box-shadow var(--tx-med), background var(--tx-med);
}
.fce-search:focus {
  outline: none; background: var(--surface); border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}
.fce-list { max-height: 560px; overflow-y: auto; margin-top: 10px; }
.fce-list::-webkit-scrollbar { width: 8px; }
.fce-list::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: 4px; }

.fce-group {
  margin: 14px 0 6px; padding: 0 10px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--neutral-text);
}
.fce-group:first-child { margin-top: 2px; }
.fce-group[hidden], .fce-item[hidden] { display: none; }

.fce-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 10px; margin-bottom: 1px;
  border: 0; border-radius: 10px; background: none;
  font-family: inherit; font-size: 13.5px; color: var(--text-2);
  text-align: left; cursor: pointer;
  transition: background var(--tx-fast), color var(--tx-fast);
}
.fce-item svg { width: 15px; height: 15px; flex: none; opacity: .55; }
.fce-item:hover { background: var(--bg); color: var(--text-1); }
.fce-item:focus-visible {
  outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent);
}
.fce-item.is-on {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  color: var(--accent); font-weight: 500;
}
.fce-item.is-on svg { opacity: 1; }
.fce-empty { margin: 10px; font-size: 12.5px; color: var(--neutral-text); }

/* ── Brand controls ─────────────────────────────────────── */
.fce-brand {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px 26px; padding: 20px 18px;
}
.fce-ctrl-wide { grid-column: 1 / -1; }
.fce-ctrl-l {
  display: block; margin-bottom: 9px;
  font-size: 12.5px; font-weight: 500; color: var(--text-2);
}
.fce-ctrl-l em { float: right; font-style: normal; font-family: var(--font-mono);
                 font-size: 11px; color: var(--neutral-text); }

.fce-swatches { display: flex; flex-wrap: wrap; gap: 7px; }
.fce-swatch {
  width: 24px; height: 24px; border-radius: 50%; padding: 0;
  border: 1px solid rgba(8,12,24,.14); cursor: pointer;
  transition: transform var(--tx-fast), box-shadow var(--tx-fast);
}
.fce-swatch:hover { transform: scale(1.08); }
.fce-swatch.is-on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
/* The native picker, styled as the "+" tile so any colour is still reachable. */
.fce-swatch-more {
  width: 24px; height: 24px; padding: 0; border-radius: 50%;
  border: 1px dashed var(--border-medium); background: var(--surface);
  cursor: pointer; overflow: hidden;
}
.fce-hex {
  width: 100%; box-sizing: border-box; margin-top: 9px; height: 30px; padding: 0 9px;
  border: 1px solid var(--border-light); border-radius: 8px;
  background: var(--bg); color: var(--text-2);
  font-family: var(--font-mono); font-size: 12px;
}
.fce-hex.is-invalid,
.fce-text.is-invalid { border-color: #DC2626; }
.fce-text {
  width: 100%; box-sizing: border-box; height: 36px; padding: 0 11px;
  border: 1px solid var(--border-medium); border-radius: 10px;
  background: var(--bg); color: var(--text-1);
  font-family: inherit; font-size: 13.5px;
  transition: border-color var(--tx-med), box-shadow var(--tx-med), background var(--tx-med);
}
.fce-text:focus {
  outline: none; background: var(--surface); border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}
.fce-err { margin: 6px 0 0; font-size: 11.5px; color: #DC2626; }

.fce-seg {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
  padding: 3px; border-radius: 10px; background: var(--bg);
  border: 1px solid var(--border-light);
}
.fce-seg button {
  padding: 7px 10px; border: 0; border-radius: 7px; background: none;
  font-family: inherit; font-size: 13px; color: var(--text-2); cursor: pointer;
  transition: background var(--tx-fast), color var(--tx-fast), box-shadow var(--tx-fast);
}
.fce-seg button.is-on {
  background: var(--surface); color: var(--text-1);
  font-weight: 500; box-shadow: var(--sh-xs);
}
.fce-range { width: 100%; accent-color: var(--accent); margin-top: 6px; }
.fce-hint { margin: 8px 0 0; font-size: 12px; color: var(--neutral-text); }

/* ── Preview stage ──────────────────────────────────────── */
.fce-stage {
  border: 1px solid var(--border-light); border-radius: 16px;
  padding: 32px 26px; display: flex; justify-content: center;
  /* Faint grid, so the preview reads as a canvas rather than another card. */
  background-color: var(--bg);
  background-image: linear-gradient(var(--border-light) 1px, transparent 1px),
                    linear-gradient(90deg, var(--border-light) 1px, transparent 1px);
  background-size: 28px 28px;
}
.fce-preview {
  width: 100%; max-width: 560px; height: 620px;   /* matches the snippet's height="620" */
  border: 1px solid var(--border-medium); border-radius: 14px;
  background: var(--surface); box-shadow: var(--sh-lg);
}

/* ── Code panel ─────────────────────────────────────────── */
.fce-code {
  background: #0B1020; border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px; overflow: hidden;
}
.fce-code-h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 12px 18px; border-bottom: 1px solid rgba(255,255,255,.07);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.11em; text-transform: uppercase; color: rgba(255,255,255,.55);
}
.fce-copy {
  padding: 6px 13px; border: 0; border-radius: 7px;
  background: var(--accent); color: #fff;
  font-family: inherit; font-size: 12px; font-weight: 500;
  letter-spacing: 0; text-transform: none; cursor: pointer;
  transition: filter var(--tx-fast);
}
.fce-copy:hover { filter: brightness(1.08); }
.fce-snippet {
  display: block; width: 100%; box-sizing: border-box;
  padding: 16px 18px; border: 0; resize: vertical;
  background: transparent; color: #C8D3F5;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.7;
}
/* The snippet sits on a dark panel; a light inset ring is the visible focus. */
.fce-snippet:focus { outline: 2px solid #C8D3F5; outline-offset: -2px; }

/* ── How it works ───────────────────────────────────────── */
.fce-how {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px; margin-top: 48px;
}
.fce-how-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--border-medium); background: var(--surface);
  font-family: var(--font-mono); font-size: 11px; color: var(--text-2);
}
.fce-how-i h2, .fce-how-i h3 { margin: 11px 0 6px; font-size: 15px; font-weight: 600; color: var(--text-1); }
.fce-how-i p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--neutral-text); }

/* ── FAQ ────────────────────────────────────────────────── */
.fce-faq-wrap { max-width: 880px; margin: 72px auto 0; padding: 0 24px; }
.fce-faq-wrap h2 { margin: 0 0 8px; font-size: 30px; font-weight: 500; letter-spacing: -0.02em; }
.fce-faq details { border-bottom: 1px solid var(--border-light); }
.fce-faq summary {
  padding: 18px 0; cursor: pointer; list-style: none;
  font-size: 15px; color: var(--text-1);
}
.fce-faq summary::-webkit-details-marker { display: none; }
.fce-faq summary::after { content: '+'; float: right; color: var(--neutral-text); font-size: 17px; line-height: 1; }
.fce-faq details[open] summary::after { content: '−'; }
.fce-faq p { margin: 0 0 18px; font-size: 14px; line-height: 1.7; color: var(--text-2); max-width: 68ch; }

@media (max-width: 1080px) {
  .fce-builder { grid-template-columns: 1fr; }
  .fce-list { max-height: 320px; }
}
@media (max-width: 720px) {
  .fce-brand { grid-template-columns: 1fr; }
  .fce-how { grid-template-columns: 1fr; gap: 24px; }
  .fce { padding-top: 36px; }
}

/* ============================================================
   Rules that used to be inline — style="…" attributes and per-page
   <style> blocks. The CSP's style-src carries no 'unsafe-inline'
   (2026-09-03), so every marketing page's styling lives here. Utilities
   first, then each page's block, verbatim, under its own heading.
   tests/unit/csp-inline-styles.test.mjs fails on any inline style.
   ============================================================ */

/* ── Utilities ─────────────────────────────────────────────── */
.mp-mt-8  { margin-top: 8px; }
.mp-mt-16 { margin-top: 16px; }
.mp-mt-24 { margin-top: 24px; }
.mp-mt-32 { margin-top: 32px; }
.mp-mt-40 { margin-top: 40px; }
/* Footnote paragraphs under the CTA. */
.mp-note    { font-size: 13px; color: var(--neutral-text); }
.mp-note-sm { font-size: 12px; color: var(--neutral-text); }
/* "About this guide" / "Maintained by" box on the long-form pages. */
.mp-aside { margin-top: 48px; padding: 22px 24px; border: 1px solid var(--border-light); border-radius: 12px; background: var(--surface); }
.mp-aside-lbl { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--neutral-text); margin-bottom: 8px; }
.mp-aside p { margin: 0; font-size: 13px; color: var(--text-2); line-height: 1.6; }
/* Accent notice (api.html preview box). */
.mp-accent-box { background: var(--accent-light); border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent); color: var(--accent); padding: 12px 16px; border-radius: 8px; font-size: 13px; }

/* ── blog.html ─────────────────────────────────────────────── */
.post-list { display: flex; flex-direction: column; gap: 18px; margin-top: 24px; }
.post-card {
  display: block; padding: 22px 24px;
  background: var(--surface); border: 1px solid var(--border-light);
  border-radius: 12px; text-decoration: none; color: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.post-card:hover { border-color: var(--accent); box-shadow: 0 4px 16px rgba(15,31,61,.05); }
.post-meta { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--neutral-text); margin-bottom: 8px; }
.post-title { font-size: 18px; font-weight: 700; color: var(--text-1); margin: 0 0 6px; letter-spacing: -.2px; }
.post-excerpt { font-size: 13px; color: var(--text-2); line-height: 1.55; margin: 0; }

/* ── glossary.html ─────────────────────────────────────────── */
.gloss { display: flex; flex-direction: column; gap: 2px; margin-top: 24px; }
.gloss-row {
  background: var(--surface); border: 1px solid var(--border-light); border-radius: 10px;
  padding: 18px 22px;
}
.gloss-term { font-size: 17px; font-weight: 700; color: var(--text-1); letter-spacing: -.2px; margin: 0 0 4px; }
.gloss-abbr { font-family: var(--font-mono); font-size: 12px; color: var(--accent); font-weight: 600; margin-right: 8px; }
.gloss-def { font-size: 14px; color: var(--text-2); line-height: 1.6; margin: 6px 0 0; }
.gloss-def b { color: var(--text-1); font-weight: 600; }
.index-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 32px; }
.index-nav a {
  padding: 4px 10px; border: 1px solid var(--border-light); border-radius: 6px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  color: var(--text-2); text-decoration: none;
}
.index-nav a:hover { background: var(--accent-light); color: var(--accent); border-color: var(--accent); }

/* ── aggregators/*.html ────────────────────────────────────── */
.fact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 24px 0; }
.fact-card { background: var(--surface); border: 1px solid var(--border-light); border-radius: 10px; padding: 16px 18px; }
.fact-card .lbl { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--neutral-text); margin-bottom: 6px; }
.fact-card .val { font-family: var(--font-mono); font-size: 20px; font-weight: 700; color: var(--text-1); line-height: 1; }
.fact-card .sub { font-size: 12px; color: var(--text-2); margin-top: 6px; }

/* ── compare/*.html ────────────────────────────────────────── */
/* The phone rule for table.vs earlier in this file is `.mp-body table.vs`
   (0,0,2,1) on purpose — it must beat this (0,0,1,1) overflow:hidden. */
table.vs { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 14px; background: var(--surface); border: 1px solid var(--border-light); border-radius: 12px; overflow: hidden; }
table.vs th, table.vs td { padding: 14px 18px; border-bottom: 1px solid var(--border-light); text-align: left; vertical-align: top; }
table.vs th { background: var(--bg); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--neutral-text); }
table.vs th.us { color: var(--accent); }
table.vs td.cat { font-weight: 600; color: var(--text-1); }
table.vs tr:last-child td { border-bottom: 0; }
.verdict { background: var(--accent-light); border-left: 4px solid var(--accent); padding: 20px 24px; border-radius: 0 12px 12px 0; margin: 32px 0; }
.verdict b { color: var(--accent); }

/* ── lender-portals.html ───────────────────────────────────── */
.pgrp { margin: 24px 0; }
.pgrp h2 {
  font-size: 13px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--neutral-text); margin: 0 0 12px;
}
.pgrp h2 .count {
  display: inline-block; margin-left: 8px; padding: 1px 8px;
  background: var(--bg); color: var(--text-2);
  border: 1px solid var(--border-light); border-radius: 999px;
  font-family: var(--font-mono); font-size: 11px;
}
.plist { display: flex; flex-direction: column; gap: 6px; }
a.pcard {
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 14px;
  padding: 12px 18px;
  background: var(--surface); border: 1px solid var(--border-light); border-radius: 10px;
  text-decoration: none; color: var(--text-1);
  transition: border-color .12s, box-shadow .12s;
}
a.pcard:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(15,31,61,.04); }
a.pcard .nm { font-size: 14px; font-weight: 600; }
a.pcard .ho { font-family: var(--font-mono); font-size: 11px; color: var(--neutral-text); margin-top: 2px; }
a.pcard .arr { color: var(--accent); font-size: 14px; font-family: var(--font-mono); }

/* ── self-employed-serviceability.html ─────────────────────── */
table.shading { width:100%; border-collapse:collapse; margin:24px 0; font-size:13px; background:var(--surface); border:1px solid var(--border-light); border-radius:12px; overflow:hidden; }
table.shading th, table.shading td { padding:12px 16px; text-align:left; border-bottom:1px solid var(--border-light); }
table.shading th { background:var(--bg); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--neutral-text); }
table.shading td.pct { font-family:var(--font-mono); font-weight:600; color:var(--text-1); }
table.shading tr:last-child td { border-bottom:0; }
/* .callout is shared with serviceability-explained.html (identical rule). */
.callout { background: var(--accent-light); border-left: 4px solid var(--accent); padding: 16px 20px; border-radius: 0 8px 8px 0; margin: 20px 0; font-size: 14px; color: var(--text-2); }
.callout b { color: var(--accent); }

/* ── serviceability-explained.html ─────────────────────────── */
.toc { background: var(--surface); border: 1px solid var(--border-light); border-radius: 12px; padding: 20px 24px; margin: 24px 0 40px; }
.toc h2 { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--neutral-text); margin: 0 0 12px; }
.toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 32px; }
.toc li { margin-bottom: 6px; font-size: 13px; }
.toc a { color: var(--text-2); text-decoration: none; }
.toc a:hover { color: var(--accent); }
.formula { background: var(--text-1); color: #f9fafb; font-family: var(--font-mono); font-size: 13px; padding: 16px 20px; border-radius: 8px; margin: 16px 0; line-height: 1.6; overflow-x: auto; }
table.policy { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 13px; }
table.policy th, table.policy td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border-light); }
table.policy th { background: var(--bg); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--neutral-text); }
@media (max-width: 720px) { .toc ol { columns: 1; } }

/* ── lenders-directory.html ────────────────────────────────── */
.lender-group { margin: 32px 0; }
.lender-group h2 {
  font-size: 13px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--neutral-text); margin: 0 0 14px;
}
.lender-group h2 .count {
  display: inline-block; margin-left: 8px; padding: 1px 8px;
  background: var(--bg); color: var(--text-2);
  border: 1px solid var(--border-light); border-radius: 999px;
  font-family: var(--font-mono); font-size: 11px;
}
.lender-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}
.lender-card {
  background: var(--surface); border: 1px solid var(--border-light);
  border-radius: 10px; padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
}
/* The per-lender tint (brand colour at 10% behind the brand colour) is the
   generated class .ab-<id> in css/lender-marks.css, written by
   scripts/lenders-directory.mjs with the card list. */
.lender-card .ab {
  width: 38px; height: 38px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  flex: none;
}
.lender-card .nm { font-size: 13px; font-weight: 600; color: var(--text-1); line-height: 1.3; min-width: 0; }
.lender-card .nm .meta {
  font-size: 11px; font-weight: 400; color: var(--neutral-text);
  font-family: var(--font-mono); margin-top: 2px;
}
/* Policy badge — generated per card by scripts/lenders-directory.mjs.
   Verified reads in --pass-text-aa (5.5:1 on --pass-bg); draft and generic
   in --neutral-text (4.6:1 on their tints). Same wording as the in-app
   Lenders page (js/lenders-page.js). */
.pol {
  display: inline-block; margin-top: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em; line-height: 1.4;
  padding: 2px 8px; border-radius: 999px;
  background: var(--neutral-bg); color: var(--neutral-text);
  border: 1px solid var(--neutral-border);
}
.pol-verified { background: var(--pass-bg); color: var(--pass-text-aa); border-color: var(--pass-border); }
.pol-draft { background: var(--refer-bg); border-color: var(--refer-border); }
/* Broker channel closed — the lender is on the panel but is not accepting
   new applications, so the card is de-emphasised and the badge is neutral
   grey rather than any status colour. */
.pol-closed { background: var(--neutral-bg); color: var(--text-2); border-color: var(--neutral-border); font-weight: 800; }
.lender-card.lender-closed { background: var(--muted, #F7F8FA); border-style: dashed; }
.lender-card.lender-closed .ab, .lender-card.lender-closed .nm { opacity: .7; }
.lender-card a.pol { text-decoration: none; }
.lender-card a.pol:hover, .lender-card a.pol:focus-visible { text-decoration: underline; }
.lender-card a.pol:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lender-legend { font-size: 13px; line-height: 1.8; color: var(--text-2); }
.lender-legend .pol { margin-top: 0; vertical-align: baseline; }

/* ── panel-changes.html (generated by scripts/panel-changelog.mjs) ── */
.pc-sub { font-size: 13px; color: var(--neutral-text); }
.pc-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; max-width: 460px; }
.pc-form input[type="email"] { flex: 1; min-width: 220px; padding: 9px 12px; border: 1px solid var(--border-medium); border-radius: 8px; font: inherit; font-size: 13px; }
.pc-form .btn { padding: 9px 14px; }
.pc-msg { flex-basis: 100%; font-size: 12px; color: var(--neutral-text); }
.pc-month { font-size: 15px; font-weight: 700; color: var(--text-1); margin: 28px 0 10px; letter-spacing: -.01em; }
.pc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.pc-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--border-light); border-radius: 10px; background: #fff; }
.pc-blob { flex: none; min-width: 44px; text-align: center; font-size: 10px; font-weight: 800; letter-spacing: .04em; padding: 4px 6px; border-radius: 6px; }
.pc-body { min-width: 0; flex: 1; }
.pc-title { font-size: 13.5px; font-weight: 600; color: var(--text-1); }
.pc-meta { font-size: 12px; color: var(--neutral-text); margin-top: 2px; }
.pc-commit { font-family: var(--font-mono, monospace); }
.pc-delta { flex: none; font-size: 11px; font-weight: 700; color: var(--neutral-text); }

/* ── methodology.html (generated by scripts/methodology.mjs) ── */
.meth-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 12px 0 18px; }
.meth-table thead tr { text-align: left; color: var(--neutral-text); font-size: 11px; letter-spacing: .05em; }
.meth-table th, .meth-table td { padding: 8px 10px; }
.meth-table .num { text-align: right; }
.meth-table tbody tr { border-top: 1px solid var(--border-light); }
.meth-table .lender { font-weight: 600; }
.meth-table .wb { color: var(--text-2); font-family: var(--font-mono, monospace); font-size: 11.5px; }
.meth-drafts { font-size: 13px; color: var(--text-2); }
.meth-area { font-size: 14px; margin: 22px 0 6px; font-family: var(--font-mono, monospace); }
.meth-area .n { color: var(--neutral-text); font-weight: 400; }
.meth-summary { font-size: 12.5px; color: var(--neutral-text); margin: 0 0 6px; }
.meth-titles { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6; }
.meth-list { font-size: 13.5px; line-height: 1.7; }