:root{
  --bg:#ffffff; --card:#ffffff; --muted:#666666; --text:#111111; --accent:#00af86;
  --btn:#00af86; --btnText:#ffffff; --border:#e6e6e6; --focus:#7dd3fc;
  --inputBg:#ffffff; --resultBg:#ecfdf5; --resultBorder:#00af86;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:var(--bg); color:var(--text); font-family:"Open Sans",Arial,sans-serif}
.wrap{min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:24px}
.card{width:min(880px,100%); background:var(--card); border:1px solid var(--border);
  border-radius:20px; padding:clamp(20px,4vw,48px); box-shadow:0 14px 30px rgba(0,0,0,.06)}
h1,h2,h3{font-family:"Josefin Sans",Helvetica,Arial,sans-serif; margin:0 0 10px; color:var(--text)}
h1{font-size:clamp(28px,4.2vw,44px); line-height:1.05; letter-spacing:.2px}
.supergood p{color:#222; line-height:1.6; margin:0 0 14px}
.muted{color:var(--muted)}
.counter{font-weight:700; color:var(--accent)}
.last_btn {margin-top: 15px;}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 18px;  border-radius:14px; border:1px solid var(--border); background:var(--btn);
  color:var(--btnText); font-weight:700; cursor:pointer; transition:transform .04s ease, box-shadow .2s ease; text-decoration:none; user-select:none}
.btn:hover{transform:translateY(-1px)}
.btn.secondary{background:transparent; color:var(--text); border-color:var(--border)}
.btn.ghost{background:transparent; color:#444; border-color:var(--border)}
.row{display:flex; flex-wrap:wrap; gap:14px}
.row .col{flex:1}
.spacer{height:18px}
.supergood label{font-size:13px; color:#333; display:block; margin-bottom:6px}
.supergood input,select{width:100%; background:var(--inputBg); color:var(--text); border:1px solid var(--border);
  border-radius:12px; padding:14px 14px; outline:none; font-family:inherit; font-size:16px}
.supergood input:focus,select:focus{border-color:var(--focus); box-shadow:0 0 0 4px rgba(125,211,252,.25)}
.pill{display:inline-block; padding:8px 12px; border:1px solid var(--border); border-radius:999px; color:#333; background:#fafafa; font-size:14px}
.choices{display:flex; flex-direction:column; gap:10px; margin-top:8px}
.choice{width:100%}
.footnote{font-size:13px; color:var(--muted)}
.fade{opacity:0; transform:translateY(8px); transition:opacity .35s ease, transform .35s ease}
.fade.is-in{opacity:1; transform:none}
.step{display:none}
.step.active{display:block}
.topbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px}
.brand{display:flex; align-items:center; gap:10px}
.dot{width:8px; height:8px; border-radius:50%; background:var(--accent)}
.progress{display:flex; align-items:center; gap:6px}
.progress .node{width:8px;height:8px;border-radius:50%;background:#e0e0e0}
.progress .node.on{background:var(--accent)}
.hidden{display:none}
.center{text-align:center}
.error{color:#b91c1c; font-weight:600; font-size:14px}
.backbar{display:flex; gap:10px; align-items:center; margin-bottom:30px}
.backbar .back{display:inline-flex; align-items:center; gap:8px}
.calc-wrap{border:1px dashed var(--border); padding:14px; border-radius:12px; background:#fafafa}
.calc-inline-note{font-size:12px; color:#6b7280}
.result-card{background:var(--resultBg); border-left:4px solid var(--resultBorder); padding:14px; border-radius:8px}
.modal-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.45); display:none; align-items:center; justify-content:center; z-index:50}
.modal{width:min(620px,92%); background:#ffffff; border:1px solid var(--border); border-radius:16px; padding:22px; box-shadow:0 24px 60px rgba(0,0,0,.20)}
.modal h3{margin:0 0 8px}
.modal .actions{display:flex; gap:10px; margin-top:16px; justify-content:flex-end}
.thank{padding:10px 12px; background:#f0fdf4; border-left:4px solid #22c55e; border-radius:8px; color:#166534}
@media (max-width:720px){ .row{flex-direction:column} }


.container{
	width: 100%;
}