/* GharCalc — Design System */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --brass: #c09b4e;
  --brass-dk: #a07c35;
  --brass-light: rgba(192,155,78,.12);
  --moss: #2d7d5e;
  --moss-light: rgba(45,125,94,.12);
  --brick: #b33f3f;
  --brick-light: rgba(179,63,63,.12);
  --bg: #f8f6f0;
  --surface: #ffffff;
  --surface-2: #f1ede3;
  --surface-3: #e8e3d8;
  --ink: #1c1c2e;
  --muted: #64748b;
  --border: rgba(0,0,0,.08);
  --border-hi: rgba(0,0,0,.15);
  --sh-sm: 0 1px 2px rgba(0,0,0,.06),0 1px 4px rgba(0,0,0,.04);
  --sh-md: 0 4px 14px rgba(0,0,0,.08),0 1px 4px rgba(0,0,0,.04);
  --sh-lg: 0 16px 48px rgba(0,0,0,.1),0 4px 8px rgba(0,0,0,.06);
  --f-display: 'Space Grotesk', system-ui, sans-serif;
  --f-body: 'Inter', system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', monospace;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;
  --r:10px;--r-sm:6px;--r-lg:18px;--nav-h:62px;--mw:1280px;
  --t:160ms ease;--t-sl:280ms ease;
}

[data-theme="dark"] {
  --bg: #0d0f1c;
  --surface: #13162a;
  --surface-2: #1a1e32;
  --surface-3: #22273d;
  --ink: #ede9df;
  --muted: #8a96a8;
  --border: rgba(255,255,255,.07);
  --border-hi: rgba(255,255,255,.14);
  --sh-sm: 0 1px 2px rgba(0,0,0,.5),0 1px 4px rgba(0,0,0,.4);
  --sh-md: 0 4px 14px rgba(0,0,0,.55),0 1px 4px rgba(0,0,0,.4);
  --sh-lg: 0 16px 48px rgba(0,0,0,.65),0 4px 8px rgba(0,0,0,.5);
  --brass-light: rgba(192,155,78,.16);
  --moss-light: rgba(45,125,94,.16);
  --brick-light: rgba(179,63,63,.16);
}

/* Theme transition */
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: 350ms;
  animation-timing-function: cubic-bezier(.4,0,.2,1);
}

/* Reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:var(--f-body);background:var(--bg);color:var(--ink);line-height:1.6;min-height:100vh}
a{color:var(--brass);text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:var(--f-body);cursor:pointer;border:none;background:none}
input,select,textarea{font-family:var(--f-body)}
ul,ol{list-style:none}
img{max-width:100%;height:auto;display:block}

/* Nav */
.nav-bar{position:sticky;top:0;z-index:100;height:var(--nav-h);background:var(--surface);border-bottom:1px solid var(--border);box-shadow:var(--sh-sm)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:100%;max-width:var(--mw);margin:0 auto;padding:0 var(--s5);gap:var(--s4)}
.nav-logo{font-family:var(--f-display);font-size:1.3rem;font-weight:700;color:var(--ink);letter-spacing:-.02em;text-decoration:none;white-space:nowrap}
.nav-logo span{color:var(--brass)}
.nav-links{display:flex;align-items:center;gap:var(--s2);flex:1;justify-content:center}
.nav-link{font-family:var(--f-display);font-size:.875rem;font-weight:500;color:var(--muted);padding:var(--s2) var(--s3);border-radius:var(--r-sm);transition:color var(--t),background var(--t);text-decoration:none;white-space:nowrap}
.nav-link:hover{color:var(--ink);background:var(--surface-2);text-decoration:none}
.nav-link.active{color:var(--brass);background:var(--brass-light);font-weight:600}
.nav-actions{display:flex;align-items:center;gap:var(--s2)}
.btn-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--r-sm);color:var(--muted);transition:color var(--t),background var(--t)}
.btn-icon:hover{color:var(--ink);background:var(--surface-2)}
.nav-hamburger{display:none}
.nav-mobile{display:none;flex-direction:column;gap:var(--s1);padding:var(--s3) var(--s5);background:var(--surface);border-bottom:1px solid var(--border)}
.nav-mobile.open{display:flex}
.nav-mobile .nav-link{display:block;padding:var(--s3) var(--s4);font-size:.9375rem}

