*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#f7f6f3;--surface:#fff;--surface2:#f0efe9;--border:#e4e2da;--text:#1a1917;--muted:#7a7870;--accent:#2a5cff;--accent-l:#edf0ff;--accent2:#ff6b35;--green:#1a9a6c;--green-l:#e8f7f2;--shadow:0 1px 3px rgba(0,0,0,.07),0 4px 16px rgba(0,0,0,.05);--r:14px}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;padding:0 0 80px}

/* ── HEADER ── */
header{background:var(--surface);border-bottom:1px solid var(--border);padding:0 40px;display:flex;align-items:center;height:64px;position:relative}
.logo{text-decoration:none;display:inline-flex;align-items:center}.logo-box{display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;font-size:13px;font-weight:500;letter-spacing:.01em;padding:6px 12px;border-radius:8px;line-height:1}
.header-tag{font-size:12px;color:var(--muted);background:var(--surface2);border:1px solid var(--border);border-radius:20px;padding:4px 12px;font-family:'Fira Code',monospace}
@media(max-width:820px){header{padding:0 16px}}

/* ── TOP-LEVEL SECTION NAV ── */
.section-nav{background:var(--surface);border-bottom:2px solid var(--border);display:flex;justify-content:center;gap:0;padding:0 24px;overflow-x:auto;scrollbar-width:none}
.section-nav::-webkit-scrollbar{display:none}
.sec-btn{padding:14px 28px;border:none;border-bottom:3px solid transparent;background:transparent;font-family:'Inter',sans-serif;font-size:13.5px;font-weight:500;color:var(--muted);cursor:pointer;transition:all .18s;display:flex;align-items:center;gap:7px;margin-bottom:-2px;white-space:nowrap;flex-shrink:0}
.sec-btn:hover{color:var(--text);background:var(--surface2)}
.sec-btn.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:700;background:var(--accent-l)}
@media(max-width:600px){.sec-btn{padding:11px 14px;font-size:12.5px}}

/* ── SECTION PANELS ── */
.section-panel{display:none}.section-panel.active{display:block}

