/* Dark is the default. The page has its own light/dark toggle (body.light). */
:root{
  color-scheme: dark;
  --ground:#000000; --surface:#0F0F0F; --surface-2:#161616; --line:#2C2C2C; --line-soft:#1E1E1E;
  --ink:#FFFFFF; --text:#DEDEDE; --muted:#9C9C9C; --placeholder:#6A6A6A;
  --brand-1:#FFFFFF; --brand-2:#C8C8C8; --eyebrow:#B5B5B5; --link:#FFFFFF;
  --primary:#FFFFFF; --primary-hover:#DADADA; --on-primary:#000000;
  --sel:#FFFFFF; --on-sel:#000000; --sel-soft:#1C1C1C; --sel-line:#FFFFFF;
  --field:#0A0A0A; --field-hover:#4A4A4A;
  --bar:#D6D6D6; --bar-hover:#FFFFFF; --meter-on:#D6D6D6;
  --good:#6FD3A0; --good-bg:#10291F; --warn:#F0C36A; --warn-bg:#2E250F; --crit:#F29B92; --crit-bg:#331618;
  --code-bg:#000000; --code-text:#DDDDDD; --shadow:none;
  --focus:rgba(79,209,197,.55);
  --teal:#4FD1C5; --navy-deep:#0F2044;
  --aurora: linear-gradient(90deg,#2F6FD0,#3AA0D8 55%,#4FD1C5);
  --head: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}
body.light{
  color-scheme: light;
  --ground:#F3F6FA; --surface:#FFFFFF; --surface-2:#F3F6FA; --line:#D8E1EC; --line-soft:#E8EEF5;
  --ink:#16294F; --text:#26334A; --muted:#5A6A84; --placeholder:#94A2B8;
  --brand-1:#16294F; --brand-2:#2447A0; --eyebrow:#2C6CB0; --link:#2447A0;
  --primary:#16294F; --primary-hover:#2447A0; --on-primary:#FFFFFF;
  --sel:#16294F; --on-sel:#FFFFFF; --sel-soft:#F2F6FD; --sel-line:#2447A0;
  --field:#FFFFFF; --field-hover:#B9C7D9;
  --bar:#2447A0; --bar-hover:#16294F; --meter-on:#2C6CB0;
  --good:#1F7A4D; --good-bg:#E4F4EC; --warn:#8A5A00; --warn-bg:#FBF0D9; --crit:#A3302A; --crit-bg:#F9E3E1;
  --code-bg:#0F2044; --code-text:#D6E2F3;
  --focus:rgba(58,160,216,.45);
}
*{box-sizing:border-box}
html{background:#000}
html:has(body.light){background:#F3F6FA}
body{background:var(--ground);font-family:var(--body);color:var(--text);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh}
h1,h2,h3{font-family:var(--head);color:var(--ink);text-wrap:balance;margin:0}
h1{font-weight:700;font-size:clamp(26px,4vw,36px);line-height:1.18;letter-spacing:-.01em}
h2{font-weight:600;font-size:22px;line-height:1.25}
h3{font-weight:500;font-size:16px}
p{margin:0}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.logo-img{background-image:url("/logo.jpg");background-repeat:no-repeat}
/* The logo file has a white ground. In dark mode, invert + hue-rotate + screen turns it into a light-on-dark version. */
body:not(.light) .logo-img{filter:invert(1) hue-rotate(180deg) saturate(1.2);mix-blend-mode:screen}

/* Header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--surface);border-bottom:1px solid var(--line)}
.top::after{content:"";display:block;height:3px;background:var(--aurora)}
.top-in{max-width:1180px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.logo-symbol{width:82px;height:34px;background-size:120px auto;background-position:-18px -6px;flex:none}
.wordmark{font-family:var(--head);line-height:1}
.wordmark .w1{display:block;font-weight:500;font-size:15px;letter-spacing:.16em;color:var(--brand-1)}
.wordmark .w2{display:flex;align-items:center;gap:6px;font-weight:500;font-size:9.5px;letter-spacing:.34em;color:var(--brand-2);margin-top:4px}
.wordmark .w2::before,.wordmark .w2::after{content:"";height:1px;width:14px;background:var(--brand-2)}
.top-title{font-family:var(--head);font-weight:600;font-size:14px;color:var(--muted);padding-left:14px;border-left:1px solid var(--line)}
.spacer{flex:1}
.viewtoggle{display:flex;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:3px}
.viewtoggle button{border:0;background:transparent;color:var(--muted);font-weight:600;font-size:13px;padding:6px 14px;border-radius:999px}
.viewtoggle button[aria-pressed="true"]{background:var(--sel);color:var(--on-sel)}
.theme-btn{border:1px solid var(--line);background:var(--surface-2);color:var(--ink);border-radius:999px;height:36px;padding:0 12px;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600}
.theme-btn svg{width:16px;height:16px}
.demo-note{background:var(--surface-2);border-bottom:1px solid var(--line);color:var(--muted);font-size:12.5px}
.demo-note div{max-width:1180px;margin:0 auto;padding:6px 16px}
.demo-note b{color:var(--ink);font-weight:600}
.mob{display:none}
.wrap{max-width:1180px;margin:0 auto;padding-inline:16px;padding-block:28px 64px}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:8px;padding:11px 20px;font-weight:600;font-size:14.5px;border:1px solid transparent;transition:background .15s,border-color .15s}
.btn-primary{background:var(--primary);color:var(--on-primary)}
.btn-primary:hover{background:var(--primary-hover)}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--sel-line)}
.btn-link{background:none;border:0;color:var(--link);font-weight:600;padding:4px 0;text-decoration:underline;text-underline-offset:3px}
.btn svg{width:16px;height:16px}

/* Cover */
.cover{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:48px 32px 36px;display:grid;justify-items:center;text-align:center;gap:18px;max-width:980px;margin:0 auto}
.cover::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--aurora)}
.cover .logo-full{max-width:400px;margin:0;background-position:center}
.cover .rule{width:120px;height:2px;background:var(--aurora);border-radius:2px}
.cover h1{font-size:clamp(34px,5.5vw,52px);letter-spacing:-.015em}
.cover .for{font-family:var(--head);font-weight:500;font-size:18px;color:var(--muted)}
.cover .for b{color:var(--ink);font-weight:600}
.cover .tone{font-size:18px;line-height:1.65;max-width:60ch;color:var(--text)}
.cover .tone strong{color:var(--ink);font-weight:600}
.cover-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.cover-meta span{border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:13.5px;color:var(--muted)}
.cover-meta b{color:var(--ink);font-weight:600}
.cover .cta-row{justify-content:center}
.cover .tagline{margin-top:14px;padding-top:18px;border-top:1px solid var(--line-soft);width:100%;font-family:var(--head);font-weight:500;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}

/* Welcome + intro */
.welcome{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:28px;align-items:start}
.hero{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:32px;display:grid;gap:18px}
.logo-full{width:100%;max-width:300px;aspect-ratio:916/601;background-size:contain;background-position:left center;margin:-12px 0 -6px -8px}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--eyebrow)}
.lede{font-size:16.5px;color:var(--text);max-width:62ch}
.org-line{display:flex;gap:6px 16px;flex-wrap:wrap;font-size:13.5px;color:var(--muted)}
.org-line b{color:var(--ink);font-weight:600}
.cta-row{display:flex;gap:12px 16px;flex-wrap:wrap;align-items:center;margin-top:6px}
.side-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px;display:grid;gap:16px}
.expect{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.expect li{display:grid;grid-template-columns:28px 1fr;gap:10px;font-size:14px}
.expect .ico{width:28px;height:28px;border-radius:7px;background:var(--sel-soft);border:1px solid var(--line);color:var(--ink);display:grid;place-items:center;font-weight:700;font-family:var(--head);font-size:12px}
.expect strong{display:block;color:var(--ink);font-weight:600}
.sect-list{counter-reset:s;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px;margin:0;padding:0;list-style:none;font-size:13.5px}
.sect-list li{display:flex;gap:10px;color:var(--text)}
.sect-list li::before{counter-increment:s;content:counter(s);font-family:var(--head);font-weight:600;color:var(--eyebrow);width:18px;text-align:right;flex:none;font-variant-numeric:tabular-nums}

.intro{max-width:860px;margin:0 auto;display:grid;gap:20px}
.intro .panel{display:grid;gap:22px}
.intro .big{font-size:17px;line-height:1.6;color:var(--text);max-width:66ch}
.intro .big strong{color:var(--ink)}
.tips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tip{border:1px solid var(--line);background:var(--surface-2);border-radius:10px;padding:14px 16px;display:grid;gap:4px;font-size:14px}
.tip b{color:var(--ink);font-family:var(--head);font-weight:600;font-size:14.5px}
.tip em{font-style:normal;color:var(--muted);font-size:13px;display:block;margin-top:4px;border-left:2px solid var(--teal);padding-left:10px}
.intro-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:600px){.intro-facts{grid-template-columns:1fr}}
.next-steps{counter-reset:n;list-style:none;margin:0;padding:0;display:grid;gap:10px}
.next-steps li{display:grid;grid-template-columns:30px 1fr;gap:12px;font-size:14.5px;align-items:start}
.next-steps li::before{counter-increment:n;content:counter(n);width:30px;height:30px;border-radius:50%;border:1.5px solid var(--sel-line);color:var(--ink);display:grid;place-items:center;font-weight:700;font-size:13px}
.next-steps b{color:var(--ink)}
.promise{border-top:1px solid var(--line-soft);padding-top:18px;color:var(--muted);font-size:13.5px}