/* Hero */
.hero-section{background:linear-gradient(135deg,var(--surface) 0%,var(--surface-2) 100%);border-bottom:1px solid var(--border);padding:var(--s7) var(--s5);position:relative;overflow:hidden}
.hero-section::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 60% 40%,var(--brass-light) 0%,transparent 70%);pointer-events:none}
.hero-content{max-width:var(--mw);margin:0 auto;position:relative}
.hero-title{font-family:var(--f-display);font-size:clamp(1.75rem,4vw,2.75rem);font-weight:700;line-height:1.15;letter-spacing:-.025em;color:var(--ink);margin-bottom:var(--s3)}
.hero-sub{font-size:1.0625rem;color:var(--muted);max-width:640px;line-height:1.65;margin-bottom:var(--s5)}
.hero-badges{display:flex;flex-wrap:wrap;gap:var(--s2)}
.badge{font-size:.75rem;font-weight:600;font-family:var(--f-display);padding:4px var(--s3);background:var(--surface);border:1px solid var(--border-hi);border-radius:999px;color:var(--muted)}

/* Layout */
.calc-layout{display:grid;grid-template-columns:360px 1fr;gap:0;max-width:var(--mw);margin:0 auto;align-items:start}
.calc-inputs{position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));overflow-y:auto;padding:var(--s6) var(--s5);background:var(--surface);border-right:1px solid var(--border);scrollbar-width:thin}
.calc-inputs::-webkit-scrollbar{width:4px}
.calc-inputs::-webkit-scrollbar-thumb{background:var(--border-hi);border-radius:2px}
.calc-results{padding:var(--s6)}
.panel-title{font-family:var(--f-display);font-size:1.0625rem;font-weight:700;color:var(--ink);margin-bottom:var(--s5);letter-spacing:-.01em}

/* Inputs */
.input-group{margin-bottom:var(--s5)}
.input-label{display:block;font-size:.8125rem;font-weight:600;font-family:var(--f-display);color:var(--muted);letter-spacing:.01em;margin-bottom:var(--s2)}
.input-row{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s3)}
.input-field{flex:1;height:40px;padding:0 var(--s3);background:var(--surface-2);border:1px solid var(--border-hi);border-radius:var(--r-sm);font-family:var(--f-mono);font-size:.9375rem;color:var(--ink);transition:border-color var(--t),background var(--t);outline:none}
.input-field:focus{border-color:var(--brass);background:var(--surface)}
.input-unit{font-size:.875rem;font-weight:600;color:var(--muted);white-space:nowrap}
.input-hint{font-size:.8125rem;color:var(--muted);margin-top:var(--s2)}
.input-hint strong{color:var(--ink)}

.slider{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;background:linear-gradient(to right,var(--brass) 0%,var(--brass) var(--slider-pct,50%),var(--surface-3) var(--slider-pct,50%),var(--surface-3) 100%);cursor:pointer;outline:none;border:none}
.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--surface);border:2.5px solid var(--brass);box-shadow:var(--sh-sm);cursor:pointer;transition:transform var(--t),box-shadow var(--t)}
.slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--surface);border:2.5px solid var(--brass);cursor:pointer}
.slider:hover::-webkit-slider-thumb,.slider:focus::-webkit-slider-thumb{transform:scale(1.2);box-shadow:0 0 0 4px var(--brass-light),var(--sh-sm)}

.radio-group{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s2)}
.radio-label{display:flex;align-items:center;gap:var(--s2);font-size:.875rem;color:var(--ink);cursor:pointer;padding:var(--s2) var(--s3);background:var(--surface-2);border:1px solid var(--border-hi);border-radius:var(--r-sm);transition:border-color var(--t),background var(--t)}
.radio-label:hover{border-color:var(--brass)}
.radio-label input{accent-color:var(--brass)}
.radio-label:has(input:checked){background:var(--brass-light);border-color:var(--brass)}

