/* ==========================================================================
   Tool Explainer — the in-app "learn this tool" section shown below a tool.
   Reference implementation: Keyword Overview. Follows docs/TOOL-EXPLAINER-GUIDE.md.

   All classes are namespaced .mvte-* and scoped under .mvte so nothing collides
   with the dashboard. Colors, radius, shadow, and type come only from
   css/tokens.css tokens (light/dark is handled there automatically).
   ========================================================================== */

/* margin-top is a deliberate gap, not spacing: the block below it is a
   different kind of thing from the result panels above, and a 24px margin read
   as "next section of your results". The firmer border does the same job at
   the edge, against result cards that are raised (--card + shadow) where this
   is flat. */
.mvte{position:relative;margin-top:var(--space-10);color:var(--text);font-family:var(--font);line-height:1.55;
  background:var(--bg);border:1px solid var(--border-strong);border-radius:var(--radius-lg);overflow:hidden}
/* overflow:clip clips exactly like hidden but does NOT create a scroll
   container, which is what lets .mvte-doc-head stay sticky inside the block.
   The hidden above stays as the fallback for browsers without clip. */
@supports (overflow:clip){.mvte{overflow:clip}}
.mvte *{box-sizing:border-box}
.mvte h1,.mvte h2,.mvte h3{font-family:var(--font-heading);letter-spacing:-.02em;line-height:1.1;margin:0;text-wrap:balance}
.mvte p{margin:0}
.mvte svg{display:block}
.mvte-wrap{max-width:100%;margin:0 auto;padding:0 48px}
.mvte-ey{font:600 12px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--purple-bright)}
.mvte-grad{background:linear-gradient(115deg,var(--purple),var(--magenta),var(--purple));background-size:220% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:mvte-sheen 6s linear infinite}
@keyframes mvte-sheen{to{background-position:220% center}}

/* ==========================================================================
   DOCUMENTATION BOUNDARY
   The explainer sits in the same column as the tool's results, directly below
   them, and opens with a demo panel that mimics real output. Customers read
   straight past the seam and cannot tell whether they are still looking at
   their own results or at the guide.

   This header is the handoff: it names the surface, names the tool, and offers
   the way back. It is sticky so the answer to "where am I" stays on screen for
   the whole guide, not just at the seam. js/tool-explainer.js injects it, so
   all 79 explainers get an identical one from a single place.
   ========================================================================== */
/* top offset: the dashboard's .topbars is sticky at the same scrollport top
   with z-index 30 and an opaque background, so pinning at 0 put this bar
   UNDERNEATH it — pinned correctly, invisible and unclickable. The variable
   is measured from the real topbar height by tool-explainer.js (it grows when
   the topbar wraps under 900px); pages without a topbar fall back to 0. */
.mvte-doc-head{position:sticky;top:var(--mv-topbars-h, 0px);z-index:6;display:flex;align-items:center;gap:10px;
  padding:13px 48px;background:var(--panel);border-bottom:1px solid var(--border-strong)}
.mvte-doc-kind{flex:none;display:inline-flex;align-items:center;gap:7px;
  font:700 11px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--purple-bright)}
