/* ============================================================
   HOMEPAGE — index.html's own rules (moved verbatim out of the page's
   <style> block on 2026-09-03: the CSP's style-src has no 'unsafe-inline').
   Loads after css/tokens.css + css/app.css. The .dnav / .ft rules are the
   homepage's own copies of the marketing chrome — kept as they were.
   ============================================================ */
/* Sticky .dnav sits at the very top of body — no padding-top needed.
   (Earlier `padding-top:64px` was a leftover from when the nav was
   position:fixed, and was leaving a 64px empty strip above the bar.) */
body { background: var(--bg); }

/* SLIM NAV */
/* min-height, never height — see the identical note in css/marketing-page.css.
   Below 820px `.inner` wraps and a fixed 56px cannot hold the rows it wraps
   onto; the CTAs escaped the bar and painted over the hero <h1>. Keep the two
   copies of this rule in step. */
.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 { 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; }
.dnav .live-dot {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-family: var(--font-mono); color: var(--text-2);   /* on --muted: --neutral-text is only 4.4:1 there */
  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: pulse 2.4s infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .dnav .live-dot::before { animation: none; } }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

/* GREETING */
.greet { padding: 36px 0 24px; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; }
.greet .left h1 { font-size: 36px; font-weight: 700; letter-spacing: -.6px; margin: 0 0 8px; color: var(--text-1); }
.greet .left .meta { font-size: 14px; color: var(--text-2); display: flex; flex-wrap: wrap; gap: 16px; }
.greet .left .meta b { color: var(--text-1); font-weight: 600; }
.greet .left .meta .dot::before { content: "·"; margin-right: 16px; color: var(--neutral-text); }
.greet .right { display: flex; align-items: center; gap: 10px; }

/* STAT STRIP */
.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
.strip-card { background: var(--surface); border: 1px solid var(--border-light); border-radius: 12px; padding: 16px 18px; position: relative; overflow: hidden; }
.strip-card .lab { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--neutral-text); margin-bottom: 8px; }
.strip-card .v { font-family: var(--font-mono); font-size: 26px; font-weight: 700; color: var(--text-1); letter-spacing: -.5px; line-height: 1; }
.strip-card .delta { margin-top: 8px; font-size: 11px; color: var(--neutral-text); }
.strip-card .delta b { color: var(--text-1); font-weight: 600; }
.strip-card .delta.up { color: var(--pass-text); }
.strip-card .delta.up b { color: var(--pass-text); }
.strip-card.featured { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); }
.strip-card.featured .lab { color: color-mix(in oklab, var(--primary-fg) 60%, transparent); }
.strip-card.featured .v { color: var(--primary-fg); }
.strip-card.featured .delta { color: color-mix(in oklab, var(--primary-fg) 65%, transparent); }
.strip-card.featured .delta b { color: var(--primary-fg); }
.strip-card .accent-dot { position: absolute; top: 16px; right: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* MAIN GRID */
.main-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; margin-bottom: 24px; }

.panel { background: var(--surface); border: 1px solid var(--border-light); border-radius: 12px; overflow: hidden; }
.panel-head { padding: 18px 20px; border-bottom: 1px solid var(--border-light); display: flex; align-items: center; justify-content: space-between; }
.panel-head .ttl-row { display: flex; align-items: baseline; gap: 12px; }
.panel-head h2, .panel-head h3 { font-size: 16px; font-weight: 600; letter-spacing: -.2px; margin: 0; }
.panel-head .sub { font-size: 12px; color: var(--neutral-text); font-family: var(--font-mono); }
.panel-head .right-tools { display: flex; align-items: center; gap: 6px; }
/* A label describing the sample panel, never a control — no pointer cursor,
   and inline-flex because these are <span>s, so `height` needs a box. */
.panel-head .pill {
  display: inline-flex; align-items: center; flex: none; white-space: nowrap;
  height: 24px; padding: 0 9px; border-radius: 999px;
  border: 1px solid var(--border-light); background: var(--surface);
  color: var(--text-2); font-size: 11px; font-weight: 500;
}
.panel-head .pill.on { background: var(--accent-light); color: var(--accent); border-color: color-mix(in oklab, var(--accent) 30%, transparent); font-weight: 600; }