.advanced-toggle{border:1px solid var(--border-hi);border-radius:var(--r-sm);overflow:hidden;margin-top:var(--s3)}
.advanced-summary{display:flex;align-items:center;justify-content:space-between;padding:var(--s3) var(--s4);cursor:pointer;font-size:.875rem;font-weight:600;color:var(--muted);user-select:none;list-style:none;background:var(--surface-2)}
.advanced-summary:hover{color:var(--ink)}
.advanced-summary::-webkit-details-marker{display:none}
.advanced-body{padding:var(--s4)}

/* Bento */
.bento-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.bento-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:var(--s4) var(--s5);box-shadow:var(--sh-sm);transition:box-shadow var(--t),transform var(--t);display:flex;flex-direction:column;gap:var(--s1)}
.bento-card:hover{box-shadow:var(--sh-md);transform:translateY(-1px)}
.bento-hero{grid-column:span 3;background:linear-gradient(135deg,var(--surface) 0%,var(--surface-2) 100%);border-color:var(--border-hi);box-shadow:var(--sh-md);padding:var(--s6);position:relative;overflow:hidden}
.bento-hero::before{content:'';position:absolute;top:-40px;right:-40px;width:200px;height:200px;background:radial-gradient(circle,var(--brass-light) 0%,transparent 70%);pointer-events:none}
.bento-label{font-size:.75rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.bento-value{font-family:var(--f-mono);font-size:1.375rem;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.bento-hero .bento-value{font-size:2.5rem;font-weight:600;letter-spacing:-.025em;line-height:1.1}
.bento-sub{font-size:.8125rem;color:var(--muted)}
.bento-moss{border-left:3px solid var(--moss)}
.bento-brass{border-left:3px solid var(--brass)}
.bento-brick{border-left:3px solid var(--brick)}

/* Action bar */
.action-bar{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--border)}
.btn-outline{display:inline-flex;align-items:center;gap:var(--s2);padding:8px var(--s4);border-radius:var(--r-sm);font-size:.875rem;font-weight:600;font-family:var(--f-display);border:1px solid var(--border-hi);color:var(--ink);background:var(--surface);transition:border-color var(--t),background var(--t),color var(--t);cursor:pointer;text-decoration:none}
.btn-outline:hover{border-color:var(--brass);color:var(--brass);background:var(--brass-light);text-decoration:none}

/* Charts */
.charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);margin-top:var(--s5)}
.chart-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:var(--s5);box-shadow:var(--sh-sm)}
.chart-title{font-family:var(--f-display);font-size:.9375rem;font-weight:600;color:var(--ink);margin-bottom:var(--s4)}

/* Section */
.section{padding-top:var(--s7)}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s5);flex-wrap:wrap;gap:var(--s3)}
.section-title{font-family:var(--f-display);font-size:1.125rem;font-weight:700;color:var(--ink);letter-spacing:-.01em}

/* Toggle */
.toggle-group{display:flex}
.toggle-btn{padding:6px 14px;font-size:.8125rem;font-weight:600;font-family:var(--f-display);color:var(--muted);background:var(--surface-2);border:1px solid var(--border-hi);cursor:pointer;transition:all var(--t)}
.toggle-btn:first-child{border-radius:var(--r-sm) 0 0 var(--r-sm)}
.toggle-btn:last-child{border-radius:0 var(--r-sm) var(--r-sm) 0;border-left:none}
.toggle-btn.active{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* Table */
.table-wrapper{overflow-x:auto;border-radius:var(--r);border:1px solid var(--border)}
.amort-table{width:100%;border-collapse:collapse;font-size:.875rem}
.amort-table th{text-align:right;padding:var(--s3) var(--s4);font-family:var(--f-display);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);background:var(--surface-2);border-bottom:1px solid var(--border)}
.amort-table th:first-child{text-align:left}
.amort-table td{text-align:right;padding:var(--s3) var(--s4);font-family:var(--f-mono);font-size:.875rem;border-bottom:1px solid var(--border);color:var(--ink);font-variant-numeric:tabular-nums}
.amort-table td:first-child{text-align:left;font-family:var(--f-body);color:var(--muted)}
.amort-table tr:last-child td{border-bottom:none}
.amort-table tr:hover td{background:var(--surface-2)}

