/* ── TOKENS ───────────────────────────────────────── */
:root {
  --cream:#FDF9F5; --orange:#DC5C2B; --orange-lt:#F8E9E0;
  --sage:#4F7F6F; --green:#013E38; --green-lt:#E6F0EC;
  --text:#102421; --mid:#4B605A; --muted:#899590;
  --border:rgba(1,62,56,.1); --track:#EDE2DA; --card:#fff;
  --bg:var(--cream);
  --sh-sm:0 4px 12px rgba(1,62,56,.05);
  --sh-md:0 12px 36px rgba(1,62,56,.09);
  --sh-lg:0 24px 60px rgba(1,62,56,.13);
  --ff:'Plus Jakarta Sans',system-ui,sans-serif;
  --ease:.28s cubic-bezier(.22,1,.36,1);
  --fast:.16s cubic-bezier(.25,1,.5,1);
}
[data-theme="dark"] {
  --bg:#081C19; --text:#fff; --mid:#B2C6C0; --muted:#657570;
  --card:#102421; --green:#4CAF82; --green-lt:rgba(76,175,130,.12);
  --border:rgba(255,255,255,.08); --track:#17302C;
}

/* ── BASE ─────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--ff);background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden;transition:background var(--ease),color var(--ease)}
h1,h2,h3,h4{font-weight:800;line-height:1.1;letter-spacing:-.03em;color:var(--text);text-wrap:balance}
p{color:var(--mid);text-wrap:pretty}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}
.section{padding:96px 0}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--orange);margin-bottom:10px}
@media(max-width:768px){.section{padding:64px 0}.container{padding:0 20px}}

/* ── HEADER ───────────────────────────────────────── */
header{position:fixed;top:0;left:0;width:100%;z-index:100;background:rgba(253,249,245,.92);backdrop-filter:blur(18px) saturate(1.15);border-bottom:1px solid var(--border);transition:background var(--ease),border-color var(--ease)}
[data-theme="dark"] header{background:rgba(8,28,25,.88)}
header .container{display:flex;justify-content:space-between;align-items:center;height:72px}
.logo{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:800;color:#102421}
[data-theme="dark"] .logo{color:#fff}
.logo-icon{width:34px;height:34px;background:var(--orange);border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 12px rgba(220,92,43,.25)}
.logo-icon svg{width:32px;height:32px;color:#fff}
.nav-links{display:flex;align-items:center;gap:28px;list-style:none}
.nav-links a{font-size:14px;font-weight:500;color:var(--mid);transition:color var(--fast)}
.nav-links a:hover{color:var(--orange)}
@media(max-width:768px){.nav-links{display:none}}
.nav-actions{display:flex;align-items:center;gap:12px}
.theme-toggle{background:none;border:1px solid var(--border);width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--mid);transition:all var(--fast)}
.theme-toggle:hover{color:var(--orange);border-color:var(--orange)}
.theme-toggle svg{width:18px;height:18px}

/* ── BUTTONS ──────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 22px;border-radius:12px;font-family:var(--ff);font-size:15px;font-weight:700;cursor:pointer;border:none;transition:all var(--fast);gap:8px;min-height:46px}
.btn-primary{background:#013E38;color:#FDF9F5;box-shadow:0 4px 14px rgba(1,62,56,.2)}
.btn-primary:hover{background:var(--sage);color:#fff;transform:translateY(-2px);box-shadow:0 8px 20px rgba(79,127,111,.25)}
.btn-secondary{background:transparent;color:var(--text);border:1.5px solid var(--border)}
.btn-secondary:hover{border-color:var(--orange);color:var(--orange)}

/* ── STORE BUTTONS ────────────────────────────────── */
.store-btn{display:inline-flex;align-items:center;gap:11px;background:#000;color:#fff;border-radius:13px;padding:9px 18px 9px 14px;text-decoration:none;transition:opacity var(--fast),transform var(--fast);min-width:152px;border:1px solid rgba(255,255,255,.14)}
.store-btn:hover{opacity:.83;transform:translateY(-1px)}
.store-btn-icon{flex-shrink:0}
.store-btn-text{display:flex;flex-direction:column;gap:1px}
.store-sub{font-size:10px;font-weight:400;line-height:1;opacity:.72;font-family:var(--ff);display:block}
.store-name{font-size:17px;font-weight:700;line-height:1.15;letter-spacing:-.4px;font-family:var(--ff);display:block}
.badge-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.store-badge-link{display:inline-block;text-decoration:none;transition:opacity var(--fast),transform var(--fast)}
.store-badge-link:hover{opacity:.83;transform:translateY(-1px)}
.store-badge-link img{display:block;height:40px;width:auto}

/* ── HERO ─────────────────────────────────────────── */
.hero{padding-top:clamp(116px,12vw,156px);padding-bottom:clamp(64px,9vw,108px);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:80px -15vw auto auto;width:min(62vw,740px);height:min(62vw,740px);background:radial-gradient(circle at 54% 44%,rgba(220,92,43,.16) 0%,transparent 34%),radial-gradient(circle at 34% 64%,rgba(79,127,111,.16) 0%,transparent 44%);filter:blur(8px);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,.8fr);gap:clamp(40px,6vw,88px);align-items:center}
@media(max-width:992px){.hero-grid{grid-template-columns:1fr}}
.hero h1{font-size:clamp(42px,5.8vw,78px);line-height:.98;letter-spacing:-.04em;margin-bottom:22px;max-width:680px}
.hero-desc{font-size:clamp(16px,1.7vw,20px);line-height:1.55;color:var(--mid);margin-bottom:32px;max-width:560px}
.hero-ctas{display:flex;gap:14px;margin-bottom:36px;flex-wrap:wrap}
.hero-proof{display:flex;flex-wrap:wrap;gap:8px}
.hero-proof span{font-size:13px;font-weight:600;color:var(--mid);border:1px solid rgba(1,62,56,.12);border-radius:999px;padding:7px 12px;background:rgba(255,255,255,.55)}
[data-theme="dark"] .hero-proof span{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}

/* Hero phone — BLACK, proper iPhone proportions */
.hero-image-wrapper{position:relative;display:flex;justify-content:center;align-items:center;min-height:620px}
.hero-phone{width:clamp(272px,28vw,328px);height:clamp(568px,58vw,672px);background:#000;border:10px solid #1C1C1E;border-radius:50px;position:relative;overflow:hidden;flex-shrink:0;
  box-shadow:0 0 0 1px rgba(255,255,255,.12),0 40px 84px rgba(0,0,0,.48),0 16px 32px rgba(0,0,0,.28);
  animation:phoneIn .9s cubic-bezier(.22,1,.36,1) both}
.hero-phone-island{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:84px;height:25px;background:#000;border-radius:12.5px;z-index:10}
.hero-phone-screen{width:100%;height:100%;overflow:hidden;background:#080808}

/* Hero widget card */
@media(max-width:768px){.hero-signal{display:none}}

/* ── STORE STRIP ──────────────────────────────────── */
.store-strip{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:22px 0;background:rgba(255,255,255,.52);backdrop-filter:blur(18px)}
[data-theme="dark"] .store-strip{background:rgba(16,36,33,.65)}
.store-strip .container{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.store-strip-label{font-size:14px;font-weight:700;color:var(--mid)}
@media(max-width:640px){.store-strip .container{flex-direction:column;text-align:center}}

/* ── FEATURES SCROLL ──────────────────────────────── */
.features-scroll-section{position:relative}
.section-heading{margin-bottom:60px}
.section-heading h2{font-size:clamp(30px,4vw,52px);max-width:680px}
.section-heading p{font-size:18px;color:var(--mid);max-width:600px;margin-top:12px}
.features-scroll-track{position:relative;height:500vh}
.features-sticky{position:sticky;top:72px;height:calc(100vh - 72px);display:flex;align-items:center;overflow:hidden}
.features-sticky-inner{display:grid;grid-template-columns:360px 1fr;gap:40px;align-items:center;width:100%;max-width:1200px;margin:0 auto;padding:0 24px}
.feature-nav{display:flex;flex-direction:column;gap:4px}
.feature-nav-item{background:none;border:none;cursor:pointer;display:flex;align-items:flex-start;gap:13px;padding:12px 15px;border-radius:14px;text-align:left;width:100%;font-family:var(--ff);transition:background var(--fast)}
.feature-nav-item.active{background:var(--green-lt)}
[data-theme="dark"] .feature-nav-item.active{background:rgba(76,175,130,.1)}
.fn-num{font-size:11px;font-weight:800;color:var(--muted);min-width:20px;margin-top:3px;font-family:var(--ff)}
.feature-nav-item.active .fn-num{color:var(--orange)}
.fn-body{display:flex;flex-direction:column;gap:3px}
.fn-body strong{font-size:15px;color:var(--text);font-weight:700;font-family:var(--ff)}
.fn-body span{font-size:13px;color:var(--muted);line-height:1.45;display:none;font-family:var(--ff)}
.feature-nav-item.active .fn-body span{display:block}
.feature-stage{background:var(--card);border-radius:24px;border:1px solid var(--border);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-md);overflow:hidden}
.fviz{display:none;width:100%;height:100%;align-items:center;justify-content:center}
.fviz.active{display:flex}
/* Mobile fallback */
.features-mobile-fallback{display:none;margin-top:32px}
.fmobile-card{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid var(--border)}
.fmobile-num{font-size:11px;font-weight:800;color:var(--orange);min-width:24px;padding-top:2px}
.fmobile-card strong{font-size:15px;font-weight:700;display:block;margin-bottom:4px}
.fmobile-card p{font-size:14px;color:var(--muted)}
@media(max-width:900px){.features-scroll-track{height:auto;display:none}.features-sticky{position:relative;height:auto}.features-mobile-fallback{display:block !important}}

/* viz: paycycle */
.viz-paycycle{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;padding:32px}
.viz-arc-wrap{position:relative;width:240px;height:140px}
.viz-arc-svg{width:100%;height:100%;overflow:visible}
.viz-arc-track{stroke:#EDE2DA;stroke-width:10;fill:none;stroke-linecap:round}
[data-theme="dark"] .viz-arc-track{stroke:#17302C}
.viz-arc-fill{stroke:url(#viz-arc-grad);stroke-width:10;fill:none;stroke-linecap:round;stroke-dasharray:190 314;animation:arcFill 2s cubic-bezier(.22,1,.36,1) both}
.viz-arc-center{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);text-align:center}
.viz-arc-amount{font-size:32px;font-weight:800;letter-spacing:-.04em;color:var(--text);font-family:var(--ff)}
.viz-arc-sub{font-size:12px;color:var(--muted);font-family:var(--ff)}
.viz-dates{display:flex;justify-content:space-between;width:240px;font-size:12px;color:var(--muted);font-weight:500;font-family:var(--ff)}
.viz-payday{font-weight:700;color:var(--orange)}
.viz-pills{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.viz-pill{font-size:12px;font-weight:600;padding:5px 12px;border-radius:999px;border:1px solid var(--border);color:var(--muted);background:var(--card);font-family:var(--ff)}
.viz-pill.active{border-color:var(--orange);color:var(--orange);background:var(--orange-lt)}

/* viz: sync */
.viz-sync{display:flex;align-items:center;justify-content:center;gap:24px;padding:40px;width:100%}
.viz-sync-node{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--muted);font-family:var(--ff)}
.viz-sync-icon{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center}
.sync-bank-ic{background:var(--green-lt);color:#013E38}
[data-theme="dark"] .sync-bank-ic{color:#4CAF82}
.sync-bank-ic svg{width:28px;height:28px}
.sync-envi-ic{background:var(--orange);color:#fff;font-size:13px;font-weight:800;font-family:var(--ff)}
.viz-sync-pipe{position:relative;flex:1;height:4px;display:flex;align-items:center}
.sync-track{position:absolute;inset:0;background:var(--border);border-radius:2px}
.sync-dot{position:absolute;width:8px;height:8px;background:var(--orange);border-radius:50%;animation:dotPipe 2.1s linear infinite;animation-delay:var(--d,0s)}
.sync-plaid{position:absolute;top:-26px;left:50%;transform:translateX(-50%);background:var(--card);border:1px solid var(--border);border-radius:8px;padding:4px 10px;display:flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--mid);white-space:nowrap;font-family:var(--ff)}
.sync-plaid svg{width:13px;height:13px}

/* viz: homescreen */
.viz-homescreen{display:flex;flex-direction:column;align-items:center;gap:16px;padding:32px}
.viz-phone-shell{width:180px;background:#181818;border-radius:28px;border:6px solid #2a2a2a;padding:12px 10px;box-shadow:0 16px 40px rgba(0,0,0,.35)}
.viz-hs-notch{width:56px;height:14px;background:#000;border-radius:7px;margin:0 auto 10px}
.viz-hs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.viz-app-ic{aspect-ratio:1;border-radius:10px;background:hsl(var(--hue,220),55%,58%)}
.viz-widget-slot{grid-column:span 4;height:62px;background:rgba(255,255,255,.95);border-radius:14px;padding:7px 9px;display:flex;flex-direction:column;justify-content:space-between}
.viz-w-row{display:flex;justify-content:space-between;align-items:center}
.viz-w-brand{font-size:10px;font-weight:800;color:#DC5C2B;font-family:var(--ff)}
.viz-w-date{font-size:8px;color:#7d8d88;font-family:var(--ff)}
.viz-mini-gauge{position:relative;height:32px;display:flex;align-items:center;justify-content:center}
.viz-mini-gauge svg{width:80px;height:32px}
.viz-mini-amt{position:absolute;bottom:0;left:50%;transform:translateX(-50%);font-size:10px;font-weight:800;color:#102421;font-family:var(--ff)}
.viz-hs-cap{font-size:12px;color:var(--muted);text-align:center;font-family:var(--ff)}

/* viz: refresh */
.viz-refresh{display:flex;flex-direction:column;align-items:center;gap:20px;padding:32px;width:100%}
.viz-toast{background:rgba(7,19,17,.88);color:#fff;border-radius:14px;padding:10px 14px;display:flex;align-items:center;gap:12px;width:100%;max-width:256px;backdrop-filter:blur(12px)}
.toast-app{font-size:11px;font-weight:800;color:var(--orange);background:rgba(220,92,43,.22);padding:3px 8px;border-radius:6px;font-family:var(--ff)}
.toast-body strong{font-size:13px;display:block;font-family:var(--ff)}
.toast-body span{font-size:11px;opacity:.7;font-family:var(--ff)}
.viz-refresh-widget{position:relative;background:var(--card);border-radius:18px;border:1px solid var(--border);padding:14px 24px;text-align:center}
.viz-pulse{position:absolute;inset:-8px;border-radius:26px;border:2px solid rgba(220,92,43,.28);animation:pulse 1.8s ease-out infinite;animation-delay:var(--rd,0s)}
.viz-ref-before{font-size:18px;font-weight:800;color:var(--muted);text-decoration:line-through;animation:fadeOut 4s ease-in-out infinite;font-family:var(--ff)}
.viz-ref-after{font-size:24px;font-weight:800;color:var(--text);animation:fadeIn 4s ease-in-out infinite;font-family:var(--ff)}
.viz-ref-lbl{font-size:11px;color:var(--muted);font-family:var(--ff)}
.viz-updated{font-size:11px;font-weight:700;color:var(--sage);background:var(--green-lt);padding:5px 12px;border-radius:999px;font-family:var(--ff)}

/* viz: privacy */
.viz-privacy{display:flex;align-items:center;gap:14px;padding:28px;width:100%}
.viz-priv-col{flex:1}
.priv-col-label{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;font-family:var(--ff)}
.viz-data-rows,.viz-clean-rows{display:flex;flex-direction:column;gap:4px}
.vr{font-size:11px;padding:5px 8px;border-radius:6px;font-weight:500;font-family:var(--ff)}
.vr-blocked{background:#f5f0ea;color:var(--muted);text-decoration:line-through;opacity:.5}
[data-theme="dark"] .vr-blocked{background:rgba(255,255,255,.04)}
.vr-pass{background:var(--green-lt);color:#013E38;animation:slideIn .4s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--ri,0)*.3s + .5s)}
[data-theme="dark"] .vr-pass{background:rgba(76,175,130,.12);color:#4CAF82}
.viz-priv-gate{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--mid);flex-shrink:0}
.gate-icon{width:44px;height:44px;background:var(--green-lt);border-radius:12px;display:flex;align-items:center;justify-content:center}
[data-theme="dark"] .gate-icon{background:rgba(76,175,130,.12)}
.gate-icon svg{width:22px;height:22px;color:#013E38}
[data-theme="dark"] .gate-icon svg{color:#4CAF82}
.viz-clean-row{display:flex;justify-content:space-between;background:var(--green-lt);border-radius:6px;padding:5px 9px;font-size:11px}
[data-theme="dark"] .viz-clean-row{background:rgba(76,175,130,.1)}
.clean-k{color:var(--muted);font-family:var(--ff)}
.clean-v{font-weight:700;color:var(--text);font-family:var(--ff)}
.viz-never{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:700;color:var(--sage);margin-top:8px;padding:4px 8px;background:var(--green-lt);border-radius:6px;font-family:var(--ff)}
[data-theme="dark"] .viz-never{background:rgba(76,175,130,.1);color:#4CAF82}

/* ── SANDBOX ──────────────────────────────────────── */
.sandbox{background:#e9f1ee;border:1px solid rgba(1,62,56,.08);border-radius:28px;padding:clamp(32px,5vw,64px);box-shadow:0 22px 60px rgba(1,62,56,.07)}
[data-theme="dark"] .sandbox{background:var(--card);border-color:var(--border)}
.sandbox-inner{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
@media(max-width:900px){.sandbox-inner{grid-template-columns:1fr;gap:40px}}
.sandbox h2{font-size:clamp(26px,3.2vw,40px);margin-bottom:14px}
.sandbox p{margin-bottom:28px}
.slider-group{margin-bottom:28px}
.slider-label{display:flex;justify-content:space-between;font-size:13px;font-weight:700;color:var(--text);margin-bottom:10px}
.slider-label span:last-child{color:var(--orange)}
.range-slider{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:4px;background:rgba(1,62,56,.12);outline:none;cursor:pointer}
.range-slider::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--orange);cursor:pointer;box-shadow:0 2px 8px rgba(220,92,43,.3);transition:transform var(--fast)}
.range-slider::-webkit-slider-thumb:hover{transform:scale(1.15)}
.ctrl-groups{display:flex;gap:24px;flex-wrap:wrap}
.ctrl-label{font-size:11px;font-weight:800;color:var(--mid);letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px;display:block}
.toggle-group{display:flex;gap:8px}
.toggle-btn{padding:8px 16px;border-radius:999px;background:var(--card);border:1px solid var(--border);font-size:13px;font-weight:600;color:var(--text);cursor:pointer;font-family:var(--ff);transition:all var(--fast)}
.toggle-btn.active{background:var(--text);color:var(--bg);border-color:var(--text)}
.widget-display{display:flex;justify-content:center;align-items:center;min-height:210px}
.w-small{width:170px;height:170px;background:var(--card);border:1px solid var(--border);border-radius:26px;padding:14px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;box-shadow:0 16px 40px rgba(1,62,56,.14);color:var(--text)}
.w-medium{width:336px;height:170px;background:var(--card);border:1px solid var(--border);border-radius:26px;padding:14px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 16px 40px rgba(1,62,56,.14);color:var(--text)}
.w-dark{background:#102421 !important;border-color:rgba(255,255,255,.08) !important;color:#fff !important}
.w-dark .w-label,.w-dark .w-date,.w-dark .w-days,.w-dark .w-streak{color:#657570 !important}
.w-dark .w-amount{color:#fff !important}
.w-brand{font-size:12px;font-weight:800;color:var(--orange)}
.w-amount{font-size:17px;font-weight:800;letter-spacing:-.04em}
.w-label,.w-date,.w-days,.w-streak{font-size:9px;color:var(--muted)}
.w-allowance{font-size:9px;color:var(--muted)}
.w-top-row,.w-bot-row{display:flex;justify-content:space-between;align-items:center;width:100%}
.g-wrap-sm{position:relative;width:108px;height:58px}
.g-wrap-md{position:relative;width:148px;height:76px;margin:0 auto}
.g-wrap-sm .g-text,.g-wrap-md .g-text{position:absolute;bottom:0;left:50%;transform:translateX(-50%);text-align:center;display:flex;flex-direction:column;align-items:center;gap:1px}
.g-track{stroke:var(--track);stroke-linecap:round;fill:none}
.g-prog{stroke:url(#gg-sm);stroke-linecap:round;fill:none;transition:stroke-dasharray .3s ease}
.g-prog-md{stroke:url(#gg-md);stroke-linecap:round;fill:none;transition:stroke-dasharray .3s ease}
.g-wrap-md .w-amount{font-size:22px;letter-spacing:-.04em}

/* ── ONBOARDING ───────────────────────────────────── */
#how-it-works h2{font-size:clamp(28px,3.8vw,50px);margin-bottom:52px;text-align:center}
.onboard-grid{display:grid;grid-template-columns:1fr 300px;gap:52px;align-items:start}
@media(max-width:992px){.onboard-grid{grid-template-columns:1fr}}
.step-cards{display:flex;flex-direction:column;gap:10px}
.step-card{display:flex;align-items:flex-start;gap:16px;padding:17px 20px;border-radius:16px;border:1px solid var(--border);background:var(--card);cursor:pointer;transition:all var(--fast)}
.step-card:hover{border-color:var(--orange)}
.step-card.active{border-color:var(--orange);background:var(--orange-lt)}
[data-theme="dark"] .step-card.active{background:rgba(220,92,43,.08)}
.snum{width:29px;height:29px;border-radius:9px;background:var(--green-lt);color:#013E38;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex-shrink:0;transition:all var(--fast)}
[data-theme="dark"] .snum{background:rgba(76,175,130,.15);color:#4CAF82}
.step-card.active .snum{background:var(--orange);color:#fff}
.step-card h3{font-size:15px;font-weight:700;letter-spacing:-.02em;margin-bottom:3px;transition:color var(--fast)}
.step-card.active h3{color:var(--orange)}
.step-card p{font-size:13px;color:var(--muted)}

/* iPhone frame */
.phone-wrap{display:flex;justify-content:center}
.iphone{width:280px;height:572px;background:#000;border:10px solid #1C1C1E;border-radius:48px;position:relative;overflow:hidden;flex-shrink:0;
  box-shadow:0 0 0 1px rgba(255,255,255,.11),0 28px 64px rgba(0,0,0,.44),0 8px 20px rgba(0,0,0,.22)}
.iphone-island{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:80px;height:24px;background:#000;border-radius:12px;z-index:10}
.sv{display:none;width:100%;height:100%;flex-direction:column}
.sv.active{display:flex}
.sv img{width:100%;height:100%;object-fit:cover;object-position:top}

/* OTP screen mockup */
.otp-screen{background:#F0C0A0;flex:1;display:flex;flex-direction:column;align-items:center;padding:52px 20px 24px;position:relative;overflow:hidden}
.otp-deco{position:absolute;bottom:-30px;left:-20px;opacity:.1;pointer-events:none;width:260px;height:260px}
.otp-inner{position:relative;z-index:2;width:100%;display:flex;flex-direction:column;align-items:center}
.otp-icon-wrap{width:44px;height:44px;background:rgba(220,92,43,.28);border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.otp-icon-wrap svg{width:22px;height:22px;color:#8B2D06}
.otp-heading{font-size:19px;font-weight:800;color:#5C1E04;letter-spacing:-.03em;text-align:center;margin-bottom:4px;font-family:var(--ff)}
.otp-sub{font-size:11px;color:#8B3B20;opacity:.85;text-align:center;margin-bottom:22px;font-family:var(--ff)}
.otp-boxes{display:flex;justify-content:center;gap:7px;margin-bottom:20px}
.otp-box{width:34px;height:42px;background:rgba(255,255,255,.5);border:1.5px solid rgba(180,75,20,.3);border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:#5C1E04;font-family:var(--ff)}
.otp-box.empty{border-style:dashed;opacity:.5}
.otp-btn{width:100%;background:#A83205;color:#fff;border-radius:13px;padding:13px;font-weight:700;font-size:14px;text-align:center;margin-bottom:11px;font-family:var(--ff);border:none;cursor:pointer}
.otp-resend{font-size:11px;color:#8B3B20;opacity:.72;font-family:var(--ff)}
.otp-resend span{font-weight:700}

/* Bank screen mockup */
.bank-screen{background:#DC5C2B;flex:1;display:flex;flex-direction:column;padding:54px 18px 22px;position:relative;overflow:hidden}
.bank-deco{position:absolute;bottom:-40px;right:-30px;opacity:.09;pointer-events:none;width:280px;height:280px}
.bank-inner{position:relative;z-index:2;width:100%;display:flex;flex-direction:column;flex:1}
.bank-trust{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:rgba(255,255,255,.7);margin-bottom:14px;font-family:var(--ff)}
.bank-trust-dot{width:16px;height:16px;background:rgba(255,255,255,.2);border-radius:4px;display:flex;align-items:center;justify-content:center}
.bank-trust-dot svg{width:10px;height:10px;color:#fff}
.bank-heading{font-size:20px;font-weight:800;color:#fff;letter-spacing:-.03em;margin-bottom:4px;font-family:var(--ff)}
.bank-sub{font-size:12px;color:rgba(255,255,255,.72);margin-bottom:18px;font-family:var(--ff)}
.bank-cards{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:18px}
.bank-card{background:rgba(0,0,0,.16);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:11px 12px}
.bank-card-name{font-size:12px;font-weight:800;color:#fff;margin-bottom:2px;font-family:var(--ff)}
.bank-card-acct{font-size:10px;color:rgba(255,255,255,.55);font-family:var(--ff)}
.bank-connect-btn{width:100%;background:#fff;color:#A83205;border-radius:13px;padding:13px;font-weight:800;font-size:13px;text-align:center;border:none;cursor:pointer;font-family:var(--ff);margin-bottom:10px}
.bank-skip{text-align:center;font-size:10px;color:rgba(255,255,255,.5);font-family:var(--ff)}

/* Homescreen mockup */
.home-screen{background:linear-gradient(140deg,#1a3a6e 0%,#0f2248 42%,#1a2e5c 65%,#0d1f3d 100%);flex:1;display:flex;flex-direction:column;padding:50px 12px 14px;gap:10px}
.envi-widget{background:rgba(255,252,248,.97);border-radius:18px;padding:11px 13px 9px;display:flex;flex-direction:column;gap:4px}
.ew-top,.ew-bot{display:flex;justify-content:space-between;align-items:center}
.ew-brand{font-size:11px;font-weight:800;color:#DC5C2B;font-family:var(--ff)}
.ew-date{font-size:9px;color:#7d8d88;font-family:var(--ff)}
.ew-gauge-wrap{position:relative;height:56px;display:flex;align-items:center;justify-content:center}
.ew-gauge-wrap svg{width:144px;height:56px}
.ew-center{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);text-align:center}
.ew-amount{font-size:18px;font-weight:800;color:#102421;letter-spacing:-.04em;line-height:1;font-family:var(--ff)}
.ew-sub{font-size:8px;color:#7d8d88;margin-top:1px;font-family:var(--ff)}
.ew-streak,.ew-days{font-size:8px;color:#7d8d88;font-family:var(--ff)}
.home-app-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.home-app{aspect-ratio:1;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.home-app-lbl{font-size:7px;font-weight:600;color:rgba(255,255,255,.7);font-family:var(--ff)}
.home-envi{background:var(--orange,#DC5C2B)}
.home-envi svg{width:22px;height:22px;color:#fff}
.home-search{background:rgba(255,255,255,.14);backdrop-filter:blur(8px);border-radius:10px;padding:7px 14px;display:flex;align-items:center;gap:6px;color:rgba(255,255,255,.48);font-size:11px;font-family:var(--ff)}
.home-search svg{width:12px;height:12px;opacity:.6}

/* ── FINAL CTA ────────────────────────────────────── */
.final-cta{background:#102421;color:#fffaf4;border-radius:28px;padding:clamp(40px,7vw,72px);text-align:center;box-shadow:0 28px 64px rgba(4,20,17,.2)}
.final-cta h2{color:#fffaf4;font-size:clamp(26px,3.8vw,50px);max-width:680px;margin:0 auto 14px}
.final-cta p{color:#c4d3cf;max-width:540px;margin:0 auto 32px;font-size:17px}
.final-cta .badge-row{justify-content:center}

/* ── FOOTER ───────────────────────────────────────── */
footer{border-top:1px solid var(--border);padding:56px 0 28px;margin-top:96px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:48px;margin-bottom:40px}
@media(max-width:768px){.footer-grid{grid-template-columns:1fr;gap:28px}}
.footer-brand h3{font-size:20px;margin-bottom:12px}
.footer-brand p{color:var(--muted);font-size:14px;max-width:280px}
.footer-links h4{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:14px}
.footer-links ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer-links a{font-size:14px;color:var(--muted);transition:color var(--fast)}
.footer-links a:hover{color:var(--orange)}
.footer-bottom{border-top:1px solid var(--border);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
.footer-bottom p{font-size:13px;color:var(--muted)}

/* ── ANIMATIONS ───────────────────────────────────── */
@keyframes phoneIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes arcFill{from{stroke-dasharray:0 314}to{stroke-dasharray:190 314}}
@keyframes dotPipe{0%{left:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:calc(100% - 8px);opacity:0}}
@keyframes pulse{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.14);opacity:0}}
@keyframes fadeOut{0%,40%{opacity:1}70%,100%{opacity:.3}}
@keyframes fadeIn{0%,40%{opacity:.3;transform:translateY(4px)}70%,100%{opacity:1;transform:translateY(0)}}
@keyframes slideIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:translateX(0)}}
@keyframes widgetPulse{0%{box-shadow:0 4px 20px rgba(0,0,0,.2)}45%{box-shadow:0 4px 32px rgba(220,92,43,.45),0 0 0 2px rgba(220,92,43,.18)}100%{box-shadow:0 4px 20px rgba(0,0,0,.2)}}

/* ── HERO PHONE SCENES ────────────────────────────── */
.ps{position:absolute;inset:0;opacity:0;transition:opacity .55s cubic-bezier(.22,1,.36,1);font-family:var(--ff)}
.ps.ps-on{opacity:1}
#ps-app{background:#F6F0E8;display:flex;flex-direction:column}
#ps-home{background:linear-gradient(148deg,#1B6E9E 0%,#0D3158 38%,#155870 68%,#0B2748 100%);display:flex;flex-direction:column;padding:0 10px 10px}

/* status bar */
.ph-sb{display:flex;justify-content:space-between;align-items:center;padding:10px 14px 2px;font-size:11px;font-weight:700;color:#1C1917}
.ph-sb-ios{color:#fff}
/* app header */
.ph-hdr{display:flex;justify-content:space-between;align-items:center;padding:4px 14px 0}
.ph-greeting{font-size:15px;font-weight:800;color:#1C1917;letter-spacing:-.3px}
.ph-period{font-size:10px;color:#A8A29E;font-weight:500;margin-top:1px}
.ph-streak-badge{display:flex;align-items:center;gap:4px;background:#DC5C2B;color:#fff;border-radius:20px;padding:4px 9px 4px 7px;font-size:11px;font-weight:700;flex-shrink:0}
/* arc */
.ph-arc-wrap{position:relative;padding:0 8px;margin-top:2px}
.ph-arc-center{position:absolute;bottom:8px;left:0;right:0;text-align:center}
.ph-big-num{font-size:27px;font-weight:800;color:#1C1917;letter-spacing:-1.2px;line-height:1}
.ph-big-sub{font-size:10px;color:#A8A29E;font-weight:500;margin-top:2px}
/* on track */
.ph-ontrack{display:inline-flex;align-items:center;gap:5px;background:#E4F2EC;color:#1D5C46;border-radius:20px;padding:5px 12px;font-size:11px;font-weight:700}
/* allowance card */
.ph-allow{margin:5px 10px 6px;background:#013E38;border-radius:14px;padding:10px 13px;display:flex;justify-content:space-between;align-items:center}
.ph-allow-label{font-size:9px;font-weight:700;color:rgba(255,255,255,.6);letter-spacing:.8px;text-transform:uppercase;margin-bottom:2px}
.ph-allow-amt{font-size:22px;font-weight:800;color:#fff;letter-spacing:-1px;line-height:1}
.ph-allow-sub{font-size:9px;color:rgba(255,255,255,.5);margin-top:2px}
.ph-days-box{background:rgba(255,255,255,.12);border-radius:10px;padding:7px 11px;text-align:center}
.ph-days-num{font-size:18px;font-weight:800;color:#fff}
.ph-days-lbl{font-size:8px;color:rgba(255,255,255,.6);font-weight:600}
/* transactions */
.ph-txns{flex:1;background:#fff;border-radius:18px 18px 0 0;padding:10px 12px 0;overflow:hidden;position:relative}
.ph-txns-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:9px;font-weight:700;color:#A8A29E;letter-spacing:.8px;text-transform:uppercase}
.ph-see-all{color:#DC5C2B}
.ph-txn{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid rgba(0,0,0,.05)}
.ph-txn:last-child{border-bottom:none}
.ph-txn-icon{width:30px;height:30px;border-radius:8px;background:#F6F0E8;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#57534E;flex-shrink:0}
.ph-txn-body{flex:1;min-width:0}
.ph-txn-name{font-size:11px;font-weight:600;color:#1C1917;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-txn-date{font-size:9px;color:#A8A29E;margin-top:1px}
.ph-txn-amt{font-size:11px;font-weight:700;color:#1C1917;flex-shrink:0}
/* new-txn slide-in */
.ph-new-txn{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;gap:8px;padding:8px 12px;background:#fff;border-top:1px solid rgba(0,0,0,.06);transform:translateY(100%);opacity:0;transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .3s ease}
.ph-new-txn.ph-new-txn-on{transform:translateY(0);opacity:1}
/* iOS notification pill */
.ph-notif{position:absolute;top:10px;left:8px;right:8px;background:rgba(255,255,255,.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:16px;padding:10px 12px;display:flex;align-items:center;gap:10px;box-shadow:0 8px 30px rgba(0,0,0,.18),0 2px 8px rgba(0,0,0,.1);z-index:30;transform:translateY(-130%);opacity:0;transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .3s ease}
.ph-notif.ph-notif-on{transform:translateY(0);opacity:1}
.ph-notif-icon{width:34px;height:34px;background:#DC5C2B;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ph-notif-body{flex:1;min-width:0}
.ph-notif-app{font-size:10px;font-weight:700;color:#DC5C2B;text-transform:uppercase;letter-spacing:.5px}
.ph-notif-title{font-size:12px;font-weight:700;color:#1C1917;margin-top:1px}
.ph-notif-merchant{font-size:11px;color:#57534E}
.ph-notif-time{font-size:10px;color:#A8A29E;flex-shrink:0;align-self:flex-start}
/* widget */
.ph-widget{background:rgba(255,252,248,.97);border-radius:20px;padding:11px 13px 9px;margin-bottom:8px;box-shadow:0 4px 20px rgba(0,0,0,.2)}
.ph-widget.updating{animation:widgetPulse .9s ease .25s both}
.ph-widget-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px}
.ph-widget-brand{font-size:12px;font-weight:800;color:#DC5C2B}
.ph-widget-date{font-size:9px;color:#7d8d88;font-weight:500}
.ph-widget-arc-wrap{position:relative;display:flex;align-items:center;justify-content:center}
.ph-widget-arc-wrap svg{width:100%;display:block;overflow:visible}
.ph-widget-arc-center{position:absolute;bottom:3px;left:0;right:0;text-align:center}
.ph-widget-amount{font-size:17px;font-weight:800;color:#1C1917;letter-spacing:-.5px;line-height:1}
.ph-widget-sub{font-size:8px;color:#7d8d88;margin-top:1px}
.ph-widget-bot{display:flex;justify-content:space-between;font-size:9px;color:#7d8d88;font-weight:500;margin-top:3px}
.ph-widget-updated{font-size:9px;font-weight:700;color:#1D5C46;background:#E4F2EC;border-radius:8px;padding:3px 8px;text-align:center;margin-top:6px;opacity:0;transition:opacity .4s ease .1s}
/* app grid */
.ph-app-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:7px}
.ph-app-icon{aspect-ratio:1;border-radius:14px;display:flex;align-items:center;justify-content:center}
.ph-app-cell{display:flex;flex-direction:column;align-items:center;gap:3px}
.ph-app-lbl{font-size:7px;font-weight:600;color:rgba(255,255,255,.88);text-align:center;line-height:1.2}
/* search */
.ph-search-bar{background:rgba(255,255,255,.18);backdrop-filter:blur(8px);border-radius:12px;padding:7px 14px;display:flex;align-items:center;gap:6px;color:rgba(255,255,255,.52);font-size:11px;font-weight:500;margin-bottom:7px}
/* dock */
.ph-dock{background:rgba(255,255,255,.2);backdrop-filter:blur(14px);border-radius:20px;padding:9px 14px;display:flex;justify-content:center;gap:14px}
.ph-dock-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center}