/* Finli.com — design system v1 (Oct 2026)
   Brand: Finli Branding Guidelines 2022 — Poppins, Finli blue/green, Google Rounded icons. */

@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/poppins-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/poppins-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/poppins-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/poppins-latin-700-normal.woff2) format("woff2")}

:root{
  --navy:#000C66;      /* T3 */
  --deep:#002F95;      /* T2 — primary actions */
  --blue:#3C85F8;      /* B1 — logo, accents */
  --blue-2:#6DA3FA;
  --blue-3:#9DC2FB;
  --blue-4:#CEE0FD;
  --green:#5DC268;     /* G1 — money lands, success */
  --green-ink:#1F7A35;
  --green-4:#D7F0D9;
  --mist:#F4F9FE;      /* T1 */
  --ink:#141B3D;
  --ink-2:#4A5677;
  --ink-3:#6E7894;
  --line:#DCE5F3;
  --line-2:#E9EFF8;
  --white:#fff;
  --radius:14px;
  --radius-s:10px;
  --shadow:0 30px 70px -32px rgba(0,47,149,.38),0 2px 6px rgba(0,12,102,.06);
  --wrap:1200px;
  --gut:clamp(16px,4vw,32px);
  --fs-body:1.0625rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:88px}
body{margin:0;font-family:Poppins,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:var(--fs-body);line-height:1.65;color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%}
img{height:auto;display:block}
a{color:var(--deep);text-underline-offset:3px}
a:hover{color:var(--navy)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--navy);color:#fff;padding:10px 16px;border-radius:8px;z-index:100}
.skip:focus{left:12px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.narrow{max-width:760px}
.i{width:1.25em;height:1.25em;fill:currentColor;flex-shrink:0;vertical-align:-.25em}

/* ---------- type ---------- */
h1,h2,h3,h4{font-weight:600;line-height:1.15;letter-spacing:-.022em;color:var(--navy);margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(2.25rem,4.6vw,3.6rem)}
h2{font-size:clamp(1.75rem,3vw,2.5rem)}
h3{font-size:1.25rem;letter-spacing:-.01em}
h4{font-size:1.0625rem;letter-spacing:0}
p{margin:0 0 1em;max-width:68ch}
.lede{font-size:clamp(1.0625rem,1.4vw,1.25rem);color:var(--ink-2);max-width:60ch;line-height:1.6}
.muted{color:var(--ink-3)}
.small{font-size:.875rem}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:.9375rem;font-weight:500;color:var(--deep);margin-bottom:14px}
.kicker .dot{width:8px;height:8px;border-radius:50%;background:var(--green)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:600;font-size:1rem;line-height:1;padding:15px 22px;border-radius:var(--radius-s);border:1.5px solid var(--deep);background:var(--deep);color:#fff;text-decoration:none;cursor:pointer;min-height:48px;transition:background .15s,border-color .15s,color .15s}
.btn:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.ghost{background:transparent;color:var(--deep)}
.btn.ghost:hover{background:var(--mist);color:var(--navy)}
.btn.light{background:#fff;color:var(--deep);border-color:#fff}
.btn.light:hover{background:var(--blue-4);border-color:var(--blue-4);color:var(--navy)}
.btn.sm{padding:10px 16px;min-height:42px;font-size:.9375rem}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.textlink{font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.textlink:hover{text-decoration:underline}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line-2)}
.head-in{display:flex;align-items:center;gap:20px;height:72px}
.logo{display:inline-flex;align-items:center;flex-shrink:0}
.logo img{height:30px;width:auto}
.nav{display:flex;align-items:center;gap:2px;margin-left:8px}
.nav-item{position:relative}
.nav-btn{font:inherit;font-size:.9375rem;font-weight:500;color:var(--ink);background:none;border:0;padding:10px 12px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;gap:4px;text-decoration:none}
.nav-btn:hover,.nav-item.open>.nav-btn{background:var(--mist);color:var(--navy)}
.nav-btn .chev{width:16px;height:16px;transition:transform .15s}
.nav-item.open .chev{transform:rotate(180deg)}
.panel{position:absolute;top:calc(100% + 8px);left:-8px;min-width:320px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:10px;display:none}
.panel.wide{min-width:620px;display:none;grid-template-columns:1fr 1fr;gap:2px 8px}
.nav-item.open .panel{display:block}
.nav-item.open .panel.wide{display:grid}
.panel a{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--ink)}
.panel a:hover{background:var(--mist)}
.panel a .i{color:var(--deep);margin-top:2px}
.panel b{display:block;font-weight:600;font-size:.9375rem;color:var(--navy)}
.panel span{display:block;font-size:.8125rem;color:var(--ink-3);line-height:1.45}
.panel .panel-foot{grid-column:1/-1;border-top:1px solid var(--line-2);margin-top:6px;padding-top:6px}
.head-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.signin{font-size:.9375rem;font-weight:500;color:var(--ink);text-decoration:none;padding:10px 12px;border-radius:8px}
.signin:hover{background:var(--mist)}
.menu-toggle{display:none;font:inherit;background:none;border:1.5px solid var(--line);border-radius:10px;width:46px;height:46px;align-items:center;justify-content:center;color:var(--navy);cursor:pointer}
.pill{display:inline-block;font-size:.6875rem;font-weight:600;letter-spacing:.01em;padding:2px 8px;border-radius:99px;background:var(--green-4);color:var(--green-ink);vertical-align:2px;margin-left:6px}
@media (max-width:1060px){
  .nav,.signin{display:none}
  .menu-toggle{display:inline-flex}
  .head-actions .btn{display:none}
  body.menu-open{overflow:hidden}
  /* backdrop-filter on the header makes it the containing block for any fixed
     descendant, so the drawer sized itself to the 68px header instead of the
     viewport and the page showed through beneath it. */
  body.menu-open .site-head{backdrop-filter:none;-webkit-backdrop-filter:none}
  body.menu-open .nav{display:flex;position:fixed;inset:72px 0 0 0;background:var(--field);flex-direction:column;align-items:stretch;gap:0;margin:0;padding:12px var(--gut) 120px;overflow-y:auto}
  body.menu-open .nav-btn{width:100%;justify-content:space-between;font-size:1.0625rem;padding:14px 8px;border-radius:0;border-bottom:1px solid var(--line-2)}
  body.menu-open .panel,body.menu-open .panel.wide{position:static;box-shadow:none;border:0;min-width:0;padding:4px 0 12px}
  body.menu-open .nav-item.open .panel.wide{display:block}
  body.menu-open .mobile-cta{display:flex}
}
.mobile-cta{display:none;flex-direction:column;gap:10px;margin-top:20px}

