/* home.css: design/index-redesign/02c-tree-path.html's stylesheet, unchanged (#3031). Change the design file first. */
:root{
  --board:#f6f3ea;
  --dot:rgba(13,27,22,.12);
  --ink:#0d1b16;
  --ink-2:#3c4a43;
  --ink-3:#5f6b65;
  --rule:#d5dbd3;
  --paper:#ffffff;
  --mist:#e9efe8;
  --grid:#dde3db;
  --moss:#1f3a2e;
  --lime:#9be564;
  --leaf:#2f6b4f;
  --leaf-deep:#24543e;
  --leaf-wash:rgba(47,107,79,.07);
  --danger:#c14b3a;
  --danger-text:#9c3626;
  /* the firms' own brand colours (owner ruling, brief 08) */
  --mck:#051C2C;
  --bcg:#147B58;
  --bain:#CB2026;
  /* marker notes: a dark green-black whiteboard marker, so no handwritten red can be read as Bain */
  --marker:#1f3a2e;
  --lime-deep:#5f9e2f;
  --gold-ink:#946d17;
  --sticky:#f3dc93;
  --hl:rgba(231,196,107,.42);
  --tape:rgba(195,205,192,.6);
  --f-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-disp:'Fraunces',Georgia,serif;
  --f-mark:'Gochi Hand','Comic Sans MS',cursive;
  --f-mono:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; /* data role: Inter + tabular-nums (set on body) */
  --pad:clamp(16px,4vw,48px);
  --hand-radius:14px 22px 12px 26px / 24px 12px 26px 14px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{
  margin:0;color:var(--ink);font:400 17px/1.55 var(--f-body);
  background-color:var(--board);
  background-image:radial-gradient(circle at 1px 1px,var(--dot) 1.1px,transparent 1.6px);
  background-size:26px 26px;
  overflow-x:hidden;font-variant-numeric:tabular-nums;
}
a{color:inherit}
img,svg{display:block}
:focus-visible{outline:3px solid var(--leaf);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skiplink{position:absolute;left:12px;top:-60px;background:var(--ink);color:var(--board);padding:10px 14px;border-radius:8px;z-index:100;text-decoration:none;font-weight:700}
.skiplink:focus{top:12px}
.wrap{max-width:1440px;margin:0 auto;padding:0 var(--pad)}
.mono{font-family:var(--f-mono)}

/* ---------- top bar ---------- */
.top{position:sticky;top:0;z-index:40;background:var(--board);border-bottom:1.5px solid var(--ink)}
.top-in{display:flex;align-items:center;gap:20px;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;font-size:19px;letter-spacing:-.01em;white-space:nowrap}
.brand svg{width:30px;height:30px}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav a{text-decoration:none;font-weight:600;font-size:15px;padding:8px 12px;border-radius:8px;white-space:nowrap}
.nav a:hover{background:rgba(13,27,22,.06)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 16px/1.2 var(--f-body);text-decoration:none;border-radius:10px 12px 10px 13px;padding:11px 18px;border:2px solid var(--ink);cursor:pointer;transition:background-color .15s,transform .15s}
.btn-blue{background:var(--lime);border-color:var(--ink);color:var(--ink)}
.btn-blue:hover{background:var(--moss);border-color:var(--moss);color:var(--lime)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:rgba(13,27,22,.06)}
.btn-blue:focus-visible{outline-color:var(--ink)}
.nav .btn{padding:9px 14px;font-size:15px;margin-left:8px;color:var(--ink);white-space:nowrap}
.nav .btn:hover{background:var(--moss);color:var(--lime)}
@media (max-width:900px){.nav .hide-md{display:none}}
@media (max-width:760px){
  .nav .hide-sm{display:none}
  .nav .btn{margin-left:2px}
  .brand span{font-size:17px}
}
@media (max-width:380px){.brand span{display:none}}

/* ---------- hero board: the path ---------- */
.hero{padding:40px 0 72px}
#board{position:relative;display:grid;grid-template-columns:minmax(330px,400px) minmax(0,1fr);gap:0 clamp(48px,5vw,76px);align-items:start}
#wires{position:absolute;left:0;top:0;pointer-events:none;overflow:visible;z-index:2}
.wire{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.wire-dot{stroke:none}

.root-col{position:relative;z-index:1;min-width:0}
h1.root-q{margin:0;font:600 clamp(40px,3.5vw,52px)/1.02 var(--f-disp);letter-spacing:-.022em;color:var(--ink);text-wrap:balance}
h1.root-q .r1{display:block}
h1.root-q .r2{display:inline-block;font-weight:800;white-space:nowrap;margin-top:.08em}
.lede{margin:22px 0 0;font-size:18px;line-height:1.5;color:var(--ink);max-width:38ch}
.lede+.lede{margin-top:10px}
.proof{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:14.5px;color:var(--ink-2)}
.proof li{display:block}
.proof .stars{margin-right:6px}
.proof b{font-family:var(--f-mono);font-weight:700;color:var(--ink)}
.proof a{font-weight:600;color:var(--ink);text-underline-offset:3px}
.stars{color:var(--gold-ink);letter-spacing:1px;font-size:13px}

/* sticky note trial */
.note-start{position:relative;margin:30px 0 4px 6px;font:400 26px/1 var(--f-mark);color:var(--marker);transform:rotate(-4deg);display:inline-flex;align-items:flex-end;gap:2px}
.note-start svg{width:64px;height:44px;margin-bottom:-18px}
.sticky{
  position:relative;background:var(--sticky);padding:22px 22px 20px;margin-top:10px;
  transform:rotate(-1deg);border-radius:2px 2px 6px 3px;
  box-shadow:0 1px 1px rgba(13,27,22,.08),0 18px 22px -16px rgba(13,27,22,.4);
  background-image:linear-gradient(to bottom,rgba(13,27,22,.045),rgba(13,27,22,0) 26px);
  scroll-margin-top:110px;
}
.sticky h2{margin:0;font:700 23px/1.15 var(--f-body);letter-spacing:-.015em}
.sticky .sn-sub{margin:4px 0 14px;font-size:15px;color:var(--ink-2)}
.sn-label{display:block;font:600 13px/1 var(--f-body);margin:0 0 6px}
.sn-input{width:100%;font:500 16px var(--f-body);padding:12px 12px;border:2px solid var(--ink);border-radius:8px;background:#fff;color:var(--ink)}
.sn-consent{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;line-height:1.35;margin:10px 0 12px}
.sn-consent input{margin-top:2px;width:18px;height:18px;accent-color:var(--leaf)}
.sticky .btn{width:100%}
.sn-small{margin:10px 0 0;font-size:12.5px;line-height:1.4;color:var(--ink-2)}
.sn-small a{font-weight:600}
.sn-done{padding:4px 0}
.sn-done .t{font:400 34px/1 var(--f-mark);color:var(--leaf);margin:0 0 6px}
.sn-done p{margin:0 0 10px;font-size:15.5px}

/* ---------- the explorer (Miller columns) ---------- */
.xp{position:relative;z-index:1;min-width:0;scroll-margin-top:80px}
.xp-crumbs{min-height:44px;display:flex;align-items:center;padding:4px 0 10px;border-bottom:1.5px dashed var(--ink-3);margin-bottom:22px}
.xp-crumbs .fb{font:700 15px/1.3 var(--f-body);color:var(--ink-2)}
.xcols{display:grid;grid-template-columns:minmax(168px,196px) minmax(178px,212px) minmax(0,1fr);gap:0 clamp(34px,3.4vw,50px);align-items:start;min-height:540px}
.xcol{min-width:0}
.xcol-h{margin:0 0 12px;font:600 12px/1.2 var(--f-body);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);min-height:15px}
.xlist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.xcol[data-col="1"] .xlist{gap:12px}

/* a node in a column: a real button, quiet until chosen */
.xn{
  position:relative;display:grid;grid-template-columns:1fr 14px;align-items:center;gap:10px;width:100%;
  text-align:left;font:inherit;color:var(--ink);cursor:pointer;
  padding:10px 12px 10px 13px;background:transparent;
  border:1.5px dashed #c3cdc0;border-radius:var(--hand-radius);
  transition:border-color .15s,background-color .15s;
}
.xn:hover{border-color:var(--ink-3);background:rgba(255,255,255,.55)}
.xn{text-wrap:balance;line-height:1.2}
.xn .t{display:inline;font:700 15.5px/1.2 var(--f-body);letter-spacing:-.01em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.xn .s{display:block;font-size:12.5px;line-height:1.3;color:var(--ink-2);margin-top:3px}
.xn .chev{width:14px;height:14px;color:var(--ink-3)}
.xcol[data-col="1"] .xn{padding:14px 14px 14px 15px}
.xcol[data-col="1"] .xn .t{font-size:18px}
.xcol[data-col="1"] .xn .s{font-size:13px}
.xn[aria-pressed="true"]{border:2.4px solid var(--bc,var(--leaf));background:var(--paper);padding:9px 11px 9px 12px;box-shadow:0 10px 16px -14px rgba(13,27,22,.45)}
.xcol[data-col="1"] .xn[aria-pressed="true"]{padding:13px 13px 13px 14px}
.xn[aria-pressed="true"] .t{background-image:linear-gradient(transparent 58%,var(--hl) 58%,var(--hl) 94%,transparent 94%);padding:0 2px;margin-left:-2px}
.xn[aria-pressed="true"] .chev{color:var(--bc,var(--leaf))}
.xn:focus-visible{outline:3px solid var(--leaf);outline-offset:3px}
.xn .sw{display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--bc);margin-right:8px;vertical-align:1px}

/* marker notes inside the columns */
.mk{font:400 21px/1.08 var(--f-mark);color:var(--marker);margin:0}
.mk.green{color:var(--leaf)}

/* the MBB margin note under the firms */
.mbb-note{margin-top:22px;display:none}
.xcols[data-l1="test"] .mbb-note{display:block}
.mbb-note .mk{display:flex;align-items:flex-end;gap:4px;margin:0 0 8px 4px;transform:rotate(-2deg)}
.mbb-note .mk svg{width:26px;height:30px;flex:none;margin-bottom:6px}
.mbb-card{border:2px dashed var(--ink);border-radius:var(--hand-radius);padding:12px 13px 13px;background:rgba(255,255,255,.6)}
.mbb-card .h{font:700 15px/1.2 var(--f-body);margin:0}
.mbb-card .d{font-size:12.5px;line-height:1.35;color:var(--ink-2);margin:4px 0 8px}
.mbb-card .p{display:flex;align-items:baseline;gap:8px;margin:0 0 10px}
.mbb-card .p b{font:800 24px/1 var(--f-body)}
.mbb-card .p span{font:600 12.5px/1 var(--f-body);color:var(--leaf)}
.mbb-card .btn{width:100%;padding:9px 6px;font-size:14px;white-space:nowrap}
.mbb-up{display:block;margin:9px 2px 0;font:600 13px/1.3 var(--f-body);color:var(--ink);text-underline-offset:3px;text-wrap:balance}
.mbb-up:hover{text-decoration-thickness:2px}

/* coach branch: no fork, so column 2 carries a marker note and the wire runs straight to the answer */
.coach-note{display:none;margin:10px 0 0 4px;transform:rotate(-2deg);max-width:15ch}
.xcols[data-l1="coach"] .coach-note{display:block}

/* column 3: the answer at the end of the chain */
.ans{position:relative;border:2.6px solid var(--bc,var(--leaf));border-radius:var(--hand-radius);background:var(--paper);padding:20px 20px 18px;box-shadow:0 18px 26px -22px rgba(13,27,22,.5)}
.ans:focus{outline:none}
.ans:focus-visible{outline:3px solid var(--leaf);outline-offset:4px}
.ans-tag{position:absolute;top:-13px;left:16px;font:700 11.5px/1 var(--f-body);letter-spacing:.06em;text-transform:uppercase;background:var(--sticky);color:var(--ink);border:1.5px solid var(--ink);border-radius:5px;padding:5px 8px 4px;transform:rotate(-1.5deg)}
.ans h3{margin:4px 0 0;font:600 25px/1.12 var(--f-disp);letter-spacing:-.015em;text-wrap:balance}
.ans .d{text-wrap:pretty;margin:8px 0 0;font-size:15px;line-height:1.45;color:var(--ink-2)}
.ans-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:14px 0 14px}
.ans-price b{font:800 46px/1 var(--f-body);letter-spacing:-.02em}
.ans-price s{font:500 16px/1 var(--f-body);color:var(--ink-3)}
.ans-price span{font:700 14px/1 var(--f-body);color:var(--leaf)}
.ans .btn{width:100%;text-wrap:balance;text-align:center}
.ans .btn + .btn{margin-top:8px}
.ans .btn-ghost{font-size:15px;padding:10px 14px}
.ans-fine{margin:10px 0 0;font-size:13px;line-height:1.4;color:var(--ink-2)}
.ans-fine a,.ans-fine button{color:var(--ink);font-weight:600}
/* the firm's guides under its tools (#3009: the tree's leaves link the guides) */
.ans-guides{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:14px 0 0;font-size:14px}
.ans-guides b{font:500 12px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.ans-guides a{color:var(--ink);font-weight:600;text-underline-offset:3px}
/* the guides row: the six most-read guides, plain links in the HTML the server sends (#3009) */
.guide-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:28px 0 0;padding:0;list-style:none}
.guide-row a{display:flex;flex-direction:column;gap:6px;height:100%;padding:18px 20px;border-radius:12px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--rule);color:var(--ink);text-decoration:none}
.guide-row a:hover{box-shadow:inset 0 0 0 2px var(--ink)}
.guide-row a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.guide-row b{font:700 19px/1.25 var(--f-disp)}
.guide-row span{font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.guide-more{margin:18px 0 0;font-size:15px}
.guide-more a{color:var(--ink);font-weight:600}
@media (max-width:900px){.guide-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.guide-row{grid-template-columns:1fr}}
.linkbtn{font:inherit;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.ans-facts{margin:14px 0 14px;display:grid;gap:8px;font-size:14px;line-height:1.4}
.ans-facts p{margin:0}
.ans-facts b{display:block;font:600 11.5px/1.2 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin-bottom:2px}
.ans-ch{list-style:none;margin:12px 0 16px;padding:0;display:grid;gap:5px;font-size:14px;counter-reset:ch}
.ans-ch li{display:grid;grid-template-columns:24px 1fr;align-items:center;gap:8px;counter-increment:ch}
.ans-ch li::before{content:counter(ch);width:22px;height:22px;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;font:700 11px/1 var(--f-body)}
.ans-daily{display:flex;align-items:center;gap:10px;margin:14px 0 14px;padding:10px 12px;border:1.5px dashed var(--ink-3);border-radius:10px;font-size:14px;line-height:1.35}
.ans-daily b{font:800 26px/1 var(--f-body)}
.fade-in{animation:fadeIn .28s ease both}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* the firm's £10 tools, revealed under its bundle */
.tools-note{margin:20px 0 8px 4px;transform:rotate(-1.5deg)}
.tools{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.tool-row{display:grid;grid-template-columns:1fr auto 26px;align-items:center;gap:10px;min-height:42px;padding:6px 8px 6px 13px;text-decoration:none;background:var(--paper);border:1.5px solid var(--ink);border-radius:9px;transition:border-color .15s,box-shadow .15s}
.tool-row .n{font:600 14.5px/1.2 var(--f-body)}
.tool-row .n small{display:block;font-size:12px;font-weight:500;color:var(--ink-2);margin-top:2px}
.tool-row .pr{font:700 13.5px/1 var(--f-body)}
.tool-row .eye{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;transition:background-color .15s,color .15s}
.tool-row .eye svg{width:14px;height:10px}
.tool-row:hover{border-color:var(--leaf);box-shadow:0 0 0 2px var(--leaf)}
.tool-row:hover .eye{background:var(--leaf);border-color:var(--leaf);color:#fff}

/* ---------- three width modes ----------
   wide (>=1360): the hero on the left, the column explorer on the right, a wire from the hero into column 1.
   mid (821-1359): hero text beside the trial note, then the same column explorer across the page width.
   narrow (<=820): the explorer becomes a vertical drill-down tree. 820 is where the answer column drops
   below ~320px and the bundle card starts to wrap, so three columns stop reading cleanly there. */
@media (max-width:1359.98px){
  #board{grid-template-columns:1fr;gap:48px}
  h1.root-q{font-size:clamp(38px,5.4vw,60px)}
}
@media (min-width:821px) and (max-width:1359.98px){
  .root-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:0 clamp(32px,5vw,72px);align-items:start}
  .root-text{grid-column:1}
  .root-trial{grid-column:2;padding-top:4px}
  .root-trial .note-start{margin-top:0}
}
@media (min-width:821px) and (max-width:1023.98px){
  .xcols{grid-template-columns:minmax(158px,184px) minmax(170px,198px) minmax(0,1fr);gap:0 30px}
  .xcol[data-col="1"] .xn .t{font-size:17px}
}

/* ---------- narrow: the vertical drill-down tree ----------
   The node you just picked sits on top, its children hang beneath it on marker wires. Above it, the path
   you took stays stacked (each step one tap back up); inside it, a chip row swaps to a sibling in one tap. */
.vt{display:none;position:relative;--vt-in:50px}
@media (max-width:820.98px){
  .xcols{display:none}
  .vt{display:block}
}
/* the path so far: compact rungs threaded on the same marker wire */
.vt-stack{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:14px;justify-items:start}
.vt-a{display:inline-flex;align-items:center;gap:8px;min-height:44px;max-width:100%;padding:8px 14px 8px 10px;font:700 15px/1.2 var(--f-body);color:var(--ink);text-align:left;cursor:pointer;
  background:rgba(255,255,255,.6);border:1.5px dashed var(--ink-3);border-radius:var(--hand-radius);transition:border-color .15s,background-color .15s}
.vt-a:hover{border-color:var(--ink);background:var(--paper)}
.vt-a svg{width:18px;height:18px;flex:none;color:var(--bc,var(--ink))}
.vt-a .rt{font:600 16px/1.2 var(--f-disp);letter-spacing:-.01em}
.vt-a .sw{display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--bc);flex:none}
.vt-p{position:relative;max-width:560px;background:var(--paper);border:2.4px solid var(--bc,var(--leaf));border-radius:var(--hand-radius);padding:13px 16px 14px;box-shadow:0 12px 18px -16px rgba(13,27,22,.5)}
.vt-p:focus{outline:none}
.vt-p:focus-visible{outline:3px solid var(--leaf);outline-offset:4px}
.vt-p .t{font:800 20px/1.2 var(--f-body);letter-spacing:-.012em;background-image:linear-gradient(transparent 58%,var(--hl) 58%,var(--hl) 94%,transparent 94%);padding:0 2px;margin-left:-2px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.vt-p .s{display:block;margin-top:4px;font-size:14px;line-height:1.35;color:var(--ink-2)}
.vt-p .sw{display:inline-block;width:11px;height:11px;border-radius:3px;background:var(--bc);margin-right:8px;vertical-align:1px}
.vt-root{border-color:var(--ink);border-style:dashed;padding:11px 16px 12px;box-shadow:none;background:rgba(255,255,255,.6)}
.vt-root .t{font:600 23px/1.15 var(--f-disp);letter-spacing:-.015em;background:none;padding:0;margin:0}
/* sideways: the siblings of the current node, the picked one marked */
.vt-sib{display:flex;flex-wrap:wrap;gap:6px 5px;margin:12px 0 0}
.vt-chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 9px;font:600 13px/1.15 var(--f-body);color:var(--ink);cursor:pointer;
  background:transparent;border:1.5px dashed #b6c1b3;border-radius:999px;transition:border-color .15s,background-color .15s}
.vt-chip:hover{border-color:var(--ink);background:rgba(13,27,22,.04)}
.vt-chip .sw{display:inline-block;width:9px;height:9px;border-radius:3px;background:var(--bc);margin:0}
.vt-chip[aria-pressed="true"]{border:2px solid var(--bc,var(--ink));background:var(--hl);font-weight:800;cursor:default}
.vt-chip:focus-visible{outline:3px solid var(--leaf);outline-offset:2px}
.vt-q{margin:22px 0 10px var(--vt-in);font:600 12px/1.2 var(--f-body);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2)}
.vt-kids{list-style:none;margin:0 0 0 var(--vt-in);padding:0;display:grid;gap:10px;max-width:510px}
.vt-kids li{position:relative}
.vt .xn{grid-template-columns:1fr 16px;min-height:54px;background:rgba(255,255,255,.5)}
.vt .xn:hover{background:var(--paper)}
.vt .xn .chev{width:16px;height:16px;transform:rotate(90deg)}
.vt-hint{display:flex;justify-content:flex-end;align-items:flex-start;gap:2px;margin:4px 6px 2px 0;font-size:20px;transform:rotate(-2deg)}
.vt-hint svg{width:30px;height:26px;flex:none;margin-top:-8px}
@media (min-width:640px){
  /* the hint sits beside Test prep, so the root's list leaves it room inside the page */
  .vt-kids:has(.vt-hint){max-width:min(510px,calc(100% - 280px))}
  .vt-hint{position:absolute;left:calc(100% + 14px);top:50%;margin:0;width:max-content;transform:translateY(-50%) rotate(-3deg);align-items:center;gap:6px}
  .vt-hint svg{transform:rotate(-62deg);margin-top:0}
}
.vt-mbb{margin-top:6px}
.vt-mbb .mk{margin:0 0 6px 4px;font-size:20px;transform:rotate(-1.5deg)}
.vt-ans{margin:24px 0 0 var(--vt-in);max-width:560px}
.vt-ans .tools-note{margin-top:22px}
.vt-ans .vt-dup{display:none}
.vt-ans .vt-dup + .d{margin-top:6px}
.vt-in{animation:vtIn .34s cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(var(--i,0) * 60ms + 150ms)}
@keyframes vtIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
/* the path bar: once the stacked path scrolls away, the same steps dock at the bottom of the screen,
   under the thumb, until the explorer itself leaves the screen */
@media (max-width:820.98px){
  .xp-crumbs{position:fixed;left:0;right:0;bottom:0;z-index:35;min-height:0;margin:0;padding:4px 16px calc(4px + env(safe-area-inset-bottom));
    background:var(--board);border-top:2px solid var(--ink);border-bottom:0;box-shadow:0 -10px 18px -14px rgba(13,27,22,.4);
    transform:translateY(110%);visibility:hidden;transition:transform .22s ease,visibility 0s linear .22s}
  .xp[data-bar="on"] .xp-crumbs{transform:none;visibility:visible;transition:transform .22s ease}
  .xp-crumbs .MuiLink-root{padding:12px 4px;font-size:15px}
  .xp-crumbs nav{width:100%}
}
@media (max-width:820px){
  .ans{padding:20px 16px 16px}
  .ans-price b{font-size:40px}
}
@media (max-width:480px){
  .vt{--vt-in:30px}
  .vt-p .t{font-size:19px}
  .vt-root .t{font-size:21px}
}
@media (max-width:420px){
  h1.root-q{font-size:36px}
  .top-in{gap:10px}
  .nav a{padding:8px 8px}
  .nav .btn{padding:8px 10px;font-size:14.5px}
}


/* ---------- section scaffolding ---------- */
section.board-sec{padding:72px 0}
.eyebrow{font:500 12px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);display:flex;align-items:center;gap:8px;margin:0 0 14px}
.eyebrow::before{content:"";width:22px;height:2.5px;border-radius:2px;background:var(--leaf)}
h2.sec-h{margin:0;font:800 clamp(30px,3.7vw,46px)/1.08 var(--f-disp);letter-spacing:-.015em;max-width:20ch;text-wrap:balance}
.sec-intro{font-size:18px;color:var(--ink-2);max-width:60ch;margin:16px 0 0}

/* ---------- pricing: hand-drawn table ----------
   six offers. >=1100: every column, grouped (firm bundles | across all three firms). 720-1099: one group of
   three at a time. <720: one offer at a time, picked from a 3 x 2 grid of offers. */
#pricing{scroll-margin-top:70px}
.price-head{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end}
.singles-note{font-size:16px;margin:18px 0 0;color:var(--ink)}
.singles-note b{font-family:var(--f-mono)}
#ptabs{margin:30px 0 14px}
#ptabs:empty{margin:22px 0 0}
.ptable-wrap{position:relative;overflow-x:auto;border:2.4px solid var(--ink);border-radius:var(--hand-radius);background:var(--paper)}
.ptable{width:100%;border-collapse:collapse;min-width:900px;font-size:15px}
#pwrap:not([data-show="all"]) .ptable{min-width:0}
.ptable th,.ptable td{padding:11px 12px;text-align:center;border-bottom:1.5px solid #dde3db;vertical-align:middle}
.ptable th:first-child,.ptable td:first-child{text-align:left;width:29%}
.ptable thead th{font:700 15px/1.2 var(--f-body);padding-top:16px;padding-bottom:14px;border-bottom:2.4px solid var(--ink);vertical-align:bottom}
.ptable thead th small{display:block;font:500 12px/1.3 var(--f-mono);color:var(--ink-2);margin-top:4px}
.ptable .row-grp th,.ptable .row-grp td{padding:14px 12px 0;border-bottom:0;font:600 12px/1.2 var(--f-body);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2)}
.ptable .row-grp th span{display:block;padding-bottom:7px;border-bottom:2px dashed var(--ink-3)}
.ptable .row-grp th + th span{border-bottom-color:var(--lime-deep)}
.fbar{display:flex;gap:3px;justify-content:center;margin:0 auto 9px;width:44px}
.fbar i{flex:1;height:5px;border-radius:3px;background:var(--fc,var(--ink))}
.ptable .grp th{font:600 12px/1 var(--f-body);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);background:var(--mist);padding:9px 12px;text-align:left}
.ptable .grp .sw{display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--bc);margin-right:8px;vertical-align:-1px}
.tool{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.tool .peek{font:600 15px/1.3 var(--f-body);text-decoration:none;border-bottom:1.5px dashed var(--ink-3)}
.tool .peek:hover{color:var(--leaf);border-bottom-color:var(--leaf)}
.tool .alone{font:500 12.5px var(--f-mono);color:var(--ink-2);text-decoration:none;white-space:nowrap}
.tool .alone:hover{color:var(--leaf);text-decoration:underline}
.ptable .sub{display:block;margin-top:3px;font:400 13px/1.35 var(--f-body);color:var(--ink-2)}
.tick{width:22px;height:18px;margin:0 auto;color:var(--leaf)}
.no{color:#c3cdc0;font-weight:700}
.free{font:600 12.5px/1.2 var(--f-body);color:var(--ink-2)}
.ptable tfoot td,.ptable tfoot th{border-bottom:0}
.ptable .row-price td{font:700 30px/1 var(--f-mono);padding-top:20px}
.ptable .row-price th{padding-top:20px}
.ptable .row-save td{font:600 14px/1.25 var(--f-mono);color:var(--leaf)}
.ptable .row-save td small{display:block;font-weight:500;color:var(--ink-2)}
.ptable .row-runs td{font-size:13px;line-height:1.35;color:var(--ink-2)}
.ptable .row-cta td{padding-bottom:20px;vertical-align:top}
.ptable .row-cta .btn{font-size:14.5px;padding:10px 8px;width:100%;max-width:190px;white-space:nowrap}
.ptable .row-cta small{display:block;margin-top:8px;font-size:12px;line-height:1.35;color:var(--ink-2)}
.ptable .row-cta small a{font-weight:600;color:var(--ink)}
.price-circle{position:relative;display:inline-block}
.price-circle svg{position:absolute;left:-18px;top:-14px;width:calc(100% + 36px);height:calc(100% + 28px);overflow:visible}
.price-circle path{fill:none;stroke:var(--marker);stroke-width:2.6;stroke-linecap:round;vector-effect:non-scaling-stroke}
/* the everything column carries the highlighter wash wherever it is on screen next to others */
#pwrap:not([data-mode="one"]) [data-col="mbbca"]{background:var(--hl)}
/* which columns show */
#pwrap[data-show="firms"] :is([data-col="mbb"],[data-col="ca"],[data-col="mbbca"]),
#pwrap[data-show="mbbx"] :is([data-col="mck"],[data-col="bcg"],[data-col="bain"]),
#pwrap[data-show="mck"] [data-col]:not([data-col="mck"]),
#pwrap[data-show="bcg"] [data-col]:not([data-col="bcg"]),
#pwrap[data-show="bain"] [data-col]:not([data-col="bain"]),
#pwrap[data-show="mbb"] [data-col]:not([data-col="mbb"]),
#pwrap[data-show="ca"] [data-col]:not([data-col="ca"]),
#pwrap[data-show="mbbca"] [data-col]:not([data-col="mbbca"]){display:none}
#pwrap:not([data-show="all"]) .row-grp{display:none}
#pwrap:not([data-show="all"]) .ptable th:first-child,#pwrap:not([data-show="all"]) .ptable td:first-child{width:40%}
.pcta-mobile{display:none;margin-top:16px}
#pwrap[data-mode="one"] .row-cta{display:none}
#pwrap[data-mode="one"][data-show="mck"] .pcta-mobile[data-for="mck"],#pwrap[data-mode="one"][data-show="bcg"] .pcta-mobile[data-for="bcg"],
#pwrap[data-mode="one"][data-show="bain"] .pcta-mobile[data-for="bain"],#pwrap[data-mode="one"][data-show="mbb"] .pcta-mobile[data-for="mbb"],
#pwrap[data-mode="one"][data-show="ca"] .pcta-mobile[data-for="ca"],#pwrap[data-mode="one"][data-show="mbbca"] .pcta-mobile[data-for="mbbca"]{display:block}
#pwrap[data-mode="one"] .ptable th,#pwrap[data-mode="one"] .ptable td{padding:10px 10px}
#pwrap[data-mode="one"] .ptable th:first-child,#pwrap[data-mode="one"] .ptable td:first-child{width:auto}
#pwrap[data-mode="one"] .ptable [data-col]{width:104px}
#pwrap[data-mode="one"] .ptable .row-price td{font-size:26px}
@media (max-width:720px){.price-head{grid-template-columns:1fr}}
.pcta-mobile .btn{width:100%}
.pcta-mobile .btn + .btn{margin-top:8px}
.pcta-mobile p{margin:8px 0 0;font-size:13px;color:var(--ink-2)}
/* the offer picker on phones: three firm bundles over the three that span the firms */
.offer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.assure{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14.5px}
.assure li{display:flex;align-items:center;gap:8px}
.assure svg{width:16px;height:14px;color:var(--leaf);flex:none}
.price-foot{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px 40px;margin-top:26px;font-size:15px;color:var(--ink-2)}
.price-foot p{margin:0}
.price-foot b{color:var(--ink)}
.price-foot a{color:var(--ink);font-weight:600}

/* ---------- reviews: taped printouts ---------- */
.rev-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px}
.rev-sum{font-size:18px;margin:16px 0 0}
.rev-sum b{font-family:var(--f-mono)}
#revFilter{min-height:46px}
.wall{columns:3 300px;column-gap:30px;margin-top:44px}
.printout{
  break-inside:avoid;display:inline-block;width:100%;position:relative;margin:0 0 34px;background:var(--paper);padding:26px 22px 18px;
  transform:rotate(var(--r,0deg));
  box-shadow:0 1px 0 rgba(13,27,22,.05),0 10px 18px -12px rgba(13,27,22,.28);
  border-radius:2px;
}
.printout::before{content:"";position:absolute;top:-11px;left:50%;width:92px;height:24px;margin-left:-46px;background:var(--tape);transform:rotate(var(--tr,-3deg));border-left:1px dashed rgba(255,255,255,.6);border-right:1px dashed rgba(255,255,255,.6)}
.printout[hidden]{display:none}
.printout blockquote{margin:0;font-size:16px;line-height:1.5}
.printout figcaption{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:12px;border-top:1.5px dashed var(--rule)}
.av{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;font:700 12px var(--f-mono);flex:none}
.who{font-size:14px;line-height:1.3}
.who b{display:block}
.who span{color:var(--ink-2);font-size:12.5px}
.p-stars{color:var(--gold-ink);font-size:13px;letter-spacing:2px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}
.p-stars em{font:500 11.5px var(--f-mono);font-style:normal;letter-spacing:.04em;color:var(--ink-2);text-transform:uppercase;display:inline-flex;align-items:center;gap:6px}
.p-stars em::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--fc,var(--ink-3))}
[data-firm="mck"] .p-stars em{--fc:var(--mck)} [data-firm="bcg"] .p-stars em{--fc:var(--bcg)} [data-firm="bain"] .p-stars em{--fc:var(--bain)}
.p-used{font-size:12.5px;color:var(--ink-2);margin:10px 0 0}
.p-used b{color:var(--ink)}
.byproduct{margin-top:6px;max-width:760px}
.byproduct summary{cursor:pointer;font-weight:700;display:inline-flex;gap:8px;align-items:center;padding:6px 0}
.byproduct ul{list-style:none;margin:10px 0 0;padding:0;columns:2 240px;column-gap:40px;font-size:14.5px}
.byproduct li{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px dashed var(--rule);break-inside:avoid}
.byproduct li span:last-child{font-family:var(--f-mono);font-size:13px}
.rev-foot{font-size:13px;color:var(--ink-2);margin-top:8px}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:40px 64px;align-items:start}
@media (max-width:900px){.faq-grid{grid-template-columns:1fr}}
#faqList details{border-bottom:2px solid var(--ink);padding:16px 0}
#faqList details:first-child{border-top:2px solid var(--ink)}
#faqList summary{font-weight:700;font-size:18px;cursor:pointer}
.faq-a{font-size:16px;line-height:1.6;color:var(--ink-2)}
.faq-a a{color:var(--ink);font-weight:600}
.faq-a p{margin:0}

