/* =============================================================================
   app.css — component library for the funding portal demo.
   Section A: base            Section B: public site
   Section C: portal shell    Section D: wizard + approval + documents
============================================================================= */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx2);font-family:var(--ff);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit}
h1,h2,h3,h4,h5{margin:0;color:var(--tx);letter-spacing:-.025em;line-height:1.1;font-weight:800}
p{margin:0 0 1em}
.mono{font-family:var(--fm);font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--co);outline-offset:3px;border-radius:4px}
.shell{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}

.skip{position:absolute;left:12px;top:-60px;background:var(--co);color:var(--co-ink);
  padding:10px 18px;border-radius:var(--r-pill);font-weight:800;z-index:99;transition:top .15s}
.skip:focus{top:12px}

/* demo-only strip. Deleted at phase 9; it is not part of the product. */
.demobar{background:var(--am);color:#2A1B00;font-size:.78rem;font-weight:700;
  padding:9px var(--pad);display:flex;gap:14px;align-items:center;
  flex-wrap:wrap;position:relative;z-index:6}
.demobar a{text-decoration:underline;font-weight:800}
.demobar .dbx{margin-left:auto;font-family:var(--fm);font-size:.7rem;opacity:.72}
.demobar select{background:#2A1B00;color:var(--am);border:0;border-radius:5px;
  padding:3px 7px;font-size:.72rem;font-weight:700}

/* ========================================================== B. PUBLIC SITE */
.hero{position:relative;overflow:hidden;background:var(--bg);padding-bottom:clamp(40px,7vw,84px)}
.aur{position:absolute;border-radius:50%;filter:blur(90px);opacity:.45;pointer-events:none}
.a1{width:clamp(320px,42vw,620px);aspect-ratio:1.15;background:var(--co);
  top:-16%;left:-8%;animation:fl1 15s ease-in-out infinite alternate}
.a2{width:clamp(300px,38vw,560px);aspect-ratio:1.2;background:#3B6FF0;
  top:-12%;right:-6%;animation:fl2 19s ease-in-out infinite alternate}
.a3{width:clamp(260px,32vw,480px);aspect-ratio:1.2;background:var(--mt);
  bottom:-24%;left:36%;opacity:.24;animation:fl1 23s ease-in-out infinite alternate-reverse}
@keyframes fl1{to{transform:translate(90px,60px) scale(1.18)}}
@keyframes fl2{to{transform:translate(-80px,70px) scale(1.12)}}

.navwrap{position:relative;z-index:3;padding-top:20px}
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.11);
  border-radius:var(--r-pill);padding:11px 12px 11px 26px;backdrop-filter:blur(10px)}
