:root{
  --bg:#f7f8fa;
  --card:#ffffff;
  --border:#e3e6ea;
  --text:#1a1d23;
  --muted:#6b7280;
  --accent:#2563eb;
  --accent-light:#eff4ff;
  --good:#16a34a;
  --bad:#dc2626;
  --radius:12px;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  padding:32px 16px 64px;
}
.wrap{max-width:760px;margin:0 auto;}

/* Site nav */
.site-nav{
  display:flex;
  gap:20px;
  margin-bottom:24px;
  font-size:0.9rem;
  font-weight:600;
}
.site-nav a{color:var(--muted);text-decoration:none;}
.site-nav a:hover, .site-nav a.active{color:var(--accent);}

.hero{margin:0 0 20px;}
.hero img{
  width:100%;
  height:auto;
  max-height:320px;
  object-fit:cover;
  border-radius:var(--radius);
  display:block;
}
.hero figcaption{
  font-size:0.72rem;
  color:var(--muted);
  margin-top:6px;
  text-align:right;
}
.hero figcaption a{color:var(--muted);}
h1{font-size:1.6rem;margin:0 0 4px;}
.subtitle{color:var(--muted);font-size:0.95rem;margin:0 0 28px;line-height:1.5;}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px;
  margin-bottom:20px;
}
.card h2{
  font-size:1.05rem;
  margin:0 0 16px;
  padding-bottom:10px;
  border-bottom:1px solid var(--border);
}
.field{margin-bottom:16px;}
.field:last-child{margin-bottom:0;}
label{
  display:block;
  font-size:0.85rem;
  font-weight:600;
  margin-bottom:6px;
  color:#374151;
}
.hint{font-size:0.78rem;color:var(--muted);margin-top:4px;}
.input-group{position:relative;}
input[type=number], input[type=text]{
  width:100%;
  padding:10px 12px;
  padding-left:28px;
  border:1px solid var(--border);
  border-radius:8px;
  font-size:1rem;
  background:#fff;
  color:var(--text);
}
input.pct{padding-left:12px;padding-right:28px;}
input:focus{outline:2px solid var(--accent);outline-offset:1px;}
.prefix{
  position:absolute;left:10px;top:50%;transform:translateY(-50%);
  color:var(--muted);font-size:0.95rem;pointer-events:none;
}
.suffix{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  color:var(--muted);font-size:0.95rem;pointer-events:none;
}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:520px){.row{grid-template-columns:1fr;}}

.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:520px){.result-grid{grid-template-columns:1fr;}}
.result-item{
  background:var(--accent-light);
  border-radius:10px;
  padding:14px 16px;
}
.result-item .label{font-size:0.78rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.03em;}
.result-item .value{font-size:1.3rem;font-weight:700;margin-top:4px;}
.result-item.highlight{
  background:var(--text);
  color:#fff;
}
.result-item.highlight .label{color:#c9cdd4;}

.steps{font-size:0.9rem;color:#374151;line-height:1.8;}
.steps .step{margin-bottom:10px;}
.steps .formula{
  display:block;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:#f3f4f6;
  border-radius:6px;
  padding:8px 10px;
  margin-top:4px;
  font-size:0.85rem;
  color:#111827;
}

button{
  background:var(--accent);
  color:#fff;
  border:none;
  padding:11px 20px;
  border-radius:8px;
  font-size:0.95rem;
  font-weight:600;
  cursor:pointer;
}
button.secondary{
  background:#fff;
  color:var(--text);
  border:1px solid var(--border);
}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px;}

.faq h2{font-size:1.3rem;margin:0 0 18px;padding-bottom:0;border-bottom:none;}
.faq-item{margin-bottom:18px;}
.faq-item:last-child{margin-bottom:0;}
.faq-item h3{
  font-size:1rem;
  margin:0 0 6px;
  color:var(--text);
}
.faq-item p{
  margin:0;
  font-size:0.92rem;
  color:#374151;
  line-height:1.6;
}

/* Teaser links between pages */
.teaser{
  font-size:0.9rem;
  color:#374151;
  line-height:1.6;
}
.teaser a{color:var(--accent);font-weight:600;text-decoration:none;}
.teaser a:hover{text-decoration:underline;}

/* Guides hub */
.guide-list{display:flex;flex-direction:column;gap:14px;}
.guide-card{
  display:block;
  border:1px solid var(--border);
  border-radius:10px;
  padding:16px 18px;
  text-decoration:none;
  color:inherit;
  background:#fff;
}
.guide-card:hover{border-color:var(--accent);}
.guide-card h3{margin:0 0 4px;font-size:1.02rem;color:var(--text);}
.guide-card p{margin:0;font-size:0.88rem;color:var(--muted);line-height:1.5;}
.guide-card .meta{font-size:0.75rem;color:var(--muted);margin-top:6px;display:block;}

/* Article page */
.back-link{
  display:inline-block;
  font-size:0.85rem;
  color:var(--muted);
  text-decoration:none;
  margin-bottom:16px;
}
.back-link:hover{color:var(--accent);}
.article h1{margin-bottom:8px;}
.article .meta{font-size:0.8rem;color:var(--muted);margin-bottom:24px;}
.article-body{font-size:0.98rem;line-height:1.75;color:#28303c;}
.article-body h2{font-size:1.2rem;margin:28px 0 10px;color:var(--text);}
.article-body p{margin:0 0 16px;}
.article-body a{color:var(--accent);}
.cta-box{
  background:var(--accent-light);
  border-radius:10px;
  padding:18px 20px;
  margin:24px 0;
  font-size:0.95rem;
}
.cta-box a{color:var(--accent);font-weight:600;}

footer{
  margin-top:28px;
  font-size:0.78rem;
  color:var(--muted);
  line-height:1.6;
  border-top:1px solid var(--border);
  padding-top:16px;
}

@media print{
  body{background:#fff;padding:0;}
  .no-print{display:none !important;}
  .card{border:1px solid #ccc;box-shadow:none;}
}