:root {
  --bg:#080810;--surface:#0f0f1a;--surface2:#161625;--surface3:#1e1e30;
  --border:rgba(255,255,255,0.06);--border2:rgba(255,255,255,0.12);
  --text:#f0f0f0;--muted:#8a8aaa;--muted2:#55556a;
  --green:#00e87a;--green-dim:rgba(0,232,122,0.1);
  --red:#ff4d6a;--red-dim:rgba(255,77,106,0.1);
  --amber:#ffb84d;--amber-dim:rgba(255,184,77,0.1);
  --blue:#4d9fff;--blue-dim:rgba(77,159,255,0.1);
  --purple:#a78bfa;--purple-dim:rgba(167,139,250,0.1);
  --radius:10px;--radius-lg:16px;
  --mono:'DM Mono',monospace;--sans:'DM Sans',sans-serif;--display:'Syne',sans-serif;
  --nav-h:60px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px;min-height:100vh}

/* ── Shared ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 18px;border-radius:var(--radius);font-size:13px;font-family:var(--sans);font-weight:500;cursor:pointer;border:1px solid var(--border2);background:var(--surface2);color:var(--text);transition:all .15s;white-space:nowrap;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none}
.btn:hover{background:var(--surface3)}
.btn-primary{background:var(--green);color:#000;border-color:var(--green);font-weight:700}
.btn-primary:hover{background:#00ff88;transform:translateY(-1px)}
.btn-full{width:100%}
.btn-sm{padding:6px 12px;font-size:12px}
.btn-ghost{background:none;border-color:transparent;color:var(--muted)}
.btn-ghost:hover{color:var(--text);background:var(--surface2)}
.btn-danger{background:var(--red-dim);border-color:var(--red);color:var(--red)}
.form-group{margin-bottom:1rem}
.form-group label{display:block;font-size:11px;color:var(--muted);font-family:var(--mono);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px}
.form-group input,.form-group select,.form-group textarea{width:100%;background:var(--surface2);border:1px solid var(--border2);border-radius:var(--radius);padding:10px 14px;color:var(--text);font-size:14px;font-family:var(--sans);outline:none;transition:border-color .15s}
.form-group input:focus,.form-group textarea:focus{border-color:var(--green)}
.form-group select{cursor:pointer}
.form-group textarea{resize:vertical;min-height:55px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.hint{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.5}
.pos{color:var(--green)}.neg{color:var(--red)}.warn{color:var(--amber)}
.mono{font-family:var(--mono)}
.badge{display:inline-flex;align-items:center;padding:2px 7px;border-radius:4px;font-size:11px;font-family:var(--mono)}
.badge-green{background:var(--green-dim);color:var(--green)}
.badge-amber{background:var(--amber-dim);color:var(--amber)}
.badge-red{background:var(--red-dim);color:var(--red)}
.badge-blue{background:var(--blue-dim);color:var(--blue)}
.bd-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:20px;font-size:12px;font-family:var(--mono);border:1px solid var(--border2);background:var(--surface2);color:var(--muted);cursor:pointer;transition:all .15s;user-select:none;-webkit-tap-highlight-color:transparent}
.bd-chip:hover{border-color:var(--border);color:var(--text)}
.bd-chip.active{color:var(--surface);font-weight:600}
.badge-purple{background:var(--purple-dim);color:var(--purple)}
select{background:var(--surface2);border:1px solid var(--border2);border-radius:var(--radius);padding:6px 10px;color:var(--text);font-size:13px;font-family:var(--sans);outline:none;cursor:pointer}
input[type=range]{width:100%;height:3px;border-radius:2px;outline:none;cursor:pointer;-webkit-appearance:none;background:var(--border2)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--text);border:2px solid var(--bg);cursor:pointer}
.chart-seg{display:inline-flex;align-items:center;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:3px;gap:2px}
.chart-seg-btn{padding:4px 10px;font-size:11px;font-family:var(--mono);font-weight:600;border:none;border-radius:7px;cursor:pointer;background:none;color:var(--muted);transition:all .15s;white-space:nowrap;-webkit-tap-highlight-color:transparent;letter-spacing:.2px}
.chart-seg-btn:hover{color:var(--text)}
.chart-seg-btn.active{background:var(--surface);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,0.35)}
@media(max-width:480px){.chart-seg-btn{padding:4px 8px;font-size:10px}}
.slider-row{margin-bottom:10px}
.slider-meta{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:4px}
.slider-val{color:var(--text);font-family:var(--mono);font-weight:500}
.section-title{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:.75rem;margin-top:1.25rem;padding-bottom:.5rem;border-bottom:1px solid var(--border)}
.section-title:first-child{margin-top:0}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:13px}
th{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--border);text-align:left;font-weight:400;white-space:nowrap}
td{padding:9px 10px;border-bottom:1px solid var(--border);white-space:nowrap}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--surface2)}
.legend{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:10px}
.legend-item{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted)}
.ld{width:9px;height:9px;border-radius:2px}
.charts-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:200;align-items:flex-start;justify-content:center;padding:2rem 1rem;overflow-y:auto}
.modal-overlay.open{display:flex}
.modal{background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius-lg);padding:1.5rem;width:100%;max-width:680px}
.modal h2{font-family:var(--mono);font-size:14px;font-weight:500;margin-bottom:1.25rem;color:var(--green)}
.modal-actions{display:flex;gap:10px;margin-top:1.25rem;justify-content:flex-end}
.inv-row,.debt-row{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:8px;align-items:end;margin-bottom:8px;padding:10px;background:var(--surface2);border-radius:var(--radius);border:1px solid var(--border)}
.reminder{background:var(--amber-dim);border:1px solid rgba(255,184,77,0.25);border-radius:var(--radius);padding:11px 15px;margin-bottom:1.25rem;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.reminder p{font-size:13px;color:var(--amber)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:1.25rem;overflow:hidden}
.card-body{padding:1.25rem}
.tab-content{display:none}.tab-content.active{display:block}

/* ── Currency input wrapper ── */
.cur-wrap{position:relative;display:flex;align-items:center}
.cur-wrap .cur-sym{position:absolute;left:10px;font-family:var(--mono);font-size:13px;color:var(--muted);pointer-events:none;z-index:1}
.cur-wrap input{padding-left:26px;font-family:var(--mono)}
#landing{display:none}
.land-nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:.875rem 2rem;display:flex;justify-content:space-between;align-items:center;background:rgba(8,8,16,0.85);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
.land-logo{font-family:var(--display);font-size:22px;font-weight:800;letter-spacing:-1px;background:linear-gradient(135deg,var(--green),#00b8ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;white-space:nowrap}
.land-nav-links{display:flex;gap:1.5rem;align-items:center}
.land-nav-link{font-size:13px;color:var(--muted);font-family:var(--mono);cursor:pointer;transition:color .15s;text-decoration:none}
.land-nav-link:hover{color:var(--text)}

/* Hero */
.land-hero{display:flex;align-items:center;justify-content:center;text-align:center;padding:6rem 2rem 2.5rem;position:relative;overflow:hidden}
.land-hero::before{content:'';position:absolute;top:10%;left:50%;transform:translateX(-50%);width:900px;height:900px;background:radial-gradient(circle,rgba(0,232,122,0.055) 0%,transparent 60%);pointer-events:none}
.land-hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:260px;background:linear-gradient(transparent,var(--bg));pointer-events:none}
.hero-tag{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;background:var(--green-dim);border:1px solid rgba(0,232,122,0.25);border-radius:20px;font-size:12px;color:var(--green);font-family:var(--mono);margin-bottom:1.25rem;letter-spacing:.5px;animation:fadeUp .5s ease both}
.hero-title{font-family:var(--display);font-size:clamp(36px,5.6vw,60px);font-weight:800;line-height:1.05;letter-spacing:-2px;margin-bottom:1rem;animation:fadeUp .5s ease .08s both}
.hero-title span{background:linear-gradient(135deg,var(--green),#00b8ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-sub{font-size:clamp(14px,1.5vw,16px);color:var(--muted);max-width:580px;margin:0 auto 1.5rem;line-height:1.65;animation:fadeUp .5s ease .16s both}
.hero-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:1.5rem;animation:fadeUp .5s ease .22s both}
.hero-btn{padding:14px 28px;font-size:15px;border-radius:12px;font-weight:700}

/* Social proof bar */
.social-proof-bar{display:flex;gap:0;justify-content:center;animation:fadeUp .5s ease .28s both}
.social-proof-inner{display:flex;gap:0;background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.sp-item{padding:.75rem 1.5rem;text-align:center;border-right:1px solid var(--border)}
.sp-item:last-child{border-right:none}
.sp-num{font-family:var(--mono);font-size:18px;font-weight:700;color:var(--green)}
.sp-label{font-family:var(--mono);font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-top:2px}

/* Dashboard preview */
.dash-preview-section{position:relative;z-index:1;max-width:960px;margin:0 auto;padding:0 2rem 5rem}
.dash-preview-label{text-align:center;font-family:var(--sans);font-size:13px;color:var(--muted);font-weight:500;margin-bottom:1.25rem}
.dash-preview-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 40px 80px rgba(0,0,0,0.5),0 0 0 1px rgba(0,232,122,0.08);position:relative}
.dash-preview-bar{background:var(--surface2);border-bottom:1px solid var(--border);padding:10px 16px;display:flex;align-items:center;gap:8px}
.dash-preview-desktop{display:block}
.dash-preview-mobile-only{display:none}
.dash-preview-desktop-img{display:block}
.dash-preview-mobile-img{display:none}
@media(max-width:768px){
  .dash-preview-desktop{display:none}
  .dash-preview-mobile-only{display:flex;justify-content:center;padding:2rem 1rem}
  .dash-preview-desktop-img{display:none}
  .dash-preview-mobile-img{display:flex;justify-content:center;padding:1rem 0 0}
}
.dash-dot{width:10px;height:10px;border-radius:50%}
/* Real-screenshot phone frame */
.phone-frame{width:260px;background:#0a0a12;border-radius:38px;border:2px solid rgba(255,255,255,0.1);box-shadow:0 30px 60px rgba(0,0,0,0.5),0 0 0 1px rgba(0,232,122,0.07);padding:6px;overflow:hidden;position:relative}
.phone-frame img{display:block;width:100%;height:auto;border-radius:30px;background:#f2f4f8}
html.land-light #landing .phone-frame{background:#0a0a12;box-shadow:0 20px 50px rgba(0,0,0,0.18),0 0 0 1px rgba(0,192,96,0.1)}

/* Testimonials */
.land-testimonials{padding:5rem 2rem;max-width:1100px;margin:0 auto}
.testimonials-label{text-align:center;font-family:var(--mono);font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin-bottom:3rem}
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.testimonial-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;transition:border-color .2s,transform .2s;position:relative}
.testimonial-card:hover{border-color:rgba(0,232,122,0.25);transform:translateY(-2px)}
.testimonial-card::before{content:'❝';position:absolute;top:.75rem;right:1rem;font-size:28px;color:var(--green);opacity:.25;font-family:Georgia,serif;line-height:1}
.testimonial-quote{font-size:14px;line-height:1.7;color:var(--text);margin-bottom:1.25rem}
.testimonial-author{display:flex;align-items:center;gap:10px}
.testimonial-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--green),#00b8ff);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#000;font-family:var(--display);flex-shrink:0}
.testimonial-name{font-size:13px;font-weight:600}
.testimonial-handle{font-size:11px;color:var(--muted);font-family:var(--mono)}

/* vs section */
.land-vs{padding:5rem 2rem;max-width:900px;margin:0 auto}
.vs-title{font-family:var(--display);font-size:clamp(24px,4vw,38px);font-weight:800;letter-spacing:-1.5px;text-align:center;margin-bottom:.75rem;color:var(--text)}
.vs-sub{text-align:center;color:var(--muted);font-size:14px;font-family:var(--mono);margin-bottom:3rem;line-height:1.7}
.vs-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border)}
.vs-col{background:var(--surface);padding:2rem}
.vs-col.theirs{background:var(--surface)}
.vs-col.ours{background:linear-gradient(135deg,rgba(0,232,122,0.04),var(--surface))}
.vs-col-label{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.8px;margin-bottom:.875rem;display:flex;align-items:center;gap:6px}
.vs-col-name{font-size:16px;font-weight:800;letter-spacing:-.5px;margin-bottom:1.25rem}
.vs-row{display:flex;align-items:flex-start;gap:10px;font-size:13px;padding:.5rem 0;border-bottom:1px solid var(--border)}
.vs-row:last-child{border-bottom:none}
.vs-icon{flex-shrink:0;margin-top:1px;font-size:13px}
.vs-text{line-height:1.5}

