/* ═══════════════════════════════════════════════════════════════════
   CASH IN FLASH — LOAN APPLICATION (2026-07 redesign)
   Visual layer ONLY. Every id / name / JS-toggled class from script.js
   is preserved: .err .em.show .checked .connected .loading .active
   .done .todo .over .show .sel — restyle them, never rename them.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --g:#15C15D;--gd:#11a44f;--gm:#14E56B;--gl:#f0faf4;--gb:#b2e8c8;--gdeep:#0b8a40;
  --r:#d63031;--rl:#fff0f0;--rb:#ffc5c5;
  --ink:#0f1f17;--ink2:#42514a;--muted:#7a877f;--pale:#f7faf8;
  --border:#e7ece8;--border2:#dfe6e1;
  --white:#ffffff;
  --font:'Poppins',sans-serif;
  --radius:12px;--radius-lg:24px;
  --shadow:0 2px 12px rgba(10,60,35,.05);
  --shadow-md:0 10px 36px rgba(10,60,35,.08);
  --shadow-lg:0 18px 50px rgba(10,60,35,.12);
  --ring:0 0 0 4px rgba(21,193,93,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
button,input,select,textarea{-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;overflow-x:hidden}
body{background:#fbfdfc;font-family:var(--font);color:var(--ink);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;width:100%;max-width:100vw}

/* ── PAGE ── */
.page{max-width:780px;margin:0 auto;padding:2.25rem 1.25rem 5rem;position:relative}

/* ── BACKGROUND ART (fixed, behind everything) ──
   blob-bg-1..4 = organic green shapes; blob-bg-5/6 repurposed as dot
   grids (same divs the markup always had — CSS-only restyle). */
@keyframes floatBlob{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-14px) rotate(2deg)}}
.blob-bg{position:fixed;pointer-events:none;z-index:0}
.blob-bg-1{width:460px;height:420px;top:-140px;right:-120px;background:radial-gradient(closest-side,rgba(21,193,93,.10),rgba(21,193,93,.045) 60%,transparent);border-radius:58% 42% 46% 54%/52% 48% 52% 48%;animation:floatBlob 14s ease-in-out infinite -3s}
.blob-bg-2{width:240px;height:210px;top:16%;left:-120px;background:rgba(21,193,93,.055);border-radius:60% 40% 30% 70%/60% 30% 70% 40%;animation:floatBlob 16s ease-in-out infinite -6s}
.blob-bg-3{width:230px;height:230px;top:8%;right:14%;background:rgba(21,193,93,.055);border-radius:30% 70% 70% 30%/30% 30% 70% 70%;animation:floatBlob 12s ease-in-out infinite -8s}
.blob-bg-4{width:480px;height:470px;bottom:-240px;left:-230px;background:linear-gradient(135deg,var(--gd) 0%,var(--g) 55%,var(--gm) 100%);opacity:.92;border-radius:44% 56% 38% 62%/60% 42% 58% 40%;animation:floatBlob 18s ease-in-out infinite -2s}
.blob-bg-4::after{content:'';position:absolute;right:-30px;top:-40px;width:190px;height:190px;background:rgba(21,193,93,.28);border-radius:46% 54% 58% 42%/52% 44% 56% 48%}
/* dot grids */
.blob-bg-5{width:190px;height:130px;top:120px;left:4%;border-radius:0;background-image:radial-gradient(rgba(21,193,93,.30) 1.6px,transparent 1.6px);background-size:17px 17px;animation:none}
.blob-bg-6{width:150px;height:190px;top:44%;right:3%;border-radius:0;background-image:radial-gradient(rgba(21,193,93,.24) 1.6px,transparent 1.6px);background-size:17px 17px;animation:none}
.hdr,.progress,.card,.btn-row,.foot-row,.sec-bar,.success,.disc{position:relative;z-index:1}

/* ── HEADER ── */
.hdr{text-align:center;margin-bottom:1.9rem}
.hdr-title{font-family:var(--font);font-size:38px;font-weight:800;color:var(--ink);margin-bottom:4px;line-height:1.15;letter-spacing:-.035em}
.hdr-title .accent{color:var(--g)}
.hdr-sub{font-size:14.5px;color:var(--muted);margin-bottom:1.3rem;font-weight:500}
@media(max-width:640px){.hdr-title{font-size:30px}.hdr-sub{font-size:13px}}
@media(max-width:400px){.hdr-title{font-size:26px}}
.lang-bar{display:flex;justify-content:center}
.lang-toggle{display:inline-flex;background:var(--white);border:1.5px solid var(--border);border-radius:30px;padding:4px;gap:3px;box-shadow:var(--shadow)}
.lang-btn{padding:7px 22px;font-size:13.5px;font-weight:600;cursor:pointer;border:none;background:transparent;color:var(--ink2);font-family:var(--font);border-radius:24px;transition:all .2s}
.lang-btn.active{background:var(--g);color:white;box-shadow:0 3px 10px rgba(21,193,93,.35)}

/* ── PROGRESS ── */
.progress{display:flex;align-items:flex-start;margin-bottom:2.4rem;padding:0 6px}
.step{display:flex;flex-direction:column;align-items:center;gap:8px;flex:0 0 auto}
.sc{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;transition:all .3s;flex-shrink:0;font-family:var(--font)}
.sc.active{background:var(--white);color:var(--g);border:2px solid var(--g);box-shadow:0 0 0 5px rgba(21,193,93,.10)}
.sc.done{background:var(--g);color:white;border:2px solid var(--g);box-shadow:0 3px 10px rgba(21,193,93,.28)}
.sc.todo{background:var(--white);color:var(--muted);border:2px solid var(--border2)}
.sl{font-size:10px;font-weight:700;color:var(--muted);text-align:center;white-space:nowrap;letter-spacing:.08em;text-transform:uppercase}
.sl.active{color:var(--g)}
.cn{flex:1;height:0;border-top:2px dashed var(--border2);margin-top:19px;margin-left:8px;margin-right:8px;transition:border-color .4s}
.cn.done{border-top:2px solid var(--g)}
@media(max-width:480px){.sc{width:34px;height:34px;font-size:12.5px}.sl{font-size:8.5px;letter-spacing:.05em}.cn{margin-top:16px;margin-left:4px;margin-right:4px}}
@media(max-width:360px){.sl{font-size:8px}.sc{width:30px;height:30px}}

/* ── CARD ── */
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:30px 32px;margin-bottom:1rem;box-shadow:var(--shadow-md)}
@media(max-width:640px){.card{padding:22px 18px;border-radius:20px}}
@media(max-width:400px){.card{padding:18px 14px}}
.card-accent{border-top:none}