/* ---------- sections ---------- */
.section{padding:clamp(64px,8vw,112px) 0}
.section.tight{padding:clamp(44px,5vw,72px) 0}
.bg-mist{background:var(--mist)}
.bg-navy{background:var(--navy);color:#dfe7ff}
.bg-navy h2,.bg-navy h3,.bg-navy h4{color:#fff}
.bg-navy .lede,.bg-navy p{color:#c9d5f7}
.bg-navy a:not(.btn){color:#fff}
.sec-head{max-width:760px;margin-bottom:clamp(32px,4vw,52px)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center .lede,.sec-head.center p{margin-inline:auto}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,64px);align-items:center}
.grid-2.top{align-items:start}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
@media (max-width:900px){.grid-2,.grid-3{grid-template-columns:minmax(0,1fr)}.grid-4{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.grid-4{grid-template-columns:1fr}}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--mist) 0%,#fff 100%);padding:clamp(48px,7vw,96px) 0 clamp(56px,7vw,96px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(32px,4vw,56px);align-items:center}
.hero h1{margin-bottom:.4em}
.hero .lede{margin-bottom:28px}
.hero-note{margin-top:18px;font-size:.9375rem;color:var(--ink-3)}
.hero-note a{font-weight:500}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr}}
.page-hero{background:var(--mist);padding:clamp(48px,6vw,88px) 0 clamp(40px,5vw,72px);border-bottom:1px solid var(--line-2)}
.page-hero .lede{margin-bottom:24px}
.crumbs{font-size:.875rem;color:var(--ink-3);margin-bottom:18px;display:flex;flex-wrap:wrap;gap:6px}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{text-decoration:underline}

/* ---------- white-label demo (hero) ---------- */
.wl{--bk:#0B2A5B;--bk2:#123B7A;--bka:#38B6FF;position:relative}
.wl-switch{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;align-items:center}
.wl-switch .lbl{font-size:.875rem;color:var(--ink-3);margin-right:4px}
.wl-switch button{font:inherit;font-size:.8125rem;font-weight:500;color:var(--ink-2);background:#fff;border:1.5px solid var(--line);border-radius:99px;padding:6px 12px 6px 8px;display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.wl-switch button i{width:14px;height:14px;border-radius:50%;display:inline-block}
.wl-switch button[aria-pressed=true]{border-color:var(--deep);color:var(--navy);box-shadow:0 0 0 3px var(--blue-4)}
.wl-frame{border-radius:16px;background:#fff;box-shadow:var(--shadow);border:1px solid var(--line);overflow:hidden}
.wl-bar{height:34px;background:#F1F4FA;border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:6px;padding:0 12px}
.wl-bar i{width:9px;height:9px;border-radius:50%;background:#D5DCEA}
.wl-bar .url{margin-left:10px;flex:1;height:20px;border-radius:6px;background:#fff;border:1px solid var(--line-2);font-size:.6875rem;color:var(--ink-3);display:flex;align-items:center;padding:0 8px;white-space:nowrap;overflow:hidden}
.wl-app{display:grid;grid-template-columns:150px 1fr;min-height:360px;font-size:.75rem}
.wl-side{background:linear-gradient(180deg,var(--bk),var(--bk2));color:#fff;padding:16px 12px;display:flex;flex-direction:column;gap:4px;transition:background .3s}
.wl-brand{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.wl-mark{width:28px;height:28px;border-radius:8px;background:var(--bka);display:grid;place-items:center;font-weight:700;font-size:.8125rem;color:#fff;transition:background .3s}
.wl-name{font-weight:600;font-size:.6875rem;line-height:1.25}
.wl-pow{font-size:.5625rem;opacity:.75;display:flex;align-items:center;gap:4px;margin:-6px 0 10px 36px}
.wl-pow img{height:8px;width:auto;display:inline-block}
.wl-nav{padding:7px 8px;border-radius:7px;font-weight:500;font-size:.625rem;letter-spacing:.04em;opacity:.85}
.wl-nav.on{background:rgba(255,255,255,.16);opacity:1}
.wl-main{padding:16px 18px;background:#F7F9FD;min-width:0}
.wl-cta{white-space:nowrap}
.wl-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.wl-top b{font-size:.9375rem;color:var(--ink)}
.wl-cta{background:var(--bk);color:#fff;border-radius:7px;padding:6px 10px;font-weight:600;font-size:.6875rem;transition:background .3s}
.wl-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.wl-kpi{background:#fff;border-radius:9px;padding:9px 10px;box-shadow:0 1px 2px rgba(10,20,60,.07)}
.wl-kpi small{display:block;color:var(--ink-3);font-size:.625rem}
.wl-kpi b{font-size:1rem;color:var(--ink);letter-spacing:-.01em}
.wl-list{background:#fff;border-radius:9px;box-shadow:0 1px 2px rgba(10,20,60,.07);overflow:hidden}
.wl-row{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:8px 10px;border-top:1px solid var(--line-2)}
.wl-row:first-child{border-top:0}
.wl-row span{color:var(--ink-3);font-size:.625rem;display:block}
.wl-row b{font-weight:600;color:var(--ink)}
.st{font-size:.5625rem;font-weight:600;padding:3px 7px;border-radius:99px;white-space:nowrap}
.st.paid{background:#E5F6E8;color:#1F7A35}.st.due{background:#FFF3D6;color:#8A5A00}.st.view{background:#E7EEFC;color:#123B7A}
.wl-toast{position:absolute;right:-10px;bottom:28px;background:#fff;border-radius:12px;box-shadow:var(--shadow);border:1px solid var(--line);padding:10px 14px 10px 12px;display:flex;gap:10px;align-items:center;font-size:.75rem;max-width:270px}
.wl-toast .ok{width:28px;height:28px;border-radius:50%;background:var(--green);display:grid;place-items:center;flex-shrink:0}
.wl-toast .ok svg{width:16px;height:16px;fill:#fff}
.wl-toast b{display:block;color:var(--ink)}
.wl-toast span{color:var(--ink-3)}
.wl-cap{font-size:.8125rem;color:var(--ink-3);margin-top:14px}
@media (prefers-reduced-motion:no-preference){
  .wl-toast{animation:landIn .7s cubic-bezier(.2,.8,.2,1) 1.1s both}
  @keyframes landIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
}
@media (max-width:560px){.wl-app{grid-template-columns:1fr}.wl-side{display:none}.wl-toast{right:8px;bottom:10px}.wl-kpis{grid-template-columns:1fr 1fr}.wl-kpi:nth-child(3){display:none}}

/* ---------- doors ---------- */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.door{border-radius:20px;padding:clamp(28px,3.5vw,44px);display:flex;flex-direction:column;gap:6px;text-decoration:none;min-height:100%}
.door h3{font-size:1.5rem;margin-bottom:6px}
.door p{color:inherit;opacity:.9}
.door ul{list-style:none;padding:0;margin:6px 0 22px;display:grid;gap:8px}
.door li{display:flex;gap:10px;align-items:flex-start}
.door li .i{margin-top:3px}
.door .btn{margin-top:auto;align-self:flex-start}
.door.fi{background:var(--navy);color:#dfe7ff}
.door.fi h3{color:#fff}
.door.fi li .i{color:var(--green)}
.door.smb{background:var(--mist);border:1px solid var(--line);color:var(--ink-2)}
.door.smb li .i{color:var(--deep)}
@media (max-width:860px){.doors{grid-template-columns:1fr}}

/* ---------- features ---------- */
.features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 28px}
.features.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.feature{display:flex;flex-direction:column;gap:6px}
.feature h3,.feature h4{margin:6px 0 2px;font-size:1.0625rem;letter-spacing:-.005em}
.feature p{margin:0;color:var(--ink-2);font-size:.96875rem}
.ico{width:44px;height:44px;border-radius:12px;background:var(--blue-4);color:var(--deep);display:grid;place-items:center}
.ico .i{width:24px;height:24px}
.bg-navy .ico{background:rgba(255,255,255,.1);color:#fff}
.bg-navy .feature p{color:#c9d5f7}
@media (max-width:900px){.features{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.features,.features.two{grid-template-columns:1fr}}
.tag{font-size:.6875rem;font-weight:600;padding:2px 8px;border-radius:99px;margin-left:6px;vertical-align:2px;white-space:nowrap}
.tag.pilot{background:var(--green-4);color:var(--green-ink)}
.tag.program{background:var(--blue-4);color:var(--deep)}

/* ---------- checklist ---------- */
.checks{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:12px}
.checks li{display:flex;gap:12px;align-items:flex-start}
.checks .i{color:var(--green);width:22px;height:22px;margin-top:2px}

/* ---------- steps (real sequences) ---------- */
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding-top:52px}
.steps li::before{content:counter(s);position:absolute;top:0;left:0;width:38px;height:38px;border-radius:50%;background:var(--deep);color:#fff;font-weight:600;display:grid;place-items:center}
.steps li::after{content:"";position:absolute;top:19px;left:48px;right:-12px;height:2px;background:var(--line)}
.steps li:last-child::after{display:none}
.steps h3{font-size:1.0625rem;margin-bottom:4px}
.steps p{color:var(--ink-2);font-size:.96875rem;margin:0}
@media (max-width:700px){.steps li::after{display:none}}

/* ---------- product screens ---------- */
.screen{margin:0}
.screen>img{width:100%;border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow);background:#fff}
.screen figcaption{font-size:.8125rem;color:var(--ink-3);margin-top:12px}
.screen-pair{display:grid;grid-template-columns:1.25fr 1fr;gap:20px;align-items:start}
@media (max-width:760px){.screen-pair{grid-template-columns:1fr}}

/* ---------- money flow diagram ---------- */
.flow{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.flow-card{border-radius:18px;padding:24px;border:1px solid var(--line);background:#fff}
.flow-card.now{background:#fff}
.flow-card.finli{border-color:var(--blue-3);box-shadow:0 0 0 4px var(--blue-4)}
.flow-card h3{font-size:1.0625rem;margin-bottom:14px}
.flow-card svg{width:100%;height:auto;display:block}
@media (max-width:860px){.flow{grid-template-columns:1fr}}

/* ---------- industries ---------- */
.fam-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;border-top:1px solid var(--line)}
.fam{display:grid;grid-template-columns:48px 1fr;gap:16px;padding:24px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.fam:hover h3{color:var(--deep);text-decoration:underline;text-underline-offset:4px}
.fam h3{font-size:1.125rem;margin-bottom:4px}
.fam p{margin:0;color:var(--ink-3);font-size:.9375rem}
.fam .ico{width:48px;height:48px}
@media (max-width:760px){.fam-list{grid-template-columns:1fr}}
.vert-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.vert-chips a{font-size:.8125rem;font-weight:500;color:var(--deep);background:var(--mist);border:1px solid var(--line);border-radius:99px;padding:4px 11px;text-decoration:none}
.vert-chips a:hover{background:var(--blue-4)}
.loop{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;counter-reset:l}
.loop li{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;position:relative;counter-increment:l}
.loop li b{display:block;color:var(--navy);font-size:.96875rem;margin-bottom:4px}
.loop li span{font-size:.875rem;color:var(--ink-2);line-height:1.5;display:block}
.loop li::before{content:counter(l);font-size:.75rem;font-weight:600;color:var(--deep);background:var(--blue-4);border-radius:99px;padding:1px 8px;display:inline-block;margin-bottom:8px}
.loop li:last-child{background:var(--green-4);border-color:#B6E2BC}
.loop li:last-child::before{background:#fff;color:var(--green-ink)}
@media (max-width:980px){.loop{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.loop{grid-template-columns:1fr}}
.day{list-style:none;margin:0;padding:0;border-left:2px solid var(--blue-4);display:grid;gap:18px}
.day li{position:relative;padding-left:24px}
.day li::before{content:"";position:absolute;left:-7px;top:7px;width:12px;height:12px;border-radius:50%;background:#fff;border:2.5px solid var(--deep)}
.day li:last-child::before{background:var(--green);border-color:var(--green)}
.day b{display:block;color:var(--navy)}
.day span{color:var(--ink-2);font-size:.96875rem}
.need{border-left:3px solid var(--blue);padding:2px 0 2px 18px}
.need h3{font-size:1.0625rem;margin-bottom:4px}
.need p{margin:0;color:var(--ink-2);font-size:.96875rem}
.bank-box{background:var(--navy);color:#dfe7ff;border-radius:20px;padding:clamp(24px,3vw,40px)}
.bank-box h2,.bank-box h3{color:#fff}
.bank-box p{color:#c9d5f7}
.bank-box ul{margin:0 0 18px;padding-left:20px;color:#fff}
.bank-box .note{font-size:.875rem;color:#a9b8e6;border-top:1px solid rgba(255,255,255,.14);padding-top:14px;margin-top:6px}

/* ---------- cards (used sparingly) ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.link-card{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;transition:border-color .15s,box-shadow .15s}
.link-card:hover{border-color:var(--blue-3);box-shadow:0 10px 30px -18px rgba(0,47,149,.4)}
.link-card h3{font-size:1.0625rem;margin:8px 0 2px}
.link-card p{margin:0;font-size:.9375rem;color:var(--ink-2)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;font-weight:600;color:var(--navy);position:relative;font-size:1.0625rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;border-right:2px solid var(--deep);border-bottom:2px solid var(--deep);transform:translateY(-70%) rotate(45deg);transition:transform .15s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .ans{padding:0 0 20px;color:var(--ink-2);max-width:72ch}

/* ---------- prose (legal, help, insights) ---------- */
.prose{max-width:740px}
.prose h2{font-size:1.5rem;margin:1.8em 0 .5em}
.prose h3{font-size:1.1875rem;margin:1.5em 0 .4em}
.prose p,.prose li{color:var(--ink-2)}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 1.2em}
.prose li{margin:.35em 0}
.prose table{border-collapse:collapse;width:100%;margin:1.2em 0;font-size:.9375rem}
.prose th,.prose td{border-bottom:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.prose th{color:var(--navy);font-weight:600;background:var(--mist)}
.prose blockquote{margin:1.2em 0;padding:4px 0 4px 18px;border-left:3px solid var(--blue)}
.prose .screenshot-todo{display:none}
.prose img{border-radius:12px;border:1px solid var(--line);margin:1em 0}
.legal{font-size:.96875rem}
.legal h2,.legal h3{font-size:1.1875rem}
.tbl-wrap{overflow-x:auto}

/* ---------- insights ---------- */
.ins-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.ins-filters button{font:inherit;font-size:.875rem;font-weight:500;border:1.5px solid var(--line);background:#fff;color:var(--ink-2);border-radius:99px;padding:7px 14px;cursor:pointer}
.ins-filters button[aria-pressed=true]{background:var(--deep);border-color:var(--deep);color:#fff}
.ins-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media (max-width:900px){.ins-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.ins-grid{grid-template-columns:1fr}}
.post-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#fff}
.post-card:hover{border-color:var(--blue-3)}
.post-card .cover{aspect-ratio:16/9;display:block;width:100%}
.post-card .body{padding:18px 20px 22px}
.post-card h3{font-size:1.125rem;margin:6px 0 6px}
.post-card p{font-size:.9375rem;color:var(--ink-2);margin:0}
.meta{font-size:.8125rem;color:var(--ink-3)}
.short-answer{background:var(--mist);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;margin:0 0 32px}
.short-answer h2{font-size:1rem;margin:0 0 6px;color:var(--deep)}
.short-answer p{margin:0;color:var(--ink)}
.take{background:var(--navy);color:#dfe7ff;border-radius:var(--radius);padding:24px 26px;margin:36px 0}
.take h2{color:#fff;font-size:1.25rem;margin:0 0 8px}
.take p{color:#dfe7ff;margin:0}
.chart{margin:28px 0;border:1px solid var(--line);border-radius:var(--radius);padding:20px 20px 14px}
.chart h3{font-size:1rem;margin:0 0 14px}
.chart .src{font-size:.8125rem;color:var(--ink-3);margin-top:8px}
.byline{display:flex;gap:12px;align-items:center;margin:18px 0 0}
.byline .av{width:42px;height:42px;border-radius:50%;background:var(--deep);color:#fff;display:grid;place-items:center;font-weight:600}
.sources{font-size:.875rem}
.sources li{margin:.4em 0}
.draft-flag{background:#FFF3D6;color:#6B4700;border-radius:10px;padding:10px 14px;font-size:.875rem;margin-bottom:18px}

/* ---------- help ---------- */
.help-search{position:relative;max-width:620px;margin-top:22px}
.help-search input{width:100%;font:inherit;font-size:1.0625rem;padding:16px 18px 16px 50px;border-radius:12px;border:1.5px solid var(--line);background:#fff}
.help-search input:focus{outline:none;border-color:var(--deep);box-shadow:0 0 0 4px var(--blue-4)}
.help-search .i{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--ink-3);width:22px;height:22px}
.help-results{margin-top:10px;max-width:620px;display:grid;gap:4px}
.help-results a{display:block;padding:10px 14px;border-radius:10px;text-decoration:none;background:#fff;border:1px solid var(--line-2)}
.help-results a span{display:block;font-size:.875rem;color:var(--ink-3)}
.help-cats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 40px}
@media (max-width:900px){.help-cats{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.help-cats{grid-template-columns:1fr}}
.help-cat h2{font-size:1.125rem;display:flex;gap:10px;align-items:center}
.help-cat h2 .i{color:var(--deep)}
.help-cat ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.help-cat a{text-decoration:none;font-size:.96875rem}
.help-cat a:hover{text-decoration:underline}
.help-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:56px}
.help-side{font-size:.9375rem;position:sticky;top:96px;align-self:start}
.help-side h4{font-size:.875rem;margin:18px 0 6px;color:var(--ink-3);font-weight:500}
.help-side ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.help-side a{text-decoration:none;color:var(--ink-2)}
.help-side a[aria-current]{color:var(--deep);font-weight:600}
@media (max-width:900px){.help-layout{grid-template-columns:1fr}.help-side{position:static;order:2}}

/* ---------- forms ---------- */
.form{display:grid;gap:18px}
.form .row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.form .row>*,.field{min-width:0}
@media (max-width:640px){.form .row{grid-template-columns:minmax(0,1fr)}}
.field{display:flex;flex-direction:column;gap:6px}
.field label,.field legend{font-size:.9375rem;font-weight:500;color:var(--navy)}
.field .hint{font-size:.8125rem;color:var(--ink-3)}
.field input,.field select,.field textarea{font:inherit;font-size:1rem;padding:12px 14px;border-radius:10px;border:1.5px solid var(--line);background:#fff;color:var(--ink);min-height:48px;width:100%;max-width:100%;box-sizing:border-box}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--deep);box-shadow:0 0 0 4px var(--blue-4)}
fieldset.field{border:0;padding:0;margin:0}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (max-width:640px){.opts{grid-template-columns:1fr}}
.opt{display:flex;gap:10px;align-items:flex-start;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;font-size:.9375rem;cursor:pointer;background:#fff}
.opt:has(input:checked){border-color:var(--deep);background:var(--mist)}
.opt input{margin-top:4px;accent-color:var(--deep);width:16px;height:16px}
.req{color:#B42318}
.form-error{display:none;background:#FDECEC;color:#8A1C14;border-radius:10px;padding:10px 14px;font-size:.9375rem}
.form-error.on{display:block}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:clamp(22px,3vw,36px);box-shadow:var(--shadow)}
.privacy-note{font-size:.8125rem;color:var(--ink-3)}

/* ---------- trust strip ---------- */
.trust{display:flex;flex-wrap:wrap;gap:16px 40px;align-items:center}
.trust .badge{display:flex;gap:12px;align-items:center;font-size:.9375rem;color:var(--ink-2)}
.trust .badge .ico{width:40px;height:40px}
.logos{display:flex;flex-wrap:wrap;gap:28px 48px;align-items:center;opacity:.9}
.logos img{height:28px;width:auto}

/* ---------- CTA band ---------- */
.cta-band{background:var(--navy);color:#dfe7ff;border-radius:24px;padding:clamp(32px,5vw,64px);display:grid;grid-template-columns:1.4fr auto;gap:24px;align-items:center;position:relative;overflow:hidden}
.cta-band h2{color:#fff;margin-bottom:.3em}
.cta-band p{color:#c9d5f7;margin:0}
.cta-band .trees{position:absolute;right:-10px;bottom:-6px;width:160px;opacity:.9;pointer-events:none}
@media (max-width:760px){.cta-band{grid-template-columns:1fr}.cta-band .trees{display:none}}

/* ---------- footer ---------- */
.site-foot{background:var(--navy);color:#b9c6ef;padding:64px 0 36px;margin-top:0;font-size:.875rem}
.foot-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:30px 20px}
.site-foot h4{color:#fff;font-size:.875rem;margin-bottom:12px}
.site-foot ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.site-foot a{color:#b9c6ef;text-decoration:none}
.site-foot a:hover{color:#fff;text-decoration:underline}
/* brand block and link columns start on the same line */
.foot-top{display:grid;grid-template-columns:minmax(180px,.78fr) minmax(0,4.2fr);gap:36px 44px;align-items:start}
.foot-brand{padding-bottom:0;border-bottom:0;margin-bottom:0}
.foot-brand img{height:38px;width:auto;margin-bottom:16px}
.foot-brand p{color:#b9c6ef;font-size:.875rem;max-width:34ch;margin:0}
.bcorp-link{display:inline-block;margin-top:24px}
.foot-legal{border-top:1px solid rgba(255,255,255,.12);margin-top:44px;padding-top:22px;display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;font-size:.8125rem;color:#8f9fd6}
.foot-legal p{max-width:none;margin:0}
@media (max-width:1180px){.foot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1040px){.foot-top{grid-template-columns:minmax(0,1fr);gap:34px}}
@media (max-width:640px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 20px}}

/* ---------- utilities ---------- */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}.mt-2{margin-top:24px}.mt-3{margin-top:40px}
.center{text-align:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media print{.site-head,.site-foot,.cta-band{display:none}}

.bcorp-badge{display:inline-block;border:1.5px solid rgba(255,255,255,.55);border-radius:999px;padding:6px 14px;font-size:.8rem;font-weight:600;color:#fff;text-decoration:none}
.bcorp-badge:hover{border-color:#fff}

.bcorp-badge{display:inline-block;border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:6px 14px;font-size:.8rem;font-weight:500;color:#fff;text-decoration:none}

/* =====================================================================
   v3: between Onsetto (light, airy, framework-led) and Mercury (restraint).
   One accent: Finli's blue-to-green gradient on a heading phrase (h1/h2 em).
   Product shown as live app windows in the app's own palette.
   ===================================================================== */
:root{--ink:#0B1236;--navy:#000C66;--deep:#002F95;--blue:#355CF4;--sky:#3C85F8;--green:#5DC268;--green-ink:#1A6B2C;
  --mist:#F5F8FE;--line:#E5EAF4;--line-2:#EEF2F9;--ink-2:#3B4466;--ink-3:#5B6482;--pale:#CEE0FD;--mint:#D7F0D9;--peach:#FDDBCC;--cream:#FFF0D0;
  --grad:linear-gradient(92deg,#002F95 0%,#3C85F8 45%,#5DC268 100%);
  --wash:radial-gradient(1000px 520px at 50% -10%,#E4EEFF 0%,rgba(228,238,255,0) 70%),radial-gradient(620px 420px at 90% 30%,rgba(93,194,104,.13),rgba(93,194,104,0) 70%),radial-gradient(520px 380px at 6% 50%,rgba(53,92,244,.07),rgba(53,92,244,0) 70%),#fff;
  --shadow:0 50px 100px -50px rgba(11,18,54,.35),0 1px 2px rgba(11,18,54,.06);--radius:20px}
body{color:var(--ink);font-size:1.0625rem}
h1,h2,h3,h4{color:var(--ink);font-weight:600}
h1{font-size:clamp(2.4rem,5.2vw,4rem);letter-spacing:-.04em;line-height:1.06}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem);letter-spacing:-.035em;line-height:1.1}
h3{letter-spacing:-.015em}
:is(h1,h2) em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{color:var(--ink-3)}
.eyebrow,.kicker{display:block;font-size:.85rem;font-weight:500;color:var(--ink-3);letter-spacing:.01em;text-transform:none;margin:0 0 12px}
.kicker .dot{display:none}
a{color:var(--blue)}

/* buttons */
.btn{border-radius:12px;font-weight:500;padding:15px 22px;background:var(--navy);border-color:var(--navy)}
.btn:hover{background:#0A1A8A;border-color:#0A1A8A}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{background:#fff;border-color:#C9D3E8;color:var(--ink)}
.btn.light{background:#fff;color:var(--ink);border-color:#fff}
.btn.go{background:var(--navy);border-color:var(--navy);color:#fff}
.textlink{color:var(--blue);font-weight:500}

/* header: white glass */
.site-head{background:rgba(255,255,255,.84);border-bottom:1px solid rgba(229,234,244,.8)}
.head-in{height:68px}
.logo img{height:26px}
.nav-btn,.signin{color:var(--ink);font-weight:500}
.nav-btn:hover,.nav-item.open>.nav-btn,.signin:hover{background:var(--mist);color:var(--ink)}
.panel{border-radius:16px;border-color:var(--line);padding:10px}
.panel a .i{color:var(--blue)}
.panel b{color:var(--ink);font-weight:500}
.panel .grp{font-size:.72rem;font-weight:500;color:var(--ink-3);letter-spacing:.04em;padding:8px 12px 2px;margin:0;grid-column:1/-1}
.head-actions .btn{border-radius:10px;padding:11px 18px;min-height:42px;font-size:.92rem}
.menu-toggle{border-color:var(--line);color:var(--ink)}

/* heroes: light wash */
.hero,.page-hero{background:var(--wash);border-bottom:0}
.page-hero{padding:clamp(48px,6.5vw,96px) 0 clamp(56px,6vw,88px)}
.page-hero h1{font-size:clamp(2.2rem,4.4vw,3.4rem)}
.crumbs,.crumbs a{color:var(--ink-3)}
.hero-note{color:var(--ink-3)}
.page-hero .screen>img{border-radius:18px}

/* sections */
.section{padding:clamp(80px,9.5vw,128px) 0}
.section.tight{padding:clamp(48px,6vw,80px) 0}
.bg-mist{background:var(--mist)}
.sec-head{max-width:800px}
.bg-navy{background:radial-gradient(900px 420px at 80% 0%,rgba(93,194,104,.16),rgba(93,194,104,0) 70%),radial-gradient(700px 400px at 0% 100%,rgba(53,92,244,.22),rgba(53,92,244,0) 70%),#060B2E;color:#C9D3F2}
.bg-navy :is(h1,h2,h3,h4){color:#fff}
.bg-navy :is(.lede,p){color:#A9B6E0}
.bg-navy .eyebrow{color:#8FA2DA}
.bg-navy .checks .i{color:var(--green)}
.bg-navy .btn{background:#fff;border-color:#fff;color:var(--ink)}

/* cards and features */
.ico{border-radius:12px;background:#EEF4FF;color:var(--blue);width:42px;height:42px}
.ico .i{width:22px;height:22px}
.feature h3,.feature h4{color:var(--ink);font-weight:600}
.feature p{color:var(--ink-3)}
.features.cards{gap:16px}
.features.cards .feature{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px}
.card,.link-card{border-radius:20px;border-color:var(--line)}
.link-card{padding:26px;transition:border-color .15s,box-shadow .15s}
.link-card:hover{border-color:#C9D6F2;box-shadow:0 24px 50px -34px rgba(11,18,54,.35)}
.link-card>.i{color:var(--blue)}
.link-card h3{color:var(--ink);font-weight:600}
.link-card p{color:var(--ink-3)}
.checks .i{color:var(--green)}
.need{border-left:2px solid transparent;border-image:var(--grad) 1;padding-left:18px}
.need h3{color:var(--ink)}
.day{border-left-color:var(--line)}
.day li::before{border-color:var(--blue)}
.day b{color:var(--ink);font-weight:600}
.loop li{border-radius:16px;border-color:var(--line)}
.loop li b{color:var(--ink)}
.loop li::before{background:#EEF4FF;color:var(--blue)}
.vert-chips a{color:var(--ink);background:#fff;border-color:var(--line);font-weight:500}
.vert-chips a:hover{border-color:var(--blue);color:var(--blue);background:#fff}
.bank-box{background:linear-gradient(120deg,#F1F6FF,#F1FAF2);color:var(--ink-2);border:1px solid #DCE7F7;border-radius:22px}
.bank-box :is(h2,h3){color:var(--ink)}
.bank-box p,.bank-box ul{color:var(--ink-2)}
.bank-box .note{color:var(--ink-3);border-top-color:#DCE7F7}
.bank-box .btn.light{background:var(--navy);border-color:var(--navy);color:#fff}
.faq summary{color:var(--ink);font-weight:500}
.faq summary::after{border-color:var(--ink-3)}
.steps li::before{background:#fff;color:var(--blue);border:1px solid var(--line);font-weight:600}
.steps h3{color:var(--ink)}

/* stages (the Learn, Run, Grow framework) */
.stage-tag{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;font-weight:500;color:var(--ink-3);background:#fff;border:1px solid var(--line);border-radius:99px;padding:5px 12px 5px 6px}
.stage-tag b{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:600;background:var(--grad);color:#fff}
.path-steps{display:grid;gap:16px;margin-top:48px}
.pstep{display:grid;grid-template-columns:230px minmax(0,1fr) minmax(0,1fr);gap:32px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:32px}
.pstep .num{font-size:.8rem;font-weight:500;color:var(--ink-3)}
.pstep h3{font-size:1.9rem;letter-spacing:-.035em;margin:4px 0 10px}
.pstep .promise{color:var(--ink-3);font-size:.95rem;margin:0}
.pstep h4{margin:0 0 10px;font-size:.78rem;font-weight:600;color:var(--ink-3)}
.pstep ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.pstep li{position:relative;padding-left:22px;font-size:.96rem}
.pstep li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:50%;background:var(--pale)}
.pstep .you li::before{background:var(--green)}
.prods{grid-column:2/-1;display:flex;flex-wrap:wrap;gap:8px;align-items:center;border-top:1px solid var(--line);padding-top:18px}
.prods a{font-size:.84rem;font-weight:500;color:var(--ink);background:var(--mist);border:1px solid var(--line);border-radius:99px;padding:6px 14px;text-decoration:none}
.prods a:hover{border-color:var(--blue);color:var(--blue)}
.prods .start{font-size:.84rem;color:var(--green-ink);font-weight:500;margin-left:4px}
.pill,.tag.pilot{background:var(--mint);color:#1B6B2B}
@media (max-width:900px){.pstep{grid-template-columns:1fr;gap:20px;padding:26px}.prods{grid-column:auto}}

/* the gap */
.breaks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:52px;border-top:1px solid var(--line)}
.brk{padding:28px 28px 0 0}
.brk+.brk{padding-left:28px;border-left:1px solid var(--line)}
.brk .x{width:40px;height:40px;border-radius:12px;background:#FFF1EC;color:#C0563B;display:grid;place-items:center;margin-bottom:18px}
.brk h3{margin-bottom:8px}
.brk p{color:var(--ink-3);font-size:.97rem;margin:0}
.join{margin-top:48px;display:flex;align-items:center;gap:16px;font-size:clamp(1.15rem,2vw,1.45rem);font-weight:500;letter-spacing:-.015em;color:var(--ink)}
.join::before{content:"";flex:0 0 56px;height:2px;background:var(--grad);border-radius:2px}
@media (max-width:820px){.breaks{grid-template-columns:1fr}.brk,.brk+.brk{padding:24px 0;border-left:0;border-bottom:1px solid var(--line)}}

/* allies */
.allies-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:48px}
.ally{border:1px solid var(--line);border-radius:22px;padding:30px;display:flex;flex-direction:column;gap:10px;background:#fff;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s}
.ally:hover{border-color:#C9D6F2;box-shadow:0 24px 50px -34px rgba(11,18,54,.35)}
.ally .who{font-size:.82rem;font-weight:500;color:var(--blue)}
.ally h3{font-size:1.45rem;letter-spacing:-.03em;margin:0}
.ally p{color:var(--ink-3);font-size:.96rem;margin:0}
.ally .more{margin-top:auto;padding-top:8px;font-weight:500;font-size:.92rem;color:var(--blue)}
.soft-door{margin-top:16px;display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between;border-radius:22px;padding:26px 30px;background:linear-gradient(120deg,#F1F6FF,#F1FAF2);border:1px solid #DCE7F7}
.soft-door b{display:block;font-weight:600;font-size:1.1rem;letter-spacing:-.015em;color:var(--ink)}
.soft-door p{color:var(--ink-3);font-size:.95rem;margin:0}
@media (max-width:760px){.allies-grid{grid-template-columns:1fr}}

/* launch sequence */
.launch-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:start}
.seq{list-style:none;margin:0;padding:0;counter-reset:s;border:0}
.seq li{counter-increment:s;display:grid;grid-template-columns:52px minmax(0,1fr);gap:6px 14px;padding:24px 0;border-bottom:1px solid var(--line)}
.seq li:first-child{padding-top:0}
.seq li::before{content:counter(s);grid-row:span 2;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-weight:600;font-size:.9rem;color:var(--blue);line-height:1}
.seq h3{margin:0;font-size:1.15rem}
.seq p{color:var(--ink-3);font-size:.96rem;margin:0}
@media (max-width:860px){.launch-grid{grid-template-columns:1fr;gap:36px}}

/* trust band */
.badges{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:48px;background:rgba(255,255,255,.1);border-radius:18px;overflow:hidden}
.badge-c{background:#0A1138;padding:26px 24px}
.badge-c b{display:block;color:#fff;font-weight:600;font-size:1.1rem;letter-spacing:-.015em}
.badge-c span{display:block;font-size:.88rem;color:#A9B6E0;margin-top:6px;line-height:1.5}
@media (max-width:860px){.badges{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.badges{grid-template-columns:1fr}}

/* CTA band: light wash, the closing invitation */
.cta-band{background:radial-gradient(700px 360px at 85% 120%,rgba(93,194,104,.16),rgba(93,194,104,0) 70%),radial-gradient(800px 400px at 10% -20%,#E4EEFF 0%,rgba(228,238,255,0) 70%),#F7FAFF;color:var(--ink-2);border:1px solid #DCE7F7;border-radius:28px}
.cta-band h2{color:var(--ink)}
.cta-band p{color:var(--ink-3)}
.cta-band .btn.light{background:var(--navy);border-color:var(--navy);color:#fff}
.cta-band .btn.ghost{background:#fff!important;color:var(--ink)!important;border-color:var(--line)!important}
.cta-band .trees{opacity:.85}

/* footer: deep navy, quiet */
.site-foot{background:#060B2E;color:#A9B6E0}
.site-foot a{color:#A9B6E0}
.foot-legal{color:#7F8DBE;border-top-color:rgba(255,255,255,.1)}

/* forms on light heroes */
.form-card{border-radius:22px;border-color:var(--line)}
.field label,.field legend{color:var(--ink)}
.field input,.field select,.field textarea{border:1px solid #D7DFEE;border-radius:10px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);box-shadow:0 0 0 4px #E4ECFF}
.opt{border:1px solid #D7DFEE}
.opt:has(input:checked){border-color:var(--blue);background:#F3F7FF}
.opt input{accent-color:var(--blue)}

/* insights, help */
.ins-filters button[aria-pressed=true]{background:var(--navy);border-color:var(--navy)}
.post-card{border-radius:20px}
.short-answer{border-radius:16px;border-left:3px solid var(--blue)}
.take{background:#060B2E;border-radius:18px}
.help-cat h2 .i{color:var(--blue)}
.help-side a[aria-current]{color:var(--blue)}
.trust .badge .ico{background:#EEF4FF;color:var(--blue)}

/* ---------- app windows: product shown as Finli UI, in the app's palette ---------- */
.aw{position:relative;text-align:left;--bk:#0B2A5B;--bac:#38B6FF}
.aw-stage{position:relative;padding:0 38px 0 0}
/* a product shot that gets the whole column, the way the real app is shown */
.hero-stack{display:grid;gap:clamp(30px,3.6vw,52px)}
.hero-stack .copy{max-width:62ch}
.hero-stack .screen{margin:0}
/* scaled mode: the app is laid out at its real width and scaled down, the way a screenshot is */
.aw.scaled{overflow:hidden}
.aw.scaled .aw-stage{width:1180px;transform-origin:top left;transform:scale(var(--s,1))}
.aw.scaled .aw-app{grid-template-columns:202px minmax(0,1fr)}
.aw.scaled .aw-side{display:flex}
.aw.scaled .aw-mini{display:none}
.aw.scaled .aw-split{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.aw.scaled .aw-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
.aw.scaled .aw-kpis .aw-kpi:nth-child(3){display:block}
.aw.scaled .aw-phone{display:block}
/* one floating element per screen, not two: the phone wins where it is shown */
.aw.has-phone .aw-toast{display:none}
.aw.scaled.has-phone .aw-split{padding-right:158px}
.aw.scaled .aw-toast{position:absolute;margin:0;right:4px}
.aw-win{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 1px 2px rgba(10,22,70,.06),0 10px 24px -12px rgba(10,22,70,.2),0 44px 80px -40px rgba(0,30,110,.45)}

/* window chrome */
.aw-bar{height:40px;display:flex;align-items:center;gap:8px;padding:0 15px;background:#EDF0F6;border-bottom:1px solid #DFE5EF;position:relative}
.aw-bar i{width:11px;height:11px;border-radius:50%;flex:none}
.aw-bar i:nth-child(1){background:#FF5F57}
.aw-bar i:nth-child(2){background:#FEBC2E}
.aw-bar i:nth-child(3){background:#28C840}
.aw-bar .url{position:absolute;left:50%;transform:translateX(-50%);max-width:min(58%,320px);font-size:.68rem;color:var(--ink-2);background:#fff;border-radius:999px;padding:4px 14px 4px 25px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:inset 0 0 0 1px #E4E9F2}
.aw-bar .url::before{content:"";position:absolute;left:11px;top:50%;width:9px;height:9px;margin-top:-4.5px;background:currentColor;opacity:.45;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1zm2 0h6V7a3 3 0 0 0-6 0v3z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1zm2 0h6V7a3 3 0 0 0-6 0v3z'/%3E%3C/svg%3E") center/contain no-repeat}

.aw-app{display:grid;grid-template-columns:202px minmax(0,1fr);min-height:430px;font-size:.84rem;line-height:1.5}

/* brand sidebar */
.aw-side{background-color:var(--bk);background-image:linear-gradient(180deg,rgba(255,255,255,.07),rgba(0,0,0,.16));color:#fff;padding:18px 12px 14px;display:flex;flex-direction:column;gap:2px}
.aw-brand{display:flex;gap:10px;align-items:center;padding:0 3px}
.aw-mark{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-weight:700;font-size:.68rem;letter-spacing:-.02em;color:#fff;flex:none;box-shadow:0 2px 7px rgba(0,0,0,.22)}
.aw-brand b{font-weight:700;font-size:.68rem;line-height:1.3;letter-spacing:.06em;text-transform:uppercase}
.aw-pow{font-size:.6rem;opacity:.78;margin:8px 0 0 45px;display:flex;gap:6px;align-items:center}
.aw-pow img{height:13px;width:auto;display:inline-block;position:relative;top:1px}
.aw-new{margin:15px 3px 12px;background:#fff;color:var(--ink);font-weight:600;font-size:.7rem;border-radius:999px;padding:7px 14px 7px 11px;display:inline-flex;align-items:center;gap:6px;align-self:flex-start;box-shadow:0 2px 9px rgba(0,0,0,.18)}
.aw-new::before{content:"+";font-size:.98rem;line-height:1;font-weight:500;margin-top:-1px}
.aw-side span.n{color:rgba(255,255,255,.82);font-size:.615rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;padding:8px 10px;border-radius:8px;display:flex;align-items:center;gap:9px;text-decoration:none}
.aw-side span.n .i{width:15px;height:15px;opacity:.82;flex:none}
.aw-side span.n .st{margin-left:auto}
.aw-side .on{background:rgba(255,255,255,.17);color:#fff}
.aw-side .on .i{opacity:1}
.aw-me{margin-top:auto;display:flex;align-items:center;gap:9px;padding:12px 6px 0;border-top:1px solid rgba(255,255,255,.16)}
.aw-me .aw-av{width:28px;height:28px;border-radius:50%;background:var(--green);display:grid;place-items:center;font-size:.68rem;font-weight:700;color:#08351B;flex:none;opacity:1;line-height:1}
.aw-me div{min-width:0}
.aw-me b{display:block;font-size:.67rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aw-me span{display:block;font-size:.59rem;opacity:.66}

/* app frame */
.aw-main{background:#F5F8FC;min-width:0;display:flex;flex-direction:column}
.aw-head{background:#fff;border-bottom:1px solid #E7EDF6;padding:13px 20px;display:flex;align-items:center;gap:12px;flex:none}
.aw-head h4{margin:0;font-size:.95rem;font-weight:700;letter-spacing:-.015em;color:var(--ink)}
.aw-head small{display:block;color:var(--ink-3);font-size:.68rem;font-weight:400;letter-spacing:0}
.aw-head .sp{margin-left:auto;display:flex;align-items:center;gap:13px;flex:none}
.aw-head .i{width:17px;height:17px;color:var(--ink-3)}
.aw-head .av{width:27px;height:27px;border-radius:50%;background:linear-gradient(140deg,#9DC2FB,#5DC268)}
.aw-body{padding:16px 20px 20px;min-width:0}

/* welcome band with promo cards */
.aw-hello{margin:-16px -20px 16px;padding:17px 20px 22px;color:#fff;background-color:var(--bk);background-image:linear-gradient(180deg,rgba(255,255,255,.1),rgba(0,0,0,.05))}
.aw-hello h5{margin:0 0 13px;font-size:1rem;font-weight:700;letter-spacing:-.015em}
.aw-promos{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:11px}
.aw-promo{background:#fff;border-radius:11px;padding:12px;display:grid;grid-template-columns:34px minmax(0,1fr);gap:11px;box-shadow:0 3px 12px rgba(5,20,70,.18)}
.aw-promo .pi{width:34px;height:34px;border-radius:9px;display:grid;place-items:center}
.aw-promo .pi .i{width:18px;height:18px;color:#fff}
.aw-promo b{display:block;font-size:.75rem;font-weight:600;color:var(--ink);line-height:1.3}
.aw-promo p{margin:3px 0 0;font-size:.67rem;line-height:1.45;color:var(--ink-3)}
.aw-promo .pill{margin-top:8px;display:inline-block;background:var(--deep);color:#fff;font-size:.64rem;font-weight:600;border-radius:999px;padding:5px 12px}

/* figures */
.aw-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin-bottom:13px}
.aw-kpi{background:#fff;border-radius:13px;padding:13px 15px;min-width:0;position:relative;box-shadow:0 1px 2px rgba(10,22,70,.05),0 7px 18px -12px rgba(10,22,70,.3)}
.aw-kpi small{display:block;color:var(--ink-3);font-size:.67rem;padding-right:1.1em;min-height:3em}
.aw-kpi small::after{content:"\A0\24D8";opacity:.4}
.aw-kpi::after{content:"";position:absolute;right:14px;top:17px;width:5px;height:5px;border-right:1.6px solid var(--ink-3);border-top:1.6px solid var(--ink-3);transform:rotate(45deg);opacity:.42}
.aw-kpi b{display:block;font-size:1.4rem;font-weight:700;letter-spacing:-.03em;margin-top:2px;color:var(--ink);font-variant-numeric:tabular-nums}
.aw-kpi em{font-style:normal;font-size:.65rem;color:var(--green-ink);font-weight:600}
.aw-kpi em.warn{color:#9A4318}

.aw-split{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:11px}
.aw-split.one{grid-template-columns:minmax(0,1fr)}
.aw-panel{background:#fff;border-radius:13px;overflow:hidden;min-width:0;box-shadow:0 1px 2px rgba(10,22,70,.05),0 7px 18px -12px rgba(10,22,70,.3)}
.aw-panel h5{margin:0;font-size:.78rem;font-weight:700;padding:12px 14px 9px;display:flex;justify-content:space-between;gap:10px;color:var(--ink);letter-spacing:-.01em}
.aw-panel h5 span{font-weight:500;color:var(--blue);font-size:.69rem;white-space:nowrap}
.aw-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:9px 14px;border-top:1px solid #F0F4FA}
.aw-panel h5+.aw-row{border-top:0}
.aw-row b{font-weight:500;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.aw-row span{color:var(--ink-3);font-size:.69rem;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aw-row .amt{font-weight:600;color:var(--ink);font-size:.8rem;font-variant-numeric:tabular-nums}
.st{font-size:.66rem;font-weight:500;border-radius:99px;padding:3px 9px;white-space:nowrap}
.st.paid,.st.complete{background:var(--mint);color:#1B6B2B}.st.sent,.st.open{background:var(--pale);color:#173E9C}.st.due{background:var(--peach);color:#8A3A12}.st.draft{background:var(--cream);color:#7A5A00}.st.muted{background:#EEF1F6;color:#4B5574}
.aw-sig{padding:11px 14px;border-top:1px solid #F0F4FA}
.aw-panel h5+.aw-sig{border-top:0}
.aw-sig b{font-weight:600;display:block;color:var(--ink);font-size:.77rem}
.aw-sig p{color:var(--ink-3);font-size:.71rem;line-height:1.5;margin:2px 0 0}
.aw-note{background:linear-gradient(135deg,#EEF4FF,#EFF9F0);border:1px solid #DCE7F7;border-radius:12px;padding:13px}
.aw-note b{display:block;font-size:.78rem;font-weight:600;color:var(--ink)}
.aw-note p{font-size:.72rem;color:var(--ink-3);margin:4px 0 0;line-height:1.5}
.aw-bar2{height:6px;border-radius:9px;background:#EEF2F9;margin-top:8px;overflow:hidden}
.aw-bar2 i{display:block;height:100%;border-radius:9px;background:var(--grad)}
.aw-stack{display:grid;gap:11px;align-content:start}

/* the moment: money lands */
.aw-toast{position:absolute;right:-14px;bottom:30px;background:#fff;border-radius:14px;box-shadow:0 2px 6px rgba(10,22,70,.1),0 22px 44px -18px rgba(0,30,110,.5);padding:11px 16px 11px 11px;display:flex;gap:11px;align-items:center;font-size:.78rem;max-width:290px;z-index:4}
.aw-toast .ok{width:30px;height:30px;border-radius:50%;background:var(--green);display:grid;place-items:center;flex-shrink:0}
.aw-toast b{display:block;font-weight:600;color:var(--ink)}
.aw-toast span{color:var(--ink-3);font-size:.72rem}
.aw-cap{font-size:.8rem;color:var(--ink-3);margin-top:14px}

/* phone laid over the window, the way the product shots do it */
.aw-phone{position:absolute;right:0;top:57%;width:172px;border-radius:26px;background:#fff;padding:6px;box-shadow:0 2px 6px rgba(10,22,70,.14),0 30px 58px -22px rgba(0,30,110,.6);z-index:3}
.aw-phone .scr{border-radius:21px;overflow:hidden;background:#F5F8FC}
.aw-phone .ios{background-color:var(--bk);color:#fff;font-size:.52rem;font-weight:600;display:flex;justify-content:space-between;padding:7px 12px 3px}
.aw-phone .hd{background-color:var(--bk);color:#fff;padding:4px 12px 14px}
.aw-phone .hd b{font-size:.7rem;font-weight:700;display:block;line-height:1.3}
.aw-phone .bd{padding:9px;display:grid;gap:7px}
.aw-phone .k{background:#fff;border-radius:9px;padding:8px 10px;box-shadow:0 2px 9px rgba(10,22,70,.12)}
.aw-phone .k small{display:block;font-size:.52rem;color:var(--ink-3)}
.aw-phone .k b{display:block;font-size:.84rem;font-weight:700;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.aw-phone .ln{display:flex;justify-content:space-between;gap:8px;font-size:.55rem;color:var(--ink-2);padding:5px 0;border-top:1px solid #EDF2F9}
.aw-phone .ln:first-child{border-top:0}
.aw-phone .ln b{font-weight:600;color:var(--ink)}
.aw .aw-phone+.aw-toast{left:16px;right:auto;bottom:18px}

/* iOS push card on the lock screen */
.push{position:relative;width:min(292px,100%);margin-inline:auto;border-radius:36px;background:#0A1026;padding:8px;box-shadow:0 3px 8px rgba(10,22,70,.2),0 44px 76px -32px rgba(0,30,110,.62)}
.push .wall{border-radius:29px;overflow:hidden;background:linear-gradient(168deg,#4B92FA,#1E4FD6 52%,#0B2A5B);padding:13px 13px 34px;color:#fff;min-height:352px}
.push .ios{display:flex;justify-content:space-between;font-size:.6rem;font-weight:600}
.push .day{margin:30px 0 0;text-align:center;font-size:.76rem;font-weight:600;opacity:.95}
.push .clock{margin:0;text-align:center;font-size:3.6rem;font-weight:300;letter-spacing:-.035em;line-height:1.05;font-variant-numeric:tabular-nums}
.push .note{margin-top:34px;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:17px;padding:11px 12px;display:grid;grid-template-columns:36px minmax(0,1fr);gap:10px;color:var(--ink);box-shadow:0 8px 22px rgba(0,0,0,.22)}
.push .note .ic{width:36px;height:36px;border-radius:9px;background:linear-gradient(140deg,#3C85F8,#5DC268);display:grid;place-items:center}
.push .note .ic .i{width:19px;height:19px;color:#fff}
.push .note .ap{display:flex;justify-content:space-between;gap:8px;font-size:.6rem;font-weight:600;color:var(--ink-3)}
.push .note b{display:block;font-size:.76rem;font-weight:700;margin-top:1px;line-height:1.3}
.push .note p{margin:2px 0 0;font-size:.7rem;line-height:1.42;color:var(--ink-2)}

@media (prefers-reduced-motion:no-preference){
  .aw-toast,.push .note{opacity:0;transform:translateY(10px) scale(.985)}
  .is-in .aw-toast,.is-in.push .note{opacity:1;transform:none;transition:opacity .5s ease .25s,transform .55s cubic-bezier(.2,.75,.3,1) .25s}
/* one orchestrated arrival per product screen: the interface assembles itself the
   way the copy describes, then holds still. Nothing loops, nothing moves on hover. */
@media (prefers-reduced-motion:no-preference){
  .aw[data-in] .aw-kpi,
  .aw[data-in] .aw-row,
  .aw[data-in] .aw-sig,
  .aw[data-in] .aw-promo{opacity:0;transform:translateY(9px)}
  .aw[data-in].is-in .aw-kpi,
  .aw[data-in].is-in .aw-row,
  .aw[data-in].is-in .aw-sig,
  .aw[data-in].is-in .aw-promo{opacity:1;transform:none;
    transition:opacity .42s ease,transform .5s cubic-bezier(.2,.75,.3,1)}
  .aw[data-in].is-in .aw-kpi:nth-child(1){transition-delay:.06s}
  .aw[data-in].is-in .aw-kpi:nth-child(2){transition-delay:.14s}
  .aw[data-in].is-in .aw-kpi:nth-child(3){transition-delay:.22s}
  .aw[data-in].is-in .aw-row:nth-of-type(1){transition-delay:.26s}
  .aw[data-in].is-in .aw-row:nth-of-type(2){transition-delay:.34s}
  .aw[data-in].is-in .aw-row:nth-of-type(3){transition-delay:.42s}
  .aw[data-in].is-in .aw-row:nth-of-type(4){transition-delay:.50s}
  .aw[data-in].is-in .aw-row:nth-of-type(n+5){transition-delay:.56s}
  .aw[data-in].is-in .aw-sig:nth-of-type(1){transition-delay:.30s}
  .aw[data-in].is-in .aw-sig:nth-of-type(2){transition-delay:.40s}
  .aw[data-in].is-in .aw-promo:nth-child(2){transition-delay:.18s}
  /* the progress bar fills instead of simply being there */
  .aw[data-in] .aw-bar2 i,.aw[data-in] .aw-bar i{width:0!important;
    transition:width 1.05s cubic-bezier(.3,.8,.35,1) .45s}
  .aw[data-in].is-in .aw-bar2 i{width:var(--fillw,60%)!important}
  /* the outcome a page is about lands last, and is the one thing that pulses */
  .aw[data-in] .aw-row .st{opacity:0;transform:scale(.9)}
  .aw[data-in].is-in .aw-row .st{opacity:1;transform:none;
    transition:opacity .35s ease .62s,transform .45s cubic-bezier(.2,1.5,.4,1) .62s}
}
}

@media (max-width:860px){.aw-app{grid-template-columns:minmax(0,1fr)}.aw-side{display:none}.aw-split{grid-template-columns:minmax(0,1fr)}.aw-toast{position:static;margin:12px 0 0 auto}.aw-phone{display:none}}
@media (max-width:520px){.aw-kpis{grid-template-columns:1fr 1fr}.aw-kpis .aw-kpi:nth-child(3){display:none}.aw-body{padding:12px 14px 16px}.aw-hello{margin:0 -14px 14px;padding:14px}.aw-head{padding:11px 14px}}

/* home console stage switcher */
.console{margin:60px auto 0;max-width:1080px}
.stages{display:flex;justify-content:center;margin-bottom:22px;position:relative}
.stages::before{content:"";position:absolute;left:calc(50% - 220px);right:calc(50% - 220px);top:50%;height:1px;background:linear-gradient(90deg,#355CF4,#5DC268);opacity:.45}
.stage{position:relative;font:inherit;font-size:.95rem;font-weight:500;color:var(--ink-3);background:#fff;border:1px solid var(--line);border-radius:99px;padding:9px 18px 9px 10px;margin:0 22px;cursor:pointer;display:inline-flex;align-items:center;gap:9px}
.stage b{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:.75rem;font-weight:600;background:var(--mist);color:var(--ink-3)}
.stage[aria-selected=true]{color:var(--ink);border-color:transparent;box-shadow:0 0 0 1.5px var(--blue),0 10px 24px -12px rgba(53,92,244,.6)}
.stage[aria-selected=true] b{background:var(--grad);color:#fff}
.cscreen{display:none}.cscreen.on{display:block}
.side-set{display:contents}.side-set[hidden]{display:none!important}
@media (max-width:620px){.stages::before{display:none}.stage{margin:0 4px;padding:8px 12px 8px 8px;font-size:.88rem}}
@media (prefers-reduced-motion:no-preference){.cscreen.on{animation:csIn .35s ease both}@keyframes csIn{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:none}}}
.hero.center{text-align:center;padding:clamp(56px,8vw,104px) 0 clamp(64px,8vw,104px)}
.hero.center h1{margin:24px auto 0;max-width:21ch;font-size:clamp(2.2rem,4.6vw,3.9rem)}
.hero.center .lede{margin:22px auto 0}
.hero.center .btn-row{justify-content:center;margin-top:32px}
.chip{display:inline-flex;align-items:center;gap:10px;font-size:.88rem;font-weight:500;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:99px;padding:6px 14px 6px 6px;box-shadow:0 1px 2px rgba(11,18,54,.05)}
.chip i{font-style:normal;font-size:.75rem;font-weight:600;color:#fff;background:var(--grad);border-radius:99px;padding:3px 9px}
.aw-toast .ok .i{color:#fff;width:18px;height:18px}
.logos.on-dark{margin-top:44px;gap:24px 44px}
.logos.on-dark img{filter:brightness(0) invert(1);opacity:.62;height:26px}
.path-mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pm{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.pm h3{margin:6px 0 0;font-size:1.15rem}
.pm p{margin:0;color:var(--ink-3);font-size:.96rem}
.pm .textlink{margin-top:auto;padding-top:6px}
@media (max-width:860px){.path-mini{grid-template-columns:1fr}}
.aw-mini{display:none;align-items:center;gap:9px;font-size:.72rem;font-weight:700;color:#fff;background-color:var(--bk);background-image:linear-gradient(180deg,rgba(255,255,255,.07),rgba(0,0,0,.12));margin:0;padding:11px 16px;letter-spacing:.05em;text-transform:uppercase}
.aw-mini .aw-mark{width:24px;height:24px;border-radius:7px;font-size:.58rem;box-shadow:none}
.aw-mini .pw{margin-left:auto;font-weight:400;color:rgba(255,255,255,.72);font-size:.6rem;letter-spacing:0;text-transform:none;white-space:nowrap}
:is(.grid-2,.page-hero,.screen-pair,.hero-grid) .aw-app{grid-template-columns:minmax(0,1fr)}
:is(.grid-2,.page-hero,.screen-pair,.hero-grid) .aw-side{display:none}
:is(.grid-2,.page-hero,.screen-pair,.hero-grid) .aw-mini,.aw.compact .aw-mini{display:flex}
:is(.grid-2,.page-hero,.screen-pair,.hero-grid) .aw-phone{display:none}
@media (max-width:860px){.aw-mini{display:flex}}
:is(.grid-2,.page-hero) .aw-toast{right:-12px;bottom:28px}

/* ---------- the ladder: micro to commercial, one climb ---------- */
.ladder{list-style:none;margin:0;padding:0;counter-reset:r;position:relative}
.ladder::before{content:"";position:absolute;left:21px;top:18px;bottom:18px;width:2px;background:linear-gradient(180deg,#355CF4,#3C85F8 45%,#5DC268);opacity:.35}
.ladder li{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr);gap:30px;padding:26px 0 26px 64px;border-bottom:1px solid var(--line);counter-increment:r}
.ladder li:last-child{border-bottom:0}
.ladder li::before{content:counter(r);position:absolute;left:0;top:28px;width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;font-weight:600;color:var(--blue);font-size:.95rem}
.ladder .tier{display:block;font-size:1.3rem;font-weight:600;letter-spacing:-.025em;color:var(--ink);margin-bottom:8px}
.ladder .who{margin:0 0 10px;color:var(--ink-3);font-size:.96rem}
.ladder .blocker{margin:0;font-size:.94rem;color:var(--ink-2)}
.ladder .blocker b{color:var(--ink);font-weight:600}
.ladder h4{margin:0 0 10px;font-size:.76rem;font-weight:600;color:var(--ink-3)}
.ladder ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ladder .rung-gets li{all:unset;display:block;position:relative;padding-left:20px;font-size:.94rem;color:var(--ink-2)}
.ladder .rung-gets li::before{content:"";position:absolute;left:0;top:.58em;width:7px;height:7px;border-radius:50%;background:var(--pale)}
.ladder .rung-you{border-left:2px solid var(--mint);padding-left:18px}
.ladder .rung-you p{margin:0;font-size:.94rem;color:var(--ink-2)}
.ladder .textlink{margin-top:12px;display:inline-block;font-size:.92rem}
.ladder .pill{margin-left:8px;vertical-align:3px}
@media (max-width:980px){.ladder li{grid-template-columns:1fr;gap:18px;padding-left:56px}.ladder::before{left:17px}.ladder li::before{width:36px;height:36px;top:26px}}
.features.cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:860px){.features.cards.three{grid-template-columns:1fr}}
.rungs{list-style:none;margin:0;padding:0;counter-reset:rg;position:relative}
.rungs::before{content:"";position:absolute;left:15px;top:14px;bottom:14px;width:2px;background:linear-gradient(180deg,#355CF4,#5DC268);opacity:.35}
.rungs li{counter-increment:rg;position:relative;padding:14px 0 14px 48px}
.rungs li::before{content:counter(rg);position:absolute;left:0;top:16px;width:32px;height:32px;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;font-size:.8rem;font-weight:600;color:var(--blue)}
.rungs b{display:block;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.rungs span{display:block;font-size:.92rem;color:var(--ink-3);margin-top:2px}
.join .textlink{font-size:1rem}
.foot-brand .bcorp,.bcorp{height:64px;width:auto;display:block;opacity:.9;margin-bottom:0}
.bcorp:hover{opacity:1}

/* =====================================================================
   OPEN SKY — the Finli "financial lift" layer.
   One primitive: the dot over the "i", at different heights. Sky above,
   ground below, a curve where they meet. Illustration appears only where
   it carries the argument; .restrained pages keep the colour and the
   curve but drop the clouds, birds and grove.
   ===================================================================== */
:root{
  --sky:#E9F2FF;--sky-ink:#89AEE2;--ground:#D7E6FB;
  --leaf:#5DC268;--leaf-2:#7ED08A;--leaf-3:#A5DEAC;--stem:#9FC9A6;
  --tint-blue:#E2EEFF;--tint-green:#DCF1DF;--wash-blue:#E4EEFD;--wash-green:#DEF1E1;
  --radius:22px;
}
body{line-height:1.65}

/* --- the sky band: header and hero are one piece of sky ------------- */
.site-head{background:var(--sky);border-bottom:0;backdrop-filter:none}
.nav-btn:hover,.nav-item.open>.nav-btn,.signin:hover{background:rgba(255,255,255,.7)}
.hero,.page-hero{background:var(--sky);position:relative;border-bottom:0}
.hero{padding-bottom:clamp(96px,11vw,150px)}
.page-hero{padding-bottom:clamp(84px,9vw,128px)}
.hero>.wrap,.page-hero>.wrap{position:relative;z-index:2}

/* clouds and three birds, top right of the sky */
.hero::before,.page-hero::before{content:"";position:absolute;top:0;right:0;width:min(640px,58%);height:260px;z-index:1;pointer-events:none;
  background:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 260'%3E%3Cellipse cx='436' cy='86' rx='104' ry='31' fill='%23ffffff' opacity='.8'/%3E%3Cellipse cx='380' cy='68' rx='54' ry='33' fill='%23ffffff' opacity='.8'/%3E%3Cellipse cx='584' cy='150' rx='70' ry='21' fill='%23ffffff' opacity='.55'/%3E%3Cpath d='M108 62 Q124 46 140 62' fill='none' stroke='%2389AEE2' stroke-width='3.4' stroke-linecap='round'/%3E%3Cpath d='M158 40 Q174 24 190 40' fill='none' stroke='%2389AEE2' stroke-width='3.4' stroke-linecap='round'/%3E%3Cpath d='M208 74 Q220 62 232 74' fill='none' stroke='%2389AEE2' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right top/contain}

/* the horizon curve where sky meets page */
.hero::after,.page-hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:clamp(48px,6vw,86px);z-index:3;pointer-events:none;
  background:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 110' preserveAspectRatio='none'%3E%3Cpath d='M0 110 Q320 26 660 58 T1280 42 L1280 110 Z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat center bottom/100% 100%}
.restrained .hero::before,.restrained .page-hero::before{display:none}

/* --- buttons: pill, with a green secondary ------------------------- */
.btn{border-radius:999px;padding:15px 26px}
.head-actions .btn{border-radius:999px;padding:11px 20px}
.btn.ghost{background:var(--leaf);color:#0B2B12;border-color:var(--leaf);font-weight:600}
.btn.ghost:hover{background:#4FB65A;border-color:#4FB65A;color:#0B2B12}
.bg-navy .btn.ghost,.cta-band .btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5);font-weight:500}
.bg-navy .btn.ghost:hover,.cta-band .btn.ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}
.vert-chips a{border-radius:999px;padding:6px 14px}

/* --- icons: two-tone, in a soft round chip ------------------------- */
.i{--ico-accent:var(--leaf)}
.ico{width:52px;height:52px;border-radius:50%;background:var(--tint-blue);color:var(--deep)}
.ico .i{width:27px;height:27px}
.features .feature:nth-child(2n) .ico,.fam:nth-child(2n) .ico{background:var(--tint-green);color:#1C6B2E;--ico-accent:#002F95}
.bg-navy .ico{background:rgba(255,255,255,.12);color:#fff;--ico-accent:var(--leaf)}
.brk .x{width:52px;height:52px;border-radius:50%;background:var(--tint-blue);color:var(--deep);display:grid;place-items:center}
.brk:nth-child(2n) .x{background:var(--tint-green);color:#1C6B2E;--ico-accent:#002F95}
.link-card .i{width:26px;height:26px;color:var(--deep)}

/* --- surfaces: rounder, softer ------------------------------------- */
.link-card,.feature.card,.features.cards .feature,.form-card,.post-card,.ally{border-radius:var(--radius)}
.bg-mist{background:var(--wash-blue)}
.bg-sprout{background:var(--wash-green)}
.bg-sprout .eyebrow{color:#4A7A52}

/* --- the tier row: five saplings, one per rung --------------------- */
.tiers{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;align-items:end}
.tier{background:#fff;border-radius:18px;padding:20px 18px;display:flex;flex-direction:column;gap:10px}
.tier svg{width:34px;height:55px;flex:none}
.tier b{font-weight:600;font-size:.9375rem;line-height:1.35;letter-spacing:-.01em}
.tier span{font-size:.84rem;line-height:1.5;color:var(--ink-3)}
@media (max-width:1000px){.tiers{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}}
@media (max-width:560px){.tiers{grid-template-columns:1fr}}

/* --- the close: sky, with a grove along the ground ----------------- */
.cta-band{background:var(--sky);color:var(--ink-2);border-radius:26px;overflow:hidden;padding-bottom:clamp(44px,7vw,96px)}
.cta-band h2{color:var(--ink)}
.cta-band p{color:var(--ink-2)}
.cta-band .btn.light{background:var(--navy);color:#fff;border-color:var(--navy)}
.cta-band .btn.light:hover{background:#0A1A8A;border-color:#0A1A8A}
.cta-band .trees{position:absolute;right:0;bottom:0;width:min(420px,52%);height:auto;opacity:1}
@media (max-width:760px){.cta-band .trees{display:none}.cta-band{padding-bottom:clamp(32px,5vw,64px)}}

/* --- quiet the gradient-text trick on the warmest sections --------- */
.bg-sprout :is(h1,h2) em,.cta-band :is(h1,h2) em{background:none;-webkit-text-fill-color:#25913B;color:#25913B}

/* hero, left-aligned: hold the measure */
.hero:not(.center) h1{max-width:19ch}
.hero:not(.center) .lede{max-width:58ch}
.hero .console{margin-top:clamp(36px,5vw,56px)}

/* =====================================================================
   OPEN SKY — hero composition and the four console scenes.
   The hero carries one artifact (an invoice in three brands); each tab
   below carries a different KIND of picture: a program page, a phone on
   a job, a review queue, a console. Four dashboards would say one thing
   four times.
   ===================================================================== */

/* --- hero: copy left, the brand fan right -------------------------- */
.hero .hero-grid{grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);align-items:center;gap:clamp(32px,5vw,72px)}
.hero h1{font-size:clamp(2.1rem,3.5vw,3.15rem)}
.hero:not(.center) h1{max-width:17ch}
.hero:not(.center) .lede{max-width:46ch;font-size:1.0625rem}
.hero .chip{margin-bottom:20px}
.hero-art{position:relative}
.hero-art .aw-cap{text-align:center;margin-top:18px}
@media (max-width:960px){.hero .hero-grid{grid-template-columns:minmax(0,1fr)}.hero-art{margin-top:8px}}

/* the fan: one invoice, three institutions */
.bfan{position:relative;padding-top:38px}
/* ---- motion: the same gentle float learn.finli.com uses on its hero art ---- */
@keyframes hvFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.fb{animation:hvFloat 4.5s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.fb2{animation-delay:1.4s}
.fb3{animation-delay:2.6s}
/* the fanned institution cards breathe, back layers trailing the front one */
.bfan .bf-card{animation:hvFloat 6s ease-in-out infinite}
.bfan .bf-2{animation:hvFloat 6s ease-in-out infinite;animation-delay:.5s}
.bfan .bf-3{animation:hvFloat 6s ease-in-out infinite;animation-delay:1s}
/* floating badges around the fan, learn's pill motif carrying this page's meaning */
.bf-badges{position:absolute;inset:0;pointer-events:none;z-index:3}
.bf-badge{position:absolute;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:#fff;box-shadow:0 10px 24px -10px rgba(11,18,54,.55);color:var(--navy, #0B2A5B);
  animation:hvFloat 4.5s ease-in-out infinite}
.bf-badge svg{width:19px;height:19px}
.bf-badge.b-paid{background:#5DC268;color:#fff;top:4%;left:-5%}
.bf-badge.b-bank{top:34%;left:-9%;animation-delay:1.4s}
.bf-badge.b-cash{background:#3C85F8;color:#fff;bottom:-14px;right:16%;animation-delay:2.6s}
.bf-badge.b-card{top:-10px;right:6%;animation-delay:.8s}
@media(max-width:820px){.bf-badge.b-bank,.bf-badge.b-card{display:none}
  .bf-badge{width:34px;height:34px}.bf-badge svg{width:16px;height:16px}}
/* the tree canopies drift, as they do on learn */
.trees circle{animation:hvFloat 5.5s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.trees circle:nth-of-type(2){animation-delay:1.2s}
.trees circle:nth-of-type(3){animation-delay:2.1s}
.trees circle:nth-of-type(4){animation-delay:3s}
.bf-back{position:absolute;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:0 14px 30px -20px rgba(11,18,54,.35);overflow:hidden}
.bf-back span{display:block;height:30px}
.bf-3{top:0;left:56px;right:-18px;height:180px}
.bf-2{top:19px;left:28px;right:-6px;height:180px}
.bf-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 30px 60px -28px rgba(11,18,54,.5);overflow:hidden}
.bf-head{display:flex;align-items:center;gap:9px;padding:11px 14px;color:#fff}
.bf-head b{font-size:.84rem;font-weight:600}
.bf-mark{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;font-size:.56rem;font-weight:700;color:#fff;flex:none}
.bf-pow{margin-left:auto;font-size:.56rem;color:rgba(255,255,255,.72);display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.bf-pow img{height:8px;width:auto;display:inline-block}
.bf-body{padding:20px 20px 18px}
.bf-from{margin:0;font-size:.9rem;font-weight:600;color:var(--ink)}
.bf-inv{margin:3px 0 0;font-size:.74rem;color:var(--ink-3)}
.bf-amt{margin:12px 0 0;font-size:2.05rem;font-weight:600;letter-spacing:-.04em;color:var(--ink)}
.bf-lines{margin-top:14px;border-top:1px solid var(--line-2);padding-top:10px;display:grid;gap:7px}
.bf-lines div{display:flex;justify-content:space-between;gap:12px;font-size:.78rem;color:var(--ink-2)}
.bf-lines b{font-weight:600;color:var(--ink)}
.bf-pay{margin-top:16px;display:grid;gap:8px}
.bf-btn{display:block;text-align:center;background:#0B2A5B;color:#fff;font-size:.8rem;font-weight:500;border-radius:999px;padding:11px 14px}
.bf-btn.alt{background:#fff;color:#0B2A5B;border:1px solid #CBD8EE}
.bf-note{margin:12px 0 0;font-size:.68rem;color:var(--ink-3);text-align:center}

/* --- console: four tabs -------------------------------------------- */
.center-head{max-width:680px;margin-inline:auto;text-align:center}
.stages{flex-wrap:wrap;gap:10px 0}
.stages::before{left:calc(50% - 300px);right:calc(50% - 300px)}
.stage{margin:0 12px}
@media (max-width:1000px){.stages::before{display:none}.stage{margin:0 5px}}

/* --- shared scene furniture ---------------------------------------- */
.sc{position:relative;text-align:left}
.sc-card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.sc-head{display:flex;align-items:center;gap:10px;padding:12px 16px;color:#fff}
.sc-head b{font-size:.86rem;font-weight:600}
.sc-mark{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;font-size:.56rem;font-weight:700;color:#fff;flex:none}
.sc-pow{margin-left:auto;font-size:.68rem;color:rgba(255,255,255,.72);white-space:nowrap}
.sc-body{padding:20px}
.sc-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
.sc-top h4{margin:0;font-size:1rem}
.sc-count{font-size:.78rem;color:var(--ink-3)}
.sc-btn{background:#EEF4FF;color:var(--deep);font-size:.74rem;font-weight:500;border-radius:999px;padding:7px 14px;white-space:nowrap}
.sc-skip{font-size:.74rem;color:var(--ink-3);padding:7px 4px;white-space:nowrap}
.sc-acts{display:flex;align-items:center;gap:6px;flex:none}
.sc-rows{display:grid;gap:2px}
.sc-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 0;border-top:1px solid var(--line-2)}
.sc-row:first-child{border-top:0}
.sc-row b{display:block;font-size:.875rem;font-weight:600;color:var(--ink)}
.sc-row small{display:block;font-size:.76rem;color:var(--ink-3);margin-top:2px;line-height:1.45}
.sc-rows.queue .sc-row{align-items:flex-start}
.sc-rows.queue .sc-acts{margin-top:2px}
.sc-foot{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line-2);font-size:.76rem;color:var(--ink-3);display:flex;align-items:center;gap:8px}
.sc-foot .i{width:17px;height:17px;color:var(--green-ink);flex:none}
@media (max-width:560px){.sc-row{flex-direction:column;align-items:flex-start;gap:9px}.sc-acts{margin-top:0}}

/* community: sessions beside the impact tally */
.sc-two{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:18px;align-items:start}
.sc-side{display:grid;gap:10px}
.sc-stat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.sc-stat small{display:block;font-size:.72rem;color:var(--ink-3)}
.sc-stat b{display:block;font-size:1.6rem;font-weight:600;letter-spacing:-.03em;margin-top:2px}
.sc-exp{background:var(--wash-green);border-radius:14px;padding:14px 16px;display:flex;gap:11px;align-items:center}
.sc-exp .i{width:22px;height:22px;color:var(--green-ink);flex:none}
.sc-exp b{display:block;font-size:.8rem;font-weight:600}
.sc-exp span{display:block;font-size:.72rem;color:var(--ink-3)}
@media (max-width:860px){.sc-two{grid-template-columns:minmax(0,1fr)}.sc-side{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.sc-exp{grid-column:1/-1}}
@media (max-width:560px){.sc-side{grid-template-columns:1fr}}

/* business clients: a phone, then where the money goes */
.sc-phone-row{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(24px,4vw,52px);align-items:center}
.sc-phone{background:#fff;border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow);overflow:hidden;padding:7px}
.sc-ph-head{display:flex;align-items:center;gap:8px;padding:11px 12px;color:#fff;border-radius:20px 20px 8px 8px}
.sc-ph-head b{font-size:.76rem;font-weight:600}
.sc-ph-body{padding:16px 12px 12px}
.sc-ph-ttl{margin:0 0 12px;font-size:.95rem;font-weight:600}
.sc-field{border:1px solid var(--line-2);border-radius:11px;padding:9px 12px;margin-bottom:8px}
.sc-field small{display:block;font-size:.65rem;color:var(--ink-3)}
.sc-field b{display:block;font-size:.86rem;font-weight:600;margin-top:1px}
.sc-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.75rem;color:var(--ink-2);padding:4px 2px 12px}
.sc-toggle i{width:34px;height:19px;border-radius:999px;background:var(--green);position:relative;flex:none}
.sc-toggle i::after{content:"";position:absolute;right:3px;top:3px;width:13px;height:13px;border-radius:50%;background:#fff}
.sc-cta{display:block;text-align:center;background:#0B2A5B;color:#fff;font-size:.84rem;font-weight:500;border-radius:999px;padding:12px}
.sc-ph-foot{margin:11px 0 2px;font-size:.66rem;color:var(--ink-3);text-align:center}
.sc-flow{display:grid;gap:0}
.sc-step{background:#fff;border:1px solid var(--line);border-radius:16px;padding:15px 17px;display:flex;gap:13px;align-items:center;box-shadow:0 14px 34px -24px rgba(11,18,54,.45)}
.sc-step b{display:block;font-size:.9rem;font-weight:600;color:var(--ink)}
.sc-step span{display:block;font-size:.78rem;color:var(--ink-3);margin-top:2px;line-height:1.45}
.sc-ok{width:36px;height:36px;border-radius:50%;background:var(--green);display:grid;place-items:center;flex:none}
.sc-ok .i{width:19px;height:19px;color:#fff;--ico-accent:#fff}
.sc-ok.blue{background:var(--deep)}
.sc-ok.pale{background:var(--pale)}
.sc-ok.pale .i{color:var(--deep);--ico-accent:var(--deep)}
.sc-link{width:2px;height:20px;margin-left:34px;background:linear-gradient(180deg,var(--green),var(--deep));opacity:.4}
@media (max-width:860px){.sc-phone-row{grid-template-columns:minmax(0,1fr);justify-items:center}.sc-phone{width:260px}.sc-flow{width:100%}}

/* program: the numbers */
.sc-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:18px}
.sc-kpi{background:var(--wash-blue);border-radius:13px;padding:14px}
.sc-kpi small{display:block;font-size:.68rem;color:var(--ink-3);line-height:1.35}
.sc-kpi b{display:block;font-size:1.45rem;font-weight:600;letter-spacing:-.03em;margin-top:5px}
.sc-kpi em{display:block;font-style:normal;font-size:.68rem;color:var(--ink-3);margin-top:3px}
.sc-kpi.hi{background:#EEF4FF}.sc-kpi.hi b{color:var(--deep)}
.sc-kpi.ok{background:var(--wash-green)}.sc-kpi.ok b{color:var(--green-ink)}.sc-kpi.ok small,.sc-kpi.ok em{color:#4A7A52}
@media (max-width:760px){.sc-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sc-foot,.bf-note,.sc-ph-foot,.sc p,.bf-body p{max-width:none}

/* =====================================================================
   BANKER INTELLIGENCE SERIES — field guides.
   Deliberately a different surface from the industry programs: denser,
   more table, less marketing. A banker reads this before a meeting.
   ===================================================================== */
.guide-hero h1{font-size:clamp(2rem,3.8vw,3rem)}
.guide-meta{margin-top:14px;font-size:.875rem;color:var(--ink-3)}
.narrow-wide{max-width:980px}








@media (max-width:720px){}

.guide-vs{display:flex;gap:14px;align-items:flex-start;background:var(--wash-blue);border:1px solid #DCE6FA;border-radius:16px;padding:20px 22px}
.guide-vs .i{width:22px;height:22px;color:var(--deep);flex:none;margin-top:2px}
.guide-vs b{display:block;font-weight:600;margin-bottom:5px}
.guide-vs p{margin:0;font-size:.9375rem;color:var(--ink-2);max-width:90ch}
.guide-vs a:not(.btn){color:var(--deep)}
.faq .ans a:not(.btn){color:var(--deep)}

/* tables: the guides lean on these hard */
.gtable{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:#fff}
.gtable table{width:100%;border-collapse:collapse;min-width:680px}
.gtable th{text-align:left;font-size:.76rem;font-weight:600;color:var(--ink-3);padding:13px 16px;border-bottom:1px solid var(--line);background:var(--wash-blue);white-space:nowrap}
.gtable td{padding:14px 16px;font-size:.9rem;color:var(--ink-2);border-bottom:1px solid var(--line-2);vertical-align:top;line-height:1.55}
.gtable tr:last-child td{border-bottom:0}
.gtable td b{color:var(--ink);font-weight:600}
.gtable.stack td.pro{color:#2A6B38}
.gtable.stack td.con{color:#8A4A2A}

/* seasonality */
.season{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.season-card{border-radius:16px;padding:20px 22px}
.season-card p{margin:9px 0 0;font-size:.9375rem;color:var(--ink-2)}
.season-card.peak{background:var(--wash-green);border:1px solid #CDE8D2}
.season-card.trough{background:#FDF4EF;border:1px solid #F3DACB}
.season-tag{display:inline-block;font-size:.76rem;font-weight:600;letter-spacing:.01em}
.season-card.peak .season-tag{color:#1C6B2E}
.season-card.trough .season-tag{color:#8A4A2A}
@media (max-width:760px){.season{grid-template-columns:1fr}}

.gweek{background:var(--wash-blue);border-radius:16px;padding:20px 24px}
.gweek h4{margin:0 0 10px;font-size:.9375rem}
.gweek ul{margin:0;padding-left:20px;display:grid;gap:6px}
.gweek li{font-size:.9375rem;color:var(--ink-2)}

/* market calculator */
.calc{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px}
.calc-in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.calc-in .field{margin:0}
.calc-in input{width:100%;font:inherit;font-size:1.25rem;font-weight:600;padding:12px 14px;border:1px solid var(--line);border-radius:12px;color:var(--ink)}
.calc-in input:focus{outline:2px solid var(--blue);outline-offset:1px}
.calc-in .hint{margin:7px 0 0;font-size:.8rem;color:var(--ink-3)}
.calc-out{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:22px}
.calc-stat{background:var(--wash-blue);border-radius:14px;padding:16px}
.calc-stat small{display:block;font-size:.76rem;color:var(--ink-3)}
.calc-stat b{display:block;font-size:1.4rem;font-weight:600;letter-spacing:-.03em;margin-top:5px;color:var(--deep)}
.calc-stat em{display:block;font-style:normal;font-size:.72rem;color:var(--ink-3);margin-top:3px}
.calc-note{display:flex;gap:9px;align-items:flex-start;margin:18px 0 0;font-size:.8125rem;color:var(--ink-3);max-width:none}
.calc-note .i{width:17px;height:17px;flex:none;margin-top:2px}
.calc-prod{margin-top:18px;border-top:1px solid var(--line-2);padding-top:16px}
.calc-prod h4{margin:0 0 10px;font-size:.9375rem}
.calc-prod ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.calc-prod li{font-size:.84rem;background:var(--wash-blue);border-radius:999px;padding:6px 14px;color:var(--ink-2)}
@media (max-width:860px){.calc-out{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.calc-in{grid-template-columns:1fr}}

/* pains */
.pains{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pain{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px}
.pain h3{font-size:1.0625rem;margin:0 0 8px}
.pain p{margin:0;font-size:.9375rem;color:var(--ink-2)}
.pain-listen{margin-top:12px!important;padding-top:11px;border-top:1px solid var(--line-2);font-size:.86rem!important;color:var(--ink-3)!important}
.pain-listen span{display:block;font-size:.72rem;font-weight:600;color:var(--green-ink);margin-bottom:3px}
@media (max-width:960px){.pains{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.pains{grid-template-columns:1fr}}

/* what it does for the banker's own book */
.bankerpts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.bpt{background:#fff;border-radius:18px;padding:22px}
.bpt h3{font-size:1.0625rem;margin:0 0 8px}
.bpt p{margin:0;font-size:.9375rem;color:var(--ink-2)}
@media (max-width:760px){.bankerpts{grid-template-columns:1fr}}

/* talking points */
.talk{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.talk-col{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px}
.talk-col h4{margin:0 0 12px;font-size:.9375rem;display:flex;align-items:center;gap:9px}
.talk-col h4 .i{width:19px;height:19px;color:var(--deep)}
.talk-col ul{margin:0;padding-left:20px;display:grid;gap:9px}
.talk-col li{font-size:.9375rem;color:var(--ink-2);line-height:1.55}
.talk-col.warn{background:#FDF4EF;border-color:#F3DACB}
.talk-col.warn h4 .i{color:#8A4A2A}
@media (max-width:760px){.talk{grid-template-columns:1fr}}

/* say this, not this */
.resonate{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff}
.res-head{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));background:var(--wash-blue);border-bottom:1px solid var(--line)}
.res-head span{padding:11px 18px;font-size:.76rem;font-weight:600;color:var(--ink-3)}
.res-head span:first-child{color:#1C6B2E}
.res-head span:last-child{color:#8A4A2A}
.res-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:1px solid var(--line-2)}
.res-row:last-child{border-bottom:0}
.res-row p{margin:0;padding:15px 18px;font-size:.9375rem;line-height:1.55;max-width:none}
.res-row .yes{color:var(--ink);font-weight:500}
.res-row .no{color:var(--ink-3);border-left:1px solid var(--line-2)}
.res-close{margin-top:22px;font-size:1.0625rem;font-weight:500;color:var(--ink);max-width:70ch}
@media (max-width:620px){.res-head{display:none}.res-row{grid-template-columns:1fr}.res-row .no{border-left:0;border-top:1px solid var(--line-2)}.res-row .no::before{content:"Not this: ";font-weight:600}}

/* the library */
.guide-find{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.guide-find .help-search{flex:1 1 320px;margin:0}
.gfilters{display:flex;flex-wrap:wrap;gap:8px}
.gf{font:inherit;font-size:.84rem;font-weight:500;color:var(--ink-3);background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 15px;cursor:pointer;min-height:38px}
.gf:hover{border-color:#C9D3E8;color:var(--ink)}
.gf.on{background:var(--deep);border-color:var(--deep);color:#fff}
.gcount{margin:16px 0 0;font-size:.84rem;color:var(--ink-3)}
.gcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.gcard{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;transition:border-color .15s,box-shadow .15s}
.gcard:hover{border-color:var(--blue-3,#9DC2FB);box-shadow:0 10px 30px -18px rgba(0,47,149,.4)}
.gcard-cat{font-size:.72rem;font-weight:600;color:var(--ink-3)}
.gcard h3{font-size:1.0625rem;margin:0}
.gcard p{margin:0;font-size:.9rem;color:var(--ink-2);flex:1 1 auto}
.gcard-foot{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin-top:6px;padding-top:12px;border-top:1px solid var(--line-2)}
.gmeta{font-size:.76rem;color:var(--ink-3)}
.gpill{font-size:.7rem;font-weight:600;color:#1C6B2E;background:var(--tint-green);border-radius:999px;padding:4px 10px}
.gempty{text-align:center;padding:48px 20px;border:1px dashed var(--line);border-radius:18px;margin-top:24px}
.gempty p{max-width:52ch;margin-inline:auto}
@media (max-width:960px){.gcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.gcards{grid-template-columns:1fr}}
.queue-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px}
.queue-card h4{margin:0 0 12px;font-size:.9375rem}
.queue-card .vert-chips span{font-size:.8125rem;color:var(--ink-2);background:var(--wash-blue);border:1px solid var(--line-2);border-radius:999px;padding:5px 12px}
.queue-card .small{margin:14px 0 0}

/* four solutions, not four steps: icon tabs, no numerals, no connecting line */
.stages::before{display:none}
.stage b{width:28px;height:28px;background:var(--tint-blue);color:var(--deep)}
.stage b .i{width:17px;height:17px}
.stage[aria-selected=true] b{background:var(--deep);color:#fff;--ico-accent:#8FE09C}
.stage{margin:0 6px;padding:9px 18px 9px 9px}

/* community: the top-of-funnel strip */
.sc-funnel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px;padding-top:15px;border-top:1px solid var(--line-2)}
.sc-funnel div{background:var(--wash-blue);border-radius:12px;padding:12px 13px}
.sc-funnel b{display:block;font-size:1.35rem;font-weight:600;letter-spacing:-.03em;color:var(--deep)}
.sc-funnel span{display:block;font-size:.7rem;color:var(--ink-3);line-height:1.4;margin-top:2px}

/* business clients: modules, the cycle, the three wins */
.sc-mods{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.sc-mod{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;color:var(--ink-2);background:var(--wash-blue);border-radius:999px;padding:7px 14px 7px 10px}
.sc-mod .i{width:16px;height:16px;color:var(--deep)}
.sc-cycle{background:var(--wash-green);border-radius:14px;padding:16px 18px}
.sc-cycle-head b{font-size:.875rem;font-weight:600}
.sc-cycle-head span{display:block;font-size:.72rem;color:var(--ink-3);margin-top:2px}
.sc-cycle-bars{margin-top:13px;display:grid;gap:9px}
.sc-cc{display:grid;grid-template-columns:62px minmax(0,1fr) 62px;gap:11px;align-items:center}
.sc-cc-lab{font-size:.72rem;color:var(--ink-3)}
.sc-cc-bar{height:12px;border-radius:999px;background:#fff;overflow:hidden}
.sc-cc-bar i{display:block;height:100%;border-radius:999px;background:#C6D8F0}
.sc-cc.after .sc-cc-bar i{background:var(--green)}
.sc-cc-val{font-size:.8rem;font-weight:600;text-align:right}
.sc-cc.after .sc-cc-val{color:var(--green-ink)}
.sc-wins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}
.sc-win{border:1px solid var(--line-2);border-radius:12px;padding:13px 14px}
.sc-win b{display:block;font-size:.84rem;font-weight:600}
.sc-win span{display:block;font-size:.74rem;color:var(--ink-3);line-height:1.45;margin-top:4px}
@media (max-width:760px){.sc-wins,.sc-funnel{grid-template-columns:1fr}}

/* bankers: the signal and the opportunity */
.sc-sig{display:inline-flex;align-items:center;gap:7px;margin-top:8px;font-size:.74rem;font-weight:500;color:var(--green-ink);background:var(--wash-green);border-radius:999px;padding:5px 12px 5px 8px}
.sc-sig .i{width:15px;height:15px}
.sc-sig.warn{color:#8A4A2A;background:#FDF4EF}
.sc-opp{flex:none;text-align:right}
.sc-opp-pill{display:inline-block;font-size:.68rem;font-weight:600;color:var(--deep);background:var(--tint-blue);border-radius:999px;padding:4px 10px}
.sc-opp b{display:block;font-size:.95rem;font-weight:600;margin-top:6px;white-space:nowrap}
@media (max-width:560px){.sc-opp{text-align:left}}

/* vertical programs: head to head with the vertical SaaS */
.sc-lede{margin:0 0 16px;font-size:.875rem;color:var(--ink-2);max-width:78ch}
.sc-vert{border:1px solid var(--line-2);border-radius:14px;overflow:hidden}
.sc-vert-head,.sc-vert-row{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) 120px;gap:14px;align-items:center;padding:12px 15px}
.sc-vert-head{background:var(--wash-blue);border-bottom:1px solid var(--line-2)}
.sc-vert-head span{font-size:.7rem;font-weight:600;color:var(--ink-3)}
.sc-vert-row{border-bottom:1px solid var(--line-2)}
.sc-vert-row:last-child{border-bottom:0}
.sc-vert-row b{display:block;font-size:.875rem;font-weight:600}
.sc-vert-row small{display:block;font-size:.73rem;color:var(--ink-3);margin-top:2px}
.sc-alt{font-size:.78rem;color:#8A4A2A}
@media (max-width:700px){.sc-vert-head{display:none}.sc-vert-row{grid-template-columns:1fr;gap:7px}}
.gstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px;max-width:860px}
.gstat{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.gstat b{display:block;font-size:1.9rem;font-weight:600;letter-spacing:-.035em;color:var(--deep)}
.gstat span{display:block;font-size:.8rem;font-weight:500;color:var(--ink);margin-top:4px}
.gstat em{display:block;font-style:normal;font-size:.74rem;color:var(--ink-3);margin-top:4px;line-height:1.45}
.gstat-src{margin-top:12px;font-size:.78rem;color:var(--ink-3)}
.queue-card .vert-chips span b{font-weight:600;color:var(--deep);margin-left:4px}
@media (max-width:760px){.gstats{grid-template-columns:1fr}}



.scopebtn{font:inherit;font-size:.84rem;font-weight:500;color:var(--ink-3);background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 16px;cursor:pointer;min-height:40px}
.scopebtn:hover{border-color:#C9D3E8;color:var(--ink)}
.scopebtn.on{background:var(--deep);border-color:var(--deep);color:#fff}





.calc-market{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.calc-market-n{background:var(--wash-green);border-radius:14px;padding:16px 18px}
.calc-market-lab{display:block;font-size:.78rem;color:var(--green-ink)}
.calc-market-n b{display:block;font-size:2rem;font-weight:600;letter-spacing:-.035em;color:var(--green-ink);margin-top:3px}
.calc-market-n em{display:block;font-style:normal;font-size:.72rem;color:var(--ink-3);margin-top:4px;line-height:1.45}
.calc-fallback{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin:14px 0 0;font-size:.82rem;color:#8A4A2A;background:#FDF4EF;border-radius:12px;padding:12px 14px;max-width:none}
.calc-fallback .i{width:17px;height:17px;flex:none;color:#8A4A2A}
.calc-fallback input{font:inherit;font-size:.9rem;font-weight:600;padding:7px 10px;border:1px solid #E6CDBE;border-radius:9px;width:120px}
.calc-assume{margin-top:18px;border-top:1px solid var(--line-2);padding-top:14px}
.calc-assume summary{cursor:pointer;font-size:.86rem;font-weight:500;color:var(--deep)}
.calc-assume .hint{margin:10px 0 12px;font-size:.8rem;color:var(--ink-3);max-width:74ch}
.calc-assume-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.calc-assume-grid label{display:block;font-size:.74rem;color:var(--ink-3);margin-bottom:4px}
.calc-assume-grid input{width:100%;font:inherit;font-size:.9rem;padding:9px 10px;border:1px solid var(--line);border-radius:10px}
@media (max-width:760px){.calc-assume-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* what this is for */
.usecases{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px 30px}
.uc-head{font-size:1.25rem;margin:0 0 20px}
.uc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.uc h3{font-size:1rem;margin:14px 0 6px}
.uc p{margin:0;font-size:.9rem;line-height:1.55;color:var(--ink-2)}
.uc .ico{width:44px;height:44px}
.uc .ico .i{width:23px;height:23px}
.uc-note{display:flex;gap:9px;align-items:flex-start;margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line-2);font-size:.82rem;color:var(--ink-3);max-width:none}
.uc-note .i{width:17px;height:17px;flex:none;margin-top:2px}
@media (max-width:980px){.uc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.uc-grid{grid-template-columns:1fr}}


/* ===================== guide: setup, section marks, export ===================== */
/* display:grid on a container beats the UA [hidden] rule, which left dead
   controls on screen when the live lookup failed. These put it back. */
[hidden]{display:none!important}

.setup{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px;box-shadow:0 18px 40px -30px rgba(11,18,54,.45)}
.setup-head{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start;justify-content:space-between;margin-bottom:22px}
.setup-head h2{font-size:1.35rem;letter-spacing:-.02em;margin:0}
.setup-head p{margin:7px 0 0;font-size:.9375rem;color:var(--ink-2);max-width:62ch}
.setup-exp{flex:none;font:inherit;font-size:.86rem;font-weight:500;display:inline-flex;align-items:center;gap:8px;background:var(--deep);color:#fff;border:0;border-radius:999px;padding:12px 20px;cursor:pointer;min-height:44px}
.setup-exp:hover{background:#0A1A8A}
.setup-exp .i{width:17px;height:17px;--ico-accent:#8FE09C}
.setup-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.setup-q{min-width:0}
.setup-lab{display:block;font-size:.95rem;font-weight:600}
.setup-why{margin:5px 0 12px;font-size:.82rem;color:var(--ink-3);max-width:46ch}
.roles,.scopes{display:flex;flex-wrap:wrap;gap:8px}
.role,.scopebtn{font:inherit;font-size:.84rem;font-weight:500;color:var(--ink-3);background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 16px;cursor:pointer;min-height:40px}
.role:hover,.scopebtn:hover{border-color:#C9D3E8;color:var(--ink)}
.role.on,.scopebtn.on{background:var(--deep);border-color:var(--deep);color:#fff}
.setup-who{margin:13px 0 0;font-size:.86rem;color:var(--ink-2);max-width:52ch;min-height:2.6em}
.setup-geo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}
.setup-geo select{width:100%;font:inherit;font-size:.9rem;padding:10px 11px;border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--ink)}
.setup-geo select[multiple]{padding:5px}
.setup-geo label{display:block;font-size:.76rem;color:var(--ink-3);margin-bottom:5px}
.setup-uses{margin-top:22px;border-top:1px solid var(--line-2);padding-top:16px}
.setup-uses summary{cursor:pointer;font-size:.88rem;font-weight:500;color:var(--deep)}
.setup-uses ul{margin:14px 0 0;padding-left:20px;display:grid;gap:9px}
.setup-uses li{font-size:.9rem;line-height:1.6;color:var(--ink-2)}
@media (max-width:860px){.setup-grid,.setup-geo{grid-template-columns:1fr}}

.secnav{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.secnav a{display:inline-flex;align-items:center;gap:9px;font-size:.82rem;font-weight:500;color:var(--ink-2);background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 15px 8px 8px;text-decoration:none}
.secnav a:hover{border-color:var(--deep);color:var(--deep)}
.secnav b{width:21px;height:21px;border-radius:50%;background:var(--tint-blue);color:var(--deep);display:grid;place-items:center;font-size:.7rem;font-weight:600}

.guide-sec{scroll-margin-top:24px}
.sec-mark{display:flex;align-items:center;gap:13px;margin-bottom:10px}
.sec-num{width:36px;height:36px;flex:none;border-radius:50%;background:var(--deep);color:#fff;display:grid;place-items:center;font-size:.95rem;font-weight:600}
.sec-label{margin:0;font-size:.8rem;font-weight:600;letter-spacing:.02em;color:var(--deep);text-transform:uppercase}
.sec-title{font-size:clamp(1.65rem,3vw,2.3rem);letter-spacing:-.03em;margin:0}
.bg-sprout .sec-num{background:var(--green-ink)}
.bg-sprout .sec-label{color:#2A6B38}

.humans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.human{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px}
.human h4{margin:0 0 7px;font-size:1rem}
.human p{margin:0;font-size:.9rem;color:var(--ink-2)}
.human-why{margin-top:11px!important;padding-top:10px;border-top:1px solid var(--line-2);font-size:.84rem!important;color:var(--ink-3)!important}
.human-why span{display:block;font-size:.7rem;font-weight:600;color:var(--green-ink);margin-bottom:3px}
@media (max-width:860px){.humans{grid-template-columns:1fr}}

.exp-modal{position:fixed;inset:0;z-index:200;background:rgba(11,18,54,.55);display:grid;place-items:center;padding:24px;overflow:auto}
.exp-box{background:#fff;border-radius:22px;padding:32px;max-width:520px;width:100%;position:relative;box-shadow:0 40px 90px -40px rgba(11,18,54,.7)}
.exp-box h2{font-size:1.45rem;letter-spacing:-.02em;margin:0 0 10px}
.exp-box>p{font-size:.9375rem;color:var(--ink-2);margin:0 0 20px}
.exp-x{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;border:0;background:var(--mist);cursor:pointer;display:grid;place-items:center}
.exp-x .i{width:18px;height:18px;color:var(--ink-3)}
.exp-box .btn{width:100%;justify-content:center;margin-top:6px}
.exp-box .muted.small{margin-top:12px}

/* =====================================================================
   LIFT — what learn.finli.com gets right, brought across.
   The page now OPENS in deep navy and rises into light, so the curve
   between them is a horizon and scrolling down is the lift. One accent
   (green) does all the emphasis work instead of a gradient; headline
   weight goes to 700. Fewer colours, more contrast, bolder page.
   ===================================================================== */
:root{--field:#00106A;--field-ink:#C2D3F5;--field-dim:#8FA6D8}

/* header and hero are one continuous field */
.site-head{background:rgba(0,16,106,.96);border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:saturate(1.4) blur(8px)}
.site-head .logo img{height:40px}
.nav-btn,.signin{color:#E4ECFB}
.nav-btn:hover,.nav-item.open>.nav-btn,.signin:hover{background:rgba(255,255,255,.1);color:#fff}
.nav-btn .chev{color:var(--field-dim)}
.menu-toggle{border-color:rgba(255,255,255,.26);color:#fff}
.head-actions .btn{background:var(--green);border-color:var(--green);color:#06230D;font-weight:600}
.head-actions .btn:hover{background:#6FD178;border-color:#6FD178;color:#06230D}

.hero,.page-hero{background:var(--field);color:var(--field-ink)}
.hero :is(h1,h2,h3),.page-hero :is(h1,h2,h3){color:#fff}
.hero .lede,.page-hero .lede,.hero p,.page-hero p{color:var(--field-ink)}
.hero .eyebrow,.page-hero .eyebrow{color:var(--green);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:.78rem}
.hero .chip,.page-hero .chip{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:#E4ECFB}
:is(.hero,.page-hero,.guide-hero) :is(.crumbs,.crumbs a){color:var(--field-dim)}
:is(.hero,.page-hero,.guide-hero) .crumbs a:hover{color:#fff}
/* inline links sit on the navy field, so they take the one accent, not link blue */
:is(.hero,.page-hero,.guide-hero) :is(p,li,.lede) a:not(.btn){color:var(--green);text-decoration:underline;text-underline-offset:2px}
:is(.hero,.page-hero,.guide-hero) :is(p,li,.lede) a:not(.btn):hover{color:#fff}
/* …but the white cards that sit inside the hero keep ordinary link blue */
:is(.hero,.page-hero,.guide-hero) :is(.form-card,.card,.panel,.aw,.exp-box) a:not(.btn){color:var(--blue);text-decoration:none}
:is(.hero,.page-hero,.guide-hero) :is(.form-card,.card,.panel,.aw,.exp-box) a:not(.btn):hover{color:var(--deep);text-decoration:underline}
.hero .hero-note,.page-hero .hero-note,.guide-hero .guide-meta,.guide-hero .gstat-src{color:var(--field-dim)}
.guide-hero .gstat-src a{color:#9DC2FB}
.hero .aw-cap,.page-hero .aw-cap{color:var(--field-dim)}

/* headlines carry more weight, and the accent is one solid colour */
h1{font-weight:700}
.hero h1,.page-hero h1{font-weight:700;letter-spacing:-.035em}
:is(h1,h2) em{background:none;-webkit-background-clip:border-box;background-clip:border-box;
  -webkit-text-fill-color:currentColor;color:var(--green-ink);font-style:italic}
.hero :is(h1,h2) em,.page-hero :is(h1,h2) em,.bg-navy :is(h1,h2) em{color:#7FE08C}

/* buttons on the field: green leads, white outlines follow */
.hero .btn,.page-hero .btn{background:var(--green);border-color:var(--green);color:#06230D;font-weight:600}
.hero .btn:hover,.page-hero .btn:hover{background:#6FD178;border-color:#6FD178}
.hero .btn.ghost,.page-hero .btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45);font-weight:500}
.hero .btn.ghost:hover,.page-hero .btn.ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}

/* the sky sits inside the field now: a soft glow, not white cloud */
.hero::before,.page-hero::before{opacity:.5;
  background:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 260'%3E%3Cellipse cx='436' cy='86' rx='104' ry='31' fill='%232A49B0' opacity='.55'/%3E%3Cellipse cx='380' cy='68' rx='54' ry='33' fill='%232A49B0' opacity='.55'/%3E%3Cpath d='M108 62 Q124 46 140 62' fill='none' stroke='%237FE08C' stroke-width='3.4' stroke-linecap='round' opacity='.75'/%3E%3Cpath d='M158 40 Q174 24 190 40' fill='none' stroke='%237FE08C' stroke-width='3.4' stroke-linecap='round' opacity='.75'/%3E%3Cpath d='M208 74 Q220 62 232 74' fill='none' stroke='%237FE08C' stroke-width='3' stroke-linecap='round' opacity='.6'/%3E%3C/svg%3E") no-repeat right top/contain}

/* guide hero on the field */
.guide-hero .gstat{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)}
.guide-hero .gstat b{color:#7FE08C}
.guide-hero .gstat span{color:#fff}
.guide-hero .gstat em{color:var(--field-dim)}
.draft-flag{background:rgba(255,214,102,.16);border:1px solid rgba(255,214,102,.4);color:#FFE08A}

/* the brand fan lifts off the dark */
.bfan .bf-card{box-shadow:0 40px 80px -36px rgba(0,0,0,.75)}
.bfan .bf-back{border-color:rgba(255,255,255,.12);box-shadow:0 20px 40px -26px rgba(0,0,0,.6)}

/* navy sections stay, and now rhyme with the hero */
.bg-navy{background:radial-gradient(900px 420px at 80% 0%,rgba(93,194,104,.14),rgba(93,194,104,0) 70%),var(--field)}

@media (max-width:980px){
  /* The drawer continues the navy header rather than cutting to a white sheet,
     so every label in it has to be written for a dark ground. */
  .nav{background:var(--field)}
  .panel{background:var(--field);border-color:rgba(255,255,255,.12)}
  .panel b{color:#fff}
  .panel span{color:var(--field-dim)}
  body.menu-open .nav-btn{color:#fff;border-bottom-color:rgba(255,255,255,.14)}
  body.menu-open .nav-btn:hover,body.menu-open .nav-item.open>.nav-btn{background:rgba(255,255,255,.08);color:#fff}
  body.menu-open .panel .grp{color:var(--field-dim)}
  body.menu-open .panel a{color:#fff}
  body.menu-open .panel a:hover{background:rgba(255,255,255,.08)}
  body.menu-open .panel .i,body.menu-open .panel svg{color:var(--green)}
  body.menu-open .panel-foot{border-top-color:rgba(255,255,255,.14)}
}

/* The product mockups are their own little worlds — the field's text colours
   must not bleed into a white card pretending to be someone else's app. */
.hero :is(.bfan,.aw,.sc,.console) :is(p,b,span,small,em,h1,h2,h3,h4),
.page-hero :is(.bfan,.aw,.sc,.console) :is(p,b,span,small,em,h1,h2,h3,h4){color:inherit}
/* ...but a product screen has its own palette, so put it back above that rule. */
:is(.hero,.page-hero) .aw :is(.aw-kpi small,.aw-row span,.aw-sig p,.aw-note p,.aw-toast span,.aw-head small,.aw-promo p,.aw-phone .k small){color:var(--ink-3)}
/* …but a status chip has its own tinted ground and needs its own ink */
:is(.hero,.page-hero) .aw .aw-row span.st{color:inherit}
:is(.hero,.page-hero) .aw :is(.aw-kpi em){color:var(--green-ink)}
:is(.hero,.page-hero) .aw :is(.aw-kpi em.warn){color:#9A4318}
:is(.hero,.page-hero) .aw :is(.aw-panel h5 span){color:var(--blue)}
:is(.hero,.page-hero) .aw :is(.aw-kpi b,.aw-row b,.aw-row .amt,.aw-panel h5,.aw-sig b,.aw-note b,.aw-toast b,.aw-head h4,.aw-promo b,.aw-phone .k b,.aw-phone .ln b){color:var(--ink)}
:is(.hero,.page-hero) .aw :is(.st.paid,.st.complete){color:#1B6B2B}
:is(.hero,.page-hero) .aw :is(.st.sent,.st.open){color:#173E9C}
:is(.hero,.page-hero) .aw :is(.st.due){color:#8A3A12}
:is(.hero,.page-hero) .aw :is(.st.draft){color:#7A5A00}
:is(.hero,.page-hero) .aw :is(.aw-new){color:var(--ink)}
:is(.hero,.page-hero) .aw :is(.aw-promo .pill){color:#fff}
:is(.hero,.page-hero) .push :is(.note b,.note p,.note .ap){color:var(--ink-2)}
:is(.hero,.page-hero) .push :is(.note b){color:var(--ink)}
.hero .bfan,.page-hero .bfan,.hero .aw,.page-hero .aw,.hero .sc,.page-hero .sc{color:var(--ink)}
.hero .bf-from,.page-hero .bf-from{color:var(--ink)}
.hero .bf-amt,.page-hero .bf-amt{color:var(--ink)}
.hero .bf-inv,.page-hero .bf-inv,.hero .bf-note,.page-hero .bf-note{color:var(--ink-3)}
.hero .bf-head b,.page-hero .bf-head b{color:#fff}
.hero .bf-pow,.page-hero .bf-pow{color:rgba(255,255,255,.72)}
.hero .bf-btn,.page-hero .bf-btn{color:#fff}
.hero .bf-btn.alt,.page-hero .bf-btn.alt{color:#0B2A5B}
.hero .bf-lines div,.page-hero .bf-lines div{color:var(--ink-2)}
.hero .bf-lines b,.page-hero .bf-lines b{color:var(--ink)}

/* =====================================================================
   Icons sit BESIDE the heading they belong to, never stacked above it.
   One grid: icon in column 1 of row 1, heading next to it, body text
   under the heading in column 2 so it aligns with the words, not the icon.
   ===================================================================== */
.brk,.feature,.link-card{display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:14px;align-items:center;align-content:start}
.brk>.x,.feature>.ico,.link-card>.i{grid-row:1;grid-column:1;margin:0}
.brk>h3,.feature>h3,.feature>h4,.link-card>h3{grid-row:1;grid-column:2;margin:0;align-self:center}
.brk>p,.feature>p,.link-card>p{grid-column:2;margin:9px 0 0}
.brk>*:not(.x):not(h3),.feature>*:not(.ico):not(h3):not(h4),.link-card>*:not(.i):not(h3){grid-column:2}
.link-card>.i{width:26px;height:26px}
/* narrow cards: let the heading wrap under the icon rather than squeeze */
@media (max-width:420px){
  .brk,.feature,.link-card{grid-template-columns:minmax(0,1fr)}
  .brk>.x,.feature>.ico,.link-card>.i{grid-column:1;margin-bottom:10px}
  .brk>h3,.feature>h3,.feature>h4,.link-card>h3,
  .brk>p,.feature>p,.link-card>p{grid-column:1}
}
.opts.wrap-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px}
@media (max-width:620px){.opts.wrap-opts{grid-template-columns:1fr}}
.field legend .muted{font-weight:400;font-size:.82rem}
/* A form card inside the dark hero is a white surface: it keeps ink colours. */
.hero .form-card,.page-hero .form-card{color:var(--ink)}
.hero .form-card :is(p,label,legend,span,small,li),
.page-hero .form-card :is(p,label,legend,span,small,li){color:var(--ink-2)}
.hero .form-card :is(.hint,.privacy-note,.muted),
.page-hero .form-card :is(.hint,.privacy-note,.muted){color:var(--ink-3)}
.hero .form-card :is(h1,h2,h3,h4),.page-hero .form-card :is(h1,h2,h3,h4){color:var(--ink)}
.hero .form-card .btn,.page-hero .form-card .btn{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:500}
.hero .form-card .btn:hover,.page-hero .form-card .btn:hover{background:#0A1A8A;border-color:#0A1A8A}
.hero .form-card .req,.page-hero .form-card .req{color:#B3421C}

/* ===== win-win as a rhythm: every feature read twice, side by side ===== */
.halves{--hmid:52px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;position:relative}
/* the spine: one feature, read from the business side and from yours */
.halves::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 1px);width:2px;
  background:linear-gradient(180deg,transparent,var(--line-2) 8%,var(--line-2) 92%,transparent);pointer-events:none}
.halves-head{display:grid;grid-template-columns:minmax(0,1fr) var(--hmid) minmax(0,1fr);
  background:var(--wash-blue);border-bottom:1px solid var(--line)}
.halves-head span{padding:13px 22px;font-size:.76rem;font-weight:600}
.halves-head span:first-child{color:var(--green-ink)}
.halves-head span:last-child{color:var(--deep);padding-left:4px}
.halves-head .hh-mid{padding:0}
.halves-group{display:grid;grid-template-columns:minmax(0,1fr) var(--hmid) minmax(0,1fr);align-items:center;
  margin:0;max-width:none;font-size:.8rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  color:var(--ink-3);background:#F7FAFE;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.halves-group:first-of-type{border-top:0}
.halves-group .hg-badge{position:relative;z-index:2;grid-column:2;grid-row:1;justify-self:center;
  display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--deep);
  box-shadow:0 0 0 6px #F7FAFE}
.halves-group .hg-badge .i{width:18px;height:18px;color:#fff}
.halves-group{padding:11px 0}
.halves-group .hg-label{grid-column:1;grid-row:1;padding-left:22px}
.half-row{display:grid;grid-template-columns:minmax(0,1fr) var(--hmid) minmax(0,1fr);
  align-items:center;border-bottom:1px solid var(--line-2)}
.half-row:last-child{border-bottom:0}
.half-row p{margin:0;padding:17px 22px;font-size:.9875rem;line-height:1.55;max-width:none}
.half-row .h-biz{color:var(--ink);font-weight:500}
.half-row .h-fi{color:var(--ink-2);padding-left:4px}
/* the node that carries one side into the other */
.half-row .h-link{position:relative;z-index:2;display:grid;place-items:center;width:28px;height:28px;
  justify-self:center;border-radius:50%;background:#fff;border:1.5px solid #BFE3C5;box-shadow:0 0 0 5px #fff}
.half-row .h-link .i{width:16px;height:16px;color:var(--green-ink)}
/* the institution's side sits on its own quiet field */
.half-row .h-fi,.halves-head span:last-child{background:linear-gradient(90deg,rgba(244,249,254,.75),rgba(244,249,254,.35))}
@media (max-width:680px){
  .halves{--hmid:0px}
  .halves::before{display:none}
  .halves-head{display:none}
  .half-row{grid-template-columns:1fr}
  .half-row .h-link{display:none}
  .half-row .h-fi{border-top:1px solid var(--line-2);background:var(--wash-blue);padding-left:22px}
  .half-row .h-biz::before{content:"The business gets";display:block;font-size:.68rem;font-weight:600;color:var(--green-ink);margin-bottom:5px}
  .half-row .h-fi::before{content:"You get";display:block;font-size:.68rem;font-weight:600;color:var(--deep);margin-bottom:5px}
  .halves-group{grid-template-columns:1fr;padding:14px 0 11px}
  .halves-group .hg-badge{grid-column:1;justify-self:start;margin-left:22px;margin-bottom:7px;box-shadow:none}
  .halves-group .hg-label{grid-row:2;grid-column:1}
}
/* The mockup-isolation rule outranked the button colours, so state them harder. */
.hero .bfan .bf-pay .bf-btn,.page-hero .bfan .bf-pay .bf-btn{color:#fff}
.hero .bfan .bf-pay .bf-btn.alt,.page-hero .bfan .bf-pay .bf-btn.alt{color:#0B2A5B}
.hero .bfan .bf-head b,.page-hero .bfan .bf-head b{color:#fff}
.hero .bfan .bf-pow,.page-hero .bfan .bf-pow{color:rgba(255,255,255,.72)}

/* ---------- Trust Center ---------- */
.tc-top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:26px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px}
.tc-seal{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:center}
.tc-seal .seal{width:104px;height:104px;border-radius:22px;background:var(--grad);color:#fff;display:grid;place-content:center;justify-items:center;gap:1px;flex:none;box-shadow:0 12px 28px -14px rgba(0,47,149,.6)}
.tc-seal .seal .i{width:22px;height:22px;margin-bottom:3px}
.tc-seal .seal b{font-size:1.05rem;font-weight:700;letter-spacing:-.02em;line-height:1}
.tc-seal .seal span{font-size:.72rem;font-weight:500;opacity:.9}
.tc-seal h2{margin:0;font-size:1.4rem}
.tc-seal p{margin:8px 0 0;color:var(--ink-2);font-size:.98rem}
.tc-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.tc-stat{background:var(--mist);border-radius:16px;padding:18px 16px;text-align:center}
.tc-stat b{display:block;font-size:2rem;font-weight:700;letter-spacing:-.035em;color:var(--deep);font-variant-numeric:tabular-nums;line-height:1.1}
.tc-stat span{display:block;margin-top:6px;font-size:.82rem;color:var(--ink-3);line-height:1.4}

.tc-docs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.tc-doc{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:start;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px}
.tc-doc>.i{width:22px;height:22px;color:var(--blue);margin-top:2px}
.tc-doc b{display:block;font-weight:600;color:var(--ink)}
.tc-doc p{margin:4px 0 0;font-size:.9rem;color:var(--ink-3);line-height:1.5}
.tc-doc .st{align-self:center}

.tc-pols{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 28px}
.tc-pols li{display:flex;align-items:center;gap:11px;padding:11px 0;border-top:1px solid var(--line-2);font-size:.96rem;color:var(--ink-2)}
.tc-pols li:first-child,.tc-pols li:nth-child(2){border-top:0}
.tc-pols .i{width:18px;height:18px;color:var(--green-ink);flex:none}

.tc-group{margin-top:34px}
.tc-group h3{display:flex;align-items:center;gap:11px;margin:0 0 14px;font-size:1.1rem}
.tc-group h3 .i{width:21px;height:21px;color:var(--blue);flex:none}
.tc-group h3 .n{margin-left:auto;font-size:.82rem;font-weight:500;color:var(--ink-3);background:var(--mist);border-radius:99px;padding:3px 12px}
.tc-ctls{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tc-ctl{background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px 17px}
.tc-ctl b{display:block;font-weight:600;color:var(--ink);font-size:.95rem}
.tc-ctl p{margin:5px 0 0;font-size:.87rem;color:var(--ink-3);line-height:1.55}

.tc-report{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 24px}
.tc-report>.i{width:24px;height:24px;color:var(--blue);margin-top:2px}
.tc-report b{display:block;font-weight:600;color:var(--ink)}
.tc-report p{margin:5px 0 0;color:var(--ink-2)}

@media (max-width:900px){
  .tc-top{grid-template-columns:minmax(0,1fr);gap:22px;padding:22px}
  .tc-docs,.tc-pols,.tc-ctls{grid-template-columns:minmax(0,1fr)}
  .tc-pols li:nth-child(2){border-top:1px solid var(--line-2)}
}
@media (max-width:560px){
  .tc-seal{grid-template-columns:minmax(0,1fr)}
  .tc-stats{grid-template-columns:minmax(0,1fr)}
  .tc-stat{text-align:left}
}

/* ==========================================================================
   finli.com 2.0 — the owner-lens vocabulary.
   Charts and boxes in place of decorative imagery. Data marks are validated:
   #1F5FD0 / #25913B pass the six colour checks; the brand navy is too dark to
   serve as a data mark, so it stays a brand colour only. Every series carries a
   label on the mark, because that pair sits in the tritan floor band.
   ========================================================================== */
:root{
  --c1:#1F5FD0; --c1-soft:#DCE7FA; --c2:#25913B; --c2-soft:#DDEFE1;
  --thread:#BFD3EC; --grid:#E8ECF4;
}

/* ---- the institution door, permanent in the header ---- */
.head-actions .fi-door{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  font-size:.9375rem;font-weight:500;text-decoration:none;color:var(--green-ink);
  border:1.5px solid rgba(37,145,59,.35);border-radius:999px;padding:9px 16px}
.head-actions .fi-door:hover{background:var(--green-4);border-color:rgba(37,145,59,.5)}
.head-actions .fi-door svg{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.btn.door-btn{background:var(--green-ink);border-color:var(--green-ink)}
@media(max-width:1080px){.head-actions .fi-door{display:none}}

/* ---- owner hero ---- */
.o-hero{padding-block:clamp(48px,8vw,96px) clamp(30px,5vw,56px)}
.o-hero h1{max-width:17ch}
.o-lede{margin-top:20px;font-size:clamp(1.0625rem,2.1vw,1.3rem);color:var(--ink-3);max-width:58ch;line-height:1.6}
.o-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.o-note{margin-top:16px;font-size:.9rem;color:var(--ink-3)}

/* ---- section scaffold ---- */
.o-sec{padding-block:clamp(44px,7vw,84px)}
.o-eyebrow{font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 14px}
.o-h2{max-width:24ch}
.o-sub{margin-top:16px;font-size:1.0625rem;color:var(--ink-3);max-width:64ch;line-height:1.65}
.o-reading{margin-top:22px;font-size:.9rem;color:var(--ink-3);text-align:center}

/* ---- plot frame ---- */
.plot{margin-top:32px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;
  padding:clamp(18px,3vw,32px);overflow:hidden}
.plot-t{font-size:.9375rem;font-weight:600;color:var(--ink)}
.plot-s{font-size:.8125rem;color:var(--ink-3);margin-top:3px;margin-bottom:22px}
.o-legend{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:20px}
.o-legend span{display:inline-flex;align-items:center;gap:7px;font-size:.8125rem;color:var(--ink-2)}
.sw{width:11px;height:11px;border-radius:3px;flex:none}
.sw-1{background:var(--c1)}.sw-2{background:var(--c2)}

/* ---- the gap, two bars ---- */
.gap-row{display:grid;grid-template-columns:minmax(0,104px) minmax(0,1fr);gap:14px;
  align-items:center;margin-bottom:12px}
.gap-lab{font-size:.8125rem;font-weight:600;color:var(--ink);text-align:right;line-height:1.3}
.gap-lab small{display:block;font-weight:400;font-size:.75rem;color:var(--ink-3)}
.track{position:relative;height:42px;background:var(--mist);border-radius:9px}
.seg{position:absolute;top:0;bottom:0;border-radius:7px;display:flex;align-items:center;
  padding:0 11px;font-size:.75rem;font-weight:600;white-space:nowrap;overflow:hidden}
.seg.ghost{background:var(--c1-soft);color:var(--c1)}
.seg.fill{background:var(--c1);color:#fff}
.fx-paid{position:absolute;top:-3px;bottom:-3px;width:4px;border-radius:2px;background:var(--c2)}
.fx-paid b{position:absolute;left:11px;top:50%;transform:translateY(-50%);font-size:.75rem;
  color:var(--green-ink);white-space:nowrap}
.axis{display:flex;justify-content:space-between;border-top:1px solid var(--grid);
  margin-left:118px;padding-top:8px;font-size:.6875rem;color:var(--ink-3)}
.delta{margin-top:22px;padding-top:20px;border-top:1px solid var(--line-2);
  display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline}
.delta b{font-size:clamp(1.9rem,5vw,2.6rem);font-weight:700;color:var(--green-ink);
  letter-spacing:-.03em;line-height:1}
.delta span{font-size:.9375rem;color:var(--ink-2);max-width:46ch}
@media(max-width:620px){
  .gap-row{grid-template-columns:1fr;gap:7px}
  .gap-lab{text-align:left}
  .gap-lab small{display:inline;margin-left:6px}
  .axis{margin-left:0}
  .seg{font-size:.6875rem;padding:0 8px}
}

/* ---- the orbit: circles sized to their own text ---- */
.fx-orbit{position:relative;container-type:inline-size;width:100%;aspect-ratio:100/82;margin-top:34px}
.fx-orbit .threads{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.fx-orbit .threads line{stroke:var(--thread);stroke-width:2;vector-effect:non-scaling-stroke}
.node{position:absolute;transform:translate(-50%,-50%);
  width:calc(var(--d) * 1cqw);height:calc(var(--d) * 1cqw);border-radius:50%;
  background:#fff;border:1.5px solid var(--line);text-decoration:none;color:inherit;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  transition:border-color .18s ease,background .18s ease,transform .18s ease,box-shadow .18s ease}
/* percentage padding on an absolutely positioned box resolves against the stage,
   so the text width is set on the children instead. */
.node > *{max-width:74%}
a.node{border-color:var(--green);border-width:2px}
a.node:hover,a.node:focus-visible{background:var(--green-ink);border-color:var(--green-ink);
  transform:translate(-50%,-50%) scale(1.04);box-shadow:0 14px 34px -16px rgba(26,107,44,.55)}
a.node:hover :is(h3,p),a.node:focus-visible :is(h3,p){color:#fff}
a.node:hover .soon,a.node:focus-visible .soon{background:rgba(255,255,255,.2);color:#fff}
.node h3{font-size:clamp(.78rem,1.62cqw,1.0625rem);font-weight:600;color:var(--navy)}
.node p{margin-top:5px;font-size:clamp(.66rem,1.32cqw,.875rem);color:var(--ink-3);line-height:1.4}
.node.n-soon{border-color:var(--green-ink)}
.node .soon{display:inline-block;margin-top:4px;padding:2px 8px;border-radius:999px;
  background:var(--green-4);color:var(--green-ink);font-weight:600;letter-spacing:.02em;
  font-size:clamp(.56rem,1.08cqw,.6875rem)}
.node.hub{background:var(--deep);border-color:var(--deep);color:#fff;
  box-shadow:0 22px 52px -24px rgba(0,47,149,.8)}
.node.hub > *{max-width:78%}
.hub-eyebrow{font-size:clamp(.56rem,1.08cqw,.75rem);font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.7)}
.node.hub h3{color:#fff;font-size:clamp(1rem,2.5cqw,1.7rem);font-weight:700;margin-top:6px}
.node.hub p{color:rgba(255,255,255,.84);font-size:clamp(.68rem,1.38cqw,.9375rem);margin-top:8px}
.node.hub .hub-who{display:block;margin-top:4px;color:rgba(255,255,255,.72);
  font-size:clamp(.6rem,1.18cqw,.8125rem);font-weight:500;letter-spacing:.01em}
@media(max-width:1000px){
  .fx-orbit{aspect-ratio:auto;display:flex;flex-direction:column;align-items:center;gap:16px;padding-block:6px}
  .fx-orbit::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;
    background:var(--thread)}
  .fx-orbit .threads{display:none}
  .node{position:relative;transform:none;left:auto!important;top:auto!important;order:var(--o);
    width:min(var(--dm), 300px);height:auto;aspect-ratio:1}
  .node.hub{width:min(var(--dm), 330px)}
  a.node:hover{transform:scale(1.02)}
  .node > *{max-width:70%}
  .node.hub > *{max-width:74%}
  .node h3{font-size:clamp(.95rem,4.4cqw,1.25rem)}
  .node p{font-size:clamp(.8rem,3.6cqw,1rem);margin-top:6px}
  .node .soon{font-size:clamp(.68rem,3cqw,.8125rem)}
  .hub-eyebrow{font-size:clamp(.66rem,3cqw,.8125rem)}
  .node.hub h3{font-size:clamp(1.25rem,6cqw,1.7rem)}
  .node.hub p{font-size:clamp(.85rem,3.8cqw,1.0625rem)}
  .o-reading{text-align:left}
}

/* ---- the hinge: the same feature read twice ---- */
.twice{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.twice > div{padding:clamp(20px,3vw,30px)}
.twice > div + div{border-top:1px solid var(--line)}
@media(min-width:680px){.twice > div + div{border-top:0;border-left:1px solid var(--line)}}
.lens{font-size:.75rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;margin-bottom:16px}
.l-own{color:var(--green-ink)}
.l-bank{color:var(--c1)}
.twice ul{list-style:none;margin:0;padding:0}
.twice li{font-size:.9375rem;color:var(--ink-3);padding:13px 0;border-top:1px solid var(--line-2);line-height:1.55}
.twice li:first-child{border-top:0;padding-top:0}
.twice li b{display:block;color:var(--ink);font-weight:600;font-size:1rem;margin-bottom:3px}
.band-foot{margin-top:18px;text-align:center;font-size:.9375rem;color:var(--ink-3)}

/* ---- the quiet institution strip ---- */
.o-strip{padding-block:clamp(36px,5vw,56px);border-top:1px solid var(--line-2);background:#fff}
.strip-lead{font-size:1.0625rem;font-weight:600;color:var(--ink);max-width:62ch}
.strip-lead span{font-weight:400;color:var(--ink-3)}
.strip-list{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.strip-list a{display:inline-block;padding:10px 16px;border-radius:999px;background:var(--mist);
  border:1px solid var(--line);font-size:.9375rem;font-weight:500;color:var(--navy);text-decoration:none}
.strip-list a:hover{border-color:var(--blue);background:#fff}
.strip-note{margin-top:18px;font-size:.9375rem;color:var(--ink-3)}

/* hero: copy left, the one graphic that matters right */
.head-actions .fi-door{flex-wrap:nowrap}
.o-hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,52px);align-items:center}
@media(min-width:1000px){.o-hero-grid{grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr)}}
.o-hero h1{max-width:14ch}
.o-hero-plot{margin-top:0}
.o-hero .o-lede{max-width:48ch}
.o-cta .btn{background:var(--navy);border-color:var(--navy);color:#fff}
.o-cta .btn:hover{background:#0A1A8A;border-color:#0A1A8A}
.o-cta .btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.o-cta .btn.ghost:hover{background:#fff;border-color:var(--blue);color:var(--ink)}
.head-actions{flex-wrap:nowrap}
.head-actions .fi-door{display:inline-flex;flex:0 0 auto;min-width:max-content;line-height:1.2;flex-wrap:nowrap}

/* A hero with no second column should not leave half the page empty. */
.page-hero .wrap.grid-2:not(:has(> :nth-child(2))){grid-template-columns:minmax(0,1fr)}
.page-hero .wrap.grid-2:not(:has(> :nth-child(2))) h1{max-width:20ch}
.page-hero .wrap.grid-2:not(:has(> :nth-child(2))) .lede{max-width:66ch}

/* ---- hero: the money-movement flow ----
   Money in is live today; money out is in build, and the graphic says so on its
   face rather than in a footnote, because the claim is only half true until then. */
.o-hero .o-hero-copy{max-width:52ch}
.o-hero h1{max-width:18ch}
.mflow{margin-top:clamp(32px,5vw,52px);--railw:clamp(12px,2.4vw,30px)}
.mflow-heads{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1fr);
  gap:var(--railw);margin-bottom:14px}
.mflow-head{grid-column:1;font-size:.75rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);margin:0}
.mflow-head-out{grid-column:3;text-align:right}
.mflow-head .soon{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;
  background:var(--green-4);color:var(--green-ink);font-size:.625rem;font-weight:600;
  letter-spacing:.02em;text-transform:none}
.mflow-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1fr);
  gap:var(--railw);align-items:center}
.mflow-col{display:flex;flex-direction:column;gap:12px}
.pip{position:relative;display:block;padding:13px 16px;border-radius:999px;background:#fff;
  border:1.5px solid var(--line);font-size:.9375rem;font-weight:500;color:var(--navy);
  text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mflow-in .pip{border-color:var(--c1-soft)}
.mflow-out .pip{color:var(--ink-3);border-style:dashed}
/* a rail from each pip into the hub, and out of it again */
.mflow-in .pip::after,.mflow-out .pip::before{content:"";position:absolute;top:50%;
  width:var(--railw);height:2px;transform:translateY(-50%)}
.mflow-in .pip::after{left:100%;background:var(--thread)}
.mflow-out .pip::before{right:100%;background:var(--line)}
.mflow-hub{z-index:1;border-radius:20px;padding:clamp(22px,3vw,34px) 18px;
  background:var(--deep);color:#fff;text-align:center;
  box-shadow:0 26px 58px -26px rgba(0,47,149,.8)}
.mflow-hub b{display:block;font-size:clamp(1.05rem,2.4vw,1.5rem);font-weight:700;letter-spacing:-.02em}
.mflow-hub span{display:block;margin-top:8px;font-size:.875rem;line-height:1.45;color:rgba(255,255,255,.82)}
@media(max-width:760px){
  .mflow-heads{grid-template-columns:minmax(0,1fr);gap:0;margin-bottom:10px}
  .mflow-head,.mflow-head-out{grid-column:1;text-align:left}
  .mflow-head-out{display:none}
  .mflow-body{grid-template-columns:minmax(0,1fr);gap:10px}
  .mflow-in .pip::after,.mflow-out .pip::before{left:50%;right:auto;top:100%;
    width:2px;height:10px;transform:translateX(-50%)}
  .mflow-out .pip::before{top:auto;bottom:100%}
  .mflow-out::before{content:"Money out \2014 coming soon";display:block;font-size:.75rem;
    font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
    margin-top:6px;margin-bottom:4px}
  .mflow-hub{margin-block:4px}
  .pip{white-space:normal}
}


/* ---- mobile and legibility fixes found by the full-site sweep ---- */
/* A table in prose scrolls inside its own box rather than widening the page. */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.tbl-scroll>table{min-width:520px}
/* The scaled product artwork measures its parent, so the parent has to be
   constrained first or it measures the artwork's own natural 1180px. */
.screen{max-width:100%}
.aw{max-width:100%}
.aw.scaled{width:100%}
/* The header logo was a 30px tap target on a phone. */
@media(max-width:760px){
  .logo{display:inline-flex;align-items:center;min-height:44px;padding-block:7px}
}

/* A grid child defaults to min-width:auto, so a wide or unbreakable item inside it
   floors the whole track and pushes the page sideways. These are the two places
   the full-site sweep found it. */
.help-layout{grid-template-columns:240px minmax(0,1fr)}
@media (max-width:900px){.help-layout{grid-template-columns:minmax(0,1fr)}}
.help-side,.help-side ul,.help-side li{min-width:0}
.help-side a{overflow-wrap:anywhere}
/* Scoped to the stacked hero only. Applying min-width:0 to every .screen/.aw
   let the artwork shrink below its content width elsewhere, which clipped the
   dashboard mock on /small-business/. */
.hero-stack>*{min-width:0}
.hero-stack .screen,.hero-stack .aw{min-width:0}
/* Borderline label sizes raised to 12px; the rest of the sub-12px text the sweep
   found is inside product mockup artwork, which is a picture of a screen. */
.gcard-cat{font-size:.75rem}
.gpill{font-size:.75rem}
@media (max-width:1000px){ .hub-eyebrow{font-size:clamp(.75rem,3cqw,.8125rem)} }
/* Breadcrumb links were a 23px tap target on a phone. */
@media (max-width:760px){
  .crumbs a{display:inline-block;padding-block:9px}
  .crumbs{line-height:1.2}
}
/* A <summary> is a real control, so give it a 44px target on a phone. */
@media (max-width:760px){
  summary{padding-block:11px}
}

/* ==========================================================================
   The lift vocabulary. Weight below and left, air above and right, on every
   graphic. All classes are fx- prefixed after three collisions with existing
   component names (.flow, .door, .paid/.stage).
   ========================================================================== */

/* --- the friction ledger --- */
/* Two surfaces side by side, not a spreadsheet: a flat white "today" card and a
   raised green panel, with one arrow at the seam so the reading direction and the
   argument are the same gesture. */
.fx-ledger{position:relative;font-size:.8125rem;min-width:0}
.fx-lg-head,.fx-lg-row{display:grid;grid-template-columns:minmax(0,.74fr) minmax(0,1fr) 30px minmax(0,1.02fr);
  gap:0;align-items:stretch}
.fx-lg-head>span,.fx-lg-row>span{grid-column:auto}
.fx-lg-head .fx-lg-fin,.fx-lg-row .fx-lg-fin{grid-column:4}
.fx-lg-head{font-size:.6875rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.fx-lg-head>span{padding:13px 16px 11px}
.fx-lg-head :is(.fx-lg-k,.fx-lg-now){background:#fff;color:var(--ink-3);border-bottom:1px solid var(--line)}
.fx-lg-head .fx-lg-k{border-radius:14px 0 0 0}
.fx-lg-head .fx-lg-fin{color:#fff;background:var(--green-ink);border-radius:14px 14px 0 0;position:relative}
/* the seam arrow */
.fx-lg-head .fx-lg-fin::after{content:"";position:absolute;left:-16px;top:50%;width:30px;height:30px;
  border-radius:50%;background:#fff;box-shadow:0 3px 10px rgba(0,12,102,.16);transform:translateY(-50%);
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A6B2C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 5l7 7-7 7'/%3E%3C/svg%3E");
  background-size:15px 15px;background-position:center;background-repeat:no-repeat}
.fx-lg-row>span{padding:15px 16px}
.fx-lg-row :is(.fx-lg-k,.fx-lg-now){background:#fff}
.fx-lg-row+.fx-lg-row :is(.fx-lg-k,.fx-lg-now){border-top:1px solid var(--line-2)}
.fx-lg-row:last-child .fx-lg-k{border-radius:0 0 0 14px}
.fx-lg-k{font-weight:700;color:var(--navy);font-size:.875rem}
.fx-lg-now{color:var(--ink-2)}
.fx-lg-fin{color:#fff;font-weight:600;background:var(--green-ink);position:relative;padding-left:33px!important}
.fx-lg-row:last-child .fx-lg-fin{border-radius:0 0 14px 14px;padding-bottom:17px}
.fx-lg-row .fx-lg-fin::before{content:"";position:absolute;left:16px;top:18px;width:7px;height:7px;
  border-radius:50%;background:#8FE3A0}
.fx-lg-fin em{font-style:normal;color:#BFEFC9;font-weight:500}
/* one shadow under the whole green panel */
.fx-ledger::after{content:"";position:absolute;right:0;top:0;bottom:0;width:36%;border-radius:14px;
  box-shadow:0 22px 48px -20px rgba(26,107,44,.6);pointer-events:none;z-index:-1}
@media(max-width:620px){
  .fx-lg-head{display:none}
  .fx-ledger::after{display:none}
  .fx-lg-row{grid-template-columns:minmax(0,1fr);margin-bottom:14px;
    border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
  .fx-lg-row>span{padding:12px 15px;grid-column:auto!important}
  .fx-lg-row :is(.fx-lg-k,.fx-lg-now){border-top:0;border-radius:0}
  .fx-lg-row .fx-lg-k{padding-bottom:4px}
  .fx-lg-row .fx-lg-now{padding-top:0}
  .fx-lg-row .fx-lg-fin,.fx-lg-row:last-child .fx-lg-fin{border-radius:0;padding-bottom:13px}
  .fx-lg-now::before{content:"Today";font-weight:700;color:var(--navy);display:block;
    font-size:.6875rem;letter-spacing:.07em;text-transform:uppercase;margin-bottom:3px}
  .fx-lg-row .fx-lg-fin::before{left:16px;top:16px}
}
}

/* --- the lift, drawn --- */
.fx-lift{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:end;margin-top:34px}
@media(min-width:780px){.fx-lift{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(22px,4vw,56px)}}
.fx-lift-lbl{font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:12px}
.fx-lift-lbl.up{color:var(--green-ink)}
.fx-heavy{align-self:end}
.fx-rock{background:#E7EAF1;border:1px solid #D4DAE6;color:#4A5165;font-size:.875rem;
  border-radius:9px;padding:13px 15px;margin-bottom:5px;box-shadow:0 1px 0 #CFD6E4}
.fx-rock:nth-child(3){margin-left:7px}
.fx-rock:nth-child(4){margin-left:3px}
.fx-rock:nth-child(5){margin-left:11px}
.fx-rock:nth-child(6){margin-left:5px}
.fx-rock:nth-child(7){margin-left:2px}
.fx-light{align-self:start}
.fx-air{background:#fff;border:1.5px solid var(--green-4);color:var(--navy);font-size:.875rem;
  font-weight:500;border-radius:999px;padding:11px 17px;margin:0 7px 9px 0;display:inline-block}
.fx-sky{margin-top:16px;background:linear-gradient(180deg,#EAF3FF 0%,#F8FBFF 100%);
  border:1px solid #D4E6FB;border-radius:16px;padding:22px}
.fx-sky b{display:block;font-size:1.0625rem;font-weight:700;color:var(--navy)}
.fx-sky span{display:block;font-size:.875rem;color:var(--ink-3);margin-top:6px;line-height:1.5}

/* --- the growth arc --- */
.fx-arc{position:relative;padding-top:26px}
.fx-arc-top{font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--green-ink);margin-bottom:10px}
.fx-arc-rail{height:2px;background:linear-gradient(90deg,var(--line) 0%,var(--green) 100%);
  border-radius:2px;margin-bottom:18px}
.fx-steps{display:grid;gap:10px}
.fx-step{position:relative;padding:10px 14px 10px 28px;border-radius:12px;background:#fff}
.fx-step:nth-child(2){margin-left:16px}
.fx-step:nth-child(3){margin-left:32px}
.fx-step:nth-child(4){margin-left:48px;background:var(--green-4);
  border:1px solid rgba(37,145,59,.34)}
.fx-step .d{position:absolute;left:9px;top:17px;width:9px;height:9px;border-radius:50%;
  background:var(--line);box-shadow:0 0 0 2px var(--line)}
.fx-step .d.on{background:var(--green);box-shadow:0 0 0 2px var(--green)}
.fx-step b{display:block;font-size:.9375rem;font-weight:600;color:var(--navy)}
.fx-step small{display:block;font-size:.8125rem;color:var(--ink-3);margin-top:2px;line-height:1.45}
@media(max-width:620px){.fx-step:nth-child(2),.fx-step:nth-child(3),.fx-step:nth-child(4){margin-left:0}}

/* --- the mission band --- */
.fx-heart{padding-block:clamp(44px,7vw,84px)}
.fx-heart .eyebrow{color:var(--green-ink);font-weight:600;letter-spacing:.09em;text-transform:uppercase;font-size:.75rem}
.fx-heart h2{max-width:16ch}
.fx-heart p.lede{max-width:64ch;margin-top:16px;color:#C2D3F5;line-height:1.68}
.fx-proofs{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:2px;
  margin-top:30px;background:var(--line-2);border:1px solid var(--line-2);border-radius:14px;overflow:hidden}
.fx-proof{background:#fff;padding:20px}
.fx-proof b{display:block;font-size:1rem;font-weight:600;color:var(--navy);margin-bottom:5px}
.fx-proof span{font-size:.875rem;color:var(--ink-3);line-height:1.55}
/* the hero carries no conversion ask, only a door for the other reader */
.o-hero-door{display:inline-flex;align-items:center;gap:9px;margin-top:30px;
  font-size:.9375rem;font-weight:600;color:#fff;text-decoration:none;
  background:var(--deep);border:1.5px solid var(--deep);border-radius:999px;padding:12px 22px;
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease}
.o-hero-door svg{width:17px;height:17px;flex:none;stroke:#fff;stroke-width:2.2;
  fill:none;stroke-linecap:round;stroke-linejoin:round}
/* the global a:hover turns link text navy, which on a navy pill is invisible */
.o-hero-door:hover{color:#fff;background:var(--navy);border-color:var(--navy);
  box-shadow:0 12px 26px -14px rgba(0,47,149,.7);transform:translateY(-1px)}

/* --- bolder section rhythm -------------------------------------------------
   The pale alternation read as fog. Tinted bands now carry a visible colour and
   a hard top edge, and the mission band is inverted outright: the one place on
   the page that should feel like someone raising their voice. */
.o-eyebrow,.fx-heart .eyebrow,.fx-turn .eyebrow{font-weight:700}

.fx-heart{background:var(--navy);color:#E4ECFB;border-top:3px solid var(--green)}
.fx-heart .eyebrow{color:var(--green)}
.fx-heart :is(h1,h2,h3){color:#fff}
.fx-heart h2 em{background:none;-webkit-text-fill-color:var(--green);color:var(--green)}
.fx-heart .lede,.fx-heart p{color:#C2D3F5}
.fx-heart .fx-proofs{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.14)}
.fx-heart .fx-proof{background:#07115C}
.fx-heart .fx-proof b{color:#fff}
.fx-heart .fx-proof span{color:#C2D3F5}
.fx-heart .fx-proof a{color:var(--green);text-decoration:underline;text-underline-offset:2px}
.fx-heart .fx-proof a:hover{color:#fff}

/* the institution turn follows the navy band, so it starts light and stays light */
:is(.bg-mist,.fx-turn,.bg-sprout) :is(a.textlink,p a:not(.btn),li a:not(.btn)){color:var(--deep)}

/* --- the institution turn --- */
.fx-turn{background:#fff;border-top:3px solid var(--green);
  padding-block:clamp(44px,7vw,84px)}
.fx-turn .eyebrow{color:var(--green-ink);font-weight:600;letter-spacing:.09em;text-transform:uppercase;font-size:.75rem}
.fx-turn h2{max-width:20ch}
.fx-turn p{max-width:62ch;margin-top:16px;color:var(--ink-2);line-height:1.68;font-size:1.0625rem}

/* --- tools / insights / advantages --- */
.fx-stack4{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2px;margin-top:30px;
  background:var(--line-2);border:1px solid var(--line-2);border-radius:16px;overflow:hidden}
.fx-col{background:#fff;padding:22px 19px}
.fx-col.last{background:var(--mist)}
.fx-col-lbl{font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:15px}
.fx-col-lbl.t1{color:var(--blue)}
.fx-col-lbl.t2{color:var(--deep)}
.fx-col-lbl.t3{color:var(--green-ink)}
.fx-col-lbl.t4{color:var(--ink-3)}
.fx-col ul{list-style:none;margin:0;padding:0}
.fx-col li{font-size:.8125rem;color:var(--ink-3);line-height:1.55;padding:12px 0;border-top:1px solid var(--line-2)}
.fx-col li:first-child{border-top:0;padding-top:0}
.fx-col li b{display:block;font-size:.875rem;font-weight:600;color:var(--navy);margin-bottom:3px}
.fx-col li em{font-style:normal;color:var(--green-ink);font-weight:600}
/* The three columns are what the institution gets; the band under them is the
   argument, which reads as prose and would leave a ragged fourth column. */
.fx-ask{background:var(--mist);border:1px solid var(--line-2);border-radius:16px;
  padding:24px 22px 26px;margin-top:2px}
.fx-ask-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px 28px}
.fx-ask-grid b{display:block;font-size:.9375rem;font-weight:600;color:var(--navy);margin-bottom:5px}
.fx-ask-grid p{margin:0;font-size:.8125rem;line-height:1.6;color:var(--ink-3)}
/* The mission and institution bands run two-up so the right half carries
   meaning instead of air. */
.fx-heart .o-hero-grid,.fx-turn .o-hero-grid{align-items:start}
.fx-proofs.stacked{grid-template-columns:minmax(0,1fr);margin-top:0}
.fx-peek{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
.fx-peek-lbl{font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);padding:15px 18px;background:var(--mist);border-bottom:1px solid var(--line);margin:0}
.fx-peek-row{display:block;padding:15px 18px;text-decoration:none;border-top:1px solid var(--line-2)}
.fx-peek-row:first-of-type{border-top:0}
.fx-peek-row b{display:block;font-size:.9375rem;font-weight:600;color:var(--navy);margin-bottom:3px}
.fx-peek-row span{display:block;font-size:.8125rem;color:var(--ink-3);line-height:1.5}
.fx-peek-row:hover{background:var(--mist)}
.fx-peek-row.last{background:var(--mist)}
.fx-peek-row.last:hover{background:var(--line-2)}


/* ---- contrast corrections, from a WCAG sweep of real rendered pages ----
   --green-ink was 4.04:1 on white and 3.34:1 on the mint tint: both fail AA for
   body-sized text, and it is used for labels all over the site. Darkened to
   #1A6B2C (6.6:1 on white, 5.5:1 on mint). Green on navy needs the opposite
   move, so the header door and anything else on a dark ground uses a light step. */
.head-actions .fi-door{color:#9BDCA6;border-color:rgba(155,220,166,.45)}
.head-actions .fi-door:hover{background:rgba(155,220,166,.14);border-color:#9BDCA6}
.bg-navy .fx-lg-fin,.cta-band .fx-lg-fin{color:#9BDCA6}
/* Anything inside the light bank band inherits the light-ground palette. */
.bank-box :is(p,li,span,em,small):not(.btn):not(.btn *){color:inherit}
.bank-box :is(h2,h3,h4) , .bank-box b:not(.btn *){color:var(--ink)}
.bank-box{color:var(--ink-2)}
.bank-box .btn.light,.bank-box .btn.light *{color:#fff}
/* Text sitting on the navy hero band needs the light palette: these were
   inheriting the light-ground colours and landing at 1.1:1 and 3.1:1. */
.page-hero .features .feature h3,.hero .features .feature h3,
.bg-navy .features .feature h3{color:#fff}
.page-hero .features .feature p,.hero .features .feature p,
.bg-navy .features .feature p{color:#C9D5F7}
.page-hero .muted a,.hero .muted a{color:#9BDCA6}
.page-hero .muted a:hover,.hero .muted a:hover{color:#C6ECCD}
.page-hero .muted,.hero .muted{color:#BCC8EC}
/* The SOC 2 seal: white text failed on the light end of the brand gradient
   (2.2:1). Darkening the gradient's mid and end stops keeps the brand sweep
   and puts white above 4.5:1 across the whole seal. */
.tc-seal .seal{background:linear-gradient(92deg,#002F95 0%,#2E6BDB 45%,#1A6B2C 100%)}
.tc-seal .seal span{color:#fff}
/* ---- the grove, ported from learn.finli.com ----
   Sits on the mist tint it was drawn against, so its white elements read. */
/* No panel: the illustration sits straight on the page and the colour does the work. */
.fx-grove{min-width:0}
.fx-grove-svg{display:block;width:100%;max-width:580px;margin:0 auto;height:auto}
.fx-grove-cap{margin-top:12px;font-size:.8125rem;line-height:1.55;color:var(--ink-3);
  text-align:center;max-width:58ch;margin-inline:auto}
.fb{animation:hvFloat 4.5s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.fb2{animation-delay:1.4s}
.fb3{animation-delay:2.6s}
@media (prefers-reduced-motion:reduce){.fb{animation:none}}

/* ---------- Ask Finli (interactive intake, ask-finli-spec.md) ----------
   Not live chat: a stepped question form that answers from the knowledge
   centre and hands to a person when it cannot. Minimised it is a mark in the
   corner; expanded it is a panel. Every class is ask- prefixed. */
.ask-launch{position:fixed;right:clamp(14px,2.4vw,26px);z-index:70;
  bottom:calc(clamp(14px,2.4vw,26px) + env(safe-area-inset-bottom,0px));
  display:inline-flex;align-items:center;gap:10px;font:inherit;font-size:.9375rem;font-weight:600;
  color:#fff;background:var(--deep);border:1.5px solid var(--deep);border-radius:999px;
  padding:12px 20px 12px 14px;cursor:pointer;
  box-shadow:0 16px 34px -14px rgba(0,12,102,.6);
  transition:background .15s ease,transform .15s ease,box-shadow .15s ease}
.ask-launch:hover{background:var(--navy);border-color:var(--navy);color:#fff;transform:translateY(-1px)}
.ask-launch-mark{width:26px;height:26px;border-radius:50%;background:var(--green);display:grid;place-items:center;flex:none}
.ask-launch-mark svg{width:15px;height:15px;fill:none;stroke:#06230D;stroke-width:1.9;stroke-linejoin:round}
.ask-launch[aria-expanded="true"]{display:none}
.ask-launch.is-min{padding:12px;gap:0}
.ask-launch.is-min .ask-launch-label{display:none}

.ask-panel{position:fixed;right:clamp(14px,2.4vw,26px);z-index:71;
  bottom:calc(clamp(14px,2.4vw,26px) + env(safe-area-inset-bottom,0px));
  width:min(380px,calc(100vw - 28px));max-height:min(620px,calc(100vh - 96px));
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:20px;overflow:hidden;box-shadow:0 30px 70px -24px rgba(0,12,102,.5)}
.ask-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  background:var(--navy);color:#fff;padding:16px 16px 15px 20px}
.ask-kicker{margin:0;font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green)}
.ask-title{margin:3px 0 0;font-size:1.125rem;font-weight:700;color:#fff;letter-spacing:-.01em}
.ask-close{background:none;border:0;color:#C2D3F5;cursor:pointer;padding:4px;border-radius:8px;flex:none}
.ask-close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.ask-close:hover{color:#fff;background:rgba(255,255,255,.12)}
.ask-body{padding:18px 20px 6px;overflow-y:auto;flex:1}
.ask-h3{font-size:1rem;font-weight:700;color:var(--navy);margin:0 0 12px}
.ask-sub{margin:-6px 0 14px;font-size:.875rem;color:var(--ink-3)}
.ask-label{display:block;font-size:.84rem;font-weight:600;color:var(--navy);margin:14px 0 6px}
.ask-body .ask-step:first-child .ask-label:first-child{margin-top:0}
.ask-opt{font-weight:400;color:var(--ink-3)}
.ask-panel :is(textarea,input){width:100%;font:inherit;font-size:.9375rem;color:var(--ink);
  border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff;resize:vertical}
.ask-panel :is(textarea,input):focus-visible{outline:2.5px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.ask-choices{display:flex;flex-wrap:wrap;gap:8px}
.ask-choices-col{flex-direction:column}
.ask-choice{font:inherit;font-size:.9rem;font-weight:600;color:var(--navy);text-align:left;
  background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:10px 16px;cursor:pointer;
  transition:border-color .15s ease,background .15s ease,color .15s ease}
.ask-choice:hover{border-color:var(--green-ink);background:var(--mist)}
.ask-choice[aria-pressed="true"]{background:var(--green-ink);border-color:var(--green-ink);color:#fff}
.ask-btn{font:inherit;font-size:.9375rem;font-weight:600;color:#fff;background:var(--deep);
  border:1.5px solid var(--deep);border-radius:999px;padding:11px 22px;margin-top:16px;cursor:pointer;width:100%}
.ask-btn:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.ask-btn[disabled]{opacity:.6;cursor:default}
.ask-back{font:inherit;font-size:.84rem;font-weight:600;color:var(--ink-3);background:none;border:0;
  padding:10px 0 0;cursor:pointer;display:block}
.ask-back:hover{color:var(--navy);text-decoration:underline}
.ask-err{margin:8px 0 0;font-size:.82rem;color:#A3301A}
.ask-answer{font-size:.9375rem;line-height:1.6;color:var(--ink-2)}
.ask-answer p{margin:0 0 10px}
.ask-src{display:block;font-size:.84rem;font-weight:600;color:var(--deep);margin-top:6px}
.ask-src-h{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);margin:16px 0 4px}
.ask-done{font-size:.9375rem;line-height:1.6;color:var(--ink-2)}
.ask-done b{display:block;color:var(--navy);font-size:1rem;margin-bottom:6px}
.ask-foot{margin:0;padding:12px 20px 16px;font-size:.75rem;color:var(--ink-3);border-top:1px solid var(--line-2)}
.ask-foot a{color:var(--deep)}
@media (max-width:520px){
  .ask-panel{right:8px;left:8px;width:auto;max-height:calc(100vh - 76px);border-radius:18px}
  .ask-launch{right:12px}
}
@media (prefers-reduced-motion:reduce){.ask-launch{transition:none}}
@media print{.ask-launch,.ask-panel{display:none}}

/* ---------- explanatory figures (About) ---------- */
.fig{margin:30px auto 0;max-width:820px}
.narrow+.fig{margin-top:26px}
.sig{margin-top:22px;font-weight:600;color:var(--ink);font-size:1rem}

.fig-bridge svg{display:block;width:100%;height:auto}
.fig-ends{display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;gap:12px;margin-top:10px}
.fig-ends span{font-weight:600;color:var(--ink);font-size:.95rem}
.fig-ends span:last-child{text-align:right}
.fig-ends b{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:600;white-space:nowrap}

.fig-flow{display:grid;gap:14px;background:var(--mist);border:1px solid var(--line);
  border-radius:var(--radius);padding:24px}
.fig-flow.is-closed{background:var(--green-4);border-color:#BCE3C0}
.ff-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:14px}
.ff-node{background:#fff;border:1px solid var(--line);border-radius:var(--radius-s);
  padding:14px 16px;display:flex;flex-direction:column;justify-content:center;gap:4px}
.ff-node b{font-weight:600;line-height:1.35;font-size:1rem;color:var(--ink)}
.ff-node small{color:var(--ink-2);font-size:.84rem;line-height:1.45}
.ff-node.is-grey{background:transparent;border-style:dashed;border-color:#C6D2E6}
.ff-node.is-grey b,.ff-node.is-grey small{color:var(--ink-3)}
.ff-node.is-lift{border-color:var(--green-ink);box-shadow:0 10px 22px -16px rgba(31,122,53,.6)}
.ff-arrow{position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:6px;min-width:150px;max-width:190px;text-align:center;
  padding-bottom:18px}
.ff-arrow span{font-size:.8rem;line-height:1.35;color:var(--ink-3)}
.ff-arrow::after{content:"";position:absolute;left:0;right:9px;bottom:7px;height:2px;
  border-radius:2px;background:var(--deep)}
.ff-arrow::before{content:"";position:absolute;right:0;bottom:3px;width:0;height:0;
  border-top:5px solid transparent;border-bottom:5px solid transparent;
  border-left:10px solid var(--deep)}
.ff-arrow.is-away::after{background:var(--ink-3)}
.ff-arrow.is-away::before{border-left-color:var(--ink-3)}
.ff-arrow.is-back::after{background:var(--green-ink)}
.ff-arrow.is-back::before{border-left-color:var(--green-ink)}
.ff-break{margin:0;text-align:center;font-size:.82rem;color:var(--ink-3);
  border-top:2px dashed #C6D2E6;padding-top:12px}
.ff-loop{margin:0;text-align:center;font-size:.88rem;font-weight:500;color:var(--green-ink);
  border-top:2px solid #BCE3C0;padding-top:12px}

@media(max-width:700px){
  .ff-row{grid-template-columns:1fr;gap:10px}
  .ff-arrow{min-width:0;max-width:none;padding:22px 0 6px}
  .ff-arrow span{text-align:center}
  .ff-arrow::after{left:50%;right:auto;top:2px;bottom:auto;width:2px;height:14px;
    transform:translateX(-50%)}
  .ff-arrow::before{left:50%;right:auto;top:14px;bottom:auto;transform:translateX(-50%);
    border-left:5px solid transparent;border-right:5px solid transparent;
    border-top:9px solid var(--deep);border-bottom:0}
  .ff-arrow.is-away::before{border-top-color:var(--ink-3);border-left-color:transparent}
  .ff-arrow.is-back::before{border-top-color:var(--green-ink);border-left-color:transparent}
  .fig-ends{grid-template-columns:1fr;gap:4px;text-align:center}
  .fig-ends span:last-child{text-align:center}
}
}

/* =====================================================================
   Calculators. Built to be used, not glanced at: a dense input rail,
   named results, and the underlying schedule a banker will actually read.
   ===================================================================== */
.tool{display:grid;grid-template-columns:288px minmax(0,1fr);gap:24px;align-items:start}
.tool-rail{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;position:sticky;top:92px}
.tg{border-top:1px solid var(--line-2)}
.tg:first-child{border-top:0}
.tg>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;padding:11px 14px;font-size:.81rem;font-weight:600;color:var(--deep);background:var(--mist)}
.tg>summary::-webkit-details-marker{display:none}
.tg>summary::after{content:"";margin-left:auto;width:7px;height:7px;border-right:1.8px solid var(--ink-3);border-bottom:1.8px solid var(--ink-3);transform:rotate(45deg) translateY(-2px);transition:transform .18s ease}
.tg[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.tg>summary .i{width:17px;height:17px;color:var(--blue)}
.tg-body{padding:2px 14px 12px}

.tf{padding:10px 0;border-top:1px solid var(--line-2)}
.tf:first-child{border-top:0}
.tf label{display:flex;align-items:center;gap:6px;font-size:.79rem;font-weight:500;color:var(--ink-2);margin-bottom:5px;line-height:1.35}
.tf .help{width:16px;height:16px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink-3);font-size:.64rem;font-weight:700;line-height:1;display:grid;place-items:center;cursor:help;flex:none;padding:0}
.tf .help:hover,.tf .help:focus-visible{border-color:var(--blue);color:var(--blue)}
.tf-hint{margin:0 0 8px;font-size:.78rem;line-height:1.5;color:var(--ink-3);background:var(--mist);border-radius:9px;padding:8px 10px}
.tf-in{display:flex;align-items:center;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.tf-in:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(53,92,244,.14)}
.tf-in .u{font-size:.76rem;color:var(--ink-3);padding:0 9px;flex:none;white-space:nowrap}
.tf-in .u.pre{border-right:1px solid var(--line-2);background:var(--mist);align-self:stretch;display:flex;align-items:center}
.tf-in .u.post{border-left:1px solid var(--line-2);background:var(--mist);align-self:stretch;display:flex;align-items:center}
.tf-in input{flex:1;min-width:0;border:0;outline:0;font:inherit;font-size:.88rem;font-weight:600;color:var(--ink);padding:7px 10px;background:transparent;font-variant-numeric:tabular-nums}
.tf input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:3px;border-radius:99px;background:var(--line);margin-top:8px;outline:0}
.tf input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:var(--blue);border:3px solid #fff;box-shadow:0 1px 4px rgba(11,18,54,.3);cursor:grab}
.tf input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--blue);border:3px solid #fff;box-shadow:0 1px 4px rgba(11,18,54,.3);cursor:grab}
.tf input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(53,92,244,.3)}
.tf select{width:100%;font:inherit;font-size:.9rem;font-weight:500;color:var(--ink);padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:#fff}
.tool-reset{display:block;width:100%;border:0;border-top:1px solid var(--line-2);background:#fff;color:var(--ink-3);font:inherit;font-size:.8rem;padding:12px;cursor:pointer}
.tool-reset:hover{color:var(--blue);background:var(--mist)}

.tr{min-width:0;display:grid;gap:18px}
.tr-head{background:var(--deep);background-image:linear-gradient(140deg,rgba(255,255,255,.08),rgba(0,0,0,.1));color:#fff;border-radius:18px;padding:24px 26px}
.tr-head .verdict{font-size:1.02rem;font-weight:500;line-height:1.5;margin:0 0 18px;color:#DCE7FF;max-width:62ch}
.tr-head .verdict b{color:#fff;font-weight:600}
.tr-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px}
.tr-fig small{display:block;font-size:.78rem;color:#A9C0F0;margin-bottom:3px}
.tr-fig b{display:block;font-size:1.72rem;font-weight:700;letter-spacing:-.035em;font-variant-numeric:tabular-nums;line-height:1.15}
.tr-fig em{font-style:normal;display:block;font-size:.76rem;color:#A9C0F0;margin-top:3px}
.tr-fig.good b{color:#9BE8A6}
.tr-fig.bad b{color:#FFC2A3}

.tr-panel{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.tr-tabs{display:flex;gap:2px;padding:10px 12px;border-bottom:1px solid var(--line-2);align-items:center}
.tr-tabs button{font:inherit;font-size:.84rem;font-weight:500;color:var(--ink-3);background:transparent;border:0;border-radius:9px;padding:7px 15px;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.tr-tabs button .i{width:15px;height:15px}
.tr-tabs button[aria-selected=true]{background:var(--deep);color:#fff}
.tr-tabs .sp{margin-left:auto;display:flex;gap:2px}
.tr-view{padding:20px 22px 22px}
.tr-view[hidden]{display:none}
.tr-chart svg{width:100%;height:auto;display:block}
.tr-legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:14px;font-size:.8rem;color:var(--ink-3)}
.tr-legend span{display:inline-flex;align-items:center;gap:7px}
.tr-legend i{width:11px;height:11px;border-radius:3px;flex:none}
.tr-legend i.line{height:3px;border-radius:99px}

.tr-table{width:100%;border-collapse:collapse;font-size:.86rem;font-variant-numeric:tabular-nums}
.tr-table th{background:var(--deep);color:#fff;font-weight:600;font-size:.79rem;text-align:right;padding:10px 12px;white-space:nowrap;position:sticky;top:0}
.tr-table th:first-child{text-align:left;border-radius:9px 0 0 0}
.tr-table th:last-child{border-radius:0 9px 0 0}
.tr-table td{padding:9px 12px;text-align:right;border-bottom:1px solid var(--line-2);color:var(--ink-2)}
.tr-table td:first-child{text-align:left;font-weight:500;color:var(--ink)}
.tr-table tbody tr:nth-child(even) td{background:var(--mist)}
.tr-table td.neg{color:#A63B10}
.tr-scroll{max-height:420px;overflow:auto;border:1px solid var(--line-2);border-radius:10px}

.tr-rows{display:grid;gap:0}
.tr-row{display:flex;justify-content:space-between;gap:20px;padding:11px 0;border-top:1px solid var(--line-2);font-size:.92rem}
.tr-row:first-child{border-top:0}
.tr-row .k{color:var(--ink-3)}
.tr-row .v{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.tr-row .v.neg{color:#A63B10}

.tr-foot{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:18px}
.tr-send,.tr-embed{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px 22px}
.tr-send h3,.tr-embed h3{margin:0 0 6px;font-size:1.02rem}
.tr-send p,.tr-embed p{margin:0 0 14px;font-size:.88rem;color:var(--ink-3);line-height:1.55}
.tr-send .row{display:flex;gap:9px}
.tr-send input{flex:1;min-width:0;font:inherit;font-size:.9rem;padding:10px 13px;border:1px solid var(--line);border-radius:10px}
.tr-send button,.tr-embed button{font:inherit;font-size:.86rem;font-weight:600;border:0;border-radius:10px;padding:10px 17px;background:var(--deep);color:#fff;cursor:pointer;white-space:nowrap}
.tr-send .ok{margin:12px 0 0;font-size:.85rem;color:var(--green-ink);font-weight:500}
.tr-embed code{display:block;background:var(--mist);border:1px solid var(--line-2);border-radius:10px;padding:12px;font-size:.74rem;line-height:1.5;color:var(--ink-2);word-break:break-all;margin-bottom:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.tool-note{margin-top:18px;font-size:.82rem;color:var(--ink-3);line-height:1.6}

@media (max-width:980px){
  .tool{grid-template-columns:minmax(0,1fr)}
  .tool-rail{position:static}
  .tr-foot{grid-template-columns:minmax(0,1fr)}
}
@media print{
  .site-head,.site-foot,.tr-tabs,.tr-send,.tr-embed,.tool-reset,.crumbs,.btn-row{display:none!important}
  .tool{grid-template-columns:260px 1fr}
  .tr-view[hidden]{display:block!important}
}


/* learn.finli.com token names, mapped onto the finli.com 2.0 palette */
:root{--muted:var(--ink-3);--navy-2:#002F95;--navy-3:#3C85F8;
  --green-deep:var(--green-ink);--gold:var(--blue);--green-lt:#85D18E}
/* ---------- industry guides ---------- */
.gfam{margin:0 0 34px}
.gfam:first-of-type{margin-top:-6px}
.gfam>h2{font-size:1.18rem;margin:0 0 4px}
.gfam>p{color:var(--muted);font-size:.93rem;margin:0 0 14px;max-width:72ch}
.ghead{background:linear-gradient(118deg,var(--navy) 0%,var(--navy-2) 58%,var(--navy-3) 100%);
  color:#fff;border-radius:18px;padding:30px 32px;margin:0 0 30px}
.ghead .eyebrow{color:var(--green-lt);margin-bottom:10px}
.ghead h1{color:#fff;margin:0 0 12px;font-size:clamp(1.8rem,3.6vw,2.6rem)}
.ghead p{color:rgba(255,255,255,.88);margin:0;max-width:62ch;font-size:1.02rem}
.gsec{padding:0 0 34px;max-width:980px}
.gsec>h2{font-size:1.3rem;margin:0 0 6px}
.gsec>.gsub{color:var(--muted);font-size:.92rem;margin:0 0 16px;max-width:70ch}
.needs{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.need{background:#fff;border:1px solid var(--line);border-left:3px solid var(--green);border-radius:12px;padding:17px 19px}
.need b{display:block;color:var(--navy);font-size:1rem;margin-bottom:6px}
.need span{display:block;color:#4A5160;font-size:.9rem;line-height:1.55}
.flow{counter-reset:fl;display:grid;gap:0;border-left:2px solid #DCE8F8;margin-left:9px}
.flow li{list-style:none;counter-increment:fl;position:relative;padding:0 0 20px 26px}
.flow li:last-child{padding-bottom:0}
.flow li::before{content:counter(fl);position:absolute;left:-13px;top:0;width:24px;height:24px;border-radius:50%;
  background:var(--navy);color:#fff;font-size:.74rem;font-weight:700;display:grid;place-items:center}
.flow b{display:block;color:var(--navy);font-size:.97rem;margin-bottom:3px}
.flow span{display:block;color:#4A5160;font-size:.9rem;line-height:1.55}
.starters{margin:0;padding:0;list-style:none;max-width:70ch}
.starters li{border-top:1px solid var(--line);padding:14px 0 14px 30px;position:relative;color:var(--navy);
  font-size:1.02rem;font-weight:500;line-height:1.5}
.starters li::before{content:"“";position:absolute;left:0;top:12px;font-size:1.9rem;line-height:1;
  color:var(--green);font-family:Georgia,serif}
.ginst{background:var(--mist);border:1px solid #DCE8F8;border-radius:14px;padding:22px 24px}
.ginst p{margin:0 0 14px;color:#39414F;line-height:1.6}
.ginst h4{font-size:.8rem;font-weight:700;color:var(--navy);margin:0 0 9px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.chips span{background:#fff;border:1px solid #CFE0F4;color:var(--navy-2);border-radius:999px;
  padding:6px 14px;font-size:.85rem;font-weight:500}
.gnote{font-size:.85rem;color:var(--muted);line-height:1.55;margin:14px 0 0;border-top:1px solid #DCE8F8;padding-top:13px}
.gcta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:6px}
@media(max-width:620px){.ghead{padding:24px 20px}.gsec{padding-bottom:28px}}
.toolbar{display:flex;gap:8px;justify-content:flex-end;margin:0 0 12px}
.toolbar button{font:inherit;font-size:.82rem;font-weight:500;color:var(--muted);background:#fff;
  border:1px solid var(--line);border-radius:999px;padding:7px 15px;cursor:pointer}
.toolbar button:hover{color:var(--navy-2);border-color:var(--navy-2)}

.sec{padding:40px 0 0;max-width:78ch}
.sec h2{font-size:1.35rem;margin:0 0 10px}
.sec h3{font-size:1.06rem;margin:24px 0 6px}
.sec p{color:#4A5160;margin:0 0 12px}
.faq details{border-top:1px solid var(--line);padding:14px 0}
.faq summary{cursor:pointer;font-weight:600;color:var(--navy);list-style:none;display:flex;gap:12px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;color:var(--muted);font-weight:400;font-size:1.2rem;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq p{margin:10px 0 0;color:#4A5160}
.rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:14px}
.rel a{display:flex;gap:11px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:15px;text-decoration:none;color:inherit}
.rel a:hover{border-color:var(--navy-2);box-shadow:0 6px 18px -12px rgba(0,16,106,.4)}
.rel .ic{width:20px;height:20px;color:var(--navy-2);flex:none;margin-top:2px}
.rel b{display:block;font-size:.95rem;color:var(--navy)}
.rel span{display:block;font-size:.84rem;color:var(--muted);margin-top:3px;line-height:1.45}
.foot2{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:18px;margin:44px 0 0}
.foot2>div{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px}
.foot2 h3{margin:0 0 6px;font-size:1.02rem}
.foot2 p{margin:0 0 13px;font-size:.88rem;color:var(--muted);line-height:1.55}
.foot2 .row{display:flex;gap:9px}
.foot2 input{flex:1;min-width:0;font:inherit;font-size:.9rem;padding:10px 12px;border:1px solid var(--line);border-radius:9px}
.foot2 button{font:inherit;font-size:.86rem;font-weight:600;border:0;border-radius:9px;padding:10px 16px;
  background:var(--navy-2);color:#fff;cursor:pointer;white-space:nowrap}
.foot2 code{display:block;background:var(--mist);border:1px solid #DCE8F8;border-radius:9px;padding:12px 13px;
  font-size:.72rem;line-height:1.6;color:#3B4456;margin-bottom:12px;white-space:pre;overflow:auto;max-height:230px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;-webkit-overflow-scrolling:touch}

/* the embed customizer */
.embedbox .ecfg{display:grid;grid-template-columns:1fr 1fr;gap:11px 14px;margin:0 0 14px}
.embedbox .ecfg label{display:flex;flex-direction:column;gap:5px;font-size:.78rem;font-weight:500;color:#4A5160}
.embedbox .ecfg label.wide{grid-column:1/-1}
.embedbox .ecfg label.chk{grid-column:1/-1;flex-direction:row;align-items:center;gap:9px;font-weight:400;
  color:var(--muted);font-size:.8rem}
.embedbox .ecfg input[type=text]{font:inherit;font-size:.85rem;padding:8px 11px;border:1px solid var(--line);
  border-radius:9px;background:#fff;color:var(--ink);width:100%;min-width:0}
.embedbox .ecfg input[type=text]:focus{outline:none;border-color:var(--navy-2);box-shadow:0 0 0 3px rgba(0,47,149,.12)}
.embedbox .ecfg input[type=checkbox]{width:17px;height:17px;accent-color:var(--navy-2);flex:none}
.embedbox .swatchrow{display:flex;align-items:center;gap:8px}
.embedbox .swatchrow input[type=color]{-webkit-appearance:none;appearance:none;width:36px;height:36px;flex:none;
  border:1px solid var(--line);border-radius:9px;background:none;padding:3px;cursor:pointer}
.embedbox .swatchrow input[type=color]::-webkit-color-swatch{border:0;border-radius:6px}
.embedbox .swatchrow input[type=color]::-moz-color-swatch{border:0;border-radius:6px}
.embedbox .swatchrow input[type=text]{flex:1;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.embedbox .erow{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.embedbox .epreview{font-size:.86rem;font-weight:600;color:var(--navy-2);text-decoration:none}
.embedbox .epreview:hover{text-decoration:underline}
@media(max-width:700px){.embedbox .ecfg{grid-template-columns:1fr}.embedbox .erow{flex-direction:column;align-items:stretch}
  .embedbox .erow button{width:100%}.embedbox .epreview{text-align:center}}
.disc{margin:34px 0 60px;font-size:.82rem;color:var(--muted);line-height:1.6;max-width:78ch}

/* library index */
.libfilter{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 26px}
.libfilter button{font:inherit;font-size:.88rem;font-weight:500;color:var(--muted);background:#fff;
  border:1px solid var(--line);border-radius:99px;padding:8px 17px;cursor:pointer}
.libfilter button.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.libgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px;margin-bottom:56px}
.libcard{display:flex;flex-direction:column;gap:9px;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:20px;text-decoration:none;color:inherit}
.libcard:hover{border-color:var(--navy-2);box-shadow:0 10px 26px -18px rgba(0,16,106,.5)}
.libcard .ic{width:22px;height:22px;color:var(--navy-2)}
.libcard .tag{font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--green-deep)}
.libcard b{font-size:1.04rem;color:var(--navy);line-height:1.3}
.libcard span{font-size:.88rem;color:var(--muted);line-height:1.5}
.libcard em{font-style:normal;margin-top:auto;padding-top:8px;font-size:.86rem;font-weight:600;color:var(--navy-2)}

@media (max-width:980px){
  .tbody{grid-template-columns:minmax(0,1fr)}
  .inputs{border-right:0;border-bottom:1px solid var(--line)}
  .mstick{position:static}
  .arow{grid-template-columns:minmax(0,1fr);gap:20px}
  .aband .say{border-left:0;border-top:1px solid rgba(255,255,255,.2);padding-left:0;padding-top:18px}
  .foot2{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  .aband{padding:20px}.inputs,.mathcol{padding:20px}
  .tool .grid2{grid-template-columns:minmax(0,1fr)}
  .ctl{display:block}.ctl .inwrap{width:100%}.ctl .tf-range{margin-top:7px}
  .afig{grid-template-columns:minmax(0,1fr);gap:16px}
  .tabs{grid-template-columns:minmax(0,1fr)!important;border-radius:12px}.tabs button{border-radius:8px}
}
@media print{header,footer,.toolbar,.foot2,.libfilter,.crumbs,.sec,.disc{display:none!important}.tool{grid-template-columns:250px 1fr}}