.mini-tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; }
.mini-tbl thead th { text-align: left; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--neutral-text); padding: 10px 16px; background: var(--bg); border-bottom: 1px solid var(--border-light); }
.mini-tbl thead th.right { text-align: right; }
.mini-tbl tbody td { padding: 12px 16px; border-bottom: 1px solid var(--border-light); vertical-align: middle; }
.mini-tbl tbody tr:last-child td { border-bottom: 0; }
.mini-tbl .lend { display: flex; align-items: center; gap: 10px; }
.mini-tbl .pill-lg { width: 28px; height: 28px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 9px; font-weight: 700; flex: none; }
.mini-tbl .nm { font-weight: 600; color: var(--text-1); font-size: 13px; }
.mini-tbl .ty { font-size: 10px; color: var(--neutral-text); font-family: var(--font-mono); }
.mini-tbl .mono { font-family: var(--font-mono); font-weight: 700; color: var(--text-1); }
.mini-tbl .mono.pass { color: var(--pass-text-aa); }   /* 12px text: --pass-text is 3.8:1 on white */
.mini-tbl .right { text-align: right; }
.mini-tbl .bar { display: inline-block; width: 60px; height: 4px; background: var(--muted); border-radius: 2px; vertical-align: middle; margin-right: 8px; overflow: hidden; }
.mini-tbl .bar .fill { display: block; height: 100%; background: var(--pass-text); border-radius: 2px; }

.panel-foot { padding: 14px 20px; border-top: 1px solid var(--border-light); background: var(--bg); display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--neutral-text); }
/* The caption wraps on a phone; the link must not ("Open / in app / →"). */
.panel-foot a { color: var(--accent); font-weight: 600; text-decoration: none; white-space: nowrap; }

.stack { display: flex; flex-direction: column; gap: 24px; }

.feed { padding: 4px 0; }
.feed-item { padding: 14px 20px; display: flex; align-items: start; gap: 12px; border-bottom: 1px solid var(--border-light); }
.feed-item:last-child { border-bottom: 0; }
.feed-item .blob { width: 28px; height: 28px; border-radius: 6px; flex: none; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 9px; font-weight: 700; }
.feed-item .body { flex: 1; min-width: 0; }
.feed-item .b1 { font-size: 13px; color: var(--text-1); line-height: 1.5; }
.feed-item .b1 b { font-weight: 600; }
.feed-item .b2 { font-size: 11px; color: var(--neutral-text); margin-top: 3px; font-family: var(--font-mono); }
.feed-item .delta { flex: none; font-family: var(--font-mono); font-size: 12px; font-weight: 700; }
.feed-item .delta.down { color: var(--pass-text); }
.feed-item .delta.up { color: var(--fail-text); }
.feed-item .delta.flat { color: var(--neutral-text); }

.tryit .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border-light); }
.tryit .row:last-of-type { border-bottom: 0; }
.tryit .row .lab { font-size: 11px; color: var(--neutral-text); font-weight: 500; }
.tryit .row .val { font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--text-1); text-align: right; }
.tryit-result { padding: 16px 18px; background: linear-gradient(180deg, var(--accent-light), color-mix(in oklab, var(--accent-light) 50%, var(--surface))); border-top: 1px solid var(--border-light); }
.tryit-result .max { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.tryit-result .max .v { font-family: var(--font-mono); font-size: 28px; font-weight: 700; color: var(--accent); letter-spacing: -.5px; }
.tryit-result .max .l { font-size: 11px; color: var(--accent); font-weight: 600; }
.tryit-result .meta { display: flex; gap: 16px; font-size: 11px; color: var(--accent); font-weight: 500; }
.tryit-result .meta b { font-weight: 700; }

.sect-head { margin: 16px 0 16px; display: flex; align-items: end; justify-content: space-between; }
.sect-head h2 { font-size: 22px; font-weight: 700; letter-spacing: -.3px; margin: 4px 0 0; }
.sect-head .desc { color: var(--neutral-text); font-size: 13px; }

.use-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 32px; }
.use-card { background: var(--surface); border: 1px solid var(--border-light); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.use-card .tag { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px; border-radius: 999px; background: var(--accent-light); color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; width: max-content; }
.use-card .quote { font-size: 14px; line-height: 1.55; color: var(--text-1); flex: 1; }
.use-card .quote b { font-weight: 600; }
.use-card .person { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border-light); }
.use-card .person .av { width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: var(--primary-fg); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; }
.use-card .person .nm { font-size: 12px; font-weight: 600; color: var(--text-1); }
.use-card .person .role { font-size: 10px; color: var(--neutral-text); }