.mvte-doc-kind svg{width:14px;height:14px}
.mvte-doc-sep{flex:none;color:var(--border-strong)}
.mvte-doc-name{min-width:0;font:600 11px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mvte-doc-actions{margin-left:auto;flex:none;display:flex;align-items:center;gap:8px}
.mvte-doc-back,.mvte-doc-toggle{flex:none;display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font-family:var(--font);font-weight:600;font-size:12.5px;color:var(--text-2);background:var(--bg-2);
  border:1px solid var(--border-strong);border-radius:var(--radius-pill);padding:8px 14px;
  transition:color .15s,background .15s,border-color .15s}
.mvte-doc-back:hover{color:var(--text);border-color:var(--purple)}
.mvte-doc-back svg,.mvte-doc-toggle svg{width:13px;height:13px}
/* The toggle is the one control on this bar people actually need to find, so
   it carries the brand colour and Back stays quiet beside it. */
.mvte-doc-toggle{color:var(--on-brand);background:var(--gradient);border-color:transparent}
.mvte-doc-toggle:hover{color:var(--on-brand);filter:brightness(1.08)}
.mvte-doc-toggle svg{transition:transform .2s}
.mvte.is-collapsed .mvte-doc-toggle svg{transform:rotate(-90deg)}

/* Collapsed: the header stays as the marker and the guide folds behind it.
   A tool's results are long on their own, and a full guide unrolling beneath
   them is most of what made the two read as one continuous scroll. Collapsing
   only happens once the tool HAS a finished result — an unused tool still
   shows its guide in full, which is when someone actually wants to read it. */
.mvte.is-collapsed>*:not(.mvte-doc-head):not(.mvte-body){display:none}
.mvte.is-collapsed{margin-top:var(--space-6)}

/* Sitting ABOVE the tool, the bar needs the gap on the other side too: without
   it the bar butts straight into the tool panel and the two read as one block.
   Mirrors the top margin in each state so the bar sits in its own band. Scoped
   to .view because a public page's guide is the last thing on the page and has
   nothing underneath to be separated from. */
.view>.mvte{margin-bottom:var(--space-10)}
.view>.mvte.is-collapsed{margin-bottom:var(--space-6)}
.mvte.is-collapsed .mvte-doc-head{border-bottom-color:transparent}

/* The fold animates: the body collapses through a grid-row + opacity
   transition rather than snapping between display states. The inner wrapper
   owns overflow so arbitrary guide content clips cleanly while the row
   interpolates. */
.mvte-body{display:grid;grid-template-rows:1fr;opacity:1;
  transition:grid-template-rows .38s cubic-bezier(.4,0,.2,1),opacity .26s ease}
.mvte-body-inner{overflow:hidden;min-width:0}
.mvte.is-collapsed .mvte-body{grid-template-rows:0fr;opacity:0}
.mvte-doc-head{transition:border-color .28s ease}
@media (prefers-reduced-motion:reduce){.mvte-body,.mvte-doc-head{transition:none}}

/* HERO */
.mvte-hero{position:relative;padding:80px 0 60px;overflow:hidden;isolation:isolate}
.mvte-amb{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.mvte-orb{position:absolute;border-radius:var(--radius-pill);filter:blur(46px);opacity:.5}
.mvte-orb.a{width:500px;height:500px;top:-180px;right:-80px;background:radial-gradient(circle,var(--purple),transparent 62%);animation:mvte-f1 16s ease-in-out infinite}
.mvte-orb.b{width:400px;height:400px;top:60px;left:-140px;background:radial-gradient(circle,var(--magenta),transparent 62%);opacity:.3;animation:mvte-f2 20s ease-in-out infinite}
.mvte-grid{position:absolute;inset:0;background-image:linear-gradient(var(--hairline) 1px,transparent 1px),linear-gradient(90deg,var(--hairline) 1px,transparent 1px);
  background-size:44px 44px;-webkit-mask-image:radial-gradient(circle at 72% 18%,black,transparent 70%);mask-image:radial-gradient(circle at 72% 18%,black,transparent 70%);opacity:.5}
@keyframes mvte-f1{0%,100%{transform:translate(0,0)}50%{transform:translate(-28px,24px)}}
@keyframes mvte-f2{0%,100%{transform:translate(0,0)}50%{transform:translate(32px,-20px)}}
.mvte-hero .mvte-wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.mvte-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;border:1px solid var(--border);
  border-radius:var(--radius-pill);background:var(--card);font-size:12px;font-weight:700;color:var(--text-2);letter-spacing:.02em}
.mvte-chip .ic{width:22px;height:22px;border-radius:var(--radius-xs);background:var(--gradient);display:grid;place-items:center;color:var(--on-brand)}
.mvte-hero h1,.mvte-hero h2{font-size:clamp(32px,4.4vw,48px);font-weight:800;margin:20px 0 0}
.mvte-sub{margin-top:18px;font-size:17px;color:var(--text-2);max-width:34ch}
.mvte-ctas{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:26px}
.mvte-btn{position:relative;display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;font-family:var(--font);
  font-weight:700;font-size:15px;padding:13px 22px;border-radius:var(--radius);color:var(--on-brand);background:var(--gradient);
  transition:transform .15s,box-shadow .15s;overflow:hidden}
.mvte-btn::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,color-mix(in srgb,var(--on-brand) 45%,transparent),transparent);transform:skewX(-18deg)}
.mvte-btn:hover::after{animation:mvte-shine .8s ease}
@keyframes mvte-shine{to{left:140%}}
.mvte-btn:hover{transform:translateY(-1px);}
.mvte-btn.ghost{background:transparent;color:var(--text);border:1px solid var(--border-strong);box-shadow:none}
.mvte-btn.ghost::after{display:none}
.mvte-btn.ghost:hover{background:var(--bg-2)}
.mvte-trust{margin-top:20px;display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}
.mvte-trust svg{width:15px;height:15px;color:var(--green)}