/* ── HERO ── */
.hero{text-align:center;padding:36px 20px 28px;margin-top:0;background:linear-gradient(160deg,#eef2ff 0%,#f5f7ff 60%,#fff 100%);border-bottom:1px solid var(--border)}
.hero-eyebrow{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.hero h1{font-size:clamp(22px,3.5vw,32px);font-weight:700;letter-spacing:-.5px;line-height:1.25;color:var(--text)}
.hero-sub{margin-top:8px;color:var(--muted);font-size:12.5px;line-height:1.6;opacity:.85}
.hero-sub span{color:var(--text);font-weight:500}

/* ── LOAN TYPE TABS ── */
.loan-tabs-wrap{max-width:1100px;margin:0 auto;padding:20px 24px 0}
.loan-tabs-label{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.loan-tabs{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tab-btn{padding:8px 18px;border-radius:40px;border:1.5px solid var(--border);background:var(--surface);font-family:'Inter',sans-serif;font-size:13px;font-weight:500;color:var(--muted);cursor:pointer;transition:all .18s;display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.tab-btn:hover{border-color:var(--accent);color:var(--accent)}
.tab-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}

/* ── MAIN LAYOUT ── */
.main{max-width:1060px;margin:24px auto 0;padding:0 20px;display:grid;grid-template-columns:360px 1fr;gap:24px;align-items:start}
@media(max-width:820px){.main{grid-template-columns:1fr}}

/* ── CARD ── */
.card{box-sizing:border-box;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:20px;box-shadow:var(--shadow)}
.card-title{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}

/* ── FIELDS ── */
.field{margin-bottom:10px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:12px 14px}
.field-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:8px}
.field-label{font-size:13px;font-weight:500;color:var(--muted)}
.field-value{font-family:'Fira Code',monospace;font-size:13px;color:var(--text);background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:2px 8px}
.field-input{font-family:'Fira Code',monospace;font-size:13px;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:3px 8px;text-align:right;width:120px;outline:none;transition:border-color .15s;min-width:70px}
.field-input:focus{border-color:var(--accent);background:var(--surface)}
.rate-input{width:72px;min-width:72px;text-align:right}
.term-input{width:68px;text-align:right}
.input-group{display:flex;align-items:center;gap:4px;flex-shrink:0;margin-left:8px}
.input-suffix{font-size:12px;color:var(--muted);font-family:'Fira Code',monospace;white-space:nowrap;flex-shrink:0}
input[type=range]{width:100%;height:4px;-webkit-appearance:none;appearance:none;background:var(--border);border-radius:99px;outline:none;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent);border:3px solid #fff;box-shadow:0 0 0 1.5px var(--accent),0 2px 6px rgba(42,92,255,.25);transition:transform .15s}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}
.slider-wrap{position:relative;padding-top:28px}
.slider-bubble{position:absolute;top:0;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-family:'Fira Code',monospace;font-size:11px;font-weight:500;padding:3px 8px;border-radius:6px;white-space:nowrap;pointer-events:none;transition:left .05s}
.slider-bubble::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:4px solid transparent;border-top-color:var(--accent)}
.range-labels{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted);margin-top:5px;font-family:'Fira Code',monospace}
.term-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:12px}
.term-left{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.term-toggle{display:flex;background:var(--surface2);border:1px solid var(--border);border-radius:8px}
.term-toggle button{padding:4px 13px;border:none;background:transparent;font-family:'Inter',sans-serif;font-size:12px;font-weight:500;color:var(--muted);cursor:pointer;transition:all .15s;white-space:nowrap}
.term-toggle button.active{background:var(--accent);color:#fff;border-radius:6px}

/* ── RESULTS ── */
.results-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px;min-width:0}
.result-box{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:15px}
.result-box.accent{background:var(--accent-l);border-color:rgba(42,92,255,.2)}
.result-box.green{background:var(--green-l);border-color:rgba(26,154,108,.2)}
.result-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:2px}
.result-sublabel{font-size:9.5px;color:var(--muted);margin-bottom:5px;opacity:.8}
.result-value{font-family:'Fira Code',monospace;font-size:clamp(14px,3.5vw,18px);font-weight:600;color:#2a2825;word-break:break-all;overflow-wrap:anywhere;min-height:28px}


.breakdown-bar{height:7px;border-radius:99px;overflow:hidden;background:var(--border);margin-bottom:9px;display:flex}
.bar-principal{background:var(--accent);transition:width .5s}
.bar-interest{background:var(--accent2);transition:width .5s}
.bar-legend{display:flex;gap:16px;font-size:11.5px;color:var(--muted)}
.legend-item{display:flex;align-items:center;gap:6px}
.legend-dot{width:8px;height:8px;border-radius:50%}

/* ── CHART / TABLE PANEL ── */
.chart-wrap{position:relative;height:240px;margin-top:6px;width:100%;overflow:hidden}
.result-tabs{display:flex;gap:4px;margin:20px 0 14px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:4px;position:relative}
.result-tab{flex:1;padding:7px;border:none;border-radius:7px;background:transparent;font-family:'Inter',sans-serif;font-size:12.5px;font-weight:500;color:var(--muted);cursor:pointer;transition:all .15s;opacity:.65}
.result-tab.active{background:var(--surface);color:var(--accent);box-shadow:0 1px 4px rgba(0,0,0,.12);font-weight:700;opacity:1;border-bottom:2px solid var(--accent)}
.table-wrap{overflow-x:auto;border-radius:10px;border:1px solid var(--border)}
table{width:100%;border-collapse:collapse;font-size:12.5px}
thead th{background:var(--surface2);padding:9px 13px;text-align:left;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap;border-bottom:1px solid var(--border)}
tbody tr{border-bottom:1px solid var(--border);transition:background .1s}
tbody tr:last-child{border-bottom:none}
tbody tr:hover{background:var(--surface2)}
tbody td{padding:8px 13px;font-family:'Fira Code',monospace;font-size:12px;white-space:nowrap}
tbody td:first-child{color:var(--muted);font-size:10.5px}
.show-more-btn{width:100%;padding:11px;background:var(--surface2);border:none;border-top:1px solid var(--border);font-family:'Inter',sans-serif;font-size:12.5px;color:var(--accent);font-weight:500;cursor:pointer;transition:background .15s}
.show-more-btn:hover{background:var(--accent-l)}

/* ── PDF BUTTON ── */
.pdf-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;background:var(--surface2);border:1.5px solid var(--border);border-radius:8px;font-family:'Inter',sans-serif;font-size:13px;font-weight:500;color:var(--text);cursor:pointer;transition:all .18s}
.pdf-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-l)}

