*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --c-accent: #1a56db; --c-accent-hover: #1648c7;
  --c-text: #111827; --c-text-2: #4b5563; --c-text-3: #6b7280;
  --c-bg: #ffffff; --c-bg-2: #f9fafb; --c-bg-3: #f3f4f6;
  --c-border: #e5e7eb; --c-border-2: #d1d5db;
  --c-success: #065f46; --c-success-bg: #d1fae5;
  --c-result-bg: #eff6ff; --c-result-border: #bfdbfe; --c-result-text: #1e40af;
  --c-neg-bg: #fff7ed; --c-neg-border: #fed7aa; --c-neg-text: #9a3412;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
}
@media (prefers-color-scheme: dark) {
  :root {
    --c-accent: #60a5fa; --c-text: #f9fafb; --c-text-2: #d1d5db; --c-text-3: #9ca3af;
    --c-bg: #111827; --c-bg-2: #1f2937; --c-bg-3: #374151;
    --c-border: #374151; --c-border-2: #4b5563;
    --c-success: #6ee7b7; --c-success-bg: #064e3b;
    --c-result-bg: #1e3a5f; --c-result-border: #2563eb; --c-result-text: #93c5fd;
    --c-neg-bg: #431407; --c-neg-border: #9a3412; --c-neg-text: #fed7aa;
  }
}
html { scroll-behavior: smooth; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 16px; line-height: 1.6; color: var(--c-text); background: var(--c-bg); }
header { border-bottom: 1px solid var(--c-border); background: var(--c-bg); position: sticky; top: 0; z-index: 100; }
.header-inner { max-width: 860px; margin: 0 auto; padding: 0 1.25rem; height: 56px; display: flex; align-items: center; justify-content: space-between; }
.logo { font-size: 15px; font-weight: 600; color: var(--c-text); text-decoration: none; letter-spacing: -0.01em; flex-shrink: 0; }
.logo span { color: var(--c-accent); }
#main-nav { display: flex; gap: 4px; }
#main-nav a { font-size: 13px; color: var(--c-text-2); text-decoration: none; padding: 5px 10px; border-radius: var(--radius-sm); transition: background .15s, color .15s; white-space: nowrap; }
#main-nav a:hover, #main-nav a.active { background: var(--c-bg-3); color: var(--c-text); }
.nav-toggle { display: none; cursor: pointer; background: none; border: none; color: var(--c-text); font-size: 22px; line-height: 1; padding: 4px; }
.main { max-width: 860px; margin: 0 auto; padding: 0 1.25rem 4rem; }
.breadcrumb { font-size: .8125rem; color: var(--c-text-3); padding: 1.25rem 0 .5rem; }
.breadcrumb a { color: var(--c-text-3); text-decoration: none; }
.breadcrumb a:hover { color: var(--c-text); }
.breadcrumb span { margin: 0 .375rem; }
.hero { padding: 3rem 0 1.5rem; }
.hero h1 { font-size: clamp(1.6rem, 4vw, 2rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: .5rem; }
.hero p { font-size: 1rem; color: var(--c-text-2); max-width: 560px; }
.page-hero { padding: 2rem 0 1.75rem; }
.page-hero h1 { font-size: clamp(1.4rem, 3.5vw, 1.875rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: .375rem; }
.page-hero p { font-size: .9375rem; color: var(--c-text-2); max-width: 600px; }
.calc-card { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: 1.5rem; margin-bottom: 1.5rem; box-shadow: var(--shadow-sm); }
.calc-card h2 { font-size: .9375rem; font-weight: 600; margin-bottom: .25rem; }
.calc-card .subtitle { font-size: .8125rem; color: var(--c-text-3); margin-bottom: 1rem; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: .625rem; margin-bottom: .875rem; }
.field-group { display: flex; flex-direction: column; gap: 4px; }
.field-group label { font-size: .75rem; font-weight: 500; color: var(--c-text-3); text-transform: uppercase; letter-spacing: .04em; }
.field-group input { width: 100%; height: 40px; padding: 0 .75rem; font-size: .9375rem; border: 1px solid var(--c-border-2); border-radius: var(--radius-sm); background: var(--c-bg-2); color: var(--c-text); transition: border-color .15s, box-shadow .15s; -moz-appearance: textfield; }
.field-group input::-webkit-outer-spin-button, .field-group input::-webkit-inner-spin-button { -webkit-appearance: none; }
.field-group input:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(26,86,219,.12); background: var(--c-bg); }
.result-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--c-result-bg); border: 1px solid var(--c-result-border); border-radius: var(--radius-md); padding: .75rem 1rem; min-height: 52px; transition: background .2s, border-color .2s; }
.result-row.negative { background: var(--c-neg-bg); border-color: var(--c-neg-border); }
.result-value { font-size: 1.375rem; font-weight: 700; color: var(--c-result-text); letter-spacing: -0.02em; }
.result-row.negative .result-value { color: var(--c-neg-text); }
.result-placeholder { font-size: .875rem; color: var(--c-text-3); }
.btn-copy[hidden] { display: none !important; }
.result-row .result-placeholder, .result-row .result-value { min-width: 0; overflow-wrap: anywhere; }
.btn-copy { font-size: .75rem; color: var(--c-text-3); background: none; border: 1px solid var(--c-border-2); border-radius: var(--radius-sm); padding: 4px 10px; cursor: pointer; transition: background .15s, color .15s; white-space: nowrap; }
.btn-copy:hover { background: var(--c-bg-3); color: var(--c-text); }
.btn-copy.copied { color: var(--c-success); border-color: var(--c-success-bg); background: var(--c-success-bg); }
.formula { margin-top: .625rem; font-size: .8125rem; color: var(--c-text-3); min-height: 1.2em; word-break: break-word; }
.outputs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .625rem; margin-bottom: .5rem; }
.output-block { background: var(--c-result-bg); border: 1px solid var(--c-result-border); border-radius: var(--radius-md); padding: .625rem .875rem; }
.output-block.savings { background: var(--c-success-bg); border-color: #6ee7b7; }
.output-label { font-size: .75rem; color: var(--c-text-3); margin-bottom: .125rem; }
.output-block.savings .output-label { color: var(--c-success); }
.output-value { font-size: 1.25rem; font-weight: 700; color: var(--c-result-text); }
.output-block.savings .output-value { color: var(--c-success); }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .75rem; margin-bottom: 2.5rem; }
.tool-link { display: block; background: var(--c-bg-2); border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: 1rem 1.125rem; text-decoration: none; color: var(--c-text); transition: border-color .15s, box-shadow .15s; }
.tool-link:hover { border-color: var(--c-border-2); box-shadow: var(--shadow-sm); }
.tool-link .tl-label { font-size: .875rem; font-weight: 600; margin-bottom: .25rem; }
.tool-link .tl-desc { font-size: .75rem; color: var(--c-text-3); line-height: 1.4; }
.section { margin-bottom: 2rem; }
.section h2 { font-size: 1rem; font-weight: 700; margin-bottom: .625rem; }
.section p { font-size: .9375rem; color: var(--c-text-2); }
.section p + p { margin-top: .75rem; }
.formula-box { display: inline-block; background: var(--c-bg-3); border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: .5rem .875rem; font-family: 'SFMono-Regular', Consolas, monospace; font-size: .875rem; color: var(--c-text); margin: .625rem 0 1rem; }
.examples-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .625rem; margin: 1rem 0 1.5rem; }
.example-card { background: var(--c-bg-2); border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: .875rem 1rem; }
.example-card .ex-label { font-size: .75rem; color: var(--c-text-3); margin-bottom: .25rem; }
.example-card .ex-q { font-size: .875rem; font-weight: 500; margin-bottom: .375rem; }
.example-card .ex-a { font-size: .875rem; color: var(--c-accent); font-weight: 600; }
.faq-item { border-top: 1px solid var(--c-border); padding: .875rem 0; }
.faq-item:last-child { border-bottom: 1px solid var(--c-border); }
.faq-q { font-size: .9375rem; font-weight: 600; margin-bottom: .25rem; }
.faq-a { font-size: .875rem; color: var(--c-text-2); }
.faq-a a { color: var(--c-accent); }
.explainer { border-top: 1px solid var(--c-border); padding-top: 2.5rem; margin-top: .5rem; }
.explainer h2 { font-size: 1.125rem; font-weight: 700; margin-bottom: 1rem; }
.explainer h3 { font-size: .9375rem; font-weight: 600; margin: 1.5rem 0 .375rem; }
.explainer p { font-size: .9375rem; color: var(--c-text-2); max-width: 640px; }
.related { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--c-border); }
.related h2 { font-size: .9375rem; font-weight: 700; margin-bottom: .75rem; }
.related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .625rem; }
.related-link { display: block; background: var(--c-bg-2); border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: .75rem .875rem; text-decoration: none; transition: border-color .15s; }
.related-link:hover { border-color: var(--c-border-2); }
.related-link .rl-name { font-size: .875rem; font-weight: 600; color: var(--c-text); margin-bottom: .125rem; }
.related-link .rl-desc { font-size: .75rem; color: var(--c-text-3); }
.static-content { max-width: 660px; padding: 2.5rem 0 4rem; }
.static-content h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: 1.25rem; }
.static-content h2 { font-size: 1rem; font-weight: 700; margin: 2rem 0 .5rem; }
.static-content p { font-size: .9375rem; color: var(--c-text-2); margin-bottom: .875rem; }
.static-content a { color: var(--c-accent); }
.static-content ul { padding-left: 1.25rem; margin-bottom: .875rem; }
.static-content li { font-size: .9375rem; color: var(--c-text-2); margin-bottom: .25rem; }
.contact-section { margin-top: 1.5rem; }
.fg { display: flex; flex-direction: column; gap: 6px; margin-bottom: 1rem; }
.fg label { font-size: .875rem; font-weight: 500; color: var(--c-text); }
.fg input, .fg textarea { width: 100%; padding: .625rem .75rem; font-size: .9375rem; border: 1px solid var(--c-border-2); border-radius: var(--radius-sm); background: var(--c-bg-2); color: var(--c-text); font-family: inherit; transition: border-color .15s; resize: vertical; }
.fg input:focus, .fg textarea:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(26,86,219,.12); background: var(--c-bg); }
.fg textarea { min-height: 120px; }
.btn-submit { display: inline-block; padding: .625rem 1.375rem; background: var(--c-accent); color: #fff; font-size: .9375rem; font-weight: 600; border: none; border-radius: var(--radius-sm); cursor: pointer; }
.btn-submit:hover { background: var(--c-accent-hover); }
footer { border-top: 1px solid var(--c-border); background: var(--c-bg-2); }
.footer-inner { max-width: 860px; margin: 0 auto; padding: 2rem 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.footer-brand { font-size: .875rem; font-weight: 600; color: var(--c-text); }
.footer-tagline { font-size: .8125rem; color: var(--c-text-3); margin-top: 2px; }
.footer-links { display: flex; flex-wrap: wrap; gap: .25rem .125rem; }
.footer-links a { font-size: .8125rem; color: var(--c-text-3); text-decoration: none; padding: 3px 8px; border-radius: var(--radius-sm); }
.footer-links a:hover { color: var(--c-text); background: var(--c-bg-3); }
.footer-copy { font-size: .75rem; color: var(--c-text-3); }
@media (max-width: 620px) {
  #main-nav { display: none; flex-direction: column; background: var(--c-bg); position: absolute; top: 56px; left: 0; right: 0; border-bottom: 1px solid var(--c-border); padding: .5rem; z-index: 99; }
  #main-nav.open { display: flex; }
  #main-nav a { font-size: 14px; padding: 8px 12px; }
  .nav-toggle { display: block; }
  .fields { grid-template-columns: 1fr; }
  .outputs-grid { grid-template-columns: 1fr; }
  .hero, .page-hero { padding-top: 1.75rem; }
  .examples-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 380px) { .examples-grid { grid-template-columns: 1fr; } }