/* CALCDESK — Design System */
:root {
  --ink: #2B2622; --ink-soft: #3D362F;
  --paper: #F7F4ED; --paper-dim: #EFEAE0; --line: #DDD5C7;
  --accent: #4F7CAC; --accent-dark: #3D6189;
  --accent-warm: #E0793E; --good: #6B9080; --bad: #C1574A;
  --slate: #6B6358; --slate-light: #A39C8E;
  --font-display: 'Space Grotesk','Arial Black',sans-serif;
  --font-body: 'Inter',system-ui,sans-serif;
  --font-mono: 'JetBrains Mono','Courier New',monospace;
  --space-1:.5rem;--space-2:.75rem;--space-3:1rem;--space-4:1.5rem;--space-5:2rem;--space-6:3rem;--space-7:4rem;
  --radius-sm:6px;--radius-md:10px;--radius-lg:16px;
  --shadow-lift:0 4px 16px rgba(43,38,34,.12);--shadow-card:0 2px 8px rgba(43,38,34,.08);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--font-body);background:var(--paper);color:var(--ink);line-height:1.6;font-size:16px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.15;margin:0 0 var(--space-3)}
h2{font-size:1.5rem;margin-top:var(--space-5)}
h3{font-size:1.1rem}
p{margin:0 0 var(--space-3)}
ul,ol{padding-left:1.4rem;color:var(--slate)}
li{margin-bottom:.4rem}
details summary{cursor:pointer;font-weight:600}

/* HEADER */
.site-header{background:var(--ink);color:var(--paper);position:sticky;top:0;z-index:100;border-bottom:3px solid var(--accent)}
.header-inner{max-width:1180px;margin:0 auto;padding:0 var(--space-3);display:flex;align-items:center;gap:var(--space-3);height:56px}
.logo{font-family:var(--font-display);font-weight:700;font-size:1.2rem;color:var(--paper);display:flex;align-items:center;gap:.4rem;text-decoration:none}
.logo-mark{font-family:var(--font-mono);color:var(--accent);font-weight:700}
.main-nav{display:flex;gap:var(--space-3);margin-left:auto}
.main-nav a{color:var(--paper);font-size:.9rem;opacity:.8;text-decoration:none;transition:opacity .15s}
.main-nav a:hover,.main-nav a.active{opacity:1;border-bottom:2px solid var(--accent);padding-bottom:2px}
.nav-toggle{display:none;background:none;border:none;color:var(--paper);font-size:1.4rem;cursor:pointer;margin-left:auto}
@media(max-width:680px){
  .nav-toggle{display:block}
  .main-nav{display:none;position:absolute;top:56px;left:0;right:0;background:var(--ink);flex-direction:column;padding:var(--space-3);gap:var(--space-2)}
  .main-nav.open{display:flex}
}

/* HERO */
.hero{background:var(--ink);color:var(--paper);padding:var(--space-7) 0 var(--space-6);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;top:-40%;right:-10%;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(79,124,172,.18) 0%,transparent 70%)}
.hero-inner{max-width:1180px;margin:0 auto;padding:0 var(--space-3);position:relative;z-index:1;display:grid;grid-template-columns:1fr 420px;gap:var(--space-6);align-items:center}
@media(max-width:960px){.hero-inner{grid-template-columns:1fr}.hero-widget-col{order:2}}
.hero-eyebrow{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.18em;font-size:.78rem;color:var(--accent);margin-bottom:var(--space-2)}
.hero h1{font-family:var(--font-display);font-size:clamp(2.4rem,6vw,4.2rem);font-weight:600;line-height:1.05;margin:0 0 var(--space-3);max-width:14ch;letter-spacing:-.01em}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero>div>p,.hero-text-col p{font-size:1.15rem;max-width:42ch;opacity:.85;margin:0 0 var(--space-4)}
.hero-stats{display:flex;gap:var(--space-5);margin-top:var(--space-5);flex-wrap:wrap}
.hero-stat .num{font-family:var(--font-mono);font-size:2rem;font-weight:700;color:var(--accent);display:block}
.hero-stat .label{font-size:.85rem;opacity:.7;text-transform:uppercase;letter-spacing:.06em}

