* { box-sizing: border-box; }
body { margin: 0; background: #f8f6ef; color: #252321; font: 1rem/1.5 system-ui, sans-serif; }
main { max-width: 52rem; margin: auto; padding: clamp(1.25rem, 5vw, 4rem); }
.eyebrow { font-size: .8rem; font-weight: 750; letter-spacing: .14em; }
h1 { font-size: clamp(2.4rem, 7vw, 4.4rem); line-height: 1; letter-spacing: -.06em; margin: .35em 0; }
fieldset { border: 0; padding: 0; margin: 2rem 0 1rem; }
legend { font-weight: 750; margin-bottom: .6rem; }
#choices, .details { display: grid; grid-template-columns: repeat(2, 1fr); gap: .65rem; }
.slot { display: flex; align-items: flex-start; gap: .5rem; padding: .85rem; border: 1px solid #888379; border-radius: .5rem; background: white; }
.slot:has(:checked) { background: #e4ebff; border-color: #2843a6; }
.slot:has(:disabled) { background: #ebe8e0; }
small { display: block; }
.details input { display: block; width: 100%; padding: .65rem; border: 1px solid #888379; border-radius: .35rem; font: inherit; }
button { margin-top: 1rem; padding: .75rem 1.2rem; background: #233681; color: white; border: 0; border-radius: .4rem; font: inherit; font-weight: 700; cursor: pointer; }
button:disabled { opacity: .55; cursor: default; }
footer { margin-top: 2rem; border-top: 1px solid #bbb5aa; padding-top: 1rem; font-size: .9rem; }
a { color: #233681; }
@media (max-width: 35rem) { #choices, .details { grid-template-columns: 1fr; } }