/* live demo panel */
.mvte-demo{position:relative;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);overflow:hidden}
.mvte-demo-top{display:flex;align-items:center;gap:7px;padding:11px 15px;border-bottom:1px solid var(--hairline);background:var(--bg-2)}
.mvte-demo-top i{width:10px;height:10px;border-radius:var(--radius-pill);background:var(--border-strong)}
.mvte-demo-top i:nth-child(1){background:var(--red);opacity:.7}.mvte-demo-top i:nth-child(2){background:var(--amber);opacity:.7}.mvte-demo-top i:nth-child(3){background:var(--green);opacity:.7}
.mvte-demo-top span{margin-left:8px;font:600 11.5px/1 var(--font-mono);color:var(--muted);letter-spacing:.03em}
/* The demo types a query and counts up KPI tiles, so a customer who has just
   run the tool reads it as their own output. This says otherwise, in the panel
   itself rather than somewhere they have to go looking. */
.mvte-demo-top .mvte-demo-badge{margin-left:auto;flex:none;font:700 10px/1 var(--font);
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);background:var(--panel);
  border:1px solid var(--border-strong);border-radius:var(--radius-pill);padding:5px 9px}
.mvte-demo-body{padding:20px;position:relative}
.mvte-scan{position:absolute;left:0;right:0;top:0;height:120px;pointer-events:none;opacity:0;background:linear-gradient(180deg,color-mix(in srgb,var(--purple) 16%,transparent),transparent)}
.mvte-search{display:flex;align-items:center;gap:10px;border:1px solid var(--border-strong);border-radius:var(--radius);padding:12px 14px;background:var(--bg);position:relative}
.mvte-search svg{width:18px;height:18px;color:var(--muted);flex-shrink:0}
.mvte-search .q{font:600 15px/1.2 var(--font);color:var(--text)}
.mvte-search .caret{width:2px;height:18px;background:var(--purple);animation:mvte-blink 1s steps(1) infinite}
.mvte-search .go{margin-left:auto;font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--purple-bright);border:1px solid var(--border);border-radius:var(--radius-pill);padding:4px 10px}
@keyframes mvte-blink{50%{opacity:0}}
.mvte-kpis{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.mvte-kpi{border:1px solid var(--hairline);border-radius:var(--radius);padding:13px 14px;background:var(--panel);position:relative;opacity:0;transform:translateY(10px) scale(.97)}
.mvte-kpi.in{animation:mvte-pop .5s cubic-bezier(.22,1.4,.4,1) forwards}
@keyframes mvte-pop{to{opacity:1;transform:none}}
.mvte-kpi .lab{font:700 10.5px/1 var(--font);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.mvte-kpi .val{font-family:var(--font-heading);font-weight:800;font-size:27px;margin-top:7px;letter-spacing:-.02em}
.mvte-kpi .val.sm{font-size:20px}
.mvte-kpi .foot{font-size:11.5px;color:var(--text-3);margin-top:2px}
.mvte-kpi .pill{position:absolute;top:12px;right:12px;font-size:10px;font-weight:800;padding:3px 8px;border-radius:var(--radius-pill)}
.mvte-t-good{color:var(--green);background:color-mix(in srgb,var(--green) 15%,transparent)}
.mvte-t-watch{color:var(--amber);background:color-mix(in srgb,var(--amber) 16%,transparent)}
.mvte-t-info{color:var(--cyan);background:color-mix(in srgb,var(--cyan) 15%,transparent)}
/* Keyword Magic hero: one seed bursting into a keyword cloud (its own hero, not KPI tiles) */
.mvte-burst{margin-top:16px}
.mvte-burst-count{display:flex;align-items:baseline;gap:9px;margin-bottom:13px}
.mvte-burst-count b{font-family:var(--font-heading);font-weight:800;font-size:34px;line-height:1;letter-spacing:-.02em;background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.mvte-burst-count span{font-size:12.5px;color:var(--muted)}
.mvte-burst-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.mvte-burst-chips span{font-size:11.5px;font-weight:600;padding:5px 10px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--purple) 9%,transparent);color:var(--purple-bright)}
.mvte-burst-stats{display:flex;gap:18px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--hairline)}
.mvte-burst-stats span{font-size:11.5px;color:var(--text-3);font-weight:600}
.mvte-burst-stats b{font-family:var(--font-heading);font-weight:800;font-size:16px;color:var(--text);margin-right:5px}