.feat-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 16px; margin-bottom: 32px; }
.feat-card { background: var(--surface); border: 1px solid var(--border-light); border-radius: 12px; padding: 22px; display: flex; flex-direction: column; gap: 14px; min-height: 220px; }
.feat-card h3 { font-size: 18px; font-weight: 700; letter-spacing: -.2px; margin: 0; }
.feat-card p { font-size: 13px; color: var(--text-2); line-height: 1.55; }
.feat-card .badge-row { margin-top: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.feat-card .b { font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 4px; background: var(--muted); color: var(--text-2); }
.feat-card .b.acc { background: var(--accent-light); color: var(--accent); }
.feat-card .b.pass { background: var(--pass-bg); color: var(--pass-text-aa); }

.mini-chart { height: 80px; display: flex; align-items: end; gap: 4px; padding: 8px 0; }
.mini-chart .b { flex: 1; background: var(--accent); border-radius: 2px 2px 0 0; opacity: .85; min-height: 4px; }
.mini-chart .b.mute { background: var(--border-medium); }

.vf-bars { display: flex; flex-direction: column; gap: 8px; }
.vf-row { display: grid; grid-template-columns: 60px 1fr 60px; align-items: center; gap: 8px; font-size: 11px; }
.vf-row .l { color: var(--neutral-text); font-weight: 600; }
.vf-row .v { font-family: var(--font-mono); font-weight: 700; text-align: right; }
.vf-row .bar { background: var(--muted); border-radius: 3px; height: 8px; overflow: hidden; }
.vf-row .bar .fill { height: 100%; border-radius: 3px; }

.cta-card { background: var(--primary); color: var(--primary-fg); border-radius: 12px; padding: 36px 36px; margin-bottom: 32px; display: grid; grid-template-columns: 1.6fr auto; gap: 32px; align-items: center; position: relative; overflow: hidden; }
.cta-card::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, color-mix(in oklab, var(--primary-fg) 8%, transparent) 1.2px, transparent 1.4px); background-size: 16px 16px; pointer-events: none; }
.cta-card h2 { color: var(--primary-fg); font-size: 28px; font-weight: 700; letter-spacing: -.4px; margin: 0 0 6px; }
.cta-card p { color: color-mix(in oklab, var(--primary-fg) 65%, transparent); font-size: 14px; }
.cta-card .actions { display: flex; gap: 10px; position: relative; z-index: 1; }
.cta-card .btn { background: var(--primary-fg); color: var(--primary); border-color: var(--primary-fg); }
.cta-card .btn.ghost { background: transparent; color: var(--primary-fg); border: 1px solid color-mix(in oklab, var(--primary-fg) 30%, transparent); }

