@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');

:root{
  --bg:#f3f0e8;
  --paper:#fffdf8;
  --ink:#1d1f1e;
  --muted:#737874;
  --brand:#184f49;
  --brand2:#2d6d65;
  --soft:#ece8de;
  --warm:#c77748;
  --line:#dedbd2;
  --danger:#a04b40;
}
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"DM Sans",sans-serif;
}
.shell{width:min(980px,92vw);margin:0 auto;padding:28px 0 40px}
.topbar{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:18px}
.brand{font-weight:700;color:var(--brand);font-size:1.1rem}
.tagline{color:var(--muted);font-size:.85rem}
.card{
  background:var(--paper);
  min-height:650px;
  border-radius:28px;
  padding:clamp(28px,5vw,64px);
  box-shadow:0 24px 70px rgba(30,36,32,.1);
  position:relative;
}
.screen{display:none;max-width:740px;margin:0 auto;animation:fade .22s ease}
.screen.active{display:block}
@keyframes fade{from{opacity:.2;transform:translateY(6px)}to{opacity:1;transform:none}}
.eyebrow{color:var(--brand2);font-size:.78rem;letter-spacing:.16em;font-weight:700;margin-bottom:18px}
h1,h2{font-family:"Playfair Display",Georgia,serif;line-height:1.07;letter-spacing:-.025em;margin:0 0 18px}
h1{font-size:clamp(2.5rem,6vw,5rem);max-width:12ch}
h2{font-size:clamp(2rem,4vw,3.5rem);max-width:17ch}
.lead{font-size:1.08rem;line-height:1.65;color:#494d49;max-width:650px}
.lead.small{font-size:1rem}
.helper{line-height:1.6;color:var(--muted);margin-bottom:28px}
.hero-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:32px 0}
.hero-grid div{background:var(--soft);border-radius:16px;padding:18px}
.hero-grid strong{display:block;color:var(--brand);font-size:1.3rem;margin-bottom:5px}
.hero-grid span{color:var(--muted);font-size:.82rem}
.btn{border:0;border-radius:999px;padding:14px 22px;font-weight:700;cursor:pointer;margin-top:10px}
.primary{background:var(--brand);color:white}
.secondary{background:var(--soft);color:var(--ink)}
.wide{width:100%}
.micro{color:var(--muted);font-size:.8rem}
.big-input,.small-input,.email-input{
  display:flex;align-items:center;gap:12px;border-bottom:2px solid var(--ink);
  max-width:540px;padding:6px 0 10px;margin:28px 0 10px
}
.big-input input,.small-input input,.email-input input{
  width:100%;border:0;outline:0;background:transparent;color:var(--ink)
}
.big-input input{font-size:clamp(2rem,5vw,3.6rem);font-weight:600}
.small-input input,.email-input input{font-size:1.4rem;padding:6px 0}
.big-input span,.small-input span{color:var(--muted);font-size:1.1rem}
.actions{display:flex;gap:12px;margin-top:34px}
.text-btn{border:0;background:transparent;color:var(--brand);text-decoration:underline;padding:8px 0;cursor:pointer}
.note{background:var(--soft);padding:12px 14px;border-radius:12px;color:#565b57;max-width:540px}
.choice-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:28px 0 12px}
.choice{border:1px solid var(--line);background:white;border-radius:16px;padding:16px;font-weight:700;cursor:pointer}
.choice.selected,.choice:hover{border-color:var(--brand);background:#edf5f2;color:var(--brand)}
.progress-wrap{max-width:620px;margin:0 auto 38px}
.progress-meta{display:flex;justify-content:space-between;font-size:.78rem;color:var(--muted);margin-bottom:8px}
.progress-track{height:4px;background:var(--soft);border-radius:99px;overflow:hidden}
.progress-bar{height:100%;background:var(--brand);width:0;transition:width .2s ease}
.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:28px 0}
.metric{background:var(--soft);border-radius:18px;padding:20px;min-height:145px;display:flex;flex-direction:column;justify-content:space-between}
.metric span,.metric small{color:var(--muted);font-size:.82rem}
.metric strong{color:var(--brand);font-size:clamp(1.5rem,3vw,2.4rem)}
.metric.accent{background:#f2e4da}
.metric.accent strong{color:var(--warm)}
.annual-box{display:flex;justify-content:space-between;gap:20px;align-items:center;border:1px solid var(--line);border-radius:16px;padding:18px 20px;margin-bottom:18px}
.annual-box span{color:var(--muted)} .annual-box strong{font-size:1.45rem}
.time-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;background:#eef4f2;border-radius:18px;padding:20px}
.time-grid div{display:flex;flex-direction:column;gap:6px}
.time-grid span{font-size:.8rem;color:var(--muted)}
.time-grid strong{font-size:1.8rem;color:var(--brand)}
.time-total{border-left:1px solid #ccd8d4;padding-left:14px}
.disclaimer{font-size:.76rem;line-height:1.5;color:var(--muted);border-top:1px solid var(--line);padding-top:14px;margin-top:18px}
.tags{display:flex;flex-wrap:wrap;gap:10px;margin:30px 0}
.tags span{background:var(--soft);padding:10px 14px;border-radius:999px;color:var(--brand);font-weight:700}
.offer-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:26px 0}
.offer-list div{background:var(--soft);padding:13px 14px;border-radius:12px}
.price{display:flex;align-items:baseline;gap:12px;margin:18px 0}
.price span,.price small{color:var(--muted)}
.price strong{font-family:"Playfair Display",Georgia,serif;color:var(--brand);font-size:3.5rem}
.stacked{display:grid;gap:10px;margin:26px 0}
.wide-choice{text-align:left}
.summary{background:var(--soft);padding:20px;border-radius:16px;line-height:1.7;margin:24px 0}
.error{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);background:#fff1ef;color:var(--danger);border:1px solid #efc2bc;border-radius:12px;padding:10px 14px;font-size:.85rem}
.hidden{display:none!important}
@media (max-width:720px){
  .tagline{display:none}
  .card{padding:28px 22px;min-height:640px}
  .hero-grid,.result-grid,.time-grid,.offer-list{grid-template-columns:1fr}
  .choice-grid{grid-template-columns:repeat(2,1fr)}
  .time-total{border-left:0;border-top:1px solid #ccd8d4;padding-left:0;padding-top:12px}
  .actions{flex-direction:column-reverse}
  .actions .btn,.btn.primary{width:100%}
}