/* Features */
.land-features{padding:5rem 2rem;max-width:1100px;margin:0 auto}
.features-title{font-family:var(--display);font-size:clamp(26px,4vw,40px);font-weight:800;text-align:center;letter-spacing:-1.5px;margin-bottom:.75rem;color:var(--text)}
.features-sub{text-align:center;color:var(--muted);font-size:14px;margin-bottom:3rem;line-height:1.6;font-family:var(--mono)}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.feature-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;transition:border-color .2s,transform .2s}
.feature-card:hover{border-color:rgba(0,232,122,0.3);transform:translateY(-2px)}
.feature-icon{font-size:26px;margin-bottom:.875rem}
.feature-title{font-family:var(--display);font-size:15px;font-weight:700;margin-bottom:.4rem}
.feature-desc{font-size:12px;color:var(--muted);line-height:1.65}

/* Final CTA */
.land-faq{padding:5rem 2rem;max-width:780px;margin:0 auto}
.land-faq-inner{max-width:780px;margin:0 auto}
.land-faq-eyebrow{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--green);margin-bottom:1rem}
.land-faq-title{font-family:var(--display);font-size:clamp(26px,4vw,40px);font-weight:800;letter-spacing:-1.5px;margin-bottom:2.5rem;line-height:1.1}
.faq-list{display:flex;flex-direction:column;gap:0}
.faq-item{border-bottom:1px solid var(--border)}
.faq-item:first-child{border-top:1px solid var(--border)}
.faq-q{width:100%;background:none;border:none;color:var(--text);font-family:var(--sans);font-size:15px;font-weight:500;text-align:left;padding:1.1rem 0;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;transition:color .15s;-webkit-tap-highlight-color:transparent}
.faq-q:hover{color:var(--green)}
.faq-chevron{font-size:20px;color:var(--muted);flex-shrink:0;transition:transform .25s,color .15s;line-height:1;margin-top:-2px}
.faq-q[aria-expanded="true"] .faq-chevron{transform:rotate(180deg);color:var(--green)}
.faq-a{font-size:14px;color:var(--muted);line-height:1.8;font-family:var(--sans);max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease}
.faq-a.open{max-height:200px;padding-bottom:1.1rem}
html.land-light #landing .faq-item{border-color:rgba(0,0,0,0.1)}
html.land-light #landing .faq-q{color:#0d0d1a}
html.land-light #landing .faq-q:hover{color:#008040}
html.land-light #landing .faq-a{color:#555577}
.land-cta{padding:6rem 2rem;text-align:center;position:relative;overflow:hidden}
.land-cta::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:700px;height:700px;background:radial-gradient(circle,rgba(0,232,122,0.06) 0%,transparent 60%);pointer-events:none}
.land-cta-inner{position:relative;z-index:1;max-width:600px;margin:0 auto}
.cta-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;background:rgba(0,232,122,0.1);border:1px solid rgba(0,232,122,0.25);border-radius:20px;font-size:11px;color:var(--green);font-family:var(--mono);margin-bottom:1.5rem}

.land-footer{padding:2rem;text-align:center;border-top:1px solid var(--border);color:var(--muted);font-size:12px;font-family:var(--mono)}

/* Animations */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes lpulse{0%,100%{opacity:1}50%{opacity:.35}}
.reveal-land{opacity:0;transform:translateY(24px);transition:opacity .55s ease,transform .55s ease}
.reveal-land.visible{opacity:1;transform:translateY(0)}

/* ── Light theme ── */
html.land-light #landing{
  --bg:#ffffff;--surface:#f7f8fc;--surface2:#eef0f6;--surface3:#e4e7f0;
  --border:rgba(0,0,0,0.08);--border2:rgba(0,0,0,0.14);
  --text:#0d0d1a;--muted:#555577;--muted2:#888899;--body:#444466;
  --green:#00c060;--green-dim:rgba(0,192,96,0.08);
  --red:#e02244;--amber:#d97706;--blue:#2563eb;
  --purple:#7c3aed;--purple-dim:rgba(124,58,237,0.08);
  color:#0d0d1a;
  background:#ffffff;
}
html.land-light #landing .land-nav{background:rgba(255,255,255,0.92);border-bottom:1px solid rgba(0,0,0,0.08)}
html.land-light #landing .land-vs,
html.land-light #landing .land-features,
html.land-light #landing .land-testimonials{color:#0d0d1a}
html.land-light #landing .land-hero{background:#fff}
html.land-light #landing .land-hero::before{background:radial-gradient(circle,rgba(0,192,96,0.06) 0%,transparent 60%)}
html.land-light #landing .land-hero::after{background:linear-gradient(transparent,#fff)}
html.land-light #landing .hero-title{color:#0d0d1a}
html.land-light #landing .hero-sub{color:#555577}
html.land-light #landing .btn{background:#eef0f6;border-color:rgba(0,0,0,0.14);color:#0d0d1a}
html.land-light #landing .btn:hover{background:#e4e7f0}
html.land-light #landing .btn-primary{background:#008040;color:#fff;border-color:#008040}
html.land-light #landing .btn-primary:hover{background:#006b35;border-color:#006b35}
html.land-light #landing .btn-ghost{background:none;color:#6b6b8a}
html.land-light #landing .social-proof-inner{background:#fff;border-color:rgba(0,0,0,0.08);box-shadow:0 1px 4px rgba(0,0,0,0.07)}
html.land-light #landing .sp-label{color:#888899}
html.land-light #landing .sp-num{color:#008040}

