/* Built Early scorecard. Uses the site tokens in site.css. */
.sc{min-height:100svh;display:flex;flex-direction:column;background:var(--cream)}
.sc-top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding:var(--sp-4) var(--gutter);border-bottom:1px solid var(--sand)}
.sc-top .mark img{display:block;height:28px;width:auto}
.sc-count{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:var(--track-label);color:var(--graphite);min-width:7ch;text-align:center}
.sc-exit{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--graphite);text-decoration:none}
.sc-exit:hover{color:var(--charcoal)}
.sc-bar{height:3px;background:var(--sand-2)}
.sc-bar i{display:block;height:100%;width:0;background:var(--deep-verm);transition:width .45s cubic-bezier(.2,.7,.2,1)}
.sc[data-mode="result"] .sc-bar i{background:var(--signal-verm)}
.sc-stage{flex:1;display:flex;flex-direction:column}

/* screen transitions */
.sc-screen{transition:opacity .22s ease,transform .32s cubic-bezier(.2,.7,.2,1)}
.sc-screen.sc-in{opacity:0;transform:translateY(14px)}
.sc-screen.sc-out{opacity:0;transform:translateY(-10px);transition-duration:.16s}

/* question layout */
.sc-intro,.sc-question{width:100%;max-width:880px;margin:0 auto;padding:clamp(40px,8vh,96px) var(--gutter) var(--sp-8);
  display:flex;flex-direction:column;gap:var(--sp-5)}
.sc-intro h1{font-size:clamp(52px,8vw,104px)}
.sc-intro .intro{color:var(--warm-grey);max-width:52ch}
.sc-ask{margin-top:var(--sp-4)}
.sc-q{font-size:clamp(36px,5.2vw,64px);line-height:1;max-width:18ch}
.sc-q:focus,.sc-intro h1:focus,.sc-result h1:focus{outline:none}
.sc-opts{margin-top:var(--sp-4)}

/* choice cards */
.sc-cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.sc-intro .sc-cards{grid-template-columns:1fr}
.sc-card,.sc-chip,.sc-side{font:inherit;font-weight:400;font-size:var(--fs-body);line-height:1.35;color:var(--charcoal);text-align:left;
  background:var(--oat);border:1px solid transparent;border-radius:var(--radius);cursor:pointer;
  display:flex;align-items:center;gap:var(--sp-4);padding:18px 20px;min-height:68px;
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease}
.sc-card:hover,.sc-chip:hover,.sc-side:hover{border-color:var(--charcoal)}
.sc-card:active,.sc-side:active,.sc-chip:active{transform:scale(.99)}
.sc-card small{display:block;font-weight:300;font-size:var(--fs-small);color:var(--graphite);margin-top:2px}
.sc-card strong{font-weight:500}
.sc-key{flex:none;width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--sand);border-radius:var(--radius);
  font-family:var(--mono);font-size:12px;color:var(--graphite);background:var(--cream);transition:inherit}
.sc-card.on,.sc-side.on,.sc-chip.on{background:var(--charcoal);color:var(--cream);border-color:var(--charcoal)}
.sc-card.on small{color:var(--pale-stone)}
.sc-card.on .sc-key,.sc-side.on .sc-key{background:var(--signal-verm);border-color:var(--signal-verm);color:var(--charcoal)}

/* this or that */
.sc-pair{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:var(--sp-4)}
.sc-side{flex-direction:column;align-items:flex-start;justify-content:space-between;min-height:220px;padding:var(--sp-5);
  font-family:var(--serif);font-size:clamp(26px,2.8vw,36px);line-height:1.08;letter-spacing:var(--track-display)}
.sc-or{align-self:center;font-family:var(--serif);font-style:italic;font-size:28px;color:var(--deep-verm)}

/* scale */
.sc-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;position:relative}
.sc-step{font:inherit;cursor:pointer;height:84px;border:1px solid transparent;border-radius:var(--radius);background:var(--oat);
  display:flex;align-items:flex-end;justify-content:flex-start;padding:var(--sp-3);
  font-family:var(--mono);font-size:13px;color:var(--graphite);transition:background .18s ease,color .18s ease,border-color .15s ease}