/* Formula */
.formula-box{background:var(--surface-2);border-radius:var(--r);border:1px solid var(--border);border-left:3px solid var(--brass);padding:var(--s5);overflow-x:auto}
.formula-text{font-family:var(--f-mono);font-size:.9375rem;color:var(--ink);line-height:1.6}
.formula-text+.formula-text{margin-top:var(--s3)}

/* FAQ */
.faq-list{display:flex;flex-direction:column;gap:var(--s3)}
.faq-item{border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.faq-item[open]{border-color:var(--border-hi)}
.faq-question{display:flex;align-items:center;justify-content:space-between;padding:var(--s4) var(--s5);cursor:pointer;font-family:var(--f-display);font-size:.9375rem;font-weight:600;color:var(--ink);background:var(--surface);user-select:none;list-style:none}
.faq-question:hover{background:var(--surface-2)}
.faq-question::-webkit-details-marker{display:none}
.faq-question::after{content:'+';font-size:1.25rem;color:var(--brass);transition:transform var(--t);flex-shrink:0}
.faq-item[open] .faq-question::after{transform:rotate(45deg)}
.faq-answer{padding:0 var(--s5) var(--s5);font-size:.9375rem;color:var(--muted);line-height:1.65;background:var(--surface)}

/* Related */
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--s4)}
.related-card{display:block;padding:var(--s5);background:var(--surface);border:1px solid var(--border);border-radius:var(--r);text-decoration:none;transition:border-color var(--t),box-shadow var(--t),transform var(--t)}
.related-card:hover{border-color:var(--brass);box-shadow:var(--sh-md);transform:translateY(-2px);text-decoration:none}
.related-title{font-family:var(--f-display);font-size:.9375rem;font-weight:600;color:var(--ink);margin-bottom:var(--s1)}
.related-desc{font-size:.8125rem;color:var(--muted);line-height:1.45}

/* Tips */
.tips-list{display:flex;flex-direction:column;gap:var(--s3)}
.tips-list li{display:flex;align-items:flex-start;gap:var(--s3);font-size:.9375rem;color:var(--ink);line-height:1.55;padding:var(--s4);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm)}
.tips-list li::before{content:'→';color:var(--brass);font-weight:700;flex-shrink:0;margin-top:1px}

/* Eligibility gauge */
.eligibility-gauge{margin:var(--s4) 0}
.eligibility-track{height:10px;border-radius:5px;background:var(--surface-3);overflow:hidden}
.eligibility-fill{height:100%;border-radius:5px;background:linear-gradient(90deg,var(--brick) 0%,var(--brass) 55%,var(--moss) 100%);transition:width .5s cubic-bezier(.4,0,.2,1)}
.eligibility-labels{display:flex;justify-content:space-between;margin-top:var(--s2);font-size:.75rem;color:var(--muted)}
.verdict-badge{display:inline-block;padding:4px var(--s3);border-radius:999px;font-size:.8125rem;font-weight:700;font-family:var(--f-display)}
.verdict-strong{background:var(--moss-light);color:var(--moss);border:1px solid var(--moss)}
.verdict-moderate{background:var(--brass-light);color:var(--brass);border:1px solid var(--brass)}
.verdict-low{background:var(--brick-light);color:var(--brick);border:1px solid var(--brick)}