/* ── COMING SOON PANEL ── */
.coming-soon-hero{text-align:center;padding:44px 20px 28px;background:var(--surface);border-bottom:1px solid var(--border)}
.cs-tabs-wrap{max-width:1060px;margin:24px auto 0;padding:0 20px}
.cs-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px}
.cs-tab{padding:8px 18px;border-radius:40px;border:1.5px solid var(--border);background:var(--surface);font-family:'Inter',sans-serif;font-size:13px;font-weight:500;color:var(--muted);cursor:default;display:flex;align-items:center;gap:6px;opacity:.7}
.cs-badge{font-size:10px;background:var(--surface2);border:1px solid var(--border);border-radius:4px;padding:1px 6px;color:var(--muted);font-family:'Fira Code',monospace}
.cs-placeholder{max-width:480px;margin:0 auto;text-align:center;padding:60px 20px}
.cs-placeholder svg{width:64px;height:64px;opacity:.25;margin-bottom:20px}
.cs-placeholder h3{font-size:18px;font-weight:600;color:var(--text);margin-bottom:8px}
.cs-placeholder p{font-size:14px;color:var(--muted);line-height:1.6}

/* ── FOOTER DISCLAIMER ── */
.disclaimer{max-width:1060px;margin:48px auto 0;padding:0 20px}
.disclaimer-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:20px 24px}
.disclaimer-box strong{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text);margin-bottom:8px}
.disclaimer-box p{font-size:11.5px;color:var(--muted);line-height:1.8}
footer{text-align:center;margin-top:24px;padding:0 20px 20px;font-size:11px;color:var(--muted)}


/* ══ CLASSIC DARK MODE ══ */
  --bg:#0f0f13;--surface:#1a1a22;--surface2:#22222e;--border:#2e2e3e;
  --text:#e8e6f0;--muted:#8886a0;--accent:#5b8aff;--accent-l:#1a2040;
  --accent2:#ff7a4a;--green:#22b87e;--green-l:#0d2820;
  --shadow:0 1px 3px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.2)
}
/* Header & nav */
/* Hero */
/* Loan tabs */
/* Inputs */
/* Result boxes */
/* Tabs */
/* Table */
/* PDF button */
/* Article */
/* Disclaimer & footer */
/* FIRE inline-styled elements */
/* FIRE output box */
/* Calculate button dark */
/* Coming soon placeholder */
/* Header tag */
/* Style switcher */

/* ── THEME TOGGLE ── */
.theme-toggle{display:flex;align-items:center;gap:8px}
.toggle-track{width:44px;height:24px;border-radius:99px;background:var(--border);border:1.5px solid var(--border);cursor:pointer;position:relative;transition:background .2s;flex-shrink:0}
.toggle-thumb{position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.toggle-icon{font-size:14px;line-height:1}


/* ── HEADER NAV BUTTONS ── */
.h-nav-btn{padding:7px 16px;border:none;border-radius:7px;background:transparent;font-family:'Inter',sans-serif;font-size:13px;font-weight:500;color:var(--muted);cursor:pointer;transition:all .15s}
.h-nav-btn:hover{background:var(--surface2);color:var(--text)}
.h-nav-btn.active{background:var(--accent-l);color:var(--accent);font-weight:600}
@media(max-width:600px){.h-nav-btn{padding:6px 10px;font-size:12px}}


/* ── STYLE SWITCHER ── */
.style-switcher{display:flex;background:var(--surface2);border:1px solid var(--border);border-radius:8px;overflow:hidden;padding:2px;gap:2px}
.style-btn{padding:5px 12px;border:none;border-radius:6px;background:transparent;font-family:'Inter',sans-serif;font-size:12px;font-weight:500;color:var(--muted);cursor:pointer;transition:all .18s;white-space:nowrap}
.style-btn.active{background:var(--surface);color:var(--text);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.08)}

