/* ── TOKENS ─────────────────────────────────────────────────── */
:root {
  --bg2:      #1f1232;
  --bg3:      #23133a;
  --bg4:      #2a1647;
  --line:     #3a1c63;
  --line2:    #5e309d;

  --tx:       #e6e9ef;
  --tx2:      #d6d6d6;
  --tx3:      #d6d6d6;
  --tx4:      #e8f0ff;

  --ora:      #b33ff3;
  --ora2:     #b33ff3;
  --ora-lt:   #b43ff31f;
  --ora-bg:   #1e1a2036;

  --ms:       #883CF0;
  --ms2:      #883CF0;
  --ms-lt:    #b43ff31f;
  --ms-bg:    #1e1a2036;

  --pm:       #ad3ef2;
  --pm2:      #ad3ef2;
  --pm-lt:    #b43ff31f;
  --pm-bg:    #1e1a2036;

  --red:      #9f3df1;
  --red-lt:   #b43ff31f;
  --red-bg:   #1e1a2036;

  --amb:      #b33ff3;
  --amb-lt:   #b43ff31f;
  --amb-bg:   #1e1a2036;

  --r: 3px;
}

*,*::before,*::after { box-sizing: border-box; margin:0; padding:0; }
html { scroll-behavior: smooth; }

.intune-pm-decision-matrix-guide {
  background:#191127;
  color: var(--tx);
  position: relative;
  font-size: 14px;
  line-height: 1.7;
  overflow-x: hidden;
}

