:root { color-scheme: light; --ink:#172033; --muted:#657086; --line:#dfe5ee; --brand:#0f766e; --brand-dark:#115e59; --soft:#ecfdf5; --bg:#f5f7fb; --white:#fff; --danger:#b42318; }
* { box-sizing:border-box; }
body { margin:0; font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--ink); background:var(--bg); line-height:1.6; }
.wrap { width:min(1120px, calc(100% - 32px)); margin-inline:auto; }
.hero { color:white; background:linear-gradient(125deg,#0b3f3b,#0f766e 58%,#16978b); padding:64px 0 86px; }
.eyebrow { margin:0 0 8px; font-size:.76rem; font-weight:800; letter-spacing:.14em; }
h1 { margin:0; max-width:760px; font-size:clamp(2.1rem,6vw,4rem); line-height:1.12; letter-spacing:-.04em; }
.lead { max-width:680px; margin:20px 0 0; color:#d5faf3; font-size:1.05rem; }
.layout { display:grid; grid-template-columns:1.08fr .92fr; gap:24px; margin-top:-44px; padding-bottom:48px; align-items:start; }
.card { background:var(--white); border:1px solid var(--line); border-radius:20px; box-shadow:0 16px 40px rgba(23,32,51,.08); padding:28px; }
.input-card { grid-row:span 2; }
.privacy-note { display:flex; gap:12px; margin-bottom:24px; padding:14px 16px; border:1px solid #a7f3d0; border-radius:14px; background:var(--soft); color:#14532d; font-size:.9rem; }
h2 { margin:0 0 18px; font-size:1.35rem; letter-spacing:-.02em; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
label { display:flex; flex-direction:column; gap:6px; font-size:.88rem; font-weight:700; }
input { width:100%; border:1px solid #cbd5e1; border-radius:10px; padding:11px 12px; font:inherit; color:var(--ink); background:#fff; }
input:focus { outline:3px solid rgba(15,118,110,.17); border-color:var(--brand); }
small { color:var(--muted); font-weight:400; line-height:1.35; }
.primary { width:100%; margin-top:22px; padding:13px 20px; border:0; border-radius:12px; color:white; background:var(--brand); font:inherit; font-weight:800; cursor:pointer; }
.tabs { display:grid; grid-template-columns:repeat(2,1fr); gap:5px; margin:0 0 20px; padding:5px; border-radius:12px; background:#eef2f6; }
.tabs button { border:0; border-radius:9px; padding:10px 8px; color:var(--muted); background:transparent; font:inherit; font-size:.86rem; font-weight:800; cursor:pointer; }
.tabs button[aria-selected="true"] { color:var(--brand-dark); background:white; box-shadow:0 2px 8px rgba(23,32,51,.1); }
.period-tabs { grid-template-columns:1fr 1fr; margin-top:20px; }
.money-field { display:flex; align-items:center; border:1px solid #cbd5e1; border-radius:10px; background:#fff; overflow:hidden; }
.money-field:focus-within { outline:3px solid rgba(15,118,110,.17); border-color:var(--brand); }
.money-field input { border:0; border-radius:0; text-align:right; }
.money-field input:focus { outline:0; }
.money-field span { padding-right:12px; color:var(--muted); font-weight:600; }
.mode-note { margin:18px 0 0; padding:12px 14px; border-radius:10px; color:#7c2d12; background:#fff7ed; font-size:.82rem; }
[hidden] { display:none !important; }
.primary:hover { background:var(--brand-dark); }
.section-heading { display:flex; justify-content:space-between; align-items:start; }
.section-heading h2 { margin-bottom:0; }
.chip { border-radius:999px; padding:5px 10px; background:var(--soft); color:var(--brand-dark); font-size:.78rem; font-weight:800; }
.hero-result { margin:24px 0; padding:22px; border-radius:16px; color:white; background:var(--ink); }
.hero-result span,.hero-result small { display:block; color:#cbd5e1; }
.hero-result strong { display:block; margin:4px 0; font-size:2.2rem; letter-spacing:-.04em; }
.metrics { display:grid; grid-template-columns:1fr 1fr; margin:0; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.metrics div { background:#fff; padding:14px; }
.metrics dt { color:var(--muted); font-size:.78rem; }
.metrics dd { margin:3px 0 0; font-weight:800; }
.formula-note { color:var(--muted); font-size:.8rem; }
.comparison { grid-column:1/-1; }
.scenario-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.scenario { border:1px solid var(--line); border-radius:14px; padding:18px; }
.scenario.current { border-color:var(--brand); background:var(--soft); }
.scenario h3 { margin:0 0 10px; font-size:1rem; }
.scenario strong { display:block; font-size:1.45rem; }
.scenario span { color:var(--muted); font-size:.84rem; }
.guide,.faq,.disclaimer { grid-column:1/-1; }
.guide,.faq { box-shadow:none; }
.guide p,.guide li,.faq p { color:var(--muted); }
.guide h3 { margin:24px 0 8px; font-size:1rem; }
.guide ul { margin:0; padding-left:1.25rem; }
.faq details { border-top:1px solid var(--line); padding:16px 0; }
.faq details:last-child { padding-bottom:0; }
.faq summary { cursor:pointer; font-weight:800; }
.faq p { margin:10px 0 0; }
.disclaimer { box-shadow:none; }
.disclaimer p { margin:0; color:var(--muted); }
footer { border-top:1px solid var(--line); padding:28px 0; color:var(--muted); font-size:.85rem; }
@media (max-width:820px){ .layout{grid-template-columns:1fr}.input-card{grid-row:auto}.comparison,.guide,.faq,.disclaimer{grid-column:auto}.scenario-grid{grid-template-columns:1fr}.hero{padding-top:48px}.form-grid{grid-template-columns:1fr} }
@media (max-width:480px){ .wrap{width:min(100% - 20px,1120px)}.card{padding:20px;border-radius:16px}.metrics{grid-template-columns:1fr}.hero-result strong{font-size:1.8rem} }