/* ============================================================
   ONEBANQ · Marketing site system
   Built on the app design system (Space Grotesk, ink + green,
   premium card gradient). Editorial treatment for marketing.
   ============================================================ */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/SpaceGrotesk-Light.ttf') format('truetype');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/SpaceGrotesk-Regular.ttf') format('truetype');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/SpaceGrotesk-Medium.ttf') format('truetype');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/SpaceGrotesk-SemiBold.ttf') format('truetype');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/SpaceGrotesk-Bold.ttf') format('truetype');}

:root{
  --ink:#0A0A0A; --ink-2:#101010; --grey:#5E5E5E; --grey-2:#878787;
  --bg:#F7F7F7; --surface:#FFFFFF; --line:#E7E7E4; --line-2:#EFEFEC;
  --green:#19B500; --green-text:#127F00; --green-soft:#E8FAE5; --green-soft-2:#DCF9DD;
  --yellow:#FFAD08; --yellow-soft:#FFF6E6;
  --blue:#0064FF; --blue-soft:#E6EFFF;
  --red:#B92626; --red-soft:#FBEAEA;
  --teal:#0C8F8F; --purple:#9747FF;
  --ink-grad:radial-gradient(120% 120% at 50% 120%, #313137 0%, #18181b 55%, #0b0b0c 100%);
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:100px;
  --shadow-card:0 1px 2px rgba(10,10,10,.05);
  --shadow-pop:0 18px 50px -16px rgba(10,10,10,.22);
  --shadow-device:0 40px 90px -30px rgba(10,10,10,.45), 0 12px 30px -14px rgba(10,10,10,.25);
  --maxw:1200px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{margin:0;font-family:'Space Grotesk',system-ui,sans-serif;color:var(--ink-2);background:var(--surface);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  transition:background .3s var(--ease),color .3s var(--ease);}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
::selection{background:var(--green);color:#fff;}

/* ---------- layout ---------- */
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 28px;}
.section{padding:96px 0;}
.section.tight{padding:64px 0;}
.section.dark{background:var(--ink);color:#fff;}
.section.soft{background:var(--bg);}
.section.green{background:var(--green);color:#fff;}
.center{text-align:center;}
.stack{display:flex;flex-direction:column;}
.row{display:flex;}
.wrap{flex-wrap:wrap;}
.gap8{gap:8px;}.gap12{gap:12px;}.gap16{gap:16px;}.gap20{gap:20px;}.gap24{gap:24px;}.gap32{gap:32px;}
.aic{align-items:center;}.jcc{justify-content:center;}.jcsb{justify-content:space-between;}
.mt8{margin-top:8px;}.mt16{margin-top:16px;}.mt24{margin-top:24px;}.mt32{margin-top:32px;}.mt48{margin-top:48px;}

/* ---------- type ---------- */
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--grey-2);}
.eyebrow.green{color:var(--green-text);}
.eyebrow.on-dark{color:rgba(255,255,255,.6);}
.display{font-weight:700;letter-spacing:-.035em;line-height:1.02;font-size:clamp(44px,6.6vw,86px);}
.h1{font-weight:700;letter-spacing:-.03em;line-height:1.05;font-size:clamp(38px,5vw,64px);margin:0;}
.h2{font-weight:700;letter-spacing:-.025em;line-height:1.08;font-size:clamp(30px,3.6vw,46px);margin:0;}
.h3{font-weight:700;letter-spacing:-.02em;line-height:1.15;font-size:clamp(22px,2.2vw,28px);margin:0;}
.lead{font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:var(--grey);max-width:54ch;}
.lead.on-dark{color:rgba(255,255,255,.72);}
.hero-lead{margin-top:-20px;}
.muted{color:var(--grey);}
.muted-2{color:var(--grey-2);}
.green-text{color:var(--green-text);}
.balance-no-wrap{white-space:nowrap;}
em.u{font-style:normal;color:var(--green-text);}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 30px;
  border-radius:16px;font-weight:600;font-size:16px;border:1.5px solid transparent;white-space:nowrap;
  transition:transform .15s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease);}