/* Assessment layout */
.shell{display:grid;grid-template-columns:250px minmax(0,1fr);gap:28px;align-items:start}
.rail{position:sticky;top:calc(env(safe-area-inset-top,0px) + 86px);display:grid;gap:14px}
.progress{height:6px;background:var(--line-soft);border-radius:999px;overflow:hidden}
.progress span{display:block;height:100%;background:var(--aurora);border-radius:999px;transition:width .3s}
.prog-label{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.steps button{width:100%;text-align:left;border:0;background:transparent;border-radius:8px;padding:7px 10px;display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:center;color:var(--text);font-size:13.5px}
.steps button:hover{background:var(--surface)}
.steps button[aria-current="step"]{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:inset 0 0 0 1px var(--line)}
.dot{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--muted);background:var(--surface);font-variant-numeric:tabular-nums}
.dot.done{background:var(--sel);border-color:var(--sel);color:var(--on-sel)}
.dot.cur{border-color:var(--sel-line);color:var(--ink)}
.saved{font-size:12px;color:var(--muted)}
.saved::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--teal);margin-right:6px;vertical-align:1px}
.who{font-size:12.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:12px}
.who b{display:block;color:var(--ink);font-weight:600;font-size:13.5px}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:30px 32px}
.sec-head{display:grid;gap:8px;padding-bottom:20px;margin-bottom:6px;border-bottom:1px solid var(--line-soft)}
.sec-head .eyebrow{color:var(--muted)}
.sec-head p{color:var(--muted);max-width:64ch}
.q{padding-block:20px;border-bottom:1px solid var(--line-soft);display:grid;gap:10px}
.q.open-q{background:var(--surface-2);border:1px dashed var(--line);border-radius:12px;padding:18px;margin-top:16px}
.q-label{font-weight:600;color:var(--ink);font-size:15px;line-height:1.45}
.req{color:var(--teal);font-weight:600;margin-left:3px}
.opt{font-weight:500;color:var(--muted);font-size:12.5px;margin-left:6px}
.only{display:inline-block;font-weight:600;color:var(--eyebrow);font-size:11px;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:1px 8px;margin-left:8px;vertical-align:2px}
.q-help{font-size:13.5px;color:var(--muted);margin-top:-6px;max-width:68ch}
.q.invalid .q-label{color:var(--crit)}
.err{font-size:13px;color:var(--crit);font-weight:500}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 20px;border-bottom:1px solid var(--line-soft)}
.grid2 .q{border-bottom:0;padding-block:14px}

