/* Marketing assessment — editorial system (body.page-assessment). Tokens come from site CSS (.editorial). */
.page-assessment{--fs-display-inner:clamp(2.6rem,1.55rem + 3.3vw,4.75rem);--section-y:clamp(4rem,7vw,7rem)}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.page-assessment .assessment-main{overflow:visible;padding-bottom:0}

/* Introduction */
.page-assessment .assessment-intro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap);max-width:none;margin:0;padding:clamp(2.5rem,6vw,5.5rem) var(--content-inset) clamp(2.5rem,5vw,4rem);border-bottom:1px solid var(--rule)}
.page-assessment .assessment-intro .eyebrow{grid-column:1/-1;margin:0}
.page-assessment .assessment-intro h1{grid-column:1/10;max-width:18ch;margin:1rem 0 1.5rem;color:var(--ink);font:500 var(--fs-display-inner)/.98 var(--font-display);letter-spacing:-.025em}
.page-assessment .assessment-intro .lead{grid-column:5/11;max-width:40rem;margin:0;color:var(--ink-2);font-size:clamp(1.0625rem,.95rem + .4vw,1.25rem);line-height:1.55}
.page-assessment .assessment-mode{grid-column:5/13;display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;max-width:none;margin-top:2.25rem;padding:1.25rem 0 0;border:0;border-top:1px solid var(--rule-strong);background:none}
.page-assessment .assessment-mode p{flex:1 1 20rem;margin:0;color:var(--ink-2);font-size:var(--fs-small);line-height:1.55}
.page-assessment .assessment-mode strong{color:var(--ink)}
.page-assessment #assessment-reset[hidden]{display:none}

/* Questions and result panel */
.page-assessment .assessment-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap);align-items:start;max-width:none;margin:0;padding:clamp(2.5rem,5vw,4rem) var(--content-inset) 0}
.page-assessment .assessment-grid>*{min-width:0}
.page-assessment #assessment-quiz{grid-column:1/8;counter-reset:dim}
.page-assessment .assessment-panel{grid-column:8/13;position:sticky;top:5.5rem}
.page-assessment .assessment-dim{counter-increment:dim;max-width:none;margin:0;padding:2rem 0 .5rem;border:0;border-top:1px solid var(--rule-strong);background:none}
.page-assessment .assessment-dim:first-child{padding-top:1.25rem;border-top:2px solid var(--ink)}
.page-assessment .assessment-dim__head{display:flex;align-items:baseline;gap:1rem;margin-bottom:1.5rem}
.page-assessment .assessment-dim__head::before{content:counter(dim,decimal-leading-zero) / "";color:var(--accent);font:500 1.5rem/1 var(--font-display);font-variant-numeric:lining-nums tabular-nums}
.page-assessment .assessment-dim__head h2{max-width:none;margin:0;color:var(--ink);font:500 clamp(1.75rem,1.4rem + 1vw,2.4rem)/1.05 var(--font-display)}
.page-assessment .assessment-score{margin-left:auto;color:var(--ink-2);font-size:var(--fs-meta);font-variant-numeric:tabular-nums;white-space:nowrap}
.page-assessment .assessment-dim fieldset{min-width:0;margin:0 0 2rem;padding:0;border:0}
.page-assessment .assessment-dim legend{margin:0 0 .9rem;padding:0;color:var(--ink);font-size:1.0625rem;font-weight:600;line-height:1.45}
.page-assessment .assessment-options{display:grid;gap:0;border-top:1px solid var(--rule)}
.page-assessment .assessment-options label{position:relative;display:block;cursor:pointer}
.page-assessment .assessment-options input{position:absolute;opacity:0;inline-size:1px;block-size:1px}
.page-assessment .assessment-options label>span{display:grid;grid-template-columns:2rem minmax(0,1fr);gap:1rem;align-items:start;min-height:2.75rem;padding:.8rem .75rem;border:0;border-bottom:1px solid var(--rule);background:none;color:var(--ink);font-size:var(--fs-small);line-height:1.5;transition:background-color .15s ease,box-shadow .15s ease}
.page-assessment .assessment-options b{display:grid;place-items:center;width:2rem;height:2rem;margin-top:-.2rem;border:1px solid var(--rule-strong);border-radius:50%;color:var(--ink-2);font-size:.8125rem;font-weight:600;font-variant-numeric:tabular-nums}
.page-assessment .assessment-options label:hover>span{background:var(--paper-2)}
.page-assessment .assessment-options input:checked+span{background:var(--paper-2);box-shadow:inset 3px 0 0 var(--accent)}
.page-assessment .assessment-options input:checked+span b{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.page-assessment .assessment-options input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}