.btn:active{transform:translateY(1px);}
.btn-dark{background:var(--ink);color:#fff;}
.btn-dark:hover{background:#262626;box-shadow:var(--shadow-pop);}
.btn-green{background:var(--green);color:#fff;}
.btn-green:hover{filter:brightness(.94);box-shadow:0 16px 40px -16px rgba(25,181,0,.6);}
.btn-ghost{background:transparent;color:var(--ink-2);border-color:var(--line);}
.btn-ghost:hover{background:var(--bg);border-color:#d9d9d4;}
.btn.on-dark.btn-ghost{color:#fff;border-color:rgba(255,255,255,.28);}
.btn.on-dark.btn-ghost:hover{background:rgba(255,255,255,.1);}
.btn-white{background:#fff;color:#0A0A0A;}
.btn-white:hover{background:#f0f0ec;}
.btn-sm{height:46px;padding:0 22px;font-size:15px;border-radius:13px;}
.btn-lg{height:60px;padding:0 36px;font-size:17px;}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.82);backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .25s,background .25s;}
.nav.scrolled{border-color:var(--line);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:78px;}
.nav-logo{display:flex;align-items:center;height:48px;}
.nav-logo svg{height:48px;width:auto;}
.nav-logo svg path,.nav-logo svg polygon{fill:var(--ink);}
.nav-links{display:flex;align-items:center;gap:34px;}
.nav-links a:not(.btn){font-size:15.5px;font-weight:500;color:var(--ink-2);transition:color .15s;}
.nav-links a:not(.btn):hover{color:var(--green-text);}
.nav-right{display:flex;align-items:center;gap:14px;}
.nav-toggle{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:#fff;align-items:center;justify-content:center;}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--ink);position:relative;}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink);}
.nav-toggle span::before{top:-6px;}.nav-toggle span::after{top:6px;}

/* ---------- device / phone embed ---------- */
.device{position:relative;width:var(--dw);height:var(--dh);border-radius:38px;overflow:hidden;background:#fff;
  box-shadow:var(--shadow-device);border:1px solid rgba(10,10,10,.06);flex:0 0 auto;}
.device::after{content:"";position:absolute;inset:0;border-radius:38px;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);}
.device iframe{position:absolute;top:0;left:0;width:390px;height:calc(var(--dh) / var(--sc));
  transform:scale(var(--sc));transform-origin:top left;border:0;background:#fff;pointer-events:none;}
.device.loading{background:var(--bg);}
.device.loading::before{content:"";position:absolute;inset:0;background:
  linear-gradient(100deg,transparent 20%,rgba(255,255,255,.6) 50%,transparent 80%);
  background-size:200% 100%;animation:shimmer 1.4s infinite;}
@keyframes shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
.device-fade{position:absolute;left:0;right:0;bottom:0;height:90px;border-radius:0 0 38px 38px;
  background:linear-gradient(to bottom,transparent,rgba(255,255,255,.001));pointer-events:none;}

/* ---------- pills / chips ---------- */
.pill{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;border-radius:var(--r-pill);
  font-size:14px;font-weight:600;background:var(--bg);color:var(--ink-2);border:1px solid var(--line);}
.pill.green{background:var(--green-soft);color:var(--green-text);border-color:transparent;}
.pill.yellow{background:var(--yellow-soft);color:#9A6A00;border-color:transparent;}
.pill.yellow .dot{background:var(--yellow);}
.pill.on-dark{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.14);}
.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--green);}
.tag{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--grey-2);}

/* ---------- cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:34px;}
.card.soft{background:var(--bg);border-color:transparent;}
.feature{position:relative;border-radius:var(--r-xl);padding:34px;overflow:hidden;border:1px solid var(--line);background:#fff;}
.feature .ficon{width:54px;height:54px;border-radius:15px;display:flex;align-items:center;justify-content:center;
  background:var(--ink);color:#fff;margin-bottom:78px;}
.feature .ficon .ms{font-size:28px;}
.feature h3{font-size:23px;font-weight:700;letter-spacing:-.02em;margin:0 0 10px;}
.feature p{margin:0;color:var(--grey);font-size:16px;line-height:1.55;}
.feature.tint-green{background:var(--green-soft);border-color:transparent;}
.feature.tint-green .ficon{background:var(--green);}
.feature.tint-blue{background:var(--blue-soft);border-color:transparent;}
.feature.tint-blue .ficon{background:var(--blue);}
.feature.tint-yellow{background:var(--yellow-soft);border-color:transparent;}
.feature.tint-yellow .ficon{background:var(--yellow);color:var(--ink);}

/* ---------- steps ---------- */
.step{position:relative;padding:30px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);}
.step .snum{font-size:14px;font-weight:700;color:var(--green-text);letter-spacing:.06em;}
.step h3{font-size:21px;margin:14px 0 8px;font-weight:700;letter-spacing:-.02em;}
.step p{margin:0;color:var(--grey);font-size:15.5px;}

/* ---------- grids ---------- */
.grid{display:grid;gap:22px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;}
.split.reverse{grid-template-columns:.95fr 1.05fr;}
.split.legal{grid-template-columns:1fr 2fr;align-items:start;gap:48px;}

/* ---------- icon (Material Symbols) ---------- */
.ms{font-family:'Material Symbols Outlined';font-weight:400;font-style:normal;font-size:24px;line-height:1;
  letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;direction:ltr;
  -webkit-font-feature-settings:'liga';font-feature-settings:'liga';-webkit-font-smoothing:antialiased;
  font-variation-settings:'opsz' 24,'wght' 400,'GRAD' 0,'FILL' 0;}

/* ---------- fee table ---------- */
.feetable{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;}
.feetable th,.feetable td{text-align:left;padding:20px 24px;border-bottom:1px solid var(--line-2);}
.feetable thead th{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-2);background:var(--bg);font-weight:700;}
.feetable tbody tr:last-child td{border-bottom:none;}
.feetable .fee-amt{font-weight:700;font-size:20px;white-space:nowrap;}
.feetable .fee-name{font-weight:600;}
.feetable .fee-zero{color:var(--green-text);}
/* mobile fee cards (table swaps to cards on small screens) */
.fee-cards{display:none;flex-direction:column;gap:12px;}
.fee-card{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);padding:20px 22px;}
.fee-card-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
.fee-card-name{font-weight:600;font-size:16px;color:var(--ink-2);}
.fee-card-amt{font-weight:700;font-size:22px;white-space:nowrap;flex:0 0 auto;color:var(--ink-2);}
.fee-card-amt.fee-zero{color:var(--green-text);}
.fee-card-when{font-size:13.5px;color:var(--grey);margin-top:6px;line-height:1.45;}
/* nav mobile CTA — hidden on desktop, shown at top of open nav on mobile */
.nav-mobile-cta{display:none;}

