/* ===== Design tokens ===== */
:root{
  --paper:#F5F3EE;
  --paper-line:#DAD6CC;
  --ink:#1B2430;
  --ink-soft:#5B6472;
  --ink-faint:#8B93A0;
  --accent:#1F6F5C;
  --accent-soft:#E4EEE9;
  --accent-ink:#0F4438;
  --display-bg:#12181F;
  --display-digit:#8FE8C4;
  --display-label:#6C8A7E;
  --card-bg:#FFFFFF;
  --danger:#9A3324;
  --radius:10px;
  --font-display:"Space Grotesk", "Arial Narrow", sans-serif;
  --font-body:"Inter", -apple-system, sans-serif;
  --font-mono:"IBM Plex Mono", "Courier New", monospace;
}

[data-theme="dark"]{
  --paper:#14181D;
  --paper-line:#2A2F36;
  --ink:#E8E6DF;
  --ink-soft:#A9AFB8;
  --ink-faint:#6B7280;
  --accent:#3FCBA0;
  --accent-soft:#163C33;
  --accent-ink:#7FE8C8;
  --display-bg:#0A0E12;
  --display-digit:#8FE8C4;
  --display-label:#4E6B60;
  --card-bg:#1C2128;
  --danger:#E08070;
}
*{box-sizing:border-box;}
html{transition:background-color .2s ease;}
body{transition:background-color .2s ease, color .2s ease;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  background-image:linear-gradient(var(--paper-line) 1px, transparent 1px);
  background-size:100% 32px;
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
}
a{color:var(--accent-ink);}
h1,h2,h3{font-family:var(--font-display);font-weight:600;margin:0 0 .5rem;letter-spacing:-0.01em;}
h1{font-size:2rem;}
h2{font-size:1.35rem;margin-top:2.5rem;}
h3{font-size:1.05rem;}
p{margin:0 0 1rem;color:var(--ink);}
.container{max-width:760px;margin:0 auto;padding:0 20px;}

/* ===== Header / Nav ===== */
.site-header{
  border-bottom:1px solid var(--paper-line);
  background:var(--paper);
  position:sticky;top:0;z-index:20;
}
.site-header .bar{
  max-width:760px;margin:0 auto;padding:14px 20px;
  display:flex;align-items:center;justify-content:space-between;
}
.brand{
  font-family:var(--font-display);font-weight:700;font-size:1.15rem;
  color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:8px;
}
.brand .mark{
  width:26px;height:26px;background:var(--display-bg);border-radius:5px;
  display:flex;align-items:center;justify-content:center;
  color:var(--display-digit);font-family:var(--font-mono);font-size:13px;font-weight:700;
}
.nav-links{display:flex;gap:18px;font-size:14px;align-items:center;}
.nav-links a{text-decoration:none;color:var(--ink-soft);font-weight:500;}
.nav-links a:hover{color:var(--ink);}
.theme-toggle{
  width:32px;height:32px;border-radius:8px;border:1px solid var(--paper-line);
  background:var(--card-bg);display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--ink-soft);flex:none;
}
.theme-toggle:hover{border-color:var(--accent);color:var(--ink);}
.theme-toggle svg{width:16px;height:16px;}
.theme-toggle .moon{display:none;}
[data-theme="dark"] .theme-toggle .sun{display:none;}
[data-theme="dark"] .theme-toggle .moon{display:block;}
.breadcrumb{font-size:13px;color:var(--ink-faint);margin:18px 0 6px;}
.breadcrumb a{color:var(--ink-faint);text-decoration:none;}
.breadcrumb a:hover{color:var(--ink-soft);}

/* ===== Hero ===== */
.hero{padding:18px 0 6px;}
.hero .eyebrow{
  font-family:var(--font-mono);font-size:12px;color:var(--accent-ink);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;
}
.hero p.lede{color:var(--ink-soft);font-size:1.05rem;max-width:60ch;}

/* ===== Calculator card ===== */
.calc-card{
  background:var(--card-bg);border:1px solid var(--paper-line);
  border-radius:var(--radius);padding:22px;margin:22px 0;
}
.field{margin-bottom:16px;}
.field label{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:13px;font-weight:500;color:var(--ink-soft);margin-bottom:6px;
}
.field label .val{font-family:var(--font-mono);color:var(--ink);font-size:13px;}
input[type="range"]{
  width:100%;height:4px;background:var(--paper-line);border-radius:2px;
  -webkit-appearance:none;appearance:none;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;border-radius:50%;
  background:var(--accent);cursor:pointer;
}
input[type="number"], input[type="text"]{
  width:100%;height:40px;border:1px solid var(--paper-line);border-radius:6px;
  padding:0 12px;font-family:var(--font-body);font-size:15px;background:#fff;color:var(--ink);
}
input[type="number"]:focus, input[type="text"]:focus{
  outline:none;box-shadow:0 0 0 2px var(--accent-soft);border-color:var(--accent);
}

