/* Mullion — shared design system */
:root{
  --bg:#F4F6F4; --surface:#FFFFFF; --surface-2:#EDF0EC; --surface-3:#E4E9E3;
  --border:#D6DCD5; --border-strong:#BCC5BA;
  --text:#16211C; --text-2:#576760; --text-3:#87948C;
  --primary:#14503F; --primary-ink:#0C3A2D; --primary-soft:#E0EDE6; --on-primary:#FFF;
  --accent:#9A6B12; --accent-soft:#F6ECD6;
  --ok:#2F7A57; --ok-soft:#DFF0E6;
  --warn:#9C6209; --warn-soft:#FAEBD3;
  --crit:#A1302A; --crit-soft:#F8E1DE;
  --radius:10px;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --body:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --display:"Bricolage Grotesque","Public Sans",-apple-system,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0D1411; --surface:#151E1A; --surface-2:#1C2622; --surface-3:#25312B;
  --border:#2A3630; --border-strong:#3B4A43;
  --text:#E7EEE9; --text-2:#9FAEA5; --text-3:#6E7C74;
  --primary:#5EBE9A; --primary-ink:#8FD6BA; --primary-soft:#173028; --on-primary:#08211A;
  --accent:#D9A64C; --accent-soft:#2E2617;
  --ok:#4FB183; --ok-soft:#142E23;
  --warn:#D49A33; --warn-soft:#2E2413;
  --crit:#E0685C; --crit-soft:#331916;
}}
:root[data-theme="dark"]{
  --bg:#0D1411; --surface:#151E1A; --surface-2:#1C2622; --surface-3:#25312B;
  --border:#2A3630; --border-strong:#3B4A43;
  --text:#E7EEE9; --text-2:#9FAEA5; --text-3:#6E7C74;
  --primary:#5EBE9A; --primary-ink:#8FD6BA; --primary-soft:#173028; --on-primary:#08211A;
  --accent:#D9A64C; --accent-soft:#2E2617;
  --ok:#4FB183; --ok-soft:#142E23;
  --warn:#D49A33; --warn-soft:#2E2413;
  --crit:#E0685C; --crit-soft:#331916;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display);margin:0;letter-spacing:-.02em;text-wrap:balance;line-height:1.2}
a{color:var(--primary-ink);text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}

.shell{max-width:1060px;margin:0 auto;padding-inline:16px}
.narrow{max-width:760px}

/* header */
header.top{border-bottom:1px solid var(--border);background:var(--surface);position:sticky;top:0;z-index:30}
.topin{display:flex;align-items:center;gap:12px;padding-block:13px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit}
.mark{width:28px;height:28px;display:block;flex:none;color:var(--primary);fill:currentColor}
.logo .nm{display:block;line-height:1.1}
.logo .nm b{font-family:var(--display);font-size:17px;letter-spacing:-.02em;display:block}
.logo .nm i{display:block;font-style:normal;font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--text-3);font-weight:700}
nav.main{margin-left:auto;display:flex;gap:4px;align-items:center;flex-wrap:wrap}
nav.main a{font-size:14px;font-weight:600;color:var(--text-2);text-decoration:none;padding:6px 10px;border-radius:7px}
nav.main a:hover{background:var(--surface-2);color:var(--text)}
nav.main a.cta{background:var(--primary);color:var(--on-primary)}
nav.main a.cta:hover{filter:brightness(1.1)}

/* type */
.eyebrow{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);font-weight:700}
h1.page{font-size:clamp(29px,5vw,46px);margin-block:10px 0;max-width:20ch}
.lede{font-size:18px;color:var(--text-2);max-width:62ch;margin-top:14px}
main h2{font-size:26px;margin-top:44px;scroll-margin-top:80px}
main h3{font-size:18px;margin-top:28px;scroll-margin-top:80px}
main p{max-width:68ch}
main ul,main ol{max-width:66ch;padding-left:22px}
main li{margin-block:6px}
.answer{font-size:17px;font-weight:500;border-left:3px solid var(--primary);padding:2px 0 2px 16px;margin-top:14px;color:var(--text)}
.updated{font-size:12.5px;color:var(--text-3);font-family:var(--mono)}