/* ══ PRO THEME (Navy + Yellow) ══ */
  --bg:#fffef5;--surface:#fff;--surface2:#fefce8;--border:#e0d9b8;
  --text:#1a1a0e;--muted:#5a5438;--accent:#b8922a;--accent-l:#fef9e0;
  --accent2:#c06010;--green:#1a5c3a;--green-l:#eafaf1;
  --shadow:0 1px 2px rgba(0,0,0,.06),0 4px 20px rgba(26,46,74,.08);--r:10px
}

/* ── Header (navy bg) ── */

/* ── Section nav (navy bg) ── */

/* ── Hero (navy bg) ── */

/* ── Loan tabs (cream/white bg) ── */

/* ── Cards (white bg) ── */

/* ── Result boxes ── */

/* ── Chart/table panel ── */

/* ── Slider ── */

/* ── PDF button ── */

/* ── Page hero (navy bg) — About & Articles ── */

/* ── About cards (white bg) ── */

/* ── Blog cards (white bg) ── */

/* ── Disclaimer & footer ── */

/* ── Coming soon ── */

/* ══ PRO DARK ══ */
  --bg:#080d14;--surface:#0f1825;--surface2:#162030;--border:#1e2e44;
  --text:#e0dfd8;--muted:#9090a0;--accent:#d4a840;--accent-l:#1c1400
}

/* ══ CLASSIC DARK ══ */


/* ══ ARTICLE + CALCULATOR LAYOUT ══ */

/* Article column */
.article-col{}
.article-eyebrow{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.article-h1{font-size:clamp(18px,2.4vw,26px);font-weight:800;letter-spacing:-.5px;line-height:1.25;color:var(--text);margin-bottom:10px}
.article-intro{font-size:13.5px;line-height:1.7;color:var(--text);opacity:.75;margin-bottom:16px;max-width:580px;text-align:justify}
.article-section{margin-bottom:0}
.article-section h2{font-size:14px;font-weight:700;color:var(--text);margin-bottom:7px;padding-bottom:4px;border-bottom:1px solid var(--border)}
.article-section p{font-size:13px;line-height:1.65;color:var(--text);opacity:.7;margin-bottom:8px}
.article-section ul{padding-left:18px;margin-bottom:8px}
.article-section ul li{font-size:13px;line-height:1.6;color:var(--text);opacity:.7;margin-bottom:4px}
.article-keybox{background:var(--accent-l);border:1px solid rgba(42,92,255,.15);border-left:3px solid var(--accent);border-radius:0 10px 10px 0;padding:10px 14px;margin:10px 0;font-size:12.5px;line-height:1.6;color:var(--text);opacity:.85}
.article-keybox strong{color:var(--accent);font-weight:700}

/* Sticky calculator column */

/* Pro overrides for article */

/* Dark overrides */


/* ── Loan content: article left, calculator right ── */
.calc-section{max-width:1100px;margin:24px auto 0;padding:0 24px;display:grid;grid-template-columns:360px 1fr;gap:24px;align-items:start}
@media(max-width:820px){.calc-section{grid-template-columns:1fr}}
.calc-inputs-col{min-width:0}
.calc-results-col{min-width:0}
.article-section-wrap{max-width:1100px;margin:32px auto 0;padding:0 24px 48px}
.article-columns{display:grid;grid-template-columns:1fr 1fr;gap:28px 48px;margin-top:20px;align-items:stretch}
.article-columns .article-section{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:18px 20px;height:100%}
.article-columns .article-section h2{margin-bottom:10px;padding-bottom:8px}
.article-columns .article-section p{margin-bottom:10px}
.article-columns .article-section p:last-child{margin-bottom:0}
.article-columns .article-section ul{margin-bottom:0}
.article-columns .article-section .article-keybox{margin-top:12px;margin-bottom:0}
@media(max-width:760px){.article-columns{grid-template-columns:1fr}}
.loan-article-inner{padding:0}


/* ── PF Sub-nav ── */
.pf-tab:hover{color:var(--text);background:var(--surface2)}
.pf-tab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:700}
.pf-panel.active{display:block}

/* Pro overrides for pf-subnav */

/* ── SIP layout ── */


/* ── Frequency toggle ── */
.freq-toggle{display:flex;gap:6px;flex-wrap:wrap}
.freq-btn{padding:7px 16px;border-radius:40px;border:1.5px solid var(--border);background:var(--surface);font-family:'Inter',sans-serif;font-size:12.5px;font-weight:500;color:var(--muted);cursor:pointer;transition:all .18s}
.freq-btn:hover{border-color:var(--accent);color:var(--accent)}
.freq-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}


