:root { --ink:#123047; --gold:#b68748; --paper:#fbf7f0; --peach:#deb1a0; --line:#d9c1ab; --sans:'DM Sans',sans-serif; --serif:'Cormorant Garamond',Georgia,serif; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); } button,input { font:inherit; } button { cursor:pointer; }
.quiz-shell { min-height:100vh; padding:clamp(28px,7vw,90px) 20px; overflow:hidden; position:relative; background:radial-gradient(circle at 50% 0,#fffdf9 0,transparent 42%),linear-gradient(115deg,#f8f0e6,#fffdf9 45%,#f5ebe4); }
.quiz-shell:after { content:''; position:absolute; inset:0; opacity:.22; pointer-events:none; background-image:radial-gradient(#96775b .55px,transparent .7px); background-size:6px 6px; mix-blend-mode:multiply; }
.quiz-content { position:relative; z-index:1; max-width:840px; margin:auto; text-align:center; }.texture { position:absolute; width:34vw; height:75vh; opacity:.5; background:radial-gradient(ellipse at 30% 70%,var(--peach),transparent 50%),linear-gradient(145deg,transparent 46%,#e8d9c7 47%,transparent 57%); }.texture-left{left:-8vw;bottom:0}.texture-right{right:-10vw;top:12vh;transform:rotate(180deg)}
h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-family:var(--serif); font-weight:500; } h1 { font-size:clamp(3.4rem,7vw,5.7rem); line-height:.88; letter-spacing:-.045em; margin:.2em 0 .3em; } h1 em,h2 em { font-weight:400; } h2 { font-size:clamp(2rem,4vw,3rem); line-height:1.02; margin:.6em auto; max-width:610px; } h3 { font-size:1.75rem; font-style:italic; font-weight:400; margin:.2em 0 1em; }.lede,.intro>p:not(.eyebrow):not(.gentle),.optin>p,.result>p { font-size:1.05rem; line-height:1.7; max-width:640px; margin-left:auto; margin-right:auto; }
.eyebrow { color:var(--gold); letter-spacing:.28em; text-transform:uppercase; font-size:.74rem; font-weight:600; }.sprig { color:var(--gold); font-size:1.35em; margin-left:.3em; }.ornament { color:var(--gold); letter-spacing:.35em; font-size:1.1rem; margin:18px 0; }.intro { padding:10vh 0 6vh; }.gentle { margin-top:56px; line-height:1.65; }.gentle em { font-family:var(--serif); font-size:1.3rem; }
.card { background:rgba(255,253,249,.93); border:1px solid #e4d4c5; box-shadow:0 18px 45px rgba(58,37,25,.13); border-radius:18px; padding:clamp(30px,6vw,68px); text-align:center; }.counter { margin-bottom:15px; }.progress { display:flex; align-items:center; justify-content:center; gap:5px; margin:0 auto 28px; }.progress i { display:block; width:18px; height:1px; background:var(--line); }.dot { display:grid; place-items:center; border:1px solid #d8d0c7; height:32px; width:32px; border-radius:50%; color:#6f7371; font-size:.82rem; }.dot.done,.dot.active { border-color:var(--gold); }.dot.active { background:var(--gold); color:white; font-weight:600; }
.answers { display:grid; gap:10px; margin:28px auto; max-width:610px; text-align:left; }.answer { border:1px solid var(--line); background:white; color:var(--ink); border-radius:6px; padding:17px 20px; text-align:left; line-height:1.4; transition:.18s; }.answer:hover,.answer.selected { background:#fff9f1; border-color:var(--gold); transform:translateY(-1px); }.answer b { color:var(--gold); display:inline-block; min-width:28px; font-family:var(--serif); font-size:1.22rem; }.actions { display:flex; justify-content:space-between; gap:18px; align-items:center; }.back,.link-button { border:0; background:transparent; color:var(--ink); padding:10px; }.back:disabled { opacity:.2; cursor:not-allowed; }.button { border:0; color:#fff; background:linear-gradient(110deg,#102d43,#16445e); padding:17px 30px; min-height:58px; letter-spacing:.18em; text-transform:uppercase; font-size:.78rem; font-weight:600; border-radius:5px; box-shadow:0 5px 12px rgba(13,42,62,.16); }.button:hover { filter:brightness(1.1); }.button:disabled { opacity:.55; cursor:not-allowed; }.actions .button { min-width:190px; }
.optin { max-width:690px; margin:auto; }.optin h1 { font-size:clamp(3rem,6vw,4.7rem); }.optin form { margin:30px auto 0; max-width:440px; text-align:left; }.optin label:not(.consent) { display:block; color:#6b6f73; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; margin:14px 0; }.optin input:not([type=checkbox]) { display:block; width:100%; margin-top:6px; padding:16px; border:1px solid var(--line); border-radius:5px; color:var(--ink); background:white; }.optin .button { width:100%; margin-top:18px; }.consent { display:flex; gap:9px; align-items:flex-start; font-size:.78rem; line-height:1.5; margin-top:18px; color:#56636b; }.consent a { color:var(--ink); }.form-note { text-align:center; color:#61707b; font-size:.8rem; margin:18px 0 0; }.error { color:#9b3737; font-size:.85rem; text-align:center; }
.result { max-width:700px; margin:auto; }.result>p { text-align:left; }.what-helps { margin:32px 0; padding:24px; background:#f5ece4; text-align:left; border-left:3px solid var(--gold); }.what-helps h2 { font-size:2rem; margin:0 0 8px; }.what-helps p { line-height:1.6; margin:0; }.universal { border-top:1px solid var(--line); padding-top:28px; }.inbox { background:var(--ink); color:white; padding:22px; border-radius:5px; line-height:1.5; margin:34px 0 14px; }.link-button { text-decoration:underline; font-size:.85rem; }
@media(max-width:600px){ .quiz-shell{padding:28px 14px}.card{padding:28px 20px}.progress{gap:3px}.progress i{width:5px}.dot{width:25px;height:25px;font-size:.68rem}.actions{flex-wrap:wrap}.actions .button{width:100%;order:-1}.answer{padding:14px}.intro{padding:6vh 0}.texture{width:60vw;opacity:.35} }