:root {
  --bg: #f5f7f4;
  --surface: #ffffff;
  --surface-soft: #eef4f1;
  --ink: #17201d;
  --muted: #60706a;
  --line: #dce5e0;
  --accent: #0f766e;
  --accent-dark: #0b5c56;
  --accent-soft: #dff3ef;
  --warning: #8a5b14;
  --warning-bg: #fff7e7;
  --danger: #b42318;
  --shadow: 0 18px 45px rgba(26, 52, 45, .08);
  --radius: 18px;
  --radius-sm: 12px;
  --max: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.62;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
a { color: var(--accent-dark); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.container { width: min(calc(100% - 32px), var(--max)); margin-inline: auto; }
.narrow { width: min(calc(100% - 32px), 820px); margin-inline: auto; }

.skip-link { position: fixed; left: 12px; top: -70px; z-index: 99; background: var(--ink); color: white; padding: 10px 14px; border-radius: 8px; }
.skip-link:focus { top: 12px; }

.site-header { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid rgba(220,229,224,.85); background: rgba(245,247,244,.94); backdrop-filter: blur(12px); }
.header-inner { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 800; letter-spacing: -.03em; font-size: 1.28rem; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent); color: white; font-weight: 900; }
.brand span:last-child { color: var(--accent-dark); }
.nav { display: flex; align-items: center; gap: 20px; }
.nav a { color: #314039; text-decoration: none; font-weight: 600; font-size: .94rem; }
.nav a:hover { color: var(--accent); }
.nav-toggle { display:none; border:1px solid var(--line); background:var(--surface); border-radius:10px; padding:8px 10px; }

main { min-height: 70vh; }
.hero { padding: 74px 0 42px; }
.hero-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 56px; align-items: center; }
.eyebrow { display: inline-flex; align-items:center; gap:8px; color: var(--accent-dark); background: var(--accent-soft); border: 1px solid #c8e8e1; padding: 6px 10px; border-radius: 999px; font-weight: 750; font-size: .82rem; letter-spacing: .02em; }
h1, h2, h3 { line-height: 1.16; letter-spacing: -.035em; }
h1 { margin: 14px 0 18px; font-size: clamp(2.25rem, 5vw, 4.35rem); }
h2 { margin: 42px 0 14px; font-size: clamp(1.55rem, 3vw, 2.25rem); }
h3 { margin: 28px 0 10px; font-size: 1.22rem; }
.lead { color: #465750; font-size: 1.12rem; max-width: 760px; }
.hero-card { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 24px; box-shadow: var(--shadow); }
.hero-stat { display:flex; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--line); gap: 20px; }
.hero-stat:last-child { border-bottom: 0; }
.hero-stat strong { font-size:1.08rem; }
.hero-stat span { color:var(--muted); text-align:right; }

.section { padding: 38px 0 64px; }
.section-title { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:20px; }
.section-title h2 { margin:0; }
.section-title p { margin:0; color:var(--muted); max-width:560px; }

.grid { display:grid; gap:18px; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.calc-card { display:block; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px; text-decoration:none; color:var(--ink); transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.calc-card:hover { transform: translateY(-2px); border-color:#b9d5cd; box-shadow:0 12px 28px rgba(23,52,44,.07); color:var(--ink); }
.calc-card .icon { width:42px; height:42px; border-radius:12px; background:var(--accent-soft); color:var(--accent-dark); display:grid; place-items:center; font-weight:800; margin-bottom:14px; }
.calc-card h3 { margin:0 0 7px; font-size:1.12rem; }
.calc-card p { margin:0; color:var(--muted); font-size:.93rem; }
.card-meta { margin-top:14px; font-size:.78rem; color:#75837e; }

.breadcrumbs { font-size:.88rem; color:var(--muted); padding-top:24px; }
.breadcrumbs a { color:var(--muted); }
.breadcrumbs span { margin:0 7px; }

.calc-hero { padding: 18px 0 20px; }
.calc-hero h1 { font-size: clamp(2rem, 4vw, 3.35rem); margin-bottom:12px; }
.calc-hero .lead { max-width:850px; }
.updated { color:var(--muted); font-size:.85rem; margin-top:14px; }

.tool-shell { display:grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr); gap:20px; align-items:start; margin: 20px 0 34px; }
.tool-panel, .result-panel { background:var(--surface); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow); padding:24px; }
.tool-panel h2, .result-panel h2 { font-size:1.25rem; margin:0 0 18px; }
.result-panel { position:sticky; top:92px; }
.result-kicker { color:var(--muted); font-size:.83rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.result-main { font-size: clamp(2rem, 5vw, 3rem); font-weight:850; letter-spacing:-.045em; margin:6px 0 2px; color:var(--accent-dark); overflow-wrap:anywhere; }
.result-sub { color:var(--muted); margin:0; }
.result-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:18px; }
.result-item { border:1px solid var(--line); background:#fbfcfb; border-radius:12px; padding:12px; }
.result-item small { display:block; color:var(--muted); margin-bottom:3px; }
.result-item strong { font-size:1.03rem; overflow-wrap:anywhere; }
.result-note { margin-top:16px; color:var(--muted); font-size:.85rem; }

.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.form-grid.one { grid-template-columns:1fr; }
.field { display:flex; flex-direction:column; gap:6px; }
.field.full { grid-column:1/-1; }
.field label, .field .label { font-weight:700; font-size:.9rem; }
.field-help { color:var(--muted); font-size:.79rem; margin-top:-2px; }
input, select, textarea { width:100%; border:1px solid #cfdad5; border-radius:11px; background:white; color:var(--ink); padding:11px 12px; outline:none; }
input:focus, select:focus, textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(15,118,110,.12); }
input[type="checkbox"], input[type="radio"] { width:auto; accent-color:var(--accent); }
.inline-options { display:flex; flex-wrap:wrap; gap:10px 14px; }
.option { display:inline-flex; align-items:center; gap:8px; font-size:.9rem; }
.segmented { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; background:#edf2ef; padding:4px; border-radius:12px; gap:4px; margin-bottom:18px; }
.segmented button { border:0; background:transparent; color:#53635d; padding:9px 10px; border-radius:9px; font-weight:750; }
.segmented button[aria-pressed="true"] { background:white; color:var(--ink); box-shadow:0 2px 7px rgba(23,32,29,.07); }
.btn-row { display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.btn { border:0; border-radius:11px; padding:11px 15px; font-weight:750; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:7px; }
.btn-primary { background:var(--accent); color:white; }
.btn-primary:hover { background:var(--accent-dark); color:white; }
.btn-secondary { background:#edf3f0; color:#30413a; }
.btn-secondary:hover { background:#e4ede9; color:#24332d; }
.error { color:var(--danger); background:#fff2f0; border:1px solid #ffd5d0; border-radius:10px; padding:10px 12px; margin-top:14px; font-size:.9rem; }
.notice { background:var(--warning-bg); color:#65430f; border:1px solid #f1d8a8; padding:12px 14px; border-radius:12px; font-size:.9rem; }
.info { background:var(--accent-soft); color:#1d554f; border:1px solid #c7e8e1; padding:12px 14px; border-radius:12px; font-size:.9rem; }

.content-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px; margin:18px 0; }
.content-card h2:first-child, .content-card h3:first-child { margin-top:0; }
.prose { font-size:1.02rem; }
.prose p { margin:0 0 15px; }
.prose ul, .prose ol { padding-left:1.35rem; }
.prose li { margin:6px 0; }
.formula { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; background:#f0f4f2; border:1px solid var(--line); padding:12px 14px; border-radius:12px; overflow-x:auto; }
.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:14px; }
table { border-collapse:collapse; width:100%; min-width:520px; background:white; }
th, td { padding:11px 13px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
th { background:#f4f7f5; font-size:.85rem; }
tr:last-child td { border-bottom:0; }
.faq details { background:white; border:1px solid var(--line); border-radius:12px; padding:0 15px; margin:9px 0; }
.faq summary { cursor:pointer; font-weight:750; padding:14px 0; }
.faq details p { color:#4d5e57; margin:0 0 14px; }
.source-list { font-size:.91rem; }
.source-list li { margin:8px 0; }

.dynamic-rows { display:grid; gap:8px; }
.dynamic-row { display:grid; grid-template-columns:1fr 1fr auto; gap:8px; align-items:end; }
.icon-btn { border:1px solid var(--line); background:white; border-radius:9px; width:42px; height:42px; font-size:1.2rem; }
.holiday-list { max-height:240px; overflow:auto; margin:12px 0 0; padding:0; list-style:none; }
.holiday-list li { display:flex; justify-content:space-between; gap:14px; padding:7px 0; border-bottom:1px dashed var(--line); font-size:.87rem; }

.category-hero { padding:52px 0 22px; }
.category-hero h1 { font-size:clamp(2rem,4vw,3.4rem); }

.site-footer { border-top:1px solid var(--line); margin-top:60px; padding:40px 0; color:#596963; background:#eef2ef; }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px; }
.site-footer h3 { font-size:1rem; margin:0 0 10px; }
.site-footer a { color:#43544d; text-decoration:none; }
.site-footer ul { list-style:none; padding:0; margin:0; }
.site-footer li { margin:6px 0; }
.footer-note { margin-top:28px; padding-top:20px; border-top:1px solid #d6dfda; font-size:.82rem; }

@media (max-width: 860px) {
  .hero-grid, .tool-shell { grid-template-columns:1fr; }
  .result-panel { position:static; }
  .grid-3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .nav-toggle { display:block; }
  .nav { display:none; position:absolute; left:16px; right:16px; top:62px; background:white; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:14px; flex-direction:column; align-items:stretch; }
  .nav.open { display:flex; }
}

@media (max-width: 600px) {
  .container, .narrow { width:min(calc(100% - 22px), var(--max)); }
  .hero { padding-top:46px; }
  .grid-3, .grid-2, .form-grid, .result-grid { grid-template-columns:1fr; }
  .field.full { grid-column:auto; }
  .tool-panel, .result-panel, .content-card { padding:18px; border-radius:16px; }
  .segmented { grid-auto-flow:row; grid-auto-columns:auto; }
  .dynamic-row { grid-template-columns:1fr 1fr; }
  .dynamic-row .icon-btn { grid-column:1/-1; width:100%; }
  .footer-grid { grid-template-columns:1fr; }
  h1 { font-size:2.35rem; }
}