/* ---------- big zero ---------- */
.zerocard{display:flex;flex-direction:column;align-items:flex-start;}
.bignum{font-size:clamp(80px,12vw,150px);font-weight:700;letter-spacing:-.05em;line-height:.9;}

/* ---------- FAQ ---------- */
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;background:none;border:none;
  padding:26px 4px;text-align:left;font-size:19px;font-weight:600;color:var(--ink-2);letter-spacing:-.01em;}
.faq-q .ms{transition:transform .25s var(--ease);color:var(--grey-2);}
.faq-item.open .faq-q .ms{transform:rotate(45deg);color:var(--green-text);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s var(--ease);}
.faq-a-inner{padding:0 4px 26px;color:var(--grey);font-size:16px;max-width:70ch;}

/* ---------- trust band ---------- */
.trust{display:flex;align-items:center;justify-content:center;gap:46px;flex-wrap:wrap;}
.trust .titem{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--grey);font-size:15px;}
.trust .titem .ms{color:var(--ink-2);font-size:22px;}

/* ---------- marquee statement ---------- */
.statement{font-weight:700;letter-spacing:-.03em;line-height:1.12;font-size:clamp(28px,4vw,52px);}
.statement .hl{color:var(--green-text);}

/* ---------- footer ---------- */
.footer{background:var(--ink);color:#fff;padding:80px 0 40px;}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;}
.footer-logo svg{height:52px;}
.footer-logo svg path,.footer-logo svg polygon{fill:#fff;}
.footer h4{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45);margin:0 0 18px;font-weight:700;}
.footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px;}
.footer ul a{color:rgba(255,255,255,.78);font-size:15px;}
.footer ul a:hover{color:#fff;}
.footer-addr{color:rgba(255,255,255,.6);font-size:14.5px;line-height:1.6;margin-top:20px;max-width:240px;}
.footer-soc{display:flex;gap:12px;margin-top:22px;}
.footer-soc a{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;color:#fff;transition:background .2s;}
.footer-soc a:hover{background:rgba(255,255,255,.12);}
.footer-soc svg{width:18px;height:18px;}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:32px;
  color:rgba(255,255,255,.5);font-size:13.5px;}
.footer-reg{margin-top:52px;padding-top:32px;border-top:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.46);font-size:13px;line-height:1.85;text-wrap:pretty;}
.footer-reg a{color:rgba(255,255,255,.72);text-underline-offset:2px;}
.footer-reg a:hover{color:#fff;}
.placeholder-note{color:var(--yellow);}

/* ---------- cookie banner ---------- */
.cookiebar{position:fixed;left:20px;bottom:20px;z-index:120;max-width:420px;width:calc(100% - 40px);
  background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:24px;
  box-shadow:0 24px 60px -18px rgba(10,10,10,.35);
  opacity:0;transform:translateY(16px);transition:opacity .35s var(--ease),transform .35s var(--ease);}
.cookiebar.show{opacity:1;transform:none;}
.cookiebar h3{margin:0 0 8px;font-size:18px;font-weight:700;letter-spacing:-.01em;}
.cookiebar p{margin:0 0 16px;font-size:14.5px;line-height:1.55;color:var(--grey);}
.cookiebar p a{color:var(--green-text);font-weight:600;}
.cb-rows{display:flex;flex-direction:column;gap:10px;margin:0 0 16px;}
.cb-row{display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:var(--bg);border-radius:14px;padding:12px 14px;}
.cb-row .cb-name{font-size:14.5px;font-weight:600;}
.cb-row .cb-sub{font-size:12.5px;color:var(--grey-2);line-height:1.45;}
.cb-always{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--green-text);white-space:nowrap;flex:0 0 auto;}
.cb-switch{width:46px;height:27px;border-radius:100px;border:0;background:#C9C9C4;position:relative;cursor:pointer;flex:0 0 auto;padding:0;transition:background .2s;}
.cb-switch::after{content:'';position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff;transition:left .2s;}
.cb-switch.on{background:var(--green);}
.cb-switch.on::after{left:22px;}
.cb-actions{display:flex;gap:10px;flex-wrap:wrap;}
.cb-actions .btn{height:44px;padding:0 18px;font-size:14.5px;border-radius:12px;flex:1;white-space:nowrap;}
.cb-manage{background:none;border:0;padding:10px 0 0;font:inherit;font-size:13.5px;font-weight:600;color:var(--grey-2);cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
.cb-manage:hover{color:var(--ink-2);}
.footer-linkbtn{background:none;border:0;padding:0;font:inherit;font-size:15px;color:rgba(255,255,255,.78);cursor:pointer;text-align:left;}
.footer-linkbtn:hover{color:#fff;}

/* ---------- theme toggle ---------- */
.theme-toggle{width:46px;height:46px;border-radius:13px;border:1.5px solid var(--line);background:var(--surface);
  display:flex;align-items:center;justify-content:center;color:var(--ink-2);flex:0 0 auto;
  transition:background .2s,border-color .2s,color .2s;}
.theme-toggle:hover{border-color:#c9c9c4;background:var(--bg);}
.theme-toggle .ms{font-size:22px;}
.theme-toggle .moon{display:none;}
html[data-theme="dark"] .theme-toggle .sun{display:none;}
html[data-theme="dark"] .theme-toggle .moon{display:block;}

/* ---------- hero bg accents ---------- */
.blob{position:absolute;border-radius:50%;filter:blur(8px);opacity:.5;pointer-events:none;z-index:0;}

/* ---------- reveal animation ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}

/* ---------- page hero (inner pages) ---------- */
.page-hero{padding:72px 0 40px;}
.prose{max-width:760px;}
.prose h2{font-size:24px;font-weight:700;letter-spacing:-.02em;margin:40px 0 10px;}
.prose h2:first-child{margin-top:0;}
.prose p{margin:0 0 16px;color:var(--ink-2);}
.prose strong{color:var(--ink-2);}
.prose .muted{color:var(--grey);}

/* ---------- legal pages ---------- */
.prose ul{margin:0 0 16px;padding-left:22px;color:var(--ink-2);}
.prose ul li{margin:0 0 8px;}
.prose .inshort{display:flex;gap:8px;align-items:baseline;font-size:14.5px;color:var(--green-text);font-weight:600;margin:0 0 12px;}
.prose .inshort .ms{font-size:17px;flex:0 0 auto;transform:translateY(2px);}
.legaltable{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;font-size:15px;margin:0 0 18px;}
.legaltable th,.legaltable td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line-2);vertical-align:top;}
.legaltable thead th{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-2);background:var(--bg);font-weight:700;}
.legaltable tbody tr:last-child td{border-bottom:none;}
.legal-meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:13.5px;color:var(--grey-2);font-weight:600;}
.legal-meta .sep{opacity:.5;}