/* section rhythm */
.mvte-sec{padding:72px 0}
.mvte-lead{max-width:56ch}
.mvte-lead h2{font-size:clamp(25px,3.2vw,34px);font-weight:800;margin-top:14px}
.mvte-lead p{margin-top:14px;font-size:16px;color:var(--text-2)}
/* Now the section is fluid, single-column sections (how it works, glossary,
   the rest, use cases, FAQ, worked example) read better centered. Two-column
   sections keep their .mvte-grid2 lead left-aligned. */
.mvte-wrap:not(.mvte-grid2)>.mvte-lead{margin-inline:auto;text-align:center}
.mvte-faq,.mvte-story{margin-inline:auto}
.mvte-band{background:var(--bg-2);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}

/* problem */
.mvte-band .mvte-grid2{display:grid;grid-template-columns:1.1fr 1fr;gap:44px;align-items:center}
.mvte-fails{display:grid;gap:12px}
.mvte-fail{display:flex;gap:13px;align-items:flex-start;padding:15px 16px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);transition:transform .18s,border-color .18s}
.mvte-fail:hover{transform:translateX(4px);border-color:color-mix(in srgb,var(--red) 40%,var(--border))}
.mvte-fail .x{flex-shrink:0;width:30px;height:30px;border-radius:var(--radius-sm);display:grid;place-items:center;color:var(--red);background:color-mix(in srgb,var(--red) 13%,transparent)}
.mvte-fail b{display:block;font-size:14.5px;margin-bottom:2px}
.mvte-fail span{font-size:13.5px;color:var(--text-3)}

/* steps */
.mvte-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px;counter-reset:s}
.mvte-step{position:relative;padding:24px 20px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--card);transition:transform .2s,box-shadow .2s}
.mvte-step:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.mvte-step::before{counter-increment:s;content:counter(s);position:absolute;top:-16px;left:20px;width:36px;height:36px;
  border-radius:var(--radius-sm);background:var(--gradient);color:var(--on-brand);font-family:var(--font-heading);font-weight:800;font-size:17px;display:grid;place-items:center;box-shadow:0 8px 18px -10px var(--purple)}
.mvte-step h3{font-size:17px;font-weight:800;margin:18px 0 8px}
.mvte-step p{font-size:14px;color:var(--text-3)}
.mvte-step .conn{position:absolute;top:50%;right:-24px;transform:translateY(-50%);width:28px;height:2px;z-index:2;
  background:linear-gradient(90deg,transparent,var(--purple),transparent);background-size:200% 100%;animation:mvte-flow 1.8s linear infinite}
.mvte-step .conn::after{content:"";position:absolute;right:-4px;top:50%;transform:translateY(-50%);width:0;height:0;
  border-left:7px solid var(--purple);border-top:4px solid transparent;border-bottom:4px solid transparent}
.mvte-steps .mvte-step:last-child .conn{display:none}
@keyframes mvte-flow{to{background-position:-200% 0}}