input[type=text],input[type=email],input[type=number],select,textarea{
  width:100%;font:inherit;font-size:15px;color:var(--ink);background:var(--field);
  border:1px solid var(--line);border-radius:8px;padding:10px 12px;transition:border-color .15s,box-shadow .15s}
textarea{min-height:96px;resize:vertical;line-height:1.55;overflow:hidden}
textarea.tall{min-height:150px}
textarea.short{min-height:74px}
input:hover,select:hover,textarea:hover{border-color:var(--field-hover)}
input:focus,select:focus,textarea:focus{outline:none;border-color:#3AA0D8;box-shadow:0 0 0 3px var(--focus)}
.q.invalid input,.q.invalid select,.q.invalid textarea{border-color:var(--crit)}
::placeholder{color:var(--placeholder)}
option{background:var(--surface);color:var(--ink)}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);background:var(--field);color:var(--text);border-radius:999px;padding:7px 14px;font-size:13.5px;font-weight:500;display:inline-flex;align-items:center;gap:8px}
.chip:hover{border-color:var(--sel-line)}
.chip[aria-pressed="true"]{background:var(--sel);border-color:var(--sel);color:var(--on-sel)}
.chip .rk{width:18px;height:18px;border-radius:50%;background:var(--teal);color:#0F2044;font-size:11px;font-weight:700;display:grid;place-items:center}

.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}
.choice{border:1px solid var(--line);background:var(--field);border-radius:9px;padding:11px 14px;text-align:left;display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start;font-size:14px;color:var(--text)}
.choice:hover{border-color:var(--sel-line)}
.choice .radio{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--muted);margin-top:1px;display:grid;place-items:center}
.choice[aria-checked="true"]{border-color:var(--sel-line);box-shadow:inset 0 0 0 1px var(--sel-line);background:var(--sel-soft);color:var(--ink)}
.choice[aria-checked="true"] .radio{border-color:var(--sel-line)}
.choice[aria-checked="true"] .radio::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--sel-line)}
.choice small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}

