:root{--ink:#162033;--muted:#64748b;--line:#dbe4ee;--soft:#f4f8fb;--panel:#ffffff;--brand:#0f766e;--brand2:#1d4ed8;--brandSoft:#e0f2fe;--warn:#fff7ed;--warnLine:#fed7aa}*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:linear-gradient(180deg,#fbfdff,#eef7f5);color:var(--ink);line-height:1.6}.site-shell{width:min(1160px,calc(100% - 32px));margin:0 auto}.site-header{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:26px 0 16px}.site-name{font-weight:950;letter-spacing:-.04em;font-size:1.35rem;color:#020617;text-decoration:none}.breadcrumb{font-size:.9rem;color:var(--muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap}.breadcrumb a{color:var(--muted);text-decoration:none}.hero{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;padding:38px 0 24px}.eyebrow{margin:0 0 8px;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;font-weight:850;color:var(--brand)}h1{font-size:clamp(2.25rem,6vw,4.7rem);line-height:.95;letter-spacing:-.06em;margin:0}.hero-copy{max-width:760px;color:var(--muted);font-size:1.08rem}.archetype-pill{align-self:start;border:1px solid var(--line);background:#fff;border-radius:999px;padding:10px 14px;font-weight:800;color:var(--brand2)}.quick-facts{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.quick-fact{border:1px solid var(--line);background:#fff;border-radius:16px;padding:10px 13px;min-width:145px}.quick-fact span{display:block;color:var(--muted);font-size:.78rem}.quick-fact strong{display:block;font-size:.95rem}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:18px;align-items:start}.panel,.content-card{background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:22px;box-shadow:0 18px 45px rgba(15,23,42,.06)}.panel{padding:22px}.panel-title{margin:0 0 6px;font-size:1.25rem}.panel-note,.field-help{color:var(--muted);font-size:.92rem}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.field span{display:block;font-weight:800;font-size:.9rem;margin-bottom:6px}.field small{display:block;color:var(--muted);font-size:.78rem;margin-top:6px}.input-wrap{display:flex;align-items:center;border:1px solid var(--line);background:#f8fafc;border-radius:14px;overflow:hidden}.input-wrap b,.input-wrap em{font-style:normal;color:var(--muted);padding:0 10px;font-weight:750}.input-wrap input{min-width:0;width:100%;border:0;background:transparent;padding:12px 10px;font:inherit;color:var(--ink);outline:none}.actions{display:flex;gap:10px;margin-top:16px}.primary,.secondary{border:0;border-radius:999px;padding:12px 18px;font-weight:900;cursor:pointer}.primary{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff}.secondary{background:#e2e8f0;color:#0f172a}.result-panel{position:sticky;top:14px}.result-empty,.result-ready{min-height:260px;display:flex;align-items:center;justify-content:center;text-align:center}.result-empty-icon{font-size:2rem}.result-main{font-size:2.3rem;letter-spacing:-.05em;font-weight:950;margin:10px 0;color:var(--brand)}.result-table{width:100%;border-collapse:collapse;margin-top:12px}.result-table td{padding:9px 0;border-bottom:1px solid var(--line);text-align:left}.result-table td:last-child{text-align:right;font-weight:850}.error{color:#b91c1c;font-weight:800}.content-grid{padding:24px 0 50px}.article{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.content-card{padding:22px}.content-card h2{margin:0 0 12px;font-size:1.35rem;letter-spacing:-.02em}.content-card p{margin:10px 0;color:#334155}.content-card a{color:var(--brand2);font-weight:800}.method-box{background:linear-gradient(180deg,#fff,#f8fafc)}.warning-box{background:var(--warn);border-color:var(--warnLine)}.formula-box,.example-calculation{border:1px dashed #93c5fd;background:#eff6ff;border-radius:16px;padding:14px;color:#1e3a8a;font-weight:750}.input-guide{display:grid;gap:10px}.input-guide div{border-top:1px solid var(--line);padding-top:10px}.input-guide dt{font-weight:850}.input-guide dd{margin:3px 0 0;color:var(--muted)}.faq-list details{border-top:1px solid var(--line);padding:12px 0}.faq-list summary{cursor:pointer;font-weight:850}.faq-answer p{color:var(--muted)}.site-footer{border-top:1px solid var(--line);padding:24px 0 34px;color:var(--muted)}.footer-inner{width:min(1160px,calc(100% - 32px));margin:0 auto;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}.footer-links{display:flex;gap:14px;flex-wrap:wrap}.footer-links a{color:var(--muted);text-decoration:none}@media(max-width:900px){.workspace,.article,.hero{grid-template-columns:1fr}.result-panel{position:static}.form-grid{grid-template-columns:1fr}}
/* Formatting alignment with the other calculator pages. Content and calculator behavior stay unchanged. */
:root {
  --ink: #172033;
  --muted: #5f6b7a;
  --line: #dce2e8;
  --panel: #ffffff;
  --canvas: #f6f8f7;
  --brand: #0f766e;
  --brand-dark: #115e59;
  --brand-soft: #ccfbf1;
  --accent: #d97706;
  --accent-soft: #fef3c7;
  --danger: #b42318;
  --shadow: 0 14px 35px rgba(20, 34, 50, .08);
}

html { scroll-behavior: smooth; }
body {
  background: linear-gradient(180deg, #fff 0, var(--canvas) 42%, #fff 100%);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.62;
}
a { color: var(--brand-dark); }
button, input, select { font: inherit; }
.site-shell { width: min(1180px, calc(100% - 34px)); }
.site-header {
  gap: 22px;
  padding: 24px 0 18px;
  border-bottom: 1px solid var(--line);
}
.site-name {
  color: #000;
  font-size: 1.38rem;
  font-weight: 900;
  letter-spacing: -.03em;
}
.breadcrumb {
  justify-content: flex-end;
  gap: 9px;
  font-size: .86rem;
}
.hero {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  padding: 48px 0 30px;
}
.hero h1,
h1 {
  max-width: 850px;
  margin: 5px 0 13px;
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1.02;
  letter-spacing: -.05em;
}
.hero-copy {
  max-width: 750px;
  margin: 0;
  font-size: 1.08rem;
}
.eyebrow {
  margin: 0;
  color: var(--brand);
  font-size: .73rem;
  font-weight: 900;
  letter-spacing: .1em;
}
.archetype-pill {
  display: inline-flex;
  align-self: start;
  border: 0;
  border-radius: 999px;
  background: var(--accent-soft);
  color: #92400e;
  padding: 7px 11px;
  font-size: .75rem;
  font-weight: 850;
}
.quick-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 20px;
}
.quick-fact {
  min-width: 0;
  border-radius: 12px;
  background: rgba(255,255,255,.82);
  padding: 12px 13px;
}
.quick-fact span {
  font-size: .72rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.quick-fact strong {
  margin-top: 3px;
  font-size: .92rem;
}
.workspace {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 18px;
}
.panel,
.content-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.panel { padding: 24px; }
.panel-title {
  margin: 0 0 4px;
  font-size: 1.4rem;
}
.panel-note {
  margin: 0 0 20px;
  color: var(--muted);
}
.form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}
.field span {
  margin-bottom: 6px;
  font-size: .86rem;
  font-weight: 800;
}
.field small,
.field-help {
  margin-top: 5px;
  color: var(--muted);
  font-size: .74rem;
  line-height: 1.45;
}
.input-wrap {
  min-height: 45px;
  border: 1px solid #cbd5df;
  border-radius: 10px;
  background: #fff;
}
.input-wrap input {
  min-height: 43px;
  padding: 10px 11px;
}
.input-wrap b,
.input-wrap em {
  color: var(--muted);
  padding: 0 10px;
  font-weight: 750;
}
.input-wrap:focus-within {
  border-color: var(--brand);
  outline: 3px solid rgba(15,118,110,.15);
}
.primary,
.secondary {
  border-radius: 10px;
  padding: 11px 16px;
  font-weight: 850;
}
.primary {
  background: var(--brand);
}
.primary:hover { background: var(--brand-dark); }
.secondary {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
}
.error { color: var(--danger); }
.result-panel {
  min-height: 480px;
  top: 16px;
}
.result-empty,
.result-ready {
  min-height: 430px;
}
.result-empty-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin: 0 auto 10px;
  border-radius: 16px;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-size: 1.6rem;
}
.result-main {
  margin: 4px 0 8px;
  color: var(--brand-dark);
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -.04em;
}
.result-table {
  margin-top: 17px;
  font-size: .86rem;
}
.result-table td {
  padding: 9px;
  border-bottom: 1px solid var(--line);
}
.content-grid {
  display: block;
  width: min(940px, 100%);
  margin: 28px auto 55px;
  padding: 0;
}
.article {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.content-card {
  padding: 25px;
  border-radius: 15px;
  box-shadow: 0 8px 24px rgba(31,41,55,.05);
}
.content-card h2 {
  margin: 5px 0 12px;
  font-size: 1.55rem;
  line-height: 1.18;
  letter-spacing: 0;
}
.content-card p,
.content-card li {
  color: #4b5563;
}
.content-card p:last-child,
.content-card ul:last-child {
  margin-bottom: 0;
}
.method-box {
  border-left: 5px solid var(--brand);
  background: var(--panel);
}
.warning-box {
  border-left: 5px solid var(--accent);
  border-color: var(--line);
  background: var(--panel);
}
.formula-box {
  margin: 15px 0;
  border: 0;
  border-radius: 10px;
  background: #f1f5f4;
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .86rem;
  font-weight: 500;
}
.example-calculation {
  margin: 14px 0;
  border: 0;
  border-left: 4px solid var(--accent);
  border-radius: 0 12px 12px 0;
  background: #fffbeb;
  color: var(--ink);
  font-weight: 500;
}
.input-guide {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 0;
}
.input-guide div {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfdfc;
  padding: 12px;
}
.input-guide dt {
  color: var(--ink);
  font-size: .9rem;
  font-weight: 800;
}
.input-guide dd {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.5;
}
.check-list {
  padding-left: 1.25rem;
}
.check-list li {
  margin: 8px 0;
}
.faq-list {
  display: grid;
  gap: 9px;
}
.faq-list details {
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  padding: 12px 14px;
}
.faq-list summary {
  font-weight: 800;
}
.faq-answer p {
  color: var(--muted);
}
.site-footer {
  border-top: 1px solid var(--line);
  padding: 25px 0;
  font-size: .82rem;
}
.footer-inner {
  width: min(1180px, calc(100% - 34px));
}

@media (max-width: 860px) {
  .hero,
  .workspace {
    grid-template-columns: 1fr;
  }
  .result-panel {
    position: static;
  }
}

@media (max-width: 640px) {
  .site-shell {
    width: min(100% - 22px, 1180px);
  }
  .site-header,
  .footer-inner {
    align-items: flex-start;
    flex-direction: column;
  }
  .breadcrumb {
    justify-content: flex-start;
  }
  .hero {
    padding-top: 30px;
  }
  .hero h1,
  h1 {
    font-size: 2.25rem;
  }
  .quick-facts,
  .form-grid,
  .input-guide {
    grid-template-columns: 1fr;
  }
  .panel,
  .content-card {
    padding: 19px;
    border-radius: 14px;
  }
}