/* ═══════════════════════════════════════════════════════════════════════
   usefast.ai — site styles

   Built on the LIVE site's actual structure, sampled from production:
     hero      linear-gradient(150deg,#0E2A66,#0F3FA0 62%,#0A2C78)
     body      alternating #FFFFFF and #F2F4F8
     type      DM Sans / DM Mono, green #22C55E accent

   Earlier attempts got this wrong in both directions — one flooded the whole
   page with the hero gradient, the other made the hero light. The gradient is
   the HERO. The body is light. That contrast is the site's identity.

   Three deliberate improvements over the live page:
     1. DM Mono promoted to the data voice (live: 29 elements vs 627 sans).
     2. Display type larger and tighter (live H1 is 32px/w800).
     3. No emoji section markers — ruled mono eyebrows carry the same signal.

   One dark band (.dark) for the AI section: a change of mode, not of brand.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* --ink-3 is the muted tone for small print. It was #697585, which measured
     4.45:1 on the hero's #F8F9FC ground — just under the 4.5 minimum for
     body-size text. Darkened so every muted label clears AA on all three
     grounds the site uses. */
  --white:#FFFFFF; --mist:#F2F4F8; --ink:#0E1116; --ink-2:#3D4652; --ink-3:#5D6877;
  --rule:#E2E5EB; --rule-2:#CDD3DC;

  --navy:#0F3FA0; --navy-mid:#0E2A66; --navy-alt:#0A2C78; --navy-deep:#071233;
  --green:#22C55E; --green-ink:#12813C; --green-wash:#EAF7EF; --green-line:#BFE7CD;
  --amber:#B45309; --amber-wash:#FEF6E7; --amber-line:#F0DCB8;

  --sans:'DM Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'DM Mono',ui-monospace,'SF Mono','Cascadia Mono',Consolas,monospace;

  --gut:clamp(20px,4vw,60px); --maxw:1240px; --r:8px;
}

*{box-sizing:border-box}
/* NOTE: scroll-behavior:smooth is deliberately NOT set globally on the root
   element. Applied there it animates every scroll the browser performs, which
   on a 17,000px page makes wheel and trackbar input feel laggy or unresponsive
   — as though the page is fighting you. Anchor links are smoothed in JS
   instead, so only the jumps that should glide actually do. */

/* The masthead is sticky, so an anchor jump would land the target underneath
   it — 65px of every section was being swallowed, including the heading on
   any section with modest top padding. scroll-margin keeps the target clear.
   Driven by a variable so it cannot drift out of sync with the header, and
   given extra room on narrow screens where the header wraps to two rows. */
:root{--mast-h:66px}
@media(max-width:1079px){:root{--mast-h:62px}}
[id]{scroll-margin-top:calc(var(--mast-h) + 16px)}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--sans);
     font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
p{margin:0}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:3px}

h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.035em;text-wrap:balance}
h1{font-size:clamp(2.5rem,5.4vw,4.3rem);line-height:1.03}
h2{font-size:clamp(1.95rem,4vw,3.15rem);line-height:1.07}
h3{font-size:1.14rem;line-height:1.35;letter-spacing:-.018em;font-weight:700}
/* Item-level headings inside a section. These were level-4 headings directly
   under a level-2, which skips a level for screen readers; they are level 3
   now, and this keeps the smaller visual weight the design wants. */
h3.sub{font-size:.97rem;line-height:1.4;letter-spacing:-.012em;font-weight:700}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--navy);color:#fff;
      padding:13px 20px;border-radius:0 0 var(--r) 0;font:600 .9rem/1 var(--sans)}
.skip:focus{left:0}
.lede{font-size:clamp(1.03rem,1.3vw,1.17rem);line-height:1.62;color:var(--ink-2);max-width:62ch}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* Mono eyebrow — replaces the live site's emoji section markers. */
.eyebrow{display:flex;align-items:center;gap:11px;margin:0 0 18px;
         font:500 .68rem/1 var(--mono);letter-spacing:.19em;text-transform:uppercase;color:var(--navy)}
.eyebrow::after{content:'';flex:1;height:1px;background:var(--rule);max-width:86px}
.eyebrow.q{color:var(--amber)}