/* blocks */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.pad{padding:18px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}

.facts{width:100%;border-collapse:collapse;font-size:15px;margin-top:18px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.facts th{text-align:left;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);font-weight:700;padding:11px 16px;border-bottom:1px solid var(--border);background:var(--surface-2)}
.facts td{padding:11px 16px;border-bottom:1px solid var(--border);vertical-align:top}
.facts tbody tr:last-child td{border-bottom:0}
.facts td:first-child{font-weight:600;width:42%}
.tscroll{overflow-x:auto}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}

.note{border-radius:9px;padding:13px 15px;font-size:14.5px;display:flex;gap:11px;line-height:1.55;margin-top:20px;max-width:68ch}
.note svg{width:17px;height:17px;flex:none;margin-top:3px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.note.stop{background:var(--crit-soft);border:1px solid var(--crit);color:var(--crit)}
.note.stop svg{stroke:var(--crit)}
.note.good{background:var(--ok-soft);border:1px solid var(--ok);color:var(--ok)}
.note.good svg{stroke:var(--ok)}
.note.info{background:var(--surface-2);border:1px dashed var(--border-strong);color:var(--text-2)}
.note.info svg{stroke:var(--accent)}
.note strong{color:inherit}

.toolbox{background:var(--primary-soft);border:1px solid var(--primary);border-radius:var(--radius);padding:20px;margin-top:30px;max-width:68ch}
.toolbox h3{color:var(--primary-ink);font-size:19px}
.toolbox p{margin:8px 0 14px;font-size:14.5px;color:var(--text-2)}
.btn{display:inline-block;border:1px solid var(--border-strong);background:var(--surface);border-radius:8px;padding:10px 16px;font-size:15px;font-weight:600;text-decoration:none;color:var(--text)}
.btn:hover{background:var(--surface-2)}
.btn.pri{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.btn.pri:hover{filter:brightness(1.1)}
.btn.lg{padding:13px 22px;font-size:16px}

.faq{margin-top:22px;max-width:68ch}
.faq details{border:1px solid var(--border);border-radius:9px;background:var(--surface);padding:14px 16px;margin-top:9px}
.faq summary{font-weight:600;cursor:pointer;font-size:15.5px}
.faq details[open] summary{margin-bottom:8px}
.faq p{margin:0;font-size:15px;color:var(--text-2)}

.crumbs{font-size:13px;color:var(--text-3);padding-top:24px;padding-bottom:16px}
.crumbs a{color:var(--text-3)}

.related{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:20px}
.related a{display:block;text-decoration:none;color:inherit;border:1px solid var(--border);border-radius:9px;padding:15px;background:var(--surface)}
.related a:hover{border-color:var(--primary)}
.related b{display:block;font-family:var(--display);font-size:15.5px;margin-bottom:4px}
.related span{font-size:13px;color:var(--text-3);line-height:1.45}

footer.foot{border-top:1px solid var(--border);margin-top:56px;padding-block:28px 46px;font-size:13.5px;color:var(--text-3);background:var(--surface)}
footer.foot p{max-width:72ch;margin-block:0 10px}
footer.foot .cols{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-bottom:24px}
footer.foot h4{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-bottom:9px;font-family:var(--body);font-weight:700}
footer.foot ul{list-style:none;margin:0;padding:0}
footer.foot li{margin-bottom:6px}
footer.foot a{color:var(--text-2);text-decoration:none}
footer.foot a:hover{color:var(--primary-ink);text-decoration:underline}

@media (max-width:820px){
  .g4,.g3,.g2{grid-template-columns:minmax(0,1fr)}
  nav.main{width:100%;margin-left:0;overflow-x:auto}
  header.top{position:static}
  main h2{font-size:22px;margin-top:36px}
}

/* CASL consent on sign-up forms */
.consent{display:flex;gap:9px;align-items:flex-start;margin-top:12px;font-size:13.5px;color:var(--text);line-height:1.45;cursor:pointer}
.consent input{width:17px;height:17px;flex:none;margin:2px 0 0;accent-color:var(--primary)}
.consent-id{margin-top:8px;font-size:12px;color:var(--text-2);line-height:1.5}
.consent-id a{color:inherit}