/* glossary */
.mvte-gloss{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:34px}
.mvte-gterm{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--card);transition:transform .18s,border-color .18s}
.mvte-gterm:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--purple) 40%,var(--border))}
.mvte-gterm .gi{flex-shrink:0;width:38px;height:38px;border-radius:var(--radius-sm);display:grid;place-items:center;color:var(--purple-bright);background:color-mix(in srgb,var(--purple) 12%,transparent)}
.mvte-gterm h4{font-family:var(--font-heading);font-size:16px;font-weight:800;margin:0 0 5px}
.mvte-gterm p{font-size:13.5px;color:var(--text-2)}
.mvte-gterm .eg{display:inline-block;margin-top:9px;font-size:11.5px;color:var(--text-3);background:var(--bg-2);border-radius:var(--radius-pill);padding:3px 10px;font-weight:600}

/* big feature rows */
.mvte-feat{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;padding:46px 0}
.mvte-feat.alt .mvte-ft{order:2}
.mvte-tag{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;color:var(--purple-bright);letter-spacing:.04em;text-transform:uppercase}
.mvte-feat h3{font-size:clamp(21px,2.5vw,28px);font-weight:800;margin:12px 0 0}
.mvte-feat .fp{margin-top:13px;font-size:15px;color:var(--text-2)}
.mvte-checks{margin-top:18px;display:grid;gap:9px;padding:0;list-style:none}
.mvte-checks li{list-style:none;display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--text-2)}
.mvte-checks svg{width:18px;height:18px;color:var(--green);flex-shrink:0;margin-top:1px}
.mvte-fx{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:24px;box-shadow:var(--shadow-lg)}
.mvte-tip{display:flex;gap:11px;align-items:flex-start;margin-top:18px;padding:13px 15px;border-radius:var(--radius);background:color-mix(in srgb,var(--purple) 7%,transparent);border:1px solid color-mix(in srgb,var(--purple) 20%,transparent)}
.mvte-tip svg{width:18px;height:18px;color:var(--purple-bright);flex-shrink:0;margin-top:1px}
.mvte-tip p{font-size:13.5px;color:var(--text-2)}
.mvte-tip b{color:var(--text)}

