/* Construction Business Scorecard (/scorecard/, task 2026-10-17-mkt-03). Tokens and brand guide v2 only: no raw hex, no new sizes/radii. */
.sc-hero{padding:var(--s8) 0}
.sc-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--s7);align-items:center}
.sc-crumbs{color:var(--ink-soft)}
.sc-crumbs a{color:var(--ink)}
.sc-intro .t1{margin-top:var(--s1)}
.sc-lead{margin-top:var(--s4);font-weight:400;color:var(--ink-2);max-width:52ch}
.sc-stats{display:flex;margin-top:var(--s6)}
.sc-stats li{padding:0 var(--s5);border-left:1px solid var(--line)}
.sc-stats li:first-child{padding-left:0;border-left:0}
.sc-stats b{display:block;font-size:var(--t2);line-height:var(--lh2);font-weight:500;color:var(--ink)}
.sc-stats li:first-child b{color:var(--green-dk)}
.sc-stats span{font-size:var(--t4);color:var(--ink-2)}

/* the app card: preview → one question per screen → result */
.sc-app{padding:var(--s6);outline:none}
.sc-preview .eyebrow{margin-bottom:var(--s4)}
.sc-plist{list-style:none;padding:0;counter-reset:sp}
.sc-plist li{position:relative;padding:var(--s3) 0 var(--s3) 44px;border-top:1px solid var(--line);counter-increment:sp}
.sc-plist li:first-child{border-top:0}
.sc-plist li::before{content:counter(sp);position:absolute;left:0;top:var(--s3);width:28px;height:28px;border-radius:50%;background:var(--bg-2);color:var(--ink);font-size:var(--t5);font-weight:500;display:flex;align-items:center;justify-content:center}
.sc-plist b{display:block;font-weight:500;color:var(--ink)}
.sc-plist span{display:block;font-size:var(--t5);line-height:var(--lh5);color:var(--ink-soft)}
.sc-pbtn{width:100%;margin-top:var(--s5)}
.sc-preview .t5{margin-top:var(--s3);text-align:center}

