/* The Storied Team Diagnostic, in the Storied look. */
.diag .wrap{max-width:800px}
.diag h1:focus,.diag h2:focus{outline:none}
.diag h1:focus-visible,.diag h2:focus-visible{outline:3px solid var(--gold);outline-offset:6px}
.diag-landing .diag-lede p{font-size:clamp(17px,1.55vw,19px);line-height:1.85;color:var(--muted);max-width:40rem;margin-top:16px}
.diag-landing .diag-lede p:first-child{margin-top:28px}
.diag-marks{margin-top:52px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.diag-mark{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:20px 22px 22px}
.diag-mark svg{width:100px}
.diag-mark .name{font:600 22px/1.2 var(--serif);color:var(--plum);margin-bottom:6px}
.diag-mark .blurb{font-size:15px;line-height:1.6;color:var(--muted)}
.diag-meta{margin-top:40px;font-size:14px;letter-spacing:.06em;color:var(--gold-deep)}
.diag-start{margin-top:18px}
.diag-noscript{margin-top:26px;color:var(--muted);border-left:3px solid var(--gold);padding-left:16px}
@media (max-width:820px){.diag-marks{grid-template-columns:1fr}}

.diag-app{background:var(--ground)}
.diag-screen{padding:clamp(52px,7vw,92px) 0}
.diag-screen+.diag-screen:not(.diag-test):not(.diag-close){padding-top:0}
.diag-screen h2{font-size:clamp(30px,4vw,46px);max-width:24ch}
.diag-body p{font-size:17px;line-height:1.85;color:var(--muted);margin-top:14px}
.diag-body p:first-child{margin-top:22px}
.diag-pull{font:italic 400 clamp(22px,2.5vw,29px)/1.4 var(--serif);color:var(--plum);margin:28px 0;max-width:26ch}
.diag-actions{margin-top:40px;display:flex;gap:12px;flex-wrap:wrap}

.diag-progress{margin-bottom:36px}
.diag-count{font:500 12px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:12px}
.diag-line{height:4px;border-radius:4px;background:var(--soft);position:relative;overflow:hidden}
.diag-line span{position:absolute;inset:0 auto 0 0;background:var(--plum);border-radius:4px;transition:width .32s cubic-bezier(.4,.05,.25,1)}
.diag-group{border:0;padding:0;margin:0}
.diag-legend{padding:0;margin-bottom:26px}
.diag-legend h2{font-size:clamp(26px,3.2vw,36px);line-height:1.2;max-width:30ch}
.diag-options{display:flex;flex-direction:column;gap:10px}
.diag-option{display:flex;gap:14px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:16px 18px;cursor:pointer;transition:border-color .15s,background .15s}
.diag-option:hover{border-color:var(--plum)}
.diag-option:has(input:checked){border-color:var(--plum);background:var(--plum-tint)}
.diag-option:has(input:focus-visible){outline:3px solid var(--gold);outline-offset:2px}
.diag-radio{accent-color:var(--plum);width:20px;height:20px;margin-top:3px;flex:none}
.diag-option-text{font-size:17px;line-height:1.55}
.diag-note{margin-top:18px;font-size:15px;color:var(--muted);font-style:italic}

.diag-form{margin-top:28px;max-width:30rem}
.diag-form .f{margin-bottom:16px}
.diag-error{color:#8E3B2E;background:#F6E2DC;border-radius:12px;padding:12px 16px;margin-top:6px}
.diag-consent{margin-top:20px;font-size:13px;line-height:1.6;color:var(--muted)}

.diag-results h2{margin-bottom:26px}
.diag-scores{display:flex;flex-direction:column;gap:14px}
.diag-score{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.diag-score.is-thinnest{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.diag-score-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.diag-score-head .name{font:600 22px var(--serif);color:var(--plum)}
.diag-score-head .value{font-size:14px;color:var(--muted)}
.diag-bar{height:6px;border-radius:6px;background:var(--soft);margin:10px 0 8px;position:relative;overflow:hidden}
.diag-bar span{position:absolute;inset:0 auto 0 0;background:var(--plum);border-radius:6px}
.diag-band{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep)}

.diag-lead .eyebrow{margin-bottom:6px}
.diag-thin-name{font-size:clamp(30px,3.8vw,42px);color:var(--plum);margin-top:6px}
.diag-movement{margin-top:20px;background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:26px 26px 28px}
.diag-movement.is-thinnest{border-color:var(--gold)}
.diag-movement-head{display:flex;gap:16px;align-items:center}
.diag-movement-mark svg{width:84px;margin:0}
.diag-movement-meta{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep)}
.diag-movement h4{font:500 clamp(22px,2.4vw,28px)/1.25 var(--serif);margin-top:4px}
.diag-verythin{font-weight:500;color:var(--ink)!important}
.diag-cost,.diag-try{margin-top:22px;border-top:1px solid var(--line);padding-top:18px}
.diag-cost-label,.diag-try-label{font:500 12px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:8px}
.diag-cost p:not(.diag-cost-label),.diag-try p:not(.diag-try-label){color:var(--muted);margin-top:10px}
.diag-try{background:var(--gold-tint);border:0;border-radius:14px;padding:18px 20px;margin-top:22px}
.diag-others{margin-top:28px}
.diag-others summary{cursor:pointer;font-weight:500;color:var(--plum);padding:10px 0}
.diag-test{background:var(--plum);color:var(--on-plum)}
.diag-test .diag-body p{color:var(--on-plum-muted)}
.diag-test .diag-pull{color:var(--gold-light)}
.diag-close{padding-top:56px}
.diag-closing{font:italic 400 21px/1.5 var(--serif);color:var(--muted);max-width:36rem}
.diag-closing a{color:var(--plum)}
@media (prefers-reduced-motion:reduce){.diag-line span{transition:none}}