.btn{display:inline-flex;align-items:center;gap:9px;border-radius:var(--r);cursor:pointer;
     font:600 .93rem/1 var(--sans);padding:16px 25px;border:1px solid var(--navy);
     background:var(--navy);color:#fff;transition:background .16s ease,border-color .16s ease}
.btn:hover{background:#0C337F;border-color:#0C337F}
.btn.green{background:var(--green);border-color:var(--green);color:#04240F}
.btn.green:hover{background:#2ad96a;border-color:#2ad96a}
.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.34)}
.btn.ghost:hover{background:rgba(255,255,255,.10)}

/* ── Masthead ─────────────────────────────────────────────────────────
   Light, to match the white hero. The brand mark keeps the navy→green
   gradient so the identity is still the first thing on the page. */
.mast{position:sticky;top:0;z-index:40;background:rgba(251,251,252,.90);
      backdrop-filter:blur(12px);border-bottom:1px solid var(--rule)}
.mast .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding-block:13px}
.brand{display:flex;align-items:center;gap:11px;margin-right:auto}
.mark{width:30px;height:30px;border-radius:7px;display:grid;place-items:center;flex:none;
      background:linear-gradient(145deg,var(--navy),var(--green));
      color:#04240F;font:800 .92rem/1 var(--sans);letter-spacing:-.05em}
.brand-logo{width:46px;height:34px;border-radius:6px;display:block;overflow:hidden;flex:none;
            background:#fff}
.brand-logo img{display:block;width:46px;height:46px;max-width:none;transform:translateY(-6px)}
.brand b{font-size:1.18rem;letter-spacing:-.04em;color:var(--ink)}
.brand .sub{font:500 .62rem/1 var(--mono);letter-spacing:.21em;text-transform:uppercase;
            color:var(--ink-3);display:none}
@media(min-width:760px){.brand .sub{display:inline}}
.mast nav{display:none;gap:25px;font-size:.89rem;color:var(--ink-2)}
.mast nav a:hover{color:var(--ink)}
.mast .btn{padding:11px 18px;font-size:.86rem}
.navtoggle{display:grid;gap:4px;place-content:center;width:40px;height:38px;cursor:pointer;
           background:transparent;border:1px solid var(--rule-2);border-radius:var(--r)}
.navtoggle span{display:block;width:19px;height:1.5px;background:var(--ink);border-radius:1px;
                transition:transform .22s ease,opacity .18s ease}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
@media(prefers-reduced-motion:reduce){.navtoggle span{transition:none}}
.mast nav[data-open="true"]{display:flex;flex-direction:column;gap:0;order:3;flex-basis:100%;
  padding:4px 0 8px;border-top:1px solid var(--rule);margin-top:10px}
.mast nav[data-open="true"] a{padding:13px 2px;font-size:1rem;
  border-bottom:1px solid var(--rule)}
.mast nav[data-open="true"] a:last-child{border-bottom:0}
@media(min-width:1080px){
  .mast nav{display:flex}
  .navtoggle{display:none}
  .mast nav[data-open="true"]{flex-direction:row;gap:25px;order:0;flex-basis:auto;
    padding:0;border-top:0;margin-top:0}
  .mast nav[data-open="true"] a{padding:0;font-size:.89rem;border-bottom:0}
}

/* ── Section grounds — matches the live alternation ─────────────────── */
section{position:relative}
.band > .wrap{padding-block:clamp(62px,7.5vw,110px)}
.band.mist{background:var(--mist)}
.band.white{background:var(--white)}
.head{max-width:64ch}
.head h2{margin-bottom:20px}

/* ── Hero — white ground ──────────────────────────────────────────────
   The identity is carried by the type, the green accent and the dark
   Layer panel rather than by a coloured ground. A faint blue wash at the
   top right keeps it from reading as plain white. */
.hero{background:#F8F9FC;color:var(--ink);position:relative;overflow:hidden;
      border-bottom:1px solid var(--rule)}
.hero::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(105% 85% at 88% -8%,rgba(15,63,160,.09) 0%,transparent 60%)}
.hero > .wrap{position:relative;z-index:2;padding-block:clamp(52px,6.5vw,96px) clamp(56px,7vw,104px)}
.hero-grid{display:grid;gap:clamp(34px,4vw,56px);grid-template-columns:minmax(0,1fr);align-items:center}
@media(min-width:1080px){.hero-grid{grid-template-columns:1.06fr .94fr}}
.pill{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--rule-2);
      background:var(--white);border-radius:999px;padding:8px 16px;
      font:500 .67rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
      color:var(--ink-2)}
.pill i{width:6px;height:6px;border-radius:50%;background:var(--green);flex:none}
.hero h1{margin-top:22px}
.hero h1 span{color:var(--green-ink)}
.hero .lede{margin-top:22px;color:var(--ink-2);max-width:56ch}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.cta-note{margin-top:17px;font:.75rem/1.55 var(--mono);color:var(--ink-3)}
.hero .disc{margin-top:20px;padding-left:14px;border-left:2px solid var(--rule-2);
            font-size:.83rem;line-height:1.6;color:var(--ink-3);max-width:54ch}
/* Ghost button needs dark text now that its ground is light. */
.hero .btn.ghost{color:var(--ink);border-color:var(--rule-2)}
.hero .btn.ghost:hover{background:var(--white);border-color:var(--ink-3)}

/* FastIQ Layer panel — the live site's, with a mono status voice. */
/* Opaque navy: on a white hero this panel is the brand anchor, and it echoes
   the Scenario Engine's dark panel further down the page. */
.layer{border:1px solid rgba(255,255,255,.14);border-radius:14px;overflow:hidden;color:#fff;
       background:linear-gradient(158deg,var(--navy-mid) 0%,var(--navy) 58%,var(--navy-alt) 100%);
       box-shadow:0 40px 84px -46px rgba(14,42,102,.72)}
.layer-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:15px 18px;
         border-bottom:1px solid rgba(255,255,255,.13);background:rgba(7,18,51,.34)}
