@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wdth,wght@12..96,75..100,400..800&family=Manrope:wght@400;500;600;700&display=swap');

:root{--paper-0:#11110f;--paper-1:#f0eee8;--paper-2:#e3e0d8;--accent:#d7ff3f;--accent-dim:#9fbf25;--accent-glow:rgba(215,255,63,.14);--text-1:#11110f;--text-2:#4f504b;--text-3:#777872;--ff-d:'Bricolage Grotesque',Arial,sans-serif;--ff-b:'Manrope',Arial,sans-serif;--radius:0}
html{scroll-behavior:smooth}
body{background:#11110f;color:#f0eee8;font-family:var(--ff-b);font-size:1rem}
body::before{opacity:.62;background:radial-gradient(ellipse 42% 36% at 18% 58%,rgba(215,255,63,.1),transparent 72%),radial-gradient(ellipse 34% 26% at 85% 18%,rgba(125,136,255,.07),transparent 74%);animation:diag-atmosphere 13s ease-in-out infinite alternate}
@keyframes diag-atmosphere{from{transform:translate3d(-1%,-1%,0) scale(1)}to{transform:translate3d(2%,1.5%,0) scale(1.06)}}

.nav{position:fixed;inset:0 0 auto;z-index:100;height:84px;max-width:1440px;margin:auto;padding:0 clamp(1.25rem,4vw,3.5rem);background:linear-gradient(180deg,rgba(17,17,15,.9),transparent);border:0;backdrop-filter:none}
.nav-logo img{display:none}.nav-logo{color:#f0eee8;text-decoration:none}
.pp-brand{display:inline-grid;font-family:var(--ff-d);font-size:1.32rem;font-weight:760;letter-spacing:-.105em;line-height:.76;text-align:left}.pp-brand-copy{display:grid;gap:.08em}.pp-brand-line{display:block;white-space:nowrap}.pp-brand-line--lower{padding-left:.71em}.pp-brand-orb{display:inline-grid;place-items:center;width:.74em;height:.74em;margin:0 .015em;border-radius:50%;background:var(--accent);vertical-align:.02em}.pp-brand-orb::before{content:'↗';font-family:Arial,sans-serif;font-size:.44em;font-weight:900;color:#11110f}
.nav-back{color:rgba(240,238,232,.62);font-size:.68rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}.nav-back:hover{color:#f0eee8}

.page{position:relative;z-index:1;display:grid;grid-template-columns:minmax(280px,.82fr) minmax(480px,1fr);align-items:start;column-gap:clamp(3rem,9vw,9rem);row-gap:1.2rem;width:100%;max-width:1440px;min-height:100svh;margin:auto;padding:clamp(8.5rem,14vh,11rem) clamp(1.25rem,4vw,3.5rem) 6rem}
.diag-intro{grid-column:1;grid-row:1/5;position:sticky;top:130px;align-self:start}
.diag-intro .eyebrow{display:flex;align-items:center;gap:.65rem;margin-bottom:1.4rem;color:#f0eee8;font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.diag-intro .eyebrow::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px rgba(215,255,63,.12)}
.diag-intro h2{max-width:8ch;font-family:var(--ff-d);font-size:clamp(3.8rem,7.1vw,7.8rem);font-weight:620;line-height:.8;letter-spacing:-.09em;text-wrap:balance}.diag-intro h2 em{display:block;color:var(--accent);font-style:normal}
.diag-intro>p:last-child{max-width:34ch;margin-top:2rem;color:rgba(240,238,232,.64);font-size:.95rem;line-height:1.72}
.diag-intro::after{content:'05';display:block;margin-top:clamp(2.5rem,8vh,6rem);color:transparent;font-family:var(--ff-d);font-size:clamp(6rem,13vw,13rem);font-weight:800;letter-spacing:-.11em;line-height:.62;-webkit-text-stroke:1px rgba(240,238,232,.16)}
.diag-kicker{grid-column:2;width:100%;max-width:none;margin:0 0 1.1rem;text-align:left;color:#f0eee8;font-family:var(--ff-b);font-size:.66rem;font-weight:800;letter-spacing:.12em}
.progress-wrap{grid-column:2;width:100%;max-width:none;margin-bottom:1.2rem}.progress-meta{color:rgba(240,238,232,.52);font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.progress-track{height:2px;border-radius:0;background:rgba(240,238,232,.15)}.progress-fill{border-radius:0;background:var(--accent)}

.card{grid-column:2;width:100%;max-width:none;min-height:600px;padding:clamp(1.7rem,4vw,3.7rem);background:#f0eee8;color:#11110f;border:0;border-radius:0;box-shadow:0 30px 90px rgba(0,0,0,.28)}
.step-label{margin-bottom:1rem;color:#65665f;font-family:var(--ff-b);font-size:.66rem;font-weight:800;letter-spacing:.13em}
.question-h{max-width:12ch;margin-bottom:.8rem;font-family:var(--ff-d);font-size:clamp(2.5rem,4.4vw,5rem);font-weight:620;line-height:.86;letter-spacing:-.075em;text-wrap:balance}
.question-sub{margin-bottom:2rem;color:#6a6b65;font-size:.84rem}
.options,.options-grid{gap:0;grid-template-columns:1fr}
.option{align-items:center;min-height:62px;padding:1rem 0;background:transparent;border:0;border-bottom:1px solid rgba(17,17,15,.18);border-radius:0;transition:padding .25s,background .25s}
.option:first-child{border-top:1px solid rgba(17,17,15,.18)}.option:hover{padding-left:.8rem;border-color:rgba(17,17,15,.18);background:rgba(215,255,63,.28)}.option.selected{padding-left:.8rem;border-color:rgba(17,17,15,.2);background:var(--accent)}
.option-check{width:18px;height:18px;border-color:rgba(17,17,15,.35);border-radius:50%}.option-multi .option-check{border-radius:0}.option.selected .option-check{border-color:#11110f;background:#11110f}.option-check::after{background:var(--accent)}.option-multi.selected .option-check::after{color:var(--accent)}
.option-text,.option.selected .option-text{color:#292a26;font-size:.9rem;font-weight:600}
.actions{align-items:center;margin-top:2.2rem}.btn-next,.btn-back{border-radius:0;font-family:var(--ff-b);font-size:.68rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}.btn-next{min-height:50px;background:#11110f;color:#f0eee8;box-shadow:none}.btn-next:hover{opacity:1;background:var(--accent);color:#11110f;box-shadow:none}.btn-next:disabled{background:#b9b7b0;color:#6c6c67;opacity:1}.btn-back{min-height:50px;color:#555650;border-color:rgba(17,17,15,.24)}.btn-back:hover{color:#11110f;border-color:#11110f}
.contact-form{gap:1.2rem}.field label{color:#62635d;font-size:.67rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}.field input{padding:1rem 0;background:transparent;border:0;border-bottom:1px solid rgba(17,17,15,.35);border-radius:0;color:#11110f;font-family:var(--ff-b)}.field input::placeholder{color:#85857f}.field input:focus{border-color:#11110f}

.result-header{text-align:left}.result-name{color:#666760}.result-h{max-width:13ch;font-family:var(--ff-d);font-size:clamp(2.8rem,5vw,5.5rem);font-weight:620;line-height:.84;letter-spacing:-.075em}.score-wrap{justify-content:flex-start}.score-circle{width:96px;height:96px;border-radius:0;border:0;background:#11110f}.score-num{color:var(--accent);font-family:var(--ff-d);font-size:2.6rem}.score-denom{color:rgba(240,238,232,.55)}.score-label{color:#11110f;font-family:var(--ff-d);font-size:1.8rem;font-weight:650;letter-spacing:-.04em}.result-sub{color:#666760}
.gaps-title,.plan-rec-label{color:#65665f;font-family:var(--ff-b);font-size:.66rem}.gap-list{gap:0;border-top:1px solid rgba(17,17,15,.2)}.gap-item{padding:1.1rem 0;background:transparent;border:0;border-bottom:1px solid rgba(17,17,15,.2);border-radius:0}.gap-title{font-family:var(--ff-d);font-size:1.25rem;font-weight:650}.gap-desc{color:#555650}.plan-rec{margin:2.2rem 0;padding:1.7rem;background:#11110f;border:0;border-radius:0}.plan-rec-label{color:rgba(240,238,232,.55)}.plan-rec-name{color:var(--accent);font-family:var(--ff-d);font-size:2rem;font-weight:650;letter-spacing:-.05em}.plan-rec-desc{color:rgba(240,238,232,.68);line-height:1.65}.wa-btn{border-radius:0;background:var(--accent);color:#11110f;font-family:var(--ff-b);font-size:.72rem;font-weight:800;letter-spacing:.09em;box-shadow:none}.wa-btn:hover{opacity:1;box-shadow:none;background:#11110f;color:#f0eee8}.result-note{color:#686963}.result-note a{color:#686963}

@media(max-width:900px){.page{grid-template-columns:1fr;gap:1.2rem;padding-top:7.5rem}.diag-intro{grid-column:1;grid-row:auto;position:static;margin-bottom:3rem}.diag-intro h2{font-size:clamp(4rem,14vw,7rem)}.diag-intro::after{position:absolute;right:1rem;top:4rem;z-index:-1;margin:0;font-size:38vw;opacity:.5}.diag-kicker,.progress-wrap,.card{grid-column:1}.card{min-height:0}}
@media(max-width:520px){.nav{height:68px}.nav-back{font-size:.61rem}.page{padding-top:6.5rem;padding-bottom:3rem}.diag-intro{margin-bottom:2rem}.diag-intro h2{font-size:clamp(3.7rem,16vw,5.5rem)}.question-h{font-size:clamp(2.5rem,11vw,4rem)}.card{padding:1.5rem 1.25rem}.actions{flex-direction:column-reverse}.btn-next,.btn-back{width:100%}.score-wrap{align-items:flex-start}.score-circle{width:84px;height:84px}}
@media(prefers-reduced-motion:reduce){body::before{animation:none}.step{animation:none}}
