:root{
  --bg:#F7F5F2;
  --surface:#FFFFFF;
  --surface-soft:#EFEBE4;
  --ink:#211D1A;
  --ink-soft:#6B655E;
  --ink-faint:#9A938A;
  --accent:#D9491F;
  --accent-strong:#B23A17;
  --accent-soft:#F7E2D8;
  --accent-2:#2E6E5A;
  --accent-2-soft:#DCEAE4;
  --line:#E4DFD6;
  --shadow:0 1px 2px rgba(33,29,26,0.05), 0 12px 28px -14px rgba(33,29,26,0.18);
  --radius:14px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#17151A;
    --surface:#1E1B21;
    --surface-soft:#262229;
    --ink:#F3EFEA;
    --ink-soft:#B3ABA2;
    --ink-faint:#79716A;
    --accent:#FF7A47;
    --accent-strong:#FF9A6E;
    --accent-soft:#3A2A22;
    --accent-2:#4FBE9C;
    --accent-2-soft:#1F332C;
    --line:#332E33;
    --shadow:0 1px 2px rgba(0,0,0,0.4), 0 16px 32px -16px rgba(0,0,0,0.6);
  }
}
:root[data-theme="dark"]{
  --bg:#17151A;
  --surface:#1E1B21;
  --surface-soft:#262229;
  --ink:#F3EFEA;
  --ink-soft:#B3ABA2;
  --ink-faint:#79716A;
  --accent:#FF7A47;
  --accent-strong:#FF9A6E;
  --accent-soft:#3A2A22;
  --accent-2:#4FBE9C;
  --accent-2-soft:#1F332C;
  --line:#332E33;
  --shadow:0 1px 2px rgba(0,0,0,0.4), 0 16px 32px -16px rgba(0,0,0,0.6);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Manrope', system-ui, sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
}

.wrap{max-width:1040px; margin:0 auto; padding:0 24px;}

.skip-link{
  position:absolute; left:-999px; top:0;
  background:var(--accent); color:#fff; padding:10px 16px; border-radius:0 0 8px 0; z-index:100;
}
.skip-link:focus{left:0;}

h1,h2{font-family:'Bricolage Grotesque', 'Manrope', sans-serif; font-weight:600; letter-spacing:-0.01em; text-wrap:balance; margin:0;}
a{color:var(--accent-strong);}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

/* ---- Adblock banner ---- */
.adblock-banner{
  background:var(--accent-soft);
  border-bottom:1px solid var(--line);
}
.adblock-banner[hidden]{display:none;}
.adblock-row{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:10px 24px;
}
.adblock-row p{
  margin:0; font-size:13.5px; color:var(--ink); font-weight:600; max-width:70ch;
}
.adblock-row button{
  flex-shrink:0;
  width:26px; height:26px; border-radius:50%;
  border:none; background:transparent; color:var(--ink-soft);
  font-size:18px; line-height:1; cursor:pointer;
}
.adblock-row button:hover{color:var(--ink);}
@media (max-width:640px){
  .adblock-row{flex-direction:column; align-items:flex-start;}
}

/* ---- Header ---- */
.site-header{padding:20px 0; border-bottom:1px solid var(--line);}
.header-row{display:flex; align-items:center; justify-content:space-between;}
.brand{display:flex; align-items:center; gap:9px; color:var(--ink);}
.brand-mark{color:var(--accent); display:flex;}
.brand-name{font-family:'Bricolage Grotesque', sans-serif; font-weight:700; font-size:1.15rem; letter-spacing:-0.01em;}
.theme-toggle{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-soft);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.theme-toggle:hover{color:var(--accent);}
.theme-toggle .icon-moon{display:none;}
:root[data-theme="dark"] .theme-toggle .icon-sun{display:none;}
:root[data-theme="dark"] .theme-toggle .icon-moon{display:block;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-toggle .icon-sun{display:none;}
  :root:not([data-theme="light"]) .theme-toggle .icon-moon{display:block;}
}

/* ---- Hero ---- */
.hero{padding:56px 0 40px;}
.swatch-row{display:flex; gap:8px; margin-bottom:22px;}
.swatch{
  width:22px; height:22px; border-radius:7px; background:var(--sw);
  box-shadow:0 2px 5px -1px rgba(0,0,0,0.25);
}
.hero h1{font-size:clamp(1.9rem, 4vw, 2.7rem); line-height:1.12; max-width:16ch;}
.hero-sub{font-size:1.08rem; color:var(--ink-soft); max-width:56ch; margin:16px 0 0;}

/* ---- Calculator layout ---- */
.calculator-section{padding-bottom:64px;}
.calc-grid{
  display:grid;
  grid-template-columns:1fr 340px;
  gap:24px;
  align-items:start;
}
@media (max-width:860px){
  .calc-grid{grid-template-columns:1fr;}
}

.calc-form{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  gap:22px;
}

.field-label{font-size:13px; font-weight:700; color:var(--ink-soft);}
.units-row{display:flex; align-items:center; justify-content:space-between;}