/* Affordability gauge */
.gauge-zones{display:grid;grid-template-columns:1fr 1fr 1fr;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--border);font-size:.8125rem;font-weight:600;text-align:center}
.gauge-zone{padding:var(--s3) var(--s2);line-height:1.3}
.zone-comfortable{background:var(--moss-light);color:var(--moss)}
.zone-manageable{background:var(--brass-light);color:var(--brass)}
.zone-tight{background:var(--brick-light);color:var(--brick)}
.gauge-needle-wrapper{position:relative;height:8px;background:var(--surface-3);border-radius:4px;margin-top:var(--s4);overflow:visible}
.gauge-needle{position:absolute;top:-4px;width:16px;height:16px;border-radius:50%;background:var(--ink);transform:translateX(-50%);transition:left .4s cubic-bezier(.4,0,.2,1);box-shadow:var(--sh-md)}

/* Verdict banner */
.verdict-banner{display:flex;align-items:flex-start;gap:var(--s4);padding:var(--s5);border-radius:var(--r);border:1px solid var(--border)}
.verdict-icon{font-size:1.5rem;flex-shrink:0;line-height:1}
.verdict-title{font-family:var(--f-display);font-size:1rem;font-weight:700;color:var(--ink);margin-bottom:4px}
.verdict-desc{font-size:.875rem;color:var(--muted);line-height:1.5}

/* Rate table */
.rate-table-full{width:100%;border-collapse:collapse;font-size:.9375rem}
.rate-table-full th{text-align:left;padding:var(--s3) var(--s4);font-family:var(--f-display);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);background:var(--surface-2);border-bottom:1px solid var(--border);cursor:pointer;white-space:nowrap;user-select:none}
.rate-table-full th:hover{color:var(--ink)}
.rate-table-full td{padding:var(--s4);border-bottom:1px solid var(--border);color:var(--ink)}
.rate-table-full tr:last-child td{border-bottom:none}
.rate-table-full tr:hover td{background:var(--surface-2)}
.rate-value{font-family:var(--f-mono);font-weight:500;font-size:1rem;color:var(--brass);font-variant-numeric:tabular-nums}
.rate-lowest-badge{display:inline-block;font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px var(--s2);border-radius:3px;background:var(--moss-light);color:var(--moss);border:1px solid var(--moss);margin-left:var(--s2)}
.rates-disclaimer{padding:var(--s4) var(--s5);background:var(--brick-light);border:1px solid var(--brick);border-radius:var(--r);font-size:.875rem;color:var(--ink);line-height:1.6;margin-top:var(--s5)}

/* PMAY */
.category-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-bottom:var(--s2)}
.category-card{border:2px solid var(--border-hi);border-radius:var(--r-sm);padding:var(--s4);cursor:pointer;text-align:center;transition:border-color var(--t),background var(--t)}
.category-card:hover{border-color:var(--brass)}
.category-card.active{border-color:var(--brass);background:var(--brass-light)}
.category-label{font-family:var(--f-display);font-size:1.125rem;font-weight:700;color:var(--ink)}
.category-desc{font-size:.6875rem;color:var(--muted);margin-top:2px;line-height:1.3}
.category-limit{font-size:.6875rem;font-weight:600;color:var(--brass);margin-top:4px}
.pmay-scheme-info{background:linear-gradient(135deg,var(--brass-light),var(--moss-light));border:1px solid var(--brass);border-radius:var(--r);padding:var(--s5);margin-top:var(--s5)}
.scheme-info-title{font-family:var(--f-display);font-weight:700;font-size:1rem;color:var(--ink);margin-bottom:var(--s3)}
.scheme-info-pills{display:flex;flex-wrap:wrap;gap:var(--s2)}
.scheme-pill{display:inline-block;padding:4px var(--s3);background:var(--surface);border:1px solid var(--border-hi);border-radius:999px;font-size:.8125rem;font-weight:600;color:var(--ink)}
.pmay-disclaimer{padding:var(--s4) var(--s5);background:var(--brass-light);border:1px solid var(--brass);border-radius:var(--r);font-size:.875rem;color:var(--ink);line-height:1.6;margin-top:var(--s5)}