.page-assessment .assessment-card{display:grid;grid-template-columns:minmax(0,1fr);gap:1.75rem;padding:1.25rem 0 0;border:0;border-top:2px solid var(--ink);background:none}
.page-assessment .assessment-card>*{min-width:0}
.page-assessment .assessment-progress>div:first-child{display:flex;justify-content:space-between;color:var(--ink-2);font-size:var(--fs-meta)}
.page-assessment #progress-count{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.page-assessment .assessment-bar{height:4px;margin-top:.6rem;overflow:hidden;background:var(--rule)}
.page-assessment .assessment-bar i{display:block;width:0;height:100%;background:var(--accent);transition:width .25s ease}
.page-assessment .assessment-level>span,.page-assessment .assessment-output h3,.page-assessment .assessment-offer>h3{display:block;margin:0;color:var(--ink-2);font-size:var(--fs-label);font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.page-assessment .assessment-level h2{max-width:none;margin:.4rem 0 .6rem;color:var(--ink);font:500 clamp(2.2rem,1.8rem + 1.6vw,3.4rem)/1 var(--font-display)}
.page-assessment .assessment-level h2 small{color:var(--ink-2);font:500 .9375rem var(--font-body);white-space:nowrap}
.page-assessment .assessment-level p{margin:0;color:var(--ink-2);font-size:var(--fs-small);line-height:1.55}
.page-assessment .assessment-radar{display:block;width:100%;max-width:100%;height:auto;overflow:visible}
.page-assessment .assessment-radar text{fill:var(--ink-2);font-family:var(--font-body);font-size:12px}
.page-assessment .assessment-radar text tspan{fill:var(--ink);font-weight:600}
.page-assessment .assessment-radar__shape{fill:var(--accent);fill-opacity:.14;stroke:var(--accent);stroke-width:2;stroke-linejoin:round}
.page-assessment .assessment-radar circle{fill:var(--accent)}
.page-assessment #assessment-detail>.small{margin:0;color:var(--ink-2);font-size:var(--fs-small)}
.page-assessment .assessment-output{padding:1.5rem 0 0;border-top:1px solid var(--rule)}
.page-assessment .assessment-output h3{margin:0 0 .75rem}
.page-assessment .assessment-output ol{display:grid;gap:0;margin:0;padding:0;list-style:none}
.page-assessment .assessment-output li{display:grid;grid-template-columns:minmax(0,1fr);gap:.3rem;padding:.9rem 0;border-top:1px solid var(--rule)}
.page-assessment .assessment-output li:first-child{border-top:0;padding-top:0}
.page-assessment .assessment-output li>span{color:var(--accent);font-size:var(--fs-label);font-weight:600;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.page-assessment .assessment-output li strong{color:var(--ink);font-size:1rem}
.page-assessment .assessment-output li p{margin:.15rem 0 0;color:var(--ink-2);font-size:var(--fs-small);line-height:1.5}
.page-assessment .assessment-roadmap{margin:0 0 0 .3rem;border-left:1px solid var(--rule-strong)}
.page-assessment .assessment-roadmap>div{position:relative;display:grid;gap:.2rem;padding:0 0 1.1rem 1.4rem}
.page-assessment .assessment-roadmap>div:last-child{padding-bottom:0}
.page-assessment .assessment-roadmap>div::before{content:"";position:absolute;left:-6px;top:.2rem;width:11px;height:11px;border:2px solid var(--accent);border-radius:50%;background:var(--paper)}
.page-assessment .assessment-roadmap span{color:var(--accent);font-size:var(--fs-label);font-weight:600;font-variant-numeric:tabular-nums}
.page-assessment .assessment-roadmap strong{color:var(--ink);font-size:1rem;line-height:1.4}
.page-assessment .assessment-offer{padding-top:1.5rem;border-top:1px solid var(--rule)}
.page-assessment .assessment-offer h2{max-width:none;margin:.4rem 0 .6rem;color:var(--ink);font:500 clamp(1.75rem,1.5rem + .8vw,2.2rem)/1.1 var(--font-display)}
.page-assessment .assessment-offer p{color:var(--ink-2);font-size:var(--fs-small);line-height:1.55}
.page-assessment .assessment-email{display:grid;gap:.6rem;margin-top:1.75rem;padding-top:1.25rem;border-top:1px solid var(--rule)}
.page-assessment .assessment-email label{color:var(--ink);font-size:var(--fs-small);font-weight:600}
.page-assessment .assessment-email>div{display:flex;gap:.5rem}
.page-assessment .assessment-email>div>*{min-width:0}
.page-assessment .assessment-email input{flex:1;min-height:2.75rem;padding:.7rem .85rem;border:1px solid var(--rule-strong);background:var(--paper);color:var(--ink);font:inherit}
.page-assessment .assessment-email input::placeholder{color:var(--ink-2)}
.page-assessment .assessment-email input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.page-assessment .assessment-email input[aria-invalid=true]{border:2px solid var(--accent)}
.page-assessment .assessment-email .button-secondary{background:transparent;border-color:var(--rule-strong);color:var(--ink)!important;white-space:nowrap;cursor:pointer}
.page-assessment .assessment-email .button-secondary::after{content:none}
.page-assessment .assessment-email .button-secondary:hover{background:transparent;border-color:var(--ink)}
.page-assessment .assessment-email .small{margin:0;color:var(--ink-2);font-size:var(--fs-meta);line-height:1.5}

/* What it measures */
.page-assessment .assessment-context{margin-top:clamp(3rem,6vw,5rem);background:linear-gradient(var(--rule),var(--rule)) center top/calc(100% - 2 * var(--content-inset)) 1px no-repeat}
.page-assessment .assessment-context>div{display:contents}
.page-assessment .assessment-context>div>.kicker{grid-column:1/4;grid-row:1;margin:.9rem 0 0}
.page-assessment .assessment-context>div>h2{grid-column:4/12;grid-row:1}
.page-assessment .assessment-context>p{grid-column:4/11;grid-row:2;max-width:none;margin:0;color:var(--ink-2);font-size:1.125rem;line-height:1.65}

/* Mobile progress bar */
.page-assessment .assessment-mobile{display:none}
@media(max-width:960px){
  .page-assessment .assessment-grid{display:block}
  .page-assessment .assessment-panel{position:static;margin-top:2.5rem}
  .page-assessment .assessment-main{padding-bottom:4.5rem}
  html:has(body.page-assessment){scroll-padding-bottom:4.5rem}
  .page-assessment .assessment-mobile{position:fixed;z-index:20;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:3.5rem;padding:.5rem max(var(--content-inset),env(safe-area-inset-right)) calc(.5rem + env(safe-area-inset-bottom)) max(var(--content-inset),env(safe-area-inset-left));border-top:1px solid var(--rule-strong);background:var(--paper);color:var(--ink-2);font-size:var(--fs-small)}
  .page-assessment .assessment-mobile a{display:inline-flex;align-items:center;min-height:2.75rem;color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:.3em}
}
@media(max-width:900px){
  .page-assessment .assessment-intro{display:block}
  .page-assessment .assessment-intro .lead{margin-top:0}
  .page-assessment .assessment-context>div{display:block}
  .page-assessment .assessment-context>div>.kicker{margin:0 0 1rem}
}
@media(max-width:600px){
  .page-assessment .assessment-mode{flex-direction:column;align-items:stretch}
  .page-assessment .assessment-mode .button{justify-content:center}
  .page-assessment .assessment-options label>span{grid-template-columns:2rem minmax(0,1fr);gap:.75rem;padding:.75rem .5rem}
  .page-assessment .assessment-email>div{flex-direction:column}
  .page-assessment .assessment-email .button{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){.page-assessment .assessment-bar i,.page-assessment .assessment-options label>span{transition:none}}
@media(forced-colors:active){
  .page-assessment .assessment-options input:checked+span{outline:3px solid Highlight;outline-offset:-3px}
  .page-assessment .assessment-options input:checked+span b{forced-color-adjust:none;background:Highlight;border-color:Highlight;color:HighlightText}
  .page-assessment .assessment-options input:focus-visible+span{outline:3px solid Highlight}
  .page-assessment .assessment-bar{border:1px solid CanvasText}
  .page-assessment .assessment-bar i{forced-color-adjust:none;background:Highlight}
  .page-assessment .assessment-radar__shape{stroke:Highlight}
}