/* ── Full-width chart+table panel (below the 2-col grid) ── */

.chart-wrap-wide{position:relative;height:320px;margin-top:6px}
.table-wrap-wide{overflow-x:auto;border-radius:10px;border:1px solid var(--border);max-height:340px;overflow-y:auto;width:100%;max-width:100%;box-sizing:border-box}
.table-wrap-wide table{width:100%;border-collapse:collapse;font-size:12px}
.table-wrap-wide thead th{background:var(--surface2);padding:10px 14px;text-align:left;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:2}
.table-wrap-wide tbody td{padding:9px 14px;border-bottom:1px solid var(--border);color:var(--text);font-family:'Fira Code',monospace;font-size:12.5px}
.table-wrap-wide tbody tr:last-child td{border-bottom:none}
.table-wrap-wide tbody tr:hover{background:var(--surface2)}

/* ── ANIMATE ── */
.animate-in{animation:fadeUp .35s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
/* ── Dark mode additions ── */

/* Article dark */

/* FIRE inline result values — override hardcoded colors */

/* FIRE output box (inline styled) */

/* FIRE spectrum ticks */

/* FIRE "per year" note */

/* FIRE result box border colors stay but bg needs dark */

/* Calculate button */

/* Pro dark: freq-btn */

/* Pro dark: article */

/* Pro dark: FIRE values */

/* h-nav-btn dark */

/* Card-title dark */

/* field-label dark */

/* ── Explicit card/field backgrounds for classic dark ── */

/* ── Explicit card/field backgrounds for pro dark ── */


/* ══ COMPREHENSIVE THEME FIX PATCH ══ */

/* ── bar-invested / bar-returns (Step-Up SIP & Lumpsum breakdown bars) ── */
.bar-invested{background:var(--accent);transition:width .5s}
.bar-returns{background:var(--accent2);transition:width .5s}

/* ── bar-dot (legend dots in SIP/Step-Up/Lumpsum) ── */
.bar-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:middle}
.bar-dot.invested{background:var(--accent)}
.bar-dot.returns{background:var(--accent2)}

/* ── Bar legend spacing fix ── */
.bar-legend span{display:flex;align-items:center;font-size:11.5px;color:var(--muted)}

/* ════════════════════════════════
   PRO LIGHT — missing overrides
   ════════════════════════════════ */
/* field-input in Pro light */
/* field-value in Pro light */
/* breakdown bar Pro light */
/* range slider thumb Pro light */
/* freq-toggle buttons Pro light */
/* header-tag Pro light */
/* result-box.accent Pro light */
/* table-wrap-wide Pro light */
/* disclaimer Pro light */
/* hero gradient Pro light is already navy OK */
/* section eyebrow in article */
/* article intro Pro light */

/* ════════════════════════════════
   PRO DARK — missing overrides
   ════════════════════════════════ */
/* header-tag Pro dark */
/* bar colors Pro dark */
/* slider Pro dark */
/* section-nav Pro dark */
/* loan-tabs-label Pro dark */
/* disclaimer Pro dark */
/* cs-placeholder Pro dark */
/* result-box Pro dark */
/* table borders Pro dark */
/* pdf-btn Pro dark */
/* h-nav-btn Pro dark */
/* field-input Pro dark */
/* field-value Pro dark */
/* range labels Pro dark */
/* input suffix Pro dark */
/* article section Pro dark */

/* ════════════════════════════════
   CLASSIC DARK — fill-in gaps
   ════════════════════════════════ */
/* pf-subnav classic dark */
/* freq-toggle classic dark */

/* ════════════════════════════════
   CLASSIC LIGHT — ensure vars OK
   ════════════════════════════════ */
/* hero gradient already blue — fine */
.bar-legend{gap:16px}

/* article-section card in dark modes */


/* ── Share button ── */
.share-btn{background:#f0f3ff;border:1.5px solid #b8c6ff;color:#2a5cff;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;transition:all .18s;font-family:'Inter',sans-serif}
.share-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-l)}
.share-btn.copied{border-color:var(--green);color:var(--green);background:var(--green-l)}
.pdf-share-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:14px}