/* Mobile sticky */
.mobile-sticky{display:none;position:fixed;bottom:0;left:0;right:0;z-index:50;background:rgba(19,22,42,.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid rgba(255,255,255,.08);padding:var(--s3) var(--s5);flex-direction:row;align-items:center;justify-content:space-between}
.sticky-label{font-size:.8125rem;font-weight:600;color:rgba(255,255,255,.6)}
.sticky-value{font-family:var(--f-mono);font-size:1.375rem;font-weight:600;color:var(--brass);font-variant-numeric:tabular-nums}

/* Footer */
.site-footer{background:var(--surface);border-top:1px solid var(--border);padding:var(--s7) 0 var(--s6);margin-top:var(--s8)}
.footer-inner{max-width:var(--mw);margin:0 auto;padding:0 var(--s5);display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);align-items:start}
.footer-brand{display:flex;flex-direction:column;gap:var(--s3)}
.footer-tagline{font-size:.9375rem;color:var(--muted);max-width:280px}
.footer-links{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);align-content:flex-start}
.footer-links a{font-size:.875rem;font-weight:500;color:var(--muted);transition:color var(--t)}
.footer-links a:hover{color:var(--brass);text-decoration:none}
.footer-disclaimer{grid-column:1/-1;font-size:.8125rem;color:var(--muted);line-height:1.6;padding-top:var(--s5);border-top:1px solid var(--border)}
.footer-copy{font-size:.8125rem;color:var(--muted);margin-top:var(--s3)}

/* Toast */
.toast-container{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:8px}
.toast{padding:12px 16px;border-radius:6px;font-size:.875rem;font-weight:500;background:var(--ink);color:var(--bg);box-shadow:var(--sh-lg);animation:toast-in .2s ease}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}}
.toast-success{background:var(--moss)}
.toast-error{background:var(--brick)}

/* Utilities */
.mt-3{margin-top:12px}.mt-5{margin-top:24px}.mb-3{margin-bottom:12px}.ml-2{margin-left:8px}

/* Responsive */
@media(max-width:1024px){
  .calc-layout{grid-template-columns:1fr}
  .calc-inputs{position:static;height:auto;overflow:visible;border-right:none;border-bottom:1px solid var(--border)}
  .calc-results{padding:24px}
  .bento-hero{grid-column:span 3}
  .charts-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
  .nav-links{display:none}
  .nav-hamburger{display:flex}
  .bento-grid{grid-template-columns:repeat(2,1fr)}
  .bento-hero{grid-column:span 2}
  .bento-hero .bento-value{font-size:2rem}
  .related-grid{grid-template-columns:repeat(2,1fr)}
  .footer-inner{grid-template-columns:1fr}
  .hero-section{padding:32px 16px}
  .calc-results{padding:16px}
  .mobile-sticky{display:flex}
  .charts-grid{grid-template-columns:1fr}
}
@media(max-width:480px){
  .bento-grid{grid-template-columns:1fr}
  .bento-hero{grid-column:span 1}
  .related-grid{grid-template-columns:1fr}
  .category-cards{grid-template-columns:1fr}
}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-hi);border-radius:3px}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:1ms!important;animation-duration:1ms!important}
}


.seo-section {
  background: var(--surface-alt, #f8f5f0);
  padding: 3rem 1.5rem 4rem;
  margin-top: 2rem;
}
.seo-inner {
  max-width: 860px;
  margin: 0 auto;
}
.seo-heading {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}
.seo-section p {
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 1rem;
}
.seo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0;
}
.seo-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem;
}
.seo-card h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}
.seo-card p { margin: 0; font-size: 0.9rem; }
.faq-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
  background: var(--surface);
}
.faq-item summary {
  font-weight: 600;
  cursor: pointer;
  color: var(--text-primary);
  list-style: none;
}
.faq-item summary::after {
  content: " +";
  float: right;
  font-weight: 400;
  color: var(--accent);
}
.faq-item[open] summary::after { content: " −"; }
.faq-item p {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.65;
}
.faq-item a { color: var(--accent); }