:root{--indigo:#1E2A78;--indigo-deep:#121A4E;--purple:#3A2A7C;--blue:#2F6BE4;--gold:#FFB800;--ink:#16204A;--slate:#5A6588;--mist:#F4F6FC;--line:#E1E6F2;--green:#0FA968;}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',-apple-system,sans-serif;background:#fff;color:var(--ink);font-size:18px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-weight:800;line-height:1.14;letter-spacing:-0.025em}
em{font-style:normal;color:var(--gold)}
.wrap{max-width:1120px;margin:0 auto;padding:0 32px}
.narrow{max-width:820px;margin:0 auto;padding:0 32px}
section{padding:78px 0}
@media(max-width:700px){section{padding:50px 0}}
.eyebrow{font-size:11px;letter-spacing:0.2em;text-transform:uppercase;font-weight:700;color:var(--blue);margin-bottom:18px}
.dots{background-image:radial-gradient(rgba(255,255,255,0.14) 1.4px,transparent 1.4px);background-size:16px 16px}
.grad{background:linear-gradient(135deg,#121A4E 0%,#242270 48%,#3A2A7C 100%);color:#fff}
.grad .eyebrow{color:var(--gold)}.grad h2,.grad h3{color:#fff}.grad p{color:#C6CEEA}
.mist{background:var(--mist)}
h2{font-size:clamp(28px,3.7vw,42px);max-width:23ch;margin-bottom:22px}
p{margin-bottom:18px;max-width:68ch}

nav{background:var(--indigo-deep);padding:14px 0;position:sticky;top:env(safe-area-inset-top, 0px);z-index:60}
nav .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:16.5px;white-space:nowrap}
.mark{width:28px;height:28px;background:var(--blue);border-radius:7px;display:grid;place-items:center;font-size:14px}
.nav-cta{font-size:13.5px;font-weight:700;color:var(--indigo-deep);background:var(--gold);padding:10px 20px;text-decoration:none;border-radius:999px;white-space:nowrap}

.hero{padding:78px 0 70px;position:relative;overflow:hidden}
.hero .wrap{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center}
/* 12px with wide tracking read as a second headline sitting above the real one.
   It is a location label — it should register, not compete. */
.pill{display:inline-block;background:rgba(255,184,0,0.15);border:1px solid rgba(255,184,0,0.4);color:var(--gold);font-size:10.5px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:7px 16px;border-radius:999px;margin-bottom:22px}
/* Was clamp(30px,4.3vw,52px). At 52px it ran to five lines on a desktop and
   read as a poster rather than a headline — it dominated the page and pushed
   the thing people actually came to use, the prompt box, below the fold. */
h1{font-size:clamp(26px,3.5vw,42px);line-height:1.17;max-width:20ch;margin-left:auto;margin-right:auto}
h1 span{color:var(--gold)}
/* Was 19.5px against a 42px h1 — close enough in weight and width that the two
   blocks read as one wall of text. Dropping it re-establishes the hierarchy. */
.lede{font-size:16.5px;color:#C6CEEA;max-width:58ch;margin:20px auto 0;line-height:1.62}
.promptbox{background:rgba(255,255,255,0.08);border:1.5px solid rgba(255,255,255,0.22);border-radius:20px;padding:15px;margin:32px auto 0;max-width:820px;width:100%}
.pb-row{display:flex;align-items:center;gap:10px;background:#fff;border-radius:14px;padding:7px 7px 7px 18px}
#pbInput{flex:1;border:none;outline:none;font-family:inherit;font-size:16.5px;color:var(--ink);padding:12px 0;background:transparent;min-width:0}
#pbInput::placeholder{color:#8E99BE;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-go{background:var(--gold);color:var(--indigo-deep);border:none;font-family:inherit;font-weight:700;font-size:15px;padding:13px 24px;border-radius:10px;cursor:pointer;white-space:nowrap}
.pb-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:13px;padding:0 4px}
.chip{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.25);color:#DCE3F7;font-family:inherit;font-size:13.5px;padding:8px 15px;border-radius:999px;cursor:pointer}
.chip:hover{background:rgba(255,255,255,0.2);color:#fff}
.callout{display:flex;gap:13px;align-items:flex-start;text-align:left;margin:24px auto 0;max-width:680px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);border-radius:14px;padding:17px 19px;font-size:15.5px;color:#C6CEEA}
.callout a{color:var(--gold);font-weight:700;text-decoration:none}
.callout strong{color:#fff}

.center-wrap{display:flex;flex-direction:column;align-items:center;text-align:center}
.center-wrap h2{margin-left:auto;margin-right:auto}
.center-wrap .demo{text-align:left}

/* DEMO */
.demo{background:#fff;border-radius:20px;padding:8px;box-shadow:0 18px 50px rgba(10,20,60,0.28);margin-top:40px;max-width:900px;width:100%}
.demo-bar{display:flex;align-items:center;gap:7px;padding:11px 14px}
.demo-bar i{width:10px;height:10px;border-radius:50%;background:#E4E8F2;display:block}
.demo-bar span{margin-left:10px;font-size:12.5px;color:var(--slate);font-weight:600}
.demo-body{padding:22px 26px 26px;border-top:1px solid var(--line)}
.demo-q{font-size:13px;font-weight:700;color:var(--blue);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:12px}
.demo-row{display:flex;gap:10px;align-items:center}
#demoInput{flex:1;border:1.5px solid var(--line);border-radius:12px;padding:14px 16px;font-family:inherit;font-size:15.5px;color:var(--ink);min-width:0}
#demoInput:focus{outline:none;border-color:var(--blue)}
.demo-go{background:var(--blue);color:#fff;border:none;font-family:inherit;font-weight:700;font-size:14.5px;padding:14px 22px;border-radius:12px;cursor:pointer;white-space:nowrap}
.demo-out{margin-top:20px}
.searching{font-size:14.5px;color:var(--slate);font-weight:600}
.deal{border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-bottom:11px;display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center}
.deal h4{font-size:16.5px;margin-bottom:5px}
.deal .meta{font-size:14px;color:var(--slate)}
.deal .fig{text-align:right;white-space:nowrap}
.deal .fig b{font-size:20px;font-weight:800;color:var(--green);display:block}
.deal .fig small{font-size:12px;color:var(--slate)}
.deal .fund{font-size:12.5px;font-weight:700;color:var(--blue);margin-top:4px}
@media(max-width:620px){.deal{grid-template-columns:1fr}.deal .fig{text-align:left}}
.deal{cursor:pointer;transition:border-color .15s}
.deal:hover{border-color:var(--blue)}
.deal .more{font-size:12.5px;font-weight:700;color:var(--blue);margin-top:6px}
.drill{border:1px solid var(--line);border-radius:14px;margin:-4px 0 11px;overflow:hidden}
.drill-h{display:flex;gap:10px;align-items:center;padding:13px 18px;background:var(--mist);border-bottom:1px solid var(--line);font-size:12px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--blue)}
.drill-g{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.drill-g>div{background:#fff;padding:20px 22px}
.drill-g h5{font-size:12px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--slate);margin-bottom:12px}
.kv{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:15px;border-bottom:1px solid var(--line)}
.kv:last-child{border-bottom:none}
.kv b{white-space:nowrap}
.kv.hi b{color:var(--green);font-size:17px}
@media(max-width:640px){.drill-g{grid-template-columns:1fr}}
.gate{background:linear-gradient(135deg,#121A4E,#3A2A7C);color:#fff;padding:24px 24px;text-align:center}
.gate h5{font-size:18px;font-weight:800;margin-bottom:8px;color:#fff;letter-spacing:-0.02em;text-transform:none}
.gate p{font-size:15px;color:#C6CEEA;margin:0 auto 16px;max-width:52ch}
.blur{filter:blur(5px);user-select:none;opacity:.65}
.demo-note{font-size:13.5px;color:var(--slate);margin-top:14px}
.demo-cta{background:var(--mist);border-radius:14px;padding:20px 22px;margin-top:16px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.demo-cta p{margin:0;font-size:15.5px;font-weight:600}
.mini{background:var(--gold);color:var(--indigo-deep);border:none;font-family:inherit;font-weight:700;font-size:14.5px;padding:13px 24px;border-radius:999px;cursor:pointer;white-space:nowrap;text-decoration:none;display:inline-block}

.pain{display:grid;gap:0;margin-top:28px;max-width:74ch}
.pain li{list-style:none;padding:15px 0 15px 34px;position:relative;font-size:17.5px;border-bottom:1px solid var(--line);line-height:1.5}
.pain li:before{content:'✕';position:absolute;left:0;color:#D24A4A;font-weight:800;top:15px}
.bullets{display:grid;gap:0;margin-top:26px;max-width:74ch}
.bullets li{list-style:none;padding:15px 0 15px 34px;position:relative;font-size:17.5px;border-bottom:1px solid rgba(255,255,255,0.13);line-height:1.5;color:#DCE3F7}
.bullets li:before{content:'✦';position:absolute;left:0;color:var(--gold);top:16px;font-size:14px}
.bullets b{color:#fff;font-weight:700}

.prog{height:4px;background:var(--line);border-radius:999px;overflow:hidden;margin-bottom:28px}
.prog-fill{height:100%;width:0;background:var(--gold);transition:width .35s ease}
.qcount{font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--slate);font-weight:700;margin-bottom:20px}
.chatwrap{display:flex;flex-direction:column;gap:13px;min-height:100px}
.bub{max-width:84%;padding:15px 19px;border-radius:18px;font-size:16.5px;line-height:1.55;animation:fade .3s ease}
.bub.ai{background:#fff;border:1px solid var(--line);border-bottom-left-radius:5px;align-self:flex-start;box-shadow:0 2px 12px rgba(22,32,74,0.05)}
.bub.me{background:var(--blue);color:#fff;border-bottom-right-radius:5px;align-self:flex-end}
@keyframes fade{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.answers{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.ans{background:#fff;border:1.5px solid var(--line);color:var(--ink);font-family:inherit;font-size:15.5px;font-weight:500;padding:12px 19px;border-radius:999px;cursor:pointer;text-align:left}
.ans:hover{border-color:var(--blue);color:var(--blue)}

.reccard{background:#fff;border:2px solid var(--gold);border-radius:20px;padding:32px 30px;margin-top:12px;box-shadow:0 8px 34px rgba(255,184,0,0.2)}
.rc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:18px}
.rc-mode{font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--blue);font-weight:700;margin-bottom:8px}
.rc-head h3{font-size:24px}
.rc-price{text-align:right}
.rc-price span{font-size:36px;font-weight:800;display:block}
.rc-price small{font-size:13px;color:var(--slate);display:block;margin-top:4px}
.reccard ul{list-style:none;margin:18px 0 22px}
.reccard li{font-size:16px;padding:7px 0 7px 26px;position:relative;color:#414D75}
.reccard li:before{content:'✓';position:absolute;left:0;color:var(--blue);font-weight:800}
.rc-pay{border-top:1px solid var(--line);padding-top:20px}
.paybtns{display:flex;flex-wrap:wrap;gap:11px}
.paybtn{background:var(--gold);color:var(--indigo-deep);font-family:inherit;font-weight:700;font-size:15px;padding:14px 26px;border-radius:999px;text-decoration:none;display:inline-block;border:1.5px solid var(--gold)}
.paybtn.alt{background:#fff;border-color:var(--blue);color:var(--blue)}
.paynote{font-size:13.5px;color:var(--slate);margin-top:13px;max-width:64ch}
.flags{margin-top:18px;display:grid;gap:11px}
.flag{border-left:4px solid var(--blue);background:var(--mist);border-radius:10px;padding:18px 20px}
.flag.warn{border-left-color:var(--gold)}
.flag h4{font-size:16.5px;margin-bottom:5px}
.flag p{font-size:15.5px;margin:0;color:#414D75}
.savebox{background:var(--mist);border:1px solid var(--line);border-radius:18px;padding:30px 28px;margin-top:22px}
.fields{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.fields input{border:1.5px solid var(--line);border-radius:12px;padding:14px 17px;font-family:inherit;font-size:16px;color:var(--ink);background:#fff;min-width:0}
.fields input:focus{outline:none;border-color:var(--blue)}
@media(max-width:700px){.fields{grid-template-columns:1fr}}
.btn{display:inline-block;background:var(--gold);color:var(--indigo-deep);padding:16px 32px;text-decoration:none;font-weight:700;font-size:16px;border-radius:999px;border:none;font-family:inherit;cursor:pointer;margin-top:16px}

.guar{background:linear-gradient(135deg,rgba(47,107,228,0.08),rgba(255,184,0,0.12));border:2px solid var(--gold);border-radius:18px;padding:38px 36px}
.guar h3{font-size:27px;margin-bottom:14px}
@media(max-width:700px){.guar{padding:26px 22px}}
.stack{display:grid;gap:0;margin-top:24px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.stack div{display:flex;justify-content:space-between;gap:16px;padding:15px 20px;border-bottom:1px solid var(--line);font-size:16px}
.stack div:last-child{border-bottom:none;background:var(--mist);font-weight:800}
.stack b{white-space:nowrap;color:var(--ink)}
.stack .strike{text-decoration:line-through;color:var(--slate);font-weight:600}

.proof{display:grid;gap:13px;margin-top:28px}
.proof div{background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.14);border-radius:16px;padding:24px 26px}
.proof h3{font-size:18.5px;margin-bottom:7px}
.proof p{margin:0;font-size:16px}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:13px}
.tgrid blockquote{background:#fff;border-radius:16px;padding:24px;margin:0}
.tgrid .stars{color:var(--gold);font-size:13px;letter-spacing:2px;margin-bottom:12px}
.tgrid blockquote p{font-size:15px;line-height:1.6;color:#414D75;margin:0 0 14px;max-width:none}
.tgrid blockquote cite{font-style:normal;font-size:11.5px;color:var(--blue);font-weight:700;display:block}
@media(max-width:900px){.tgrid{grid-template-columns:1fr}}

.creds{list-style:none;margin-top:20px}
.creds li{padding:13px 0 13px 30px;position:relative;border-bottom:1px solid var(--line);font-size:16px;line-height:1.55;color:#414D75}
.creds li:last-child{border-bottom:none}
.creds li:before{content:'◆';position:absolute;left:0;color:var(--gold);font-size:12px;top:15px}
.creds strong{color:var(--ink);font-weight:700}
.pillars{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:24px}
.pillars div{background:var(--mist);border:1px solid var(--line);border-radius:13px;padding:16px 10px;text-align:center;font-weight:800;font-size:16px}
@media(max-width:700px){.pillars{grid-template-columns:repeat(2,1fr)}}

footer{background:var(--indigo-deep);color:#8B97C8;padding:38px 0;font-size:13.5px}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px}
footer a{color:#A8B4DC;text-decoration:none}
.fine{font-size:12.5px;color:var(--slate);max-width:76ch;line-height:1.6}
a:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ============ AI CHAT OVERLAY ============ */
#chatOverlay{position:fixed;inset:0;z-index:200;background:rgba(11,16,42,0.55);display:flex;justify-content:center;align-items:stretch;backdrop-filter:blur(2px)}
#chatOverlay[hidden]{display:none}
.chat-shell{position:relative;display:flex;width:100%;height:100%;background:#fff;overflow:hidden}
@media(min-width:860px){
  .chat-shell{width:100%;max-width:1080px;height:calc(100vh - 48px);margin:24px auto;border-radius:22px;box-shadow:0 30px 80px rgba(10,15,50,0.45)}
}

/* sidebar */
.chat-sidebar{width:270px;flex:0 0 270px;background:var(--mist);border-right:1px solid var(--line);display:flex;flex-direction:column;transition:margin-left .22s ease}
.chat-sidebar-head{padding:18px 16px 12px;display:flex;justify-content:space-between;align-items:center}
.chat-sidebar-head span{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.chat-sidebar-close{display:none;background:none;border:none;color:var(--slate);font-size:20px;cursor:pointer;line-height:1;padding:4px}
.chat-newbtn{margin:0 16px 14px;background:linear-gradient(135deg,var(--blue),#4338CA);color:#fff;border:none;font-family:inherit;font-weight:700;font-size:14px;padding:11px 14px;border-radius:12px;cursor:pointer;display:flex;align-items:center;gap:8px;justify-content:center}
.chat-session-list{flex:1;overflow-y:auto;padding:0 10px 16px}
.session-item{display:flex;align-items:center;gap:9px;padding:11px 10px;border-radius:10px;cursor:pointer;margin-bottom:2px;color:var(--ink)}
.session-item:hover{background:#fff}
.session-item.active{background:#fff;box-shadow:0 1px 3px rgba(22,32,74,0.1)}
.si-ico{width:16px;height:16px;flex:none;color:var(--slate)}
.si-title{flex:1;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.si-del{background:none;border:none;color:var(--slate);cursor:pointer;padding:4px;opacity:0;flex:none}
.session-item:hover .si-del{opacity:1}
.si-del svg{width:14px;height:14px}
.session-empty{padding:14px 6px;font-size:13px;color:var(--slate)}

/* main column */
.chat-main{flex:1;display:flex;flex-direction:column;min-width:0}
.chat-head{background:linear-gradient(135deg,#121A4E,#3A2A7C);color:#fff;padding:14px 16px;display:flex;align-items:center;gap:12px}
.chat-sidebar-toggle{background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.2);color:#fff;width:36px;height:36px;border-radius:10px;cursor:pointer;display:grid;place-items:center;flex:none}
.chat-head-orb{width:34px;height:34px;border-radius:9px;background:var(--gold);color:var(--indigo-deep);display:grid;place-items:center;font-weight:800;flex:none}
.chat-head-txt{flex:1;min-width:0}
.chat-head-txt b{display:block;font-size:15px}
.chat-head-txt span{display:block;font-size:12px;color:#C6CEEA}
.chat-close{background:rgba(255,255,255,0.12);border:none;color:#fff;width:36px;height:36px;border-radius:10px;cursor:pointer;font-size:18px;flex:none}

.chat-feed{flex:1;overflow-y:auto;padding:22px;display:flex;flex-direction:column;gap:14px;background:#fff}
.feed-welcome{max-width:480px;margin:40px auto;text-align:center;color:var(--slate)}
.fw-orb{width:44px;height:44px;border-radius:12px;background:var(--gold);color:var(--indigo-deep);display:grid;place-items:center;font-weight:800;margin:0 auto 14px}
.feed-welcome p{font-size:16px;color:var(--ink);font-weight:600}
.msg{max-width:82%;padding:13px 17px;border-radius:16px;font-size:15.5px;line-height:1.55}
.msg.user{align-self:flex-end;background:linear-gradient(135deg,var(--blue),#4338CA);color:#fff;border-bottom-right-radius:5px;white-space:pre-wrap}
.msg.bot{align-self:flex-start;background:var(--mist);border:1px solid var(--line);border-bottom-left-radius:5px;color:var(--ink)}
.msg.bot p{margin:0 0 10px;max-width:none}
.msg.bot p:last-child{margin-bottom:0}
.msg.bot strong{color:var(--ink)}
.msg.bot .mdh{font-weight:800;margin:4px 0 8px}
.msg.bot ul,.msg.bot ol{margin:4px 0 10px;padding-left:20px}
/* Links in a bot reply are almost always the next step — a term sheet, a
   checkout, a listing — not a citation. Bold-underlined blue read as a
   footnote and sat badly against the surrounding text, so they get the same
   pill treatment as the button on a deal card. */
/* :not([class]) confines this to PLAIN prose links. It used to hit every <a>
   in a bot message, which meant it also hit the checkout card and the deal
   card: display:inline-flex turned the card's stacked rows into one squashed
   line (that is what wrapped "Complete checkout" to "Complet/e checkout"), and
   the :after pinned a stray arrow on the end of the Stripe trust line. */
.msg.bot a:not([class]){display:inline-flex;align-items:center;gap:5px;color:var(--blue);font-weight:750;text-decoration:none;background:#EDF3FF;border:1px solid #CBD8F3;padding:3px 12px;border-radius:999px;line-height:1.35;transition:background .15s,border-color .15s,color .15s}
.msg.bot a:not([class]):hover{background:var(--blue);border-color:var(--blue);color:#fff}
.msg.bot a:not([class]):after{content:'→';font-weight:700;opacity:.75}
/* The page-wide `em` rule paints emphasis gold for the marketing headlines,
   which turned the underwriting disclaimer into the loudest line in the
   message. In a chat bubble it is fine print and should read as fine print. */
.msg.bot em{color:#7C8AAE;font-size:12.5px;font-style:normal}
.typing{display:inline-flex;gap:5px;padding:4px 0}
.typing span{width:7px;height:7px;border-radius:50%;background:var(--blue);display:inline-block;animation:chatBlink 1.2s infinite both}
.typing span:nth-child(2){animation-delay:.2s}
.typing span:nth-child(3){animation-delay:.4s}
@keyframes chatBlink{0%,80%,100%{opacity:.2}40%{opacity:1}}

.chat-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 22px 14px}
.chip-ask{background:var(--mist);border:1px solid var(--line);color:var(--ink);font-size:13.5px;padding:8px 14px;border-radius:999px;cursor:pointer}
.chip-ask:hover{border-color:var(--blue);color:var(--blue)}

.chat-composer{border-top:1px solid var(--line);padding:14px 18px;background:#fff}
.chat-composer.busy{opacity:.7}
.composer-row{display:flex;align-items:flex-end;gap:10px;background:var(--mist);border:1.5px solid var(--line);border-radius:16px;padding:8px 8px 8px 16px}
#chatInput{flex:1;border:none;outline:none;background:transparent;font-family:inherit;font-size:15.5px;color:var(--ink);resize:none;max-height:130px;padding:8px 0;line-height:1.4}
/* One line for the placeholder here too: this field starts at rows=1, so a
   longer placeholder wrapped into a row the box had no height for. */
#chatInput::placeholder{color:#8E99BE;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-send{background:var(--gold);color:var(--indigo-deep);border:none;width:40px;height:40px;border-radius:11px;cursor:pointer;flex:none;display:grid;place-items:center;font-weight:800}
.chat-send:disabled{opacity:.5;cursor:default}
.chat-fine{font-size:12px;color:var(--slate);margin-top:9px;text-align:center}

/* checkout card — replaces a raw buy.stripe.com link in a bot reply */
.co-card{display:block;margin:12px 0 4px;padding:15px 17px 13px;border:1.5px solid #CBD8F3;border-radius:15px;background:linear-gradient(160deg,#F7FAFF,#EEF3FE);color:inherit;transition:border-color .18s,box-shadow .18s}
.co-card:hover{border-color:#B4C7EE}
.co-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.co-name{font-size:15px;font-weight:800;color:var(--ink);letter-spacing:-.01em;line-height:1.3;min-width:0}
.co-price{font-size:19px;font-weight:800;color:var(--blue);white-space:nowrap;letter-spacing:-.02em}
.co-sub{display:block;margin-top:5px;font-size:12.5px;color:var(--slate);line-height:1.5}
/* The button is the only live target on the card, so it is sized like one:
   44px minimum height is the smallest reliable touch target on a phone.
   white-space:nowrap on the label is what stops "Complete checkout" splitting
   mid-word when the card is narrow. */
.co-go{display:inline-flex;align-items:center;justify-content:center;gap:7px;margin-top:12px;min-height:44px;background:var(--gold);color:var(--indigo-deep);font-size:13.5px;font-weight:800;padding:10px 20px;border-radius:999px;text-decoration:none;box-shadow:0 4px 14px rgba(224,168,42,.28);transition:gap .15s,filter .15s,box-shadow .18s,transform .12s}
.co-goLabel{white-space:nowrap}
.co-go:hover{gap:11px;filter:brightness(1.04);box-shadow:0 8px 22px rgba(224,168,42,.38)}
.co-go:active{transform:translateY(1px)}
.co-go:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.co-arrow{font-weight:700}
.co-trust{display:block;margin-top:9px;font-size:11.5px;color:var(--slate);letter-spacing:.01em}

/* deal cards (JDLDeals.ai-style) rendered under a Deal Finder reply */
.deal-cards-wrap{width:100%;margin:-2px 0 6px}
/* min() on the track floor is what stops the grid escaping its bubble. With a
   bare minmax(272px,1fr) a track can never shrink below 272px, so in a feed
   narrower than two tracks the grid overflows sideways instead of reflowing —
   which is exactly what put two half-visible cards in one row on a phone. */
.deal-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,272px),1fr));gap:15px}
.deal-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 1px 3px rgba(22,32,74,0.05);transition:box-shadow .18s ease,border-color .18s ease,transform .18s ease}
.deal-card:hover{border-color:#BFCDEC;box-shadow:0 14px 34px rgba(22,32,74,0.13);transform:translateY(-2px)}

.dc-img{position:relative;display:block;aspect-ratio:16/10;background:var(--mist);overflow:hidden}
.dc-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.deal-card:hover .dc-img img{transform:scale(1.035)}
.dc-img:after{content:'';position:absolute;inset:auto 0 0 0;height:56%;background:linear-gradient(to top,rgba(10,16,42,.62),transparent);pointer-events:none}
.dc-img.no-img{background:linear-gradient(135deg,#EEF2FB,#E2E8F7)}
.dc-img.no-img:before{content:'No photo';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#93A0C4;font-size:12px;font-weight:700;letter-spacing:.04em}
.dc-img.no-img:after{display:none}
.dc-badges{position:absolute;left:9px;top:9px;display:flex;flex-wrap:wrap;gap:5px;max-width:calc(100% - 18px);z-index:1}
.dc-badge{background:rgba(255,255,255,0.94);color:var(--ink);font-size:10.5px;font-weight:700;padding:4px 9px;border-radius:999px;white-space:nowrap;backdrop-filter:blur(4px);box-shadow:0 1px 4px rgba(0,0,0,.10)}
.dc-badge.dc-sub2{background:rgba(255,184,0,0.95);color:#5C3D00}
.dc-price{position:absolute;left:9px;bottom:9px;z-index:1;background:linear-gradient(135deg,var(--blue),#4338CA);color:#fff;font-size:14px;font-weight:800;padding:6px 13px;border-radius:999px;box-shadow:0 3px 10px rgba(47,107,228,.38);letter-spacing:-.01em}

.dc-body{padding:14px 15px 15px;display:flex;flex-direction:column;flex:1}
/* Full title, wrapped. It was clipped to one line with an ellipsis, which cut
   most listings mid-word — the title is how a reader tells two cards apart. */
.dc-title{display:block;font-size:14.5px;font-weight:750;color:var(--ink);line-height:1.35;text-decoration:none;letter-spacing:-.01em;overflow-wrap:anywhere}
a.dc-title:hover{color:var(--blue)}
.dc-loc{font-size:12.5px;color:var(--slate);margin-top:5px;display:flex;align-items:center;gap:5px}
.dc-specs{font-size:12.5px;color:#4C5878;margin-top:7px;padding:6px 0 0;border-top:1px dashed var(--line)}
.dc-arv{font-size:12.5px;font-weight:700;color:var(--green);margin-top:6px;display:flex;flex-wrap:wrap;gap:4px 8px}
.dc-arv .sep{color:#B6C0D8;font-weight:600}

/* RunYourNumbers read — its own titled panel, so it reads as analysis rather
   than as more listing copy running on from the specs above it. */
.dc-ryn{margin-top:11px;background:linear-gradient(180deg,#F7F9FE,#F2F5FC);border:1px solid #E3E9F7;border-radius:11px;padding:10px 12px 11px}
.dc-ryn-h{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--blue);margin-bottom:6px}
.dc-ryn-h:before{content:'';width:6px;height:6px;border-radius:50%;background:var(--blue);flex:none;box-shadow:0 0 0 3px rgba(47,107,228,.15)}
/* Figures as a table, verdict as prose. The read used to be one dense
   paragraph in the smallest type on the page, with six numbers buried inside
   it — repeated five times down the results. Nobody scans that, and scanning
   is the entire reason every card carries its own read. */
.dc-ryn-m{display:flex;flex-direction:column;gap:0;margin-bottom:9px}
.dc-ryn-r{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px dashed #E0E7F6}
.dc-ryn-r:last-child{border-bottom:none}
.dc-ryn-k{font-size:12px;color:#6B7796;font-weight:600;flex:none}
.dc-ryn-v{font-size:13.5px;color:var(--indigo);font-weight:800;text-align:right;letter-spacing:-.01em;overflow-wrap:anywhere}
.dc-ryn-b{font-size:13px;color:#3D4869;line-height:1.55}
.dc-ryn-b p{margin:0 0 6px}
.dc-ryn-b p:last-child{margin-bottom:0}
.dc-ryn-b strong{color:var(--indigo);font-weight:750;background:rgba(47,107,228,.09);border-radius:4px;padding:0 3px}

.dc-link{margin-top:12px;display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-size:12.5px;font-weight:750;color:var(--blue);text-decoration:none;border:1px solid #CBD8F3;background:#F5F8FF;padding:7px 13px;border-radius:999px;transition:background .15s,border-color .15s,gap .15s}
.dc-link:hover{background:var(--blue);border-color:var(--blue);color:#fff;gap:9px}

/* mobile: sidebar becomes a slide-in drawer */
@media(max-width:859px){
  .chat-shell{margin:0;border-radius:0;height:100%}
  .chat-sidebar{position:absolute;inset:0 auto 0 0;z-index:5;margin-left:-270px;box-shadow:0 0 0 rgba(0,0,0,0)}
  .chat-shell.sidebar-open .chat-sidebar{margin-left:0;box-shadow:14px 0 40px rgba(10,15,50,0.25)}
  .chat-sidebar-close{display:block}
}
@media(min-width:860px){
  .chat-shell:not(.sidebar-open) .chat-sidebar{margin-left:-270px}
}

/* ============================================================
   RESPONSIVE
   Kept in one block at the end so every override lands after the
   rule it is overriding, and so there is a single place to look
   when something is wrong on a phone.
   ============================================================ */

/* One overflowing element makes the WHOLE document scroll sideways, and it
   reads as a broken site long before anyone finds the culprit. These three
   lines make that structurally impossible. */
html,body{max-width:100%;overflow-x:hidden}
/* Scroll lock for the chat overlay.
   `overflow-x:hidden` on <html> above makes <html> the scroll container, which
   is why the old `body{overflow:hidden}` stopped locking anything: the page
   kept scrolling underneath the overlay. Locking <html> as well fixes desktop,
   but iOS Safari ignores overflow:hidden on both and scrolls anyway, so the
   body is pinned with position:fixed and the offset restored on close. */
html.scroll-locked{overflow:hidden}
html.scroll-locked body{position:fixed;left:0;right:0;width:100%;overflow:hidden}
img,svg,video{max-width:100%;height:auto}
/* Long unbroken strings — a pasted URL, a deal title with no spaces — are the
   usual culprit inside a narrow bubble. */
.msg,.dc-title,.co-name,.callout{overflow-wrap:anywhere}

@media(max-width:1024px){
  .wrap,.narrow{padding-left:26px;padding-right:26px}
  .pillars{grid-template-columns:repeat(3,1fr)}
  .demo-body{padding:20px 20px 22px}
}

@media(max-width:760px){
  body{font-size:16.5px}
  .wrap,.narrow{padding-left:20px;padding-right:20px}
  section{padding:44px 0}
  h2{font-size:clamp(23px,5.6vw,31px);max-width:none}
  p{max-width:none}

  /* NAV. The brand and the CTA were both nowrap at full size, so on a 360px
     screen they needed more room than existed and the button left the
     viewport. Both shrink, and the brand is now allowed to truncate rather
     than be the thing that pushes the button off. */
  nav{padding:11px 0}
  nav .wrap{gap:10px}
  .brand{font-size:14px;gap:8px;min-width:0}
  .brand-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mark{width:24px;height:24px;font-size:12px;border-radius:6px}
  .nav-cta{font-size:12.5px;padding:9px 14px;flex:none}

  /* HERO */
  .hero{padding:42px 0 46px}
  h1{font-size:clamp(24px,6.2vw,33px);max-width:none;line-height:1.2}
  .pill{font-size:11px;padding:6px 12px;margin-bottom:16px;letter-spacing:0.06em}
  .lede{font-size:15px;margin-top:16px;max-width:none}

  /* ONE GUTTER, NOT TWO. The 32px the desktop gives each side left the content
     boxed into the middle of a phone. 16px, and the page runs edge to edge. */
  .wrap{padding:0 16px}

  /* The hero prompt box: input and button side by side left the button
     squeezed to a stub and the placeholder clipped. Stacked, both are full
     size and the button is an easy target.

     NO BOX INSIDE A BOX. On a phone the frame around the white input row was
     a second border inside the page's own margin, which is what made the
     prompt look boxed in. The frame goes; the white row IS the prompt. */
  .promptbox{padding:0;border:0;background:none;border-radius:0;margin-top:24px;max-width:none}
  .pb-row{flex-wrap:wrap;padding:10px;border-radius:12px;gap:8px}
  /* The speech-bubble emoji is decoration, and once the row stacks it would
     sit alone on its own line looking like a mistake. */
  .pb-row>span{display:none}
  #pbInput{flex:1 1 100%;padding:8px 4px;font-size:16px}
  .pb-go{flex:1 1 100%;padding:12px 18px;font-size:14.5px}
  .pb-chips{gap:7px;margin-top:11px}
  .chip{font-size:12.5px;padding:7px 12px}
  .callout{font-size:14px;padding:14px 15px;gap:10px;margin-top:18px}

  /* DEMO — the second chat surface on the page. */
  .demo{margin-top:26px;border-radius:16px;padding:6px}
  .demo-bar{padding:9px 11px}
  .demo-bar span{font-size:11.5px}
  .demo-body{padding:16px 15px 18px}
  .demo-row{flex-direction:column;align-items:stretch}
  #demoInput{font-size:16px;padding:12px 14px}
  .demo-go{width:100%;padding:13px 20px}
  .demo-note{font-size:13px}
  .demo-cta{padding:16px 17px;flex-direction:column;align-items:flex-start;gap:12px}
  .mini{width:100%;text-align:center}
  .gate{padding:20px 18px}
  .gate h5{font-size:16.5px}
  .gate p{font-size:14px}

  /* Content blocks */
  .pain li,.bullets li{font-size:16px;padding-left:28px}
  .reccard{padding:22px 18px;border-radius:16px}
  .rc-head{gap:12px}
  .rc-head h3{font-size:20px}
  .rc-price{text-align:left}
  .rc-price span{font-size:28px}
  .paybtns{flex-direction:column}
  .paybtn{width:100%;text-align:center}
  .savebox{padding:22px 18px}
  .btn{width:100%;text-align:center;padding:15px 24px}
  .guar{padding:24px 20px}
  .guar h3{font-size:21px}
  /* label and figure stack instead of colliding in the middle */
  .stack div{flex-direction:column;align-items:flex-start;gap:3px;font-size:15px;padding:13px 16px}
  .stack b{white-space:normal}
  .kv{flex-direction:column;align-items:flex-start;gap:2px}
  .kv b{white-space:normal}
  .proof div{padding:18px 17px}
  .proof h3{font-size:17px}
  .creds li{font-size:15px}
  .flag{padding:15px 16px}
  .ans{font-size:14.5px;padding:11px 16px}
  .bub{max-width:92%;font-size:15.5px;padding:13px 16px}
  footer{padding:28px 0}
  footer .wrap{flex-direction:column;gap:10px}
}

/* ============ chat overlay on a phone ============ */
@media(max-width:700px){
  /* One deal per row. Two half-width cards side by side made the photo, the
     title and the RunYourNumbers read all unreadable at once. */
  .deal-cards{grid-template-columns:1fr;gap:12px}
  .dc-body{padding:13px 14px 14px}
  .dc-ryn{padding:9px 11px 10px}
}

@media(max-width:560px){
  .chat-head{padding:11px 12px;gap:9px}
  .chat-head-orb{width:30px;height:30px;font-size:14px}
  .chat-head-txt b{font-size:14px}
  .chat-head-txt span{font-size:11px}
  .chat-sidebar-toggle,.chat-close{width:32px;height:32px}
  .chat-feed{padding:14px;gap:11px}
  .feed-welcome{margin:26px auto}
  .msg{max-width:92%;font-size:14.5px;padding:11px 14px;border-radius:14px}
  .chat-chips{padding:0 14px 12px;gap:7px}
  .chip-ask{font-size:12.5px;padding:7px 12px}
  .chat-composer{padding:11px 12px}
  .composer-row{padding:6px 6px 6px 13px;border-radius:14px}
  /* 16px exactly: anything smaller and iOS Safari zooms the page on focus,
     which leaves the layout scrolled sideways when the keyboard closes. */
  #chatInput{font-size:16px}
  .chat-send{width:36px;height:36px}
  .chat-fine{font-size:11px;margin-top:7px}
  /* A 270px drawer eats most of a 320px screen. Scoped to the CLOSED state
     only — putting the offset on .chat-sidebar itself would out-order the
     .sidebar-open rule above it and the drawer could never open. */
  .chat-sidebar{width:min(84vw,270px);flex-basis:min(84vw,270px)}
  .chat-shell:not(.sidebar-open) .chat-sidebar{margin-left:calc(-1 * min(84vw,270px))}

  /* The card lives inside a chat bubble that is already inset from both edges,
     so on a 320px phone it has barely 240px to work with. The name and price
     stop competing for one line, and the button goes full width — it is the
     only tappable thing on the card, so it should be the easiest to hit. */
  .co-card{padding:13px 14px 12px}
  .co-top{flex-direction:column;align-items:flex-start;gap:2px}
  .co-name{font-size:14px}
  .co-price{font-size:18px}
  .co-sub{font-size:12px}
  .co-go{display:flex;width:100%;padding:11px 14px;font-size:13px}
  .co-trust{font-size:11px}

  .pillars{grid-template-columns:repeat(2,1fr)}
  h1{font-size:clamp(22px,7.2vw,29px)}
  .rc-price span{font-size:25px}
  .tgrid blockquote{padding:20px 18px}
}

@media(max-width:380px){
  .wrap,.narrow{padding-left:16px;padding-right:16px}
  .brand{font-size:13px}
  .nav-cta{font-size:11.5px;padding:8px 12px}
  .msg{max-width:96%}
}
/* ==== Platform refresh: the network look (grow module). Presentation only. ==== */
:root{--indigo:#1E3A8A;--indigo-deep:#0B1220;--purple:#152B68;--blue:#2C55F5;--gold:#8FA9FF;--ink:#0B1220;--slate:#5B6680;--mist:#F5F8FE;--line:#E4EAF4;--green:#0A9F5A}
h1,h2,h3,h4{font-weight:900;letter-spacing:-.035em}
.grad{background:linear-gradient(135deg,#0B1220 0%,#152B68 55%,#1E3A8A 100%)}
.gate,.chat-head{background:linear-gradient(135deg,#0B1220,#1E3A8A)}
nav{background:#fff;border-bottom:1px solid #E4EAF4}
nav .brand{color:#0B1220;font-weight:900;letter-spacing:-.03em}
.nav-cta,.btn,.paybtn,.co-go,.mini,.pb-go,.chat-send,.chat-head-orb,.fw-orb{background:#2C55F5;color:#fff;border-color:#2C55F5}
.nav-cta:hover,.btn:hover,.paybtn:hover,.co-go:hover,.mini:hover,.pb-go:hover{background:#1E3FCC;border-color:#1E3FCC}
.msg.user,.chat-newbtn,.dc-price{background:#2C55F5}
.pill{background:rgba(143,169,255,.15);border-color:rgba(143,169,255,.4)}
.reccard{border-color:#2C55F5;box-shadow:0 8px 34px rgba(44,85,245,.16)}
.guar{background:linear-gradient(135deg,rgba(44,85,245,.06),rgba(10,159,90,.08));border-color:#2C55F5}
.prog-fill{background:#2C55F5}
.tgrid .stars{color:#F5A524}
.creds li:before{color:#2C55F5}
.flag.warn{border-left-color:#F5A524}
a:focus-visible,button:focus-visible{outline-color:#2C55F5}
footer{background:#0B1220}
.nw-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:8px}
.nw-step{display:block;background:#fff;border:1px solid var(--line);border-top:3px solid var(--c);border-radius:14px;padding:18px;color:var(--ink);text-decoration:none;transition:transform .15s,border-color .15s}
.nw-step:hover{transform:translateY(-2px);border-color:var(--c)}
.nw-step b{display:block;font-size:17px;font-weight:900;letter-spacing:-.03em}
.nw-step p{font-size:13.5px;color:var(--slate);margin:4px 0 10px;line-height:1.45}
.nw-step small{font-size:12px;font-weight:700;color:var(--c)}
.nw-doors{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.nw-door{display:block;background:#fff;border:1px solid var(--line);border-left:4px solid var(--c);border-radius:16px;padding:24px;color:var(--ink);text-decoration:none}
.nw-door:hover{box-shadow:0 12px 30px rgba(11,18,32,.08)}
.nw-door .dl{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--c);margin-bottom:8px}
.nw-door b{display:block;font-size:19px;font-weight:900;letter-spacing:-.03em}
.nw-door p{font-size:14.5px;color:var(--slate);margin:6px 0 12px}
.nw-door small{font-size:13px;font-weight:700;color:var(--c)}
@media(max-width:900px){.nw-steps{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.nw-steps,.nw-doors{grid-template-columns:1fr}}
/* network bar + platform footer + network section (shared by both pages) */
/* ==== THE LIGHT GROUND, for the hero ====
   Every other site in the network opens on white. A dark navy hero here read as
   a different product sitting under the same platform bar, so the hero moves to
   the light ground and the network blue carries the emphasis. The two .grad
   sections further down the page stay dark on purpose — they break the rhythm of
   a long page, which is not the same thing as the site opening dark. */
.hero.lite{background:#fff;color:var(--ink)}
.hero.lite .pill{background:rgba(44,85,245,.08);border-color:rgba(44,85,245,.28);color:#2C55F5}
.hero.lite h1{color:var(--ink)}
.hero.lite h1 span{color:#2C55F5}
.hero.lite .lede{color:var(--slate)}
/* On white the translucent-white frame was invisible; it becomes the page's own
   light surface so the prompt still reads as one object.

   FROM 641px UP ONLY. On a phone the frame is removed altogether (no box inside
   a box), and this selector is specific enough to have overridden that and put
   the fill back — so it is kept away from the widths where it must not apply. */
@media(min-width:641px){
  .hero.lite .promptbox{background:var(--mist);border-color:var(--line)}
}
.hero.lite .pb-row{border:1px solid var(--line)}
.hero.lite .chip{background:#fff;border-color:var(--line);color:var(--ink)}
.hero.lite .chip:hover{background:var(--mist);color:var(--ink)}
.hero.lite .callout{background:var(--mist);border-color:var(--line);color:var(--slate)}
.hero.lite .callout strong{color:var(--ink)}
.hero.lite .callout a{color:#2C55F5}
/* The dot grid was white dots for a dark ground; on white it needs to be ink. */
.dots-lite{background-image:radial-gradient(rgba(11,18,32,0.07) 1.4px,transparent 1.4px);background-size:16px 16px}

.plat{background:#0B1220;color:#fff;font-size:12px;position:relative;z-index:70;font-family:'Inter',system-ui,sans-serif;line-height:1.4}
.plat-in{display:flex;align-items:center;gap:10px;min-height:44px;max-width:1180px;margin:0 auto;padding:0 24px}
/* The logo is its own block, outside the scroller, so no name can pass behind
   it; the names scroll in .plat-track, the only scrolling element. */
.plat-lbl{flex:none;display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:13px;letter-spacing:-.025em;white-space:nowrap}
.plat-lbl .pmark{width:26px;height:26px;border-radius:8px;background:#2C55F5;display:grid;place-items:center;flex:none}
.plat-lbl .pmark svg{width:15px;height:15px;display:block;fill:none}
.plat-track{flex:1;min-width:0;display:flex;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;cursor:grab;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%)}
.plat-track::-webkit-scrollbar{display:none}
.plat-track.is-dragging{cursor:grabbing}
.plat-track.is-dragging a{pointer-events:none}
.plat-in a{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:999px;color:#C3CBDC;white-space:nowrap;font-weight:600;flex:none;text-decoration:none}
.plat-in a:hover{background:#1A2334;color:#fff}
.plat-in a i{width:7px;height:7px;border-radius:50%;flex:none;display:block}
.plat-in a[aria-current="page"]{background:#fff;color:#0B1220;font-weight:800}
.plat-sp{flex:none;min-width:8px}
.plat-in .plat-tel{color:#fff;font-weight:700;padding-left:8px}
@media(max-width:760px){.plat-in .plat-tel{display:none}}
/* The bar sits on the same 16px gutter as the page below it on a phone, so the
   logo lines up with the content instead of sitting 8px further in. */
@media(max-width:640px){.plat-in{padding:0 16px}}
.foot-plat{flex:0 0 100%;width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:26px;text-align:left;padding:8px 0 26px;margin-bottom:24px;border-bottom:1px solid rgba(255,255,255,.12);font-family:'Inter',system-ui,sans-serif}
.foot-plat h5{color:#fff;font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin:0 0 12px;min-height:16px}
.foot-plat a{display:block;font-size:13.5px;color:#9AA6C0;padding:3px 0;text-decoration:none}
.foot-plat a:hover{color:#fff}
@media(max-width:760px){.foot-plat{grid-template-columns:1fr 1fr}}
/* Narrow phones: let the brand wrap to two lines instead of truncating */
@media(max-width:400px){.brand-txt{white-space:normal;line-height:1.15}}

/* iOS ZOOMS THE PAGE IN when a form control smaller than 16px takes focus, and
   does not zoom back out: the field ends up magnified and the layout shifted
   under it. Every control goes to at least 16px on a phone. The desktop sizes
   above stand — this only applies where the zoom happens.

   !important because it has to beat whatever each component sets locally, and
   those rules carry a class so they outrank any plain element selector. It is
   deliberately narrow: one property, on form controls, below 640px only. */
@media (max-width:640px){
  input,textarea,select{font-size:16px!important}
}

/* ==========================================================================
   /ask-ai — the Ask AI splash.

   One screen, nothing scrolling: the headline, the prompt, five one-word chips
   and the Claire line, in the shape every site on the platform now opens on.

   It is a .hero.lite as well as a .splash, so the prompt box, the chip pills and
   the Claire callout are the home page's own light-ground versions, with no
   second copy of those styles to keep in step. These rules only reset the hero's
   page padding — 78px of air above a headline is right when a page continues
   below it and wrong when the headline IS the page — and add the three parts the
   home page has no use for.

   100dvh, not 100vh. On a phone 100vh is the viewport with the address bar
   scrolled away, which is TALLER than what you can see, so a screen built to it
   hides its own last row — here the Claire number and "See details", the two
   things on the page that are not the box. 100dvh is the visible height. The vh
   line before it is the fallback where dvh is not understood yet.

   NO MAGIC NUMBER FOR THE CHROME. This started as calc(100dvh - 108px), the
   platform bar plus the nav added up by hand, and that is wrong twice over: the
   nav has a shorter mobile padding, and under 400px the brand is allowed to wrap
   onto two lines and it grows. Each of those is a scrollbar on a page whose whole
   claim is that it does not scroll.

   So the BODY of this page is the fixed-height column, the bar and the nav are
   its fixed rows, and the splash takes whatever is left, measured rather than
   guessed. The body class lives in ask-ai/index.html and nowhere else, so the
   home page is untouched. It is safe for the chat too: #chatOverlay is
   position:fixed, so it is out of this flow entirely.

   It deliberately does NOT clip. Nothing should scroll because nothing should
   overflow — but the moment the keyboard opens the usable height halves, and a
   clipped screen cannot bring the field being typed in back into view. So a
   short screen, or one with a keyboard on it, degrades into an ordinary scroll
   rather than hiding the prompt.
   ========================================================================== */
body.askai{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
body.askai>.plat,body.askai>nav{flex:none}
.hero.splash{flex:1;min-height:0;padding:0;display:grid;align-content:center}
.hero.splash .wrap{gap:0}
.splash-h1{font-size:clamp(34px,9vw,52px);font-weight:900;letter-spacing:-.045em;line-height:1.03;margin:0}
.hero.splash .promptbox{margin-top:20px}
.splash-call{font-size:13.5px;color:var(--slate);margin:18px 0 0}
.splash-call a{color:var(--blue);font-weight:700;text-decoration:none}
.splash-more{font-size:13.5px;font-weight:700;color:var(--slate);text-decoration:none;margin-top:12px}
.splash-more:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
@media (max-width:640px){
  .hero.splash{padding:0 0 8px}
  .hero.splash .promptbox{margin-top:16px}
  .splash-call{margin-top:14px}
}

/* ---- the splash's own polish --------------------------------------------
   Four things that made this read as a near-miss of the platform splash rather
   than the same screen in this site's colours. All of it is scoped to
   .hero.splash, so the home page's hero is untouched. */

/* 1. TWO LINES. "One prompt." then the promise, the way every other site sets
      it. It was one run of text breaking wherever the width happened to put it,
      so the shape of the headline changed with the phone. The accent is this
      site's own --blue rather than a platform hex written out by hand. */
.splash-h1 span{display:block;color:var(--blue)}

/* 2. NO BOX INSIDE A BOX — the fault the spec names on this site by name. The
      promptbox is a tinted panel on the home page, which is right where it sits
      inside a busy hero and has to be picked out of it. Here the row IS the one
      control on the screen, so a panel around it is a second frame around the
      only thing on the page. The row keeps a soft lift instead, which says
      "this is the thing" without drawing another edge. */
.hero.splash .promptbox{background:none;border:0;padding:0;max-width:640px}
.hero.splash .pb-row{box-shadow:0 10px 30px -14px rgba(18,26,78,.35)}
/* The mark stays on a phone here. The home page hides it to buy width in a
   crowded hero; on the splash it is what tells you the box is the AI, and every
   other site in the network shows it at every width. */
.hero.splash .pb-row>.pb-mark{display:inline-flex;color:var(--blue);flex:none}
.hero.splash .pb-row>.pb-mark svg{width:18px;height:18px;display:block}

/* 3. THE CHIPS GET THE ACCENT DOT every other site's splash chips have and
      these did not, and a 38px floor so that with the 8px row gap they clear the
      44px tap target the spec asks for. */
.hero.splash .pb-chips{margin-top:14px}
.hero.splash .chip{display:inline-flex;align-items:center;gap:7px;min-height:38px;font-weight:700}
.hero.splash .chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue);flex:none}

/* 4. "See details" picks up the same accent on hover as the rest of the screen
      rather than going flat black. */
.splash-more:hover{color:var(--blue)}

/* NO ZOOM WHEN A FIELD IS TAPPED ON A PHONE.

   iPhone zooms the page in whenever a field it is about to focus has text
   under 16px, and it does not zoom back out: the person is left on a page
   wider than the screen, panning sideways to read it. 16px is the threshold
   Safari uses and it is not a rounding -- 15.5px zooms just as 14px does.

   The sizes below were all under it. Raised on phones only, where the zoom
   happens, so the desktop sizes stay exactly as they were designed. Listed one
   selector at a time rather than as a blanket rule over input and textarea, so
   nothing else on the page changes size.

   Part of the platform mobile standard: "Inputs at 16px or larger so iPhone
   does not zoom on tap." */
@media (max-width: 640px) {
  #demoInput,
  #chatInput {
    font-size: 16px;
  }
}