/* ============================================================
   scorecard.css — the Advice Capacity Scorecard landing pages.

   These are MARKETING LANDING PAGES, not pages of avagance.com. They share
   nothing with members.css on purpose: each one is a standalone ad destination,
   a visitor only ever sees the one their ad sent them to, and the main site is
   untouched. Do not re-align these to the house palette.

   Structure follows the ScoreApp method: hook, subheading, value proposition,
   credibility, call to action, then 15 questions in Tally, then dynamic results.

   FOUR THEMES, set by data-sc-theme on <html>:
     signal-coral   ai-tools, cost-to-serve   coral on white, Darker Grotesque
     red-thread     suitability-reports       oxblood on white, Playfair Display
     safety-yellow  capacity                  hi-vis on white, Space Grotesk
     neutral        the results page          black and white, accent inherited
                                              from whichever angle came in

   Every accent has TWO tokens. --acc is the fill (buttons, dots, bands) and
   --acct is a darkened variant for text on white. They are not interchangeable:
   white on #F2B705 is 1.8:1 and unreadable. Both clear WCAG AA 4.5:1, which
   matters more than usual because the ICP is advisers aged 40+.

   Do NOT hand-edit the generated pages. Edit this file and
   tools/build-scorecard.js, then re-run node tools/build-scorecard.js.
   ============================================================ */

/* ---- themes ------------------------------------------------------------- */
:root{
  --bg:#F8F8F6;--bg2:#FFFFFF;--bg3:#EDEDE9;
  --ink:#1A1A18;--txt:#3C3C39;--mut:#777772;--line:#E0E0DA;
  --acc:#FF5A3C;--acc2:#E84424;--acct:#C7462F;--btn:var(--ink);
  --rad:3px;
  --disp:'Darker Grotesque',system-ui,sans-serif;--dw:800;
  --body:'Work Sans',system-ui,sans-serif;
}
html[data-sc-theme="red-thread"]{
  --bg:#FBF9F7;--bg2:#FFFFFF;--bg3:#F0EAE6;
  --ink:#16100F;--txt:#40352F;--mut:#7D6F67;--line:#E5DBD4;
  --acc:#9E2B25;--acc2:#761D19;--acct:#9E2B25;--btn:#FFFFFF;
  --rad:0px;
  --disp:'Playfair Display',Georgia,serif;--dw:500;
  --body:'Figtree',system-ui,sans-serif;
}
html[data-sc-theme="safety-yellow"]{
  --bg:#FAFAF7;--bg2:#FFFFFF;--bg3:#F0F0EA;
  --ink:#101010;--txt:#38383A;--mut:#6E6E72;--line:#E2E2DB;
  --acc:#F2B705;--acc2:#D9A400;--acct:#916E03;--btn:var(--ink);
  --rad:0px;
  --disp:'Space Grotesk',system-ui,sans-serif;--dw:700;
  --body:'Plus Jakarta Sans',system-ui,sans-serif;
}
/* The results page. Black and white by default; scorecard.js overwrites --acc
   and --acct from the angle the visitor arrived on, so they stay in the colour
   of the ad they clicked. */
html[data-sc-theme="neutral"]{
  --bg:#FAFAFA;--bg2:#FFFFFF;--bg3:#F0F0F0;
  --ink:#141414;--txt:#3A3A3A;--mut:#767676;--line:#E3E3E3;
  --acc:#141414;--acc2:#000000;--acct:#141414;--btn:#FFFFFF;
  --rad:3px;
  --disp:'Darker Grotesque',system-ui,sans-serif;--dw:800;
  --body:'Work Sans',system-ui,sans-serif;
}

/* ---- base --------------------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
picture{display:block}
body{margin:0;background:var(--bg);color:var(--txt);font-family:var(--body);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--disp);font-weight:var(--dw);color:var(--ink);margin:0;
  line-height:1.06;letter-spacing:-.02em}
p{margin:0 0 16px}
a{color:inherit}
img{max-width:100%}
.sc-w{max-width:1120px;margin:0 auto;padding:0 22px}
.sc-skip{position:absolute;left:-9999px}
.sc-skip:focus{left:22px;top:12px;background:var(--ink);color:var(--bg2);padding:10px 16px;z-index:99}

.sc-b{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--acc);
  color:var(--btn);border:0;border-radius:var(--rad);padding:18px 32px;font-family:var(--body);
  font-size:16px;font-weight:700;text-decoration:none;cursor:pointer;transition:background .16s,transform .12s}
.sc-b:hover{background:var(--acc2);transform:translateY(-1px)}
.sc-b--w{width:100%}
.sc-b--o{background:transparent;color:var(--ink);border:1.5px solid var(--line);font-weight:600}
.sc-b--o:hover{background:var(--bg3);border-color:var(--ink);transform:none}

/* ---- header ------------------------------------------------------------- */
.sc-hd{border-bottom:1px solid var(--line);background:var(--bg2)}
.sc-hd .sc-w{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:15px;padding-bottom:15px}
.sc-br{display:inline-flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:var(--dw);
  font-size:21px;color:var(--ink);text-decoration:none;letter-spacing:-.02em}