.lg{font-weight:800;letter-spacing:-.03em;font-size:1.25rem;color:#fff;flex:none}
.lg b{color:var(--co)}
.lg small{font-family:var(--fm);font-size:.5em;font-weight:500;letter-spacing:.16em;
  color:var(--tx2);margin-left:8px;vertical-align:middle;text-transform:uppercase}
.nlinks{display:flex;gap:30px;font-size:.875rem;color:#B4BCC6;font-weight:500}
.nlinks a:hover{color:#fff}
.nbtns{display:flex;gap:10px;align-items:center;flex:none}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:800;border-radius:var(--r-pill);white-space:nowrap;
  transition:transform .12s ease,background .15s ease,border-color .15s ease,opacity .15s}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn-co{background:var(--co);color:var(--co-ink);padding:12px 24px;font-size:.9rem}
.btn-co:hover{background:var(--co2)}
.btn-gh{border:1px solid rgba(255,255,255,.26);color:#E7EAEE;padding:11px 23px;font-size:.9rem;font-weight:700}
.btn-gh:hover{border-color:rgba(255,255,255,.5)}
.btn-lg{padding:15px 30px;font-size:1rem}
.btn-sm{padding:9px 18px;font-size:.8rem}

.hin{position:relative;z-index:2;display:grid;grid-template-columns:1.2fr .9fr;
  gap:clamp(28px,5vw,60px);align-items:center;padding-top:clamp(48px,8vw,96px)}
.hin h1{color:#fff;font-size:clamp(2.4rem,5.6vw,4.1rem);line-height:1.02;margin-bottom:20px;text-wrap:balance}
.hin h1 em{font-style:normal;color:var(--co)}
.hlead{color:var(--tx2);font-size:clamp(1rem,1.5vw,1.125rem);max-width:46ch;margin-bottom:28px;line-height:1.65}
.hbtns{display:flex;gap:12px;flex-wrap:wrap}
.stats{display:flex;gap:clamp(24px,4vw,52px);margin-top:clamp(30px,5vw,52px);flex-wrap:wrap}
.stat b{display:block;color:#fff;font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:800;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.stat span{display:block;margin-top:7px;font-size:.68rem;color:#79828D;
  letter-spacing:.12em;text-transform:uppercase;font-weight:600}

.gcard{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r-lg);padding:22px;backdrop-filter:blur(6px)}
.gcard .plabel{color:#79828D;margin-bottom:14px}
.gline{display:flex;justify-content:space-between;gap:14px;font-size:.875rem;color:#C6CDD5;
  padding:11px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.gline:last-child{border-bottom:0}
.gline b{color:#fff;font-family:var(--fm);font-weight:500}
.gline b.mt{color:var(--mt)}
.gbar{height:7px;background:rgba(255,255,255,.1);border-radius:4px;overflow:hidden;margin:14px 0 8px}
.gbar i{display:block;height:100%;background:linear-gradient(90deg,var(--co),var(--am));border-radius:4px}

.mq{background:var(--bg);border-top:1px solid rgba(255,255,255,.07);
  padding:26px 0 30px;overflow:hidden;position:relative;z-index:2}
.mqL{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:#6C7683;
  text-align:center;margin-bottom:20px;font-weight:600}
.mqT{display:flex;gap:44px;width:max-content;animation:sl 30s linear infinite}
@keyframes sl{to{transform:translateX(-50%)}}
.pl{display:flex;align-items:center;justify-content:center;width:150px;height:40px;flex:none;
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r-sm);font-size:.6rem;
  letter-spacing:.14em;color:#6C7683;font-family:var(--fm)}

.sect{padding:clamp(52px,8vw,96px) 0}
.sect-h{max-width:56ch;margin-bottom:clamp(28px,4vw,44px)}
.eyebrow{font-family:var(--fm);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--co);margin:0 0 14px}
.sect-h h2{font-size:clamp(1.7rem,3.4vw,2.6rem);margin-bottom:14px;text-wrap:balance}
.sect-h p{color:var(--tx2);font-size:1.05rem;margin:0}

.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.bc{background:var(--el);border:1px solid var(--br);border-radius:var(--r-lg);
  padding:24px;position:relative;overflow:hidden;transition:border-color .18s,transform .18s}
.bc:hover{border-color:#3A434F;transform:translateY(-2px)}
.bc b{display:block;color:#fff;font-size:1.05rem;font-weight:700;margin-bottom:8px;letter-spacing:-.015em}
.bc span{display:block;color:var(--tx2);font-size:.875rem;line-height:1.6}
.bc .tag{position:absolute;top:20px;right:20px;font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--co);border:1px solid rgba(255,107,74,.4);
  border-radius:var(--r-pill);padding:3px 10px;font-weight:700}
.bc.wide{grid-column:span 2}
.bc.hot{background:linear-gradient(140deg,#26130A,var(--el) 62%);border-color:rgba(255,107,74,.34)}
.bc .go{display:inline-block;margin-top:14px;color:var(--co);font-size:.8rem;font-weight:700}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:s}
.stepc{background:var(--el);border:1px solid var(--br);border-radius:var(--r-lg);padding:24px}
.stepc::before{counter-increment:s;content:"0" counter(s);font-family:var(--fm);font-size:.72rem;
  color:var(--co);letter-spacing:.12em;display:block;margin-bottom:14px}
.stepc b{display:block;color:#fff;font-size:1rem;margin-bottom:7px}
.stepc span{color:var(--tx2);font-size:.86rem;line-height:1.6}

.rev{background:var(--el);border-top:1px solid var(--br);border-bottom:1px solid var(--br);
  padding:clamp(38px,6vw,64px) 0;overflow:hidden}
.revH{text-align:center;margin-bottom:30px}
.revH b{display:block;color:#fff;font-size:clamp(1.4rem,2.6vw,2rem);font-weight:800;letter-spacing:-.025em}
.revH span{font-size:.68rem;color:#79828D;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.revT{display:flex;gap:16px;width:max-content;margin-bottom:16px}
.revT.r1{animation:sl 46s linear infinite}
.revT.r2{animation:sl 54s linear infinite reverse}
.rv{width:330px;flex:none;background:var(--bg);border:1px solid var(--br);
  border-radius:var(--r);padding:20px}
.rvS{color:var(--am);font-size:.8rem;letter-spacing:.18em;margin-bottom:10px}
.rv p{margin:0 0 14px;color:#C6CDD5;font-size:.875rem;line-height:1.6}
.rvW{display:flex;align-items:center;gap:11px}
.rvA{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--co),var(--am));
  flex:none;display:flex;align-items:center;justify-content:center;color:var(--co-ink);
  font-size:.75rem;font-weight:800}
.rvN{font-size:.83rem;color:#fff;font-weight:700;line-height:1.35}
.rvB{font-size:.72rem;color:#79828D}
.rvV{margin-left:auto;font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;color:var(--mt);
  border:1px solid rgba(110,231,183,.35);border-radius:var(--r-pill);padding:3px 9px;font-weight:700}

.faq details{border-bottom:1px solid var(--br)}
.faq summary{list-style:none;cursor:pointer;padding:20px 0;color:var(--tx);
  font-weight:700;font-size:1.02rem;display:flex;justify-content:space-between;gap:20px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--co);font-size:1.4rem;font-weight:400;flex:none;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq .fa{padding:0 0 22px;color:var(--tx2);font-size:.95rem;max-width:74ch}

.cta{background:linear-gradient(140deg,#26130A,var(--el) 60%);border:1px solid rgba(255,107,74,.3);
  border-radius:var(--r-lg);padding:clamp(32px,5vw,56px);text-align:center}
.cta h2{font-size:clamp(1.6rem,3.2vw,2.4rem);margin-bottom:12px}
.cta p{color:var(--tx2);max-width:52ch;margin:0 auto 26px}

footer{background:var(--bg);border-top:1px solid var(--br);padding:44px 0 34px;font-size:.85rem}
.fgrid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px;margin-bottom:34px}
.fgrid h4{color:var(--tx);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:14px;font-weight:700}
.fgrid a{display:block;color:var(--tx2);padding:4px 0}
.fgrid a:hover{color:var(--tx)}
.fine{border-top:1px solid var(--br);padding-top:22px;color:#6C7683;font-size:.78rem;line-height:1.7;max-width:100ch}

/* ========================================================= C. PORTAL SHELL */
body.portal{background:var(--lp);color:var(--lt)}
.row{display:flex;min-height:100vh;align-items:stretch}
.side{background:var(--bg);width:216px;flex:none;padding:22px 0;font-size:.875rem;
  display:flex;flex-direction:column}
.side .lg{padding:0 20px 22px;font-size:1.15rem}
.side nav{display:flex;flex-direction:column}
.side nav a{display:block;padding:10px 20px;color:#8A93A0;border-left:3px solid transparent}
.side nav a:hover{color:#fff;background:rgba(255,255,255,.04)}
.side nav a.on{background:var(--el2);color:#fff;border-left-color:var(--co);font-weight:700}
.side .sfoot{margin-top:auto;padding:18px 20px 0;border-top:1px solid var(--br);color:#6C7683;font-size:.75rem}
.side .who{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.side .who i{width:30px;height:30px;border-radius:50%;flex:none;font-style:normal;
  background:linear-gradient(135deg,var(--co),var(--am));color:var(--co-ink);
  display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800}
.side .who b{display:block;color:#fff;font-size:.8rem}
.main{flex:1;padding:26px clamp(18px,3vw,34px) 60px;min-width:0;background:var(--lp)}
.mhead{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin-bottom:22px}
.mh{font-size:1.4rem;font-weight:800;margin:0 0 5px;letter-spacing:-.02em;color:var(--lt)}
.msub{font-size:.86rem;color:var(--lt2);margin:0}

.g2{display:grid;grid-template-columns:1.35fr 1fr;gap:16px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pc{background:var(--lc);border:1px solid var(--ll);border-radius:var(--r);padding:20px}
.pc + .pc{margin-top:14px}
.pc h3{font-size:1rem;color:var(--lt);margin-bottom:12px;font-weight:700}
.plabel{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--lt2);
  margin-bottom:7px;font-weight:600}
.pbig{font-size:1.6rem;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.025em;color:var(--lt)}
.pmid{font-size:1rem;font-weight:700;color:var(--lt)}

.chip{display:inline-block;font-size:.64rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;padding:4px 10px;border-radius:var(--r-pill);white-space:nowrap}
.c-ok{background:var(--ch-ok-bg);color:var(--ch-ok-tx)}
.c-rev{background:var(--ch-rev-bg);color:var(--ch-rev-tx)}
.c-need{background:var(--ch-need-bg);color:var(--ch-need-tx)}
.c-draft{background:var(--ch-draft-bg);color:var(--ch-draft-tx)}

.bar{height:8px;background:#E9ECF1;border-radius:4px;overflow:hidden;flex:1}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--co),var(--am));border-radius:4px;
  transition:width .4s ease}
.dl{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.dr{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.85rem;
  padding:11px 14px;background:#FAFBFC;border:1px solid var(--ll);border-radius:var(--r-sm)}
.dr b{font-weight:600;color:var(--lt)}

.tbl{width:100%;border-collapse:collapse;font-size:.85rem}
.tbl th{font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--lt2);
  text-align:left;padding:0 12px 9px 0;border-bottom:1px solid var(--ll);font-weight:700;white-space:nowrap}
.tbl td{padding:11px 12px 11px 0;border-bottom:1px solid var(--ll);color:var(--lt)}
.tbl tbody tr{cursor:pointer}
.tbl tbody tr:hover td{background:#FBFCFD}
.tbl tr.sel td{background:#FFF3EF}
.tw{overflow-x:auto}

.btnCo{display:inline-flex;align-items:center;gap:7px;background:var(--co);color:var(--co-ink);
  font-size:.83rem;font-weight:800;padding:10px 20px;border-radius:var(--r-pill)}
.btnCo:hover{background:var(--co2)}
.btnGh{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--ll2);color:#3B4553;
  font-size:.83rem;font-weight:700;padding:10px 20px;border-radius:var(--r-pill);background:var(--lc)}
.btnGh:hover{border-color:#A9B4C2}
.btnGh.sm,.btnCo.sm{padding:7px 14px;font-size:.75rem}

/* verification strip — the payoff for collecting the written record first */
.ver{display:flex;flex-direction:column;gap:8px}
.vrow{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:.83rem;
  padding:11px 14px;border-radius:var(--r-sm);border:1px solid var(--ll);background:#FAFBFC}
.vrow.ok{border-color:#BFE7D3;background:#F4FCF8}
.vrow.warn{border-color:#F0D9A8;background:#FFFBF2}
.vrow.wait{border-color:var(--ll);background:#FAFBFC}
.vrow span{color:var(--lt2)}

.act{list-style:none;margin:0;padding:0;font-size:.83rem}
.act li{padding:10px 0 10px 20px;border-bottom:1px solid var(--ll);position:relative;color:var(--lt2)}
.act li:last-child{border-bottom:0}
.act li::before{content:"";position:absolute;left:0;top:16px;width:7px;height:7px;
  border-radius:50%;background:var(--ll2)}
.act li.hi::before{background:var(--co)}
.act li b{color:var(--lt);font-weight:600}
.act li time{display:block;font-family:var(--fm);font-size:.7rem;color:var(--lt2);margin-top:2px}

/* ============================================ D. WIZARD / APPROVAL / DOCS */
.wzhead{background:var(--bg);padding:18px 0}
.wzhead .shell{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.wzsave{font-size:.78rem;color:var(--tx2);font-family:var(--fm)}
.wzsave b{color:var(--mt);font-weight:500}

.stp{display:flex;gap:6px;flex-wrap:wrap;padding:16px 0 0}
.st{font-size:.7rem;padding:6px 13px;border-radius:var(--r-pill);background:#EDEFF3;
  color:var(--lt2);font-weight:700;border:1px solid transparent;cursor:pointer;white-space:nowrap}
.st.dn{background:var(--ch-ok-bg);color:var(--ch-ok-tx)}
.st.nw{background:var(--bg);color:#fff}
.st[disabled]{cursor:not-allowed;opacity:.55}

.wz{background:var(--lp);color:var(--lt);padding:26px 0 70px;min-height:70vh}
.wzcard{background:var(--lc);border:1px solid var(--ll);border-radius:var(--r-lg);
  padding:clamp(20px,3vw,34px);max-width:960px;margin:0 auto}
.wzcard h2{font-size:1.5rem;color:var(--lt);margin-bottom:6px}
.wzcard .lead{color:var(--lt2);font-size:.92rem;margin-bottom:24px}

.sec{font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--lt2);font-weight:700;
  margin:28px 0 14px;padding-bottom:7px;border-bottom:1px solid var(--ll)}
.fg{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 18px}
.fg.two{grid-template-columns:repeat(2,1fr)}
.fg.one{grid-template-columns:1fr}
.f{min-width:0;display:flex;flex-direction:column}
.f.span2{grid-column:span 2}
.f.span3{grid-column:1/-1}
.f label{display:block;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--lt2);margin-bottom:6px;font-weight:600}
.f label .req{color:var(--co);margin-left:3px}
.f input,.f select,.f textarea{background:var(--lc);border:1px solid var(--ll2);
  border-radius:var(--r-sm);padding:11px 13px;font-size:.92rem;color:var(--lt);width:100%;
  transition:border-color .15s,box-shadow .15s}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--co);
  box-shadow:0 0 0 3px rgba(255,107,74,.14)}
.f input::placeholder{color:#A6AEB9}
.f textarea{min-height:84px;resize:vertical}
.f .hint{font-size:.72rem;color:var(--lt2);margin-top:5px}
.f .err{font-size:.72rem;color:var(--ch-need-tx);margin-top:5px;font-weight:600;display:none}
.f.bad input,.f.bad select{border-color:var(--rd);background:#FFFAF9}
.f.bad .err{display:block}
.f .ok{font-size:.72rem;color:var(--ch-ok-tx);margin-top:5px;font-weight:600}
.f .derived{background:#F4FCF8;border-color:#BFE7D3;color:var(--ch-ok-tx);font-weight:700}

.rad{display:flex;gap:8px;flex-wrap:wrap}
.rb{font-size:.85rem;padding:10px 20px;border:1px solid var(--ll2);border-radius:var(--r-pill);
  background:var(--lc);color:var(--lt2);font-weight:600}
.rb:hover{border-color:#A9B4C2}
.rb.on{border-color:var(--co);background:#FFF1ED;color:#B03C1D;font-weight:800;
  box-shadow:0 0 0 2px rgba(255,107,74,.13)}

/* The conditional block — visibly marked so the client sees the engine work,
   and animated in so they see the moment it decides. */
.cond{border-left:2px solid var(--co);padding-left:16px;margin-top:16px;grid-column:1/-1;
  animation:condIn .4s cubic-bezier(.22,.7,.28,1)}
@keyframes condIn{
  from{opacity:0;transform:translateY(-12px);border-left-color:transparent}
  to{opacity:1;transform:none}}
.wzcard{animation:cardIn .34s cubic-bezier(.22,.7,.28,1)}
@keyframes cardIn{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}
.apv{animation:apvIn .6s cubic-bezier(.22,.7,.28,1)}
@keyframes apvIn{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
.apvAmt{animation:amtIn .7s .12s cubic-bezier(.22,.7,.28,1) both}
@keyframes amtIn{from{opacity:0;transform:translateY(-18px) scale(.94)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .cond,.wzcard,.apv,.apvAmt{animation:none!important}}
.condL{font-size:.64rem;color:#B03C1D;letter-spacing:.08em;text-transform:uppercase;
  margin-bottom:12px;font-weight:800}

.prods{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.pr{border:1px solid var(--ll2);border-radius:var(--r);padding:14px;background:var(--lc);
  font-size:.88rem;font-weight:700;color:#3B4553;text-align:left;transition:all .15s}
.pr:hover{border-color:#A9B4C2}
.pr.on{border-color:var(--co);background:#FFF1ED;color:#B03C1D;box-shadow:0 0 0 2px rgba(255,107,74,.15)}
.pr span{display:block;font-size:.72rem;color:var(--lt2);font-weight:500;margin-top:4px;line-height:1.45}
.pr.on span{color:#C4643F}

.chk{display:flex;gap:11px;align-items:flex-start;font-size:.88rem;color:#3B4553;
  margin-bottom:12px;line-height:1.55;cursor:pointer}
.chk i{width:19px;height:19px;border-radius:5px;background:var(--lc);border:1px solid var(--ll2);
  flex:none;margin-top:1px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:.7rem;font-style:normal;transition:all .12s}
.chk.on i{background:var(--co);border-color:var(--co)}
.chk.on i::after{content:"\2713"}

.wznav{display:flex;justify-content:space-between;gap:14px;margin-top:32px;
  padding-top:22px;border-top:1px solid var(--ll);flex-wrap:wrap}

/* repeating block (existing advances, additional owners) */
.rep{border:1px solid var(--ll);border-radius:var(--r);padding:16px;background:#FAFBFC;margin-bottom:12px}
.repH{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.repH b{font-size:.82rem;color:var(--lt)}
.repH button{font-size:.75rem;color:var(--ch-need-tx);font-weight:700}

/* -------------------------------------------------- approval interstitial */
.apv{background:linear-gradient(150deg,#07130E,var(--bg) 55%);padding:clamp(44px,8vw,88px) var(--pad);
  text-align:center;min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;position:relative;overflow:hidden}
.apvBadge{display:inline-flex;align-items:center;gap:9px;background:rgba(110,231,183,.12);
  border:1px solid rgba(110,231,183,.4);color:var(--mt);font-size:.72rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;padding:8px 18px;border-radius:var(--r-pill);margin-bottom:26px}
.apv h1{color:#fff;font-size:clamp(1.9rem,4.4vw,3rem);margin-bottom:14px;max-width:20ch}
.apv h1 em{font-style:normal;color:var(--mt)}
.apvAmt{font-size:clamp(2.8rem,7vw,4.4rem);font-weight:800;color:#fff;letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;line-height:1;margin-bottom:8px}
.apvSm{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:#6C7683;margin-bottom:30px;font-weight:600}
.apv .body{color:var(--tx2);font-size:1rem;max-width:56ch;margin:0 auto 30px;line-height:1.7}
.apvNote{font-size:.78rem;color:#6C7683;margin-top:26px;max-width:62ch;line-height:1.65;
  border-top:1px solid var(--br);padding-top:20px}

/* ------------------------------------------------------------- documents */
.dz{border:1.5px dashed var(--ll2);border-radius:var(--r);padding:28px 20px;text-align:center;
  background:var(--lc);transition:all .15s;cursor:pointer}
.dz:hover,.dz.over{border-color:var(--co);background:#FFF8F6}
.dz b{display:block;color:var(--lt);font-size:.92rem;margin-bottom:5px}
.dz span{font-size:.78rem;color:var(--lt2)}
.doc{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--ll);
  border-radius:var(--r-sm);background:var(--lc);margin-bottom:10px}
.doc .dn{flex:1;min-width:0}
.doc .dn b{display:block;font-size:.88rem;color:var(--lt);font-weight:600}
.doc .dn span{font-size:.74rem;color:var(--lt2)}
.doc .why{font-size:.72rem;color:#B03C1D;font-weight:600;margin-top:3px;display:block}

@media (max-width:1000px){
  .bento,.steps,.g4{grid-template-columns:repeat(2,1fr)}
  .bc.wide{grid-column:span 2}
  .fgrid{grid-template-columns:1fr 1fr}
  .g2,.g3{grid-template-columns:1fr}
  .prods{grid-template-columns:repeat(2,1fr)}
  .fg{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .hin{grid-template-columns:1fr}
  .nlinks{display:none}
  .row{flex-direction:column}
  .side{width:100%;flex-direction:row;align-items:center;gap:6px;padding:12px var(--pad);overflow-x:auto}
  .side .lg{padding:0 14px 0 0}
  .side nav{flex-direction:row;gap:4px}
  .side nav a{padding:7px 13px;border-left:0;border-bottom:2px solid transparent;white-space:nowrap;border-radius:6px}
  .side nav a.on{border-left:0;border-bottom-color:var(--co)}
  .side .sfoot{display:none}
}
@media (max-width:560px){
  .bento,.steps,.g4{grid-template-columns:1fr}
  .bc.wide{grid-column:span 1}
  .fgrid{grid-template-columns:1fr}
  .fg,.fg.two{grid-template-columns:1fr}
  .f.span2{grid-column:span 1}
  .prods{grid-template-columns:1fr}
}
/* ============================================================== F. ACCOUNTS
   Sign in, create account, reset, and the gate offered before the form. Dark
   ground like the public site, because these screens sit in front of it. */
.authpage{min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:clamp(24px,5vw,60px) var(--pad);position:relative;overflow:hidden;background:var(--bg)}
.authbox{position:relative;z-index:2;width:100%;max-width:460px;
  background:var(--el);border:1px solid var(--br);border-radius:var(--r-lg);
  padding:clamp(26px,4vw,40px)}
.authbox.wide{max-width:780px}
.authbox h1{font-size:clamp(1.5rem,3vw,2rem);margin-bottom:10px}
.authbox .lead{color:var(--tx2);font-size:.95rem;margin-bottom:26px}
.authtabs{display:flex;gap:6px;background:var(--bg);border:1px solid var(--br);
  border-radius:var(--r-pill);padding:5px;margin-bottom:26px}
.authtabs button{flex:1;padding:10px;border-radius:var(--r-pill);font-size:.85rem;
  font-weight:700;color:var(--tx2);transition:all .18s}
.authtabs button.on{background:var(--co);color:var(--co-ink)}

.af{margin-bottom:16px}
.af label{display:block;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:#6C7683;margin-bottom:7px;font-weight:700}
.af input{width:100%;background:var(--bg);border:1px solid var(--br);border-radius:var(--r-sm);
  padding:13px 14px;font-size:.95rem;color:var(--tx);transition:border-color .15s,box-shadow .15s}
.af input:focus{outline:none;border-color:var(--co);box-shadow:0 0 0 3px rgba(255,107,74,.16)}
.af input::placeholder{color:#5A6673}
.af.bad input{border-color:var(--rd)}
.af .msg{font-size:.78rem;color:var(--rd);margin-top:7px;font-weight:600;display:none}
.af.bad .msg{display:block}
.af .help{font-size:.76rem;color:#6C7683;margin-top:7px;line-height:1.5}
.pwwrap{position:relative}
.pwwrap input{padding-right:64px}
.pwwrap .peek{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-size:.7rem;font-weight:700;color:var(--tx2);padding:7px 11px;border-radius:var(--r-sm);
  letter-spacing:.06em;text-transform:uppercase}
.pwwrap .peek:hover{color:var(--tx);background:rgba(255,255,255,.06)}

.pwmeter{display:flex;align-items:center;gap:5px;margin-top:10px}
.pwmeter i{height:4px;flex:1;border-radius:3px;background:var(--br);transition:background .25s}
.pwmeter span{font-size:.72rem;color:#6C7683;margin-left:6px;font-weight:600;white-space:nowrap}
.pwmeter.s1 i:nth-child(1){background:var(--rd)}
.pwmeter.s2 i:nth-child(-n+2){background:var(--am)}
.pwmeter.s3 i:nth-child(-n+3){background:var(--mt)}
.pwmeter.s4 i{background:var(--mt)}
.pwmeter.s1 span{color:var(--rd)}
.pwmeter.s2 span{color:var(--am)}
.pwmeter.s3 span,.pwmeter.s4 span{color:var(--mt)}

.authnote{background:var(--bg);border:1px solid var(--br);border-radius:var(--r-sm);
  padding:14px 16px;font-size:.8rem;color:var(--tx2);line-height:1.6;margin-top:20px}
.authnote b{color:var(--tx);display:block;margin-bottom:5px;font-size:.75rem;
  letter-spacing:.08em;text-transform:uppercase}
.authalt{text-align:center;margin-top:20px;font-size:.85rem;color:var(--tx2)}
.authalt a{color:var(--co);font-weight:700}
.authok{background:rgba(110,231,183,.09);border:1px solid rgba(110,231,183,.34);
  color:var(--mt);border-radius:var(--r-sm);padding:13px 15px;font-size:.85rem;margin-bottom:18px}
.autherr{background:rgba(248,113,113,.09);border:1px solid rgba(248,113,113,.34);
  color:var(--rd);border-radius:var(--r-sm);padding:13px 15px;font-size:.85rem;margin-bottom:18px}
/* the same banners on a light portal card, where the dark-ground reds and
   greens would sit at unreadable contrast on white */
.pc .autherr{background:var(--ch-need-bg);border-color:#EFC1B4;color:var(--ch-need-tx)}
.pc .authok{background:var(--ch-ok-bg);border-color:#BFE7D3;color:var(--ch-ok-tx)}

/* the three-way choice offered before the application */
.gate{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:8px}
.gcard2{background:var(--bg);border:1px solid var(--br);border-radius:var(--r);
  padding:20px;text-align:left;transition:all .18s;display:flex;flex-direction:column}
.gcard2:hover{border-color:rgba(255,107,74,.45);transform:translateY(-2px)}
.gcard2.rec{border-color:rgba(255,107,74,.4);background:linear-gradient(150deg,#1E0F08,var(--bg) 65%)}
.gcard2 .tagline{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--co);
  font-weight:800;margin-bottom:10px}
.gcard2 b{display:block;color:#fff;font-size:1rem;margin-bottom:7px}
.gcard2 span{color:var(--tx2);font-size:.84rem;line-height:1.55;flex:1}
.gcard2 .pick{margin-top:14px;color:var(--co);font-size:.8rem;font-weight:700}
@media (max-width:760px){.gate{grid-template-columns:1fr}}

/* signed-in chip in the wizard header and portal sidebar */
.acctchip{display:inline-flex;align-items:center;gap:9px;font-size:.78rem;color:var(--tx2)}
.acctchip i{width:26px;height:26px;border-radius:50%;font-style:normal;flex:none;
  background:linear-gradient(135deg,var(--co),var(--am));color:var(--co-ink);
  display:flex;align-items:center;justify-content:center;font-size:.66rem;font-weight:800}
.acctchip b{color:var(--tx);font-weight:700}

/* ===================================================== E. MOTION & REVEAL
   One reveal primitive used everywhere: the element starts slightly ABOVE its
   resting place and slides down into it as it enters the viewport. Stagger is
   a per-element --d delay set in markup, so a grid arrives as a cascade rather
   than all at once. Everything here is switched off wholesale by the
   reduced-motion block at the foot of this file. */
[data-reveal]{
  opacity:0;
  transform:translateY(-22px);
  transition:opacity .62s cubic-bezier(.22,.7,.28,1),
             transform .62s cubic-bezier(.22,.7,.28,1);
  transition-delay:var(--d,0ms);
  will-change:opacity,transform}
[data-reveal].in{opacity:1;transform:none}
/* variants */
[data-reveal="up"]{transform:translateY(26px)}
[data-reveal="left"]{transform:translateX(-26px)}
[data-reveal="right"]{transform:translateX(26px)}
[data-reveal="scale"]{transform:translateY(-14px) scale(.965)}
[data-reveal="scale"].in{transform:none}

/* scroll progress, pinned to the very top of the page */
.prog{position:fixed;top:0;left:0;height:2px;width:0;z-index:60;
  background:linear-gradient(90deg,var(--co),var(--am));transition:width .1s linear}

/* A second, condensed bar that drops in once the hero is behind you.
   The hero nav stays in flow and scrolls away normally — a sticky nav cannot
   work from inside .hero, which clips its aurora and ends at the fold, and
   switching the real nav to fixed would jump the page by its own height. */
.navmini{position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(11,13,16,.88);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--br);
  transform:translateY(-101%);transition:transform .34s cubic-bezier(.22,.7,.28,1)}
.navmini.show{transform:none}
.navmini .inner{max-width:var(--maxw);margin:0 auto;padding:11px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:20px}
.navmini .nlinks{gap:26px;font-size:.83rem}
@media (max-width:820px){.navmini .nlinks{display:none}}

/* marquees hold still while you read them */
.mq:hover .mqT,.rev:hover .revT{animation-play-state:paused}

/* ------------------------------------------------- E2. product explorer */
.pex{display:grid;grid-template-columns:300px 1fr;gap:16px;align-items:start}
.pex-list{display:flex;flex-direction:column;gap:6px;position:sticky;top:90px}
.pex-item{display:flex;align-items:center;gap:12px;text-align:left;width:100%;
  padding:12px 14px;border-radius:var(--r);border:1px solid transparent;
  color:var(--tx2);font-size:.9rem;font-weight:600;transition:all .18s ease}
.pex-item:hover{background:var(--el);color:var(--tx)}
.pex-item.on{background:var(--el);border-color:rgba(255,107,74,.4);color:#fff}
.pex-item .ab{flex:none;width:38px;height:30px;border-radius:7px;display:flex;
  align-items:center;justify-content:center;font-family:var(--fm);font-size:.62rem;
  letter-spacing:.06em;background:var(--el2);color:var(--tx2);
  border:1px solid var(--br);transition:all .18s ease}
.pex-item.on .ab{background:var(--co);color:var(--co-ink);border-color:var(--co)}
.pex-item .dr2{margin-left:auto;font-family:var(--fm);font-size:.68rem;color:#6C7683}

.pex-detail{background:var(--el);border:1px solid var(--br);border-radius:var(--r-lg);
  padding:clamp(22px,3vw,34px);min-height:440px}
.pex-detail.swap{animation:swapIn .42s cubic-bezier(.22,.7,.28,1)}
@keyframes swapIn{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
.pex-detail h3{font-size:clamp(1.3rem,2.4vw,1.8rem);margin-bottom:10px}
.pex-detail .pd-long{color:var(--tx2);font-size:1rem;margin-bottom:22px;max-width:62ch}
.pd-spec{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--br);
  border:1px solid var(--br);border-radius:var(--r);overflow:hidden;margin-bottom:22px}
.pd-spec div{background:var(--el);padding:15px 16px}
.pd-spec dt{font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:#6C7683;
  margin-bottom:6px;font-weight:700}
.pd-spec dd{margin:0;color:#fff;font-size:.95rem;font-weight:700;font-family:var(--fm);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.pd-note{border-left:2px solid var(--co);padding:2px 0 2px 16px;margin-bottom:18px}
.pd-note b{display:block;color:#fff;font-size:.78rem;letter-spacing:.08em;
  text-transform:uppercase;margin-bottom:6px}
.pd-note p{margin:0;color:var(--tx2);font-size:.92rem;line-height:1.65}
.pd-note.watch{border-left-color:var(--am)}
.pd-note.doc{border-left-color:var(--mt)}
.pd-cta{display:flex;gap:11px;flex-wrap:wrap;margin-top:24px;padding-top:22px;
  border-top:1px solid var(--br)}

/* ------------------------------------------------ E3. comparison table */
.cmp{width:100%;border-collapse:collapse;font-size:.86rem}
.cmp th{text-align:left;font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;
  color:#6C7683;font-weight:700;padding:0 16px 12px 0;border-bottom:1px solid var(--br);white-space:nowrap}
.cmp td{padding:14px 16px 14px 0;border-bottom:1px solid var(--br);color:var(--tx2);vertical-align:top}
.cmp tr:hover td{background:rgba(255,255,255,.025)}
.cmp td b{color:#fff;font-weight:700;display:block}
.cmp td .sub{font-size:.76rem;color:#6C7683}
.cmp .mono{color:#C6CDD5}
.cmp td:last-child,.cmp th:last-child{padding-right:0}

/* -------------------------------------------------- E4. automation rail */
.auto{position:relative;padding-left:34px}
.auto::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:2px;
  background:linear-gradient(180deg,var(--co),rgba(255,107,74,.12));border-radius:2px}
.arow{position:relative;display:grid;grid-template-columns:minmax(190px,290px) 1fr auto;
  gap:20px;align-items:start;padding:17px 0;border-bottom:1px solid var(--br)}
.arow:last-child{border-bottom:0}
.arow::before{content:"";position:absolute;left:-30px;top:24px;width:11px;height:11px;
  border-radius:50%;background:var(--bg);border:2px solid var(--co);
  transition:transform .3s ease,box-shadow .3s ease}
.arow:hover::before{transform:scale(1.35);box-shadow:0 0 0 5px rgba(255,107,74,.14)}
/* the public rail has no phase column, so it is two columns not three */
.arow.pub{grid-template-columns:minmax(190px,300px) 1fr}
.arow b{color:#fff;font-size:.94rem;font-weight:700}
.arow span{color:var(--tx2);font-size:.9rem;line-height:1.6}
.arow .when{font-family:var(--fm);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 10px;border-radius:var(--r-pill);white-space:nowrap;align-self:center;font-weight:700}
.arow .when.live{color:var(--mt);border:1px solid rgba(110,231,183,.35);background:rgba(110,231,183,.08)}
.arow .when.later{color:#6C7683;border:1px solid var(--br)}

/* --------------------------------------------------- E5. metric tiles */
.mtiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.mt{background:var(--el);border:1px solid var(--br);border-radius:var(--r-lg);padding:22px;
  position:relative;overflow:hidden}
.mt::after{content:"";position:absolute;inset:auto -30% -60% -30%;height:120px;
  background:radial-gradient(ellipse at center,rgba(255,107,74,.16),transparent 70%);
  opacity:0;transition:opacity .35s ease}
.mt:hover::after{opacity:1}
.mt b{display:block;color:#fff;font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1;margin-bottom:9px}
.mt span{display:block;color:var(--tx2);font-size:.86rem;line-height:1.55}
.mt .cap{font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:#6C7683;
  font-weight:700;margin-bottom:12px}

@media (max-width:1000px){
  .pex{grid-template-columns:1fr}
  .pex-list{position:static;flex-direction:row;overflow-x:auto;padding-bottom:6px;gap:8px}
  .pex-item{width:auto;flex:none}
  .pex-item .dr2{display:none}
  .pd-spec{grid-template-columns:repeat(2,1fr)}
  .mtiles{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .pd-spec{grid-template-columns:1fr}
  .mtiles{grid-template-columns:1fr}
  .arow{grid-template-columns:1fr;gap:7px}
  .arow .when{justify-self:start}
  .auto{padding-left:26px}
  .arow::before{left:-22px;top:21px}
}

@media (prefers-reduced-motion:reduce){
  .a1,.a2,.a3,.mqT,.revT{animation:none!important}
  *{transition-duration:.01ms!important}
  [data-reveal]{opacity:1!important;transform:none!important}
  .pex-detail.swap{animation:none}
  .prog{display:none}
}

/* Dynamic buttons: coral gradient, lift + glow on hover (added tweak). */
.btnCo,.btn-co{transition:transform .16s ease,box-shadow .22s ease,filter .2s ease;
  background-image:linear-gradient(135deg,var(--co),var(--co2));box-shadow:0 6px 16px rgba(255,107,74,.28)}
.btnCo:hover,.btn-co:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(255,107,74,.42);filter:saturate(1.08)}
.btnCo:active,.btn-co:active{transform:translateY(0)}
.btnGh,.btn-gh{transition:transform .16s ease,border-color .2s ease,box-shadow .2s ease}
.btnGh:hover,.btn-gh:hover{transform:translateY(-1px)}

/* Highlight the key-document line ("the deposits are the underwriting") in the
   brand mint, matching its .doc accent — instead of the muted grey. */
.pd-note.doc p{color:var(--mt);font-weight:500}