.layer-h b{font-size:.97rem;letter-spacing:-.022em}
.live{margin-left:auto;display:inline-flex;align-items:center;gap:7px;
      font:500 .63rem/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--green)}
.live i{width:6px;height:6px;border-radius:50%;background:var(--green);flex:none}
@media(prefers-reduced-motion:no-preference){.live i{animation:blip 2.2s ease-in-out infinite}}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.3}}
.layer ul,.layer dl{list-style:none;margin:0;padding:0}
.hl-file{padding:13px 18px 0;font:.72rem/1.5 var(--mono);color:rgba(255,255,255,.55)}

/* Decision record. A ledger of what was decided, not a price list — term on
   the left in mono, the finding on the right. Reads as a document. */
.hl-entry{display:grid;grid-template-columns:82px 1fr;gap:4px 16px;align-items:baseline;
          padding:13px 18px;border-bottom:1px solid rgba(255,255,255,.09)}
.hl-entry:last-of-type{border-bottom:0}
.hl-entry dt{font:500 .62rem/1.6 var(--mono);letter-spacing:.13em;text-transform:uppercase;
             color:rgba(255,255,255,.44)}
.hl-entry dd{margin:0;font-size:.94rem;font-weight:600;letter-spacing:-.015em}
.hl-entry dd span{display:block;margin-top:3px;font:.71rem/1.5 var(--mono);
                  color:rgba(255,255,255,.55);font-weight:400;letter-spacing:0}