/* HERO WIDGET */
.hero-widget{background:var(--paper);border-radius:var(--radius-md);padding:var(--space-3);color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.3);position:relative;z-index:2}
.hero-widget-tabs{display:flex;margin-bottom:var(--space-3);border:1.5px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.hero-widget-tabs button{flex:1;font-family:var(--font-mono);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;border:none;background:var(--paper-dim);color:var(--slate);padding:.5rem .4rem;cursor:pointer;transition:all .15s;border-right:1.5px solid var(--line)}
.hero-widget-tabs button:last-child{border-right:none}
.hero-widget-tabs button.active{background:var(--ink);color:var(--paper)}
.hero-widget-panel{display:none}
.hero-widget-panel.active{display:block}
.hero-widget-field{margin-bottom:.6rem}
.hero-widget-field label{display:block;font-size:.78rem;font-weight:600;color:var(--ink);margin-bottom:.25rem}
.hero-widget-field input,.hero-widget-field select{width:100%;font-family:var(--font-mono);font-size:.9rem;padding:.5rem .7rem;border:1.5px solid var(--line);border-radius:var(--radius-sm);background:var(--paper);color:var(--ink)}
.hero-widget-field input:focus,.hero-widget-field select:focus{outline:none;border-color:var(--accent)}
.hero-widget-row{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.hero-widget-btn{width:100%;font-family:var(--font-mono);font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;background:var(--accent);color:var(--paper);border:none;border-radius:var(--radius-sm);padding:.65rem;cursor:pointer;margin-top:.6rem;transition:background .15s}
.hero-widget-btn:hover{background:var(--accent-dark)}
.hero-widget-result{margin-top:.75rem;background:var(--ink);color:var(--paper);border-radius:var(--radius-sm);padding:.75rem 1rem;display:none}
.hero-widget-result.visible{display:block}
.hero-widget-result .hw-label{font-family:var(--font-mono);font-size:.65rem;text-transform:uppercase;letter-spacing:.14em;color:var(--accent);margin-bottom:.25rem}
.hero-widget-result .hw-value{font-family:var(--font-display);font-size:1.8rem;font-weight:700;line-height:1.1}
.hero-widget-result .hw-sub{font-size:.8rem;opacity:.7;margin-top:.2rem;font-family:var(--font-mono)}
.hero-widget-link{display:block;margin-top:.6rem;font-family:var(--font-mono);font-size:.75rem;color:var(--accent);text-align:right}

/* LAYOUT */
.container{max-width:1180px;margin:0 auto;padding:var(--space-5) var(--space-3)}
.calc-section{margin-bottom:var(--space-7)}
.calc-section h2{font-size:1.8rem;color:var(--ink);margin-bottom:var(--space-4);display:flex;align-items:baseline;gap:var(--space-3)}
.section-meta{font-family:var(--font-mono);font-size:.75rem;color:var(--slate-light);text-transform:uppercase;letter-spacing:.1em;font-weight:400}
.calc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--space-3)}
.calc-card{display:block;background:white;border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-3);text-decoration:none;color:var(--ink);transition:transform .15s,box-shadow .15s,border-color .15s}
.calc-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);border-color:var(--accent);text-decoration:none}
.calc-card .tag{font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);background:rgba(79,124,172,.12);padding:.2rem .6rem;border-radius:3px;display:inline-block;margin-bottom:var(--space-2)}
.calc-card h3{font-size:1rem;margin:0 0 var(--space-1)}
.calc-card p{font-size:.9rem;color:var(--slate);margin:0 0 var(--space-2);line-height:1.5}
.calc-card .go{font-family:var(--font-mono);font-size:.8rem;color:var(--accent)}

/* AD SLOTS */
.ad-slot{background:var(--paper-dim);border:1px dashed var(--line);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--slate-light);font-family:var(--font-mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;margin:var(--space-4) 0}
.ad-slot--leaderboard{height:90px}
.ad-slot--in-content{min-height:120px;padding:var(--space-3)}
.ad-slot--sidebar{min-height:250px}

/* CALC PAGE LAYOUT */
.calc-header{margin-bottom:var(--space-5);padding-bottom:var(--space-4);border-bottom:1px solid var(--line)}
.breadcrumb{font-family:var(--font-mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--slate-light);margin-bottom:var(--space-2)}
.breadcrumb a{color:var(--slate-light)}
.lede{font-size:1.1rem;color:var(--slate);max-width:60ch;margin:0}
.page-content{display:grid;grid-template-columns:1fr 300px;gap:var(--space-5);align-items:start}
@media(max-width:900px){.page-content{grid-template-columns:1fr}.sidebar{display:none}}
.sidebar{position:sticky;top:76px}