/* viz: trend */
.mvte-vhead{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px}
.mvte-vbig{font-family:var(--font-heading);font-weight:800;font-size:33px;letter-spacing:-.02em}
.mvte-vsub{font-size:12px;color:var(--muted)}
.mvte-spark{width:100%;height:120px}
.mvte-spark path.line{fill:none;stroke:url(#mvte-grad-line);stroke-width:2.6;stroke-linecap:round}
.mvte-spark path.area{opacity:0;transition:opacity 1s ease .3s}
.mvte-feat.in .mvte-spark path.area{opacity:1}
.mvte-spark .dot{fill:var(--purple);opacity:0}
.mvte-spark .end{fill:var(--magenta)}
.mvte-months{display:flex;justify-content:space-between;font:600 10px/1 var(--font-mono);color:var(--muted);margin-top:6px}

/* viz: gauge + donut */
.mvte-duo{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.mvte-cell{border:1px solid var(--hairline);border-radius:var(--radius);padding:16px;background:var(--panel);text-align:center}
.mvte-cell .clab{font:700 10.5px/1 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.mvte-gauge{width:132px;height:132px;margin:0 auto}
.mvte-gauge .track{fill:none;stroke:var(--hairline);stroke-width:11}
/* The gauge picks its own gradient. These used to be 47 separate <defs> blocks
   all defining one id, mvteGg, with three different colour sets. A document-wide
   id resolves to the FIRST definition, so all 47 painted with whichever happened
   to come first in the file - the green-first set - including the 37 authored
   red-first. One definition each now, in .mvte-grads, chosen by class. */
/* Named for what they RENDER, not for the order the stops are written in. The
   arc carries rotate(135 60 60) and the gradient rotates with it, so a ramp
   authored red->amber->green paints GREEN at the low end. Every one of these was
   authored the readable way and therefore painted backwards; the collision hid
   it, because all 48 resolved to one definition that happened to be right for
   the score gauges. */
.mvte-gauge .fill{fill:none;stroke:url(#mvte-grad-score);stroke-width:11;stroke-linecap:round}
.mvte-gauge.g-difficulty .fill{stroke:url(#mvte-grad-difficulty)}
.mvte-gauge.g-brand .fill{stroke:url(#mvte-grad-brand)}
/* Definitions only. Never painted, but must stay in the document and must not
   take up space or be display:none, which would stop the gradients resolving. */
.mvte-grads{position:absolute;width:0;height:0;overflow:hidden}
.mvte-gauge .num{font-family:var(--font-heading);font-weight:800;font-size:26px;fill:var(--text)}
.mvte-gauge .den{font:700 10px var(--font-mono);fill:var(--muted);letter-spacing:.1em}
.mvte-donutw{position:relative;width:132px;height:132px;margin:0 auto}
.mvte-donut{width:132px;height:132px;transform:rotate(-90deg)}
.mvte-donut circle{fill:none;stroke-width:15}
.mvte-donut .seg{stroke-dasharray:0 999;transition:stroke-dasharray 1.1s cubic-bezier(.22,1,.36,1),stroke-width .18s;cursor:pointer}
.mvte-donut .seg:hover{stroke-width:19}
.mvte-dcenter{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none}
.mvte-dcenter b{font-family:var(--font-heading);font-size:20px;font-weight:800;line-height:1}
.mvte-dcenter span{font-size:10px;color:var(--muted);letter-spacing:.04em}
.mvte-legend{display:flex;flex-wrap:wrap;gap:8px 14px;justify-content:center;margin-top:12px}
.mvte-legend span{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-3)}
.mvte-legend i{width:9px;height:9px;border-radius:var(--radius-xs)}
.mvte-legend i.cyan{background:var(--cyan)}.mvte-legend i.green{background:var(--green)}.mvte-legend i.purple{background:var(--purple)}.mvte-legend i.amber{background:var(--amber)}.mvte-legend i.red{background:var(--red)}
.mvte-kdscale{margin-top:20px}
.mvte-kdbar{position:relative;height:10px;border-radius:var(--radius-pill);background:linear-gradient(90deg,var(--green),var(--amber),var(--red))}
.mvte-kdmark{position:absolute;top:-4px;left:0;width:3px;height:18px;background:var(--text);border-radius:var(--radius-xs);transform:translateX(-50%);box-shadow:0 0 0 3px var(--panel);transition:left 1.2s cubic-bezier(.22,1,.36,1)}
.mvte-kdlabels{display:flex;justify-content:space-between;margin-top:9px;font:700 10.5px var(--font-mono);color:var(--muted)}

/* viz: brief */
.mvte-brief h4{font-family:var(--font-heading);font-size:15px;margin:0 0 3px}
.mvte-bmeta{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 14px}
.mvte-bchip{font-size:11px;font-weight:700;padding:5px 10px;border-radius:var(--radius-pill);background:var(--bg-2);border:1px solid var(--hairline);color:var(--text-2)}
.mvte-outline{display:grid;gap:7px}
.mvte-outline .h2{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--text-2);padding:8px 11px;border:1px solid var(--hairline);border-radius:var(--radius-sm);background:var(--panel)}
.mvte-outline .h2 b{width:20px;height:20px;border-radius:var(--radius-xs);background:color-mix(in srgb,var(--purple) 14%,transparent);color:var(--purple-bright);font-size:10px;font-weight:800;display:grid;place-items:center;font-family:var(--font-mono)}
.mvte-ents{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.mvte-ent{font-size:11px;padding:4px 9px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--purple) 9%,transparent);color:var(--purple-bright);font-weight:600}

/* worked example */
.mvte-story{display:grid;gap:14px;margin-top:32px;max-width:920px}
.mvte-srow{display:grid;grid-template-columns:180px 1fr;gap:22px;align-items:center;padding:18px 22px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--card)}
.mvte-srow .sig b{font-family:var(--font-heading);font-size:23px;font-weight:800;display:block;line-height:1.1}
.mvte-srow .sig .unit{font-size:13px}
.mvte-srow .sig span{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;font-weight:800}
.mvte-srow .read{font-size:14.5px;color:var(--text-2)}
.mvte-srow.verdict{background:linear-gradient(135deg,color-mix(in srgb,var(--purple) 9%,transparent),color-mix(in srgb,var(--magenta) 7%,transparent));border-color:color-mix(in srgb,var(--purple) 40%,var(--border))}
.mvte-srow.verdict .sig b{background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent}

/* mini feature grid */
.mvte-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.mvte-mcard{border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px;background:var(--card);transition:transform .18s,border-color .18s,box-shadow .18s}
.mvte-mcard:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--purple) 40%,var(--border));box-shadow:var(--shadow-md)}
.mvte-mic{width:40px;height:40px;border-radius:var(--radius-sm);display:grid;place-items:center;color:var(--purple-bright);background:color-mix(in srgb,var(--purple) 12%,transparent);margin-bottom:14px}
.mvte-mcard:hover .mvte-mic{animation:mvte-wobble .5s ease}
@keyframes mvte-wobble{25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
.mvte-mcard h4{font-family:var(--font-heading);font-size:16.5px;font-weight:800;margin:0 0 6px}
.mvte-mcard p{font-size:13.5px;color:var(--text-3)}
.mvte-schips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.mvte-schip{font-size:10.5px;font-weight:700;padding:4px 9px;border-radius:var(--radius-pill)}
.mvte-schip.on{color:var(--green);background:color-mix(in srgb,var(--green) 14%,transparent)}
.mvte-schip.off{color:var(--muted);background:var(--bg-2)}
.mvte-bars{display:grid;gap:7px;margin-top:12px}
.mvte-bar{display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--text-3)}
.mvte-bar .track{flex:1;height:7px;border-radius:var(--radius-pill);background:var(--bg-2);overflow:hidden}
.mvte-bar .fill{height:100%;border-radius:var(--radius-pill);background:var(--gradient);width:0;transition:width 1.1s cubic-bezier(.22,1,.36,1)}

/* use cases */
.mvte-cases{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:34px}
.mvte-case{border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;background:var(--card);position:relative;overflow:hidden;transition:transform .2s}
.mvte-case:hover{transform:translateY(-4px)}
.mvte-case::after{content:"";position:absolute;right:-40px;bottom:-40px;width:120px;height:120px;border-radius:var(--radius-pill);background:radial-gradient(circle,color-mix(in srgb,var(--purple) 16%,transparent),transparent 65%)}
.mvte-case .who{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--magenta)}
.mvte-case h4{font-family:var(--font-heading);font-size:19px;font-weight:800;margin:9px 0 8px;position:relative;z-index:1}
.mvte-case p{font-size:14px;color:var(--text-2);position:relative;z-index:1}

/* FAQ */
.mvte-faq{display:grid;gap:12px;margin-top:34px;max-width:820px}
.mvte-qa{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--card);overflow:hidden;transition:border-color .2s}
.mvte-qa.open{border-color:color-mix(in srgb,var(--purple) 45%,var(--border))}
.mvte-qa button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;background:transparent;border:0;cursor:pointer;font-family:var(--font-heading);font-weight:700;font-size:16.5px;color:var(--text);padding:18px 20px}
.mvte-qa .chev{flex-shrink:0;width:26px;height:26px;border-radius:var(--radius-pill);display:grid;place-items:center;color:var(--purple-bright);background:color-mix(in srgb,var(--purple) 12%,transparent);transition:transform .3s}
.mvte-qa.open .chev{transform:rotate(45deg)}
.mvte-qa .ans{max-height:0;overflow:hidden;transition:max-height .35s ease}
.mvte-qa .ans p{padding:0 20px 18px;color:var(--text-2);font-size:14.5px;font-family:var(--font)}