.scale{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;max-width:460px}
.scale button{border:1px solid var(--line);background:var(--field);border-radius:8px;padding:10px 0;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.scale button:hover{border-color:var(--sel-line)}
.scale button[aria-checked="true"]{background:var(--sel);color:var(--on-sel);border-color:var(--sel)}
.scale-ends{display:flex;justify-content:space-between;gap:12px;max-width:460px;font-size:12.5px;color:var(--muted)}

.slider{display:flex;align-items:center;gap:16px;max-width:520px}
.slider input{flex:1;accent-color:#3AA0D8}
.slider output{font-family:var(--head);font-weight:600;font-size:20px;color:var(--ink);min-width:58px;text-align:right;font-variant-numeric:tabular-nums}

.more-btn{justify-self:start;background:none;border:0;color:var(--link);font-weight:600;font-size:13.5px;padding:2px 0}
.more-btn:hover{text-decoration:underline;text-underline-offset:3px}

.rep{display:grid;gap:10px}
.rep-row{display:grid;gap:8px;align-items:end;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:10px;padding:12px}
.rep-row.stack{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
.rep-row.stack .full{grid-column:1/-1}
.rep-row.stack .rm-row{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted);font-weight:600}
.rep-row label{font-size:12px;font-weight:600;color:var(--muted);display:grid;gap:4px}
.rep-row label input,.rep-row label select,.rep-row label textarea{font-weight:400}
.rep-row .rm{border:1px solid var(--line);background:var(--field);color:var(--muted);border-radius:8px;height:42px;width:42px;font-size:18px;line-height:1}
.rep-row .rm:hover,.rm-text:hover{color:var(--crit);border-color:var(--crit)}
.rm-text{border:1px solid var(--line);background:var(--field);color:var(--muted);border-radius:6px;padding:3px 10px;font-size:12px;font-weight:600}
.add-row{justify-self:start;border:1px dashed var(--line);background:transparent;color:var(--link);font-weight:600;border-radius:8px;padding:8px 14px;font-size:13.5px}
.add-row:hover{border-color:var(--sel-line);background:var(--surface)}

.nav{display:flex;gap:12px;justify-content:space-between;align-items:center;margin-top:22px;padding-top:20px;border-top:1px solid var(--line-soft);flex-wrap:wrap}

/* Review */
.keep-copy{display:flex;gap:12px 16px;flex-wrap:wrap;align-items:center;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:18px}
.keep-copy p{flex:1 1 260px;font-size:13.5px;color:var(--muted)}
.keep-copy p b{color:var(--ink);display:block;font-size:14px}
.rv-sec{border:1px solid var(--line);border-radius:10px;overflow:hidden;break-inside:auto}
.rv-sec + .rv-sec{margin-top:14px}
.rv-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 16px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.rv-head h3{font-weight:600;font-size:14.5px}
.rv-list{margin:0;padding:6px 16px 10px}
.rv-item{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:14px;padding:8px 0;border-bottom:1px solid var(--line-soft);font-size:13.5px;break-inside:avoid}
.rv-item:last-child{border-bottom:0}
.rv-item dt{color:var(--muted)}
.rv-item dd{margin:0;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}
.rv-item dd.none{color:var(--placeholder);font-style:italic}
.toast{font-size:13px;color:var(--good);font-weight:600}
.print-only{display:none}

.done{max-width:760px;margin:0 auto;display:grid;gap:18px}
.done .check{width:52px;height:52px;border-radius:50%;background:var(--sel);display:grid;place-items:center}
.done .check::after{content:"";width:18px;height:10px;border-left:3px solid var(--teal);border-bottom:3px solid var(--teal);transform:rotate(-45deg) translate(1px,-2px)}

/* Consultant view */
.cv-head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.cv-head p{color:var(--muted);max-width:70ch;margin-top:6px}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;border-radius:999px;padding:3px 10px;background:var(--warn-bg);color:var(--warn)}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px;display:grid;gap:4px}
.tile .k{font-size:12.5px;color:var(--muted);font-weight:500}
.tile .v{font-weight:700;font-size:28px;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.1}
.tile .v small{font-size:14px;color:var(--muted);font-weight:600}
.tile .s{font-size:12.5px;color:var(--muted)}
.cv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px 22px;display:grid;gap:14px;align-content:start;min-width:0}
.card > *{min-width:0}
.card h2{font-size:16px}
.card .sub{font-size:13px;color:var(--muted);margin-top:-8px}
.card.wide{grid-column:1/-1}
.bars{display:grid;gap:9px}
.bar{display:grid;grid-template-columns:minmax(120px,200px) minmax(0,1fr) 64px;gap:12px;align-items:center;font-size:13.5px;position:relative}
.bar .lbl{color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar .track{display:block;height:14px;border-left:1px solid var(--line);position:relative}
.bar .fill{display:block;height:100%;background:var(--bar);border-radius:0 4px 4px 0;min-width:2px}
.bar .val{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600}
.bar .val small{color:var(--muted);font-weight:500}
.bar:hover .fill{background:var(--bar-hover)}
.bar .tip{position:absolute;left:210px;top:-30px;background:var(--code-bg);color:#fff;border:1px solid var(--line);font-size:12px;padding:4px 9px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s;z-index:2}
.bar:hover .tip{opacity:1}
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-weight:600;color:var(--muted);font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:9px 10px;border-bottom:1px solid var(--line-soft);color:var(--text);vertical-align:middle}
td b{color:var(--ink);font-weight:600}
tr:last-child td{border-bottom:0}
td.num{text-align:right;font-variant-numeric:tabular-nums}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;border-radius:999px;padding:2px 9px;white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.p-good{background:var(--good-bg);color:var(--good)}
.p-warn{background:var(--warn-bg);color:var(--warn)}
.p-crit{background:var(--crit-bg);color:var(--crit)}
.p-new{background:var(--sel-soft);color:var(--ink)}
.meter{display:inline-grid;grid-template-columns:repeat(5,10px);gap:2px;vertical-align:middle;margin-right:8px}
.meter i{height:8px;border-radius:2px;background:var(--line-soft)}
.meter i.on{background:var(--meter-on)}
.quotes{display:grid;gap:10px}
.quote{border-left:3px solid var(--teal);padding:4px 0 4px 14px;font-size:14px;color:var(--text)}
.quote cite{display:block;font-style:normal;font-size:12.5px;color:var(--muted);margin-top:4px}
pre.code{margin:0;background:var(--code-bg);color:var(--code-text);border-radius:10px;padding:16px;font:12.5px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow:auto;max-height:420px;max-width:100%}
details summary{cursor:pointer;font-weight:600;color:var(--link)}

@media (max-width: 900px){
  .welcome,.shell{grid-template-columns:1fr}
  .rail{position:static}
  .steps{display:none}
  .mob{display:inline}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cv-grid{grid-template-columns:1fr}
  .top-title{display:none}
}
@media (max-width: 600px){
  .panel,.hero{padding:22px 18px}
  .grid2,.tips{grid-template-columns:1fr}
  .rep-row.stack{grid-template-columns:1fr}
  .rv-item{grid-template-columns:1fr;gap:2px}
  .bar{grid-template-columns:minmax(0,1fr) 64px}
  .bar .track{grid-column:1/-1;grid-row:2}
  .bar .tip{display:none}
  .wordmark{display:none}
  .theme-btn span{display:none}
  .sect-list{grid-template-columns:1fr}
}
.site-foot{max-width:1180px;margin:0 auto;padding-inline:16px;padding-block:18px 32px;border-top:1px solid var(--line);text-align:center;font-size:12.5px;color:var(--muted)}
@media print{.site-foot{border-top:1px solid #CBD6E4;color:#5A6A84;padding:10px 0 0;margin-top:18px}}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}

/* Print / Save as PDF: always light, only the answers */
@media print{
  body, body.light{
    color-scheme: light;
    --ground:#FFFFFF; --surface:#FFFFFF; --surface-2:#F3F6FA; --line:#CBD6E4; --line-soft:#E3E9F1;
    --ink:#16294F; --text:#26334A; --muted:#5A6A84; --placeholder:#94A2B8;
  }
  html,body{background:#fff}
  body .logo-img{filter:none;mix-blend-mode:normal}
  .top,.demo-note,.rail,.nav,.no-print,.rv-head button,.keep-copy{display:none!important}
  .print-only{display:block}
  .wrap{padding:0;max-width:none}
  .shell{display:block}
  .panel{border:0;padding:0}
  .rv-sec{break-inside:auto}
  .rv-head{break-after:avoid}
  .print-head{display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:2px solid #16294F;padding-bottom:12px;margin-bottom:18px}
  .print-head .logo-full{max-width:170px;margin:0}
  .print-head dl{margin:0;font-size:12px;display:grid;grid-template-columns:auto auto;gap:2px 12px;text-align:left}
  .print-head dt{color:#5A6A84}
  .print-head dd{margin:0;color:#16294F;font-weight:600}
  @page{margin:16mm}
}