/* WIDGET */
.calc-widget{background:white;border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-4);margin-bottom:var(--space-4);box-shadow:var(--shadow-card)}
.calc-widget h2{font-size:1.1rem;margin:0 0 var(--space-3)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
@media(max-width:600px){.form-grid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:.35rem}
.field label{font-size:.85rem;font-weight:600;color:var(--ink)}
.field input,.field select{font-family:var(--font-mono);font-size:1rem;padding:.6rem .8rem;border:1.5px solid var(--line);border-radius:var(--radius-sm);background:var(--paper);color:var(--ink);transition:border-color .15s,box-shadow .15s;width:100%}
.field input:focus,.field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,124,172,.18)}
.hint{font-size:.78rem;color:var(--slate-light)}
.btn-calc{font-family:var(--font-mono);font-size:.95rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;background:var(--accent);color:var(--paper);border:none;border-radius:var(--radius-sm);padding:.85rem 2rem;cursor:pointer;transition:background .15s,transform .1s;margin-top:var(--space-3)}
.btn-calc:hover{background:var(--accent-dark);transform:translateY(-1px)}
.unit-toggle{display:flex;border:1.5px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;width:fit-content;margin-bottom:var(--space-3)}
.unit-toggle button{font-family:var(--font-mono);font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:.45rem 1rem;border:none;background:var(--paper-dim);color:var(--slate);cursor:pointer;transition:all .15s;border-right:1.5px solid var(--line)}
.unit-toggle button:last-child{border-right:none}
.unit-toggle button.active{background:var(--ink);color:var(--paper)}

/* RESULT NOTE */
.result-note{margin-top:var(--space-5);margin-left:var(--space-1);background:var(--paper);color:var(--ink);border-radius:var(--radius-sm);padding:var(--space-4);position:relative;display:none;font-family:var(--font-mono);border:1px solid var(--line);box-shadow:var(--shadow-lift);transform:rotate(-1deg)}
.result-note.visible{display:block;animation:note-in .35s ease}
@keyframes note-in{from{opacity:0;transform:rotate(-1deg) translateY(8px)}to{opacity:1;transform:rotate(-1deg) translateY(0)}}
.result-note::before{content:"";position:absolute;top:0;right:0;width:0;height:0;border-style:solid;border-width:0 26px 26px 0;border-color:transparent var(--paper-dim) transparent transparent}
.receipt-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.16em;color:var(--accent);margin-bottom:var(--space-2);font-weight:700}
.receipt-main{font-family:var(--font-display);font-size:clamp(2rem,6vw,3.2rem);font-weight:700;margin:0 0 var(--space-1);line-height:1.1;color:var(--ink)}
.receipt-sub{font-size:.9rem;color:var(--slate);margin-bottom:var(--space-3)}
.receipt-line{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px dashed var(--line);font-size:.9rem}
.receipt-line:last-child{border-bottom:none}
.receipt-line-label{color:var(--slate)}
.receipt-line-value{font-weight:700;color:var(--ink)}
.result-tag{display:inline-block;font-family:var(--font-mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;padding:.25rem .7rem;border-radius:3px;margin-top:var(--space-2)}
.tag-good{background:rgba(107,144,128,.25);color:var(--good)}
.tag-warn{background:rgba(224,121,62,.25);color:var(--accent-warm)}
.tag-bad{background:rgba(193,87,74,.25);color:var(--bad)}

/* CONTENT */
.calc-content{margin-top:var(--space-5)}
.calc-content h2{font-size:1.3rem;color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:var(--space-2)}
.calc-content p,.calc-content li{color:var(--slate);font-size:.98rem;line-height:1.75}
.faq-item{border-bottom:1px solid var(--line);padding:var(--space-2) 0}
.faq-item summary{font-size:1rem;color:var(--ink);padding:.3rem 0;display:flex;justify-content:space-between;align-items:center}
.faq-item summary::after{content:"+";color:var(--accent);font-size:1.4rem;line-height:1}
.faq-item[open] summary::after{content:"−"}
.faq-item p{margin:var(--space-2) 0 var(--space-1);font-size:.95rem}
.related-calcs{margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--line)}
.related-calcs h2{font-size:1.1rem;margin-bottom:var(--space-3)}
.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--space-2)}
.related-grid a{background:var(--paper-dim);border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);font-family:var(--font-mono);font-size:.85rem;color:var(--ink);text-decoration:none;transition:border-color .15s,background .15s}
.related-grid a:hover{border-color:var(--accent);background:white}

