@import url('https://fonts.googleapis.com/css2?family=Elms+Sans:wght@100..900&display=swap');

:root { --ink:#030303; --paper:#fdfdfc; --edge:clamp(2rem, 13.1vw, 12.6rem); --font:'Elms Sans', Arial, sans-serif; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; background:var(--paper); color:var(--ink); font-family:var(--font); }
button, input { font:inherit; }
.diagnostic { position:margin-right; overflow:hidden; width:100%; max-width:1080px; min-height:100vh; margin:12px auto0 94px; padding-top:clamp(6.5rem, 9.6vw, 10rem); background:var(--paper); }
.site-header { position:fixed; inset:0 0 auto; z-index:20; display:flex; align-items:center; justify-content:space-between; padding:clamp(1.25rem, 2.2vw, 2rem) clamp(1.25rem, 4.2vw, 5rem); background:rgba(255,255,255,.9); color:var(--ink); backdrop-filter:blur(8px); }
.brand-icon { display:block; width:clamp(4rem, 5.8vw, 6.75rem); aspect-ratio:1.6; color:inherit; }.brand-icon img { display:block; width:100%; height:100%; object-fit:contain; }
.site-nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:clamp(.8rem, 2vw, 2rem); font-size:clamp(.62rem, .9vw, .82rem); font-weight:600; }.site-nav a { color:inherit; letter-spacing:.03em; text-decoration:none; text-transform:uppercase; }
.progress { position:absolute; z-index:2; top:11.7rem; right:7.25%; display:none; align-items:center; gap:.9rem; width:16rem; color:var(--ink); font-size:.62rem; letter-spacing:.13em; text-transform:uppercase; }.progress.show { display:flex; }.progress i { display:block; flex:1; height:6px; background:#ddd; }.progress i b { display:block; width:0; height:100%; background:#000; transition:width .25s ease; }.progress.complete { width:16rem; }.progress.complete .progress-label,.progress.complete .progress-count { display:none; }.progress.complete i { flex:1; }
.logo { position:relative; width:5.4rem; height:3.15rem; display:block; color:#090909; }
.logo span,.logo i { position:absolute; width:3.6rem; height:1.35rem; border:8px solid currentColor; border-radius:2rem; transform:skewX(23deg); }
.logo span { top:.22rem; left:0; border-right:0; }.logo i { bottom:.22rem; right:0; border-left:0; }
nav:not(.site-nav) { display:flex; gap:3.15rem; } nav:not(.site-nav) a, .eyebrow, .lead, .choice-list button, .result-copy, .scores, .recommendations, .upload-block p, footer p { letter-spacing:.13em; text-transform:uppercase; }
nav:not(.site-nav) a { color:var(--ink); font-size:.96rem; text-decoration:none; font-weight:500; }
.screen { display:none; min-height:calc(100vh - 11.25rem); padding:5.2rem var(--edge) 7rem; }.screen.active { display:block; }
.intro { min-height:calc(100vh - 11.25rem); display:block; }.intro:not(.active) { display:none; }.intro-content { padding-top:4rem; margin-left:20%; }.eyebrow { margin:0 0 clamp(7rem, 13vw, 14rem); font-size:1rem; font-weight:500; }
h1,h2,h3,p { margin-top:0; } h1,h2,h3,.primary { text-transform:uppercase; font-weight:800; letter-spacing:0em; line-height:1.18; }
h1 { max-width:48rem; margin-bottom:4.3rem; font-size:clamp(2.55rem, 5.2vw, 5rem); }.lead { max-width:38rem; margin-bottom:7rem; font-size:clamp(.85rem, 1.75vw, 1.55rem); line-height:1.65; font-weight:500; }
@media (min-width:701px) { .intro h1 { transform:translateY(-15%); } }
.button { display:inline-flex; min-height:8.8rem; padding:0 3.6rem; justify-content:center; align-items:center; gap:1.3rem; letter-spacing:.13em; text-transform:uppercase; font-size:1.02rem; text-decoration:none; font-weight:500; cursor:pointer; }.button-dark { color:white; background:var(--ink); border:0; }.button b,.text-button b,.underlined b { font-size:1.8em; font-weight:400; }
.question-content { max-width:49rem; margin-left:20%; }.question h2 { max-width:48rem; margin-bottom:clamp(5rem, 11vw, 10rem); font-size:clamp(2.5rem, 5.25vw, 5rem); }.question .eyebrow { margin-bottom:4.7rem; }.choice-list { padding-left:3rem; }.choice-list button { position:relative; display:block; margin:0 0 1.9rem; padding:0 0 0 3.75rem; border:0; background:none; color:#343031; font-size:clamp(.9rem, 1.7vw, 1.4rem); line-height:1.4; text-align:left; cursor:pointer; }.choice-list button::before { content:''; position:absolute; left:0; top:50%; width:2.5rem; height:2.5rem; transform:translateY(-50%); border-radius:50%; background:var(--ink); }.choice-list button:hover::before,.choice-list button.selected::before { box-shadow:inset 0 0 0 7px var(--ink), inset 0 0 0 9px white; }.compact { padding-top:5.2rem; }.compact .question-content { margin-left:20%; }.compact .eyebrow { margin-bottom:4.7rem; }.compact h2 { margin-top:0; margin-bottom:3.4rem; }
.results { padding-top:1rem; }.results-content,.recommendation-content { max-width:48rem; margin-left:20%; }.pill { display:inline-block; min-width:20rem; margin:0 0 .4rem; padding:1.1rem 2.6rem; color:white; background:var(--ink); letter-spacing:.14em; text-transform:uppercase; font-size:1rem; text-align:center; }.results h2 .recommendation h2 { letter-spacing 0em; margin:0 0 3rem; font-size:clamp(2.5rem, 5.25vw, 5rem); }.result-copy { max-width:46rem; line-height:1.18; }.rating { display:flex; align-items:baseline; gap:.55rem; margin:2rem 0; text-transform:uppercase; letter-spacing:.13em; }.rating b { font-size:2.3rem; }.rating span { font-size:.86rem; }.rating .out-of { margin-right:.55rem; letter-spacing:.04em; }.scores { margin:4rem 0 1.2rem; }.scores div { display:grid; grid-template-columns:1fr 1.7fr; gap:1.5rem; margin:1.35rem 0; font-size:clamp(.8rem, 1.35vw, 1.1rem); }.scores dt,.scores dd { margin:0; }.scores dd { display:flex; align-items:center; gap:1.7rem; }.scores b { min-width:3.5rem; }.scores i { display:block; flex:1; height:2px; background:#c7c7c7; }.scores i span { display:block; height:100%; background:var(--ink); width:var(--score,50%); }.primary { margin:1rem 0; font-size:clamp(2.1rem, 4.5vw, 4rem); }.primary span { white-space:nowrap; }.text-button,.underlined { padding:0; border:0; border-bottom:2px solid var(--ink); background:none; color:var(--ink); letter-spacing:.13em; text-transform:uppercase; cursor:pointer; }
.recommendation { padding-top:2.2rem; }.recommendation h2 { margin-top:4rem; }.recommendations { margin:5rem 0 4rem; font-size:1.05rem; }.recommendations p { margin-bottom:3rem; }.recommendations ol { margin:0; padding:0; list-style:none; counter-reset:items; }.recommendations li { counter-increment:items; }.recommendations li::before { content:'0' counter(items) ' '; }.button-outline { min-height:7rem; color:var(--ink); border:3px solid var(--ink); }.upload-block { margin-top:9rem; }.upload-block h3 { max-width:38rem; margin-bottom:3.5rem; font-size:clamp(2rem, 4vw, 3.5rem); }.upload-block p { max-width:44rem; font-size:1rem; line-height:1.45; }.drop-zone { display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; min-height:20rem; margin:3.3rem 0 4rem; border:3px dashed var(--ink); letter-spacing:.14em; text-transform:uppercase; font-size:1.05rem; cursor:pointer; }.drop-zone span { margin-top:1.1rem; }.drop-zone input { position:absolute; width:1px; height:1px; opacity:0; }.drop-zone.is-uploaded { border-style:solid; }.drop-zone.is-uploaded strong::before { content:'✓ '; }
footer { min-height:13.2rem; display:flex; align-items:center; gap:5rem; padding:0 7.5%; color:white; background:#0e0e0d; } footer p { margin:0; font-size:1rem; }.site-footer { display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-height:0; padding:38px clamp(22px, 9.7vw, 40px); background:var(--ink); color:var(--paper); font-size:12px; font-weight:500; line-height:1.35; letter-spacing:.02em; text-transform:uppercase; }.site-footer .brand-icon { width:clamp(4rem, 5.8vw, 6.75rem); aspect-ratio:1.6; height:auto; margin-bottom:20px; }.brand-icon--light img { filter:invert(1); }.back { display:none; position:fixed; left:1rem; bottom:1rem; width:3rem; height:3rem; border:0; border-radius:50%; background:var(--ink); color:white; cursor:pointer; }
@media (max-width:700px) { :root { --edge:2rem; }.diagnostic { max-width:700px; }.site-header { height:auto; padding:1.25rem 2rem; }.progress { top:10.7rem; right:2rem; width:11rem; font-size:.48rem; }.progress.complete { width:11rem; }.logo { transform:scale(.56); transform-origin:left center; } nav:not(.site-nav) { gap:1.05rem; } nav:not(.site-nav) a { font-size:.53rem; }.screen { min-height:calc(100vh - 6.3rem); padding:4.4rem var(--edge) 5rem; }.intro-content,.question-content,.compact .question-content,.results-content,.recommendation-content { margin-left:20%; }.intro-content { padding-top:0; }.eyebrow { margin-bottom:7rem; font-size:.72rem; }.intro h1 { margin-bottom:4rem; font-size:2.5rem; }.lead { margin-bottom:5rem; font-size:.78rem; }.button { min-height:5rem; padding:0 1.8rem; font-size:.75rem; }.question .eyebrow { margin-bottom:3.3rem; }.question h2 { margin-bottom:5.5rem; font-size:2.45rem; }.choice-list { padding-left:1.1rem; }.choice-list button { margin-bottom:1.35rem; padding-left:3rem; font-size:.79rem; }.choice-list button::before { width:2rem; height:2rem; }.compact { padding-top:4.4rem; }.compact .eyebrow { margin-bottom:3.3rem; }.compact h2 { margin-bottom:3rem; }.results { padding-top:1.4rem; }.pill { min-width:14rem; padding:1rem 1.5rem; font-size:.78rem; }.results h2,.recommendation h2 { font-size:2.35rem; }.results h2 { margin-bottom:2.6rem; }.result-copy { font-size:2.35rem; }.rating b { font-size:1.8rem; }.rating span { font-size:.68rem; }.scores { margin-top:3rem; }.scores div { grid-template-columns:1fr; gap:.55rem; margin:1rem 0; font-size:.74rem; }.scores dd { gap:1rem; }.primary { font-size:2.25rem; }.text-button { margin-top:2rem; font-size:.72rem; }.recommendation { padding-top:1.6rem; }.recommendation h2 { margin-top:4rem; }.recommendations { margin:4.5rem 0 3rem; font-size:.76rem; }.recommendations p { margin-bottom:2.5rem; }.button-outline { min-height:5.5rem; }.upload-block { margin-top:7rem; }.upload-block h3 { font-size:2.2rem; }.upload-block p { font-size:.75rem; }.drop-zone { min-height:16rem; font-size:.75rem; }.underlined { font-size:.72rem; } footer { min-height:10rem; gap:1.4rem; padding:0 2rem; } footer .logo { flex:0 0 3.1rem; } footer p { font-size:.68rem; }.back.show { display:block; } }

/* Shared left edge and a dedicated progress row. */
:root { --content-offset:10%; }
.diagnostic { position:relative; overflow:visible; }
.intro-content, .question-content, .compact .question-content, .results-content, .recommendation-content { margin-left:var(--content-offset); }
.progress { left:calc(var(--edge) + var(--content-offset)); right:auto; top:calc(clamp(6.5rem, 9.6vw, 10rem) + 5rem); }
.screen, .compact { padding-top:8rem; }
.site-footer { width:100%; margin-left:0; }
@media (min-width:701px) { .site-footer { box-shadow:0 0 0 100vmax var(--ink); clip-path:inset(0 -100vmax); } }
.drop-zone { margin-bottom:1rem; transition:background .2s ease, color .2s ease; }
.drop-zone:focus-visible { outline:3px solid var(--ink); outline-offset:4px; }
.drop-zone.is-dragging { color:var(--paper); background:var(--ink); }
.upload-status { min-height:1.5em; margin:0 0 3rem; font-size:.8rem !important; }
@media (max-width:700px) { :root { --content-offset:0%; }.diagnostic { margin-left:0; }.screen, .compact { padding-top:7rem; }.progress { top:calc(clamp(6.5rem, 9.6vw, 10rem) + 5rem); left:var(--edge); }.site-footer { margin-left:0; } }

.primary span { white-space:normal; }
.primary [data-primary] { display:block; margin-left:1.55em; }

.contact-capture h2 { max-width:48rem; margin-bottom:3.5rem; font-size:clamp(2.5rem, 5.25vw, 5rem); }
.contact-capture .eyebrow { margin-bottom:4.7rem; }
#diagnostic-contact { max-width:36rem; }
#diagnostic-contact label { display:flex; flex-direction:column; align-items:stretch; width:100%; margin:0 0 1.7rem; letter-spacing:.13em; text-transform:uppercase; font-size:-82rem; font-weight:600; }
#diagnostic-contact label span { font-weight:400; }
#diagnostic-contact input:not(.website-field) { display:block; flex:none; width:100%; margin-top:.75rem; padding:.8rem 0; border:0; border-bottom:2px solid var(--ink); border-radius:0; background:transparent; color:var(--ink); outline-offset:4px; }
#diagnostic-contact .button { margin-top:2rem; }
#diagnostic-contact .button:disabled { cursor:wait; opacity:.65; }
.website-field { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.form-status { min-height:1.5em; margin:1.5rem 0 0; letter-spacing:.08em; text-transform:uppercase; font-size:.75rem; }

@media (max-width:700px) {
  html, body { overflow-x:hidden; }
  .diagnostic, .site-footer { width:100%; }
  .site-footer { margin-left:0; }
}
.results h2 {letter-spacing: .02em; }