/* Dashboard preview */
html.land-light #landing .dash-preview-label{color:#555577}
html.land-light #landing .dash-preview-wrap{box-shadow:0 20px 60px rgba(0,0,0,0.1),0 0 0 1px rgba(0,192,96,0.1)}
html.land-light #landing .dash-preview-bar{background:#f0f0f5;border-bottom:1px solid rgba(0,0,0,0.08)}

/* ── How it works section ── */
html.land-light #landing .reveal-land[style*="text-align:center"] h2{color:#0d0d1a!important}
html.land-light #landing .reveal-land[style*="text-align:center"] p{color:#444466!important}
html.land-light #landing .reveal-land[style*="text-align:center"] > div[style*="color:var(--green)"]{color:#008040!important}

/* How it works step cards */
html.land-light #landing div[style*="background:var(--surface)"][style*="border:1px solid var(--border)"][style*="padding:1.5rem"]{background:#fff!important;border-color:rgba(0,0,0,0.09)!important}
html.land-light #landing div[style*="font-family:var(--display)"][style*="color:var(--text)"]{color:#0d0d1a!important}
html.land-light #landing div[style*="color:var(--body)"][style*="line-height:1.7"]{color:#555577!important}
html.land-light #landing div[style*="color:var(--green)"][style*="margin-bottom:1rem"]{color:#008040!important}

/* ── VS comparison section ── */
html.land-light #landing .vs-title{color:#0d0d1a}
html.land-light #landing .vs-sub{color:#555577}
html.land-light #landing .vs-grid{background:rgba(0,0,0,0.07)}
html.land-light #landing .vs-col{background:#fff}
html.land-light #landing .vs-col.ours{background:linear-gradient(135deg,rgba(0,192,96,0.04),#fff)}
html.land-light #landing .vs-col-name{color:#0d0d1a}
html.land-light #landing .vs-col-label{color:#555577}
html.land-light #landing .vs-text{color:#333355}
html.land-light #landing .vs-col.ours .vs-text{color:#0d0d1a}
html.land-light #landing .vs-row{border-bottom-color:rgba(0,0,0,0.07)}

/* ── Features section ── */
html.land-light #landing .features-title{color:#0d0d1a}
html.land-light #landing .features-sub{color:#555577}
html.land-light #landing .feature-title{color:#0d0d1a}
html.land-light #landing .feature-desc{color:#555577}
html.land-light #landing .feature-card{background:#fff!important;border-color:rgba(0,0,0,0.09)!important}

/* ── Blog section ── */
html.land-light #landing section[style*="max-width:860px"] h2{color:#0d0d1a!important}
html.land-light #landing section[style*="max-width:860px"] > div > div > div[style*="color:var(--green)"]{color:#008040!important}
html.land-light #landing section[style*="max-width:860px"] > div > div[style*="font-family:var(--mono)"][style*="color:var(--green)"]{color:#008040!important}
html.land-light #landing div[style*="border:1px solid var(--border)"][style*="border-radius:var(--radius-lg)"][style*="overflow:hidden"]{background:#fff;border-color:rgba(0,0,0,0.09)!important}
html.land-light #landing a[href*="/blog/"][style*="display:block"]{background:transparent}
html.land-light #landing a[href*="/blog/"]:hover{background:#f7f8fc!important}
html.land-light #landing div[style*="font-size:14px"][style*="font-weight:500"][style*="color:var(--text)"]{color:#0d0d1a!important}
html.land-light #landing span[style*="color:var(--muted2)"][style*="white-space:nowrap"]{color:#888899!important}
html.land-light #landing a[href="/blog"][style*="border:1px solid var(--border2)"]{color:#555577!important;border-color:rgba(0,0,0,0.14)!important;background:transparent}
html.land-light #landing div[style*="border-bottom:1px solid var(--border)"]{border-bottom-color:rgba(0,0,0,0.07)!important}

/* ── Testimonials ── */
html.land-light #landing .testimonial-card{background:#fff;box-shadow:0 2px 12px rgba(0,0,0,0.06)}
html.land-light #landing .testimonial-card::before{color:#00a050;opacity:.3}
html.land-light #landing .testimonials-label{color:#888899}
html.land-light #landing .testimonial-quote{color:#1a1a33}
html.land-light #landing .testimonial-name{color:#0d0d1a}
html.land-light #landing .testimonial-handle{color:#888899}

/* CTA section */
html.land-light #landing .land-cta{background:#f0f4ff}
html.land-light #landing .land-cta::before{background:radial-gradient(circle,rgba(0,192,96,0.08) 0%,transparent 60%)}
html.land-light #landing .land-cta h2{color:#0d0d1a}
html.land-light #landing .land-cta h2 span[style*="background"]{background:linear-gradient(135deg,#00a050,#0077cc)!important;-webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important;background-clip:text!important}
html.land-light #landing .land-cta .cta-badge{background:rgba(0,192,96,0.1);border-color:rgba(0,192,96,0.3);color:#008040}
html.land-light #landing .land-cta p{color:#444466}
html.land-light #landing .land-cta .btn-primary{box-shadow:0 0 40px rgba(0,192,96,0.2)}

/* Footer */
html.land-light #landing .land-footer{background:#f7f8fc;color:#555577;border-top:1px solid rgba(0,0,0,0.07)}
html.land-light #landing .land-footer a{color:#555577}
html.land-light #landing .land-footer a:hover{color:#008040}

/* ── Auth screen light mode ── */
html.land-light #auth-screen{
  --bg:#ffffff;--surface:#f7f8fc;--surface2:#eef0f6;--surface3:#e4e7f0;
  --border:rgba(0,0,0,0.08);--border2:rgba(0,0,0,0.14);
  --text:#0d0d1a;--muted:#555577;--muted2:#888899;
  --green:#00c060;--green-dim:rgba(0,192,96,0.08);
  --red:#e02244;--amber:#d97706;--blue:#2563eb;
  background:#ffffff;color:#0d0d1a;
}
html.land-light #auth-screen .auth-card{background:#fff;border-color:rgba(0,0,0,0.12);box-shadow:0 4px 24px rgba(0,0,0,0.08)}
html.land-light #auth-screen .auth-logo{background:linear-gradient(135deg,#00a050,#0077cc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
html.land-light #auth-screen .auth-tagline{color:#888899}
html.land-light #auth-screen .auth-tabs{background:#eef0f6}
html.land-light #auth-screen .auth-tab{color:#555577}
html.land-light #auth-screen .auth-tab.active{background:#fff;color:#0d0d1a}
html.land-light #auth-screen .btn{background:#eef0f6;border-color:rgba(0,0,0,0.14);color:#0d0d1a}
html.land-light #auth-screen .btn:hover{background:#e4e7f0}
html.land-light #auth-screen .btn-primary{background:#00c060;color:#fff;border-color:#00c060}
html.land-light #auth-screen .btn-primary:hover{background:#00a855}
html.land-light #auth-screen .form-group input,
html.land-light #auth-screen .form-group select,
html.land-light #auth-screen .form-group textarea{background:#fff;border-color:rgba(0,0,0,0.14);color:#0d0d1a}
html.land-light #auth-screen .form-group input:focus{border-color:#00c060}
html.land-light #auth-screen .form-group label{color:#888899}
html.land-light #auth-screen .back-to-land{color:#555577}
html.land-light #auth-screen .back-to-land:hover{color:#00c060}
html.land-light #auth-screen .forgot-link{color:#555577}
html.land-light #auth-screen .forgot-link:hover{color:#00c060}
html.land-light #auth-screen .auth-error{background:rgba(224,34,68,0.08);border-color:rgba(224,34,68,0.3)}
html.land-light #auth-screen .auth-success{background:rgba(0,192,96,0.08);border-color:rgba(0,192,96,0.3)}
html.land-light #auth-screen::before{background:radial-gradient(circle,rgba(0,192,96,0.05) 0%,transparent 70%)}