/* FOOTER */
.site-footer{background:var(--ink);color:var(--paper);padding:var(--space-6) 0 var(--space-4);margin-top:var(--space-7)}
.footer-inner{max-width:1180px;margin:0 auto;padding:0 var(--space-3)}
.footer-top{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:var(--space-5);padding-bottom:var(--space-5);border-bottom:1px solid rgba(247,244,237,.1)}
@media(max-width:900px){.footer-top{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.footer-top{grid-template-columns:1fr}}
.footer-brand .footer-logo{font-family:var(--font-display);font-weight:700;font-size:1.3rem;color:var(--paper);display:flex;align-items:center;gap:.5rem;text-decoration:none;margin-bottom:var(--space-3)}
.footer-brand .footer-logo-mark{font-family:var(--font-mono);color:var(--accent)}
.footer-brand p{font-size:.9rem;opacity:.65;line-height:1.65;max-width:26ch;margin:0 0 var(--space-3)}
.footer-tagline{display:flex;flex-direction:column;gap:.5rem;margin-top:var(--space-2)}
.footer-badge{display:flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.78rem;color:var(--paper);opacity:.6}
.footer-badge-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0}
.footer-col h4{font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);margin:0 0 var(--space-3)}
.footer-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.45rem}
.footer-col a{color:var(--paper);opacity:.65;font-size:.88rem;text-decoration:none;transition:opacity .15s}
.footer-col a:hover{opacity:1}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-2);padding-top:var(--space-4);font-size:.8rem;opacity:.5}
.footer-bottom a{color:var(--paper);text-decoration:none}
.footer-bottom a:hover{opacity:1}

/* COOKIE */
#cookieBanner{position:fixed;left:0;right:0;bottom:0;z-index:200;background:var(--ink);color:var(--paper);border-top:3px solid var(--accent);box-shadow:0 -4px 16px rgba(43,38,34,.18)}
.cookie-banner-inner{max-width:1180px;margin:0 auto;padding:var(--space-3);display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
.cookie-banner-text{flex:1 1 320px}
.cookie-banner-text p{margin:0;font-size:.9rem;opacity:.9}
.cookie-banner-text a{color:var(--accent);text-decoration:underline}
.cookie-banner-actions{display:flex;gap:.6rem;flex-wrap:wrap}
.cookie-btn{font-family:var(--font-mono);font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;border-radius:var(--radius-sm);padding:.6rem 1rem;cursor:pointer;border:1.5px solid transparent;white-space:nowrap}
.cookie-btn-primary{background:var(--accent);color:var(--paper)}
.cookie-btn-ghost{background:transparent;color:var(--paper);border-color:rgba(247,244,237,.35)}
.cookie-banner-customize{flex-basis:100%;display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;padding-top:var(--space-2);border-top:1px dashed rgba(247,244,237,.18)}
.cookie-banner-customize[hidden]{display:none}
.cookie-toggle{display:flex;align-items:center;gap:.4rem;font-size:.85rem;font-family:var(--font-mono);cursor:pointer}
.cookie-toggle input{width:16px;height:16px;accent-color:var(--accent)}
@media(max-width:600px){.cookie-btn{flex:1}}
table{width:100%;border-collapse:collapse;font-size:.9rem;font-family:var(--font-mono);margin:var(--space-3) 0}
table th{background:var(--ink);color:var(--paper);padding:.6rem 1rem;text-align:left}
table td{padding:.6rem 1rem;border-bottom:.5px solid var(--line)}

/* HERO FIX — prevent empty gap */
.hero{min-height:unset}
.hero-inner{min-height:unset}
.hero-widget-result .hw-value,.hero-widget-result .hw-sub{display:block}

/* Homepage section spacing */
.calc-section:first-child{margin-top:var(--space-5)}
.calc-section h2{font-size:1.6rem;border-bottom:2px solid var(--line);padding-bottom:var(--space-2)}

/* Ensure footer never has extra top space */
.site-footer{margin-top:0}
main+.site-footer,.container+.site-footer{margin-top:0}

/* Page min-height so short pages don't look empty */
main.container{min-height:60vh}

.hero-stat{display:flex;flex-direction:column;gap:.2rem}

.last-updated{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-mono);font-size:.72rem;color:var(--slate-light);margin-top:var(--space-2)}
.last-updated-dot{width:6px;height:6px;border-radius:50%;background:var(--good);flex-shrink:0}