/* ---------- static app screenshots ---------- */
.device.auto{height:auto;}
.device .appshot{display:block;width:100%;height:auto;}

/* ---------- eligibility strip ---------- */
.eligibility-strip{border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);}
.eligibility{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  padding:16px 24px;font-size:14.5px;color:var(--grey);text-align:center;}
.eligibility .ms{font-size:19px;color:var(--green-text);flex:0 0 auto;}
.eligibility strong{color:var(--ink-2);}

/* ---------- how-it-works step rail ---------- */
.stepnum{display:inline-flex;align-items:center;gap:12px;}
.stepnum .n{width:40px;height:40px;border-radius:50%;background:var(--green-soft);color:var(--green-text);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;flex:0 0 auto;}
.stepnum .lbl{font-weight:700;color:var(--green-text);letter-spacing:.08em;font-size:13px;text-transform:uppercase;}

/* ---------- how-it-works alternating flow + fluid line ---------- */
.hiw{position:relative;}
.hiw-line{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0;}
.hiw-line path{fill:none;stroke-linecap:round;}
.hiw-line .hiw-track{stroke:var(--line);stroke-width:2;stroke-dasharray:2 8;opacity:.5;}
.hiw-line .hiw-draw{stroke:var(--green);stroke-width:2.5;opacity:.4;}
.hiw-step{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,6vw,90px);align-items:center;padding:56px 0;}
.hiw-step:nth-of-type(even) .hiw-text{order:2;}
.hiw-step:nth-of-type(even) .hiw-shot{order:1;}
.hiw-shot{display:flex;justify-content:center;}
.hiw-text,.hiw-shot{opacity:0;transform:translateY(26px);transition:opacity .6s var(--ease),transform .6s var(--ease);}
.hiw-step.in .hiw-text,.hiw-step.in .hiw-shot{opacity:1;transform:none;}
.hiw-step.in .hiw-shot{transition-delay:.1s;}
.stepnum .n{transition:background .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease);}
.hiw-step.lit .stepnum .n{background:var(--green);color:#fff;box-shadow:0 0 0 7px var(--green-soft);}
@media (max-width:1000px){
  .hiw-step{grid-template-columns:1fr;gap:28px;padding:40px 0;}
  .hiw-step:nth-of-type(even) .hiw-text{order:1;}
  .hiw-step:nth-of-type(even) .hiw-shot{order:2;}
}
@media (prefers-reduced-motion: reduce){
  .hiw-text,.hiw-shot{opacity:1;transform:none;transition:none;}
  .stepnum .n{transition:none;}
}

/* ---------- inline email capture ---------- */
.ea-form{display:flex;gap:10px;max-width:480px;margin:0 auto;flex-wrap:wrap;justify-content:center;}
.ea-form input{flex:1;min-width:220px;height:56px;border-radius:16px;border:0;padding:0 20px;font:inherit;font-size:16px;background:rgba(255,255,255,.96);color:#0A0A0A;}
.ea-form input::placeholder{color:#878787;}
.ea-form input:focus{outline:3px solid rgba(255,255,255,.5);}
.ea-form .btn{flex:0 0 auto;}

/* ---------- faq side nav ---------- */
.faq-nav{display:flex;flex-direction:column;gap:4px;}
.faq-nav a{display:block;padding:9px 14px;border-radius:10px;font-size:15px;font-weight:600;color:var(--grey);}
.faq-nav a:hover{background:var(--bg);color:var(--ink-2);}
.faq-nav a.on{background:var(--green-soft);color:var(--green-text);}
.faq-sec{scroll-margin-top:96px;}

/* ---------- icon flash guard (pages with site.js only) ---------- */
body[data-page] .ms{opacity:0;}
html.icons-ready body[data-page] .ms{opacity:1;transition:opacity .2s;}

/* ---------- responsive ---------- */
@media (min-width:761px){
  .hero-lead{margin-top:-60px;}
}
@media (max-width:1000px){
  .hiw-line{display:none;}
  .split,.split.reverse,.split.legal{grid-template-columns:1fr;gap:40px;}
  .split.legal > [style*="sticky"]{position:static!important;}
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .footer-top{grid-template-columns:1fr 1fr;gap:32px 24px;}
}
@media (max-width:760px){
  .section{padding:68px 0;}
  .nav-links,.nav-right .btn{display:none;}
  .nav-toggle{display:flex;}
  .nav.open .nav-links{display:flex;position:absolute;top:78px;left:0;right:0;flex-direction:column;
    gap:4px;background:#fff;border-bottom:1px solid var(--line);padding:14px 28px 22px;align-items:flex-start;}
  .nav.open .nav-links a{padding:12px 0;width:100%;font-size:18px;}
  .nav-mobile-cta{display:inline-flex !important;width:100%;margin-bottom:10px;justify-content:center;}
  .nav.open .nav-links .nav-mobile-cta{padding:14px 18px;font-size:15px;}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
  .trust{gap:22px;}
  .feature .ficon{margin-bottom:18px;}
  .footer-top{grid-template-columns:1fr 1fr;}
  .container{padding:0 20px;}
  .feetable{display:none;}
  .fee-cards{display:flex;}
}

/* ============================================================
   DARK MODE  (html[data-theme="dark"])
   --ink stays brand-black as a FILL; --ink-2 is the text token
   and flips to light. Surfaces, lines and soft tints re-mapped.
   ============================================================ */
html[data-theme="dark"]{
  --bg:#0C0C0E; --surface:#16161A; --line:#2A2A30; --line-2:#222228;
  --ink-2:#F2F2F3; --grey:#A6A6AD; --grey-2:#82828B;
  --green-text:#54DB4D; --green-soft:#11331A; --green-soft-2:#143D1F;
  --yellow-soft:#2C2410; --blue-soft:#0E1C36; --red-soft:#2E1515;
  --shadow-card:0 1px 2px rgba(0,0,0,.5);
  --shadow-pop:0 18px 50px -16px rgba(0,0,0,.7);
  --shadow-device:0 40px 90px -30px rgba(0,0,0,.85),0 12px 30px -14px rgba(0,0,0,.6);
}
html[data-theme="dark"] body{background:var(--bg);}
html[data-theme="dark"] .section.soft{background:#101013;}
html[data-theme="dark"] .section.dark{background:#000;}
/* nav */
html[data-theme="dark"] .nav{background:rgba(12,12,14,.82);}
html[data-theme="dark"] .nav-logo svg path,html[data-theme="dark"] .nav-logo svg polygon{fill:var(--ink-2);}
html[data-theme="dark"] .nav-toggle{background:var(--surface);border-color:var(--line);}
html[data-theme="dark"] .nav-toggle span,html[data-theme="dark"] .nav-toggle span::before,html[data-theme="dark"] .nav-toggle span::after{background:var(--ink-2);}
html[data-theme="dark"] .nav.open .nav-links{background:var(--surface);border-color:var(--line);}
/* primary CTA inverts to a light pill on dark */
html[data-theme="dark"] .btn-dark{background:var(--ink-2);color:#0A0A0A;}
html[data-theme="dark"] .btn-dark:hover{background:#fff;}
html[data-theme="dark"] .btn-ghost{color:var(--ink-2);border-color:var(--line);}
html[data-theme="dark"] .btn-ghost:hover{background:var(--surface);border-color:#3a3a42;}
/* white buttons sit on the (still dark) feature/card surfaces, so make them light surfaces */
html[data-theme="dark"] .btn-white{background:var(--ink-2);color:#0A0A0A;}
html[data-theme="dark"] .btn-white:hover{background:#fff;}
/* cards & surfaces */
html[data-theme="dark"] .card{background:var(--surface);border-color:var(--line);}
html[data-theme="dark"] .card.soft{background:var(--surface);}
html[data-theme="dark"] .feature{background:var(--surface);border-color:var(--line);}
html[data-theme="dark"] .feature .ficon{background:#2C2C33;}
html[data-theme="dark"] .step{background:var(--surface);border-color:var(--line);}
html[data-theme="dark"] .pill{background:var(--surface);border-color:var(--line);color:var(--ink-2);}
html[data-theme="dark"] .pill.yellow{background:#33270E;color:var(--yellow);border-color:transparent;}
/* fee table */
html[data-theme="dark"] .feetable{background:var(--surface);border-color:var(--line);}
html[data-theme="dark"] .feetable thead th{background:#101013;}
html[data-theme="dark"] .fee-card{background:var(--surface);border-color:var(--line);}
/* faq */
html[data-theme="dark"] .faq-item{border-color:var(--line);}
/* device */
html[data-theme="dark"] .device{background:var(--surface);border-color:rgba(255,255,255,.08);}
html[data-theme="dark"] .device::after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);}
/* delete-account flow widgets */
html[data-theme="dark"] .da-list .ms{color:var(--ink-2);}
html[data-theme="dark"] .da-note{background:#2C2410;}
html[data-theme="dark"] .field .inp{background:var(--surface);border-color:var(--line);}
html[data-theme="dark"] .checkrow .box{border-color:#4a4a52;}
html[data-theme="dark"] .checkrow.on .box{background:var(--ink-2);border-color:var(--ink-2);}
html[data-theme="dark"] .checkrow.on .box .ms{color:#0A0A0A;}
/* inline white-surface cards in the home fee snapshot keep readable */
html[data-theme="dark"] .feetable .fee-zero{color:var(--green-text);}
/* legal tables */
html[data-theme="dark"] .legaltable{background:var(--surface);border-color:var(--line);}
html[data-theme="dark"] .legaltable thead th{background:#101013;}
/* cookie banner */
html[data-theme="dark"] .cookiebar{box-shadow:0 24px 60px -12px rgba(0,0,0,.7);}
html[data-theme="dark"] .cb-row{background:#101013;}
html[data-theme="dark"] .cb-switch{background:#3a3a42;}
html[data-theme="dark"] .cb-switch.on{background:var(--green);}
/* inline ink-fill cards (dark CTA bands) and icon chips → elevated in dark */
html[data-theme="dark"] .card[style*="background:var(--ink)"]{background:#1C1C20!important;border:1px solid var(--line)!important;}
html[data-theme="dark"] .ficon[style*="background:var(--ink)"]{background:#2C2C33!important;}