/* Signature element: LCD-style result display */
.display{
  background:var(--display-bg);border-radius:8px;padding:20px 22px;margin-top:18px;
}
.display .d-label{
  font-family:var(--font-mono);font-size:11px;color:var(--display-label);
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;
}
.display .d-value{
  font-family:var(--font-mono);font-size:2.1rem;color:var(--display-digit);
  font-weight:700;letter-spacing:.01em;
}
.display .d-sub{
  display:flex;gap:22px;margin-top:14px;padding-top:14px;border-top:1px solid #223229;
}
.display .d-sub div{font-family:var(--font-mono);font-size:12px;color:var(--display-label);}
.display .d-sub span{display:block;color:var(--display-digit);font-size:14px;margin-top:2px;}

/* ===== Ad zones ===== */
.ad-zone{
  margin:20px 0;padding:10px;border:1px dashed var(--paper-line);border-radius:8px;
  text-align:center;
}
.ad-zone .ad-label{
  font-family:var(--font-mono);font-size:10px;color:var(--ink-faint);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;
}
.ad-zone .ad-slot{
  min-height:90px;display:flex;align-items:center;justify-content:center;
  color:var(--ink-faint);font-size:13px;background:#FAFAF7;border-radius:6px;
}

/* ===== Affiliate slot ===== */
.affiliate{
  background:var(--accent-soft);border:1px solid #C8DED6;border-radius:var(--radius);
  padding:16px 18px;margin:18px 0;display:flex;gap:14px;align-items:flex-start;
}
.affiliate .a-icon{
  width:34px;height:34px;border-radius:8px;background:var(--accent);flex:none;
  display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-mono);font-size:14px;
}
.affiliate .a-label{
  font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--accent-ink);
  font-weight:600;margin-bottom:3px;
}
.affiliate a.a-cta{
  display:inline-block;margin-top:8px;font-size:13px;font-weight:600;color:var(--accent-ink);
  text-decoration:none;border-bottom:1px solid var(--accent-ink);
}

/* ===== FAQ ===== */
.faq-item{border-bottom:1px solid var(--paper-line);padding:14px 0;}
.faq-item summary{
  cursor:pointer;font-weight:500;list-style:none;display:flex;justify-content:space-between;
  align-items:center;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+";color:var(--ink-faint);font-size:18px;}
.faq-item[open] summary::after{content:"–";}
.faq-item p{margin-top:10px;color:var(--ink-soft);font-size:14.5px;}

/* ===== Related tools ===== */
.related-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-top:12px;
}
.related-card{
  border:1px solid var(--paper-line);border-radius:8px;padding:12px 14px;text-decoration:none;
  background:var(--card-bg);
}
.related-card .r-cat{font-size:11px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.04em;}
.related-card .r-name{font-weight:500;color:var(--ink);font-size:14px;margin-top:2px;}
.related-card:hover{border-color:var(--accent);}

/* ===== Category grid (home) ===== */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:18px 0 30px;}
.cat-card{
  border:1px solid var(--paper-line);border-radius:var(--radius);padding:16px;background:var(--card-bg);
  text-decoration:none;color:var(--ink);
}
.cat-card:hover{border-color:var(--accent);}
.cat-card .c-tag{font-family:var(--font-mono);font-size:11px;color:var(--accent-ink);}
.cat-card h3{margin:6px 0 4px;}
.cat-card p{font-size:13px;color:var(--ink-soft);margin:0;}

/* ===== Footer ===== */
.site-footer{
  border-top:1px solid var(--paper-line);margin-top:60px;padding:26px 0 40px;
  color:var(--ink-faint);font-size:13px;
}
.site-footer .container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;}
.site-footer a{color:var(--ink-faint);}

/* ===== Utility ===== */
.section{margin:30px 0;}
.small{font-size:13px;color:var(--ink-soft);}

@media (max-width:520px){
  .nav-links{display:none;}
  .display .d-value{font-size:1.6rem;}
  h1{font-size:1.6rem;}
}