/* Shared shell for the secondary marketing pages (/investors, /business).
   The tokens and component names mirror landing.html so the pages read as
   one site; landing.html stays self-contained on purpose — it carries the
   opening sequence and nothing else should depend on it. */

:root{
  --white:#FFFFFF;
  --blue:#1E3A8A;
  --blue-deep:#16306e;
  --pink:#D14B8A;
  --pink-soft:#F2A8C8;
  --sky:#5B7FD4;
  --sky-soft:#9db3e6;
  --ink:#1A1612;
  --muted:#6b6b6b;
  --tint-blue:#EEF2FC;
  --tint-pink:#FBEAF1;
  --night:#101B45;
  --line:rgba(26,22,18,.10);
  --sans:'DM Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'DM Mono',ui-monospace,monospace;
  --pad:clamp(20px,4vw,48px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;color-scheme:light only}
body{background:var(--white);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--pink)}
input,button,textarea,select{font-family:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px}

.mono{font-family:var(--mono)}
.pink{color:var(--pink)}
.wrap{max-width:1240px;margin:0 auto}
.narrow{max-width:820px;margin:0 auto}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--sky);margin-bottom:14px}
.eyebrow.on-blue{color:var(--sky-soft)}
h1,h2,h3{font-weight:900;letter-spacing:-.03em;line-height:1.04}
.h2{font-size:clamp(30px,4.2vw,54px)}
.body{font-size:clamp(16px,1.3vw,19px);line-height:1.6;text-wrap:pretty}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.js .rise{opacity:0;transform:translateY(28px)}
.js .rise.in{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.js .rise.late.in{transition-delay:.08s}
@media (prefers-reduced-motion:reduce){.js .rise{opacity:1;transform:none}}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar .row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px var(--pad)}
.brandmark{display:flex;align-items:center;gap:.1em;font-weight:900;font-size:22px;color:var(--blue);letter-spacing:-.03em;line-height:1}
.brandmark svg{width:.78em;height:.78em}
.topnav{display:flex;align-items:center;gap:20px;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:lowercase;color:var(--muted)}
.topnav a{color:var(--muted)}
.topnav a:hover,.topnav a[aria-current]{color:var(--pink)}
@media (max-width:620px){.topnav a.hide-sm{display:none}}

/* ---------- page hero ---------- */
.phero{padding:clamp(54px,8vw,104px) var(--pad) clamp(34px,5vw,60px)}
.phero h1{font-size:clamp(38px,6vw,80px);line-height:1.02;max-width:16ch;text-wrap:balance}
.phero .stand{margin-top:22px;font-weight:700;font-size:clamp(17px,1.5vw,21px);line-height:1.45;color:var(--blue);max-width:38ch;text-wrap:balance}
.phero .body{margin-top:18px;max-width:52ch}
.phero .cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}

.btn{display:inline-block;font-weight:700;font-size:16px;background:var(--blue);color:var(--white);padding:16px 30px;border-radius:999px;border:none;cursor:pointer;transition:background .18s}
.btn:hover{background:var(--pink);color:var(--white)}
.btn:disabled{opacity:.5;cursor:default}
.btn.ghost{background:transparent;color:var(--blue);border:2px solid var(--blue);padding:14px 28px}
.btn.ghost:hover{background:var(--blue);color:var(--white)}
.btn.small{font-size:14px;padding:11px 20px}

/* ---------- generic section ---------- */
.sec{padding:clamp(48px,7vw,96px) var(--pad)}
.sec.tint{background:var(--tint-blue)}
.sec.night{background:var(--night);color:var(--white)}
.sec.night h2,.sec.night h3{color:var(--white)}
.sec.night .body{color:rgba(255,255,255,.82)}
.sec .lede{max-width:32ch}
.sec .lede .body{margin-top:18px;max-width:46ch}

.grid{display:grid;gap:22px;margin-top:clamp(30px,4vw,52px)}
.grid.c2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid.c3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

.card{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:28px 26px}
.sec.tint .card{border-color:rgba(30,58,138,.14)}
.sec.night .card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.card h3{font-size:20px;margin-bottom:10px}
.card p{font-size:15px;line-height:1.6;color:var(--muted)}
.sec.night .card p{color:rgba(255,255,255,.72)}
.card .num{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--pink);display:block;margin-bottom:12px}

/* numbered walkthrough */
.steps{counter-reset:step;display:grid;gap:0;margin-top:clamp(28px,4vw,46px)}
.step{display:grid;grid-template-columns:64px 1fr;gap:20px;padding:26px 0;border-top:1px solid var(--line)}
.sec.night .step{border-color:rgba(255,255,255,.16)}
.step:last-child{border-bottom:1px solid var(--line)}
.sec.night .step:last-child{border-color:rgba(255,255,255,.16)}
.step .k{counter-increment:step;font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--sky);padding-top:5px}
.step .k::before{content:"0" counter(step)}
.step h3{font-size:clamp(19px,2vw,25px);margin-bottom:8px}
.step p{font-size:15px;line-height:1.6;color:var(--muted);max-width:60ch}
.sec.night .step p{color:rgba(255,255,255,.72)}
@media (max-width:560px){.step{grid-template-columns:1fr;gap:8px}}

/* ---------- forms ---------- */
.form{display:grid;gap:14px;margin-top:28px;max-width:640px}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.form .two{grid-template-columns:1fr}}
.field label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.field input,.field textarea,.field select{width:100%;background:var(--white);border:1px solid rgba(26,22,18,.2);border-radius:12px;padding:14px 16px;font-size:16px;color:var(--ink)}
.field textarea{min-height:112px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(30,58,138,.14)}
.sec.night .field label{color:rgba(255,255,255,.6)}
.sec.night .field input,.sec.night .field textarea,.sec.night .field select{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);color:var(--white)}
.sec.night .field input::placeholder,.sec.night .field textarea::placeholder{color:rgba(255,255,255,.42)}
.fine{font-family:var(--mono);font-size:11px;line-height:1.6;color:var(--muted);margin-top:4px}
.sec.night .fine{color:rgba(255,255,255,.55)}
.note-ok,.note-err{border-radius:12px;padding:14px 16px;font-size:15px;line-height:1.5}
.note-ok{background:var(--tint-pink);color:var(--blue)}
.note-err{background:#FDECEC;color:#9B2C2C}
.sec.night .note-ok{background:rgba(209,75,138,.18);color:var(--white)}
.sec.night .note-err{background:rgba(255,120,120,.16);color:#FFD7D7}
[hidden]{display:none !important}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:clamp(44px,6vw,72px) var(--pad)}
.foot-row{display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between;align-items:flex-end}
.foot-left{display:flex;flex-direction:column;gap:14px}
.cities{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--muted)}
.endline{font-weight:900;font-size:clamp(22px,3vw,34px);letter-spacing:-.03em;color:var(--blue)}
.foot-links{display:flex;gap:20px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;color:var(--muted)}
.foot-links a,.foot-links button{color:var(--muted)}
.foot-links a:hover,.foot-links button:hover{color:var(--pink)}
.foot-links button{font-family:var(--mono);font-size:12px;background:none;border:none;cursor:pointer;padding:0}