/* Subtle hex-dot background */
.intune-pm-decision-matrix-guide::before {
  content:'';
  position:absolute; inset:0;
  background-image: radial-gradient(circle, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events:none; z-index:0;
}

/* ── SHELL ─────────────────────────────────────────────────── */
.shell { display:flex; min-height:100vh; position:relative; z-index:1; }

/* ── SIDEBAR ───────────────────────────────────────────────── */
.sidebar {
  width:260px; min-width:260px;
  background: #180f26;
  border-right: 1px solid var(--line);
  position:sticky; top:0; left:0; bottom:0;
  overflow-y:auto; z-index:1;
  display:flex; flex-direction:column;
}
.sidebar::-webkit-scrollbar { width:3px; }
.sidebar::-webkit-scrollbar-thumb { background:var(--bg4); }

/* logo block */
.sb-logo {
  padding:22px 20px 18px;
  border-bottom:1px solid var(--line);
  position:relative; overflow:hidden;
}
.sb-logo::before {
  content:'';
  position:absolute; top:-20px; right:-20px;
  width:100px; height:100px; border-radius:50%;
  background: radial-gradient(circle, var(--ora-lt) 0%, transparent 70%);
  pointer-events:none;
}

.sb-eyebrow {
   font-size:9px; color:var(--tx4);
   text-transform:uppercase; margin-bottom:8px;
}
.sb-title {
   font-size:15px; font-weight:800;
  color:var(--tx); line-height:1.2; 
}
.sb-sub {
   font-size:9px; color:var(--tx3);
  margin-top:4px; 
}

/* scoreboard */
.sb-board {
  padding:16px 20px;
  border-bottom:1px solid var(--line);
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.sbb {
  background:var(--bg3); border-radius:var(--r);
  padding:10px 12px; position:relative; overflow:hidden;
}
.sbb::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
}
.sbb.ms::after { background:var(--ms); }
.sbb.pm::after { background:var(--pm); }

.sbb-val {
   font-size:26px; font-weight:800;
  line-height:1; 
}
.sbb-val.ms { color:var(--ms); }
.sbb-val.pm { color:var(--pm); }
.sbb-lbl {  font-size:9px; color:var(--tx3); margin-top:3px;  }

/* progress strip */
.sb-prog {
  padding:12px 20px 10px;
  border-bottom:1px solid var(--line);
}
.spr-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.spr-lbl {  font-size:9px; color:var(--tx4);  text-transform:uppercase; }
.spr-pct {  font-size:10px; color:var(--ora); font-weight:500; }
.spr-track { height:4px; background:var(--bg4); border-radius:2px; overflow:hidden; }
.spr-fill { height:100%; background:linear-gradient(90deg,var(--ora2),var(--ora)); border-radius:2px; transition:width .5s ease; width:0%; }

/* nav */
nav { padding:10px 0 24px; flex:1; }

.nav-section {
   font-size:8px; font-weight:500;
   text-transform:uppercase;
  color:var(--tx4); padding:14px 20px 5px;
}

.nl {
  display:flex; align-items:center; gap:10px;
  padding:8px 20px; cursor:pointer;
  border-left:2px solid transparent;
  transition:all .15s;
  color:var(--tx3);  font-size:12px; font-weight:500;
}
.nl:hover { color:var(--tx2); background:#23133a9f; }
.nl.active { color:var(--tx); border-left-color:var(--ora); background:#23133a; }

.nl-n {  font-size:9px; color:var(--tx4); min-width:20px; }
.nl.active .nl-n { color:var(--tx3); }

.nl-pip {
  margin-left:auto; width:14px; height:14px;
  border-radius:50%; border:1px solid var(--line2);
  display:flex; align-items:center; justify-content:center;
   font-size:7px; font-weight:800;
  transition:all .2s;
}
.nl-pip.done { background:var(--pm); border-color:var(--pm); color:#fff; }

/* ── MAIN ──────────────────────────────────────────────────── */
.main 
{ 
  flex:1; 
  overflow-y: auto;
  height: 100vh;
}

/* topbar */
.topbar {
  background:#180f26; border-bottom:1px solid var(--line);
  padding:0 48px; display:flex; align-items:stretch; justify-content:space-between;
  position:sticky; top:0; z-index:1;
  min-height:44px;
}

.tb-left { display:flex; align-items:center; gap:0; }

.tb-tag {
   font-size:9px; font-weight:500;
   text-transform:uppercase;
  padding:0 14px; height:44px; display:flex; align-items:center;
  border-right:1px solid var(--line);
}
.tb-tag.ms { color:var(--ms); background:var(--ms-bg); }
.tb-tag.or { color:var(--ora); background:var(--ora-bg); }
.tb-tag.pm { color:var(--pm); background:var(--pm-bg); }

.tb-crumb {
   font-size:11px; font-weight:600;
  color:var(--tx3); padding:0 18px; display:flex; align-items:center; gap:7px;
}
.tb-crumb span { color:var(--tx); }

.tb-right { display:flex; align-items:center; }
.tb-version {
   font-size:9px; color:var(--tx4);
  padding:0 14px; border-left:1px solid var(--line); 
}

/* ── PAGES ─────────────────────────────────────────────────── */
.intune-pm-decision-matrix-guide .page { display:none; padding:52px 48px 88px; max-width:980px; animation:rise .3s ease; }
.intune-pm-decision-matrix-guide .page.active { display:block; }

@keyframes rise {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── PAGE HEADER ───────────────────────────────────────────── */
.pg-stamp {
  display:inline-flex; align-items:center; gap:8px;
   font-size:9px; 
  text-transform:uppercase; color:var(--tx4);
  border:1px solid var(--line2); padding:4px 10px; border-radius:var(--r);
  margin-bottom:18px;
}
.pg-stamp .dot { width:6px; height:6px; border-radius:50%; }
.pg-stamp .dot.or { background:var(--ora); }
.pg-stamp .dot.ms { background:var(--ms); }
.pg-stamp .dot.pm { background:var(--pm); }
.pg-stamp .dot.red{ background:var(--red); }

.pg-title {
   font-size:clamp(28px,3.6vw,46px);
  font-weight:800; line-height:1.08; 
  color:var(--tx); margin-bottom:16px;
}
.pg-title .em-ora { color:var(--ora); }
.pg-title .em-ms  { color:var(--ms); }
.pg-title .em-pm  { color:var(--pm); }
.pg-title em { font-style:italic; font-weight:300;  }

.pg-lead {
  font-size:15px; color:var(--tx2); line-height:1.85; max-width:660px;
  margin-bottom:44px; font-style:italic;
  border-left:2px solid var(--ora); padding-left:18px;
}

/* ── DIVIDER ────────────────────────────────────────────────── */
.divline {
  display:flex; align-items:center; gap:12px;
  margin:32px 0 20px;
}
.divline-txt {
   font-size:9px; font-weight:500;
   text-transform:uppercase;
  color:#180f26; background:var(--tx3); padding:3px 10px;
  white-space:nowrap;
}
.divline::after { content:''; flex:1; height:1px; background:var(--line2); }

/* ── STAT BAND ─────────────────────────────────────────────── */
.statband {
  display:grid; grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line2); margin-bottom:36px;
  background:var(--bg2);
}
.stat {
  padding:20px 20px 18px;
  border-right:1px solid var(--line2);
  position:relative;
  transition:background .15s;
}
.stat:last-child { border-right:none; }
.stat:hover { background:var(--bg3); }
.stat::after { content:''; position:absolute; top:0; left:0; right:0; height:2px; }
.stat.or::after { background:var(--ora); }
.stat.ms::after { background:var(--ms); }
.stat.pm::after { background:var(--pm); }
.stat.red::after { background:var(--red); }

.stat-n {
   font-size:34px; font-weight:800;
   line-height:1; margin-bottom:5px;
}
.stat-n.or { color:var(--ora); }
.stat-n.ms { color:var(--ms); }
.stat-n.pm { color:var(--pm); }
.stat-n.red{ color:var(--red); }
.stat-l {  font-size:12px; font-weight:600; color:var(--tx2); line-height:1.3; }
.stat-s {  font-size:9px; color:var(--tx4); margin-top:4px; }

/* ── SPLIT HERO ────────────────────────────────────────────── */
.split2 { display:grid; grid-template-columns:1fr 1fr; margin-bottom:24px; gap:2px; }

.hero {
  padding:26px 28px;
  background:var(--bg2); border:1px solid var(--line);
  position:relative; overflow:hidden;
  transition:border-color .2s;
}
.hero:hover { border-color:var(--line2); }
.hero.ms { border-top:2px solid var(--ms); }
.hero.pm { border-top:2px solid var(--pm); }

.hero-chip {
  display:inline-flex; align-items:center; gap:6px;
   font-size:9px; font-weight:500;
   text-transform:uppercase; margin-bottom:10px;
}
.hero-chip.ms { color:var(--ms); }
.hero-chip.pm { color:var(--pm); }
.hero-chip::before { content:''; width:8px; height:8px; border-radius:50%; }
.hero-chip.ms::before { background:var(--ms); }
.hero-chip.pm::before { background:var(--pm); }

.hero-hed {
   font-size:18px; font-weight:800;
  line-height:1.15;  margin-bottom:10px;
}
.hero-hed.ms { color:var(--ms); }
.hero-hed.pm { color:var(--pm); }

.hero-body { font-size:13px; color:var(--tx2); line-height:1.75; }

/* ── CAPABILITY GRID ───────────────────────────────────────── */
.capgrid { display:grid; grid-template-columns:1fr 1fr; gap:2px; margin-bottom:24px; }

.cap {
  background:var(--bg2); border:1px solid var(--line);
  padding:20px 22px; position:relative; overflow:hidden;
  transition:background .15s;
}
.cap:hover { background:var(--bg3); }
.cap::before { content:''; position:absolute; top:0; left:0; bottom:0; width:2px; }
.cap.ms::before  { background:var(--ms); }
.cap.pm::before  { background:var(--pm); }
.cap.red::before { background:var(--red); }
.cap.or::before  { background:var(--ora); }
.cap.amb::before { background:var(--amb); }

.cap-kicker {
   font-size:9px; font-weight:500;
   text-transform:uppercase; margin-bottom:6px;
}
.cap-kicker.ms  { color:var(--ms); }
.cap-kicker.pm  { color:var(--pm); }
.cap-kicker.red { color:var(--red); }
.cap-kicker.or  { color:var(--ora); }
.cap-kicker.amb { color:var(--amb); }

.cap-title {
   font-size:15px; font-weight:700;
  color:var(--tx);  margin-bottom:8px; line-height:1.2;
}

.cap-body { font-size:13px; color:var(--tx2); line-height:1.7; }

/* expandable */
.cap-toggle {
  margin-top:10px; padding-top:9px; border-top:1px solid var(--line);
  display:flex; align-items:center; gap:5px; cursor:pointer;
   font-size:9px;  text-transform:uppercase;
  color:var(--tx4); transition:color .15s; user-select:none;
}
.cap-toggle:hover { color:var(--ora); }
.cap-toggle .a { transition:transform .2s; display:inline-block; }
.cap-toggle.open .a { transform:rotate(90deg); }

.cap-extra {
  display:none; margin-top:10px; padding:12px 14px;
  background:var(--bg3); border:1px solid var(--line);
  font-size:12px; color:var(--tx2); line-height:1.72;
  animation:rise .2s ease;
}
.cap-extra.on { display:block; }

/* ── TABLE ─────────────────────────────────────────────────── */
.t { width:100%; border-collapse:collapse; font-size:13px; margin:8px 0 28px; }
.t th {
  padding:10px 14px; text-align:left;
   font-size:10px; font-weight:700;
   text-transform:uppercase; border:1px solid var(--line2);
}
.t th.th0 { background:var(--bg3); color:var(--tx3); }
.t th.th1 { background:var(--ms-bg); color:var(--ms); border-color:var(--ms-lt); }
.t th.th2 { background:var(--pm-bg); color:var(--pm); border-color:var(--pm-lt); }

.t td {
  padding:11px 14px; border:1px solid var(--line);
  vertical-align:top; line-height:1.55;
  transition:background .1s;
}
.t tr:hover td { background:var(--bg3); }
.t td.c0 {  font-weight:700; font-size:13px; color:var(--tx); background:var(--bg2); }
.t td.c1 { background:var(--bg2); color:var(--tx2); }
.t td.c2 { background:var(--bg2); color:var(--tx2); }

.tag {
  display:inline-block;  font-size:9px; font-weight:700;
   padding:2px 7px; border-radius:2px; margin-bottom:3px;
  text-transform:uppercase;
}
.tag-y   { background:var(--pm-lt);  color:var(--pm); }
.tag-n   { background:var(--red-lt); color:var(--red); }
.tag-p   { background:var(--amb-lt); color:var(--amb); }
.tag-na  { background:var(--bg4);    color:var(--tx3); }

/* ── CALLOUT ───────────────────────────────────────────────── */
.callout {
  display:flex; gap:14px; padding:18px 20px; margin:22px 0;
  border-left:3px solid; border-radius:0 var(--r) var(--r) 0;
  font-size:13px; color:var(--tx2); line-height:1.75;
}
.callout-icon { font-size:18px; flex-shrink:0; padding-top:1px; }
.callout strong {  font-weight:700; color:var(--tx); display:block; margin-bottom:4px; font-style:normal; font-size:13px; }
.ca-or  { background:var(--ora-bg); border-color:var(--ora); }
.ca-ms  { background:var(--ms-bg);  border-color:var(--ms); }
.ca-pm  { background:var(--pm-bg);  border-color:var(--pm); }
.ca-red { background:var(--red-bg); border-color:var(--red); }
.ca-amb { background:var(--amb-bg); border-color:var(--amb); }

/* ── LAYER DIAGRAM ─────────────────────────────────────────── */
.layerdiag {
  background:var(--bg2); border:1px solid var(--line2);
  padding:32px 36px; margin:24px 0; border-radius:var(--r);
  position:relative; overflow:hidden;
}
.layerdiag::before {
  content:'';
  position:absolute; bottom:-40px; right:-40px;
  width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle, var(--ora-lt) 0%, transparent 70%);
  pointer-events:none;
}

.ld-header {
   font-size:9px; color:var(--tx4);
   text-transform:uppercase; margin-bottom:24px;
}

.ld-layers { display:flex; flex-direction:column; gap:10px; }

.ld-layer {
  display:flex; align-items:center; gap:16px;
  padding:16px 20px; border-radius:var(--r);
  border:1px solid;
}
.ld-layer.os-l   { border-color:var(--line2); background:var(--bg3); }
.ld-layer.ms-l   { border-color:var(--ms-lt); background:var(--ms-bg); }
.ld-layer.pm-l   { border-color:var(--pm-lt); background:var(--pm-bg); }
.ld-layer.id-l   { border-color:var(--line2); background:var(--bg3); }

.ld-icon { font-size:22px; flex-shrink:0; }
.ld-content { flex:1; }

.ld-name {
   font-size:14px; font-weight:700;
   margin-bottom:5px;
}
.ld-layer.os-l .ld-name { color:var(--tx2); }
.ld-layer.ms-l .ld-name { color:var(--ms); }
.ld-layer.pm-l .ld-name { color:var(--pm); }
.ld-layer.id-l .ld-name { color:var(--tx2); }

.ld-tags { display:flex; flex-wrap:wrap; gap:5px; }
.ld-tag {
   font-size:9px; padding:2px 7px;
  border-radius:2px; 
}
.ld-layer.ms-l .ld-tag { background:var(--ms-lt); color:var(--ms); }
.ld-layer.pm-l .ld-tag { background:var(--pm-lt); color:var(--pm); }
.ld-layer.os-l .ld-tag,
.ld-layer.id-l .ld-tag { background:var(--bg4); color:var(--tx3); }

.ld-arrow {
  text-align:center;  font-size:11px;
  color:var(--tx4);  padding:3px 0;
}

/* ── DECISION TOOL ─────────────────────────────────────────── */
.dtool {
  background:var(--bg2); border:1px solid var(--line2);
  border-radius:var(--r); overflow:hidden; margin:24px 0;
}

.dtool-head {
  padding:22px 28px; background:var(--bg3);
  border-bottom:1px solid var(--line2);
  display:flex; align-items:center; justify-content:space-between;
}

.dth-left .dth-title {
   font-size:18px; font-weight:800;
  color:var(--tx); 
}
.dth-left .dth-sub {
   font-size:9px; color:var(--tx4);
  margin-top:3px;  text-transform:uppercase;
}

.dth-reset {
   font-size:9px; font-weight:500;
   text-transform:uppercase;
  color:var(--tx4); background:transparent;
  border:1px solid var(--line2); padding:7px 14px;
  border-radius:var(--r); cursor:pointer; transition:all .15s;
}
.dth-reset:hover { color:var(--tx2); border-color:var(--tx3); }

.dtool-body { padding:24px 28px; }

.dq {
  padding:16px 18px; background:var(--bg3); border:1px solid var(--line);
  border-radius:var(--r); margin-bottom:12px; transition:border-color .2s;
}
.dq.answered { border-color:var(--line2); }

.dq-n {  font-size:9px; color:var(--tx4);  margin-bottom:6px; }
.dq-q {  font-size:14px; font-weight:700; color:var(--tx); margin-bottom:12px; line-height:1.32;  }

.dq-btns { display:flex; gap:8px; }
.dq-btn {
  flex:1; padding:9px 12px; border-radius:var(--r);
   font-size:11px; font-weight:700;
   text-transform:uppercase; text-align:center;
  border:1px solid var(--line2); color:var(--tx4); background:transparent;
  cursor:pointer; transition:all .15s;
}
.dq-btn:hover:not(:disabled) { border-color:var(--tx3); color:var(--tx2); }
.dq-btn:disabled { cursor:default; }
.dq-btn.sel-y { background:var(--pm-bg); border-color:var(--pm); color:var(--pm); }
.dq-btn.sel-n { background:var(--ms-bg); border-color:var(--ms); color:var(--ms); }
.dq-btn.dim   { opacity:.3; }

/* result */
.dt-result {
  margin-top:24px; padding-top:24px;
  border-top:1px solid var(--line2); display:none;
}
.dt-result.show { display:block; }

.dr-wrap { display:flex; gap:28px; align-items:flex-start; }

/* score ring */
.dr-ring { flex-shrink:0; position:relative; width:148px; height:148px; }
.dr-ring svg { width:148px; height:148px; transform:rotate(-90deg); }
.dr-ring-track { fill:none; stroke:var(--bg4); stroke-width:10; }
.dr-ring-fill  { fill:none; stroke-width:10; stroke-linecap:round; transition:stroke-dashoffset 1.2s ease, stroke .5s; }
.dr-center {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
}
.dr-num {  font-size:38px; font-weight:800; color:var(--tx); line-height:1; }
.dr-of  {  font-size:10px; color:var(--tx4); margin-top:2px; }

.dr-content { flex:1; }
.dr-verdict {
   font-size:20px; font-weight:800;
   margin-bottom:8px; line-height:1.2;
}
.dr-detail {
   font-size:13px; color:var(--tx2); line-height:1.75; font-style:italic;
}

/* ── CHECKLIST ─────────────────────────────────────────────── */
ul.ck { list-style:none; }
ul.ck li {
  display:flex; align-items:flex-start; gap:12px;
  padding:11px 0; border-bottom:1px solid var(--line);
  cursor:pointer; transition:background .1s;
}
ul.ck li:last-child { border-bottom:none; }
ul.ck li:hover { background:var(--bg2); margin:0 -8px; padding-left:8px; padding-right:8px; }

.cbox {
  width:18px; height:18px; border:1.5px solid var(--line2); border-radius:3px;
  flex-shrink:0; margin-top:2px; display:flex; align-items:center; justify-content:center;
   font-size:10px; font-weight:800; transition:all .2s;
}
ul.ck li.done .cbox { background:var(--pm); border-color:var(--pm); color:#fff; }
ul.ck li.done .ck-h { color:var(--tx3); text-decoration:line-through; text-decoration-color:var(--pm); }

.ck-h {  font-size:13px; font-weight:700; color:var(--tx); display:block; margin-bottom:2px; }
.ck-b { font-size:12px; color:var(--tx3); line-height:1.55; }

/* ── QUIZ ──────────────────────────────────────────────────── */
.qblock {
  background:var(--bg2); border:1px solid var(--line);
  padding:26px 28px; margin-bottom:16px; position:relative;
  border-radius:var(--r);
}
.qblock::after {
  content: attr(data-n);
  position:absolute; top:12px; right:20px;
   font-size:64px; font-weight:800;
  color:rgba(255,255,255,.04); line-height:1; user-select:none;
  
}

.q-kk {  font-size:9px; color:var(--tx4);  text-transform:uppercase; margin-bottom:8px; }
.q-q  {  font-size:16px; font-weight:700; color:var(--tx); margin-bottom:18px; line-height:1.35;  }

.q-opts { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.q-opt {
  padding:12px 14px; border:1px solid var(--line2); border-radius:var(--r);
  cursor:pointer;  font-size:13px; color:var(--tx2);
  background:var(--bg3); transition:all .15s; line-height:1.5;
}
.q-opt:hover:not(.locked) { border-color:var(--pm); color:var(--tx); background:var(--pm-bg); }
.q-opt.correct { border-color: #77b255;
    background: #77b25520;
    color: #60c090; font-weight:600; }
.q-opt.wrong   { border-color: #dc143c;
    background: #dc143c2b;
    color:#ff7a90; }
.q-opt.locked  { cursor:default; }

.q-exp {
  display:none; margin-top:14px; padding:14px 16px;
  background:var(--bg3); border:1px solid var(--line);
  font-size:13px; color:var(--tx2); line-height:1.72; border-radius:var(--r);
  animation:rise .2s;
}
.q-exp.on { display:block; }
.q-exp .lb {  font-size:10px; font-weight:500;  text-transform:uppercase; margin-right:6px; }
.lb-ok { color:var(--pm); } .lb-no { color:var(--red); }

.quiz-fin {
  background:var(--bg2); border:1px solid var(--line2);
  padding:40px; text-align:center; margin-top:24px;
  display:none; border-radius:var(--r);
}
.qf-num {  font-size:80px; font-weight:800; color:var(--pm); line-height:1;  }
.qf-of  {  font-size:11px; color:var(--tx4); margin-top:4px;  text-transform:uppercase; }
.qf-msg {  font-size:14px; color:var(--tx3); margin-top:14px; max-width:440px; margin-inline:auto; line-height:1.75; font-style:italic; }

/* ── GENERIC ───────────────────────────────────────────────── */
.two   { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:20px; }
.three { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; margin-bottom:20px; }

.box {
  background:var(--bg2); border:1px solid var(--line);
  padding:18px 20px; border-radius:var(--r); border-top:2px solid;
}
.box.ms { border-top-color:var(--ms); }
.box.pm { border-top-color:var(--pm); }
.box.red{ border-top-color:var(--red); }
.box.or { border-top-color:var(--ora); }
.box.amb{ border-top-color:var(--amb); }

.box-h {
   font-size:13px; font-weight:700;
  margin-bottom:8px; 
}
.box-h.ms { color:var(--ms); }
.box-h.pm { color:var(--pm); }
.box-h.red{ color:var(--red); }
.box-h.or { color:var(--ora); }
.box-h.amb{ color:var(--amb); }
.box-h.tx { color:var(--tx2); }

.box-b { font-size:13px; color:var(--tx2); line-height:1.72; }

ul.bl { list-style:none; padding:0; }
ul.bl li { padding:3px 0 3px 18px; position:relative; font-size:13px; color:var(--tx2); line-height:1.65; }
ul.bl li::before { content:'›'; position:absolute; left:0;  font-weight:800; top:3px; font-size:13px; }
ul.bl.pm  li::before { color:var(--pm); }
ul.bl.red li::before { color:var(--red); content:'×'; font-size:11px; top:5px; }

h3 {  font-size:18px; font-weight:800; color:var(--tx);  margin:28px 0 12px; }
h3:first-child { margin-top:0; }
p  { font-size:13px; color:var(--tx2); line-height:1.8; margin-bottom:12px; }
strong {  font-weight:700; color:var(--tx); font-style:normal; }

/* nav buttons */
.nav-btns { display:flex; gap:12px; margin-top:52px; padding-top:26px; border-top:1px solid var(--line2); }
.btn {
   font-size:11px; font-weight:700;
  padding:11px 22px; cursor:pointer;
   text-transform:uppercase;
  transition:all .15s; border:1px solid transparent; border-radius:var(--r);
}
.btn-pm  { background:var(--pm); color:#fff; border-color:var(--pm); }
.btn-pm:hover { background:#883cf0e0; }
.btn-out { background:transparent; color:var(--tx3); border-color:var(--line2); }
.btn-out:hover { color:var(--tx); border-color:var(--tx3); }

::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:var(--bg2); }
::-webkit-scrollbar-thumb { background:var(--bg4); border-radius:3px; }

@media (max-width:860px) {
  .sidebar { transform:translateX(-100%);  position: absolute; }
  .main { margin-left:0; }
  .intune-pm-decision-matrix-guide .page { padding:28px 20px 60px; }
  .topbar { flex-direction: column;
    gap: 10px;
    padding: 10px;
    height: auto; }
  .split2,.capgrid,.two,.three,.q-opts,.statband { grid-template-columns:1fr; }
  .pg-title { font-size:28px; }
  .dr-wrap { flex-direction:column; }
}