.sc-step:nth-child(1){height:60px}.sc-step:nth-child(2){height:72px}.sc-step:nth-child(3){height:84px}.sc-step:nth-child(4){height:96px}.sc-step:nth-child(5){height:108px}
.sc-steps{align-items:end}
.sc-step:hover{border-color:var(--charcoal)}
.sc-step.fill{background:var(--deep-verm);color:var(--cream)}
.sc-step.on{background:var(--charcoal);color:var(--cream)}
.sc-ends{display:flex;justify-content:space-between;margin-top:var(--sp-3);font-family:var(--mono);font-size:var(--fs-label);
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--graphite)}

/* tick all */
.sc-multi{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.sc-tick{flex:none;width:22px;height:22px;border:1px solid var(--sand);border-radius:var(--radius);background:var(--cream);position:relative}
.sc-chip.on .sc-tick{background:var(--signal-verm);border-color:var(--signal-verm)}
.sc-chip.on .sc-tick::after{content:"";position:absolute;left:7px;top:3px;width:6px;height:11px;border:solid var(--charcoal);border-width:0 2px 2px 0;transform:rotate(45deg)}
.sc-go{margin-top:var(--sp-2)}

.sc-foot{display:flex;justify-content:space-between;align-items:center;margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--sand)}
.sc-back{font:inherit;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;
  background:none;border:0;padding:var(--sp-2) 0;color:var(--graphite);cursor:pointer}
.sc-back:hover{color:var(--charcoal)}
.sc-hint{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--graphite)}
@media (hover:none){.sc-hint{display:none}}

/* results: charcoal reveal */
.sc-result{width:100%}
.sc-reveal{background:var(--charcoal);color:var(--pale-stone);padding:clamp(40px,7vh,88px) var(--gutter) clamp(48px,8vh,96px)}
.sc-rgrid{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center}
.sc-wheel{margin:0;width:100%}
.sc-wheel svg{display:block;width:100%;height:auto;overflow:visible}
.w-rings polygon{fill:none;stroke:var(--ash);stroke-width:1}
.w-rings polygon:last-child{stroke:var(--ash)}
.w-rings line{stroke:var(--ash-2);stroke-width:1}
.w-you .w-shape{fill:rgba(255,79,31,.16);stroke:var(--signal-verm);stroke-width:2.5;stroke-linejoin:round}
.w-you .w-dot{fill:var(--signal-verm);stroke:var(--charcoal);stroke-width:2}
.w-cover .w-shape{fill:rgba(242,237,227,.05);stroke:var(--pale-stone);stroke-width:1.5;stroke-dasharray:5 5}
.w-name{font-family:var(--mono);font-size:12px;letter-spacing:.16em;fill:var(--pale-stone)}
.w-num{font-family:var(--serif);font-size:26px;fill:var(--cream)}
.sc-legend{display:flex;gap:var(--sp-5);justify-content:center;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--pale-stone);margin:var(--sp-3) 0 0}
.sc-legend span::before{content:"";display:inline-block;width:18px;height:0;border-top:2px solid var(--signal-verm);vertical-align:middle;margin-right:8px}
.sc-legend .lg-cover::before{border-top:2px dashed var(--pale-stone)}
.sc-who h1{font-size:clamp(56px,7.4vw,112px);margin:var(--sp-3) 0 var(--sp-4)}
.sc-desc{font-size:var(--fs-intro);line-height:1.5;color:var(--cream);max-width:34ch}
.sc-fit{margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--ash);color:var(--pale-stone);max-width:44ch}
.sc-fit .label{display:block;margin-bottom:var(--sp-2);color:var(--pale-stone)}
.sc-strong{margin-top:var(--sp-4);color:var(--pale-stone)}
.sc-sharedtag{display:inline-block;border:1px solid var(--ash);padding:4px 10px;color:var(--pale-stone);margin-bottom:var(--sp-3)}

