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

:root { color-scheme:dark; --forest:#2a3622; --forest-deep:#1d2818; --lime:#a4c326; --cream:#fefadf; --gold:#dca15d; --line:rgba(254,250,223,.2); --muted:#e3e3cf; --danger:#ffb49f; }
* { box-sizing:border-box; }
html,body { min-height:100%; margin:0; background:var(--forest-deep); }
body { font-family:"Quicksand",system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--cream); background:radial-gradient(circle at 72% 26%,#3d4a31 0,transparent 36%),linear-gradient(145deg,var(--forest),var(--forest-deep)); }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
button:focus-visible,input:focus-visible,textarea:focus-visible { outline:3px solid color-mix(in srgb,var(--lime) 55%,transparent); outline-offset:3px; }
.page { min-height:100vh; width:min(100% - 36px,520px); margin:0 auto; padding:20px 0 12px; display:flex; flex-direction:column; }
.page--cover { position:relative; justify-content:center; padding-top:28px; padding-bottom:28px; }
.page--cover>.brand { height:auto; flex:0 0 auto; margin:0 0 24px; }
.page--cover>.brand img { width:116px; height:116px; }
.page--cover>.cover-grid { flex:0 0 auto; padding-bottom:0; }
.page--cover>footer { position:absolute; right:0; bottom:12px; left:0; }
.brand { height:64px; display:flex; align-items:center; justify-content:center; color:var(--cream); margin-bottom:14px; }
.brand img { width:82px; height:82px; object-fit:contain; }
.progress { width:100%; height:4px; margin:0 0 28px; overflow:hidden; border-radius:4px; background:rgba(245,240,228,.2); }
.progress span { display:block; height:100%; border-radius:inherit; background:var(--lime); transition:width .25s ease; }
.cover-grid,.card,.question-card { flex:1; min-height:0; display:flex; flex-direction:column; justify-content:center; width:100%; padding-bottom:58px; }
.cover-copy { width:100%; text-align:center; }
.art { display:none; }
.eyebrow,.step { margin:0 0 8px; color:var(--lime); font-size:11px; line-height:1.3; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
h1 { margin:0 0 8px; color:var(--cream); font-family:"IvyMode","Iowan Old Style","Palatino Linotype",Georgia,serif; font-size:25px; line-height:1.15; font-weight:400; letter-spacing:-.02em; }
.cover-copy h1 { font-size:clamp(28px,7vw,38px); line-height:1.05; margin-bottom:14px; }
.lede,.card p,.question-card>p:not(.step):not(.error) { margin:0; color:var(--muted); font-size:15px; line-height:1.55; }
.cover-copy .lede { max-width:460px; margin:0 auto; }
.portraits { display:flex; justify-content:center; gap:10px; margin:0 0 22px; }
.portrait { width:72px; aspect-ratio:1; display:grid; place-items:center; overflow:hidden; border:2px solid rgba(245,240,228,.68); border-radius:24px; background:rgba(245,240,228,.08); box-shadow:0 0 0 1px rgba(245,240,228,.16); }
.portrait span { max-width:58px; color:var(--muted); font-size:9px; line-height:1.25; text-align:center; }
.notice { margin:18px 0 0!important; padding:12px 14px; border:1px solid rgba(254,250,223,.14); border-radius:12px; background:rgba(29,40,24,.5); color:var(--muted); font-size:11px; line-height:1.45; text-align:left; }
.primary,.secondary,.back,.choice { border:0; font-weight:700; transition:transform .15s ease,box-shadow .15s ease,background .15s ease; }
.primary:hover,.secondary:hover,.back:hover,.choice:hover { transform:translateY(-1px); }
.primary { width:100%; min-height:52px; margin-top:22px; padding:0 18px; border-radius:999px; background:var(--lime); color:var(--forest-deep); box-shadow:0 8px 24px -10px rgba(164,195,38,.72); }
.primary span { float:right; }
.primary:disabled { opacity:.52; cursor:not-allowed; transform:none; }
.secondary { min-height:48px; margin-top:20px; padding:0 20px; border:1px solid rgba(245,240,228,.36); border-radius:999px; background:transparent; color:var(--cream); }
.field { display:block; margin-top:18px; }
.field input,.field textarea { width:100%; padding:14px; border:1px solid rgba(245,240,228,.3); border-radius:12px; background:rgba(245,240,228,.07); color:var(--cream); font-size:16px; line-height:1.3; box-shadow:0 0 0 3px rgba(245,240,228,.04); resize:vertical; }
.field input { height:50px; }
.field textarea { min-height:118px; }
.field input::placeholder,.field textarea::placeholder { color:#aeb9b0; }
.choices { display:grid; gap:9px; margin-top:18px; }
.choice { min-height:48px; padding:11px 15px; border:1px solid var(--line); border-radius:12px; background:rgba(245,240,228,.06); color:var(--cream); text-align:left; box-shadow:0 3px 10px rgba(0,0,0,.08); }
.choice.selected { border-color:var(--lime); background:rgba(164,195,38,.15); box-shadow:0 0 0 3px rgba(164,195,38,.14); }
.consent { display:flex; gap:12px; align-items:flex-start; margin-top:18px; padding:15px; border:1px solid var(--line); border-radius:12px; background:rgba(245,240,228,.06); color:var(--muted); font-size:13px; line-height:1.5; }
.consent input { width:20px; height:20px; flex:0 0 auto; accent-color:var(--lime); }
.actions { display:flex; align-items:center; gap:10px; margin-top:22px; }
.actions .primary { flex:1; width:auto; margin:0; }
.back { width:64px; height:52px; flex:0 0 64px; border-radius:999px; background:var(--lime); color:var(--forest-deep); font-size:21px; box-shadow:0 8px 24px -10px rgba(164,195,38,.72); }
.error { margin:12px 0 0; color:var(--danger); font-size:13px; }
footer { padding-top:10px; color:rgba(245,240,228,.42); font-size:9px; line-height:1.3; text-align:center; letter-spacing:.04em; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:560px) { .page{width:min(100% - 28px,480px);padding-top:14px}.brand{margin-bottom:10px}.page--cover{padding-top:24px;padding-bottom:34px}.page--cover>.brand{margin-bottom:20px}.page--cover>.cover-grid{padding-bottom:0}.progress{margin-bottom:20px}.cover-grid,.card,.question-card{padding-bottom:32px}.cover-copy h1{font-size:31px}.notice{font-size:10px} }
@media (max-height:680px) and (min-width:561px) { .page{padding-top:12px}.brand{margin-bottom:8px}.page--cover{padding-top:18px;padding-bottom:26px}.page--cover>.brand{margin-bottom:12px}.page--cover>.cover-grid{padding-bottom:0}.progress{margin-bottom:14px}.cover-grid,.card,.question-card{padding-bottom:18px}.portraits{margin-bottom:14px}.cover-copy h1{font-size:30px}.notice{margin-top:10px!important}.primary{margin-top:12px} }
@media (prefers-reduced-motion:reduce) { * { transition:none!important; } }