:root{
  --ink:#0b0b0b; --muted:#6b7280; --bone:#f7f7f5; --white:#fff;
  --accent:#000; --accent-2:#111;
  --max:76rem; --g1:8px; --g2:12px; --g3:16px; --g4:24px; --g5:32px; --g6:48px; --g7:72px;
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; color:var(--ink); background:var(--white)}
h1,h2{font-family:"Cormorant Garamond", Georgia, serif; letter-spacing:.15px}
h1{font-size:clamp(38px,5vw,64px); line-height:1.08; margin:0}
h2{font-size:clamp(28px,3.4vw,44px); line-height:1.1; margin:0 0 var(--g3)}
p{margin:0} .micro{font-size:.95rem} .muted{color:var(--muted)}
/* critical: always visible brand logo */
.brand-logo{position:fixed; top:18px; left:18px; width:170px; height:auto; z-index:40; pointer-events:none}
@media(max-width:640px){.brand-logo{width:130px; top:12px; left:12px}}
/* fade */
.fade-container{opacity:0; transition:opacity .32s ease} .fade-in{opacity:1}
/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.95rem 1.7rem; border-radius:999px; border:1px solid var(--accent);
  background:var(--accent); color:#fff; font-weight:600; cursor:pointer; text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease}
.btn:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.16); background:var(--accent-2)}
.btn[disabled]{opacity:.55; cursor:not-allowed; transform:none; box-shadow:none}
.btn.outline{background:transparent; color:var(--ink)}
.link{background:none; border:none; color:var(--muted); text-decoration:underline; cursor:pointer; padding:0}
/* hero */
.hero{position:relative; min-height:100vh; display:grid; place-items:center; overflow:hidden; text-align:center}
.hero video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:blur(8px) brightness(.52) saturate(.9); transform:scale(1.05)}
.hero .veil{position:absolute; inset:0; background:radial-gradient(ellipse at center, rgba(0,0,0,.42) 20%, rgba(0,0,0,.72) 100%)}
.hero .content{position:relative; color:#fff; max-width:760px; padding:0 var(--g4)}
.hero .lede{color:#e5e7eb; margin:var(--g3) auto var(--g5); max-width:52ch}
/* split */
.split{display:grid; min-height:100vh; grid-template-columns:1fr}
@media(min-width:980px){.split{grid-template-columns:1fr 1fr}}
.image-side{position:relative; min-height:42vh}
.image-side img,.image-side video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.form-side{display:flex; align-items:center; justify-content:center; background:var(--bone)}
.form-wrap{width:100%; max-width:560px; padding:var(--g6) var(--g4); text-align:center}
/* form */
.fields{margin-top:6px}
.fields input,.fields select{width:min(420px,92%); margin:.5rem 0; padding:1rem 1.2rem; border:1px solid #d1d5db; border-radius:999px; background:#fff; outline:none}
/* quiz */
.progress{position:relative; width:min(560px,92%); height:6px; background:#eee; border-radius:999px; overflow:hidden; margin:0 auto var(--g4)}
.progress .bar{height:100%; width:0; background:#000; transition:width .3s}
.progress .step{position:absolute; top:calc(100% + 8px); left:0; font-size:.92rem; color:var(--muted)}
.option-row{display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap}
.pill{padding:.6rem 1.1rem; border-radius:999px; background:#fff; border:1px solid #111; cursor:pointer; user-select:none}
.pill.selected{background:#111; color:#fff}
.actions{display:flex; gap:var(--g3); justify-content:center; align-items:center; margin-top:var(--g4)}
/* tags & trust */
.tags{display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; margin:var(--g4) 0}
.tags span{background:#f2f2f2; padding:.55rem 1rem; border-radius:999px}
.trust-icons{display:flex; gap:1rem; justify-content:center; color:var(--muted); margin-top:var(--g4)}
.tic{display:flex; align-items:center; gap:.5rem}
.page-nav{margin-top:var(--g4)}