.sc-br span{width:30px;height:30px;border-radius:var(--rad);background:var(--acc);display:grid;place-items:center}
.sc-br img{display:block}

/* ---- hero --------------------------------------------------------------- */
.sc-hero{padding:56px 0 60px;position:relative;overflow:hidden;background:var(--bg2);border-bottom:1px solid var(--line)}
.sc-pill{display:inline-flex;align-items:center;gap:9px;border:1.5px solid var(--line);border-radius:999px;
  padding:8px 16px;font-size:14px;font-weight:500;color:var(--txt);margin:0 0 24px}
.sc-pill i{width:8px;height:8px;border-radius:50%;background:var(--acc);display:block}
.sc-hero h1{font-size:clamp(38px,5.6vw,62px);margin-bottom:20px;max-width:17ch}
/* The accent half is always the second sentence, so it starts its own line.
   Inline, it orphans that sentence's first word at the end of the line above. */
.sc-hero h1 em{font-style:normal;color:var(--acct);display:block}
.sc-sub{font-size:clamp(16px,1.8vw,19px);color:var(--txt);max-width:56ch;margin:0 0 30px}
.sc-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.sc-mic{font-size:14px;color:var(--mut)}
.sc-cols{display:grid;grid-template-columns:1fr;gap:30px;align-items:center;margin-top:44px}