/* ── App light mode ── */
html.app-light #app{
  --bg:#f2f4f8;--surface:#ffffff;--surface2:#eef0f6;--surface3:#e4e7f0;
  --border:rgba(0,0,0,0.08);--border2:rgba(0,0,0,0.14);
  --text:#0d0d1a;--muted:#555577;--muted2:#888899;
  --green:#00b856;--green-dim:rgba(0,184,86,0.1);
  --red:#e02244;--red-dim:rgba(224,34,68,0.1);
  --amber:#d97706;--amber-dim:rgba(217,119,6,0.1);
  --blue:#2563eb;--blue-dim:rgba(37,99,235,0.1);
  --purple:#7c3aed;--purple-dim:rgba(124,58,237,0.1);
  background:#f2f4f8;color:#0d0d1a;
}
html.app-light #app .app-header{background:rgba(242,244,248,0.95);border-bottom-color:rgba(0,0,0,0.1)}
html.app-light #app .app-logo{background:linear-gradient(135deg,#00a050,#0077cc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
html.app-light #app .hamburger{background:#fff;border-color:rgba(0,0,0,0.14);color:#0d0d1a}
html.app-light #app .hamburger span{background:#0d0d1a}
html.app-light #app .user-badge{background:#fff;border-color:rgba(0,0,0,0.12);color:#555577}
html.app-light #app .metric{background:#fff;border-color:rgba(0,0,0,0.08)}
html.app-light #app .metric:hover{border-color:rgba(0,0,0,0.18)}
html.app-light #app .metric-label{color:#888899}
html.app-light #app .card{background:#fff;border-color:rgba(0,0,0,0.08)}
html.app-light #app .desktop-tabs{background:#e4e7f0}
html.app-light #app .dtab{color:#555577}
html.app-light #app .dtab.active{background:#fff;color:#0d0d1a}
html.app-light #app th{color:#888899;border-bottom-color:rgba(0,0,0,0.08)}
html.app-light #app td{border-bottom-color:rgba(0,0,0,0.06)}
html.app-light #app tr:hover td{background:#f7f8fc}
html.app-light #app .section-title{color:#888899;border-bottom-color:rgba(0,0,0,0.08)}
html.app-light #app .btn{background:#eef0f6;border-color:rgba(0,0,0,0.14);color:#0d0d1a}
html.app-light #app .btn:hover{background:#e4e7f0}
html.app-light #app .btn-primary{background:#00b856;color:#fff;border-color:#00b856}
html.app-light #app .btn-primary:hover{background:#009f4a}
html.app-light #app .btn-ghost{background:none;color:#888899;border-color:transparent}
html.app-light #app .btn-ghost:hover{background:#eef0f6;color:#0d0d1a}
html.app-light #app .form-group input,
html.app-light #app .form-group select,
html.app-light #app .form-group textarea{background:#fff;border-color:rgba(0,0,0,0.14);color:#0d0d1a}
html.app-light #app .form-group input:focus{border-color:#00b856}
html.app-light #app .form-group label{color:#888899}
html.app-light #app select{background:#fff;border-color:rgba(0,0,0,0.14);color:#0d0d1a}
html.app-light #app .chart-seg{background:#fff;border-color:rgba(0,0,0,0.08)}
html.app-light #app .chart-seg-btn.active{background:#eef0f6;color:#0d0d1a;box-shadow:0 1px 4px rgba(0,0,0,0.1)}
html.app-light #app .chart-seg-btn{color:#888899}
html.app-light #app .chart-seg-btn:hover{color:#0d0d1a}
html.app-light .sidebar{background:#fff;border-right-color:rgba(0,0,0,0.1)}
html.app-light .sidebar-header{border-bottom-color:rgba(0,0,0,0.08)}
html.app-light .sidebar-logo{background:linear-gradient(135deg,#00a050,#0077cc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
html.app-light .sidebar-close{background:#eef0f6;color:#555577}
html.app-light .sidebar-close:hover{background:#e4e7f0;color:#0d0d1a}
html.app-light .snav-btn{color:#555577}
html.app-light .snav-btn:hover{background:#f7f8fc;color:#0d0d1a}
html.app-light .snav-btn.active{background:#e6f7ee;color:#00a050}
html.app-light .sidebar-section{color:#888899}
html.app-light .sidebar-footer{border-top-color:rgba(0,0,0,0.08)}
html.app-light .sidebar-user{background:#f7f8fc}
html.app-light .sidebar-user-name{color:#0d0d1a}
html.app-light .sidebar-user-email{color:#888899}
html.app-light #app .modal-overlay{background:rgba(0,0,0,0.4)}
html.app-light #app .modal{background:#fff;border-color:rgba(0,0,0,0.12)}
html.app-light #app .modal h2{color:#00a050}
html.app-light #app .reminder{background:rgba(217,119,6,0.08);border-color:rgba(217,119,6,0.2)}
html.app-light #app .reminder p{color:#92400e}
html.app-light #app .inv-row,
html.app-light #app .debt-row{background:#f7f8fc;border-color:rgba(0,0,0,0.08)}
html.app-light #app .badge{color:#555577}
html.app-light #app .slider-group{background:#f7f8fc;border-color:rgba(0,0,0,0.08)}
html.app-light #app .ms-cell{background:#f7f8fc}
html.app-light #app .milestone-card{border-color:rgba(0,0,0,0.08)}
html.app-light #app .guide-section{background:#f7f8fc;border-color:rgba(0,0,0,0.08)}
html.app-light #app .guide-toggle{color:#0d0d1a}
html.app-light #app .guide-toggle:hover{background:#eef0f6}
html.app-light #app .guide-body{color:#555577}
html.app-light #app .guide-body strong{color:#0d0d1a}
html.app-light #app input[type=range]{background:rgba(0,0,0,0.12)}
html.app-light #app input[type=range]::-webkit-slider-thumb{background:#0d0d1a;border-color:#f2f4f8}
html.app-light #app .fab{background:#00b856;box-shadow:0 4px 20px rgba(0,184,86,0.35)}

/* App theme toggle (in header) */
.app-theme-toggle{display:flex;align-items:center;gap:5px;padding:5px 9px;border-radius:20px;border:1px solid var(--border2);background:var(--surface2);cursor:pointer;font-size:12px;font-family:var(--mono);color:var(--muted);transition:all .2s;user-select:none;-webkit-tap-highlight-color:transparent;white-space:nowrap}
.app-theme-toggle:hover{color:var(--text);border-color:var(--green)}
.app-theme-toggle-track{width:26px;height:14px;border-radius:7px;background:var(--surface3);border:1px solid var(--border2);position:relative;transition:background .2s;flex-shrink:0}
.app-theme-toggle-thumb{position:absolute;top:2px;left:2px;width:8px;height:8px;border-radius:50%;background:var(--muted);transition:transform .2s,background .2s}
html.app-light .app-theme-toggle{background:#eef0f6;border-color:rgba(0,0,0,0.14);color:#555577}
html.app-light .app-theme-toggle-track{background:#d0f0e0;border-color:rgba(0,184,86,0.3)}
html.app-light .app-theme-toggle-thumb{background:#00b856;transform:translateX(12px)}
/* Sidebar "Suggest a feature" Tally trigger — matches theme-toggle treatment so it stays legible in both modes */
.sidebar-suggest-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--surface2);color:var(--text);border:1px solid var(--border2);padding:8px 12px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;transition:background .15s,border-color .15s,color .15s}
.sidebar-suggest-btn:hover{border-color:var(--green);color:var(--green)}
html.app-light .sidebar-suggest-btn{background:#eef0f6;border-color:rgba(0,0,0,0.14);color:#333355}
html.app-light .sidebar-suggest-btn:hover{background:#e3e7f0;border-color:#00b856;color:#00a050}
@media(max-width:768px){
  .app-theme-toggle .app-theme-toggle-label{display:none}
  #app-theme-toggle-btn{display:none}
}
.app-theme-strip{display:none}
@media(max-width:768px){
  .app-theme-strip{display:flex;align-items:center;justify-content:space-between;padding:8px 1rem;border-bottom:1px solid var(--border);background:var(--surface);font-size:12px;font-family:var(--mono);color:var(--muted)}
  html.app-light .app-theme-strip{background:#fff;border-bottom-color:rgba(0,0,0,0.08);color:#888899}
}

/* Theme toggle button */
.theme-toggle{display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:20px;border:1px solid var(--border2);background:var(--surface2);cursor:pointer;font-size:12px;font-family:var(--mono);color:var(--muted);transition:all .2s;user-select:none;-webkit-tap-highlight-color:transparent}
.theme-toggle:hover{color:var(--text);border-color:var(--green)}
.theme-toggle-track{width:28px;height:16px;border-radius:8px;background:var(--surface3);border:1px solid var(--border2);position:relative;transition:background .2s;flex-shrink:0}
.theme-toggle-thumb{position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:var(--muted);transition:transform .2s,background .2s}
html.land-light .theme-toggle{background:#eef0f6;border-color:rgba(0,0,0,0.14);color:#555577}
html.land-light .theme-toggle-track{background:#d0f0e0;border-color:rgba(0,192,96,0.3)}
html.land-light .theme-toggle-thumb{background:var(--green);transform:translateX(12px)}

@media(max-width:768px){
  .land-nav-links .land-nav-link:not(.land-nav-cta){display:none}
  .land-nav-links .land-nav-signin{display:none}
  .theme-toggle{display:none}
  .land-nav{padding:.75rem 1rem}
  .land-nav-cta{padding:.5rem .9rem;font-size:13px}
  .testimonials-grid{grid-template-columns:1fr}
  .vs-grid{grid-template-columns:1fr}
  .vs-col.theirs{display:none}
  .features-grid{grid-template-columns:1fr 1fr}
  .social-proof-inner{flex-wrap:wrap}
  .sp-item{flex:1;min-width:80px;border-right:none;border-bottom:1px solid var(--border)}
  .sp-item:last-child{border-bottom:none}
}

/* ── Mobile nav: hamburger button + slide-in drawer ── */
.land-nav-burger{display:none;width:40px;height:40px;border-radius:9px;border:1px solid var(--border2);background:var(--surface);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;-webkit-tap-highlight-color:transparent;transition:border-color .15s,background .15s;flex-shrink:0}
.land-nav-burger:hover,.land-nav-burger:focus-visible{border-color:var(--green);outline:none}
.land-nav-burger span{display:block;width:18px;height:2px;background:var(--text);border-radius:1px;transition:transform .25s ease,opacity .2s ease}
.land-nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.land-nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.land-nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.mobile-nav-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:200}
.mobile-nav-backdrop.open{opacity:1;pointer-events:auto}

.mobile-nav-drawer{position:fixed;top:0;right:0;bottom:0;height:100dvh;width:min(86vw,320px);background:var(--bg);border-left:1px solid var(--border);box-shadow:-12px 0 40px rgba(0,0,0,0.4);transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);z-index:201;display:flex;flex-direction:column;padding:1rem 1.1rem 1.5rem;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.mobile-nav-drawer.open{transform:translateX(0)}

.mobile-nav-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}
.mobile-nav-close{width:36px;height:36px;border-radius:9px;border:1px solid var(--border2);background:transparent;color:var(--muted);font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;-webkit-tap-highlight-color:transparent}
.mobile-nav-close:hover,.mobile-nav-close:focus-visible{color:var(--text);border-color:var(--green);outline:none}

.mobile-nav-list{display:flex;flex-direction:column;gap:.2rem;margin-top:.25rem}
.mobile-nav-list a{display:block;padding:13px 12px;font-size:16px;font-family:var(--display);font-weight:500;color:var(--text);text-decoration:none;border-radius:10px;border:1px solid transparent;transition:background .15s,border-color .15s,color .15s;-webkit-tap-highlight-color:transparent}
.mobile-nav-list a:hover,.mobile-nav-list a:active,.mobile-nav-list a:focus-visible{background:var(--surface);border-color:var(--border);outline:none}

.mobile-nav-divider{margin:1rem 0 .9rem;border:0;border-top:1px solid var(--border)}

.mobile-nav-foot{display:flex;flex-direction:column;gap:.55rem}
.mobile-nav-foot .btn{width:100%;justify-content:center;padding:.75rem 1rem;font-size:14px}
.mobile-nav-foot .mobile-nav-cta{font-weight:700}
.mobile-nav-foot .mobile-nav-theme{display:inline-flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:.65rem 1rem;border-radius:10px;border:1px solid var(--border2);background:var(--surface2);cursor:pointer;font-size:13px;font-family:var(--mono);color:var(--muted);margin-top:.25rem;transition:all .2s;-webkit-tap-highlight-color:transparent}
.mobile-nav-foot .mobile-nav-theme:hover{color:var(--text);border-color:var(--green)}
.mobile-nav-foot .mobile-nav-theme .mobile-nav-theme-label{flex:1;text-align:left}

/* Light-mode overrides */
html.land-light #landing .land-nav-burger{background:#fff;border-color:rgba(0,0,0,0.14)}
html.land-light #landing .land-nav-burger span{background:#0d0d1a}
html.land-light #landing .mobile-nav-drawer{background:#fff;border-left-color:rgba(0,0,0,0.08);box-shadow:-12px 0 40px rgba(0,0,0,0.18)}
html.land-light #landing .mobile-nav-list a{color:#0d0d1a}
html.land-light #landing .mobile-nav-list a:hover,html.land-light #landing .mobile-nav-list a:active,html.land-light #landing .mobile-nav-list a:focus-visible{background:#f7f8fc;border-color:rgba(0,0,0,0.07)}
html.land-light #landing .mobile-nav-divider{border-top-color:rgba(0,0,0,0.07)}
html.land-light #landing .mobile-nav-close{border-color:rgba(0,0,0,0.14);color:#555577}
html.land-light #landing .mobile-nav-close:hover,html.land-light #landing .mobile-nav-close:focus-visible{color:#0d0d1a}
html.land-light #landing .mobile-nav-foot .mobile-nav-theme{background:#eef0f6;border-color:rgba(0,0,0,0.14);color:#555577}
html.land-light #landing .mobile-nav-foot .mobile-nav-theme:hover{color:#0d0d1a;border-color:#008040}

/* Show burger only on mobile */
@media(max-width:768px){
  .land-nav-burger{display:flex}
}

/* Lock body scroll when drawer is open */
body.mobile-nav-open{overflow:hidden;touch-action:none}
.theme-toggle-mobile{display:none}
@media(max-width:768px){
  .theme-toggle-mobile{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:20px;border:1px solid var(--border2);background:var(--surface2);cursor:pointer;font-size:12px;font-family:var(--sans);color:var(--muted);margin-bottom:1.5rem;transition:all .2s;user-select:none;-webkit-tap-highlight-color:transparent;animation:fadeUp .5s ease both}
  .theme-toggle-mobile:hover{color:var(--text);border-color:var(--green)}
}
html.land-light #landing .theme-toggle-mobile{background:#eef0f6;border-color:rgba(0,0,0,0.14);color:#555577}
@media(max-width:480px){
  .features-grid{grid-template-columns:1fr}
  .hero-btns{flex-direction:column;align-items:center}
}

/* ── Auth ── */
/* ── Demo mode ── */
#demo-banner{display:none;position:fixed;top:0;left:0;right:0;z-index:999;background:linear-gradient(90deg,rgba(255,184,77,0.15),rgba(255,184,77,0.08));border-bottom:1px solid rgba(255,184,77,0.35);padding:10px 16px;align-items:center;justify-content:space-between;gap:10px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#demo-banner.visible{display:flex}
.demo-banner-left{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--amber);font-family:var(--sans);font-weight:500;flex:1;min-width:0}
.demo-banner-left span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo-banner-pill{font-size:10px;font-family:var(--mono);background:rgba(255,184,77,0.2);border:1px solid rgba(255,184,77,0.4);border-radius:20px;padding:2px 8px;color:var(--amber);white-space:nowrap;flex-shrink:0}
.demo-banner-actions{display:flex;gap:8px;align-items:center;flex-shrink:0}
.demo-cta-btn{background:var(--amber);color:#000;border:none;border-radius:8px;padding:7px 14px;font-size:12px;font-family:var(--sans);font-weight:700;cursor:pointer;white-space:nowrap;transition:background .15s}
.demo-cta-btn:hover{background:#ffc96e}
.demo-dismiss-btn{background:none;border:none;color:var(--amber);font-size:18px;cursor:pointer;padding:2px 6px;line-height:1;opacity:.7;flex-shrink:0}
.demo-dismiss-btn:hover{opacity:1}
@media(max-width:480px){
  .demo-banner-left span{font-size:12px}
  .demo-cta-btn{padding:6px 10px;font-size:11px}
  #demo-banner{padding:8px 12px}
}
/* push app content below banner when demo active */
body.demo-active #app{padding-top:44px}
body.demo-active .app-nav{top:44px}
@media(max-width:480px){body.demo-active #app{padding-top:40px}body.demo-active .app-nav{top:40px}}
/* demo try-without-signup button on auth screen */
.demo-auth-divider{display:flex;align-items:center;gap:10px;margin:1rem 0 .5rem}
.demo-auth-divider span{font-size:12px;color:var(--muted);white-space:nowrap}
.demo-auth-divider::before,.demo-auth-divider::after{content:'';flex:1;height:1px;background:var(--border)}
.demo-try-btn{width:100%;background:none;border:1px dashed rgba(255,184,77,0.4);border-radius:var(--radius);padding:11px;font-size:13px;font-family:var(--sans);color:var(--amber);cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:7px}
.demo-try-btn:hover{background:rgba(255,184,77,0.07);border-color:rgba(255,184,77,0.65)}
.demo-save-nudge{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(20px);z-index:400;background:var(--surface);border:1px solid rgba(255,184,77,0.4);border-radius:12px;padding:14px 18px;max-width:320px;width:calc(100% - 2rem);box-shadow:0 8px 32px rgba(0,0,0,0.5);display:none;flex-direction:column;gap:10px;animation:slideUp .3s ease forwards}
.demo-save-nudge.visible{display:flex}
@media(max-width:768px){.demo-save-nudge{top:50%;bottom:auto;left:0;right:0;margin-left:auto;margin-right:auto;transform:translateY(calc(-50% + 20px))}.demo-save-nudge.visible{transform:translateY(-50%)}}
.demo-save-nudge-title{font-size:14px;font-weight:600;color:var(--amber)}
.demo-save-nudge-sub{font-size:12px;color:var(--muted);line-height:1.55}
.demo-save-nudge-actions{display:flex;gap:8px}
@keyframes slideUp{from{transform:translateX(-50%) translateY(20px);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}
#auth-screen{display:none;min-height:100vh;align-items:center;justify-content:center;padding:2rem;background:var(--bg);position:relative;overflow-y:auto;overflow-x:hidden}
#auth-screen::before{content:'';position:absolute;top:-200px;left:-200px;width:600px;height:600px;background:radial-gradient(circle,rgba(0,232,122,0.05) 0%,transparent 70%);pointer-events:none}
.auth-card{background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius-lg);padding:2.5rem;width:100%;max-width:420px;position:relative;z-index:1}
.auth-logo{font-family:var(--display);font-size:26px;font-weight:800;letter-spacing:-1px;margin-bottom:.25rem;background:linear-gradient(135deg,var(--green),#00b8ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}
.auth-tagline{font-size:11px;color:var(--muted);font-family:var(--mono);margin-bottom:1.75rem;letter-spacing:.5px}
.auth-tabs{display:flex;gap:2px;background:var(--bg);border-radius:var(--radius);padding:4px;margin-bottom:1.5rem}
.auth-tab{flex:1;padding:8px;border-radius:7px;border:none;cursor:pointer;font-size:13px;font-family:var(--sans);font-weight:500;background:none;color:var(--muted);transition:all .15s}
.auth-tab.active{background:var(--surface2);color:var(--text)}
.auth-error{background:var(--red-dim);border:1px solid rgba(255,77,106,0.3);border-radius:var(--radius);padding:10px 14px;font-size:13px;color:var(--red);margin-bottom:1rem;display:none}
.auth-success{background:var(--green-dim);border:1px solid rgba(0,232,122,0.3);border-radius:var(--radius);padding:10px 14px;font-size:13px;color:var(--green);margin-bottom:1rem;display:none}
.forgot-link{font-size:12px;color:var(--muted);cursor:pointer;transition:color .15s}
.forgot-link:hover{color:var(--green)}
.back-to-land{font-size:12px;color:var(--muted);cursor:pointer;display:flex;align-items:center;gap:4px;margin-bottom:1.5rem}
.back-to-land:hover{color:var(--green)}
.pw-strength{height:3px;border-radius:2px;margin-top:4px;transition:all .3s;background:var(--border2)}

/* ── Onboarding ── */
#onboarding{display:none;min-height:100vh;align-items:center;justify-content:center;padding:2rem;background:var(--bg)}
.onboarding-card{background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius-lg);padding:2.5rem;width:100%;max-width:540px;overflow:hidden}
.onboarding-card input[type=date]{width:100%;max-width:100%;min-width:0;box-sizing:border-box}
.onboarding-step{display:none}.onboarding-step.active{display:block}
.step-indicator{display:flex;gap:6px;margin-bottom:2rem}
.step-dot{width:6px;height:6px;border-radius:50%;background:var(--muted2);transition:all .3s}
.step-dot.active{background:var(--green);width:18px;border-radius:3px}
.step-dot.done{background:var(--green);opacity:.4}
.ob-title{font-family:var(--display);font-size:22px;font-weight:700;margin-bottom:.5rem;letter-spacing:-.5px}
.ob-sub{font-size:14px;color:var(--muted);margin-bottom:1.5rem;line-height:1.65}

/* ── App ── */
#app{display:none}
.app-inner{max-width:1140px;margin:0 auto;padding:1.25rem 1rem 6rem}
.app-header{position:sticky;top:0;z-index:50;background:rgba(8,8,16,0.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:.75rem 1rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.app-logo{font-family:var(--display);font-size:19px;font-weight:800;letter-spacing:-.5px;background:linear-gradient(135deg,var(--green),#00b8ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}
.header-meta{font-size:12px;color:var(--muted);font-family:var(--mono)}
.sync-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--muted);margin-right:4px;transition:background .3s}
.sync-dot.synced{background:var(--green)}
.sync-dot.syncing{background:var(--amber);animation:pulse 1s infinite}
.sync-dot.error{background:var(--red)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes obGlow{0%,100%{box-shadow:0 0 0 0 rgba(0,232,122,0)}50%{box-shadow:0 0 0 6px rgba(0,232,122,0.45)}}
.ob-glow{animation:obGlow 1.2s ease infinite}
@keyframes pointerBounce{from{transform:translateY(0)}to{transform:translateY(-6px)}}
.hdr-right{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.user-badge{display:flex;align-items:center;gap:8px;padding:5px 10px;background:var(--surface2);border:1px solid var(--border);border-radius:20px;font-size:12px;color:var(--muted);font-family:var(--mono)}
.user-avatar{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--green),#00b8ff);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#000;font-family:var(--display);flex-shrink:0;overflow:hidden}

/* ── Metrics ── */
.metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:1.25rem}
.metric{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px;position:relative;overflow:hidden;transition:border-color .2s}
.metric:hover{border-color:var(--border2)}
.metric-label{font-size:10px;font-family:var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px}
.metric-value{font-size:20px;font-family:var(--mono);font-weight:500}
.metric-sub{font-size:12px;color:var(--muted);margin-top:3px}

/* ── Sidebar Nav ── */
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:98;backdrop-filter:blur(2px)}
.sidebar-overlay.open{display:block}
.sidebar{position:fixed;top:0;left:0;bottom:0;width:260px;background:var(--surface);border-right:1px solid var(--border2);z-index:120;transform:translateX(-100%);transition:transform .25s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow:hidden}
.sidebar.open{transform:translateX(0)}
.sidebar-header{padding:1.25rem 1rem 1rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.sidebar-logo{font-family:var(--display);font-size:20px;font-weight:800;letter-spacing:-.5px;background:linear-gradient(135deg,var(--green),#00b8ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}
.sidebar-close{width:32px;height:32px;border-radius:8px;border:none;background:var(--surface2);color:var(--muted);cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:all .15s}
.sidebar-close:hover{background:var(--surface3);color:var(--text)}
.sidebar-nav{flex:1;overflow-y:auto;padding:.75rem .75rem;display:flex;flex-direction:column;gap:2px}
.sidebar-section{font-size:10px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.6px;color:var(--muted2);padding:.5rem .75rem .25rem;margin-top:.25rem}
.snav-btn{display:flex;align-items:center;gap:10px;width:100%;padding:.65rem .75rem;border:none;border-radius:8px;background:none;color:var(--muted);font-size:13px;font-family:var(--sans);cursor:pointer;text-align:left;transition:all .15s;-webkit-tap-highlight-color:transparent}
.snav-btn:hover{background:var(--surface2);color:var(--text)}
.snav-btn.active{background:var(--green-dim);color:var(--green);font-weight:500}
.snav-icon{font-size:16px;width:22px;text-align:center;flex-shrink:0}
.sidebar-footer{padding:.75rem;border-top:1px solid var(--border);flex-shrink:0}
.sidebar-user{display:flex;align-items:center;gap:10px;padding:.5rem .75rem;border-radius:8px;background:var(--surface2)}
.sidebar-user-info{flex:1;min-width:0}
.sidebar-user-name{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-user-email{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── Hamburger ── */
.hamburger{width:42px;height:42px;border-radius:var(--radius);border:1px solid var(--border2);background:var(--surface2);color:var(--text);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex-shrink:0;transition:all .15s}
.hamburger:hover{background:var(--surface3)}
.hamburger span{display:block;width:18px;height:2px;background:currentColor;border-radius:1px;transition:all .2s}
@media(max-width:768px){
  .hamburger{width:44px;height:44px;border-color:var(--border2);background:var(--surface);border-width:1.5px}
  .hamburger span{width:20px;height:2.5px;background:var(--green)}
}

/* ── Desktop Tab bar ── */
.desktop-tabs{display:flex;gap:2px;padding:5px;background:var(--bg);border-radius:var(--radius);margin-bottom:1.25rem;flex-wrap:wrap}
.dtab{padding:6px 13px;border-radius:7px;font-size:13px;cursor:pointer;color:var(--muted);border:none;background:none;font-family:var(--sans);transition:all .15s}
.dtab.active{background:var(--surface2);color:var(--text);font-weight:500}
.dtab:hover:not(.active){color:var(--text)}
.dtab[draggable="true"]{cursor:grab}
.dtab[draggable="true"]:active{cursor:grabbing}
.dtab.drag-over{outline:2px solid var(--green);outline-offset:2px;background:var(--green-dim)}

/* ── Add button mobile ── */
.fab{display:none;position:fixed;bottom:1.5rem;right:1.5rem;width:56px;height:56px;border-radius:50%;background:var(--green);border:none;color:#000;font-size:26px;font-weight:700;cursor:pointer;box-shadow:0 4px 20px rgba(0,232,122,0.4);z-index:90;align-items:center;justify-content:center;transition:transform .15s,box-shadow .15s;-webkit-tap-highlight-color:transparent}
.fab:active{transform:scale(.94) !important;box-shadow:0 2px 10px rgba(0,232,122,0.3)}
.fab{transition:transform .2s ease,opacity .2s ease,box-shadow .15s}

/* ── Empty state ── */
.empty-state{text-align:center;padding:4rem 2rem}
.empty-icon{font-size:48px;margin-bottom:1rem}
.empty-title{font-family:var(--display);font-size:20px;font-weight:700;margin-bottom:.5rem}
.empty-sub{font-size:13px;color:var(--muted);margin-bottom:1.5rem;line-height:1.6;max-width:320px;margin-left:auto;margin-right:auto}

/* ── FIRE / Sliders ── */
.sliders-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:1rem}
.slider-group{background:var(--surface2);border-radius:var(--radius);padding:13px;border:1px solid var(--border)}
.sg-label{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:11px;font-weight:500}
.sg-pess{color:var(--red)}.sg-real{color:var(--green)}.sg-opt{color:var(--amber)}
.ms-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ms-cell{background:var(--surface2);border-radius:var(--radius);padding:8px;text-align:center}
.ms-label{font-size:11px;font-family:var(--mono);margin-bottom:3px}
.ms-val{font-size:13px;font-weight:500;font-family:var(--mono)}
.milestone-card{border:1px solid var(--border);border-radius:var(--radius);padding:13px;margin-bottom:10px}
.milestone-title{font-weight:500;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}

/* ── iOS zoom prevention (applies on all viewports where it's relevant) ──
   Safari auto-zooms on any input with font-size < 16px and refuses to
   zoom back out on blur. Applying universally catches tablet/landscape
   sizes that fall outside the 768px breakpoint. */
@media (hover: none) and (pointer: coarse){
  input,select,textarea{font-size:16px!important}
}
/* Belt-and-braces for iOS Safari which reports hover:none inconsistently. */
@supports (-webkit-touch-callout:none){
  input,select,textarea{font-size:16px!important}
}

/* ── Overscroll containment — stops rubber-band scrolling through
   modals/sidebar on iOS ── */
.modal,.modal-overlay,.sidebar{overscroll-behavior:contain}

/* ── Responsive ── */
@media(max-width:768px){
  /* Layout */
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .features-grid{grid-template-columns:1fr}
  .desktop-tabs{display:none}
  .fab{display:flex}
  .app-inner{padding:.75rem .75rem 5rem}
  .hdr-right .user-badge{display:none}
  .hero-btns{flex-direction:column;align-items:center}
  .charts-row{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .form-row-3{grid-template-columns:1fr}

  /* Card padding tighter on mobile */
  .card-body{padding:.875rem}

  /* Sliders — bigger touch targets */
  input[type=range]{height:6px;border-radius:3px}
  input[type=range]::-webkit-slider-thumb{width:22px;height:22px;border-width:3px}
  .slider-row{margin-bottom:14px}
  .slider-meta{font-size:13px;margin-bottom:6px}
  .sliders-grid{grid-template-columns:1fr}
  .slider-group{padding:1rem}

  /* Buttons — bigger tap targets (WCAG/HIG 44px minimum) */
  .btn{min-height:44px}
  .btn-sm{min-height:44px;padding:10px 14px}
  /* Tables — mobile optimised */
  .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius);position:relative}
  table{width:100%}
  th,td{padding:8px 8px;font-size:12px}
  td:last-child{touch-action:manipulation}
  td:last-child .btn,td:last-child button{min-height:44px;min-width:44px}
  /* Scroll hint — right-edge fade gradient makes horizontal scroll discoverable */
  .tbl-wrap.has-scroll{position:relative}
  .tbl-wrap.has-scroll::after{content:'';position:absolute;top:0;right:0;bottom:0;width:32px;background:linear-gradient(to right,transparent,var(--surface));pointer-events:none;opacity:.9;border-top-right-radius:var(--radius);border-bottom-right-radius:var(--radius)}
  /* Hide non-essential columns on mobile per table */
  #history-tbody td:nth-child(2),#history-tbody td:nth-child(4),
  #history-tbody td:nth-child(6),
  table:has(#history-tbody) thead th:nth-child(2),
  table:has(#history-tbody) thead th:nth-child(4),
  table:has(#history-tbody) thead th:nth-child(6){display:none}
  /* Activity log — hide Month and Type cols */
  #activity-log-tbody td:nth-child(3),#activity-log-tbody td:nth-child(5),
  table:has(#activity-log-tbody) thead th:nth-child(3),
  table:has(#activity-log-tbody) thead th:nth-child(5){display:none}
  /* Investments — on mobile: show only Account, Value, Actions */
  #breakdown-tbody td:nth-child(2),#breakdown-tbody td:nth-child(4),
  #breakdown-tbody td:nth-child(5),#breakdown-tbody td:nth-child(6),
  #breakdown-tbody td:nth-child(7),
  #breakdown-tfoot td:nth-child(2),#breakdown-tfoot td:nth-child(4),
  #breakdown-tfoot td:nth-child(5),#breakdown-tfoot td:nth-child(6),
  #breakdown-tfoot td:nth-child(7),
  table:has(#breakdown-tbody) thead th:nth-child(2),
  table:has(#breakdown-tbody) thead th:nth-child(4),
  table:has(#breakdown-tbody) thead th:nth-child(5),
  table:has(#breakdown-tbody) thead th:nth-child(6),
  table:has(#breakdown-tbody) thead th:nth-child(7){display:none}
  /* Value column — left-align and don't let it stretch on mobile */
  #breakdown-tbody td:nth-child(3),
  table:has(#breakdown-tbody) thead th:nth-child(3){text-align:left;width:1%;white-space:nowrap;padding-right:6px}
  /* Keep actions cell buttons on one row */
  #breakdown-tbody td:last-child>div{flex-wrap:nowrap}
  /* Debt — hide Notes column on mobile so action buttons always visible */
  #debt-tbody td:nth-child(3),
  table:has(#debt-tbody) thead th:nth-child(3){display:none}
  /* Forecast — hide Investments and Debt cols */
  #fc-tbody td:nth-child(3),#fc-tbody td:nth-child(4),
  table:has(#fc-tbody) thead th:nth-child(3),
  table:has(#fc-tbody) thead th:nth-child(4){display:none}
  /* Activity log — card layout instead of table on mobile */
  #hist-log .tbl-wrap{overflow-x:visible}
  #hist-log table,#hist-log thead{display:none}
  #hist-log tbody{display:block}
  #hist-log tr{display:flex;flex-direction:column;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;margin-bottom:8px;gap:4px}
  #hist-log td{display:block!important;border:none;padding:0;font-size:12px}
  #hist-log td:nth-child(3),#hist-log td:nth-child(5){display:block!important}
  #hist-log td:last-child{margin-top:6px}
  #hist-log td:last-child .btn{width:100%;justify-content:center}
  /* Activity log stays visible on mobile using the card layout defined above. */

  /* Metrics */
  .metric{padding:12px}
  .metric-value{font-size:17px}
  .metric-label{font-size:10px}

  /* Modal */
  .modal-overlay{padding:.5rem;align-items:flex-end}
  .modal{border-radius:var(--radius-lg) var(--radius-lg) 0 0;max-height:92vh;overflow-y:auto;padding:1.25rem 1rem 1.5rem;padding-bottom:max(1.5rem,env(safe-area-inset-bottom))}
  .modal h2{font-size:13px}
  /* Modal header — stack title above buttons */
  .modal-header{flex-direction:column;align-items:stretch}
  .modal-header-btns{display:grid!important;grid-template-columns:1fr 1fr;gap:8px}
  .modal-header-btns .btn{width:100%;justify-content:center;min-height:48px}
  /* Modal actions row at bottom */
  .modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .modal-actions .btn{width:100%;justify-content:center;min-height:48px}
  /* Summary panel — stack vertically */
  .modal-summary-grid{grid-template-columns:1fr!important}
  .modal-summary-grid > div{border-right:none!important;border-bottom:1px solid var(--border)}
  .modal-summary-grid > div:last-child{border-bottom:none}
  /* Inv/debt rows in modal */
  .inv-row,.debt-row{grid-template-columns:1fr 1fr;gap:6px}

  /* Profile avatar editor */
  #avatar-preview{width:60px!important;height:60px!important}
  #avatar-colour-swatches{gap:6px!important}
  #avatar-colour-swatches > div{width:24px!important;height:24px!important}
  #avatar-presets-grid{grid-template-columns:repeat(6,1fr)!important}

  /* Username hint — allow wrapping */
  #ab-username + div{flex-direction:column!important;align-items:flex-start!important;gap:2px!important}
  .form-group label span{display:block;margin-top:2px}

  /* Onboarding card */
  .onboarding-card{padding:1.5rem 1.25rem}
  .ob-title{font-size:19px}
  .onboarding-card input[type=date],.onboarding-card input[type=month]{width:100%;max-width:100%;min-width:0;font-size:16px}

  /* Auth card */
  .auth-card{padding:1.75rem 1.25rem}

  /* About grid — stack on mobile */
  .form-row-profile{grid-template-columns:1fr!important}

  /* FIRE tab — stack on mobile */
  #fire-charts-row{grid-template-columns:1fr!important}
  #fire-charts-row>div>div[style*="height:240px"]{height:200px!important}
  #fire-sliders{grid-template-columns:1fr!important}

  /* Guide sections */
  .guide-toggle{padding:.875rem 1rem;font-size:13px}
  .guide-body{padding:0 1rem 1rem;font-size:12px}

  /* Sidebar */
  .sidebar{width:min(280px,85vw)}

  /* FAB position — above bottom safe area */
  .fab{bottom:calc(1rem + env(safe-area-inset-bottom,0px));right:1rem}
}

/* ── Standalone PWA — class applied by JS when navigator.standalone===true ── */
/* JS adds class="pwa" to <html> on iOS home screen launch.
   We use a hard 59px offset which covers Dynamic Island (59px) and all older iPhones.
   env(safe-area-inset-top) is also applied where supported for precise per-device values. */
html.pwa .land-nav{
  top:59px;
  top:env(safe-area-inset-top, 59px);
}
html.pwa .app-header{
  padding-top:calc(59px + .25rem);
  padding-top:calc(env(safe-area-inset-top, 59px) + .25rem);
}
html.pwa .sidebar{
  padding-top:59px;
  padding-top:env(safe-area-inset-top, 59px);
}
html.pwa .app-inner{
  padding-bottom:calc(5rem + 34px);
  padding-bottom:calc(5rem + env(safe-area-inset-bottom, 34px));
}
html.pwa .fab{
  bottom:calc(1.5rem + 34px);
  bottom:calc(1.5rem + env(safe-area-inset-bottom, 34px));
}

/* ── Mobile-only rules that were previously stranded outside their @media block ── */
@media(max-width:768px){
  /* App header tighter */
  .app-header{padding:.6rem .875rem}
  .app-logo{font-size:17px}

  /* Milestone grid */
  .ms-grid{grid-template-columns:1fr 1fr}

  /* Danger zone cards — stack button below */
  #t-settings .danger-card{flex-direction:column!important;align-items:flex-start!important}
}

@media(max-width:480px){
  .metrics{grid-template-columns:1fr 1fr}
  .inv-row,.debt-row{grid-template-columns:1fr}
  .onboarding-card{padding:1.25rem 1rem}
  .auth-card{padding:1.5rem 1rem}

html.pwa #auth-screen{
  padding-top:calc(59px + 1.5rem);
  padding-top:calc(env(safe-area-inset-top, 59px) + 1.5rem);
  align-items:flex-start;
}
  .app-inner{padding:.5rem .5rem 5rem}
  .card-body{padding:.75rem}

  /* Username hint full width */
  .form-group label{white-space:normal}
  #ob-username + div, #ab-username + div{flex-wrap:wrap}

  /* Ob avatar picker */
  #ob-avatar-preview{width:52px!important;height:52px!important}
  #ob-presets-grid{grid-template-columns:repeat(6,1fr)!important}

}
/* ── Guide ── */
.guide-section{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.guide-toggle{width:100%;display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;background:none;border:none;color:var(--text);font-size:14px;font-family:var(--sans);font-weight:500;cursor:pointer;text-align:left;gap:1rem;transition:background .15s}
.guide-toggle:hover{background:var(--surface3)}
.guide-arrow{color:var(--muted);font-size:11px;transition:transform .2s;flex-shrink:0}
.guide-toggle.open .guide-arrow{transform:rotate(180deg)}
.guide-body{display:none;padding:0 1.25rem 1.25rem;font-size:13px;color:var(--muted);line-height:1.75}
.guide-body.open{display:block}
.guide-body p{margin-bottom:.75rem}
.guide-body p:last-child{margin-bottom:0}
.guide-body ul{padding-left:1.25rem;margin-bottom:.75rem;display:grid;gap:.35rem}
.guide-body strong{color:var(--text)}
/* ── Tour mini sidebar (mobile only) ── */
.tour-mini-sidebar{display:none;position:fixed;top:0;left:0;bottom:0;width:52px;background:var(--surface);border-right:1px solid var(--border2);z-index:210;flex-direction:column;align-items:center;padding-top:var(--nav-h);padding-bottom:1rem;gap:2px;overflow-y:auto;overflow-x:hidden}
.tour-mini-sidebar.visible{display:flex}
.tour-mini-btn{width:40px;height:40px;border-radius:8px;border:none;background:none;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0;-webkit-tap-highlight-color:transparent}
.tour-mini-btn.active{background:rgba(0,232,122,0.2);outline:2px solid var(--green);box-shadow:0 0 0 4px rgba(0,232,122,0.12)}
.tour-mini-btn.visited{opacity:0.5}
/* Push content right when mini sidebar is showing */
body.tour-mode .app-inner{padding-left:calc(.75rem + 52px)!important}
body.tour-mode .app-header{padding-left:calc(.875rem + 52px)!important}

/* Recording dot */
.logo-r-wrap{position:relative;display:inline-block;background:linear-gradient(135deg,var(--green),#00b8ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.logo-rec-dot{position:absolute;top:15%;right:-9px;width:5px;height:5px;border-radius:50%;background:var(--green);animation:rec-pulse 2s ease-in-out infinite;box-shadow:0 0 6px rgba(0,232,122,0.8)}
@keyframes rec-pulse{0%,100%{opacity:1;transform:translateX(-50%) scale(1)}50%{opacity:.35;transform:translateX(-50%) scale(.7)}}
@keyframes slideUp{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}

    .pulse-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);animation:rec-pulse 2s ease-in-out infinite;box-shadow:0 0 8px rgba(0,232,122,0.8);margin-left:6px;vertical-align:middle;flex-shrink:0}

/* ── Prefers-reduced-motion — respect OS-level accessibility setting ── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  /* Keep the sync/pulse dots static — they otherwise loop forever */
  .sync-dot.syncing,.logo-rec-dot,.pulse-dot{animation:none!important;opacity:1!important}
  .fab:active{transform:none!important}
}

/* ── Landscape-phone tightening (short viewports) ──
   Phones in landscape are typically 667–900px wide but only ~375–430px tall.
   The 768px breakpoint alone doesn't catch this; we need a height-based rule. */
@media (orientation: landscape) and (max-height: 500px){
  .app-header{padding:.45rem .875rem}
  .app-logo{font-size:16px}
  .app-inner{padding:.5rem .75rem 4rem}
  .modal{max-height:94vh;padding:1rem}
  .modal-overlay{align-items:flex-start;padding:.5rem}
  .auth-card,.onboarding-card{padding:1.25rem 1rem;max-height:96vh;overflow-y:auto}
  .fab{bottom:calc(.75rem + env(safe-area-inset-bottom,0px));right:.75rem;width:48px;height:48px;font-size:22px}
  .hero-btns{flex-direction:row!important}
}

/* ── P2.1: mobile overrides for inline-styled desktop grids in index.html ──
   The landing page uses inline style= attributes that override external CSS
   at normal specificity. Targeted !important overrides collapse them on mobile
   without requiring a refactor of the 1,500+ inline styles. */
@media(max-width:768px){
  /* Dashboard preview 5-col grid → stack */
  #landing [style*="grid-template-columns:repeat(5,1fr)"],
  #landing [style*="grid-template-columns: repeat(5, 1fr)"]{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  /* 1fr 220px (content + sidebar) → stack */
  #landing [style*="grid-template-columns:1fr 220px"]{
    grid-template-columns:1fr!important;
  }
  /* 1fr auto auto micro-layouts → collapse auto cols under 1fr */
  #landing [style*="grid-template-columns:1fr auto auto"]{
    grid-template-columns:1fr auto!important;
    gap:4px!important;
    font-size:11px!important;
  }
  /* Narrow-sidebar mock (52px fixed column) → hide on narrow screens,
     since it's purely decorative in the dashboard preview */
  #landing [style*="width:52px"][style*="flex-shrink:0"]{display:none!important}
}
@media(max-width:480px){
  /* Two-col preview collapses fully on phone */
  #landing [style*="grid-template-columns:repeat(5,1fr)"],
  #landing [style*="grid-template-columns: repeat(5, 1fr)"]{
    grid-template-columns:1fr!important;
  }
  #landing [style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr!important;
  }
}
  </style>