/* Free AI Check (/ai-check/): the live IT Check's look (world3d-electric\assessment.html, its <style> block), so
   someone who takes both gets the same experience. Built by web\build-web.mjs into ai-security\assets\ai-check.css.
   Changes from the IT Check: brand fonts self hosted (ai.css), labels above questions left out (no all caps
   eyebrows), square boxes for "pick all that apply", the instant note, area cards per guide chapter, and the
   result screen's clip, downloads and print styles. */
:root{
  --cream:#eef2f7; --paper:#ffffff; --ink:#0b1220; --ink-soft:#48566a;
  --accent:#1479ff; --accent-deep:#0b57d0; --warm:#e8853d; --cyan:#12b5cf;
  --good:#1a9d5a; --risk:#d8642e;
  --warm-t:#a8500a; --good-t:#0e6b3f; --risk-t:#a83411;
  --line:rgba(11,18,32,.12); --shadow:0 18px 50px -18px rgba(11,18,32,.28);
  --disp:'Sora',sans-serif; --body:'Inter',system-ui,sans-serif;
  --hero-soft:#48566a; --hero-ink:#0b1220;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--body);color:var(--ink);min-height:100dvh;
  background:
    radial-gradient(55% 42% at 88% -4%, rgba(20,121,255,.10), transparent 60%),
    radial-gradient(48% 40% at 6% 3%, rgba(18,181,207,.09), transparent 60%),
    radial-gradient(130% 100% at 50% -10%, #e2ecf7 0%, var(--cream) 55%)}
a{color:var(--accent-deep);text-decoration:none}
a:hover{color:#083f99}
[tabindex="-1"]:focus{outline:none}
#results-cta{position:fixed;left:0;right:0;bottom:0;z-index:30;display:none;align-items:center;justify-content:center;
  padding:.7rem clamp(1rem,4vw,1.6rem);background:color-mix(in srgb,#ffffff 90%,transparent);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);box-shadow:0 -10px 30px -14px rgba(11,18,32,.3)}
#results-cta .btn{margin:0;width:min(440px,100%);text-align:center}
body.on-results #results-cta{display:flex}
body.on-results{padding-bottom:5rem}

/* header */
header.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:1rem;
  padding:.7rem clamp(1rem,4vw,2rem);background:color-mix(in srgb,#ffffff 72%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid rgba(11,18,32,.08)}
header.bar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(18,181,207,.45) 28%,rgba(20,121,255,.6) 55%,transparent);opacity:.75}
header.bar .brand{display:flex;align-items:center;text-decoration:none}
header.bar img{height:28px;width:auto;display:block}
header.bar .call{margin-left:auto;display:inline-flex;align-items:center;min-height:44px;font-size:.82rem;font-weight:600;color:#fff;background:var(--accent);text-decoration:none;
  padding:.5rem .95rem;border-radius:99px;white-space:nowrap;box-shadow:0 6px 18px -6px rgba(20,121,255,.6)}
header.bar .call:hover{background:var(--accent-deep);color:#fff}

/* layout */
main{max-width:680px;margin:0 auto;padding:clamp(1.4rem,4vw,2.6rem) clamp(1rem,4vw,1.6rem) 3rem}
h1{font-family:var(--disp);font-size:clamp(1.9rem,5.4vw,2.7rem);line-height:1.12;letter-spacing:-.01em;margin:0 0 .8rem}
h2{font-family:var(--disp);font-size:clamp(1.4rem,4vw,1.9rem);line-height:1.2;margin:0 0 .6rem}
h3{font-family:var(--disp);font-size:1.12rem;line-height:1.3;margin:1.6rem 0 .6rem}
.lede{color:var(--ink-soft);font-size:1.0625rem;line-height:1.65;max-width:52ch;margin:0 0 1rem}
.card{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:clamp(1.4rem,4vw,2.1rem);box-shadow:var(--shadow)}

/* buttons: the IT Check's own */
.btn{display:inline-block;font-weight:600;font-size:1rem;text-decoration:none;padding:.85rem 1.5rem;border-radius:13px;border:none;cursor:pointer;font-family:var(--body);text-align:center}
.btn.primary{background:var(--accent);color:#fff;box-shadow:0 10px 24px -8px rgba(20,121,255,.6)}
.btn.primary:hover{background:var(--accent-deep);color:#fff}
.btn.ghost{color:var(--ink);border:1.5px solid rgba(11,18,32,.22);background:transparent}
.btn.ghost:hover{border-color:var(--ink);color:var(--ink)}
.btn:disabled{opacity:.55;cursor:default}
.btn.big{font-size:1.05rem;padding:.95rem 1.7rem}

/* screens */
.screen{display:none;animation:fade .35s ease}
.screen.on{display:block}
html.no-js .screen{display:none!important}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .screen{animation:none} .progress .fill{transition:none} }

/* intro */
.trust{margin-top:1.2rem;font-size:.92rem;font-weight:600;color:var(--ink-soft)}

/* progress */
.progress{display:flex;align-items:center;gap:.8rem;margin-bottom:1.2rem}
.progress .track{flex:1;height:6px;border-radius:99px;background:color-mix(in srgb,var(--ink) 10%,transparent);overflow:hidden}
.progress .fill{height:100%;background:var(--accent);border-radius:99px;transition:width .35s ease}
.progress .count{font-size:.86rem;font-weight:600;color:var(--ink-soft);white-space:nowrap}

/* question options */
.qhelp{color:var(--ink-soft);font-size:.98rem;line-height:1.55;margin:.2rem 0 1.1rem}
.qhelp[hidden]{display:none}
.opts{display:grid;gap:.7rem;margin-top:1rem}
.opt{display:flex;align-items:center;gap:.8rem;text-align:left;width:100%;
  border:1.5px solid var(--line);border-radius:14px;padding:1rem 1.1rem;background:var(--paper);
  font-family:var(--body);font-size:1.02rem;font-weight:500;color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s}
.opt:hover{border-color:var(--accent)}
.opt.sel{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,#fff)}
.opt .dot{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid rgba(11,18,32,.3)}
.opt.multi .dot{border-radius:5px}
.opt.sel .dot{border-color:var(--accent);background:var(--accent);box-shadow:inset 0 0 0 3px #fff}
.other{margin-top:.9rem}
.other[hidden]{display:none}
.other label{display:block;font-size:.9rem;font-weight:600;margin-bottom:.3rem}
.other input{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:.8rem .9rem;font:inherit;font-size:1rem}
.qnote{margin:1.1rem 0 0;padding:.95rem 1.1rem;border-radius:14px;background:#fff7ef;border:1px solid #f1cfae;color:#5a3410;font-size:1rem;line-height:1.6}
.qnote[hidden]{display:none}
.qnav{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.1rem}
.qnav .back{background:none;border:none;color:var(--ink-soft);font-weight:600;font-size:.95rem;cursor:pointer;padding:.7rem .6rem;min-height:44px;margin-left:-.6rem}
.qnav .back:hover{color:var(--ink)}
.qnav .btn[hidden]{display:none}

/* results */
.score-wrap{display:flex;align-items:center;gap:1.3rem;flex-wrap:wrap}
.score-num{font-family:var(--disp);font-weight:700;font-size:clamp(3rem,12vw,4.6rem);line-height:1}
.score-num small{font-size:.35em;color:var(--ink-soft);font-weight:600}
.band{font-family:var(--disp);font-weight:700;font-size:1.35rem}
.band.good{color:var(--good-t)} .band.mid{color:var(--warm-t)} .band.risk{color:var(--risk-t)}
.rule-line{color:var(--ink-soft);font-size:1rem;line-height:1.55;margin:.35rem 0 0;max-width:48ch}
.rule-line b{display:block;color:var(--ink);font-size:.9rem}
.areas{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.areas li{border:1px solid var(--line);border-radius:14px;padding:.95rem 1.05rem;background:var(--cream)}
.areas .fa{font-size:.86rem;font-weight:700;margin-bottom:.25rem}
.areas .ok .fa{color:var(--good-t)} .areas .gap .fa{color:var(--risk-t)} .areas .na .fa{color:var(--ink-soft)}
.areas .ft{font-family:var(--disp);font-weight:600;font-size:1rem;margin-bottom:.2rem}
.areas .fn{font-size:.94rem;color:var(--ink-soft);line-height:1.5}
@media (max-width:560px){ .areas{grid-template-columns:1fr} }

/* action plan teaser (withheld until the contact step) */
.plan{margin-top:1.6rem;border:1.5px dashed color-mix(in srgb,var(--accent) 40%,#fff);border-radius:16px;padding:1.2rem 1.2rem 1.3rem;
  background:color-mix(in srgb,var(--accent) 5%,#fff);position:relative;overflow:hidden}
.plan h3{margin:0 0 .25rem;display:flex;align-items:center;gap:.5rem}
.plan .sub{color:var(--ink-soft);font-size:.98rem;margin:0 0 .8rem}
.plan .locked{filter:blur(4.5px);user-select:none;pointer-events:none;opacity:.8}
.plan .locked div{display:flex;gap:.6rem;align-items:center;margin:.5rem 0;font-weight:600}
.plan .locked .n{width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:.8rem;flex:none}
.plan .locked .bar{height:12px;border-radius:6px;background:color-mix(in srgb,var(--ink) 20%,transparent);flex:1}
.cta-row{margin-top:1.4rem;display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}

/* capture form */
.field{margin-bottom:1rem}
.field label{display:block;font-size:.9rem;font-weight:600;margin-bottom:.3rem}
.field input,.field select{width:100%;border:1.5px solid rgba(11,18,32,.22);border-radius:12px;padding:.8rem .9rem;font-family:var(--body);font-size:1rem;color:var(--ink);background:var(--paper)}
.field input:focus,.field select:focus{outline:none;border-color:var(--accent)}
.field.err input{border-color:var(--risk-t)}
.field .err-msg{display:none;color:var(--risk-t);font-size:.86rem;margin-top:.3rem}
.field.err .err-msg{display:block}
.field .opt-note{color:var(--ink-soft);font-weight:400}
.two{display:grid;gap:0 1rem}
@media (min-width:560px){ .two{grid-template-columns:1fr 1fr} }
.consent{font-size:.86rem;color:var(--ink-soft);line-height:1.5;margin:.4rem 0 1.1rem}
.form-note{font-size:.92rem;color:var(--ink-soft);margin-top:.9rem}
.fail{margin:.7rem 0 0;font-size:.95rem;color:#b91c1c}

/* the plan, unlocked */
.check-mark{width:56px;height:56px;border-radius:50%;background:color-mix(in srgb,var(--good) 16%,#fff);color:var(--good-t);display:grid;place-items:center;font-size:1.7rem;margin-bottom:1rem}
.actionplan{list-style:none;margin:1.3rem 0 .4rem;padding:0;display:grid;gap:.75rem}
.actionplan li{display:flex;gap:.8rem;align-items:flex-start;border:1px solid var(--line);border-radius:14px;padding:1rem 1.05rem;background:var(--cream)}
.actionplan .n{flex:none;width:28px;height:28px;border-radius:50%;background:var(--accent-deep);color:#fff;display:grid;place-items:center;font-size:.86rem;font-weight:700}
.actionplan .t b{display:block;font-family:var(--disp);font-size:1.02rem;margin-bottom:.3rem}
.actionplan .t b a{color:var(--ink)}
.actionplan .t span{display:block;font-size:.96rem;line-height:1.55;color:#334155;margin-top:.25rem}
.actionplan .t .said{color:var(--ink-soft);font-weight:600}
.actionplan .t .fix a{font-weight:600}
#s-wants p{margin:0;color:#334155;line-height:1.6}
#s-clip{margin-top:1.4rem}
#s-clip[hidden],#s-wants[hidden],.actionplan[hidden]{display:none}
#s-clip .clip{margin:0 auto}
.dl-list{list-style:none;margin:.4rem 0 0;padding:0;display:grid;gap:.5rem}
.dl-list li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.4rem 1rem;padding:.75rem .95rem;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.dl-list b{font-family:var(--disp);font-size:.98rem}
.dl-list span{font-size:.9rem;color:var(--ink-soft)}
.dl-list a{font-weight:600}

footer{max-width:680px;margin:0 auto;padding:1rem clamp(1rem,4vw,1.6rem) 2.4rem;color:var(--ink-soft);font-size:.86rem;text-align:center}

.next-steps{margin:.4rem 0 0;padding-left:1.3rem;display:grid;gap:.6rem}
.next-steps li{font-size:.96rem;line-height:1.55;color:#334155}
.next-steps b{color:var(--ink)}
.print-head,.print-foot,.print-only{display:none}

/* "Download my plan" prints this screen as a one or two page plan: Electric's header with their name and the date,
   whole cards that never split, the next steps in words, and none of the browser's own header and footer
   (a zero page margin leaves the browser no room for them, so the page pads itself instead). */
@media print{
  @page{size:Letter;margin:0}
  header.bar,footer,#results-cta,.cta-row,#hs-modal,.screen:not(#screen-success),#s-clip,.check-mark,#s-head,h3:has(+ .dl-list),.dl-list{display:none!important}
  body{background:#fff;padding:.55in .65in}
  .card{box-shadow:none;border:0;padding:0;max-width:none}
  .print-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:.7rem;margin-bottom:1rem;border-bottom:2px solid var(--accent-deep)}
  .print-head img{height:30px;width:auto}
  .print-head b{display:block;font-family:var(--disp);font-size:1.15rem;text-align:right}
  .print-head span{display:block;font-size:.85rem;color:var(--ink-soft);text-align:right}
  .print-only{display:inline}
  .print-foot{display:block;margin-top:1.4rem;padding-top:.6rem;border-top:1px solid var(--line);font-size:.8rem;color:var(--ink-soft);text-align:center}
  .actionplan li,.next-steps li{break-inside:avoid}
  .actionplan li{background:#fff}
  h3{break-after:avoid}
  a{color:var(--ink);text-decoration:none}
}