:root {
  --ink: #312729;
  --muted: #6f6263;
  --plum: #6f3f50;
  --rose: #b77b83;
  --gold: #b68b4d;
  --cream: #fbf7f2;
  --paper: rgba(255,255,255,.92);
  --line: #eaded8;
  --shadow: 0 24px 70px rgba(74, 47, 54, .14);
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; color: var(--ink); background:
    radial-gradient(circle at 8% 8%, rgba(183,123,131,.18), transparent 34%),
    radial-gradient(circle at 92% 88%, rgba(182,139,77,.14), transparent 33%), var(--cream);
  font-family: "DM Sans", system-ui, sans-serif;
}
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.35; background-image:linear-gradient(rgba(111,63,80,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(111,63,80,.025) 1px,transparent 1px); background-size:24px 24px; }
button, input { font: inherit; }
button { cursor: pointer; }
.shell { width: min(100% - 28px, 760px); margin: 0 auto; padding: 24px 0 30px; position: relative; }
.brand { display:flex; justify-content:center; align-items:center; gap:11px; margin: 2px 0 20px; letter-spacing:.14em; font-size:.73rem; }
.brand-mark { width:40px; height:40px; border:1px solid var(--gold); border-radius:50%; display:grid; place-items:center; font-family:"Playfair Display",serif; color:var(--plum); letter-spacing:0; }
.brand small { display:block; margin-top:3px; color:var(--muted); letter-spacing:.08em; font-size:.56rem; }
.quiz-card { min-height: 570px; padding: 28px 22px; border:1px solid rgba(255,255,255,.9); border-radius:28px; background:var(--paper); box-shadow:var(--shadow); backdrop-filter: blur(10px); display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
.eyebrow { margin:0 0 12px; color:var(--gold); font-size:.75rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
h1,h2 { font-family:"Playfair Display", Georgia, serif; color:var(--plum); line-height:1.06; margin:0; }
h1 { font-size:clamp(2.35rem, 10vw, 4.3rem); }
h2 { font-size:clamp(1.8rem, 7vw, 3rem); }
.lede { margin:20px 0 26px; color:var(--muted); font-size:1.04rem; line-height:1.68; }
.journey { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; margin:0 0 25px; }
.journey span { padding:10px 12px; border-radius:999px; background:#f7eeeb; color:var(--plum); text-align:center; font-size:.82rem; }
.btn { min-height:52px; border:0; border-radius:999px; padding:13px 22px; font-weight:700; transition:transform .18s, box-shadow .18s, background .18s; }
.btn:hover { transform:translateY(-1px); }
.btn:focus-visible,.option:focus-visible,input:focus-visible { outline:3px solid rgba(182,139,77,.45); outline-offset:3px; }
.primary { color:#fff; background:var(--plum); box-shadow:0 10px 25px rgba(111,63,80,.23); }
.secondary { color:var(--plum); background:#f4ebe8; }
.ghost { color:var(--muted); background:transparent; }
.progress-row { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:28px; color:var(--muted); font-size:.78rem; font-weight:600; }
.track { height:6px; flex:1; border-radius:99px; background:#eee3df; overflow:hidden; }
.fill { height:100%; width:0; background:linear-gradient(90deg,var(--rose),var(--gold)); border-radius:inherit; transition:width .35s ease; }
.question { max-width:640px; }
.question h2 { font-size:clamp(1.6rem,6vw,2.25rem); line-height:1.2; }
.options { display:grid; gap:11px; margin:25px 0 28px; }
.option { width:100%; text-align:left; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:16px; min-height:56px; padding:15px 16px; line-height:1.42; transition:.18s; }
.option:hover { border-color:#d6b8b9; background:#fffafa; }
.option.selected { border-color:var(--plum); background:#f8eeee; box-shadow:inset 0 0 0 1px var(--plum); }
.nav { display:flex; gap:10px; justify-content:space-between; margin-top:auto; }
.nav .btn { min-width:112px; }
.nav .btn:disabled { opacity:.42; cursor:not-allowed; transform:none; box-shadow:none; }
.field { margin:16px 0; }
.field label { display:block; margin-bottom:7px; font-weight:700; font-size:.9rem; }
.field input { width:100%; min-height:53px; border:1px solid var(--line); border-radius:14px; background:#fff; padding:12px 14px; color:var(--ink); }
.privacy { color:var(--muted); font-size:.78rem; line-height:1.5; margin:13px 0 22px; }
.error { color:#963e4b; min-height:1.2em; font-size:.82rem; }
.result-top { text-align:center; padding-bottom:20px; border-bottom:1px solid var(--line); }
.result-kicker { color:var(--gold); font-weight:700; letter-spacing:.12em; font-size:.72rem; text-transform:uppercase; }
.result-top h1 { font-size:clamp(2.1rem,9vw,3.7rem); margin:8px 0 12px; }
.result-top .essence { font-family:"Playfair Display",serif; font-size:1.18rem; font-style:italic; color:var(--plum); }
.result-body { padding-top:22px; }
.result-body p { color:var(--muted); line-height:1.68; }
.result-grid { display:grid; gap:12px; margin:20px 0; }
.insight { padding:17px; background:#faf4f0; border-radius:16px; border-left:3px solid var(--gold); }
.insight strong { color:var(--plum); display:block; margin-bottom:6px; }
.secondary-result { padding:18px; border:1px solid var(--line); border-radius:18px; margin:20px 0; }
.scripture { font-family:"Playfair Display",serif; font-style:italic; color:var(--plum)!important; font-size:1.08rem; }
.result-actions { display:grid; gap:10px; margin-top:24px; }
.page-note { text-align:center; color:var(--muted); font-size:.72rem; line-height:1.5; margin:16px auto 0; max-width:590px; }
.fade { animation:fade .34s ease both; }
@keyframes fade { from { opacity:0; transform:translateY(8px); } }
@media (min-width:700px) { .shell{padding-top:38px}.quiz-card{padding:44px 48px;min-height:620px}.journey{grid-template-columns:repeat(4,1fr)}.result-grid{grid-template-columns:1fr 1fr}.result-actions{grid-template-columns:1fr auto}.brand{margin-bottom:26px} }
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}