.sc-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:44px}
.sc-back{background:none;border:0;padding:0 var(--s2) 0 0;min-height:44px;font:500 var(--t4) var(--font);color:var(--ink);cursor:pointer}
.sc-back:hover{text-decoration:underline;text-underline-offset:3px}
.sc-back[disabled]{visibility:hidden}
.sc-count{font-size:var(--t5);color:var(--ink-soft)}
.sc-bar{height:6px;border-radius:var(--r-pill);background:var(--bg-2);overflow:hidden;margin:var(--s2) 0 var(--s6)}
.sc-bar i{display:block;height:100%;width:0;background:var(--green-dk);border-radius:var(--r-pill);transition:width var(--med) var(--ease-out)}
.sc-q h2{outline:none}
.sc-q .eyebrow{margin-bottom:var(--s2)}
.sc-note{margin-top:var(--s2)}
.sc-opts{display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s5)}
.sc-opt{display:flex;align-items:center;gap:var(--s4);width:100%;min-height:56px;padding:var(--s3) var(--s4);text-align:left;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);font:400 var(--t4)/var(--lh5) var(--font);color:var(--ink);cursor:pointer;transition:transform var(--fast) var(--ease-out),border-color var(--med) var(--ease-out),background-color var(--med) var(--ease-out);-webkit-tap-highlight-color:transparent}
.sc-opt::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--ink-soft);background:var(--bg) center/14px no-repeat}
.sc-opt[aria-pressed="true"]{border-color:var(--green-dk);background:var(--bg-2)}
.sc-opt[aria-pressed="true"]::before{border-color:var(--green-dk);background-color:var(--green);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.5 2.5L13 6.5' stroke='%23212121' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.sc-opt:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){.sc-opt:hover{border-color:var(--ink);transform:translateY(-2px)}}

/* quiz mode: the question owns the screen */
.sc-on .sc-intro{display:none}
.sc-on .sc-grid{grid-template-columns:minmax(0,680px);justify-content:center}
.sc-done .sc-grid{grid-template-columns:minmax(0,880px)}

/* result */
.sc-res .eyebrow{margin-bottom:var(--s2)}
.sc-score{display:flex;align-items:baseline;gap:var(--s2)}
.sc-num{font-size:var(--t0);line-height:var(--lh1);font-weight:500;color:var(--green-dk)}
.sc-score span{font-size:var(--t3);color:var(--ink-soft)}
.sc-res>.t2{margin-top:var(--s2)}
.sc-res>.t4{margin-top:var(--s2);max-width:60ch}
.sc-res h3.t3{margin-top:var(--s6)}
.sc-weak{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);margin-top:var(--s4)}
.sc-wcard{padding:var(--s5);border-radius:var(--r-lg);background:var(--bg-2);display:flex;flex-direction:column}
.sc-wtop{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.sc-wtop b{font-size:var(--t3);line-height:var(--lh3);font-weight:500;color:var(--ink)}
.sc-pill{flex:none;font-size:var(--t5);font-weight:500;color:var(--ink);background:var(--bg);border-radius:var(--r-pill);padding:var(--s1) var(--s3)}
.sc-k{display:block;font-size:var(--te);line-height:1.3;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--green-text);margin-top:var(--s4)}
.sc-wcard p{font-size:var(--t4);line-height:var(--lh5);color:var(--ink-2);margin-top:var(--s1)}
.sc-wcard .link{margin-top:auto;padding-top:var(--s3)}
.sc-lock{margin-top:var(--s5);padding:var(--s6);display:flex;flex-direction:column;gap:var(--s3);align-items:flex-start}
.sc-lock .eyebrow{margin:0}
.sc-lock .btn{margin-top:var(--s2)}
.sc-full{margin-top:var(--s2)}
.sc-bars{margin-top:var(--s4)}
.sc-bars li{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr) 40px;gap:var(--s4);align-items:center;padding:var(--s2) 0;font-size:var(--t4);color:var(--ink)}
.sc-bars b{text-align:right;font-weight:500}
.sc-track{height:10px;border-radius:var(--r-pill);background:var(--bg-2);overflow:hidden}
.sc-track i{display:block;height:100%;background:var(--green-dk);border-radius:var(--r-pill)}
.sc-flags{margin-top:var(--s4)}
.sc-flag{padding:var(--s4) 0;border-top:1px solid var(--line)}
.sc-flag p{font-size:var(--t4);line-height:var(--lh5);color:var(--ink-2)}
.sc-flag p+p{margin-top:var(--s1)}
.sc-flag strong{color:var(--ink);font-weight:500}
.sc-flag .t5{margin-top:var(--s2)}
.sc-clean{font-size:var(--t4);color:var(--ink-2);margin-top:var(--s3)}
.sc-retake{margin-top:var(--s5);background:none;border:0;padding:0;cursor:pointer;font-family:var(--font)}

/* areas + how it's scored */
.sc-cards{--col:86%}
.sc-acard{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s5)}
.sc-n{font-size:var(--t5);font-weight:500;color:var(--green-text)}
.sc-h{font-size:var(--t5);line-height:var(--lh5);color:var(--ink-2)}
.sc-h b{color:var(--ink);font-weight:500}
.sc-acard .link{margin-top:auto;font-size:var(--t5)}
.sc-how{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--s7);align-items:start}
.sc-how .t4+.t4{margin-top:var(--s3)}
.sc-how .t2{margin-bottom:var(--s4)}
.sc-how p a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--green-dk);text-decoration-thickness:1.5px;text-underline-offset:3px}
.sc-bands{list-style:none;padding:0}
.sc-bands li{display:grid;grid-template-columns:76px 1fr;gap:var(--s4);padding:var(--s4) 0;border-top:1px solid var(--line)}
.sc-bands li:first-child{border-top:0;padding-top:0}
.sc-bands b{font-size:var(--t3);font-weight:500;color:var(--ink)}
.sc-bands strong{color:var(--ink);font-weight:500}
.sc-bands span{font-size:var(--t4);line-height:var(--lh5);color:var(--ink-2)}

