/* ============================================================
   FAMILY OFFICE AI — house theme v2 "modern paper".
   Younger, editorial, Awwwards-leaning: warm paper canvas,
   near-black ink, one loud Klein-blue accent, massive grotesque
   display type (self-hosted Space Grotesk), hairline borders,
   numbered section heads, flat cards. Light + dark first-class.
   (Class names are the stable API shared with templates/app.js —
   .gold-btn/.navy-btn keep their names, restyled.)
   ============================================================ */
@font-face{
  font-family:"Space Grotesk";
  src:url("/static/fonts/space-grotesk-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Space Grotesk";
  src:url("/static/fonts/space-grotesk-500.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}
:root{
  --bg:#f2efe8; --surface:#faf8f3; --fg:#101113; --muted:#5c5e63;
  --line:rgba(16,17,19,.14); --line-soft:rgba(16,17,19,.08); --chip:#e9e5da;
  --ink:#101113; --paper:#f2efe8;
  --blue:#2b3ff2; --blue-soft:rgba(43,63,242,.09);
  --accent:#2b3ff2; --up:#0a7d44; --down:#c03528; --star:#2b3ff2;
  --radius:16px;
  --serif:"Space Grotesk",-apple-system,"Helvetica Neue",Arial,sans-serif; /* display voice */
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
[data-theme="dark"]{
  --bg:#0c0d10; --surface:#141519; --fg:#efece3; --muted:#9a9ca4;
  --line:rgba(239,236,227,.16); --line-soft:rgba(239,236,227,.08); --chip:#1d1f25;
  --ink:#efece3; --paper:#0c0d10;
  --blue:#6070ff; --blue-soft:rgba(96,112,255,.13);
  --accent:#6070ff; --star:#6070ff;
}
*{box-sizing:border-box}
body{margin:0;font:15px/1.55 var(--sans);background:var(--bg);color:var(--fg);
  -webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:var(--blue);color:#fff}

/* ---------------- header: paper bar, ink text, hairline ---------------- */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:14px;
  background:var(--bg);color:var(--fg);padding:0 18px;height:60px;
  border-bottom:1px solid var(--line)}
.burger{display:none;background:none;border:0;color:var(--fg);font-size:20px;cursor:pointer}
.logo-wrap{display:flex;flex-direction:column;justify-content:center;gap:1px;flex:0 0 auto;min-width:auto}
.logo{color:var(--fg);font-family:var(--serif);font-weight:700;letter-spacing:-0.03em;
  font-size:19px;line-height:1;white-space:nowrap}
.logo span{color:var(--fg);font-weight:700}
.logo .tld{color:var(--blue);font-style:normal;font-weight:700;margin-left:1px}
.logo-img{height:30px;display:block}
.tagline{font-size:9.5px;line-height:1.3;color:var(--muted);letter-spacing:.04em;
  max-width:250px;font-weight:600;text-transform:uppercase}
@media (max-width:1500px){.tagline{display:none}}
.mainnav{display:flex;gap:2px;margin-left:auto;margin-right:auto;align-items:center;flex-wrap:nowrap}
.dd{display:flex;align-items:center;position:relative}
.mainnav>a,.mainnav .ddbtn{color:var(--fg);padding:7px 12px;border-radius:999px;
  font-size:13.5px;font-weight:600;white-space:nowrap}
.mainnav>a:hover,.ddbtn:hover{background:var(--ink);color:var(--paper);text-decoration:none}
.ddmenu{display:none;position:absolute;top:100%;left:0;background:var(--surface);
  border:1px solid var(--line);border-top:2px solid var(--blue);
  border-radius:0 0 12px 12px;min-width:220px;box-shadow:0 18px 40px rgba(10,10,12,.14);padding:6px 0}
.ddmenu.open{display:block}
.ddmenu a{display:block;padding:8px 16px;color:var(--fg);font-size:13.5px}
.ddmenu a:hover{background:var(--chip);text-decoration:none}
.searchwrap{position:relative}
.searchwrap input{border:1px solid var(--line);border-radius:999px;padding:8px 15px;
  width:170px;background:var(--surface);color:var(--fg);outline:none;font-size:13px}
.searchwrap input::placeholder{color:var(--muted)}
.searchwrap input:focus{border-color:var(--blue)}
.searchresults{display:none;position:absolute;right:0;top:118%;width:310px;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px rgba(10,10,12,.16);overflow:hidden}
.searchresults.open{display:block}
.searchresults a{display:flex;justify-content:space-between;gap:10px;padding:9px 13px;color:var(--fg);font-size:13px}
.searchresults a:hover{background:var(--chip);text-decoration:none}
.searchresults .k{color:var(--muted);font-size:11px;flex:0 0 auto;text-transform:uppercase;letter-spacing:.05em}
.userbtn{background:none;border:0;color:var(--fg);font-size:18px;cursor:pointer}
.savebtn{flex:0 0 auto;position:relative;color:var(--blue);font-size:17px;line-height:1;
  padding:4px 2px;text-decoration:none}
.savebtn:hover{text-decoration:none}
.favbadge{position:absolute;top:-4px;right:-9px;background:var(--blue);color:#fff;
  font-size:9.5px;font-weight:800;border-radius:999px;min-width:15px;height:15px;
  display:inline-flex;align-items:center;justify-content:center;padding:0 3px}
.tb-theme{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:none;
  border:1px solid var(--line);color:var(--fg);font-size:15px;
  line-height:1;cursor:pointer;padding:0;margin-left:2px}
.tb-theme:hover{border-color:var(--blue);color:var(--blue)}
@media (max-width:1520px){
  .mainnav>a,.mainnav .ddbtn{padding:6px 8px;font-size:12.5px}
  .topbar{gap:10px}
  .searchwrap input{width:120px}
}
@media (max-width:1280px){
  .mainnav{gap:0}
  .mainnav>a,.mainnav .ddbtn{padding:6px 5px;font-size:12px}
  .topbar{gap:7px;padding:0 10px}
  .searchwrap input{width:84px;padding:6px 10px}
  .logo{font-size:16px}
}
@media (max-width:1020px){.mainnav{display:none}.burger{display:block}}

/* ---------------- offcanvas ---------------- */
.offcanvas{position:fixed;top:0;bottom:0;width:300px;max-width:85vw;background:var(--surface);z-index:70;
  transition:transform .22s;overflow-y:auto;padding:14px;border-right:1px solid var(--line)}
.offcanvas.left{left:0;transform:translateX(-100%)}
.offcanvas.right{right:0;left:auto;transform:translateX(100%);border-left:1px solid var(--line);border-right:0}
.offcanvas.open{transform:none}
.oc-backdrop{display:none;position:fixed;inset:0;background:rgba(10,10,12,.5);z-index:60}
.oc-backdrop.open{display:block}
.oc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.oc-close{background:none;border:0;font-size:22px;cursor:pointer;color:var(--fg)}
.oc-link{display:block;padding:9px 4px;border-bottom:1px solid var(--line-soft);color:var(--fg);font-weight:700}
.offcanvas details{border-bottom:1px solid var(--line-soft);padding:4px 0}
.offcanvas summary{padding:7px 4px;font-weight:700;cursor:pointer}
.offcanvas details a{display:block;padding:6px 14px;color:var(--fg)}
.oc-card{background:var(--chip);border:1px solid var(--line-soft);border-radius:14px;padding:11px;margin:10px 0}
.oc-card p{margin:6px 0 0;color:var(--muted);font-size:13px}
.oc-row{display:flex;justify-content:space-between;align-items:center;padding:10px 2px}
.theme-toggle{font-size:18px;background:none;border:1px solid var(--line);border-radius:50%;
  width:34px;height:34px;cursor:pointer;color:var(--fg)}
.oc-view{border-top:1px solid var(--line-soft);margin-top:12px;padding-top:10px;font-size:12.5px}
.oc-view p{margin:0 0 8px;line-height:1.45}

/* ---------------- layout: centered column, giant type ---------------- */
.page{max-width:1100px;margin:0 auto;padding:24px 20px 10px}
h1{font-family:var(--serif);font-size:44px;font-weight:700;letter-spacing:-0.04em;
  line-height:1.02;margin:14px 0 12px}
h2{font-family:var(--serif);font-size:24px;font-weight:700;letter-spacing:-0.02em;margin:26px 0 10px}
h3{font-size:16px;font-weight:700;margin:18px 0 8px}
.h1sub{color:var(--muted);font-weight:500;font-size:16px;font-family:var(--sans)}
.blurb{color:var(--muted);max-width:720px;font-size:15.5px;line-height:1.6}
.eyebrow{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.22em;
  text-transform:uppercase;color:var(--blue);margin-bottom:8px}
.center{text-align:center}
.center .blurb{margin-left:auto;margin-right:auto}
.dot{color:var(--blue)}
/* numbered section heads (page-scoped counter) */
.page{counter-reset:sec}
.sec-head{text-align:center;margin:56px 0 20px;counter-increment:sec}
.sec-head h2{margin:4px 0 8px;font-size:clamp(26px,3.4vw,34px);letter-spacing:-0.03em}
.sec-head:before{content:"0" counter(sec);display:block;font-family:var(--serif);
  font-weight:700;font-size:12px;letter-spacing:.28em;color:var(--blue);margin-bottom:6px}
.sec-head:after{content:"";display:block;width:44px;height:2px;background:var(--ink);
  margin:14px auto 0}
.sec-head .blurb{margin:0 auto}
.note-box{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--blue);
  border-radius:10px;padding:12px 15px;margin:14px 0;color:var(--muted);font-size:13.5px}
.fineprint{color:var(--muted);font-size:12.5px}
.chip{display:inline-block;background:var(--chip);border-radius:999px;padding:2px 10px;
  font-size:12px;margin-right:6px;color:var(--fg)}
.cc{display:inline-block;background:var(--chip);border-radius:5px;padding:1px 6px;font-size:11.5px;
  margin-right:8px;color:var(--muted)}
.ts{color:var(--muted);font-size:12px}
.num{font-variant-numeric:tabular-nums}
.up{color:var(--up)} .down{color:var(--down)}

/* ---------------- hero: type IS the hero ---------------- */
.hero-center{text-align:center;padding:64px 10px 40px;background:none;border:0;
  border-radius:0;color:var(--fg);margin:0 0 8px}
.hero-center .eyebrow{color:var(--blue)}
.hero-center h1{font-size:clamp(44px,7.2vw,92px);margin:10px auto 18px;max-width:1000px;
  color:var(--fg);letter-spacing:-0.045em;line-height:.98}
.hero-center p{color:var(--muted);max-width:620px;margin:0 auto 26px;font-size:17px;line-height:1.6}
.pathways{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.pathways a{display:inline-block;border:1px solid var(--ink);border-radius:999px;
  padding:11px 22px;color:var(--fg);font-weight:700;font-size:14px}
.pathways a:hover{background:var(--ink);color:var(--paper);text-decoration:none}
.pathways a.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.pathways a.primary:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.trust-strip{display:block;text-align:center;background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:9px 20px;font-size:12.5px;font-weight:700;color:var(--muted);
  margin:0 auto 8px;width:fit-content;max-width:100%;text-transform:uppercase;letter-spacing:.04em}

/* stats marquee (home) — CSS only, pauses on hover */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin:10px calc(50% - 50vw) 8px;background:var(--surface);white-space:nowrap}
.marquee .mq{display:inline-block;padding:11px 0;animation:mq 28s linear infinite;
  font-family:var(--serif);font-weight:700;font-size:13.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg)}
.marquee:hover .mq{animation-play-state:paused}
.marquee .sep{color:var(--blue);margin:0 18px}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.marquee .mq{animation:none}}

/* ---------------- cards: flat, hairline, hover-ink ---------------- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.type-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:14px 0}
.tcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 20px;text-align:center}
.tcard:hover{border-color:var(--ink)}
.tcard h3{font-family:var(--serif);font-size:19px;letter-spacing:-0.02em;margin:4px 0 8px}
.tcard p{color:var(--muted);font-size:13.5px;line-height:1.55;margin:0 0 12px}
.tcard .arrow{font-weight:700}
.news-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:15px}
.news-card:hover{border-color:var(--ink)}
.news-card h3{margin:0 0 6px;font-size:14.5px;line-height:1.4}
.news-card p{margin:0 0 6px;color:var(--muted);font-size:13px}
.news-card.has-thumb{display:flex;gap:12px;align-items:flex-start}
.news-card.has-thumb .card-body{flex:1;min-width:0}
.card-thumb{width:74px;height:74px;object-fit:cover;border-radius:10px;flex:0 0 auto;
  filter:saturate(.92)}
.srcline{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);margin-top:6px;
  text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.learn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-top:16px}
.learn-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:17px 19px}
.learn-card:hover{border-color:var(--ink)}
.learn-card h2,.learn-card h3{margin:0 0 8px;font-size:16px;font-family:var(--sans);font-weight:700}
.learn-card p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.55}
.rank-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 14px}
.rank-card{display:flex;align-items:center;gap:10px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;
  font-size:13.5px;color:var(--fg)}
.rank-card:hover{border-color:var(--ink);text-decoration:none}
.rank-card b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--serif);letter-spacing:-0.01em}
.rk-label{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);flex:0 0 auto}
.rk-more{color:var(--blue);font-weight:800}

/* ---------------- CTA band: ink block ---------------- */
.cta-band{text-align:center;background:var(--ink);border-radius:22px;color:var(--paper);
  padding:44px 24px;margin:40px 0;border:0}
.cta-band .eyebrow{color:var(--blue)}
[data-theme="dark"] .cta-band .eyebrow{color:#8f9bff}
.cta-band h2{color:var(--paper);margin:0 0 10px;font-size:clamp(28px,4vw,40px);letter-spacing:-0.03em}
.cta-band p{color:var(--paper);opacity:.72;max-width:560px;margin:0 auto 22px}
.gold-btn{display:inline-block;background:var(--blue);color:#fff;border:0;
  border-radius:999px;padding:13px 28px;font-weight:800;font-size:14.5px;cursor:pointer;
  font-family:var(--serif);letter-spacing:0}
.gold-btn:hover{background:color-mix(in srgb, var(--blue) 78%, #000);text-decoration:none;color:#fff}
[data-theme="dark"] .gold-btn:hover{background:#8f9bff;color:#0c0d10}
.navy-btn{display:inline-block;background:none;color:var(--fg);border:1px solid var(--ink);
  border-radius:999px;padding:11px 24px;font-weight:700;font-size:14px;cursor:pointer}
.navy-btn:hover{background:var(--ink);color:var(--paper);text-decoration:none}

/* ---------------- maturity strip ---------------- */
.stage-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin:16px 0;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.stage{padding:18px 14px;border-right:1px solid var(--line);text-align:center}
.stage:last-child{border-right:0}
.stage .n{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:50%;background:none;color:var(--blue);font-weight:800;font-size:13px;
  margin-bottom:8px;border:1.5px solid var(--blue);font-family:var(--serif)}
.stage b{display:block;font-size:13.5px;margin-bottom:6px;font-family:var(--serif);letter-spacing:-0.01em}
.stage p{margin:0;color:var(--muted);font-size:11.5px;line-height:1.45}
.stage.cur{background:var(--blue-soft)}

/* ---------------- tables ---------------- */
.data-table{width:100%;border-collapse:separate;border-spacing:0;margin:10px 0 18px;font-size:13.5px;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface)}
.data-table th{background:var(--chip);text-align:left;padding:9px 11px;border-bottom:1px solid var(--line);
  white-space:nowrap;cursor:pointer;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em}
.data-table td{padding:9px 11px;border-bottom:1px solid var(--line-soft)}
.data-table tbody tr:last-child td{border-bottom:0}
.data-table td.r,.data-table th.r{text-align:right}
.tablewrap{overflow-x:auto}

/* ---------------- article pages ---------------- */
.art-wrap{max-width:820px;margin:0 auto}
.art-head{text-align:center;margin:18px 0 6px}
.art-head h1{font-size:clamp(30px,4.6vw,46px);max-width:780px;margin-left:auto;margin-right:auto;
  letter-spacing:-0.035em;line-height:1.04}
.art-meta{color:var(--muted);font-size:11.5px;display:flex;gap:14px;justify-content:center;
  align-items:center;flex-wrap:wrap;margin-bottom:16px;text-transform:uppercase;
  letter-spacing:.08em;font-weight:600}
.art-summary{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--blue);
  border-radius:12px;padding:18px 22px;font-size:16.5px;line-height:1.6;margin:0 0 18px;
  font-family:var(--serif);font-weight:500;letter-spacing:-0.01em}
.art-toc{background:var(--chip);border-radius:12px;padding:13px 18px;font-size:13px;margin:0 0 24px}
.art-toc b{display:block;margin-bottom:6px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--blue)}
.art-toc a{display:inline-block;margin:2px 12px 2px 0;color:var(--fg);font-weight:600}
.art-body{font-family:var(--sans);font-size:16px;line-height:1.75}
.art-body p{margin:0 0 14px}
.art-body h2{font-size:26px;margin:34px 0 10px;padding-top:8px;letter-spacing:-0.025em}
.art-body h3{font-family:var(--serif);font-size:18.5px;margin:22px 0 8px;letter-spacing:-0.015em}
.art-body ul,.art-body ol{margin:0 0 14px;padding-left:24px}
.art-body li{margin:0 0 6px}
.art-body table{width:100%;border-collapse:separate;border-spacing:0;margin:14px 0 20px;
  font-size:14px;font-family:var(--sans);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;background:var(--surface)}
.art-body th{background:var(--chip);text-align:left;padding:9px 11px;border-bottom:1px solid var(--line);
  font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.art-body td{padding:9px 11px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.art-body tr:last-child td{border-bottom:0}
.art-body a{text-decoration:underline;text-decoration-color:var(--blue);text-underline-offset:3px;
  text-decoration-thickness:1.5px;color:var(--fg);font-weight:600}
.art-body a:hover{color:var(--blue)}
.art-body blockquote{margin:0 0 14px;padding:12px 20px;border-left:3px solid var(--blue);
  background:var(--surface);border-radius:10px;color:var(--muted)}
.faq-block{margin:26px 0}
.faq-block details{border:1px solid var(--line);border-radius:12px;background:var(--surface);
  margin-bottom:8px;padding:0 18px}
.faq-block details:hover{border-color:var(--ink)}
.faq-block summary{padding:14px 0;font-weight:700;cursor:pointer;font-size:15px;font-family:var(--sans)}
.faq-block .fa{padding:0 0 15px;color:var(--fg);font-size:14.5px;line-height:1.65;font-family:var(--sans)}
.rel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin:14px 0}
.rel-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:15px 17px}
.rel-card:hover{border-color:var(--ink);text-decoration:none}
.rel-card b{display:block;font-size:14px;margin-bottom:4px;font-family:var(--serif);letter-spacing:-0.01em}
.rel-card p{margin:0;color:var(--muted);font-size:12.5px;line-height:1.5}

/* ---------------- pills / toolbars / forms ---------------- */
.subnav{display:flex;gap:6px;padding:6px 0 2px;flex-wrap:wrap}
.subnav a{border:1px solid var(--line);border-radius:999px;padding:7px 15px;background:var(--surface);
  font-weight:700;font-size:13px;color:var(--fg)}
.subnav a.cur{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.subnav a:hover{text-decoration:none;border-color:var(--ink)}
.toolbar{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.tbtn{border:1px solid var(--line);border-radius:999px;padding:6px 14px;color:var(--fg);font-size:13px;
  font-weight:700;background:var(--surface);cursor:pointer}
.tbtn.cur{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.tbtn:hover{text-decoration:none;border-color:var(--ink)}
.screen-form{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);padding:15px 17px;margin:10px 0}
.screen-form label{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:800;
  color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.screen-form input,.screen-form select{border:1px solid var(--line);border-radius:10px;padding:8px 11px;
  font-size:13px;background:var(--bg);color:var(--fg);min-width:130px}
.contact-form{display:flex;flex-direction:column;gap:10px;max-width:560px}
.contact-form label{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:800;
  color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.contact-form input,.contact-form textarea{border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;font-size:13.5px;background:var(--surface);color:var(--fg)}
.hp{position:absolute;left:-9999px;height:0;width:0;opacity:0}

/* ---------------- interactive tools ---------------- */
.tool-form{background:var(--surface);border:1px solid var(--line);border-radius:20px;
  padding:24px;margin:14px 0}
.tool-form .qgrid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:15px}
.tool-form label{display:flex;flex-direction:column;gap:5px;font-size:11px;font-weight:800;
  color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.tool-form select,.tool-form input[type=number]{border:1px solid var(--line);border-radius:10px;
  padding:9px 11px;font-size:13.5px;background:var(--bg);color:var(--fg);font-family:var(--sans)}
.multi-opts{display:flex;flex-wrap:wrap;gap:6px}
.multi-opts .mo{border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:12.5px;
  cursor:pointer;background:var(--bg);color:var(--fg);font-weight:700}
.multi-opts .mo:hover{border-color:var(--ink)}
.multi-opts .mo.on{background:var(--blue);border-color:var(--blue);color:#fff}
.result-panel{border:1.5px solid var(--ink);border-radius:20px;background:var(--surface);
  padding:26px 24px;margin:18px 0}
.result-panel .stagebig{font-family:var(--serif);font-size:clamp(26px,4vw,38px);text-align:center;
  margin:4px 0 6px;letter-spacing:-0.03em}
.result-panel .stagedesc{text-align:center;color:var(--muted);max-width:640px;margin:0 auto 14px}
.orgchart{max-width:560px;margin:14px auto}
.org-row{display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--line);
  border-radius:12px;padding:10px 15px;margin-bottom:6px;font-size:13.5px}
.org-row b{flex:1;font-weight:600}
.mode-pill{flex:0 0 auto;font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  border-radius:999px;padding:3px 10px}
.mode-internal{background:var(--blue-soft);color:var(--blue);border:1px solid var(--blue)}
.mode-fractional{background:none;color:var(--fg);border:1px dashed var(--ink)}
.mode-outsourced{background:var(--chip);color:var(--muted);border:1px solid var(--line)}
.mode-hybrid{background:none;color:var(--fg);border:1px dashed var(--ink)}
.costband{text-align:center;font-size:15px;margin:12px 0}
.costband b{font-family:var(--serif);font-size:27px;letter-spacing:-0.02em}
.progress-wrap{position:sticky;top:66px;z-index:5;background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:8px 16px;display:flex;align-items:center;gap:12px;margin:12px 0}
.progressbar{flex:1;height:8px;border-radius:999px;background:var(--chip);overflow:hidden}
.progressbar i{display:block;height:100%;width:0;background:var(--blue);border-radius:999px;
  transition:width .25s}
.check-phase{margin:22px 0 8px}
.check-phase h2{margin:0 0 2px}
.check-item{display:flex;gap:12px;align-items:flex-start;background:var(--surface);
  border:1px solid var(--line);border-radius:14px;padding:13px 17px;margin-bottom:8px;cursor:pointer}
.check-item:hover{border-color:var(--ink)}
.check-item input{margin-top:3px;accent-color:var(--blue);width:16px;height:16px;flex:0 0 auto}
.check-item b{display:block;font-size:14px}
.check-item p{margin:3px 0 0;color:var(--muted);font-size:12.5px;line-height:1.5}
.check-item.done{opacity:.5}
.check-item.done b{text-decoration:line-through}
.calc-total{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;text-align:center;margin:14px 0}
.calc-total .cell{background:var(--bg);border:1px solid var(--line);border-radius:14px;
  padding:14px 24px;min-width:150px}
.calc-total .cell b{display:block;font-family:var(--serif);font-size:23px;letter-spacing:-0.02em}
.calc-total .cell span{color:var(--muted);font-size:10.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase}

/* ---------------- glossary / directory / resources ---------------- */
.g-letters{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:10px 0 20px}
.g-letters a{border:1px solid var(--line);border-radius:10px;min-width:34px;text-align:center;
  padding:6px;font-weight:800;color:var(--fg);background:var(--surface);font-family:var(--serif)}
.g-letters a:hover{border-color:var(--blue);text-decoration:none;color:var(--blue)}
.g-group h2{border-bottom:1px solid var(--line);padding-bottom:6px;color:var(--blue);font-size:24px}
.g-row{display:flex;gap:12px;align-items:baseline;padding:9px 2px;border-bottom:1px solid var(--line-soft)}
.g-row:last-child{border-bottom:0}
.g-row .abbr{flex:0 0 74px;font-weight:800;color:var(--blue);font-size:12px;letter-spacing:.04em;
  font-family:var(--serif)}
.g-row b a{color:var(--fg)}
.g-row p{margin:2px 0 0;color:var(--muted);font-size:13px;flex:1}
.g-def{font-family:var(--serif);font-weight:500;font-size:20px;line-height:1.55;background:var(--surface);
  border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:12px;
  padding:20px 24px;margin:6px 0 18px;letter-spacing:-0.01em}
.dir-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin:12px 0}
.dir-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:15px 17px}
.dir-card:hover{border-color:var(--ink);text-decoration:none}
.dir-card b a{color:var(--fg);font-size:14.5px}
.dir-card .cat{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue);display:block;margin-bottom:4px}
.dir-card p{margin:6px 0 0;color:var(--muted);font-size:12.5px;line-height:1.5}
.res-item{display:flex;gap:14px;padding:13px 2px;border-bottom:1px solid var(--line-soft);align-items:baseline}
.res-item:last-child{border-bottom:0}
.res-item .yr{flex:0 0 44px;color:var(--blue);font-size:12px;font-variant-numeric:tabular-nums;
  font-weight:700;font-family:var(--serif)}
.res-item b{font-size:14.5px}
.res-item p{margin:2px 0 0;color:var(--muted);font-size:13px;flex:1}

/* ---------------- news / stats ---------------- */
.stream-item{border-bottom:1px solid var(--line-soft);padding:15px 0}
.stream-item h3{margin:0 0 6px;font-size:16px;font-family:var(--serif);letter-spacing:-0.01em}
.stat-row{display:flex;gap:28px;justify-content:center;flex-wrap:wrap;text-align:center;margin:18px 0}
.stat-row .stat b{display:block;font-family:var(--serif);font-size:34px;color:var(--blue);
  letter-spacing:-0.03em}
.stat-row .stat span{color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase}

/* ---------------- ask / ai agents ---------------- */
.ask-box{background:var(--surface);border:1px solid var(--line);border-radius:20px;
  padding:19px;max-width:760px;margin:8px auto 18px}
#askForm{display:flex;gap:10px}
#askInput{flex:1;border:1px solid var(--line);border-radius:999px;padding:12px 19px;
  font-size:14.5px;background:var(--bg);color:var(--fg)}
#askInput:focus{outline:none;border-color:var(--blue)}
.ask-out{margin-top:14px;border-top:1px solid var(--line-soft);padding-top:12px}
.ask-out p{font-size:14.5px;line-height:1.6}
.ask-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.ask-ex p{margin:0}
.prompt-text{white-space:pre-wrap;background:var(--bg);border:1px solid var(--line);border-radius:12px;
  padding:13px;font-size:12.5px;line-height:1.55;color:var(--fg);margin:0 0 10px;
  font-family:ui-monospace,Menlo,monospace}
.copybtn{cursor:pointer;background:var(--ink);color:var(--paper);border:1px solid var(--ink);border-radius:999px}
.copybtn:hover{background:var(--blue);border-color:var(--blue);color:#fff}

/* ---------------- guided view ---------------- */
.guide-help{display:none;background:var(--blue-soft);border:1px solid var(--blue);
  border-radius:14px;padding:11px 15px;font-size:12.5px;line-height:1.5;margin:8px 0;max-width:860px}
body.guided .guide-help{display:block}

/* ---------------- legal + misc ---------------- */
.legalpage{max-width:820px;margin:0 auto}
.legalpage p{font-size:13.5px;line-height:1.65;margin:0 0 12px}
.legalpage h2{font-size:20px}
.favstar{background:none;border:0;cursor:pointer;font-size:15px;color:var(--muted);
  padding:0 4px 0 0;vertical-align:-1px}
.favstar.on{color:var(--star)}

/* ---------------- mega footer + footer: ink block ---------------- */
.megafooter{max-width:1100px;margin:44px auto 0;padding:20px;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px;border-top:1px solid var(--line)}
.megafooter h2{font-size:13px;margin:0 0 8px;font-family:var(--sans)}
.megafooter h2 a{color:var(--blue);letter-spacing:.14em;text-transform:uppercase;font-size:11px}
.megafooter a{display:block;color:var(--muted);font-size:12.5px;padding:2px 0}
.megafooter a:hover{color:var(--blue)}
.footer{background:#101113;color:#b9bbc2;margin-top:28px;padding:36px 22px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;
  border-top:0;border-radius:26px 26px 0 0}
[data-theme="dark"] .footer{background:#141519;border-top:1px solid var(--line)}
.f-col b{display:block;color:#fff;margin-bottom:8px;font-family:var(--serif);font-size:14px;
  letter-spacing:.02em;text-transform:uppercase}
.f-col a{display:block;color:#b9bbc2;padding:3px 0;font-size:13px}
.f-col a:hover{color:#8f9bff}
.f-family{font-size:12.5px;padding:10px 0;border-top:1px solid rgba(255,255,255,.12);grid-column:1/-1}
.f-family a{font-weight:700;color:#e8e9ee}
.f-family a:hover{color:#8f9bff}
.f-sub{display:flex;gap:8px;align-items:center;padding:6px 0;flex-wrap:wrap}
.f-sub input{border:1px solid rgba(255,255,255,.3);background:transparent;color:inherit;
  border-radius:999px;padding:8px 15px;font-size:12.5px;min-width:210px}
.f-sub .tbtn{background:var(--blue);border-color:var(--blue);color:#fff}
.f-langs{color:#8e9097;font-size:13px}
.lang-sel{background:transparent;color:inherit;border:1px solid rgba(255,255,255,.3);
  border-radius:999px;padding:5px 12px;font-size:12.5px;cursor:pointer}
.lang-sel option{color:#101113;background:#fff}
.offcanvas .lang-sel,.oc-row .lang-sel{border-color:var(--line);color:var(--fg)}
.f-legal{grid-column:1/-1;color:#8e9097;font-size:12px;border-top:1px solid rgba(255,255,255,.14);padding-top:12px}
.f-legal p{margin:0 0 7px;line-height:1.5}
.f-legal a{color:#b9bbc2;text-decoration:underline}

/* ---------------- responsive ---------------- */
@media (max-width:900px){
  .topbar{height:56px;gap:10px;padding:0 12px}
  .page{padding:14px 14px 8px}
  h1{font-size:30px}
  .hero-center{padding:38px 4px 26px}
  .hero-center h1{font-size:clamp(34px,10vw,44px)}
  .hero-center p{font-size:14.5px}
  .art-head h1{font-size:28px}
  .art-body{font-size:15.5px}
  .rank-row{grid-template-columns:1fr}
  .stage-strip{grid-template-columns:1fr;border-radius:14px}
  .stage{border-right:0;border-bottom:1px solid var(--line);text-align:left;
    display:flex;gap:12px;align-items:flex-start;padding:13px 15px}
  .stage .n{margin:0;flex:0 0 auto}
  .stage>div{flex:1}
  .stage:last-child{border-bottom:0}
  .subnav{overflow-x:auto;flex-wrap:nowrap;white-space:nowrap;scrollbar-width:none;padding-bottom:6px}
  .subnav::-webkit-scrollbar{display:none}
  .toolbar{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .toolbar .tbtn{flex-shrink:0}
  .data-table{font-size:12.5px}
  .data-table td,.data-table th{padding:6px 8px}
  .megafooter{grid-template-columns:repeat(2,1fr);gap:12px}
  .footer{padding:24px 16px;border-radius:20px 20px 0 0}
  html,body{overflow-x:hidden}
  .progress-wrap{top:60px}
  .marquee{margin:10px -14px 8px}
}
@media (max-width:640px){
  /* phones: overlay carries eyebrow + title only — a long blurb could spill
     off the photo as white-on-paper */
  .hub-hero + .center .blurb{display:none}
  .learn-grid,.card-grid,.dir-grid,.rel-grid{grid-template-columns:1fr}
  .megafooter{grid-template-columns:1fr 1fr}
  #askForm{flex-direction:column}
  .screen-form input,.screen-form select{width:100%}
  .pathways a{width:100%;text-align:center}
  .g-row .abbr{flex-basis:52px}
}

/* ============================================================
   Photo layer: full-bleed hero, hub banners, image CTA band.
   Every image fades into var(--bg) so both themes stay clean;
   text always sits on the faded zone or an ink scrim.
   ============================================================ */
/* text rides high in the image's empty sky; the estate stays fully visible
   BELOW the text block (bottom-anchored crop + reserved reveal zone) */
.img-hero{position:relative;margin:0 calc(50% - 50vw) 8px;overflow:hidden}
.img-hero .bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center bottom}
.img-hero .scrim{position:absolute;inset:0;
  background:linear-gradient(to bottom,
    var(--bg) 0%, transparent 16%,
    transparent 84%, var(--bg) 100%)}
.img-hero .hero-center{position:relative;z-index:2;
  padding:44px 10px clamp(250px,27vw,360px);margin-bottom:0}
[data-theme="dark"] .img-hero .bgimg{filter:brightness(.74) saturate(.9)}

/* Magazine-style overlay header: the title lives ON the photo, bottom-anchored,
   image barely veiled (light bottom darkening for contrast, white text).
   The header text block is pulled over the full banner height with !important
   because the templates carry an inline margin on the .center block. */
.page{--bh:clamp(240px,26vw,340px)}
.hub-hero{position:relative;height:var(--bh);margin:6px 0 0;
  border-radius:18px;overflow:hidden}
.hub-hero .bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 40%}
.hub-hero .scrim{position:absolute;inset:0;
  background:linear-gradient(to top,
    rgba(8,10,14,.68) 0%, rgba(8,10,14,.32) 42%, rgba(8,10,14,.06) 75%)}
[data-theme="dark"] .hub-hero .bgimg{filter:brightness(.86) saturate(.92)}
.hub-hero + .center{position:relative;z-index:2;
  margin:calc(0px - var(--bh)) 0 10px !important;
  min-height:var(--bh);display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 22px 22px}
.hub-hero + .center .eyebrow{color:color-mix(in srgb, var(--blue) 45%, #fff)}
.hub-hero + .center h1{color:#fff;text-shadow:0 1px 14px rgba(8,10,14,.45);margin:6px 0 8px}
.hub-hero + .center .blurb{color:rgba(255,255,255,.9);text-shadow:0 1px 10px rgba(8,10,14,.4)}

.cta-band.has-img{position:relative;overflow:hidden}
.cta-band.has-img .bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;opacity:.5}
.cta-band.has-img .scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(to bottom, rgba(16,17,19,.55), rgba(16,17,19,.82))}
.cta-band.has-img>*:not(.bgimg):not(.scrim){position:relative;z-index:2}
.cta-band.has-img h2,.cta-band.has-img p{color:#f2efe8}
.cta-band.has-img p{opacity:.85}

@media (max-width:900px){
  .img-hero .hero-center{padding:28px 4px clamp(150px,42vw,230px)}
  .page{--bh:clamp(230px,46vw,290px)}
  .hub-hero{border-radius:14px}
  .hub-hero + .center{padding:0 14px 16px}
}

/* featured book (Literature) */
.book-feature{display:flex;gap:28px;align-items:flex-start}
.book-cover{flex:0 0 220px}
.book-cover img{width:100%;height:auto;border-radius:6px;display:block;
  box-shadow:0 18px 44px rgba(10,10,12,.28), 0 2px 8px rgba(10,10,12,.18);
  transform:rotate(-1.2deg)}
.book-info{flex:1;min-width:0}
@media (max-width:760px){
  .book-feature{flex-direction:column;align-items:center;text-align:center}
  .book-cover{flex-basis:auto;width:190px}
  .book-info .stagedesc{text-align:center}
  .book-info ul{text-align:left}
}

/* ============================================================
   SKINS — four distinct looks, each with light + dark modes.
   data-skin on <html> (localStorage fo-skin); the ◐ toggle keeps
   working inside every skin. Default (no attr) = "paper".
   ============================================================ */
[data-skin="midnight"]{
  --bg:#f4f1e9; --surface:#fbf9f2; --fg:#131c2c; --muted:#5b6474;
  --line:rgba(19,28,44,.15); --line-soft:rgba(19,28,44,.08); --chip:#e9e3d3;
  --ink:#101b30; --paper:#f4f1e9;
  --blue:#a8863d; --blue-soft:rgba(168,134,61,.12); --accent:#8a6e2f; --star:#a8863d;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
}
[data-skin="midnight"][data-theme="dark"]{
  --bg:#0a1120; --surface:#111a2e; --fg:#ece7da; --muted:#97a0b0;
  --line:rgba(236,231,218,.16); --line-soft:rgba(236,231,218,.08); --chip:#182338;
  --ink:#e5ddc8; --paper:#0a1120;
  --blue:#c9a35f; --blue-soft:rgba(201,163,95,.14); --accent:#d4b878; --star:#c9a35f;
}
[data-skin="estate"]{
  --bg:#ffffff; --surface:#fafafa; --fg:#17191b; --muted:#65686d;
  --line:rgba(23,25,27,.12); --line-soft:rgba(23,25,27,.06); --chip:#f0f1f0;
  --ink:#141618; --paper:#ffffff;
  --blue:#1e5c45; --blue-soft:rgba(30,92,69,.1); --accent:#1e5c45; --star:#1e5c45;
}
[data-skin="estate"][data-theme="dark"]{
  --bg:#101312; --surface:#171b19; --fg:#e9ece9; --muted:#9aa39e;
  --line:rgba(233,236,233,.15); --line-soft:rgba(233,236,233,.07); --chip:#1d2320;
  --ink:#e6eae6; --paper:#101312;
  --blue:#4da77c; --blue-soft:rgba(77,167,124,.14); --accent:#5cbb8d; --star:#4da77c;
}
[data-skin="sandstone"]{
  --bg:#efe6d8; --surface:#f7f1e6; --fg:#2b2015; --muted:#6d5f4e;
  --line:rgba(43,32,21,.16); --line-soft:rgba(43,32,21,.08); --chip:#e6dac6;
  --ink:#241a10; --paper:#efe6d8;
  --blue:#b45f2f; --blue-soft:rgba(180,95,47,.12); --accent:#9c4f24; --star:#b45f2f;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
}
[data-skin="sandstone"][data-theme="dark"]{
  --bg:#171009; --surface:#20170d; --fg:#efe4d2; --muted:#a4937d;
  --line:rgba(239,228,210,.16); --line-soft:rgba(239,228,210,.08); --chip:#2a1f12;
  --ink:#ecdfc9; --paper:#171009;
  --blue:#d98c50; --blue-soft:rgba(217,140,80,.14); --accent:#e09a5f; --star:#d98c50;
}
/* per-skin photo grading — the same imagery reads differently in each look */
[data-skin="midnight"] .bgimg{filter:brightness(.9) contrast(1.06) saturate(.82) sepia(.06)}
[data-skin="midnight"][data-theme="dark"] .bgimg{filter:brightness(.7) contrast(1.08) saturate(.8)}
[data-skin="estate"] .bgimg{filter:saturate(.55) contrast(1.05)}
[data-skin="estate"][data-theme="dark"] .bgimg{filter:saturate(.5) brightness(.76)}
[data-skin="sandstone"] .bgimg{filter:sepia(.28) saturate(1.08) contrast(1.02)}
[data-skin="sandstone"][data-theme="dark"] .bgimg{filter:sepia(.3) brightness(.72) contrast(1.05)}

/* skin picker: topbar dots, menu rows, footer row */
.skin-dots{display:flex;gap:7px;align-items:center;flex:0 0 auto}
@media (max-width:1280px){.skin-dots{display:none}}
.skin-swatch{width:19px;height:19px;border-radius:50%;border:2px solid var(--line);
  cursor:pointer;padding:0;background:none;position:relative;overflow:hidden}
.skin-swatch i{position:absolute;inset:0;border-radius:50%}
.skin-swatch[data-skin=""] i{background:linear-gradient(135deg,#f2efe8 50%,#2b3ff2 50%)}
.skin-swatch[data-skin="midnight"] i{background:linear-gradient(135deg,#0a1120 50%,#c9a35f 50%)}
.skin-swatch[data-skin="estate"] i{background:linear-gradient(135deg,#ffffff 50%,#1e5c45 50%)}
.skin-swatch[data-skin="sandstone"] i{background:linear-gradient(135deg,#efe6d8 50%,#b45f2f 50%)}
.skin-swatch.cur{border-color:var(--fg)}
.skin-rows{display:flex;flex-direction:column;gap:4px;margin:6px 0}
.skin-row{display:flex;align-items:center;gap:10px;border:1px solid var(--line);
  border-radius:12px;background:var(--bg);padding:8px 12px;cursor:pointer;
  font-size:13px;font-weight:700;color:var(--fg);text-align:left}
.skin-row.cur{border-color:var(--fg)}
.skin-row .skin-swatch{pointer-events:none}
.f-skins{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:6px 0;font-size:12.5px}
.f-skins .skin-swatch{border-color:rgba(255,255,255,.4)}
.f-skins .skin-swatch.cur{border-color:#fff}
.f-skins b{color:#fff;font-family:var(--serif);font-size:13px;text-transform:uppercase;letter-spacing:.06em}

/* article photo header (slimmer inset overlay inside .art-wrap) */
.art-wrap{--bh:clamp(180px,21vw,240px)}
.art-wrap .hub-hero{margin-top:2px}
.hub-hero + .art-head{position:relative;z-index:2;
  margin:calc(0px - var(--bh)) 0 14px !important;
  min-height:var(--bh);display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;padding:0 18px 16px}
.hub-hero + .art-head .eyebrow{color:color-mix(in srgb, var(--blue) 45%, #fff)}
.hub-hero + .art-head h1{color:#fff;text-shadow:0 1px 14px rgba(8,10,14,.5)}
.hub-hero + .art-head .art-meta{color:rgba(255,255,255,.85)}
.hub-hero + .art-head .favstar{color:rgba(255,255,255,.75)}
.hub-hero + .art-head .favstar.on{color:#fff}

/* home photo mosaic */
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0}
.mosaic img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:14px;display:block}
@media (max-width:900px){.mosaic{grid-template-columns:repeat(2,1fr)}}

/* back button (all pages except home) */
.backbtn{display:inline-block;margin:0 0 6px;font-size:12.5px;font-weight:700;
  color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:6px 14px}
.backbtn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);text-decoration:none}

/* ============================================================
   Maturity assessment layout (Mark): every question in its own
   darker card, answers as a LINEAR multiple-choice list —
   one per line, radio-style, straight down.
   ============================================================ */
#matForm{counter-reset:q;padding:18px}
.q-card{background:var(--chip);border:1px solid var(--line);border-radius:14px;
  padding:16px 18px 14px;margin-bottom:12px;counter-increment:q}
.q-card .q-label{display:block;margin-bottom:10px;font-size:14.5px;font-weight:700;
  color:var(--fg);font-family:var(--serif);letter-spacing:-0.01em;text-transform:none}
.q-card .q-label:before{content:counter(q) ".  ";color:var(--blue);font-weight:700}
.q-card .multi-opts{flex-direction:column;gap:6px;align-items:stretch}
.q-card .mo{width:100%;text-align:left;border-radius:10px;padding:10px 14px 10px 40px;
  position:relative;font-weight:600;font-size:13.5px;line-height:1.4;
  background:var(--surface);border:1px solid var(--line)}
.q-card .mo:before{content:"";position:absolute;left:13px;top:50%;transform:translateY(-50%);
  width:14px;height:14px;border-radius:50%;border:2px solid var(--muted);background:none}
.q-card .mo:hover{border-color:var(--fg)}
.q-card .mo.on{background:var(--blue);border-color:var(--blue);color:#fff}
.q-card .mo.on:before{border-color:#fff;background:#fff;
  box-shadow:inset 0 0 0 3px var(--blue)}
@media (max-width:640px){
  #matForm{padding:12px}
  .q-card{padding:13px 13px 11px}
  .q-card .mo{padding:10px 12px 10px 36px}
}

/* tiny question-count header above the assessment (Mark) */
.q-mini{text-align:center;font-size:11px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:var(--blue);margin:0 0 12px}