/* ── Header controls (Theme + Mode) ── */
.header-controls{display:flex;align-items:center;gap:16px}
.ctrl-group{display:flex;align-items:center;gap:6px}
.ctrl-label{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.mode-switcher{display:flex;background:var(--surface2);border:1px solid var(--border);border-radius:8px;overflow:hidden;padding:2px;gap:2px}
.mode-btn{width:32px;height:28px;border:none;border-radius:6px;background:transparent;font-size:14px;line-height:1;cursor:pointer;transition:all .18s;display:flex;align-items:center;justify-content:center}
.mode-btn.active{background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.mode-btn:hover:not(.active){background:var(--surface2);opacity:.85}
/* Pro light */
/* Pro dark */
/* Classic dark */

/* ── Multi-page header nav links ── */
.h-nav-link{padding:6px 14px;border-radius:8px;font-family:'Inter',sans-serif;font-size:13px;font-weight:500;color:var(--muted);text-decoration:none;transition:all .18s;white-space:nowrap}
.h-nav-link:hover{color:var(--text);background:var(--surface2)}
.h-nav-link.active{color:var(--accent);background:var(--accent-l);font-weight:600}
.header-nav{display:flex;align-items:center;gap:4px;position:absolute;left:50%;transform:translateX(-50%)}

/* ── nav-badge (Coming Soon label) ── */
.nav-badge{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--accent-l);color:var(--accent);border:1px solid rgba(42,92,255,.2);border-radius:20px;padding:1px 7px;vertical-align:middle;margin-left:6px;line-height:1.7;position:relative;top:-1px}

/* ── PF sub-nav (between PF calculator pages) ── */

/* ══ Cookie Consent Banner ══ */
#cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:9999;background:var(--surface);border-top:1px solid var(--border);box-shadow:0 -4px 24px rgba(0,0,0,.1);padding:16px 24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;transform:translateY(100%);transition:transform .35s cubic-bezier(.4,0,.2,1)}
#cookie-banner.visible{transform:translateY(0)}
#cookie-banner.hidden{display:none}
.cookie-text{flex:1;min-width:240px;font-size:13px;line-height:1.55;color:var(--text);opacity:.85}
.cookie-text a{color:var(--accent);text-decoration:underline}
.cookie-btns{display:flex;gap:8px;flex-shrink:0;flex-wrap:wrap}
.cookie-btn-accept{padding:9px 22px;border:none;border-radius:8px;background:var(--accent);color:#fff;font-family:'Inter',sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:opacity .18s}
.cookie-btn-accept:hover{opacity:.88}
.cookie-btn-decline{padding:9px 18px;border:1.5px solid var(--border);border-radius:8px;background:transparent;color:var(--muted);font-family:'Inter',sans-serif;font-size:13px;font-weight:500;cursor:pointer;transition:all .18s}
.cookie-btn-decline:hover{border-color:var(--muted);color:var(--text)}
@media(max-width:560px){#cookie-banner{padding:14px 16px;gap:12px}.cookie-btns{width:100%;justify-content:flex-end}}

/* ══ Blog Article Pages ══ */
.article-hero{text-align:center;padding:52px 20px 36px;background:linear-gradient(160deg,#eef2ff 0%,#f5f7ff 60%,#fff 100%);border-bottom:1px solid var(--border)}
.article-hero h1{font-size:clamp(20px,2.8vw,30px);font-weight:700;letter-spacing:-.5px;line-height:1.25;color:var(--text);margin-bottom:14px;max-width:780px;margin-left:auto;margin-right:auto}
.article-meta{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.article-meta .tag{background:var(--accent-l);color:var(--accent);border:1px solid rgba(42,92,255,.15);border-radius:20px;padding:3px 12px;font-weight:600;font-size:11.5px}
.article-meta .tag.green{background:var(--green-l);color:var(--green);border-color:rgba(26,154,108,.15)}
.article-meta .tag.fire{background:#fff3e0;color:#e65100;border-color:rgba(230,81,0,.15)}
.article-meta .tag.accent2{background:#fff0eb;color:var(--accent2);border-color:rgba(255,107,53,.15)}

.article-body{max-width:780px;margin:0 auto;padding:40px 24px 64px}
.article-body h2{font-size:18px;font-weight:700;color:var(--text);margin:32px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.article-body h3{font-size:15px;font-weight:600;color:var(--text);margin:20px 0 8px}
.article-body p{font-size:14px;line-height:1.8;color:var(--text);opacity:.85;margin-bottom:14px}
.article-lead{font-size:15.5px!important;line-height:1.75!important;opacity:.9!important;font-weight:400;border-left:3px solid var(--accent);padding-left:16px;margin-bottom:24px!important}
.article-body strong{color:var(--text);opacity:1}
.article-body ul.article-list{padding-left:20px;margin-bottom:14px}
.article-body ul.article-list li{font-size:14px;line-height:1.75;color:var(--text);opacity:.82;margin-bottom:6px}

.formula-box{background:var(--accent-l);border:1px solid rgba(42,92,255,.15);border-left:3px solid var(--accent);border-radius:0 10px 10px 0;padding:14px 20px;margin:16px 0;font-family:'Fira Code',monospace;font-size:14px;font-weight:500;color:var(--text)}
.formula-box sup{font-size:10px}

.data-table-wrap{overflow-x:auto;margin:16px 0 20px;border-radius:10px;border:1px solid var(--border)}
.data-table{width:100%;border-collapse:collapse;font-size:13px;min-width:420px}
.data-table thead th{background:var(--surface2);padding:10px 14px;text-align:left;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--border);white-space:nowrap}
.data-table tbody td{padding:10px 14px;border-bottom:1px solid var(--border);color:var(--text);font-family:'Fira Code',monospace;font-size:12.5px}
.data-table tbody tr:last-child td{border-bottom:none}
.data-table tbody tr:hover{background:var(--surface2)}

.faq-section{margin-top:40px;padding-top:24px;border-top:2px solid var(--border)}
.faq-section h2{font-size:18px;font-weight:700;color:var(--text);margin-bottom:20px}
.faq-item{margin-bottom:20px;padding:16px 20px;background:var(--surface2);border:1px solid var(--border);border-radius:10px}
.faq-item h3{font-size:14px;font-weight:600;color:var(--text);margin-bottom:8px}
.faq-item p{font-size:13.5px;line-height:1.7;color:var(--text);opacity:.78;margin-bottom:0}

.article-cta{background:var(--accent-l);border:1px solid rgba(42,92,255,.15);border-radius:var(--r);padding:24px;margin:32px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.article-cta-text{font-size:14px;font-weight:600;color:var(--text)}
.article-cta-sub{font-size:12.5px;color:var(--muted);margin-top:4px}
.article-cta a{display:inline-flex;align-items:center;gap:6px;padding:10px 22px;background:var(--accent);color:#fff;border-radius:8px;text-decoration:none;font-size:13px;font-weight:600;white-space:nowrap;transition:opacity .18s;flex-shrink:0}
.article-cta a:hover{opacity:.88}

/* Blog index cards */
.blog-index-hero{text-align:center;padding:48px 20px 32px;background:linear-gradient(160deg,#eef2ff 0%,#f5f7ff 60%,#fff 100%);border-bottom:1px solid var(--border)}
.blog-index-hero h1{font-size:clamp(22px,3vw,32px);font-weight:700;letter-spacing:-.5px;color:var(--text);margin-bottom:10px}
.blog-index-hero p{font-size:14px;color:var(--muted);max-width:520px;margin:0 auto}
.blog-grid{max-width:1000px;margin:40px auto 0;padding:0 24px 80px;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.blog-card-link{text-decoration:none;color:inherit;display:block}
.blog-card-inner{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:22px;box-shadow:var(--shadow);transition:all .18s;height:100%}
.blog-card-link:hover .blog-card-inner{border-color:var(--accent);box-shadow:0 4px 20px rgba(42,92,255,.1);transform:translateY(-2px)}
.blog-card-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:20px;padding:3px 10px;margin-bottom:12px}
.blog-card-title{font-size:15px;font-weight:700;color:var(--text);line-height:1.35;margin-bottom:10px}
.blog-card-excerpt{font-size:13px;line-height:1.65;color:var(--muted);margin-bottom:14px}
.blog-card-meta{font-size:11.5px;color:var(--muted);display:flex;gap:12px}
.blog-read-more{font-size:13px;font-weight:600;color:var(--accent);margin-top:12px}

/* Dark mode overrides for articles */

/* ── WhatsApp share button ── */
.whatsapp-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:8px;border:1.5px solid #e0f5e0;background:#f0fbf0;font-family:'Inter',sans-serif;font-size:13px;font-weight:500;color:#1a7a1a;cursor:pointer;transition:all .18s;text-decoration:none}
.whatsapp-btn:hover{border-color:#25d366;background:#e0fae0;color:#128c00}

/* ══ Page transition & progress bar ══ */
#nprogress-bar{position:fixed;top:0;left:0;width:0%;height:3px;background:var(--accent);z-index:9999;transition:width .2s ease,opacity .4s ease;border-radius:0 2px 2px 0;box-shadow:0 0 8px var(--accent)}
#nprogress-bar.loading{width:70%}
#nprogress-bar.done{width:100%;opacity:0}

/* Page fade-in on load */
body{animation:pageFadeIn .18s ease both}
@keyframes pageFadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* Instant visual feedback on internal link clicks */
a[href^="https://www.digicalc.in"]:active,
a[href^="/"]:active{opacity:.65;transition:opacity .05s}


/* ── Mobile overflow fix ── */
html{overflow-x:hidden}
@media(max-width:820px){header{padding:0 16px}}
@media(max-width:480px){.main,.calc-section{padding:0 12px}
.loan-tabs-wrap{padding:16px 12px 0}.card{padding:16px 14px}
.result-value{font-family:'Fira Code',monospace;font-size:clamp(14px,3.5vw,18px);font-weight:600;color:#2a2825;word-break:break-all;overflow-wrap:anywhere;min-height:28px}}

header.scrolled{box-shadow:0 2px 20px rgba(0,0,0,.09)}

/* ── Dropdown nav ── */
.nav-dropdown{position:relative;display:inline-block}
.nav-dropdown-menu{display:none;position:absolute;top:calc(100% + 8px);left:0;min-width:220px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.12);padding:8px;z-index:500;white-space:nowrap}
.nav-dropdown-menu.open{display:block}
.nav-dropdown-group{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:6px 10px 4px}
.nav-dropdown-divider{height:1px;background:var(--border);margin:4px 0}
.nav-dropdown-item{display:block;padding:8px 10px;font-size:13px;font-weight:500;color:var(--text);text-decoration:none;border-radius:7px;transition:background .12s}
.nav-dropdown-item:hover{background:var(--accent-l);color:var(--accent)}

.hub-hero .hero-eyebrow{color:rgba(255,255,255,.8);letter-spacing:.2em;font-size:11px}

canvas{max-width:100%!important}
@media(max-width:480px){.results-grid{grid-template-columns:1fr}.result-value{font-family:'Fira Code',monospace;font-size:clamp(14px,3.5vw,18px);font-weight:600;color:#2a2825;word-break:break-all;overflow-wrap:anywhere;min-height:28px}}
/* ── FIRE tooltip ── */
.fire-tip{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:var(--surface2);border:1px solid var(--border);font-size:9px;font-weight:700;color:var(--muted);cursor:help;position:relative;vertical-align:middle;margin-left:4px}
.fire-tip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:#1a1917;color:#fff;font-size:11px;font-weight:400;line-height:1.6;padding:10px 12px;border-radius:8px;width:220px;text-align:left;white-space:normal;opacity:0;pointer-events:none;transition:opacity .2s;z-index:9999;text-transform:none!important;letter-spacing:0!important}
.fire-tip:hover::after{opacity:1!important}

/* ── Donut chart ── */
.donut-wrap{position:relative;height:200px;max-width:300px;margin:12px auto 8px}

.field-input.rate-input{width:72px;min-width:72px;text-align:right}
#suStepInput{width:80px;min-width:80px}

.fire-result-tile{min-width:0}
@media(max-width:600px){.fire-results-grid{grid-template-columns:1fr!important}}
@media(max-width:600px){.results-grid{gap:8px}.result-box{padding:12px 10px}}
.result-value,.result-box{max-width:100%;box-sizing:border-box}
.result-box.accent .result-value{color:#1a3bcc!important;font-weight:600!important}
.result-box.green .result-value{color:#047857!important;font-weight:600!important}
#su-type-pct,#su-type-abs{min-width:32px;text-align:center}