.sc-vid{border:1.5px solid var(--line);border-radius:var(--rad);overflow:hidden;background:var(--bg3)}
.sc-vidf{aspect-ratio:16/9;display:grid;place-items:center;position:relative}
.sc-vidf iframe,.sc-vidf video{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.sc-play{width:70px;height:70px;border-radius:50%;background:var(--acc);display:grid;place-items:center}
.sc-play::after{content:'';border-left:19px solid var(--btn);border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:5px}
.sc-vlab{position:absolute;bottom:14px;left:0;right:0;text-align:center;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.sc-vby{display:flex;align-items:center;gap:11px;margin-top:14px}
.sc-vby img{width:42px;height:42px;border-radius:50%;object-fit:cover;object-position:center 18%}
.sc-vby span{font-size:13px;font-weight:600;color:var(--mut)}

.sc-fc{border:1.5px solid var(--line);border-radius:var(--rad);background:var(--bg2);padding:26px;box-shadow:0 2px 0 var(--line)}
.sc-fch{font-family:var(--disp);font-weight:var(--dw);font-size:22px;color:var(--ink);text-align:center;margin:0 0 5px}
.sc-fcs{font-size:14px;color:var(--mut);text-align:center;margin:0 0 20px}
.sc-fcp{border:1.5px dashed var(--line);border-radius:var(--rad);padding:40px 16px;text-align:center}
.sc-fcp p{font-size:14px;color:var(--mut);margin:0 0 16px}
.sc-fcslot iframe{width:100%;border:0;display:block}
.sc-fct{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.sc-fct span{font-size:13px;color:var(--mut)}

/* ---- sections ----------------------------------------------------------- */
.sc-s{padding:68px 0}
.sc-s--alt{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sc-eb{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--acct);margin:0 0 14px}
.sc-h2{font-size:clamp(28px,4vw,42px);margin-bottom:16px;max-width:20ch}
.sc-ld{font-size:17px;color:var(--txt);max-width:58ch;margin:0 0 34px}
.sc-ctr{text-align:center}.sc-ctr .sc-h2,.sc-ctr .sc-ld{margin-left:auto;margin-right:auto}

.sc-vals{display:grid;grid-template-columns:1fr;gap:20px}
.sc-val{border:1.5px solid var(--line);border-radius:var(--rad);background:var(--bg2);padding:28px}
.sc-valn{font-family:var(--disp);font-weight:var(--dw);font-size:15px;color:var(--acct);margin:0 0 12px;letter-spacing:.06em}
.sc-val h3{font-size:23px;margin-bottom:9px}
.sc-val p{font-size:15px;margin:0}

.sc-cred{display:grid;grid-template-columns:1fr;gap:28px;align-items:start}
.sc-credi{width:160px;height:160px;border-radius:var(--rad);object-fit:cover;object-position:center 18%;border:1.5px solid var(--line)}
.sc-credn{font-weight:700;font-size:16px;color:var(--ink);margin:14px 0 2px}
.sc-credr{font-size:14px;color:var(--acct);margin:0}
.sc-cred p{font-size:16px;max-width:58ch}

.sc-advs{display:grid;grid-template-columns:1fr;gap:18px;margin-top:32px}
.sc-adv{display:grid;grid-template-columns:70px 1fr;gap:16px;border:1.5px solid var(--line);border-radius:var(--rad);background:var(--bg2);padding:20px}
.sc-adv img{width:70px;height:70px;border-radius:var(--rad);object-fit:cover;object-position:center 18%}
.sc-advn{font-weight:700;font-size:16px;color:var(--ink);margin:0 0 2px}
.sc-advr{font-size:13px;color:var(--acct);margin:0 0 7px}
.sc-advc{font-size:13px;color:var(--mut);margin:0 0 6px}
.sc-advb{font-size:14px;margin:0}

.sc-fin{padding:78px 0;text-align:center;background:var(--bg2);border-top:1px solid var(--line)}
.sc-fin h2{max-width:18ch;margin:0 auto 16px}
.sc-fin p{max-width:50ch;margin:0 auto 26px}
.sc-bits{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:24px}
.sc-bits span{font-size:13px;color:var(--mut);border:1px solid var(--line);border-radius:999px;padding:6px 14px}

.sc-ft{border-top:1px solid var(--line);padding:30px 0;background:var(--bg)}
.sc-ft .sc-w{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.sc-ftb{font-family:var(--disp);font-weight:var(--dw);font-size:19px;color:var(--ink);margin-bottom:5px}
.sc-ftm{font-size:13px;color:var(--mut);line-height:1.7}
.sc-ftl{display:flex;gap:16px;flex-wrap:wrap}
.sc-ftl a{font-size:14px;color:var(--txt);text-decoration:none}
.sc-ftl a:hover{color:var(--acct)}
.sc-sticky{display:none}

/* ============================================================
   PER-THEME SIGNATURES
   ============================================================ */

/* Safety Yellow: a full-bleed band behind the headline, hazard-stripe rules */
html[data-sc-theme="safety-yellow"] .sc-hero{padding-top:0}
html[data-sc-theme="safety-yellow"] .sc-band{background:var(--acc);border-bottom:3px solid var(--ink);padding:44px 0 46px;margin-bottom:38px}
html[data-sc-theme="safety-yellow"] .sc-band h1{max-width:19ch}
html[data-sc-theme="safety-yellow"] .sc-band .sc-pill{border-color:var(--ink);background:var(--ink);color:var(--bg)}
html[data-sc-theme="safety-yellow"] .sc-band .sc-pill i{background:var(--acc)}
html[data-sc-theme="safety-yellow"] .sc-hero h1 em{color:var(--ink);text-decoration:underline;text-decoration-thickness:5px;text-underline-offset:7px}
html[data-sc-theme="safety-yellow"] .sc-s--alt{border-top:0}
html[data-sc-theme="safety-yellow"] .sc-s--alt::before{content:'';display:block;height:9px;margin-bottom:56px;
  background:repeating-linear-gradient(45deg,var(--ink) 0 11px,var(--acc) 11px 22px)}
html[data-sc-theme="safety-yellow"] .sc-val{border-width:2.5px;border-color:var(--ink)}
html[data-sc-theme="safety-yellow"] .sc-b{border:2.5px solid var(--ink)}

/* Red Thread: centred and editorial, one thread down the full page */
html[data-sc-theme="red-thread"] body::before{content:'';position:fixed;left:50%;top:0;bottom:0;width:1px;
  background:var(--acc);opacity:.22;pointer-events:none;z-index:0}
html[data-sc-theme="red-thread"] .sc-hero,html[data-sc-theme="red-thread"] .sc-s,
html[data-sc-theme="red-thread"] .sc-fin,html[data-sc-theme="red-thread"] .sc-ft,
html[data-sc-theme="red-thread"] .sc-hd{position:relative;z-index:1}
html[data-sc-theme="red-thread"] .sc-hero>.sc-w{text-align:center}
html[data-sc-theme="red-thread"] .sc-hero h1{max-width:none}
html[data-sc-theme="red-thread"] .sc-hero .sc-sub{margin-left:auto;margin-right:auto}
html[data-sc-theme="red-thread"] .sc-hero .sc-row{justify-content:center}
html[data-sc-theme="red-thread"] .sc-cols{text-align:left}
html[data-sc-theme="red-thread"] .sc-hero h1 em{font-style:italic}
html[data-sc-theme="red-thread"] .sc-pill{border-color:var(--acc);color:var(--acct)}
html[data-sc-theme="red-thread"] .sc-fc{box-shadow:none;border-width:1px}

/* Signal Coral: a strict functional grid, modules numbered in the margin */
html[data-sc-theme="signal-coral"] .sc-s{position:relative}
html[data-sc-theme="signal-coral"] .sc-s[data-n]::before{content:attr(data-n);position:absolute;left:22px;top:44px;
  font-size:12px;font-weight:600;letter-spacing:.2em;color:var(--mut)}
html[data-sc-theme="signal-coral"] .sc-hero h1{letter-spacing:-.03em;line-height:.96}
html[data-sc-theme="signal-coral"] .sc-h2{letter-spacing:-.03em}
html[data-sc-theme="signal-coral"] .sc-valn{width:30px;height:30px;border-radius:50%;background:var(--acc);
  color:var(--btn);display:grid;place-items:center;font-size:13px}

/* ============================================================
   RESULTS PAGE
   ============================================================ */
.sc-res{padding:30px 0 10px}
.sc-reveal{text-align:center;padding:16px 0 6px}
.sc-gauge{width:min(340px,80vw);margin:0 auto;display:block}
.sc-gauge__needle{transform-origin:150px 145px;transition:transform 1.5s cubic-bezier(.22,.85,.28,1)}
.sc-gauge__num{font-family:var(--disp);font-weight:var(--dw);font-size:52px;fill:var(--ink)}
.sc-gauge__of{font-family:var(--body);font-weight:500;font-size:16px;fill:var(--mut)}
.sc-bandtag{display:inline-flex;align-items:center;background:var(--acc);border-radius:999px;padding:8px 18px;
  font-family:var(--body);font-size:13px;font-weight:700;color:var(--btn);margin:4px 0 16px}
.sc-reveal h1{font-size:clamp(26px,3.8vw,40px);max-width:20ch;margin:0 auto 10px}

.sc-pillars{display:grid;gap:22px;max-width:760px;margin:0 auto}
.sc-ptop{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:9px}
.sc-pn{font-family:var(--body);font-size:14px;font-weight:700;color:var(--ink)}
.sc-pv{font-family:var(--disp);font-size:26px;font-weight:var(--dw);color:var(--acct)}
.sc-pv i{font-style:normal;font-family:var(--body);font-size:12px;font-weight:400;color:var(--mut)}
.sc-bar{height:12px;border-radius:999px;background:var(--bg3);overflow:hidden;border:1px solid var(--line)}
.sc-bar i{display:block;height:100%;width:0;border-radius:999px;background:var(--acc);
  transition:width 1s cubic-bezier(.22,.8,.3,1)}
.sc-pillar.is-weak .sc-bar i{background:#C8202A}
.sc-pillar.is-weak .sc-pv{color:#C8202A}
.sc-ptag{font-size:12px;font-weight:600;color:#C8202A;margin:8px 0 0}
@media(prefers-reduced-motion:reduce){.sc-bar i,.sc-gauge__needle{transition:none}}

.sc-ins{display:grid;grid-template-columns:1fr;gap:18px}
.sc-insc{border:1.5px solid var(--line);border-radius:var(--rad);background:var(--bg2);padding:26px;display:flex;flex-direction:column}
.sc-insn{width:32px;height:32px;border-radius:50%;background:var(--acc);color:var(--btn);display:grid;place-items:center;
  font-family:var(--body);font-weight:700;font-size:13px;margin-bottom:15px}
.sc-insc h3{font-size:20px;margin-bottom:10px}
.sc-insb{font-size:14.5px;margin:0 0 16px}
.sc-insf{font-size:14px;margin:auto 0 0;padding-top:15px;border-top:1px solid var(--line)}
.sc-insf b{color:var(--acct)}

.sc-next{border:1.5px solid var(--acc);border-radius:var(--rad);background:var(--bg2);padding:clamp(26px,4vw,42px);text-align:center}
.sc-next h2{font-size:clamp(23px,3.2vw,34px);max-width:22ch;margin:0 auto 14px}
.sc-next p{max-width:50ch;margin:0 auto 24px}
.sc-fallback{text-align:center;padding:60px 0}
.sc-fallback h1{max-width:20ch;margin:0 auto 16px}
.sc-fallback .sc-ld{margin:0 auto 26px}

/* ============================================================
   RESPONSIVE: built at 375, enhanced upward
   ============================================================ */
@media(min-width:820px){
  .sc-vals,.sc-ins{grid-template-columns:repeat(3,1fr)}
  .sc-advs{grid-template-columns:1fr 1fr}
  .sc-cred{grid-template-columns:180px 1fr;gap:40px}
  .sc-cols{grid-template-columns:1.05fr .95fr;gap:40px}
}
@media(max-width:819px){
  .sc-hero h1{max-width:none}
  .sc-s{padding:52px 0}
  body{padding-bottom:78px}
  /* the header CTA wraps to two lines at 375, and the sticky bar already does
     that job on a phone */
  .sc-hd .sc-b{display:none}
  .sc-sticky{display:block;position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--bg2);
    border-top:1.5px solid var(--line);padding:11px 16px calc(11px + env(safe-area-inset-bottom))}
  .sc-sticky .sc-b{width:100%}
  .sc-ft .sc-w{flex-direction:column}
}