/* ---------- closing ---------- */
.closing{padding:40px 0 96px}
.answer-box{position:relative;border:2.6px solid var(--leaf);border-radius:var(--hand-radius);padding:clamp(28px,5vw,56px);display:grid;grid-template-columns:1.3fr 1fr;gap:28px 56px;align-items:center;background:var(--board)}
.answer-box h2{margin:0;font:800 clamp(30px,3.9vw,48px)/1.06 var(--f-disp);letter-spacing:-.015em;text-wrap:balance}
.answer-box p{margin:12px 0 0;font-size:18px;color:var(--ink-2);max-width:42ch}
.answer-cta{display:flex;flex-direction:column;gap:12px;align-items:stretch;max-width:340px}
.answer-cta .proofline{font-size:14px;color:var(--ink-2);margin:4px 0 0}
.answer-cta .proofline a{color:var(--ink);font-weight:600}
@media (max-width:820px){.answer-box{grid-template-columns:1fr}.answer-cta{max-width:none}}

/* ---------- footer ---------- */
footer{border-top:2px solid var(--ink);padding:48px 0 40px;font-size:14.5px}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(5,1fr);gap:28px}
.foot-grid h3{font:500 12px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin:0 0 12px}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.foot-grid a{text-decoration:none}
.foot-grid a:hover{text-decoration:underline}
.foot-brand p{color:var(--ink-2);margin:12px 0 0;max-width:34ch}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;margin-top:40px;padding-top:20px;border-top:1.5px dashed var(--rule);color:var(--ink-2);font-size:13.5px}
.foot-bottom nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.foot-bottom nav a{color:var(--ink);font-weight:600}
@media (max-width:1000px){.foot-grid{grid-template-columns:repeat(3,1fr)}.foot-brand{grid-column:1/-1}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr 1fr}}

