@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,600&display=swap");

:root { color: #26322d; background: #f3f6ee; font-family: "DM Sans", sans-serif; font-synthesis: none; }
* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; }
button, input { font: inherit; }
[hidden] { display: none !important; }

main { min-height: 100vh; padding: 2.5rem 1.25rem; background: radial-gradient(circle at 15% 0%, #fff 0, transparent 34rem), #f3f6ee; }
.sleep-card { width: min(100%, 1020px); margin: 0 auto; }
.brand { display: flex; align-items: center; gap: .6rem; color: #275e4b; font-weight: 700; }
.brand-mark { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50% 50% 45% 55%; background: #d9eadb; font-family: Georgia, serif; font-style: italic; }
.intro { max-width: 710px; margin: 4rem auto 2.25rem; text-align: center; }
.eyebrow, .result-kicker { margin: 0 0 .8rem; color: #c76f48; font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
h1 { margin: 0; color: #214e40; font-family: "Fraunces", Georgia, serif; font-size: clamp(2.5rem, 6vw, 4.75rem); letter-spacing: -.045em; line-height: 1.02; text-wrap: balance; }
.lede { max-width: 560px; margin: 1.15rem auto 0; color: #617068; font-size: 1.05rem; line-height: 1.6; }
.question-panel { max-width: 690px; margin: 0 auto; padding: 2.25rem; border: 1px solid #e0e7dc; border-radius: 24px; background: rgb(255 255 255 / 92%); box-shadow: 0 18px 50px rgb(38 67 55 / 8%); }
.progress { display: flex; align-items: center; gap: 1rem; margin-bottom: 2.25rem; color: #718078; font-size: .78rem; font-weight: 600; }
.progress-track { height: 4px; flex: 1; overflow: hidden; border-radius: 1rem; background: #e8ede7; }
.progress-track span { display: block; width: 50%; height: 100%; border-radius: inherit; background: #c97951; transition: width .3s ease; }
.progress-track span.complete { width: 100%; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { padding: 0; color: #263d34; font-family: "Fraunces", Georgia, serif; font-size: clamp(1.55rem, 4vw, 2rem); font-weight: 600; }
.hint { margin: .5rem 0 1.5rem; color: #758078; font-size: .92rem; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.choice { position: relative; display: flex; align-items: center; gap: 1rem; min-height: 104px; padding: 1.15rem; border: 1.5px solid #dfe7de; border-radius: 15px; cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.choice:hover { border-color: #7ba18f; transform: translateY(-2px); }
.choice:has(input:checked) { border-color: #39745d; background: #f1f8f2; box-shadow: 0 0 0 2px rgb(57 116 93 / 9%); }
.choice input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.choice-icon { font-size: 2rem; filter: grayscale(.25); }
.choice strong, .choice small { display: block; }
.choice strong { margin-bottom: .25rem; color: #2c493d; font-size: 1rem; }
.choice small { color: #7b877f; font-size: .78rem; }
.hours-input { display: flex; align-items: baseline; gap: .75rem; width: min(100%, 310px); padding: .6rem 1.1rem; border: 1.5px solid #dbe4da; border-radius: 15px; background: #fbfcfa; }
.hours-input:focus-within { border-color: #39745d; box-shadow: 0 0 0 3px rgb(57 116 93 / 10%); }
.hours-input input { width: 100%; border: 0; outline: 0; background: transparent; color: #214e40; font-family: "Fraunces", Georgia, serif; font-size: 2.4rem; }
.hours-input span { color: #7b877f; }
.error { min-height: 1.2em; margin: .55rem 0 0; color: #a44336; font-size: .84rem; }
.actions { display: flex; justify-content: flex-end; gap: .75rem; margin-top: 2rem; }
.button { padding: .85rem 1.25rem; border: 0; border-radius: 10px; background: #28664f; color: white; font-weight: 600; cursor: pointer; }
.button:hover { background: #1e543f; }
.button:disabled { background: #bbc9c1; cursor: not-allowed; }
.button-secondary { border: 1px solid #dce5de; background: transparent; color: #496158; }
.button-secondary:hover { background: #f2f6f2; }
.result { padding: 1rem 1rem .25rem; text-align: center; }
.result-icon { display: grid; width: 64px; height: 64px; margin: 0 auto 1rem; place-items: center; border-radius: 50%; background: #e5f1e5; color: #28664f; font-size: 2rem; }
.result h2 { margin: 0; color: #214e40; font-family: "Fraunces", Georgia, serif; font-size: clamp(2rem, 6vw, 3.25rem); }
.result p:not(.result-kicker) { max-width: 500px; margin: 1rem auto; color: #617068; line-height: 1.6; }
.text-button { margin-top: .5rem; padding: .4rem; border: 0; border-bottom: 1px solid; background: none; color: #28664f; cursor: pointer; font-weight: 600; }
.note { margin: 1.3rem auto 0; color: #829087; font-size: .78rem; text-align: center; }
.note span { color: #c97951; }

@media (max-width: 600px) {
  main { padding: 1.25rem .9rem 2rem; }
  .intro { margin: 2.5rem auto 1.75rem; }
  .question-panel { padding: 1.4rem; border-radius: 18px; }
  .choice-grid { grid-template-columns: 1fr; }
  .choice { min-height: 88px; }
  .actions .button { flex: 1; }
}