:root{
  --bg: #FFFFFF;
  --bg-soft: #F7F6F1;
  --ink: #1F2A28;
  --ink-soft: #5B6763;
  --surface: #FFFFFF;
  --border: #E9E4D6;
  --accent: #7C3AED;
  --accent-dark: #5B21B6;
  --accent-tint: #F1EBFE;
  --accent-tint-border: #DFCEFC;
  --good: #0F8A5F;
  --good-tint: #E7F7EF;
  --warn: #C2410C;
  --warn-tint: #FFF1E8;
  --radius: 20px;
  --shadow: 0 16px 34px -18px rgba(31,42,40,0.18);
}
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; background: var(--bg); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } *{ animation-duration: .001ms !important; transition-duration: .001ms !important; } }
body{
  margin:0; background: var(--bg); color: var(--ink);
  font-family: 'Nunito Sans', sans-serif; font-size: 17px; line-height: 1.6;
}
h1,h2,h3,.logo{ font-family: 'Fredoka', sans-serif; font-weight: 600; letter-spacing: -0.01em; margin:0; }
a{ color: inherit; }
.wrap{ max-width: 760px; margin: 0 auto; padding: 0 24px; }

header{ padding: 22px 0; border-bottom: 1px solid var(--border); }
header .wrap{ display:flex; align-items:center; justify-content:space-between; }
.back-link{ font-size: 0.92rem; font-weight: 700; color: var(--ink-soft); text-decoration:none; display:flex; align-items:center; gap:6px; }
.back-link:hover{ color: var(--accent-dark); }
.logo-mark{ font-size: 1.25rem; font-weight:700; color: var(--accent-dark); }

.hero{ padding: 40px 0 8px; }
.eyebrow{ display:inline-flex; align-items:center; gap:8px; background: var(--accent-tint); border: 1px solid var(--accent-tint-border); color: var(--accent-dark); padding: 6px 14px; border-radius: 100px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.hero h1{ font-size: clamp(1.9rem, 5vw, 2.6rem); line-height: 1.12; margin-top: 16px; color: var(--ink); }
.hero p{ margin-top: 14px; color: var(--ink-soft); font-size: 1.05rem; max-width: 560px; }

.calc-card{ background: var(--accent); border-radius: 24px; padding: 30px; margin: 30px 0; color: #fff; box-shadow: var(--shadow); }
.calc-card h2{ color: #fff; font-size: 1.3rem; }
.calc-card .calc-sub{ color: rgba(255,255,255,0.85); font-size: 0.94rem; margin-top: 6px; }
.field{ margin-top: 18px; }
.field label{ display:block; font-size: 0.86rem; font-weight: 700; color: rgba(255,255,255,0.92); margin-bottom: 6px; }
.field input, .field select{
  width:100%; padding: 12px 14px; border-radius: 12px; border: none; font-size: 1rem;
  font-family: 'Nunito Sans', sans-serif; background: #fff; color: var(--ink);
}
.field-row{ display:grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 560px){ .field-row.two{ grid-template-columns: 1fr 1fr; } }
.btn{
  margin-top: 22px; width:100%; padding: 15px; border-radius: 100px; border:none;
  background:#fff; color: var(--accent-dark); font-family:'Fredoka',sans-serif; font-weight:700;
  font-size: 1.02rem; cursor:pointer; transition: transform .15s ease, opacity .15s ease;
}
.btn:hover{ opacity: .92; transform: translateY(-1px); }
.btn:focus-visible{ outline: 3px solid #fff; outline-offset: 3px; }
.checklist{ display:flex; flex-direction:column; gap: 12px; margin-top: 18px; }
.checklist label{
  display:flex; align-items:center; gap: 12px; background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.28); border-radius: 14px; padding: 14px 16px;
  cursor:pointer; font-weight:600; font-size: 0.96rem;
}
.checklist input{ width:20px; height:20px; accent-color: var(--accent-dark); flex-shrink:0; }

.result{
  margin-top: 22px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.3);
  border-radius: 16px; padding: 20px; display:none;
}
.result.show{ display:block; }
.result .r-label{ font-size: 0.8rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700; color: rgba(255,255,255,0.75); }
.result .r-value{ font-family:'Fredoka',sans-serif; font-size: 2rem; font-weight:700; margin-top:4px; }
.result .r-note{ font-size: 0.9rem; color: rgba(255,255,255,0.9); margin-top: 10px; line-height:1.55; }
.result.status-good{ background: rgba(255,255,255,0.95); color: var(--ink); }
.result.status-good .r-label{ color: var(--good); }
.result.status-good .r-value{ color: var(--good); }
.result.status-good .r-note{ color: var(--ink-soft); }
.result.status-warn{ background: rgba(255,255,255,0.95); color: var(--ink); }
.result.status-warn .r-label{ color: var(--warn); }
.result.status-warn .r-value{ color: var(--warn); font-size:1.3rem; }
.result.status-warn .r-note{ color: var(--ink-soft); }

.section{ padding: 34px 0; border-top: 1px solid var(--border); }
.section h2{ font-size: 1.4rem; color: var(--ink); }
.section p{ color: var(--ink-soft); margin-top: 10px; }
.info-grid{ display:grid; grid-template-columns: 1fr; gap: 14px; margin-top: 18px; }
@media (min-width:560px){ .info-grid{ grid-template-columns: 1fr 1fr; } }
.info-item{ background: var(--bg-soft); border: 1px solid var(--border); border-radius: 16px; padding: 18px; }
.info-item .n{ font-family:'Fredoka',sans-serif; font-weight:700; color: var(--accent-dark); font-size:0.82rem; text-transform:uppercase; letter-spacing:.04em; }
.info-item p{ margin-top:6px; font-size:0.94rem; }

details{ border: 1px solid var(--border); border-radius: 14px; padding: 14px 18px; margin-top: 12px; background: var(--bg-soft); }
details summary{ cursor:pointer; font-weight:700; font-family:'Fredoka',sans-serif; font-size:0.98rem; color: var(--ink); }
details p{ margin-top:10px; color: var(--ink-soft); font-size:0.94rem; }

.disclaimer{ background: var(--accent-tint); border:1px solid var(--accent-tint-border); border-radius:14px; padding:16px 18px; font-size:0.88rem; color: var(--ink-soft); margin-top: 20px; }
.disclaimer strong{ color: var(--ink); }

footer{ padding: 30px 0 40px; text-align:center; border-top: 1px solid var(--border); margin-top:20px; }
footer p{ font-size:0.82rem; color: var(--ink-soft); }
footer a{ color: var(--accent-dark); font-weight:700; text-decoration:none; }