/* closing */
.mvte-final{text-align:center;padding:72px 0;position:relative;overflow:hidden;isolation:isolate}
.mvte-final h2{font-size:clamp(27px,3.6vw,40px);font-weight:800}
.mvte-final p{margin:16px auto 0;max-width:48ch;color:var(--text-2);font-size:16.5px}
.mvte-final .mvte-ctas{justify-content:center}

/* motion */
.mvte-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.mvte-reveal.in{opacity:1;transform:none}
.mvte-stagger>*{opacity:0;transform:translateY(18px)}
.mvte-stagger.in>*{animation:mvte-rise .6s cubic-bezier(.22,1,.36,1) forwards}
.mvte-stagger.in>*:nth-child(2){animation-delay:.08s}.mvte-stagger.in>*:nth-child(3){animation-delay:.16s}
.mvte-stagger.in>*:nth-child(4){animation-delay:.24s}.mvte-stagger.in>*:nth-child(5){animation-delay:.32s}
.mvte-stagger.in>*:nth-child(6){animation-delay:.4s}
@keyframes mvte-rise{to{opacity:1;transform:none}}

@media (max-width:900px){
  .mvte-hero .mvte-wrap,.mvte-band .mvte-grid2,.mvte-feat{grid-template-columns:1fr}
  .mvte-feat.alt .mvte-ft{order:0}
  .mvte-steps,.mvte-mini{grid-template-columns:1fr}
  .mvte-step .conn{display:none}
  .mvte-cases{grid-template-columns:1fr}
  .mvte-gloss{grid-template-columns:1fr}
  .mvte-wrap{padding:0 22px}
  .mvte-doc-head{padding:11px 22px}
  .mvte-doc-sep,.mvte-doc-name{display:none}
  .mvte-hero{padding:44px 0 20px}
  .mvte-srow{grid-template-columns:1fr;gap:6px}
}
/* Narrow: the bar is now the ONLY way into the guide on every tool, so the
   toggle is the one thing that must never be what gets clipped. The word goes
   and the book icon carries the label; the tool name already hid at 900px. */