.ft { padding: 32px 0; border-top: 1px solid var(--border-light); }
.ft .inner { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 32px; font-size: 12px; }
@media (max-width: 980px) { .ft .inner { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 720px) { .ft .inner { grid-template-columns: 1fr 1fr; } }
/* Mobile: collapse the hero/feature/testimonial grids to a single column.
   Without this every content grid stayed multi-column on phones, forcing
   the hero panel-preview table (.mini-tbl ~485px) wider than the viewport
   and causing horizontal scroll. */
@media (max-width: 860px) {
  .greet { grid-template-columns: 1fr; gap: 16px; align-items: start; }
  .stat-strip { grid-template-columns: 1fr 1fr; }
  .main-grid { grid-template-columns: 1fr; }
  .feat-grid { grid-template-columns: 1fr; }
  .use-grid { grid-template-columns: 1fr; }
  .cta-card { grid-template-columns: 1fr; gap: 20px; padding: 28px 24px; }
  /* Grid children default to min-width:auto, so the heading and the button
     row refused to shrink below their min-content width (~353px in a 342px
     box). `.cta-card` is overflow:hidden for its dot-pattern ::before, so
     the excess was CLIPPED rather than scrollable — the "Get started →"
     button and the end of the heading were sliced off on a phone. */
  .cta-card > * { min-width: 0; }
  .cta-card .actions { flex-wrap: wrap; }
  .cta-card h2 { font-size: 22px; }
  .mini-tbl { font-size: 11px; }
  .mini-tbl thead th, .mini-tbl tbody td { padding-left: 12px; padding-right: 12px; }
  /* The lender table is intrinsically ~440px (5 data columns) — let the
     panel scroll horizontally inside its own card instead of breaking the
     page layout. */
  .panel { overflow-x: auto; }
}
/* Let the top nav wrap and drop the decorative "51 lenders" pill so the
   logo + pill + nav links + CTAs stop overflowing the viewport. This is the
   homepage's copy of the block in css/marketing-page.css — keep them in step
   (tests/unit/homepage-claims.test.mjs checks both).

   The breakpoint is 820px, not 720px: with the TrailScope link the one-row
   bar needs ~775px. The sibling pages moved to 820 on 2026-09-03; this copy
   was missed, so index.html alone still measured scrollWidth 775 at a 768px
   tablet — 7px of sideways scroll, the same bug, for two more days. */
@media (max-width: 820px) {
  /* The wrapped rows need their own vertical 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; }
}
@media (max-width: 480px) {
  .stat-strip { grid-template-columns: 1fr; }
}
.ft h5, .ft .ft-h { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--neutral-text); margin: 0 0 12px; }
.ft ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.ft ul a { font-size: 12px; color: var(--text-2); text-decoration: none; }
.ft ul a:hover { color: var(--text-1); }
.ft-tag { color: var(--neutral-text); margin-top: 8px; line-height: 1.5; }
.ft-bottom { padding: 14px 0; margin-top: 0; border-top: 1px solid var(--border-light); color: var(--neutral-text); font-size: 11px; display: flex; justify-content: space-between; }

.new-pill { display: inline-flex; align-items: center; gap: 5px; height: 18px; padding: 0 7px; background: var(--accent); color: #fff; border-radius: 4px; font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

/* ── Values that were inline style attributes on the page ───────────
   Static bar widths / chart heights for the sample panels, the tint and
   text classes of the DTI bars, and two one-off text treatments. */
.w-48 { width: 48%; } .w-50 { width: 50%; } .w-62 { width: 62%; } .w-67 { width: 67%; }
.w-88 { width: 88%; } .w-94 { width: 94%; } .w-95 { width: 95%; } .w-96 { width: 96%; }
.w-98 { width: 98%; } .w-99 { width: 99%; } .w-100 { width: 100%; }
.h-42 { height: 42%; } .h-48 { height: 48%; } .h-55 { height: 55%; } .h-60 { height: 60%; }
.h-62 { height: 62%; } .h-70 { height: 70%; } .h-75 { height: 75%; } .h-78 { height: 78%; } .h-88 { height: 88%; }
.vf-row .fill.fill-pass { background: var(--pass-text); }
.vf-row .fill.fill-refer { background: var(--refer-text); }
.vf-row .fill.fill-accent { background: var(--accent); }
.vf-row .fill.fill-override { background: #9333EA; }
.vf-row .v.v-pass { color: var(--pass-text-aa); }
.vf-row .v.v-refer { color: var(--refer-text-aa); }
.panel-foot .strong { color: var(--text-1); font-weight: 600; }
.panel-head .sub a.sub-link { color: inherit; }