/* Dark theme. Applied when <html data-theme="dark">. */
html[data-theme=dark]{color-scheme:dark;
  --ink:#eef1f0;--muted:#9aa8a3;--line:#2a2f2d;--soft:#171a19;--mint:#16302a;--pine:#3fa58a;--pine-d:#2f8f76;
  --paper:#0f1211;--card:#171a19;--bg:#151817;--shadow:none;--sb:#1f6f5c;--sb-d:#185b4b}
html[data-theme=dark] body{background:#0f1211;color:#eef1f0}
html[data-theme=dark] input,html[data-theme=dark] select,html[data-theme=dark] textarea,html[data-theme=dark] button{color:#eef1f0}
html[data-theme=dark] input::placeholder{color:#6c7975}

/* Shared surfaces: cards, panels, modals */
html[data-theme=dark] :is(.top-inner,.plan,.feat,.bub,.pick,.try-result,.try-controls,.shot,.pm-card,.contact,.toc,.step,.demo,.summary,.legal-note,
  .set section,.ov,.ov-box,.bill-card,.bill-form,.metric,.notice,.inputwrap,.plan-card,.empty-ov,.box,.hero-card,.card,.opt,.item,.ledger,.debt-row,.bill,.bill-row,.pay-card,#pay .card,.acct-card,#acct .card,
  .shot-cards div,.shot-box,.shot-main,.shot-bar span,.bill-empty,.pick.dim,.demo .row){background:#171a19;color:#eef1f0;border-color:#2a2f2d}
html[data-theme=dark] :is(.plan.featured,.opt.sel,.opt.tile.sel,.pick:not(.dim)){border-color:#3fa58a}
html[data-theme=dark] :is(.ov.keep,.shot-cards .keep,.summary,.pill.ok,.bill-pill,.chip,.ico,.il,#ob .il,.set .pill.ok){background:#16302a;color:#8fd3bd;border-color:#245544}
html[data-theme=dark] :is(.pill,.set .pill,.bill-pill.off){background:#232827;color:#c5cfcb}
html[data-theme=dark] .top-inner{background:#171a19eb;border-color:#2a2f2d}
html[data-theme=dark] .navlinks a{color:#c5cfcb}html[data-theme=dark] .navlinks a:hover{background:#232827;color:#fff}
html[data-theme=dark] :is(.btn-ghost,.bill-btn.ghost,.set .btn.ghost,.secondary){background:#171a19;color:#eef1f0;border-color:#3a403e}
html[data-theme=dark] :is(.btn-ghost:hover,.bill-btn.ghost:hover){background:#232827}
html[data-theme=dark] :is(.bill-btn,.primary,.plan-cta,.next){background:#3fa58a;color:#0d0d0d}
html[data-theme=dark] :is(.btn-green,.nav-cta,#ob .next){background:#3fa58a!important;color:#0d0d0d!important}
html[data-theme=dark] .btn-yellow{background:#f2b134!important;color:#0d0d0d!important}
html[data-theme=dark] :is(input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea,.bill-field input,.bill-field select,.set select,.set input,#waitlist input,.field input){background:#0f1211;border-color:#3a403e;color:#eef1f0}
html[data-theme=dark] :is(#ob input[type=text],#ob input[type=tel],#ob .opt,#gateEmail,#setEmail,#setCur){color:#eef1f0!important;-webkit-text-fill-color:#eef1f0}
html[data-theme=dark] #ob input::placeholder{-webkit-text-fill-color:#6c7975}
html[data-theme=dark] :is(#ob,#gate,#done,#intro){background:#0f1211}
html[data-theme=dark] #ob .card{background:transparent}
html[data-theme=dark] :is(.try-bar,.bars,.bar,.stack){background:#232827}
html[data-theme=dark] .faq details{border-color:#2a2f2d}
html[data-theme=dark] .step .n{color:#3a403e}
html[data-theme=dark] :is(.save-note,.note,.hd-note,.bill-note,.lede,.sub,.k){color:#9aa8a3}
html[data-theme=dark] :is(h1,h2,h3,h4,strong,b){color:inherit}
html[data-theme=dark] :is(.hero-a .btn-green){background:#fff!important;color:#0d0d0d!important}
html[data-theme=dark] .dark{background:#000}
html[data-theme=dark] .main{background:#0f1211}
html[data-theme=dark] .dash-foot,html[data-theme=dark] footer,html[data-theme=dark] .site-footer{border-color:#2a2f2d;color:#9aa8a3}
html[data-theme=dark] :is(.hc-sp,.shot-chart i::after){fill:#c5cfcb;background:#c5cfcb}
html[data-theme=dark] .hc-leg i.hc-sp{background:#c5cfcb}
html[data-theme=dark] .tab{color:#c5cfcb}html[data-theme=dark] .tab.active{background:#171a19;color:#fff}
html[data-theme=dark] :is(.bill-cc){background:linear-gradient(135deg,#1f6f5c 0%,#000 100%)}
html[data-theme=dark] .fill{background:#4a3a12;color:#f2d28a}
html[data-theme=dark] .shot-side{background:#1f6f5c}
html[data-theme=dark] .remove,html[data-theme=dark] .bill-remove{background:#232827;color:#c5cfcb}
html[data-theme=dark] .switch .track{background:#3a403e}
html[data-theme=dark] .btn.danger{background:#3a1d1d;color:#ff9b9b}
html[data-theme=dark] .hero-b::before,html[data-theme=dark] #ob::before{display:none}
/* Planner panels and controls */
html[data-theme=dark] :is(.panel,.result,.extra-card,.how-step,.guide,.scenario-card,.bills-card,.benefit,.hero-card.ledger,.tabs){background:#171a19;border-color:#2a2f2d}
html[data-theme=dark] .tab:hover:not(.active){background:#232827;color:#eef1f0}
html[data-theme=dark] :is(.metric,.metric.green){background:#0f1211;border-color:#2a2f2d;color:#eef1f0}
html[data-theme=dark] .metric.dark{background:#16302a;color:#eef1f0}
html[data-theme=dark] :is(.item,.item input,.item select,.debt-row input,.bill input,.bill select,.inputwrap input){background:#0f1211;color:#eef1f0;border-color:#3a403e}
html[data-theme=dark] :is(#ob .logo,.logo,.brand){color:#eef1f0}
html[data-theme=dark] #ob .ob-lbl{color:#9aa8a3}
html[data-theme=dark] #ob input[type=text],html[data-theme=dark] #ob input[type=tel]{border-bottom-color:#3a403e}
html[data-theme=dark] :is(.alert,.notice){background:#2b2410;color:#f2d28a;border-color:#4a3a12}
html[data-theme=dark] :is(.bar,.spend-bar){background:#232827}
/* Onboarding answer cards (they force a white background in light mode) */
html[data-theme=dark] :is(#obWhy .opt,#obSrc .opt,#obWhy .opt:hover,#obSrc .opt:hover){background:#171a19!important;border-color:#2a2f2d;box-shadow:0 1px 2px #00000040,0 8px 22px #00000040;color:#eef1f0}
html[data-theme=dark] :is(#obWhy .opt.sel,#obSrc .opt.sel){background:#16302a!important;border-color:#3fa58a;box-shadow:0 0 0 3px #3fa58a33}
html[data-theme=dark] #ob .il{background:#16302a}
html[data-theme=dark] #ob .opt.tile .lb,html[data-theme=dark] #obWhy .opt{color:#eef1f0}
/* Remaining light surfaces found by the dark-mode audit */
html[data-theme=dark] :is(.box,.ai-box,.actions,.scenario-result,.addrow,.secondary,.empty-ov){background:#171a19!important;color:#eef1f0;border-color:#2a2f2d}
html[data-theme=dark] .toast{background:#232827;color:#eef1f0;border-color:#3a403e}
html[data-theme=dark] :is(input,select,textarea):not([type=range]):not([type=checkbox]):not([type=radio]){background:#0f1211!important;color:#eef1f0!important;border-color:#3a403e!important;-webkit-text-fill-color:#eef1f0}
html[data-theme=dark] :is(#pay>div,#acct>div){background:#171a19!important;color:#eef1f0!important;border:1px solid #2a2f2d}
html[data-theme=dark] .shot-side span.on{background:#171a19;color:#eef1f0}
html[data-theme=dark] :is(.actions button,button[onclick*="print"]){background:#232827!important;color:#eef1f0;border-color:#3a403e}

/* Pre-footer band and footer */
html[data-theme=dark] .cx{color:#fff}

html[data-theme=dark] .cx::after{background:linear-gradient(180deg,#0f1211 0%,#0f1211cc 40%,transparent 100%)}
html[data-theme=dark] .cx-p,html[data-theme=dark] .cx-wl{color:#c5cfcb}
html[data-theme=dark] .cx-primary{background:#fff;color:#0d0d0d}html[data-theme=dark] .cx-primary:hover{background:#e6e9e7}
html[data-theme=dark] .cx-ghost{background:#ffffff1f;color:#fff;box-shadow:inset 0 0 0 1px #ffffff33}html[data-theme=dark] .cx-ghost:hover{background:#ffffff33}
html[data-theme=dark] .ft-wlwrap{border-color:#1f2422}html[data-theme=dark] .ft-wl-t{color:#fff}html[data-theme=dark] #wlBox .row{background:#fff;border-color:#fff;box-shadow:none}html[data-theme=dark] #wlBox input{background:#fff!important;color:#0d0d0d!important;-webkit-text-fill-color:#0d0d0d}html[data-theme=dark] #wlBox .row .cx-primary{background:#0d0d0d;color:#fff}
html[data-theme=dark] .ft{background:#000;border-color:#1f2422;color:#9aa8a3}html[data-theme=dark] .ft-col b,html[data-theme=dark] .ft-bottom strong{color:#fff}html[data-theme=dark] .ft-col a{color:#9aa8a3}html[data-theme=dark] .ft-col a:hover{color:#fff}html[data-theme=dark] .ft-bottom{border-color:#1f2422}
html[data-theme=dark] .dash-foot{background:#000;margin-left:calc(-1*clamp(18px,4vw,48px));margin-right:calc(-1*clamp(18px,4vw,48px));padding-left:clamp(18px,4vw,48px);padding-right:clamp(18px,4vw,48px);padding-bottom:22px;border-color:#1f2422}

/* Onboarding: no boxes behind the question, soft glow background */
html[data-theme=dark] #ob{background:radial-gradient(50% 45% at 12% 8%,#1f6f5c55 0,transparent 65%),radial-gradient(40% 40% at 92% 92%,#f2b13422 0,transparent 65%),#070908}
html[data-theme=dark] #ob :is(.card,.step,.ob-lbl,.nav,.dots,.k,.sub,h1){background:transparent!important;box-shadow:none}
html[data-theme=dark] #ob .k{color:#3fa58a}html[data-theme=dark] #ob .sub{color:#9aa8a3}html[data-theme=dark] #ob h1{color:#fff}
html[data-theme=dark] #ob .dots i{background:#2a2f2d}html[data-theme=dark] #ob .dots i.on{background:#3fa58a}
html[data-theme=dark] #ob input[type=text],html[data-theme=dark] #ob input[type=tel]{background:transparent!important;border:0!important;border-bottom:2px solid #2f3734!important;color:#fff!important;-webkit-text-fill-color:#fff}
html[data-theme=dark] #ob input:focus{border-bottom-color:#3fa58a!important}
html[data-theme=dark] #ob .ob-lbl span{background:#16302a;color:#8fd3bd}
html[data-theme=dark] #ob .next{background:#3fa58a;color:#0d0d0d}html[data-theme=dark] #ob .next:disabled{opacity:.35}
html[data-theme=dark] #ob :is(.back,.skip){color:#c5cfcb;background:transparent}
html[data-theme=dark] #ob .logo{color:#fff}html[data-theme=dark] #ob .logo span{color:#3fa58a}

/* Legal pages: readable body text, boxes and table in dark mode */
html[data-theme=dark] :is(.doc p,.doc li,.doc ul,.doc td,.doc strong,.summary,.summary li,.contact,.contact p,.legal-note,.meta,.hero .lede){color:#d7dedb}
html[data-theme=dark] :is(.doc h2,.doc h3,.hero h1,.summary h2,.toc b){color:#fff}
html[data-theme=dark] .doc th{color:#9aa8a3;border-color:#2a2f2d}html[data-theme=dark] .doc td{border-color:#2a2f2d}
html[data-theme=dark] .summary{background:#16302a}html[data-theme=dark] .contact{background:#171a19;border-color:#2a2f2d}
html[data-theme=dark] .toc a{color:#c5cfcb}html[data-theme=dark] .toc a:hover{background:#232827;color:#fff}html[data-theme=dark] .toc{border-color:#2a2f2d}
html[data-theme=dark] .doc a{color:#8fd3bd}html[data-theme=dark] .hero{border-color:#2a2f2d}
html[data-theme=dark] .legal-note{background:#4a3a12;color:#f2d28a}
/* Sign-up page */
html[data-theme=dark] .form{background:#000;color:#fff}html[data-theme=dark] .form .brand{color:#fff}html[data-theme=dark] .form .brand span{color:#3fa58a}
html[data-theme=dark] .card h1{color:#fff}html[data-theme=dark] .card .sub,html[data-theme=dark] .switch,html[data-theme=dark] .fine,html[data-theme=dark] .legal,html[data-theme=dark] .or,html[data-theme=dark] .topline a.back,html[data-theme=dark] .form [data-lang-btn],html[data-theme=dark] .form [data-theme-btn]{color:#9aa8a3}
html[data-theme=dark] .field label{color:#eef1f0}html[data-theme=dark] .field input{background:#0f1211!important;border-color:#2f3734!important;color:#fff!important}
html[data-theme=dark] .form .btn-ghost{background:#0f1211;color:#fff;border-color:#2f3734}html[data-theme=dark] .or::before,html[data-theme=dark] .or::after{background:#2a2f2d}
html[data-theme=dark] .switch button{color:#3fa58a}html[data-theme=dark] .topline a.back:hover{background:#171a19}
html[data-theme=dark] .art{color:#fff}html[data-theme=dark] .art-in p,html[data-theme=dark] .proof{color:#d7dedb}html[data-theme=dark] .art .aurora{background:linear-gradient(180deg,#0f1211 0%,#050807 50%,#000 100%)}

/* Planner sign-up screen */
html[data-theme=dark] #gate,html[data-theme=dark] .gate-form{background:#000;color:#fff}html[data-theme=dark] .gate-top .brand{color:#fff}html[data-theme=dark] .gate-top .brand span{color:#3fa58a}
html[data-theme=dark] #gate h1{color:#fff}html[data-theme=dark] :is(.gate-sub,.gate-switch,.gate-fine,.gate-back){color:#9aa8a3}html[data-theme=dark] .gate-lbl{color:#eef1f0}
html[data-theme=dark] #gate input{background:#0f1211!important;border-color:#2f3734!important;color:#fff!important;-webkit-text-fill-color:#fff}
html[data-theme=dark] .gate-switch a{color:#3fa58a}html[data-theme=dark] .gate-back:hover{background:#171a19}
html[data-theme=dark] .gate-art{color:#fff}html[data-theme=dark] .gate-art-in p,html[data-theme=dark] .gate-proof{color:#d7dedb}html[data-theme=dark] .gate-art .aurora{background:linear-gradient(180deg,#0f1211 0%,#050807 50%,#000 100%)}

/* Phone illustration on the sign-up screens */
html[data-theme=dark] :is(.ill,.gate-ill) .ph-screen{fill:#0f1211}html[data-theme=dark] :is(.ill,.gate-ill) .ph-card2{fill:#1b201e}
html[data-theme=dark] :is(.ill,.gate-ill) .ph-h{fill:#fff}html[data-theme=dark] :is(.ill,.gate-ill) .ph-t{fill:#9aa8a3}
html[data-theme=dark] :is(.ill,.gate-ill) .ph-cta{fill:#3fa58a}html[data-theme=dark] :is(.ill,.gate-ill) .ph-ctat{fill:#0d0d0d}
/* Privacy section cards: the icon sits directly on the card, no strip */
html[data-theme=dark] .dark .pillars .pillar .ico{background:transparent!important;color:#f2b134}
/* Overview quick actions: keep the dark surface when hovered, pressed or focused */
html[data-theme=dark] .qa a{background:#1b201e;color:#eef1f0}
html[data-theme=dark] .qa a:hover,html[data-theme=dark] .qa a:active,html[data-theme=dark] .qa a:focus,html[data-theme=dark] .qa a:focus-visible{background:#262c29;color:#fff}
html[data-theme=dark] .qa a span{color:#3fa58a}
html[data-theme=dark] :is(.ov-box .btn,.ov-box a.btn):hover{background:#3fa58a;color:#0d0d0d}