.segmented{
  display:inline-flex; background:var(--surface-soft); border-radius:999px; padding:3px; position:relative;
}
.segmented input{position:absolute; opacity:0; pointer-events:none;}
.segmented label{
  font-size:13.5px; font-weight:600; color:var(--ink-soft);
  padding:6px 16px; border-radius:999px; cursor:pointer; user-select:none;
}
.segmented input:checked + label{background:var(--surface); color:var(--accent-strong); box-shadow:var(--shadow);}
.segmented label:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

.field-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media (max-width:520px){.field-grid{grid-template-columns:1fr 1fr;}}

.field{display:flex; flex-direction:column; gap:6px;}
.field label{font-size:13px; font-weight:600; color:var(--ink-soft);}
.unit-suffix{font-weight:400; color:var(--ink-faint); font-size:12px;}

input[type="number"], select{
  font-family:'IBM Plex Mono', monospace;
  font-size:15px;
  color:var(--ink);
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:9px;
  padding:10px 12px;
  width:100%;
}
select{font-family:'Manrope', sans-serif; font-weight:600;}
input[type="number"]:focus, select:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-soft);}

.checkbox-row{display:flex; align-items:center; gap:10px; font-size:14.5px; font-weight:600; color:var(--ink); cursor:pointer;}
.checkbox-row input{width:17px; height:17px; accent-color:var(--accent);}

.advanced{border-top:1px solid var(--line); padding-top:16px;}
.advanced summary{
  font-size:13.5px; font-weight:700; color:var(--ink-soft); cursor:pointer; list-style:none; display:flex; align-items:center; gap:6px;
}
.advanced summary::-webkit-details-marker{display:none;}
.advanced summary::before{content:"▸"; font-size:11px; color:var(--accent);}
.advanced[open] summary::before{content:"▾";}
.advanced .field-grid{margin-top:16px;}

/* ---- Results ---- */
.results{display:flex; flex-direction:column; gap:16px; position:sticky; top:24px;}
.results-card{
  background:var(--accent);
  color:#fff;
  border-radius:var(--radius);
  padding:28px;
  box-shadow:var(--shadow);
}
.result-headline{display:flex; align-items:baseline; gap:9px;}
.result-num{font-family:'Bricolage Grotesque', sans-serif; font-size:3rem; font-weight:700; line-height:1; font-variant-numeric:tabular-nums;}
.result-unit{font-size:1rem; font-weight:600; opacity:0.85;}
.result-caption{margin:8px 0 0; font-size:13.5px; opacity:0.9;}

.result-breakdown{margin-top:22px; padding-top:18px; border-top:1px solid rgba(255,255,255,0.25); display:flex; flex-direction:column; gap:10px;}
.breakdown-row{display:flex; justify-content:space-between; font-size:13.5px; opacity:0.95;}
.breakdown-row[hidden]{display:none;}
.breakdown-row .mono{font-family:'IBM Plex Mono', monospace; font-variant-numeric:tabular-nums; font-weight:600;}

.ad-slot{
  min-height:120px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface-soft);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:10px;
  padding:14px;
  overflow:hidden;
}
.ad-label{
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.native-ad-section{
  padding:8px 0 40px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.native-ad-section .wrap{display:flex; flex-direction:column; align-items:center; gap:8px; width:100%;}

.banner-728-wrap{
  width:100%;
  min-width:0;
  max-width:728px;
  display:flex;
  justify-content:center;
  overflow:hidden;
}
.banner-728{
  width:728px;
  height:90px;
  flex-shrink:0;
  transform-origin:top center;
}

/* ---- Reference table ---- */
.reference-section, .faq-section{padding:48px 0;}
.reference-section{border-top:1px solid var(--line);}
h2{font-size:1.5rem;}
.section-sub{color:var(--ink-soft); font-size:14.5px; margin:8px 0 20px; max-width:60ch;}

.table-scroll{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius);}
table{width:100%; border-collapse:collapse; background:var(--surface); min-width:520px;}
th, td{text-align:left; padding:11px 16px; font-size:14px; border-bottom:1px solid var(--line);}
th{font-size:11.5px; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-soft); background:var(--surface-soft);}
td{font-family:'IBM Plex Mono', monospace; font-variant-numeric:tabular-nums;}
td:first-child{font-family:'Manrope', sans-serif; font-weight:600;}
tr:last-child td{border-bottom:none;}

/* ---- FAQ ---- */
.faq-section{border-top:1px solid var(--line);}
.faq-list{display:flex; flex-direction:column; gap:10px;}
.faq-item{
  background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px 20px;
}
.faq-item summary{
  font-weight:700; font-size:15px; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; color:var(--accent); font-size:20px; font-weight:400; flex-shrink:0;}
.faq-item[open] summary::after{content:"–";}
.faq-item p{margin:12px 0 0; color:var(--ink-soft); font-size:14.5px; max-width:70ch;}

/* ---- Footer ---- */
.site-footer{border-top:1px solid var(--line); padding:28px 0 48px;}
.site-footer p{font-size:13px; color:var(--ink-faint); margin:0;}