.hl-entry.chose dd{color:var(--green)}
.hl-entry.over dd{color:rgba(255,255,255,.82)}
.hl-entry.held dt{color:#FFB547}
.hl-entry.held dd{color:#FFD79A}
.hl-entry.sealed dt{color:rgba(255,255,255,.44)}
.hl-entry.sealed dd{font-size:.88rem;font-weight:500;color:rgba(255,255,255,.78)}
.hl-empty{padding:22px 18px;font-size:.88rem;line-height:1.6;color:rgba(255,255,255,.66)}
/* Lender, product and rate — subdued, beneath the decision, never above it. */
.hl-details{padding:12px 18px;border-top:1px solid rgba(255,255,255,.09);
            background:rgba(0,0,0,.16);font:.68rem/1.6 var(--mono);
            color:rgba(255,255,255,.5)}
.hl-details span{display:block;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
                 color:rgba(255,255,255,.36);margin-bottom:4px}
.layer-f{padding:13px 18px;border-top:1px solid rgba(255,255,255,.13);background:rgba(7,18,51,.3);
         font:.68rem/1.6 var(--mono);color:rgba(255,255,255,.5);
         display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:space-between;align-items:baseline}
.hl-cta{color:var(--green);white-space:nowrap}
.hl-cta:hover{color:#fff}
/* Skeleton rows hold the panel's height so the hero does not jump on arrival. */
.hl-sk{padding:13px 18px;border-bottom:1px solid rgba(255,255,255,.09)}
.hl-sk i{display:block;height:11px;border-radius:3px;background:rgba(255,255,255,.10)}
@media(prefers-reduced-motion:no-preference){
  .hl-sk i{animation:e-pulse 1.35s ease-in-out infinite}}

/* ── Ticker ─────────────────────────────────────────────────────────── */
.ticker{background:var(--navy-deep);border-block:1px solid rgba(255,255,255,.09);overflow:hidden}
.ticker-in{display:flex;gap:40px;padding:13px 0;width:max-content;
           font:.73rem/1 var(--mono);color:rgba(255,255,255,.6);letter-spacing:.04em}
@media(prefers-reduced-motion:no-preference){.ticker-in{animation:slide 54s linear infinite}}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker-in span{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.ticker-in b{color:#fff;font-weight:500}
.ticker-in i{width:5px;height:5px;border-radius:50%;background:var(--green);flex:none}

/* ── Thesis ─────────────────────────────────────────────────────────
   The argument the whole product rests on, given room to land. Centered,
   larger than any other h2, and deliberately the quietest section on the
   page — no cards, no grid, nothing to click. It is a pause, not a pitch. */
.thesis > .wrap{padding-block:clamp(76px,9vw,132px);display:grid;justify-items:center;
                text-align:center;gap:24px}
.thesis .eyebrow{justify-content:center}
.thesis .eyebrow::after{display:none}
.thesis h2{max-width:19ch;font-size:clamp(2.2rem,5.2vw,3.9rem);line-height:1.03}
.thesis h2 span{color:var(--green-ink)}
.thesis .lede{max-width:64ch;font-size:clamp(1.06rem,1.45vw,1.24rem)}
.thesis .rule{width:52px;height:2px;background:var(--green);margin-bottom:4px}

/* ── Shared blocks ──────────────────────────────────────────────────── */
.dashes{display:grid;margin-top:36px;border-top:1px solid var(--rule)}
.dashes div{display:grid;grid-template-columns:26px 1fr;gap:14px;padding:17px 0;
            border-bottom:1px solid var(--rule);align-items:baseline}
.dashes span:first-child{font-family:var(--mono);color:var(--navy)}
.dashes p{font-size:1rem;color:var(--ink-2)}

.numbered{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
          border-radius:12px;overflow:hidden;margin-top:38px;grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){.numbered{grid-template-columns:repeat(2,minmax(0,1fr))}}
.numbered > div{background:var(--white);padding:27px 25px}
.numbered .n{font:500 .68rem/1 var(--mono);letter-spacing:.16em;color:var(--navy)}
.numbered h3{margin:13px 0 10px}
.numbered p{font-size:.94rem;color:var(--ink-2);line-height:1.62}

.vs{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:12px;
    overflow:hidden;margin-top:36px;grid-template-columns:minmax(0,1fr)}
@media(min-width:860px){.vs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.vs-col{background:var(--white)}
.vs-col.good{background:var(--green-wash)}
.vs-h{padding:16px 22px;border-bottom:1px solid var(--rule);
      font:500 .66rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.vs-col.good .vs-h{color:var(--green-ink);border-bottom-color:var(--green-line)}
.vs-col ul{list-style:none;margin:0;padding:8px 22px 20px}
.vs-col li{display:grid;grid-template-columns:20px 1fr;gap:11px;padding:11px 0;
           font-size:.94rem;line-height:1.55;color:var(--ink-2)}
.vs-col li b{font-family:var(--mono);font-weight:500;color:var(--ink-3)}
.vs-col.good li b{color:var(--green-ink)}

.trio{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:12px;
      overflow:hidden;margin-top:36px;grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.trio{grid-template-columns:repeat(3,minmax(0,1fr))}}
.trio > div{background:var(--white);padding:27px 24px}
.trio h3{margin-bottom:11px}
.trio > div > p{font-size:.92rem;color:var(--ink-2);line-height:1.6}
.trio ul{list-style:none;margin:17px 0 0;padding:0;display:grid;gap:10px}
.trio li{display:grid;grid-template-columns:16px 1fr;gap:10px;font-size:.87rem;
         line-height:1.55;color:var(--ink-2)}
.trio li b{font-family:var(--mono);font-weight:500;color:var(--navy)}

.stats{display:grid;gap:1px;background:var(--rule);border-block:1px solid var(--rule);
       margin-top:36px;grid-template-columns:repeat(3,minmax(0,1fr))}
.stats div{background:var(--mist);padding:26px 18px;text-align:center}
.stats b{display:block;font:500 clamp(2.1rem,4.2vw,3.1rem)/1 var(--mono);
         font-variant-numeric:tabular-nums;letter-spacing:-.05em;color:var(--navy)}
.stats span{display:block;margin-top:10px;font-size:.83rem;color:var(--ink-3);line-height:1.5}

.four{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:12px;
      overflow:hidden;margin-top:36px;grid-template-columns:minmax(0,1fr)}
@media(min-width:700px){.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1120px){.four{grid-template-columns:repeat(4,minmax(0,1fr))}}
.four > div{background:var(--white);padding:27px 24px}
.four .n{font:500 .68rem/1 var(--mono);letter-spacing:.16em;color:var(--navy)}
.four h3{margin:14px 0 10px}
.four p{font-size:.9rem;color:var(--ink-2);line-height:1.6}
.four .bar{display:block;height:2px;width:26px;background:var(--green);margin-top:17px}

.ready{display:grid;gap:30px;grid-template-columns:minmax(0,1fr);margin-top:34px}
@media(min-width:980px){.ready{grid-template-columns:.92fr 1.08fr;gap:46px}}
.ready-list{display:grid;border-top:1px solid var(--rule)}
.ready-list div{padding:17px 0;border-bottom:1px solid var(--rule)}
.ready-list h3{margin-bottom:5px}
.ready-list p{font-size:.89rem;color:var(--ink-3);line-height:1.55}
.caveat{border:1px solid var(--amber-line);background:var(--amber-wash);border-radius:10px;
        padding:18px 20px;margin-top:22px}
.caveat p{font-size:.88rem;line-height:1.62;color:#6B4415}

.who{display:grid;gap:26px;grid-template-columns:minmax(0,1fr);margin-top:34px}
@media(min-width:960px){.who{grid-template-columns:.82fr 1.18fr;gap:44px}}
.notfor{border:1px solid var(--rule-2);border-radius:12px;padding:24px;background:var(--mist);
        align-self:start}
.notfor p{font-size:.93rem;color:var(--ink-2);line-height:1.62}
.plist{display:grid;border-top:1px solid var(--rule)}
.plist > div{display:grid;grid-template-columns:38px 1fr;gap:14px;padding:19px 0;
             border-bottom:1px solid var(--rule)}
.plist .n{font:500 .78rem/1.5 var(--mono);color:var(--navy)}
.plist p{font-size:.92rem;color:var(--ink-2);margin-top:5px;line-height:1.6}

.owns{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:12px;
      overflow:hidden;margin-top:34px;grid-template-columns:minmax(0,1fr)}
@media(min-width:640px){.owns{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1080px){.owns{grid-template-columns:repeat(5,minmax(0,1fr))}}
.owns > div{background:var(--white);padding:23px 20px}
.owns .tick{font-family:var(--mono);color:var(--green-ink);font-size:.92rem}
.owns h3{margin:11px 0 8px}
.owns p{font-size:.86rem;color:var(--ink-2);line-height:1.55}

.out{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:12px;
     overflow:hidden;margin-top:36px;grid-template-columns:minmax(0,1fr)}
@media(min-width:640px){.out{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1080px){.out{grid-template-columns:repeat(4,minmax(0,1fr))}}
.out > div{background:var(--white);padding:27px 24px}
.out .n{font:500 .66rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--navy)}
.out h3{margin:14px 0 10px}
.out p{font-size:.9rem;color:var(--ink-2);line-height:1.6}

/* ── Friction map ───────────────────────────────────────────────────
   Adapted from the Manus draft, which wrote this better than I did: the
   power is in naming the actual documents, not the category. */
.friction{border:1px solid var(--rule-2);border-radius:12px;overflow:hidden;margin-top:32px;
          background:var(--white);box-shadow:0 24px 60px -46px rgba(14,42,102,.5)}
.friction-h{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;padding:15px 20px;
            border-bottom:1px solid var(--rule);background:var(--mist);
            font:500 .64rem/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;
            color:var(--ink-3)}
.friction-h b{font-family:var(--sans);font-size:.93rem;letter-spacing:-.02em;
              text-transform:none;color:var(--ink)}
.friction ul{list-style:none;margin:0;padding:0}
.friction li{display:grid;gap:4px 18px;padding:15px 20px;border-bottom:1px solid var(--rule);
             grid-template-columns:minmax(0,1fr)}
@media(min-width:640px){.friction li{grid-template-columns:.9fr 1.1fr;align-items:baseline}}
.friction li:last-child{border-bottom:0}
.friction .trigger{font-weight:600;font-size:.94rem}
.friction .doc{font:.85rem/1.5 var(--mono);color:var(--ink-2)}
.friction-f{padding:13px 20px;background:var(--mist);border-top:1px solid var(--rule);
            font:.7rem/1.5 var(--mono);color:var(--ink-3)}

/* Patent marking. Deliberately quiet — a statute citation in mono reads as a
   filed fact, where a loud badge reads as a boast. */
.patent{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin-top:22px;
        border:1px solid var(--rule-2);border-radius:999px;padding:9px 16px;background:var(--white);
        font:.72rem/1.5 var(--mono);color:var(--ink-3)}
.patent b{font-weight:500;letter-spacing:.13em;text-transform:uppercase;font-size:.63rem;
          color:var(--accent)}

/* ── Decision integrity ─────────────────────────────────────────────── */
.integrity{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
           border-radius:12px;overflow:hidden;margin-top:36px;grid-template-columns:minmax(0,1fr)}
@media(min-width:720px){.integrity{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1120px){.integrity{grid-template-columns:repeat(3,minmax(0,1fr))}}
.integrity > div{background:var(--white);padding:26px 24px}
.integrity .n{font:500 .64rem/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;
              color:var(--navy)}
.integrity h3{margin:13px 0 10px}
.integrity p{font-size:.9rem;color:var(--ink-2);line-height:1.6}

/* ── Founder ────────────────────────────────────────────────────────── */
.founder > .wrap{display:grid;gap:26px;grid-template-columns:minmax(0,1fr);
                 padding-block:clamp(62px,7.5vw,104px)}
@media(min-width:900px){.founder > .wrap{grid-template-columns:.8fr 1.2fr;gap:52px;align-items:start}}
.founder blockquote{margin:0;font-size:clamp(1.2rem,2.3vw,1.62rem);line-height:1.45;
                    font-weight:600;letter-spacing:-.026em;text-wrap:balance}
.founder .by{margin-top:22px;padding-top:18px;border-top:1px solid var(--rule);
             font:.78rem/1.6 var(--mono);color:var(--ink-3)}
.founder .by b{display:block;font-family:var(--sans);font-size:.95rem;color:var(--ink);
               font-weight:700;letter-spacing:-.015em;margin-bottom:3px}

/* ── Pricing ────────────────────────────────────────────────────────── */
.tiers{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
       border-radius:12px;overflow:hidden;margin-top:36px;grid-template-columns:minmax(0,1fr)}
@media(min-width:820px){.tiers{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tier{background:var(--white);padding:28px 24px;display:flex;flex-direction:column}
.tier.featured{background:var(--green-wash)}
.tier .k{font:500 .64rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.tier.featured .k{color:var(--green-ink)}
.tier .amt{margin-top:16px;font:500 clamp(2.2rem,4vw,2.9rem)/1 var(--mono);
           font-variant-numeric:tabular-nums;letter-spacing:-.05em}
.tier .amt span{font-size:.9rem;font-weight:400;color:var(--ink-3);letter-spacing:0}
.tier .who{margin-top:9px;font-size:.89rem;color:var(--ink-2);line-height:1.55}
.tier ul{list-style:none;margin:20px 0 24px;padding:18px 0 0;border-top:1px solid var(--rule);
         display:grid;gap:10px}
.tier li{display:grid;grid-template-columns:16px 1fr;gap:10px;font-size:.88rem;
         line-height:1.5;color:var(--ink-2)}
.tier li b{font-family:var(--mono);font-weight:500;color:var(--green-ink)}
.tier .btn{margin-top:auto;justify-content:center}
.tiers-note{margin-top:16px;font:.74rem/1.6 var(--mono);color:var(--ink-3)}

/* ── The reality scene ───────────────────────────────────────────────
   One illustration, not a flowchart: the borrower and the loan file at the
   centre, ringed by tools that hold fragments of them. The picture's left
   third is empty by design, so on desktop the copy is laid INTO it via grid
   overlap rather than beside it. On narrow screens the overlap would sit on
   top of the artwork, so they stack and the copy leads. */
/* Stacked: flex + order, so the sentence leads and the picture supports it.
   (The caption is second in the DOM because on desktop it must paint OVER the
   image, and paint order follows DOM order.) */
.scene{margin:40px 0 0;padding:0;display:flex;flex-direction:column}
.scene img{display:block;width:100%;height:auto;border-radius:12px;
           border:1px solid var(--rule);background:var(--white)}
.scene-copy{order:-1;margin:0 0 24px}
.scene-copy h3{font-size:clamp(1.35rem,2.5vw,1.85rem);line-height:1.2;letter-spacing:-.018em;
               margin:0;color:var(--ink)}
.scene-sub{margin-top:14px;font-size:1.02rem;line-height:1.55;color:var(--ink-2);
           font-weight:500}
.scene-copy p:not(.scene-sub):not(.scene-tally){margin-top:14px;font-size:.94rem;
           line-height:1.68;color:var(--ink-3)}
/* One line per clause. Run inline with separators it wrapped mid-clause in a
   330px column and read as one unbroken string; as a stacked receipt each cost
   lands on its own. Sentence case, not uppercase — the longest clause is a
   sentence, not a label. */
.scene-tally{margin-top:22px;padding-top:16px;border-top:1px solid var(--rule);
             display:grid;gap:6px;
             font:500 .78rem/1.45 var(--mono);letter-spacing:.01em;color:var(--ink-3)}
.scene-tally span{position:relative;padding-left:15px}
.scene-tally span::before{content:'·';position:absolute;left:2px;top:-.06em;
                          color:var(--amber);font-weight:700}

/* 1080, not 1000: at 1000 the copy cleared the picture's height by only 19px,
   and a block that tight will spill the moment the copy is edited. */
@media (min-width:1080px){
  .scene{display:grid;align-items:center}
  .scene img,.scene-copy{grid-area:1/1}
  /* The artwork's own content begins at 36.4% of its width — measured off the
     pixels, not eyeballed. The copy column therefore ends before 35% so type
     never lands on the illustration. Re-measure if the image is ever replaced. */
  .scene-copy{order:0;position:relative;z-index:1;
              margin:0;align-self:center;justify-self:start;
              width:min(35%,420px);
              padding:0 20px 0 clamp(10px,2.4vw,38px)}
  /* Over artwork, the tally's top rule would read as a stray line on the art. */
  .scene-tally{border-top-color:var(--rule-2)}
}

/* Payoff line under a section head. */
.kicker{margin-top:16px;font-size:1.02rem;line-height:1.5;font-weight:600;
        color:var(--navy);max-width:52ch}

/* ═══ Sub-page primitives ═══════════════════════════════════════════
   Used by the generated pages. Same tokens as the homepage so the two
   cannot drift apart. */
.hero-narrow{max-width:60ch}
.hero-narrow h1{margin-top:22px;font-size:clamp(2.1rem,4.6vw,3.5rem)}
.hero-narrow .lede{margin-top:20px;color:var(--ink-2)}

/* Exclusion list — same rhythm as .dashes but the mark reads as a refusal. */
.dashes.nots span:first-child{color:var(--amber)}

.plist .mini{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:7px}
.plist .mini li{position:relative;padding-left:16px;font-size:.87rem;line-height:1.55;
                color:var(--ink-3)}
.plist .mini li::before{content:'→';position:absolute;left:0;color:var(--navy);
                        font-family:var(--mono);font-size:.78rem}

.tiers.wide{grid-template-columns:minmax(0,1fr)}
@media(min-width:720px){.tiers.wide{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1180px){.tiers.wide{grid-template-columns:repeat(5,minmax(0,1fr))}}
.tiers.wide .tier{padding:24px 20px}
.tiers.wide .amt{font-size:clamp(1.7rem,3vw,2.1rem)}
.tiers.wide li{font-size:.83rem}

/* ── Legal / long-form documents ────────────────────────────────────── */
.legal-doc{max-width:78ch}
.legal-doc h2{font-size:clamp(1.3rem,2.4vw,1.75rem);margin:38px 0 14px}
.legal-doc h2:first-child{margin-top:0}
.legal-doc h3{font-size:1.02rem;margin:22px 0 8px}
.legal-doc p{margin-bottom:14px;color:var(--ink-2);line-height:1.72}
.legal-doc ul,.legal-doc ol{margin:0 0 16px;padding-left:22px;color:var(--ink-2);line-height:1.72}
.legal-doc li{margin-bottom:7px}
.legal-doc a{color:var(--navy);text-decoration:underline;text-underline-offset:2px}
.legal-doc .fineprint{margin-top:26px;padding-top:16px;border-top:1px solid var(--rule);
                      font:.78rem/1.7 var(--mono);color:var(--ink-3)}
.legal-doc .toc{list-style:none;padding-left:0;font-family:var(--mono);font-size:.88rem}
.legal-doc .toc > li{margin-bottom:12px;font-weight:500;color:var(--ink)}
.legal-doc .toc ul{list-style:none;padding-left:18px;margin:7px 0 0;font-weight:400}
.legal-doc .toc ul li{font-size:.82rem;color:var(--ink-3);margin-bottom:4px}

/* Wide tables must scroll inside themselves, never the page body. */
.table-scroll{overflow-x:auto;margin:0 0 18px;border:1px solid var(--rule);border-radius:8px}
.legal-doc table{border-collapse:collapse;width:100%;min-width:520px;font-size:.88rem}
.legal-doc th,.legal-doc td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--rule);
                            vertical-align:top;line-height:1.55}
.legal-doc th{background:var(--mist);font:500 .7rem/1.4 var(--mono);letter-spacing:.09em;
              text-transform:uppercase;color:var(--ink-3)}
.legal-doc tbody tr:last-child td{border-bottom:0}

.consent{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;
         font-size:.82rem;line-height:1.6;color:var(--ink-3)}
.consent input{margin-top:3px}

/* ── Access ─────────────────────────────────────────────────────────── */
.access{display:grid;gap:34px;grid-template-columns:minmax(0,1fr)}
@media(min-width:980px){.access{grid-template-columns:.95fr 1.05fr;gap:50px}}
.perks{display:grid;margin-top:28px;border-top:1px solid var(--rule)}
.perks div{padding:16px 0;border-bottom:1px solid var(--rule)}
.perks h3{margin-bottom:4px}
.perks p{font-size:.88rem;color:var(--ink-3);line-height:1.55}
.form{border:1px solid var(--rule-2);border-radius:12px;background:var(--white);overflow:hidden;
      box-shadow:0 26px 60px -44px rgba(14,42,102,.5)}
.form-h{padding:21px 24px;border-bottom:1px solid var(--rule);background:var(--mist)}
.form-h b{font-size:1.02rem;letter-spacing:-.02em}
.form-h p{margin-top:6px;font-size:.85rem;color:var(--ink-3)}
.form-b{padding:22px 24px;display:grid;gap:15px}
.row2{display:grid;gap:15px;grid-template-columns:minmax(0,1fr)}
@media(min-width:560px){.row2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.field label{display:block;margin-bottom:7px;font:500 .63rem/1 var(--mono);letter-spacing:.14em;
             text-transform:uppercase;color:var(--ink-3)}
.field input,.field select,.field textarea{width:100%;font:400 .95rem/1.5 var(--sans);
  color:var(--ink);background:var(--mist);border:1px solid var(--rule-2);border-radius:var(--r);
  padding:12px 13px;transition:border-color .16s ease,background .16s ease}
.field textarea{resize:vertical;min-height:80px}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--navy);background:#fff;outline:none}
.form-f{padding:0 24px 22px;font:.73rem/1.55 var(--mono);color:var(--ink-3)}

/* ═══ Dark band — AI section only ═══════════════════════════════════ */
.dark{background:var(--navy-deep);color:#F2F4F8}
.dark .eyebrow{color:var(--green)}
.dark .eyebrow::after{background:rgba(255,255,255,.14)}
.dark .lede{color:rgba(242,244,248,.72)}
.ai-grid{display:grid;gap:17px;grid-template-columns:minmax(0,1fr);margin-top:36px}
@media(min-width:980px){.ai-grid{grid-template-columns:1fr 1fr}}
.conv{border:1px solid rgba(255,255,255,.18);border-radius:12px;overflow:hidden;
      display:flex;flex-direction:column;background:rgba(255,255,255,.04)}
.conv-head{display:flex;align-items:center;gap:12px;padding:14px 16px;
           border-bottom:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.2)}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;
        font:700 .88rem/1 var(--sans);color:#04240F;background:var(--green)}
.avatar.j{background:#00D5FF;color:#04121F}
.who-i{flex:1}
.who-i b{display:block;font-size:.94rem}
.who-i span{font:.69rem/1.4 var(--mono);color:rgba(242,244,248,.45)}
.wave{display:flex;align-items:flex-end;gap:2px;height:18px}
.wave i{width:2px;background:var(--green);border-radius:1px;height:5px}
.conv.j .wave i{background:#00D5FF}
@media(prefers-reduced-motion:no-preference){
  .wave i{animation:eq .9s ease-in-out infinite}
  .wave i:nth-child(2){animation-delay:.12s}.wave i:nth-child(3){animation-delay:.24s}
  .wave i:nth-child(4){animation-delay:.36s}.wave i:nth-child(5){animation-delay:.48s}
  .wave i:nth-child(6){animation-delay:.6s}.wave i:nth-child(7){animation-delay:.72s}}
@keyframes eq{0%,100%{height:5px}50%{height:16px}}
.thread{padding:16px;display:flex;flex-direction:column;gap:11px;min-height:326px;flex:1}
.msg{max-width:86%;padding:10px 13px;border-radius:12px;font-size:.88rem;line-height:1.5;
     opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease}
.msg.show{opacity:1;transform:none}
.msg.them{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);
          align-self:flex-start;border-bottom-left-radius:3px}
.msg.us{background:rgba(34,197,94,.15);border:1px solid rgba(34,197,94,.32);
        align-self:flex-end;border-bottom-right-radius:3px}
.conv.j .msg.us{background:rgba(0,213,255,.13);border-color:rgba(0,213,255,.3)}
.ann{align-self:stretch;display:grid;grid-template-columns:auto 1fr;gap:9px;align-items:start;
     border-left:2px solid #FFB547;padding:8px 0 8px 11px;font:.72rem/1.5 var(--mono);
     color:rgba(242,244,248,.72);opacity:0;transform:translateY(8px);
     transition:opacity .4s ease,transform .4s ease}
.ann.show{opacity:1;transform:none}
.ann.good{border-left-color:var(--green)}
.ann b{color:#FFB547;font-weight:500;letter-spacing:.07em;text-transform:uppercase;font-size:.62rem}
.ann.good b{color:var(--green)}
.conv-foot{padding:12px 16px;border-top:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.2);
           font:.67rem/1.5 var(--mono);color:rgba(242,244,248,.45)}
.rails{display:grid;gap:1px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.10);
       border-radius:12px;overflow:hidden;margin-top:17px;
       grid-template-columns:repeat(auto-fit,minmax(208px,1fr))}
.rail{background:var(--navy-deep);padding:21px}
.rail h3{margin-bottom:7px}
.rail p{font-size:.83rem;color:rgba(242,244,248,.72);line-height:1.55}

/* ── Footer ─────────────────────────────────────────────────────────── */
footer{background:var(--navy-deep);color:#F2F4F8;border-top:1px solid rgba(255,255,255,.09)}
footer .wrap{padding-block:46px 48px}
.foot-grid{display:grid;gap:30px;grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){.foot-grid{grid-template-columns:1.5fr repeat(3,minmax(0,1fr))}}
.foot-grid h3{font:500 .64rem/1 var(--mono);letter-spacing:.17em;text-transform:uppercase;
              color:rgba(242,244,248,.44);margin-bottom:15px;font-weight:500}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:.88rem;
              color:rgba(242,244,248,.72)}
.foot-grid a:hover{color:#fff}
.foot-brand p{margin-top:13px;font-size:.88rem;color:rgba(242,244,248,.72);max-width:34ch;line-height:1.6}
.foot-brand .nmls{margin-top:11px;font:.7rem/1.5 var(--mono);color:rgba(242,244,248,.44)}
.foot-legal{margin-top:36px;padding-top:22px;border-top:1px solid rgba(255,255,255,.10);
            display:grid;gap:11px}
.foot-legal p{font-size:.78rem;line-height:1.65;color:rgba(242,244,248,.44);max-width:94ch}

/* Scroll reveal, deliberately rationed.
   This was on 33 elements — every heading, grid, card and list — so the page
   was in constant motion and every block of content arrived late. Reveal now
   fires once per section, on the heading group only; the content beneath it is
   present immediately and readable the moment it is on screen. Shorter travel
   and duration too, so it reads as settling rather than sliding. */
@media(prefers-reduced-motion:no-preference){
  .js .rv{opacity:0;transform:translateY(9px);
          transition:opacity .42s ease,transform .42s cubic-bezier(.22,.8,.3,1)}
  .js .rv.in{opacity:1;transform:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   ACCENT POLICY

   Green was doing two unrelated jobs: decoration (headline accent, primary
   buttons, featured tier, tick marks) and status (live, active, credits).
   On the old dark hero the decorative use carried, because green was the only
   colour catching light. On white it reads as generic SaaS green.

   Rule now: GREEN MEANS SOMETHING — live, running, money coming back to the
   borrower. Everything decorative uses the brand navy.

   To try a different accent, change --accent only. Nothing else references it.
   ═══════════════════════════════════════════════════════════════════════ */
:root{ --accent:var(--navy); --accent-wash:#EDF1FA; --accent-line:#C6D4EE; }

/* Typographic accents */
.hero h1 span,
.thesis h2 span{color:var(--accent)}
.thesis .rule{background:var(--accent)}

/* Primary call to action */
.btn.green{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.green:hover{background:#0C337F;border-color:#0C337F}

/* Structural marks */
.four .bar{background:var(--accent)}
.owns .tick{color:var(--accent)}
.tier li b{color:var(--accent)}

/* Featured pricing tier */
.tier.featured{background:var(--accent-wash)}
.tier.featured .k{color:var(--accent)}

/* The comparison table keeps green: the right-hand column is a value
   judgement, which is exactly what a semantic colour is for. */

/* Template gallery link out to the product-rendered demo. */
.tpl-link{margin-top:14px}
.tpl-link a{font:600 .84rem/1 var(--sans);color:var(--navy)}
.tpl-link a:hover{text-decoration:underline;text-underline-offset:3px}

/* Honeypot. Off-screen rather than display:none — some bots skip hidden
   inputs but will happily fill one that is technically rendered. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}