/* staged reveal: wheel first, then words */
.sc-who>*,.sc-advice{transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.sc-result:not(.revealed) .sc-who>*{opacity:0;transform:translateY(12px)}
.sc-result:not(.revealed) .sc-advice{opacity:0;transform:translateY(20px)}
.sc-result.revealed .sc-who>*:nth-child(2){transition-delay:.08s}
.sc-result.revealed .sc-who>*:nth-child(3){transition-delay:.18s}
.sc-result.revealed .sc-who>*:nth-child(4){transition-delay:.3s}
.sc-result.revealed .sc-who>*:nth-child(5){transition-delay:.42s}
.sc-result.revealed .sc-who>*:nth-child(6){transition-delay:.5s}
.sc-result.revealed .sc-advice{transition-delay:.55s}

/* results: cream advice */
.sc-advice{background:var(--cream);padding:clamp(48px,8vh,96px) var(--gutter)}
.sc-advice>*{max-width:var(--wrap);margin-inline:auto}
.sc-blocks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-6) var(--sp-7);border-top:1px solid var(--sand);padding-top:var(--sp-6)}
.sc-block{display:flex;flex-direction:column;gap:var(--sp-3)}
.sc-block.wide{grid-column:span 3}
.sc-block.wide p:not(.label){font-family:var(--serif);font-size:clamp(26px,2.6vw,34px);line-height:1.15;color:var(--charcoal);letter-spacing:var(--track-display);max-width:38ch}
.sc-block p{color:var(--warm-grey)}
.sc-block .slashes{margin:0}
.sc-rule{display:block;margin-top:var(--sp-2);font-size:var(--fs-small);color:var(--graphite)}
.sc-tier{margin-top:var(--sp-8);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--sp-6);align-items:start}
.sc-tier h2{font-size:clamp(44px,5vw,72px);margin:var(--sp-2) 0}
.sc-slash{color:var(--deep-verm);font-family:var(--mono);font-size:.5em;padding-inline:.25em;vertical-align:.25em}
.sc-why{font-size:var(--fs-intro);color:var(--charcoal);line-height:1.5}
.sc-tier-body{display:flex;flex-direction:column;gap:var(--sp-3)}
.sc-note{color:var(--charcoal)}
.sc-cta{margin-top:var(--sp-3)}
.sc-actions{margin-top:var(--sp-6);display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3)}
.sc-toast{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--deep-verm)}
.sc-email{margin-top:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-3)}
.sc-erow{display:grid;grid-template-columns:1fr 1.4fr auto;gap:var(--sp-4);align-items:end;margin-top:var(--sp-2)}
.sc-err{color:var(--deep-verm);min-height:1em}
.sc-disclaim{margin-top:var(--sp-7);padding-top:var(--sp-4);border-top:1px solid var(--sand)}
.sc-disclaim p{color:var(--graphite);max-width:70ch}

@media (max-width:860px){
  .sc-rgrid{grid-template-columns:1fr}
  .sc-wheel{max-width:460px;margin:0 auto}
  .sc-blocks{grid-template-columns:1fr}
  .sc-block.wide{grid-column:auto}
  .sc-tier{grid-template-columns:1fr;gap:var(--sp-4)}
  .sc-erow{grid-template-columns:1fr}
}
@media (max-width:620px){
  .sc-cards,.sc-multi{grid-template-columns:1fr}
  .sc-card,.sc-chip{min-height:58px;padding:14px 16px}
  .sc-pair{grid-template-columns:1fr;gap:var(--sp-2)}
  .sc-side{min-height:112px;font-size:26px}
  .sc-or{justify-self:center;font-size:22px}
  .sc-step{height:auto!important;min-height:64px}
  .sc-intro,.sc-question{padding-top:var(--sp-6);gap:var(--sp-4)}
  .w-name{font-size:17px;letter-spacing:.1em}.w-num{font-size:34px}
  .sc-wheel{max-width:none;margin:0 -8px}
}
@media (prefers-reduced-motion:reduce){
  .sc-screen,.sc-who>*,.sc-advice,.sc-bar i,.sc-card,.sc-step{transition:none!important}
}
@media print{
  .sc-top,.sc-bar,.sc-actions,.sc-email,.sc-cta,.sc-preview,.cookie,.footer{display:none!important}
  .sc-reveal{background:#fff;color:#000;padding:0 0 24px}
  .sc-desc,.w-num,.sc-who h1{color:#171614;fill:#171614}
  .w-name{fill:#4A4640}.w-rings polygon,.w-rings line{stroke:#CFC8BA}
  .sc-advice{padding:0}
  .sc-result .sc-who>*,.sc-result .sc-advice{opacity:1!important;transform:none!important}
}