/* ---------- product drawer (MUI paper content) ---------- */
.pd{display:flex;flex-direction:column;height:100%;min-height:0}
.pd-scroll{flex:1;overflow-y:auto;padding:22px 26px 28px}
.pd-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.pd-crumbs{font:500 11.5px/1.5 var(--f-mono);color:var(--ink-2);letter-spacing:.02em;margin:6px 0 0}
.pd-crumbs span+span::before{content:" \203A  ";color:var(--leaf)}
.pd-sw{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px;vertical-align:0}
.pd h2{margin:10px 0 0;font:800 28px/1.1 var(--f-disp);letter-spacing:-.015em;text-wrap:balance}
.pd-rating{font:500 13px var(--f-mono);margin:8px 0 0;color:var(--ink-2)}
.pd-rating b{color:var(--ink)}
.pd-blurb{margin:14px 0 0;font-size:16px;line-height:1.55}
.pd-points{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:6px;font-size:15px}
.pd-points li{display:flex;gap:10px;align-items:flex-start}
.pd-points svg{width:16px;height:14px;color:var(--leaf);margin-top:4px;flex:none}
.pd-ex{margin:22px 0 0}
.pd-ex figcaption{font:500 11.5px/1.4 var(--f-mono);color:var(--ink-2);margin:0 0 8px;display:flex;justify-content:space-between;gap:10px}
.pd-sec-h{font:500 11.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin:28px 0 12px}
.pd-review{margin:0 0 12px;background:var(--paper);border:1.5px solid var(--ink);border-radius:8px;padding:14px 16px}
.pd-review blockquote{margin:0;font-size:14.5px;line-height:1.5}
.pd-review .p-stars{margin-bottom:6px}
.pd-review figcaption{display:flex;align-items:center;gap:10px;margin-top:10px}
.pd-review .av{width:28px;height:28px;font-size:10.5px}
.pd-links{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:18px;font-size:14.5px}
.pd-links a{font-weight:600}
.pd-foot{border-top:2px solid var(--ink);padding:16px 26px 18px;background:var(--paper);display:grid;gap:10px}
.pd-foot .row{display:flex;gap:10px;flex-wrap:wrap}
.pd-foot .row > *{flex:1 1 180px}
.pd-foot .fine{font-size:12.5px;color:var(--ink-2);margin:0}
.pd-foot .fine a{color:var(--ink);font-weight:600}
.pd-multi{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pd-info{margin:22px 0 0;padding:16px 18px;border:2px dashed var(--ink-3);border-radius:10px;font-size:15px}
.pd-info p{margin:0}
.pd-info p+p{margin-top:8px}

/* ---------- mini product examples ---------- */
.mx{background:#fff;border:1.5px solid var(--ink);border-radius:10px;font:13px/1.4 var(--f-body);color:var(--ink);overflow:hidden}
.mx-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 12px;border-bottom:1.5px solid var(--ink);font:500 11.5px/1.3 var(--f-mono);background:var(--mist)}
.mx-bar .tm{display:inline-flex;align-items:center;gap:6px;font-weight:700}
.mx-bar svg{width:11px;height:12px}
.mx-body{padding:12px}
.mx-note{margin:0 0 4px;font-size:12px;color:var(--ink-2)}
.mx-h{margin:10px 0 2px;font-weight:700;font-size:13.5px}
.mx-pick{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 10px;padding:9px 10px;border:1px solid var(--rule);border-radius:8px;margin-top:8px}
.mx-pick.best{border-color:var(--leaf);background:rgba(47,107,79,.07)}
.mx-pick > b{font-style:italic;font-weight:700}
.mx-bars{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mx-b{font:500 10.5px/1.2 var(--f-mono);color:var(--ink-2)}
.mx-b i{display:block;height:6px;background:var(--grid);border-radius:3px;margin-top:4px;position:relative;overflow:hidden}
.mx-b i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(var(--v) * 10%);background:var(--ink);border-radius:3px}
.mx-tag{font:600 10.5px/1 var(--f-mono);padding:4px 6px;border-radius:4px;border:1px solid currentColor;font-style:normal;white-space:nowrap;display:inline-block}
.mx-tag.good{color:var(--leaf)} .mx-tag.bad{color:var(--danger-text)} .mx-tag.neu{color:var(--ink-2)}
.mx-site{display:grid;gap:6px;padding:10px;border:1px dashed var(--ink-3);border-radius:8px;font-size:12px}
.mx-site b{font-size:13.5px}
.mx-site .tags{display:flex;gap:6px;flex-wrap:wrap}
.mx-tbl{width:100%;border-collapse:collapse;margin-top:8px;font-size:12px}
.mx-tbl th{font:500 10.5px var(--f-mono);color:var(--ink-2);text-align:left;padding:4px 6px;border-bottom:1.5px solid var(--ink)}
.mx-tbl td{padding:5px 6px;border-bottom:1px solid #dde3db}
.mx-tbl td:nth-child(3){font-family:var(--f-mono);font-size:11.5px}
.mx-tbl tr.on td{background:rgba(47,107,79,.08);font-weight:600}
.mx-cb{display:inline-block;width:13px;height:13px;border:1.5px solid var(--ink);border-radius:3px;vertical-align:middle}
.mx-cb.on{background:var(--leaf);border-color:var(--leaf);box-shadow:inset 0 0 0 2px #fff}
.mx-split{display:grid;grid-template-columns:118px 1fr}
.mx-nav{list-style:none;margin:0;padding:10px 8px;border-right:1.5px solid var(--ink);background:#f6f3ea;font-size:11.5px;line-height:1.35}
.mx-nav li{padding:3px 4px;border-radius:4px}
.mx-nav .grp{font:700 10px var(--f-mono);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2);margin-top:6px}
.mx-nav .grp:first-child{margin-top:0}
.mx-nav ul{list-style:none;margin:2px 0 0 8px;padding:0}
.mx-nav .on{font-weight:700}
.mx-nav li.cur{background:var(--leaf);color:#fff;font-weight:600}
.mx-main{padding:12px}
.mx-main > p{margin:0 0 10px;font-size:12.5px}
.mx-charts{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px}
.mx-charts span{display:grid;justify-items:center;gap:4px;padding:8px 4px;border:1.5px solid var(--rule);border-radius:7px;font-size:11px}
.mx-charts span.on{border-color:var(--leaf);background:rgba(47,107,79,.08);font-weight:700}
.mx-charts svg{width:34px;height:22px}
.mx-journal{border:1px solid var(--rule);border-radius:7px}
.mx-jh{margin:0;padding:6px 8px;font:700 11px var(--f-mono);border-bottom:1px solid var(--rule);background:#f6f3ea}
.mx-journal ul{list-style:none;margin:0;padding:4px 0}
.mx-journal li{display:flex;justify-content:space-between;gap:8px;padding:3px 8px;font-size:11.5px}
.mx-journal li b{font-family:var(--f-mono);font-weight:600}
.mx-journal li.hl{background:var(--hl)}
.mx-q{margin:10px 0 6px;font-weight:700;font-size:12.5px}
.mx-rank{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.mx-rank li{display:grid;grid-template-columns:24px 1fr;gap:8px;align-items:center;padding:7px 9px;border:1.5px solid var(--rule);border-radius:7px;font-size:12px}
.mx-rank li span{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;font:700 11px var(--f-mono)}
.mx-rank li.on{border-color:var(--leaf);background:rgba(47,107,79,.08)}
.mx-rank li.on span{background:var(--leaf);border-color:var(--leaf);color:#fff}
.mx-chat{display:grid;gap:8px}
.mx-msg{max-width:88%;padding:8px 10px;border-radius:10px;font-size:12.5px;line-height:1.4}
.mx-msg.them{background:var(--mist);border:1px solid var(--rule);border-bottom-left-radius:3px}
.mx-msg.me{background:var(--ink);color:var(--board);justify-self:end;border-bottom-right-radius:3px}
.mx-msg .who{display:block;font:600 10px var(--f-mono);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2);margin-bottom:2px}
.mx-msg.me .who{color:#c3cdc0}
.mx-exh{display:inline-block;margin-top:6px;font:600 10.5px var(--f-mono);padding:4px 7px;border:1px dashed var(--ink-2);border-radius:5px;background:#fff}
.mx-typing{display:inline-flex;gap:4px;padding:10px 12px;background:var(--mist);border:1px solid var(--rule);border-radius:10px;width:max-content}
.mx-typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-3);animation:blink 1.2s infinite}
.mx-typing i:nth-child(2){animation-delay:.2s}.mx-typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.3}40%{opacity:1}}
.mx-chart{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;align-items:end;height:92px;padding:8px 6px 0;border-bottom:1.5px solid var(--ink);margin-top:4px}
.mx-chart div{display:grid;justify-items:center;gap:3px;font:600 10.5px var(--f-mono)}
.mx-chart i{display:block;width:70%;background:var(--ink-3);border-radius:3px 3px 0 0}
.mx-chart div.sel i{background:var(--leaf)}
.mx-chart-l{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:4px 6px 0;font-size:10.5px;text-align:center;color:var(--ink-2)}
.mx-cap{font:500 10.5px var(--f-mono);color:var(--ink-2);margin:0 0 4px}
.mx-opts{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:5px}
.mx-opts li{display:grid;grid-template-columns:22px 1fr;gap:8px;align-items:center;padding:6px 8px;border:1.5px solid var(--rule);border-radius:7px;font-size:12px}
.mx-opts li > span:first-child{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;font:700 10px var(--f-mono)}
.mx-opts li.on{border-color:var(--leaf);background:rgba(47,107,79,.08)}
.mx-opts li.on > span:first-child{background:var(--leaf);border-color:var(--leaf);color:#fff}
.mx-opts small{display:block;color:var(--ink-2);font-size:11px}
.mx-cam{position:relative;height:150px;background:var(--moss);display:grid;place-items:end center;overflow:hidden}
.mx-cam svg{width:150px;height:130px}
.mx-rec{position:absolute;left:10px;top:9px;font:700 11px var(--f-mono);color:#fff;display:flex;align-items:center;gap:6px}
.mx-rec i{width:8px;height:8px;border-radius:50%;background:var(--danger)}
.mx-camlabel{position:absolute;right:10px;top:9px;font:500 10px var(--f-mono);color:#c3cdc0}
.mx-prompt{margin:0;font-size:12.5px}
.mx-prompt b{display:block;font-size:13.5px;margin-bottom:3px}
.mx-trans{margin:10px 0 0;padding:8px 10px;border:1px dashed var(--ink-3);border-radius:6px;font:500 11px var(--f-mono);color:var(--ink-2)}
.mx-grid{display:grid;grid-template-columns:1fr repeat(3,44px);gap:0;font-size:12px;margin-top:6px}
.mx-grid > *{padding:7px 4px;border-bottom:1px solid #dde3db;display:flex;align-items:center}
.mx-grid .h{font:600 10px/1.15 var(--f-mono);color:var(--ink-2);justify-content:center;text-align:center;border-bottom:1.5px solid var(--ink)}
.mx-grid .h:first-child{justify-content:flex-start}
.mx-grid .c{justify-content:center}
.mx-rad{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--ink)}
.mx-rad.on{background:var(--leaf);border-color:var(--leaf);box-shadow:inset 0 0 0 2.5px #fff}

/* ---------- connections, not design ---------- */
/* the tree in plain HTML for readers without script (#3009); home-path.js arranges the same content into the design's columns */
html:not(.js) .xp-crumbs,html:not(.js) .xcols,html:not(.js) .vt{display:none}
html.js .xp-src{display:none}
.xp-src{margin-top:32px;display:grid;gap:36px}
.xs-h{font:600 28px/1.15 var(--f-disp);margin:0 0 14px}
.xs-leaves{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));align-items:start}
/* the expired-trial banner the page's script adds: in normal flow, so it never covers the bar */
.trial-banner{background:#c14b3a;color:#fff;padding:14px 24px;text-align:center;font-size:15px;font-weight:600}
.trial-banner a{color:#fff;text-decoration:underline;font-weight:700}
.trial-banner-close{background:rgba(13,27,22,.28);color:#fff;border:0;width:26px;height:26px;border-radius:50%;font-size:14px;font-weight:700;line-height:1;margin-left:12px;cursor:pointer;vertical-align:middle}
.trial-banner-close:hover{background:rgba(13,27,22,.45)}