/* ── SECTION HEADER (icon circle + title + subtitle, divider below) ── */
.sec{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.sec-icon{width:46px;height:46px;background:var(--g);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 14px rgba(21,193,93,.3)}
.sec-icon svg{width:21px;height:21px;stroke:#fff;color:#fff}
.sec-title{font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.sec-sub{font-size:12.5px;color:var(--muted);margin-top:1px}
.sec-rule{height:1px;background:var(--border);margin:16px 0 22px}
.divider{height:1px;background:var(--border);margin:22px 0}

/* ── FIELDS ── */
.field{margin-bottom:18px}
.field:last-child{margin-bottom:0}
.lbl{display:flex;align-items:center;gap:5px;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:8px}
.req{color:var(--r);font-size:14px;line-height:1;display:none}
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],input[type=date],select,textarea{
  width:100%;border:1.5px solid var(--border2);border-radius:var(--radius);padding:13px 15px;
  font-size:15px;font-family:var(--font);color:var(--ink);background:var(--white);
  transition:border-color .2s,box-shadow .2s;appearance:none;-webkit-appearance:none;
}
input::placeholder,textarea::placeholder{color:#a6b0aa}
input[type=date]{color-scheme:light;cursor:pointer}
input[type=date]::-webkit-calendar-picker-indicator{opacity:.5;cursor:pointer;padding:2px;margin-right:-2px}
input[type=date]::-webkit-datetime-edit{font-family:var(--font);font-size:15px}
input[type=date]::-webkit-datetime-edit-fields-wrapper{padding:0}
input[type=date]:empty{color:var(--muted)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--g);box-shadow:var(--ring)}
input.err,select.err{border-color:var(--r);box-shadow:0 0 0 3px rgba(214,48,49,.08)}
.em{font-size:12px;color:var(--r);font-weight:500;margin-top:5px;display:none;align-items:center;gap:4px}
.em.show{display:flex}
.em.ok{display:flex;color:#0a5d2e}
.em.neutral{display:flex;color:var(--ink2);font-weight:400}
select:disabled{background:var(--pale);color:var(--ink);cursor:not-allowed;opacity:1;border-color:var(--border2)}
.fhint{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.5}
/* Grid rows own the vertical rhythm — cells inside them carry NO margin.
   (A per-cell margin doubles up with the grid gap when rows stack on
   mobile, and .field:last-child zeroing left each row's final field
   flush against the next element.) Rows get the same 18px bottom margin
   as a lone .field so the page keeps one consistent beat. */
.r2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.r3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:18px}
.r2:last-child,.r3:last-child{margin-bottom:0}
.r2>.field,.r3>.field{margin-bottom:0}
/* SSN + Confirm SSN: bottom-align the cells so the inputs sit level even
   when the longer "Confirm" label wraps to two lines. */
.r2.keep{align-items:end}
/* Modern browsers: share label/input/error rows between the two SSN cells
   (subgrid) so the inputs stay level in EVERY state — wrapped labels AND
   a one-sided error message. Older browsers keep the end-align fallback. */
@supports(grid-template-rows:subgrid){
  .r2.keep{grid-template-rows:auto auto auto;row-gap:0;align-items:stretch}
  .r2.keep>.field{display:grid;grid-template-rows:subgrid;grid-row:span 3}
  .r2.keep>.field>.lbl{align-self:end}
}
/* The short "Confirm SSN" label centers over its input (the long left
   label fills its cell, so left-anchoring the short one looked lopsided). */
#l-ssn2{justify-content:center}
/* addr-row lives INSIDE the Home Address .field — the parent owns its
   trailing margin, so no margin-bottom here. */
.addr-row{display:grid;grid-template-columns:1.35fr .75fr 1fr;gap:12px}
@media(max-width:480px){
  .r2{grid-template-columns:1fr;gap:18px}
  .r2.keep{grid-template-columns:1fr 1fr;column-gap:10px}
  .r3{grid-template-columns:1fr;gap:18px}
  .r3.keep,.addr-row{grid-template-columns:1.2fr .8fr 1fr;gap:8px}
  /* squeezed 3-col address row: drop the in-input icons so City/CA/ZIP
     text has room; restore normal padding */
  .addr-row .iwrap>.fi{display:none}
  .addr-row .iwrap>input,.addr-row .iwrap>select{padding-left:12px}
  .addr-row .sel-wrap select{padding-right:30px}
}

/* ── INPUT ICONS (leading icon inside the input) ──
   NOTE: #addr1 is deliberately NOT wrapped — Google Places wraps it at
   runtime for its dropdown; keep that input bare. */
.iwrap{position:relative}
.iwrap>.fi{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:17px;height:17px;stroke:var(--g);fill:none;pointer-events:none;z-index:2}
.iwrap>input,.iwrap>select{padding-left:44px}
.iwrap>input[type=date]{padding-left:44px}
svg.fi{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ── SELECT WRAPPER ── */
.sel-wrap{position:relative}
.sel-wrap select{padding-right:38px}
.sel-wrap::after{content:'';position:absolute;right:15px;top:50%;width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-70%) rotate(45deg);pointer-events:none}

/* ── PASSWORD / SSN EYE ── */
.pw-wrap{position:relative}
.pw-wrap input{padding-right:46px}
.pw-eye{position:absolute;right:13px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:#a6b0aa;padding:4px;display:flex;align-items:center;justify-content:center;transition:color .15s;z-index:2}
.pw-eye:hover{color:var(--g)}

/* ── RADIO OPTION CARDS ── */
.radio-grp{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.radio-row{display:flex;gap:10px;margin-top:6px;flex-wrap:wrap}@media(max-width:380px){.radio-row{flex-direction:column}}
.ro{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:15px;padding:12px 16px;border:1.5px solid var(--border2);border-radius:var(--radius);transition:all .18s;background:var(--white)}
.ro:hover{border-color:var(--gb);background:var(--gl)}
.ro.checked{border-color:var(--g);background:var(--gl);box-shadow:var(--ring)}
.ro input[type=radio]{width:17px;height:17px;accent-color:var(--g);cursor:pointer;flex-shrink:0}
.ro-label{font-weight:500}

/* ── CHECKBOX ROWS ── */
.cbrow{display:flex;align-items:flex-start;gap:12px;padding:15px 17px;border:1.5px solid var(--border2);border-radius:var(--radius);cursor:pointer;transition:all .18s;background:var(--white)}
.cbrow:hover{border-color:var(--gb);background:var(--gl)}
.cbrow.checked{border-color:var(--g);background:var(--gl)}
.cbrow input{width:18px;height:18px;accent-color:var(--g);flex-shrink:0;margin-top:2px;cursor:pointer}
.cbrow span{font-size:14px;color:var(--ink2);line-height:1.5}
.cbrow a{color:var(--gd);font-weight:600}

/* ── PLAID ── */
.plaid-area{display:none;margin-top:14px}
.plaid-area.show{display:block}
.plaid-btn{width:100%;padding:16px;background:var(--g);color:white;border:none;border-radius:14px;font-size:15px;font-weight:700;font-family:var(--font);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;transition:all .2s;position:relative;overflow:hidden;box-shadow:0 6px 18px rgba(21,193,93,.28)}
.plaid-btn:hover{background:var(--gd);transform:translateY(-1px)}
.plaid-btn.connected{background:var(--gd)}
.plaid-btn.loading{color:transparent}
.plaid-btn.loading::after{content:'';position:absolute;width:20px;height:20px;border:3px solid rgba(255,255,255,.3);border-top-color:white;border-radius:50%;top:50%;left:50%;margin:-10px;animation:spin .7s linear infinite}
.plaid-st{margin-top:12px;padding:12px 16px;border-radius:var(--radius);font-size:13px;font-weight:600;display:none;align-items:center;gap:8px;line-height:1.5}
.plaid-st.ok{background:var(--gl);color:var(--gd);border:1.5px solid var(--gb);display:flex}
.plaid-st.err{background:var(--rl);color:var(--r);border:1.5px solid var(--rb);display:block}

/* ── FILE UPLOAD ── */
.dz{border:1.5px dashed var(--border2);border-radius:18px;padding:2.4rem 1.5rem;text-align:center;cursor:pointer;transition:all .2s;position:relative;background:var(--pale)}
.dz:hover,.dz.over{border-color:var(--g);background:var(--gl)}
.dz input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.dz-icon{margin-bottom:10px;display:flex;justify-content:center}
.dz-icon svg{width:34px;height:34px;stroke:var(--g)}
.dz-title{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:4px}
.dz-sub{font-size:12px;color:var(--muted)}
.fdone{display:none;margin-top:10px;padding:10px 14px;background:var(--gl);border:1.5px solid var(--gb);border-radius:var(--radius);align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--gd)}

/* ── DISCLOSURE ── */
.disc{background:var(--pale);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;font-size:13px;color:var(--ink2);line-height:1.7;margin-bottom:12px}

/* ── CHECK IMAGE (routing/account sample) ── */
.check-img{background:var(--pale);border-radius:var(--radius);padding:14px;margin:12px 0;text-align:center}
.check-inner{display:inline-flex;background:white;border:1px solid var(--border);border-radius:8px;padding:10px 18px;font-family:monospace;font-size:12px;align-items:center;gap:12px;color:#555;box-shadow:var(--shadow);flex-wrap:wrap;justify-content:center}
.cbox{background:var(--gl);border:1px solid var(--gb);border-radius:4px;padding:4px 10px;font-size:11px;color:var(--gd)}

/* ── BUTTONS ── */
.btn-row{display:flex;gap:12px;margin-top:1.6rem}
.btnp{flex:1;padding:16px 22px;background:var(--g);color:white;border:none;border-radius:14px;font-size:15.5px;font-weight:700;font-family:var(--font);cursor:pointer;transition:all .2s;position:relative;overflow:hidden;letter-spacing:.01em;display:inline-flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 6px 18px rgba(21,193,93,.28)}
.btnp svg{width:17px;height:17px;stroke:currentColor;flex-shrink:0}
.btnp:hover:not(:disabled){background:var(--gd);box-shadow:0 8px 22px rgba(21,193,93,.34);transform:translateY(-1px)}
.btnp:active{transform:translateY(0)}
.btnp:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btnp.loading{color:transparent}
.btnp.loading::after{content:'';position:absolute;width:20px;height:20px;border:3px solid rgba(255,255,255,.3);border-top-color:white;border-radius:50%;top:50%;left:50%;margin:-10px;animation:spin .7s linear infinite}
.btnb{padding:16px 22px;background:var(--white);color:var(--ink2);border:1.5px solid var(--border2);border-radius:14px;font-size:15px;font-weight:600;font-family:var(--font);cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;justify-content:center;gap:7px}
.btnb svg{width:16px;height:16px;stroke:currentColor}
.btnb:hover{background:var(--pale);color:var(--ink);border-color:var(--border)}

/* ── FOOTER ROW (trust strip + continue — step 1) ── */
.foot-row{display:flex;align-items:center;gap:18px;margin-top:1.6rem;background:var(--white);border:1px solid var(--border);border-radius:18px;padding:16px 20px;box-shadow:var(--shadow)}
.trust{display:flex;align-items:center;justify-content:space-evenly;gap:22px;flex:1;min-width:0}
.titem{display:flex;align-items:center;gap:10px;min-width:0}
.ticn{width:34px;height:34px;border-radius:50%;background:var(--gl);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ticn svg{width:16px;height:16px;stroke:var(--g)}
.titem b{display:block;font-size:12px;font-weight:700;color:var(--ink);line-height:1.3;white-space:nowrap}
.titem small{display:block;font-size:10.5px;color:var(--muted);line-height:1.35}
.foot-row .btnp{flex:0 0 auto;min-width:170px}
@media(max-width:700px){
  .foot-row{flex-direction:column;align-items:stretch;gap:14px;padding:16px 14px}
  .trust{justify-content:space-between;gap:8px}
  .titem{flex-direction:column;text-align:center;gap:6px;flex:1}
  .titem b{white-space:normal;font-size:11px}
  .titem small{font-size:9.5px}
  .foot-row .btnp{width:100%;order:-1}  /* Continue on top, trust items below */
}

/* ── SECURITY BAR (legacy id kept) ── */
.sec-bar{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:1.2rem;font-size:12px;color:var(--muted)}
.sec-bar svg{opacity:.5}

/* ── BADGE STRIP (step 4) ── */
.badge-strip{background:var(--pale);border:1px solid var(--border);border-radius:14px;padding:12px 16px;margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;position:relative;z-index:1}
.badge-item{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--muted)}
.badge-sep{width:1px;height:14px;background:var(--border)}

/* ── SUCCESS ── */
.success{display:none;text-align:center;padding:2rem 0}
.success.show{display:block}
.s-icon{width:80px;height:80px;background:linear-gradient(135deg,var(--gd),var(--g));border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:38px;margin:0 auto 1.5rem;box-shadow:0 8px 32px rgba(21,193,93,.25)}
.s-title{font-family:var(--font);font-weight:800;font-size:28px;color:var(--ink);margin-bottom:10px}
.s-sub{font-size:15px;color:var(--muted);line-height:1.7;max-width:400px;margin:0 auto}

/* ── ELIGIBILITY GATE MODAL (under-18 / out-of-state / reapply / SMS) ── */
.gate-ov{position:fixed;inset:0;z-index:3000;display:none;justify-content:center;align-items:flex-start;
  padding:clamp(24px,8vh,80px) 16px 24px;background:rgba(20,28,24,.55);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);overflow-y:auto}
.gate-ov.show{display:flex;animation:gateFade .2s ease}
.gate-card{background:var(--white);border-radius:22px;max-width:400px;width:100%;overflow:hidden;
  text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.28);animation:gatePop .3s cubic-bezier(.2,.9,.3,1.15)}
.gate-head{padding:30px 26px 0}
.gate-inner{padding:0 26px 24px}
.gate-icon{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:34px;margin:0 auto 18px;background:#fff5e6}
.gate-title{font-family:var(--font);font-weight:800;font-size:21px;color:var(--ink);line-height:1.3;
  margin-bottom:10px;letter-spacing:-.02em}
.gate-body{font-size:14px;color:var(--ink2);line-height:1.65;margin-bottom:24px}
.gate-btn{width:100%;padding:15px;background:var(--g);color:#fff;border:none;border-radius:14px;
  font-size:15px;font-weight:700;font-family:var(--font);cursor:pointer;transition:background .2s,box-shadow .2s,transform .15s}
.gate-btn:hover{background:var(--gd);box-shadow:0 4px 16px rgba(21,193,93,.3);transform:translateY(-1px)}
.gate-btn:active{transform:translateY(0)}
.gate-reapply .gate-card{border-radius:26px}
.gate-reapply .gate-head{position:relative;padding:34px 26px 26px;
  background:linear-gradient(135deg,var(--gd),var(--g))}
.gate-reapply .gate-head::after{content:'';position:absolute;top:-46px;right:-34px;width:160px;height:160px;
  border-radius:50%;background:rgba(255,255,255,.13)}
.gate-reapply .gate-icon{width:76px;height:76px;background:rgba(255,255,255,.18);font-size:0;
  position:relative;z-index:1;margin-bottom:16px}
.gate-reapply .gate-title{color:#fff;font-size:22px;margin-bottom:0;position:relative;z-index:1}
.gate-reapply .gate-inner{padding:24px 28px 26px}
.gate-reapply .gate-body{font-size:16px;line-height:1.7;color:#39424e;margin-bottom:22px}
.gate-reapply .gate-body strong{color:var(--ink)}
.gate-reapply .gate-btn{border-radius:14px;font-size:16px;padding:16px}
.gate-sms .gate-body{text-align:left;font-size:13.5px;line-height:1.7;max-height:46vh;overflow-y:auto;padding-right:4px}
.gate-sms .gate-body p{margin:0 0 12px}
.gate-sms .gate-body p:last-child{margin-bottom:0}
@keyframes gateFade{from{opacity:0}to{opacity:1}}
@keyframes gatePop{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}

/* ── GOOGLE PLACES (legacy pac + custom ac-menu off #addr1) ── */
.pac-container{border-radius:var(--radius)!important;box-shadow:var(--shadow-lg)!important;border:1.5px solid var(--border)!important;font-family:var(--font)!important;margin-top:4px}
.pac-item{padding:10px 14px!important;font-size:14px!important;cursor:pointer}
.pac-item:hover{background:var(--gl)!important}
.pac-item-query{font-weight:600;color:var(--ink)}
.ac-menu{position:absolute;left:0;right:0;top:100%;z-index:50;background:var(--white);
  border:1.5px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);
  margin-top:4px;overflow:hidden;max-height:280px;overflow-y:auto}
.ac-menu[hidden]{display:none}
.ac-item{padding:11px 14px;cursor:pointer;display:flex;flex-direction:column;gap:1px;border-bottom:1px solid #f1f4f2}
.ac-item:last-child{border-bottom:none}
.ac-item:hover,.ac-item.is-active{background:var(--gl)}
.ac-main{font-size:14px;font-weight:600;color:var(--ink)}
.ac-sec{font-size:12px;color:var(--muted)}

/* ── EMAIL VERIFICATION (feature-flagged) ── */
.ev-send{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;background:var(--gl);color:var(--gd);
  border:1.5px solid var(--gb);border-radius:50px;font-size:13px;font-weight:700;font-family:var(--font);
  cursor:pointer;transition:all .15s}
.ev-send:hover{background:#e3f6ea;border-color:var(--g)}
.ev-send:disabled{opacity:.6;cursor:default}
.ev-hint{font-size:12px;color:var(--muted);line-height:1.5;margin-bottom:8px}
.ev-row{display:flex;gap:8px;align-items:stretch}
.ev-row input{flex:1;letter-spacing:5px;font-weight:700;text-align:center}
.ev-verify{padding:0 18px;background:var(--g);color:#fff;border:none;border-radius:var(--radius);
  font-size:14px;font-weight:700;font-family:var(--font);cursor:pointer;transition:background .15s;white-space:nowrap}
.ev-verify:hover{background:var(--gd)}
.ev-verify:disabled{opacity:.6;cursor:default}
.ev-resend{margin-top:8px;background:none;border:none;color:var(--gd);font-size:12px;font-weight:700;
  font-family:var(--font);cursor:pointer;padding:4px 0;text-decoration:underline}
.ev-resend:disabled{color:var(--muted);text-decoration:none;cursor:default}
.ev-done{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;background:var(--gl);color:#0a5d2e;
  border:1.5px solid var(--gb);border-radius:50px;font-size:13px;font-weight:700}

@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.fade-up{animation:fadeUp .6s ease}

@media(max-width:768px){
  /* 48px touch targets + 16px font (stops iOS focus-zoom) — but NOT for
     checkboxes/radios: min-height stretches them to 48px tall and their
     glyph paints at the bottom, misaligning them from their label text.
     Their touch target is the whole clickable .cbrow/.ro label anyway. */
  input:not([type=checkbox]):not([type=radio]),select,textarea{min-height:48px;font-size:16px}
  .btnp{min-height:52px}.btnb{min-height:48px}
  .progress{gap:0;padding:0}
  .blob-bg-4{width:300px;height:300px;bottom:-160px;left:-140px;opacity:.75}
  .blob-bg-1{width:280px;height:260px;top:-90px;right:-80px}
  .blob-bg-3{display:none}
  .blob-bg-5{width:120px;height:90px;top:90px;left:2%}
  .blob-bg-6{display:none}
}
@media(max-width:480px){
  .page{padding:1.5rem .85rem 4rem}
  .blob-bg-4{width:220px;height:220px;bottom:-130px;left:-110px;opacity:.65}
}
@media(max-width:360px){.page{padding:1.25rem .6rem 3rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ── SITE HEADER (from cif-website — untouched design) ── */
.site-header{position:sticky;top:0;z-index:1000;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.06);transition:box-shadow .3s}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:72px;max-width:1200px;margin:0 auto;padding:0 24px}
.logo img{height:24px;width:auto}
.main-nav{display:flex}
.nav-list{display:flex;gap:32px;align-items:center;list-style:none}
.nav-item>a{font-weight:500;font-size:.95rem;display:flex;align-items:center;gap:4px;padding:8px 0;transition:color .2s;text-decoration:none;color:var(--ink)}
.nav-item>a:hover{color:var(--g)}
.nav-item>a svg{transition:transform .2s}
.nav-item.has-dropdown{position:relative}
.nav-item.has-dropdown:hover>a svg{transform:rotate(180deg)}
.dropdown-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);background:#fff;border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.12);padding:24px;min-width:200px;opacity:0;visibility:hidden;transition:opacity .25s,transform .25s,visibility .25s;pointer-events:none}
.nav-item.has-dropdown:hover .dropdown-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);pointer-events:auto}
.dropdown-menu a{display:block;padding:8px 12px;border-radius:8px;font-size:.9rem;transition:background .15s;text-decoration:none;color:var(--ink)}
.dropdown-menu a:hover{background:var(--gl)}
.mega-menu{min-width:400px}
.mega-cols{display:flex;gap:40px}
.mega-col h4{font-size:.75rem;letter-spacing:.08em;color:#999;margin-bottom:12px}
.header-actions{display:flex;align-items:center;gap:16px}
.btn-store{display:inline-flex;align-items:center;gap:6px;font-weight:500;font-size:.9rem;color:var(--ink);transition:color .2s;text-decoration:none}
.btn-store:hover{color:var(--g)}
.btn-login{display:inline-flex;align-items:center;font-weight:600;padding:10px 24px;border-radius:50px;font-size:.9rem;border:2px solid var(--ink);color:var(--ink);transition:background .2s,color .2s;text-decoration:none}
.btn-login:hover{background:var(--ink);color:#fff}
.menu-toggle{display:none;width:28px;height:20px;position:relative;background:none;border:none;cursor:pointer}
.menu-toggle span{display:block;position:absolute;width:100%;height:2px;background:var(--ink);border-radius:2px;transition:.3s}
.menu-toggle span:nth-child(1){top:0}.menu-toggle span:nth-child(2){top:9px}.menu-toggle span:nth-child(3){top:18px}
.menu-toggle.active span:nth-child(1){top:9px;transform:rotate(45deg)}.menu-toggle.active span:nth-child(2){opacity:0}.menu-toggle.active span:nth-child(3){top:9px;transform:rotate(-45deg)}
.mobile-menu{position:fixed;top:0;right:-100%;width:100%;height:100vh;height:100dvh;background:linear-gradient(135deg,#1B3229,#0C1D17);z-index:1002;transition:right .35s ease;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0;display:flex;flex-direction:column}
.mobile-menu.open{right:0}
.mobile-menu-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1001;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.mobile-menu-overlay.open{opacity:1;visibility:visible}
.mobile-menu-hd{display:flex;align-items:center;justify-content:space-between;padding:0 20px;height:64px;flex-shrink:0;border-bottom:1px solid rgba(255,255,255,.08)}
.mobile-menu-hd .logo img{height:22px;width:auto;filter:brightness(0) invert(1)}
.mobile-close-btn{background:none;border:none;cursor:pointer;color:#fff;padding:6px;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.mobile-menu-inner{padding:28px 28px 40px;flex:1}
.mobile-nav-list{margin-bottom:32px;list-style:none;padding:0}
.mobile-nav-item>a{display:block;padding:16px 0;font-size:1.1rem;font-weight:500;border-bottom:1px solid rgba(255,255,255,.15);min-height:48px;text-decoration:none;color:#fff}
.mobile-sub{padding-left:16px;display:none;list-style:none}
.mobile-nav-item.has-sub.open .mobile-sub{display:block}
.mobile-sub a{display:block;padding:10px 0;font-size:.95rem;color:rgba(255,255,255,.7);text-decoration:none}
.mobile-menu-extra{display:flex;flex-direction:column;gap:20px;margin-top:8px}
.mobile-store-link{display:flex;align-items:center;gap:10px;font-weight:500;text-decoration:none;color:#fff;font-size:1rem}
.mobile-store-link svg{stroke:#fff}
.mobile-btn-row{display:flex;gap:12px}
.mobile-btn-row .btn-apply{flex:1;text-align:center;justify-content:center;display:inline-flex;align-items:center;font-weight:600;padding:12px 24px;border-radius:50px;font-size:.95rem;background:linear-gradient(90deg,#15C15D,#13EC6D);color:#fff;border:none;text-decoration:none;transition:filter .2s,transform .2s}
.mobile-btn-row .btn-apply:hover{filter:brightness(1.08);transform:translateY(-1px)}
.mobile-btn-row .btn-login{flex:1;text-align:center;justify-content:center;display:inline-flex;align-items:center;background:transparent;color:#fff;border:2px solid #fff;border-radius:50px;padding:12px 24px;font-size:.95rem;font-weight:600;text-decoration:none;transition:background .2s}
.mobile-btn-row .btn-login:hover{background:rgba(255,255,255,.1)}
@media(max-width:768px){.main-nav{display:none}.header-actions{display:none}.menu-toggle{display:block}.header-inner{height:56px;padding:0 16px}.logo img{height:22px}}
@media(max-width:480px){.header-inner{padding:0 12px}.logo img{height:20px}}

@keyframes circleDraw{from{stroke-dashoffset:251}to{stroke-dashoffset:0}}
@keyframes checkDraw{from{stroke-dashoffset:50}to{stroke-dashoffset:0}}

/* FINAL_STEP_VISUAL_V1 — scoped presentation only; earlier steps are unchanged. */
#s4 .finish-id-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1fr);gap:26px;align-items:start}
#s4 .finish-id-upload{min-width:0;margin-bottom:0}
#s4 .finish-id-fields{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin-top:0!important}
#s4 .finish-id-fields .field{margin-bottom:18px}
#s4 .finish-id-fields .field:last-child{margin-bottom:0}
#s4 .finish-id-fields input{min-width:0;min-height:50px;font-size:16px}
#s4 #dz-id{padding:20px 16px;min-height:149px;border-radius:16px;background:linear-gradient(145deg,#f7fbf8,#eff8f2);border-color:#cbded2}
#s4 #dz-id input{z-index:2}
#s4 #dz-id:focus-within{outline:2px solid var(--gdeep);outline-offset:3px}
#s4 .finish-id-preview{width:100%;height:122px;object-fit:contain;border-radius:9px;display:block;margin:0 auto 10px}
#s4 .finish-id-preview[hidden],#s4 .finish-id-label[hidden],#s4 .finish-bank-summary[hidden]{display:none}
#s4 .finish-id-label{font-size:13px;color:var(--gdeep);font-weight:600}
#s4 .finish-id-added #dzt-id,#s4 .finish-id-added #dzs-id{display:none}
#s4 .finish-id-image .dz-icon{display:none}
#s4 #fd-id{padding:8px 0;border:0;background:transparent;font-size:12px;font-weight:500;align-items:flex-start;color:#287845;overflow-wrap:anywhere}
#s4 #fd-id svg{flex-shrink:0;margin-top:3px}
#s4 #h-id{font-size:12px;line-height:1.7;color:#607568}
#s4 .lbl{color:#233d2e;font-size:14px}
#s4 .sec-sub{color:#607568;font-size:13px}
#s4 #l-bv{font-size:17px;font-weight:700;margin-bottom:13px}
#s4 .finish-bank-summary{display:flex;align-items:center;gap:14px;padding:18px;background:#f3faf6;border:1px solid #c7e4d2;border-radius:16px;margin-bottom:12px}
#s4 .finish-bank-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #e1eae5;border-radius:12px;color:var(--gdeep);flex-shrink:0}
#s4 .finish-bank-icon .fi{width:25px;height:25px}
#s4 .finish-bank-details{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
#s4 #finish-bank-name{font-size:16px;line-height:1.4;font-weight:700;overflow-wrap:anywhere}
#s4 #finish-bank-caption{font-size:12px;color:#5e7367;line-height:1.6}
#s4 .finish-bank-badge{flex-shrink:0;padding:5px 10px;border:1px solid #c1e1ce;border-radius:20px;background:#e6f5ec;color:#0b773b;font-size:12px;font-weight:600}
#s4 .finish-reconnect{display:none}
#s4.finish-bank-ready #bv-sub,#s4.finish-bank-ready #plaid-tip,#s4.finish-bank-ready #plaid-st.ok{display:none!important}
#s4.finish-bank-ready #plaid-btxt{display:none}
#s4.finish-bank-ready .finish-reconnect{display:inline}
#s4.finish-bank-ready #plaid-btn{background:#fff;border:1px solid #c7ddcf;color:var(--gdeep);padding:11px 16px;min-height:46px;border-radius:12px;box-shadow:none;font-size:13px}
#s4.finish-bank-ready #plaid-btn:hover{background:#f2faf5;transform:none}
#s4 #plaid-st.err{display:flex!important;overflow-wrap:anywhere;font-size:14px;line-height:1.6}
#s4 #plaid-st:not(.ok):not(.err){font-size:14px;overflow-wrap:anywhere}
#s4 .card:has(#cardOptIn) .sec-icon{width:42px;height:42px;border-radius:12px;background:#edf8f1;color:var(--gdeep);box-shadow:none}
#s4 .card:has(#cardOptIn) .sec-icon .fi{stroke:var(--gdeep)}
#s4 #tCard{font-size:17px}
#s4 label[for=cardOptIn]{padding:15px;border:1px solid #dce7e0;border-radius:12px;background:#fbfdfc;font-size:14px;align-items:flex-start}
#s4 label[for=cardOptIn] input{width:20px;height:20px;flex-shrink:0;margin-top:2px}
#s4 .badge-strip{background:transparent;border:0;box-shadow:none;padding:12px 0;margin:0 0 10px}
#s4 .btn-row{gap:12px}
#s4 .btn-row button{border-radius:12px;min-height:52px}
#success{padding:22px 0 36px}
#success .finish-confirmation{max-width:600px;margin:0 auto;background:#fff;border:1px solid #d9e8df;box-shadow:var(--shadow-md);border-radius:24px;padding:38px;text-align:center}
#success .finish-success-icon{width:82px;height:82px;display:grid;place-items:center;background:#edf9f1;border-radius:50%;margin:0 auto 23px}
#success .finish-success-icon>span{width:52px;height:52px;background:linear-gradient(145deg,#0da64d,#15c15d);border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:0 5px 15px rgba(21,193,93,.16)}
#success .finish-success-icon .fi{width:29px;height:29px;stroke-width:2.5}
#success #s-ttl{font-size:29px;line-height:1.25;font-weight:800;letter-spacing:-.7px;color:var(--ink);margin-bottom:13px}
#success #s-sub{font-size:14px;line-height:1.8;color:#5d7164;margin-bottom:26px}
#success .finish-next-steps{text-align:left;margin:0 0 27px;padding:22px;border:1px solid #e1ece5;background:#f9fcfa;border-radius:16px}
#success .finish-next-step{position:relative;display:flex;gap:13px;align-items:flex-start;font-size:14px;color:#344d3e;line-height:1.7;padding-bottom:22px}
#success .finish-next-step:last-child{padding-bottom:0}
#success .finish-next-step:not(:last-child):before{content:'';position:absolute;left:16px;width:1px;top:37px;bottom:4px;background:#d6e5dc}
#success .finish-next-icon{width:34px;height:34px;border-radius:50%;background:#edf7f1;border:1px solid #d6e9dd;color:#157940;display:grid;place-items:center;flex-shrink:0}
#success .finish-next-icon .fi{width:17px;height:17px}
#success #back-home-btn{display:block;background:linear-gradient(100deg,#11a44f,#15c15d);color:#fff;text-decoration:none;border-radius:12px;padding:14px 18px;font-size:15px;font-weight:600;min-height:52px}
#success .finish-store{display:flex;justify-content:center;gap:9px;font-size:12px;color:#5e7265;line-height:1.8;margin-top:25px;padding-top:23px;border-top:1px solid #e4ede7;text-align:left}
#success .finish-store>.fi{width:18px;height:18px;flex-shrink:0;margin-top:3px;color:var(--gdeep)}
#success #store-label{font-weight:600;color:#344f3e}
#success .finish-store a{color:var(--gdeep);font-weight:600;text-decoration:none}
#success .finish-disclaimer{font-size:11px;color:#6b7c71;line-height:1.7;margin-top:20px}
@media(max-width:640px){
  #s4 .finish-id-grid{grid-template-columns:minmax(0,1fr);gap:22px}
  #s4 .finish-id-fields{gap:0}
  #s4 .card{padding:23px 19px}
  #s4 .sec-title{font-size:18px}
  #s4 .sec-sub{font-size:13px;line-height:1.7}
  #s4 #dz-id{padding:20px 18px}
  #s4 .finish-id-preview{height:156px}
  #s4 .finish-bank-summary{flex-wrap:wrap;gap:11px;padding:16px}
  #s4 .finish-bank-details{flex-basis:calc(100% - 60px)}
  #s4 .finish-bank-badge{margin-left:59px;margin-top:-3px}
  #s4 #cardFields input{font-size:16px}
  #s4 #plaid-btn{font-size:15px}
  #s4 .btn-row{gap:9px}
  #s4 .btn-row .btnb{padding:13px 14px}
  #s4 .btn-row .btnp{padding:13px 12px;font-size:15px}
  #success .finish-confirmation{padding:30px 22px;border-radius:22px}
  #success #s-ttl{font-size:26px}
  #success .finish-next-steps{padding:18px 15px}
}
@media(max-width:360px){#s4 .card{padding:20px 14px}#s4 .btn-row .btnp{font-size:14px;gap:5px}#s4 .btn-row .btnp>.fi{display:none}#success .finish-confirmation{padding:27px 17px}}

/* BANK_CONNECT_OPTION_A — existing provider button/status, new empty-state layout. */
#s4 .finish-bank-section{container:bank-connect / inline-size}
#s4 .finish-bank-section #bv-sub{display:none}
#s4 .finish-bank-intro{font-size:14px;line-height:1.75;color:#526b60;margin:0 0 20px}
#s4 .finish-bank-connect-panel{border:1px solid #d2e9da;border-radius:18px;background:linear-gradient(110deg,#eefaf2,#f8fcf9);overflow:hidden}
#s4 .finish-bank-connect-main{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:16px;align-items:center;padding:22px}
#s4 .finish-bank-connect-icon{width:48px;height:48px;display:grid;place-items:center;background:#fff;border:1px solid #c8e9d5;border-radius:14px;color:#087846;box-shadow:0 4px 9px #1a6c3f08}
#s4 .finish-bank-connect-icon .fi{width:25px;height:25px}
#s4 .finish-bank-connect-copy{min-width:0}
#s4 #finish-bank-connect-title{display:block;font-size:17px;line-height:1.5;font-weight:700;letter-spacing:-.3px;color:#123423}
#s4 #plaid-tip{margin:5px 0 0;font-size:13px;line-height:1.7;color:#526b60}
#s4:not(.finish-bank-ready) .finish-bank-section #plaid-btn:not(.connected){width:auto;min-height:51px;padding:13px 18px;border:1px solid #07813f;border-radius:13px;background:linear-gradient(120deg,#098747,#078141);color:#fff;font-size:14px;line-height:1.5;gap:10px;box-shadow:0 5px 12px #0da8531c}
#s4:not(.finish-bank-ready) .finish-bank-section #plaid-btn:not(.connected):hover{background:#06783a;transform:none}
#s4 .finish-bank-connect-label,#s4 .finish-bank-connect-arrow{display:none}
#s4 .finish-bank-section #plaid-btn:not(.connected):not(.loading) #plaid-btxt,#s4 .finish-bank-section #plaid-btn:not(.connected):not(.loading) .finish-bank-existing-check{display:none}
#s4 .finish-bank-section #plaid-btn:not(.connected):not(.loading) .finish-bank-connect-label{display:inline}
#s4 .finish-bank-section #plaid-btn:not(.connected):not(.loading) .finish-bank-connect-arrow{display:block;width:17px;height:17px;transform:rotate(180deg);flex-shrink:0}
#s4:not(.finish-bank-ready) .finish-bank-section #plaid-btn.loading{color:transparent}
#s4 .finish-bank-guide{display:flex;align-items:flex-start;gap:8px;padding:12px 22px;border-top:1px solid #dcefe3;background:#ffffff88;color:#537361;font-size:12px;line-height:1.7}
#s4 .finish-bank-guide .fi{width:15px;height:15px;flex-shrink:0;margin-top:2px}
#s4:not(.finish-bank-ready) .finish-bank-existing-trust{display:none!important}
#s4.finish-bank-ready .finish-bank-intro,#s4.finish-bank-ready .finish-bank-connect-icon,#s4.finish-bank-ready .finish-bank-connect-copy,#s4.finish-bank-ready .finish-bank-guide{display:none}
#s4.finish-bank-ready .finish-bank-connect-panel{border:0;border-radius:0;background:none;overflow:visible}
#s4.finish-bank-ready .finish-bank-connect-main{display:block;padding:0}
/* Cached pre-enhancement JS retains its original connected text/status. */
#s4:not(.finish-bank-ready) .finish-bank-connect-main:has(#plaid-btn.connected){grid-template-columns:minmax(0,1fr)}
#s4:not(.finish-bank-ready) .finish-bank-connect-main:has(#plaid-btn.connected) .finish-bank-connect-icon,#s4:not(.finish-bank-ready) .finish-bank-connect-main:has(#plaid-btn.connected) .finish-bank-connect-copy{display:none}
@container bank-connect (max-width:620px){
  #s4 .finish-bank-connect-main{grid-template-columns:48px minmax(0,1fr);gap:13px;padding:20px}
  #s4:not(.finish-bank-ready) .finish-bank-section #plaid-btn:not(.connected){grid-column:1/-1;width:100%;margin-top:3px;font-size:15px}
  #s4 .finish-bank-guide{padding:12px 20px}
}
@container bank-connect (max-width:400px){
  #s4 .finish-bank-intro{font-size:14px;margin-bottom:17px}
  #s4 .finish-bank-connect-main{grid-template-columns:42px minmax(0,1fr);padding:18px 15px;gap:12px;align-items:start}
  #s4 .finish-bank-connect-icon{width:42px;height:42px;border-radius:12px}
  #s4 .finish-bank-connect-icon .fi{width:23px;height:23px}
  #s4 #finish-bank-connect-title{font-size:16px}
  #s4 #plaid-tip{font-size:13px;line-height:1.65}
  #s4 .finish-bank-guide{padding:12px 15px}
}

/* IAV_WEB_LIVE — verified-first bank details on the last step (2026-09-17). */
.iav-box{margin-top:16px}
.iav-box [hidden],.iav-box[hidden]{display:none!important}
.iav-checking{display:flex;align-items:center;gap:10px;padding:14px 16px;border:1px solid #d2e9da;border-radius:14px;background:#f3faf6;color:#2f5a44;font-size:14px;line-height:1.6}
.iav-checking.warn{border-color:#f2c9a8;background:#fff7f0;color:#9a4a12}
.iav-spin{width:18px;height:18px;border:3px solid #cfe7d8;border-top-color:var(--gdeep);border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}
.iav-checking.warn .iav-spin{border-color:#f2c9a8;border-top-color:#c25a10}
.iav-card{border:1px solid #c7e4d2;border-radius:18px;background:linear-gradient(110deg,#eefaf2,#f8fcf9);padding:20px;overflow:hidden}
.iav-head{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:14px;align-items:center}
.iav-icon{width:48px;height:48px;display:grid;place-items:center;background:#fff;border:1px solid #c8e9d5;border-radius:14px;color:#087846;box-shadow:0 4px 9px #1a6c3f08}
.iav-icon .fi{width:25px;height:25px}
.iav-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.iav-copy strong{font-size:16px;line-height:1.4;color:#123423;letter-spacing:-.2px}
.iav-copy span{font-size:13px;line-height:1.65;color:#526b60}
.iav-badge{flex-shrink:0;padding:5px 11px;border:1px solid #c1e1ce;border-radius:20px;background:#e6f5ec;color:#0b773b;font-size:12px;font-weight:700;white-space:nowrap}
.iav-accounts{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.iav-acct{display:flex;align-items:center;gap:12px;padding:13px 16px;border:1.5px solid var(--border2);border-radius:14px;background:#fff;cursor:pointer;transition:all .18s}
.iav-acct:hover{border-color:var(--gb)}
.iav-acct.checked{border-color:var(--g);background:var(--gl);box-shadow:var(--ring)}
.iav-acct input[type=radio]{width:18px;height:18px;min-height:0;accent-color:var(--g);flex-shrink:0;margin:0}
.iav-acct-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.iav-acct-copy strong{font-size:15px;color:var(--ink);overflow-wrap:anywhere}
.iav-acct-copy span{font-size:12.5px;color:var(--muted)}
.iav-foot{margin-top:14px;font-size:12.5px;line-height:1.7;color:#537361}
.iav-link{color:var(--gdeep);font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.iav-typed{margin-top:4px}
.iav-note{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start;padding:18px;border:1px solid #f0d9c2;border-radius:16px;background:#fff8f1;margin-bottom:18px}
.iav-note-icon{width:44px;height:44px;display:grid;place-items:center;background:#fff;border:1px solid #f0d9c2;border-radius:12px;color:#c25a10}
.iav-note-icon .fi{width:22px;height:22px}
.iav-note-copy{display:flex;flex-direction:column;gap:4px;min-width:0}
.iav-note-copy strong{font-size:15px;line-height:1.45;color:#3a2a1c}
.iav-note-copy span{font-size:13px;line-height:1.65;color:#6a5744}
#s4 #bankFieldsHost .field{margin-bottom:18px}
#s4 #bankFieldsHost .check-img{margin:12px 0 18px}
#iavBack{display:inline-block;font-size:13px;margin-top:2px}
@media (max-width:520px){
  .iav-head{grid-template-columns:42px minmax(0,1fr)}
  .iav-icon{width:42px;height:42px;border-radius:12px}
  .iav-badge{grid-column:2;justify-self:start}
  .iav-card{padding:16px}
  .iav-note{padding:15px;grid-template-columns:40px minmax(0,1fr);gap:12px}
  .iav-note-icon{width:40px;height:40px}
}

/* FINAL_STEP_IDBANK_V1 — 2026-09-17. The operator's read of this page:
   "the ID section the bank verification the account verification
   sections all look way too similar". They did: three light-green cards
   in the same weight, so nothing told the eye what was done and what
   was still owed. Two rules fix it.

   1. GREEN MEANS DONE. The ID upload zone is neutral until a file is
      accepted; the bank blocks stay green because they report a state
      that really is complete. Colour now carries meaning instead of
      brand.
   2. ONE BANK, ONE PANEL. The connected-bank row and the verified
      account card were separate boxes saying overlapping things. They
      are welded into a single panel: the bank (with its real logo) is
      the header, the account is the body, Change bank sits quietly
      underneath both. */

/* Section eyebrows — the two halves of this page, named. */
#s4 .sec-eyebrow{font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;margin-bottom:7px}
#s4 .eyebrow-id{color:#7c8b83}
#s4 .eyebrow-bank{color:#0b8a40}

/* 1. The ID block reads as paperwork, not as a completed step. */
#s4 .finish-id-upload .dz{background:#fbfcfb;border-color:#dfe4e1}
#s4 .finish-id-upload .dz .dz-icon svg{stroke:#6f7f76}
#s4 .finish-id-upload .dz:hover{border-color:var(--gb);background:var(--gl)}
#s4 .finish-id-upload .dz.finish-id-added{background:var(--gl);border-color:var(--gb);border-style:solid}
#s4 .finish-id-upload .dz.finish-id-added .dz-icon svg{stroke:var(--gdeep)}

/* 2. The real bank logo, in place of the generic glyph. */
#s4 #finish-bank-logo{width:30px;height:30px;object-fit:contain;display:block}
#s4 .finish-bank-icon.has-logo{background:#fff;padding:7px}
#s4 .finish-bank-icon.has-logo .fi{display:none}

/* 3. Bank + account as one panel. */
#s4.finish-bank-ready .finish-bank-summary{margin-bottom:0;border-radius:16px 16px 0 0;border-bottom:1px solid #dcece2;background:#fff}
#s4.finish-bank-ready #iavBox:not([hidden]){margin-top:0}
#s4.finish-bank-ready #iavBox:not([hidden]) .iav-card{border-top:0;border-radius:0 0 16px 16px;background:linear-gradient(180deg,#f4faf6,#fbfdfc);padding:18px 18px 16px}
#s4.finish-bank-ready #iavBox:not([hidden]) .iav-head{grid-template-columns:minmax(0,1fr);align-items:center}
#s4.finish-bank-ready #iavBox:not([hidden]) .iav-icon{display:none}
/* The eyebrow already reads VERIFIED in the brand green; a second pill
   beside it said the same word twice and pushed the line into a wrap on
   a phone. One statement, not two. */
#s4.finish-bank-ready #iavBox:not([hidden]) .iav-badge{display:none}
#s4.finish-bank-ready #iavBox:not([hidden]) .iav-copy strong{font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#0b8a40}
#s4.finish-bank-ready #iavBox:not([hidden]) .iav-copy span{font-size:12.5px;color:#607568}
#s4.finish-bank-ready #iavBox:not([hidden]) .iav-accounts{margin-top:12px}
/* Change bank drops to a quiet control under the panel it belongs to. */
#s4.finish-bank-ready .finish-bank-connect-panel{margin-top:12px}
#s4.finish-bank-ready #plaid-btn{width:auto;margin:0 auto;padding:9px 15px;font-size:12.5px;min-height:0;color:#5c7568;border-color:#e0e8e3}
#s4.finish-bank-ready #plaid-btn:hover{color:var(--gdeep);border-color:var(--gb)}
/* The typed fallback is a task, not a result: amber, and never welded
   to the green panel above it. */
#s4 #iavBox:not([hidden]) .iav-typed{margin-top:14px}
#s4.finish-bank-ready #iavBox:not([hidden]):has(.iav-typed:not([hidden])) .iav-card{border-radius:0 0 16px 16px}

/* The line under the licence fields that says what we read off the ID. */
#s4 .id-read{display:flex;align-items:flex-start;gap:8px;margin-top:9px;font-size:12.5px;line-height:1.6;color:#607568}
#s4 .id-read[hidden]{display:none}
#s4 .id-read-dot{width:8px;height:8px;border-radius:50%;background:#c3d2c9;flex-shrink:0;margin-top:6px}
#s4 .id-read.busy .id-read-dot{background:var(--g);animation:idpulse 1s ease-in-out infinite}
#s4 .id-read.ok{color:#0b773b}
#s4 .id-read.ok .id-read-dot{background:var(--g)}
#s4 .id-read.warn{color:#9a4a12}
#s4 .id-read.warn .id-read-dot{background:#e8650a}
/* 2026-09-20: the one-tap answer when the photo and the typing disagree. */
#s4 .id-read-fix{display:inline-flex;align-items:center;margin:8px 0 0 16px;padding:7px 14px;border-radius:999px;border:1.5px solid var(--g);background:#fff;color:#0b773b;font:inherit;font-size:12.5px;font-weight:700;line-height:1.3;cursor:pointer}
#s4 .id-read-fix[hidden]{display:none}
#s4 .id-read-fix:hover{background:#eef8f2}
#s4 .id-read-fix:focus-visible{outline:2px solid var(--g);outline-offset:2px}
@keyframes idpulse{0%,100%{opacity:1}50%{opacity:.25}}

/* The account the paycheck lands in, marked in the chooser. */
#s4 .iav-paytag{margin-left:auto;flex-shrink:0;padding:4px 9px;border:1px solid #c1e1ce;border-radius:20px;background:#e6f5ec;color:#0b773b;font-size:11px;font-weight:700;white-space:nowrap}
@media (max-width:520px){
  #s4 .iav-acct{flex-wrap:wrap}
  #s4 .iav-paytag{margin-left:30px;margin-top:2px}
}

/* Reduced motion (2026-09-18). The page scrolls smoothly and runs a few
   decorative loops (the background blobs, the pulsing read dot). Anyone
   whose device asks for less motion gets instant scrolls and still
   frames; every state stays visible, it simply stops moving. This is
   also what keeps the browser tests deterministic: a smooth scroll that
   is still in flight when a test asks whether an element has stopped
   moving reads as "unstable" and timed out on slow CI runners. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* 2026-09-18, operator's phone: a white box sat beside the bank glyph after
   connecting. The empty logo <img> is `hidden`, but #finish-bank-logo's
   display:block above outranked the hidden attribute. A logo shows only
   once one has loaded (_iavApplyLogo clears `hidden`). */
#s4 #finish-bank-logo[hidden]{display:none}

/* 2026-09-25, the bank step. The in-app browser tip sits under the bank
   button, quiet and informative; the submit error sits centred above the
   buttons so it is the first thing seen after tapping Submit. */
#s4 .finish-bank-iab{margin-top:10px;padding:10px 14px;border-radius:12px;background:#f3f8f5;border:1px solid #dcefe3;color:#3d5a49;font-size:12.5px;line-height:1.6}
#s4 .finish-bank-iab[hidden]{display:none}
.em.sub-err{justify-content:center;text-align:center;margin:0 0 10px;font-size:13px;line-height:1.6}

/* 2026-09-26, IAV coverage. The last-4 confirm sits inside the account card
   (a credit union whose shown last four is not the account number); the
   typed-number warning sits under the typed fields, amber like the note
   above them, and turns firmer only when Submit was pressed without the
   tick. */
#s4 .iav-last4{margin:16px 0 0}
#s4 .iav-last4 .iwrap{max-width:240px}
#s4 .iav-ok{margin-top:8px;font-size:13px;font-weight:700;color:#0b773b}
#s4 .iav-ok.busy{color:#537361;font-weight:600}
#s4 .iav-ok[hidden]{display:none}
#s4 .iav-confirm .iav-foot{margin-top:12px}
/* The confirm card asks the customer to do something, so its title is a
   readable heading, not the small capitals label of the verified card. */
#s4.finish-bank-ready #iavBox:not([hidden]) .iav-confirm .iav-copy strong{font-size:15px;font-weight:700;letter-spacing:0;text-transform:none;color:#123423}
#s4.finish-bank-ready #iavBox:not([hidden]) .iav-confirm .iav-copy span{font-size:13px}
#s4 .iav-mismatch{margin-top:14px;padding:14px 16px;border:1px solid #f0d9c2;border-radius:14px;background:#fff8f1;font-size:13px;line-height:1.65;color:#6a5744}
#s4 .iav-mismatch[hidden]{display:none}
#s4 .iav-mismatch.err{border-color:#e39a6c;background:#fff1e6;color:#7a3d12}
#s4 .iav-mismatch-txt{display:block;overflow-wrap:anywhere}
#s4 .iav-mismatch-ok{display:flex;align-items:center;gap:10px;margin-top:10px;font-weight:600;color:#3a2a1c;cursor:pointer}
#s4 .iav-mismatch-ok input{width:18px;height:18px;min-height:0;margin:0;flex-shrink:0;accent-color:var(--g)}

/* BANK_STEP_V2 (2026-09-27). The bank has its own step, 4 of 5, before the
   ID, 5 of 5. One #s4 serves both: showS puts s4-bank or s4-id on it, and
   each part says which screen it belongs to. On the bank step: what will
   happen before the button, the bank as connected the moment the login
   finishes (a bar, three steps and one line while the transactions load),
   and Continue while they load. */
#s4.s4-bank .s4-id-only,#s4.s4-id .s4-bank-only{display:none!important}
/* Each screen has its own header now; the one page labels are gone. */
#s4 .sec-eyebrow,#s4 #l-bv,#s4 .finish-bank-intro{display:none}
/* The verified card's heading is read, not a small capitals label. */
#s4.finish-bank-ready #iavBox:not([hidden]) .iav-copy strong{font-size:15px;font-weight:700;letter-spacing:0;text-transform:none;color:#123423}

/* What connecting is, before the button. */
#s4 .bank-intro{list-style:none;margin:2px 0 22px;padding:0;display:grid;gap:14px}
#s4 .bank-intro li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:start;font-size:14px;line-height:1.5;color:var(--ink2)}
#s4 .bank-intro li b{display:block;color:var(--ink);font-weight:600}
#s4 .bank-intro li b+span{display:block}
#s4 .bank-intro-ico{width:40px;height:40px;border-radius:12px;background:var(--gl);border:1px solid #cfeadb;display:grid;place-items:center;color:var(--gdeep)}
#s4 .bank-intro-ico .fi{width:20px;height:20px}
#s4.finish-bank-ready .bank-intro{display:none}

/* One wide button, then one quiet line. */
#s4.s4-bank .finish-bank-connect-panel{border:0;border-radius:0;background:none;overflow:visible}
#s4.s4-bank .finish-bank-connect-main{display:block;padding:0}
#s4.s4-bank .finish-bank-connect-icon,#s4.s4-bank .finish-bank-connect-copy{display:none}
#s4.s4-bank:not(.finish-bank-ready) .finish-bank-section #plaid-btn:not(.connected){width:100%;min-height:54px;padding:14px 18px;border:0;border-radius:14px;background:var(--g);color:#fff;font-size:15.5px;font-weight:700;justify-content:center;box-shadow:0 6px 16px #15c15d33}
#s4.s4-bank:not(.finish-bank-ready) .finish-bank-section #plaid-btn:not(.connected):hover{background:var(--gd)}
#s4.s4-bank .finish-bank-guide{justify-content:center;align-items:center;padding:12px 0 0;border:0;background:none;font-size:12.5px;color:var(--muted)}
#s4.s4-bank .finish-bank-guide .fi{width:13px;height:13px;margin-top:0}
#s4.s4-bank.finish-bank-ready .finish-bank-guide{display:none}
/* A bank's error sits above the button that fixes it. */
#s4.s4-bank #plaid-st.err{margin:0 0 14px}

/* Can't find your bank? */
#s4 .bank-help{margin:18px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink2);text-align:center}
#s4 .bank-help summary{display:inline-block;list-style:none;cursor:pointer;color:var(--gdeep);font-weight:600;text-decoration:underline;text-underline-offset:3px}
#s4 .bank-help summary::-webkit-details-marker{display:none}
#s4 .bank-help ul{margin:12px 0 0;padding:14px 16px 14px 34px;border:1px solid #dcefe3;border-radius:12px;background:#f7fbf8;text-align:left}
#s4 .bank-help li+li{margin-top:6px}
#s4.finish-bank-ready .bank-help{display:none}

/* Connected, transactions loading: the panel under the bank. */
#s4 .bank-progress{border:1px solid #c7e4d2;border-top:0;border-radius:0 0 16px 16px;background:#f4faf6;padding:16px 18px 18px}
#s4 .bank-progress[hidden]{display:none}
#s4 .bank-progress-label{margin:0 0 8px;font-size:13px;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
#s4 .bank-progress-bar{height:6px;margin:0 0 14px;border-radius:6px;background:#dcefe3;overflow:hidden}
#s4 .bank-progress-bar span{display:block;width:12%;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--gd),var(--g));transition:width .8s ease}
#s4 .bank-progress-steps{list-style:none;margin:0;padding:0;display:grid;gap:9px}
#s4 .bank-progress-steps li{display:flex;align-items:center;gap:10px;font-size:13.5px;line-height:1.4;color:var(--muted)}
#s4 .bank-progress-steps li::before{content:'';width:18px;height:18px;flex-shrink:0;box-sizing:border-box;border:2px solid #cfdcd4;border-radius:50%}
#s4 .bank-progress-steps li.done{color:var(--ink)}
#s4 .bank-progress-steps li.done::before{border-color:var(--g);background:var(--g) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat}
#s4 .bank-progress-steps li.now{color:var(--ink);font-weight:600}
#s4 .bank-progress-steps li.now::before{border-color:#cfeadb;border-top-color:var(--gdeep);animation:spin .8s linear infinite}
#s4 .bank-progress-note{margin:14px 0 0;font-size:13px;line-height:1.6;color:var(--ink2);overflow-wrap:anywhere}
#s4 .bank-progress-note.slow{padding:10px 12px;border:1px solid #f3dcbd;border-radius:10px;background:#fff7ec;color:#6a4a22}
/* While loading, the panel carries the line and the button waits out of sight. */
#s4.bank-loading #plaid-st:not(.err){display:none!important}
#s4.bank-loading #plaid-btn.loading{display:none}
/* Done: the three ticks, then the account the loan uses. */
#s4.bank-done .bank-progress{padding:14px 18px;background:#fff}
#s4.bank-done .bank-progress-label,#s4.bank-done .bank-progress-bar,#s4.bank-done .bank-progress-note{display:none}
#s4 #plaid-area:has(#iavBox:not([hidden]) #iavVerified:not([hidden])) .bank-progress,
#s4 #plaid-area:has(#iavBox:not([hidden]) #iavConfirm:not([hidden])) .bank-progress{border-radius:0}
#s4.bank-done #iavVerified .iav-head{display:none}
#s4.bank-done #iavVerified .iav-accounts{margin-top:0}
#s4.bank-done #iavBox:not([hidden]) .iav-card{background:#fff;padding-top:4px}

/* Chase and U.S. Bank (_iavOneField): the bank name comes from the
   connection and the type from the matching account, so both are hidden;
   the account number keeps its re-type box (2026-09-28). */
#s4 #bankFieldsHost.iav-one #bankFields{display:flex;flex-direction:column}
#s4 #bankFieldsHost.iav-one .iav-f-type{order:9}
#s4 #bankFieldsHost.iav-one .iav-f-bn,#s4 #bankFieldsHost.iav-one .check-img,#s4 #bankFieldsHost.iav-one .iav-f-type.iav-auto{display:none!important}

/* Continue waits for a bank; it still answers a tap with what is missing. */
#s4.bank-not-connected #bank-next{opacity:.5;box-shadow:none}

/* The ID step: what the bank still needs, and Submit waiting for it. */
#s4 .bank-attn{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 14px;margin:0 0 20px;padding:14px 16px;border:1px solid #f0d9c2;border-radius:14px;background:#fff8f1;color:#6a4a22;font-size:14px;line-height:1.55}
#s4 .bank-attn[hidden]{display:none}
#s4 .bank-attn-txt{flex:1 1 220px;min-width:0;overflow-wrap:anywhere}
#s4 .bank-attn-btn{flex-shrink:0;padding:9px 14px;border:1.5px solid #e8650a;border-radius:10px;background:#fff;color:#9a4a12;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
#s4 .bank-attn-btn:focus-visible{outline:2px solid #e8650a;outline-offset:2px}
#s4 .sub-wait{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 12px;font-size:13.5px;line-height:1.55;color:#2f5a44;text-align:left}
#s4 .sub-wait[hidden]{display:none}
/* Connected: the button reads "Use a different bank" only. */
#s4.finish-bank-ready .finish-bank-connect-label,#s4.finish-bank-ready .finish-bank-connect-arrow{display:none!important}
/* The summary is a closed card when nothing is welded under it. */
#s4.finish-bank-ready #plaid-area:not(:has(.bank-progress:not([hidden]))):not(:has(#iavBox:not([hidden]) .iav-card:not([hidden]))) .finish-bank-summary{border-radius:16px;border-bottom-color:#c7e4d2}