@media (max-width:560px){
  .mvte-doc-head{padding:10px 14px;gap:8px}
  .mvte-doc-kind .t{display:none}
  .mvte-doc-back,.mvte-doc-toggle{padding:8px 12px}
}
@media (prefers-reduced-motion:reduce){
  .mvte *{animation:none!important;transition:none!important}
  .mvte-reveal,.mvte-stagger>*,.mvte-kpi{opacity:1!important;transform:none!important}
  .mvte-spark path.area{opacity:1}
}

/* Guides that lead their view (start-collapsed) need breathing room below the
   Documentation bar so it does not sit flush against the tool's first card. */
.mvte[data-mvte-start-collapsed]{margin-bottom:var(--space-4);}

/* Health-score formula + worked example. The score used to be a bare number an
   agency could not defend; this is the arithmetic, shown. */
.mvte-formula{margin-top:16px;padding:14px 16px;border-radius:var(--radius);background:color-mix(in srgb,var(--purple) 6%,transparent);border:1px solid color-mix(in srgb,var(--purple) 18%,transparent)}
.mvte-formula-eq{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:14px;color:var(--text);letter-spacing:-.01em}
.mvte-formula-w{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}
.mvte-formula-w span{font-size:12px;color:var(--text-2);padding:4px 10px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--text) 6%,transparent)}
.mvte-formula-w b{color:var(--text);margin-right:4px}
.mvte-formula-w .is-crit{background:color-mix(in srgb,var(--red) 14%,transparent)}
.mvte-formula-w .is-warn{background:color-mix(in srgb,var(--amber) 14%,transparent)}
.mvte-worked{margin-top:16px;padding:14px 16px;border-radius:var(--radius);border:1px solid var(--hairline)}
.mvte-worked-h{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.mvte-worked-t{width:100%;border-collapse:collapse;font-size:13px}
.mvte-worked-t th{text-align:left;font-weight:600;color:var(--muted);font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;padding:0 0 6px}
.mvte-worked-t td{padding:5px 0;color:var(--text-2);border-top:1px solid var(--hairline)}
.mvte-worked-t th:not(:first-child),.mvte-worked-t td:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}
.mvte-worked-t tfoot td{font-weight:600;color:var(--text)}
.mvte-worked-f{margin-top:10px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:14px;color:var(--text)}
.mvte-worked-f b{color:var(--purple-bright)}