@media (min-width:768px){.sc-cards{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible}}
@media (max-width:1023px){.sc-grid{grid-template-columns:minmax(0,1fr);gap:var(--s6)}.sc-how{grid-template-columns:minmax(0,1fr);gap:var(--s5)}}
@media (max-width:767px){
  .sc-hero{padding:var(--s5) 0 var(--section)}
  .sc-lead{display:none}                 /* phone hero: no lead line (brand guide §11) */
  .sc-stats{margin-top:var(--s5)}
  .sc-stats li{padding:0 var(--s4)}
  .sc-stats b{font-size:var(--t3)}
  .sc-stats li:first-child b{color:var(--green-text)}   /* 17px: small text → AA green */
  .sc-stats span{font-size:var(--t5)}
  .sc-app{padding:var(--s5) var(--s4)}
  .sc-on .sc-hero{padding:var(--s3) 0 var(--s6);min-height:calc(100svh - var(--header))}
  .sc-on .sc-app{border:0;padding:0}
  .sc-done .sc-app{border:0;padding:0}
  .sc-weak{grid-template-columns:minmax(0,1fr)}
  .sc-bars li{grid-template-columns:minmax(0,1fr) 40px;row-gap:var(--s1)}
  .sc-bars li .sc-track{grid-column:1/-1;grid-row:2}
  .sc-lock{padding:var(--s5)}
  .sc-lock .btn{width:100%}
  .sc-bands li{grid-template-columns:64px 1fr}
}
.sc-nw{white-space:nowrap}

/* our own lead form in the result card (17 Oct; endpoint /api/lead). Dark card, white fields, tokens only.
   Errors: text + a --star marker and border (never colour alone); 16px inputs so iOS does not zoom. */
.sc-form{display:flex;flex-direction:column;gap:var(--s4);width:100%;margin-top:var(--s2)}
.sc-step{font-size:var(--te);line-height:1.3;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-2)}
.sc-field{display:flex;flex-direction:column;gap:var(--s1)}
.sc-field label{font-size:var(--t5);font-weight:500;color:var(--on-dark)}
.sc-field input,.sc-field select{width:100%;min-height:52px;padding:0 var(--s4);border:1.5px solid var(--bg);border-radius:var(--r-md);background:var(--bg);color:var(--ink);font:400 var(--t4)/1.3 var(--font);-webkit-appearance:none;appearance:none;transition:border-color var(--med) var(--ease-out)}
.sc-field select{padding-right:44px;background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%231C1C1C' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") right 16px center/12px 8px no-repeat}
.sc-field input:focus,.sc-field select:focus{outline:none;border-color:var(--green)}
.sc-field input:focus-visible,.sc-field select:focus-visible{outline:2px solid var(--on-dark);outline-offset:2px}
.sc-hint{font-size:var(--t5);line-height:var(--lh5);color:var(--on-dark-2)}
.sc-err{font-size:var(--t5);line-height:var(--lh5);font-weight:500;color:var(--on-dark)}
.sc-err:empty{display:none}
.sc-err::before{content:"!";display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-right:var(--s2);border-radius:50%;background:var(--star);color:var(--ink);font-size:var(--te);font-weight:700;vertical-align:1px}
.sc-field.bad input,.sc-field.bad select{border-color:var(--star)}
.sc-field.bad .sc-hint{display:none}
.sc-known{font-size:var(--t5);color:var(--on-dark-2)}
.sc-known b{color:var(--on-dark);font-weight:500}
.sc-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.sc-form .sc-submit{align-self:flex-start;margin-top:var(--s1)}
.sc-form .sc-submit[aria-busy="true"]{opacity:.7;pointer-events:none}
.sc-edit{align-self:flex-start;background:none;border:0;padding:0;min-height:44px;font:500 var(--t5) var(--font);color:var(--on-dark-2);cursor:pointer}
.sc-edit:hover{color:var(--on-dark);text-decoration:underline;text-underline-offset:3px}
.sc-priv{color:var(--on-dark-2)}
.sc-priv a{color:var(--on-dark);text-decoration:underline;text-underline-offset:3px}
.sc-lock{position:relative}
@media (min-width:768px){.sc-form{max-width:440px}}
@media (max-width:767px){.sc-form .sc-submit{width:100%;align-self:stretch}}