/* MUFHL 410 — the course stylesheet. ONE file, every page.
 *
 * GENERATED by toolkit/build/build-shared-css.py — do not hand-edit; edit the generator or
 * the reference page and re-run, or the next run silently reverts you.
 *
 * RULE: ARC OMT3 - S01 L01 (week01-page1-intro-major) is the reference. Its rules are copied
 * verbatim. Selectors it does not define come from the Weeks 1-4 pages that do (majority).
 * Weeks 5-6 supply only what nothing in Weeks 1-4 defines. Deviations, in full:
 *
 *   .mb .deg — add font-weight:600
 *       Decided by drem 2026-08-11. S01 L01 has white-space:nowrap only; the bold accidental was
 *       introduced at week02-page6 and kept through Weeks 3-4. Explicitly carried, not voted.
 *   .mb .banner — background shorthand -> longhand with var(--banner-image,none)
 *       Mechanical, not aesthetic: one rule cannot hard-code 26 different image URLs. Longhand
 *       so an unset variable degrades to the #e8eef5 panel instead of invalidating the whole
 *       declaration. The image itself is derived from the banner block data-image, and LOCAL
 *       PREVIEW ONLY — what students see is the Beaver Builder slideshow row, untouched by this
 *       file.
 *   .mb .why -> .mb .hl — renamed, declarations unchanged
 *       Two components shared one class name: an inline amber badge on week01 pages 1-2, and a
 *       violet modifier on <div class="box why"> across 7 pages in Weeks 3-4. S01 L01 verbatim
 *       would have put the badge styling on the Weeks 3-4 boxes. The badge keeps S01 L01
 *       declarations under .hl; .why keeps the Weeks 3-4 modifier.
 *   .mb .selfcheck li::before — color #6366f1 -> #4f46e5
 *       WCAG 2.1 SC 1.4.3 Contrast (Minimum), Level AA — the binding standard under the ADA
 *       Title II rule. 4.27:1 against the #f8fafc panel, needs 4.5:1. #4f46e5 is already in the
 *       palette and gives 6.01:1.
 *
 *   supporting gray #6b7280 -> #4b5563 (WCAG 2.1 SC 1.4.3 AA). The old value passed on white
 *   (4.83:1) but failed on the tinted panels these captions actually sit on: 4.41:1 on
 *   #f5f3ff, 4.32:1 on #eef2ff, 4.14:1 on #e8eef5. The new value is 7.56:1 on white and
 *   6.47:1 on the darkest panel. Applied by build-shared-css.py; see DEVIATIONS there.
 */

.mb{max-width:860px; margin:0 auto; font:16px/1.65 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color:#1f2937}
.mb h2{font-size:24px; margin:1.35em 0 .4em; color:#111827; border-bottom:2px solid #e5e7eb; padding-bottom:.2em}
.mb h3{font-size:20px; margin:1.2em 0 .35em}
.mb .banner{position:relative; margin:0 0 1.1em; border-radius:10px; overflow:hidden; background-color:#e8eef5; background-image:var(--banner-image,none); background-position:center; background-size:cover; background-repeat:no-repeat; min-height:96px; display:flex; align-items:center; padding:0 22px}
.mb .banner h2{margin:0; border:none; font-size:28px; color:#111827; padding:0}
.mb .eyebrow{text-transform:uppercase; letter-spacing:.08em; font-size:14px; color:#4b5563; font-weight:700}
.mb .rn{position:relative; display:inline-block; vertical-align:baseline; font-weight:600; line-height:1; white-space:nowrap}
.mb .sd{position:relative; display:inline-block; vertical-align:baseline; font-weight:600; line-height:1}
.mb .sd::before{content:""; position:absolute; left:0; right:0; margin:0 auto; top:-0.50ex; width:0.62ex; height:0.62ex; border-top:.15ex solid currentColor; border-left:.15ex solid currentColor; transform:translateX(0) rotate(45deg)}
.mb .deg{white-space:nowrap; font-weight:600}
.mb details.lo{border:1px solid #e5e7eb; border-radius:10px; margin:1em 0; background:#f8fafc; overflow:hidden}
.mb details.lo>summary{cursor:pointer; list-style:none; padding:12px 16px; font-weight:700; color:#111827; display:flex; justify-content:space-between; align-items:center}
.mb details.lo>summary::after{content:"＋"; color:#4b5563; font-weight:400}
.mb details.lo[open]>summary::after{content:"－"}
.mb details.lo .body{padding:2px 16px 14px}
.mb details.lo ol{margin:.2em 0 0; padding-left:1.2em}
.mb details.lo li{margin:.28em 0}
.mb dl.gloss{margin:1em 0; border-left:4px solid #059669; background:#ecfdf5; border-radius:0 8px 8px 0; padding:10px 16px}
.mb dl.gloss dt{font-weight:700; color:#065f46; margin-top:.5em}
.mb dl.gloss dd{margin:.1em 0 .3em}
/* PADDING FIX 2026-08-27. .note and .fwd were written as modifiers of .box —
   they set only border-left-color and background, and inherited padding, border
   width, radius and margin from .box. Every page in the course, however, uses them
   standalone (<div class="note">, <div class="fwd">), so they rendered with no
   padding and no left border at all. The base is now shared by all three. */
.mb .box,.mb .note,.mb .fwd{border-left:4px solid #cbd5e1; background:#f9fafb; border-radius:0 8px 8px 0; padding:12px 16px; margin:1em 0}
.mb .note{border-left-color:#0ea5e9; background:#f0f9ff}
.mb .box .lbl,.mb .note .lbl,.mb .fwd .lbl{font-weight:700; display:block; margin-bottom:.2em; font-size:16px}
.mb .note .lbl{color:#0369a1}
.mb .def{border-left-color:#0d9488; background:#f0fdfa}
.mb .def .lbl{color:#0f766e}
.mb .interact{border:1px solid #e5e7eb; border-radius:14px; background:#fff; padding:6px; margin:14px 0; box-shadow:0 6px 18px rgba(0,0,0,.05)}
.mb .interact .cap{font-size:16px; color:#4b5563; padding:6px 10px 8px}
.mb .interact iframe{width:100%; border:none; border-radius:10px; display:block; background:#eef2f7}
.mb .hl{background:#fef3c7; border-radius:8px; padding:2px 8px; font-weight:600}
.mb .prep{font-size:16px; border-top:1px dashed #d1d5db; margin-top:.9em; padding-top:.5em; color:#374151}
.mb .prep b{color:#111827}
.mb .selfcheck{background:#f8fafc; border:1px solid #e5e7eb; border-radius:12px; padding:14px 18px; margin:1.4em 0}
.mb .selfcheck ul{list-style:none; padding-left:0; margin:.3em 0}
.mb .selfcheck li{margin:.4em 0; padding-left:1.6em; position:relative}
.mb .selfcheck li::before{content:"☐"; position:absolute; left:0; color:#4f46e5; font-size:1.1em}
.mb .pager{font-size:16px; color:#4b5563; margin:.3em 0 0}
.mb .lecture{margin:1em 0}
.mb .lecture .vwrap{position:relative; padding-top:56.25%; border-radius:12px; overflow:hidden; background:#0f172a}
.mb .lecture iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.mb .lecture .vcap{font-size:16px; color:#4b5563; margin-top:.35em}
.mb .score-avid{border:1px dashed #a5b4fc; background:#f5f3ff; border-radius:10px; padding:14px 16px; margin:.8em 0; font-size:16px; color:#4338ca}
.mb .score-avid b{display:block; color:#312e81; font-size:16px; margin-bottom:.15em}
.mb .score-avid code{background:#ede9fe; padding:1px 5px; border-radius:4px; font-size:16px}
:focus-visible{outline:2px solid #4f46e5; outline-offset:2px}
.mb .card{border:1px solid #e5e7eb; border-left:5px solid #4f46e5; border-radius:0 12px 12px 0; background:#fff; padding:14px 18px; margin:14px 0; box-shadow:0 4px 12px rgba(0,0,0,.04)}
.mb .card.star{border-left-color:#b45309; background:#fffdf7}
.mb .card.add{border-left-color:#0d9488; background:#f0fdfa}
.mb .work{font-weight:700; font-size:18px; color:#111827; margin:0 0 .1em}
.mb .where{font-size:16px; color:#4b5563; margin:0 0 .5em; font-variant-numeric:tabular-nums}
.mb .card p{margin:.45em 0}
.mb audio{width:100%; margin:.6em 0 .2em}
.mb .perf{font-size:16px; color:#4b5563; margin:0 0 .2em}
.mb .c4e-video{max-width:520px; margin:.8em 0 1.2em}
.mb .c4e-video .fr{position:relative; padding-top:56.25%; background:#000; border-radius:10px; overflow:hidden}
.mb .c4e-video a{position:absolute; inset:0; width:100%; height:100%; border:0; display:block}
.mb .c4e-video iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block}
.mb .c4e-video img{width:100%; height:100%; object-fit:cover; display:block}
.mb .c4e-video a::after{content:"▶"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:64px; height:44px; line-height:44px; text-align:center; border-radius:10px; background:rgba(0,0,0,.72); color:#fff; font-size:20px}
.mb .c4e-video a:hover::after{background:#e11d48}
.mb .c4e-video .clip{display:block; font-size:16px; color:#4b5563; margin-top:.35em}
.mb .c4e-video .clip b{color:#3730a3; font-variant-numeric:tabular-nums}
.mb .listen{background:#f8fafc; border-radius:8px; padding:9px 13px; margin-top:.7em; font-size:16px}
.mb .listen b{color:#4338ca}
.mb .box ul{margin:.4em 0 0; padding-left:1.15em}
.mb .box li{margin:.3em 0}
.mb .done{background:#ecfdf5; border:1px solid #6ee7b7; border-radius:12px; padding:12px 16px; margin:1.2em 0; color:#065f46; font-size:16px}
.mb .media{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:.7em 0 .2em}
.mb .media a{display:inline-block; font-size:16px; font-weight:600; text-decoration:none; color:#3730a3; background:#eef2ff; border:1px solid #c7d2fe; border-radius:999px; padding:6px 14px; align-self:center}
.mb .media a:hover{background:#e0e7ff}
.mb .media a:focus-visible{outline:3px solid #4338ca; outline-offset:2px}
.mb .media br{display:none}
.mb .media .vw{flex:1 0 100%; margin:.2em 0 0}
.mb .vw{margin:.9em 0 0}
.mb .vw button{display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:#f9fafb; border:1px solid #e5e7eb; border-radius:10px; padding:11px 14px; cursor:pointer; font:16px/1.4 inherit; color:#374151}
.mb .vw button:hover{background:#f3f4f6}
.mb .vw button:focus-visible{outline:3px solid #4338ca; outline-offset:2px}
/* CONTRAST FIX 2026-08-26. The OnMusic theme's style.css carries
   `button:not(:hover):not(:active):not(.has-text-color){color:var(--global--color-background)}`
   — it paints every button's TEXT in the page BACKGROUND colour, which is right for its own solid
   buttons and disastrous here: our video titles rendered as #d1e4dd on white, a contrast ratio of
   **1.32:1** against the 4.5:1 that WCAG 2.1 AA requires. The theme selector's specificity (0,3,1)
   beat ours (0,2,1), so our colour never applied. Measured on the LIVE Week 1 page 3, not inferred.
   This rule is (0,5,1) and wins without !important. Verified in the browser: 1.32 -> 9.86:1.
   Do not lower its specificity. */
.mb .vw button:not(:hover):not(:active):not(.has-text-color){color:#374151; background:#f9fafb}
.mb .vw .tri{color:#4338ca; font-size:18px; line-height:1}
.mb .vw iframe{display:block; width:100%; aspect-ratio:16/9; height:auto; border:0; border-radius:10px}
.mb h4{font-size:18px; margin:1.2em 0 .3em; color:#4338ca}
.mb .card.add .work::after{content:" · added"; font-size:11.52px; font-weight:600; color:#0f766e; letter-spacing:.04em; text-transform:uppercase}
.mb .todo{border-left-color:#f59e0b; background:#fffbeb}
.mb .todo .lbl{color:#b45309}
.mb .rulebox{border-left:4px solid #4f46e5; background:#eef2ff; border-radius:0 8px 8px 0; padding:12px 16px; margin:1em 0}
.mb .rulebox .lbl{font-weight:700; color:#4338ca; display:block; margin-bottom:.2em; font-size:16px}
.mb .err{border-left:4px solid #dc2626; background:#fef2f2; border-radius:0 8px 8px 0; padding:10px 16px; margin:.7em 0; font-size:16px}
.mb .err b{color:#b91c1c}
.mb .term{font-style:italic; color:#4338ca; font-weight:600}
.mb table.ref{width:100%; border-collapse:collapse; border:0; margin:1.35em 0; font-size:16px; line-height:1.55}
.mb table.def{width:100%; border-collapse:collapse; border:0; margin:1.35em 0; font-size:16px; line-height:1.55}
.mb table.vl{width:100%; border-collapse:collapse; border:0; margin:1.35em 0; font-size:16px; line-height:1.55}
.mb table.ref th{border:0; border-bottom:1px solid #e5e7eb; padding:12px 22px 12px 0; text-align:left; vertical-align:top; word-break:normal}
.mb table.ref td{border:0; border-bottom:1px solid #e5e7eb; padding:12px 22px 12px 0; text-align:left; vertical-align:top; word-break:normal}
.mb table.def th{border:0; border-bottom:1px solid #e5e7eb; padding:12px 22px 12px 0; text-align:left; vertical-align:top; word-break:normal}
.mb table.def td{border:0; border-bottom:1px solid #e5e7eb; padding:12px 22px 12px 0; text-align:left; vertical-align:top; word-break:normal}
.mb table.vl th{border:0; border-bottom:1px solid #e5e7eb; padding:12px 22px 12px 0; text-align:left; vertical-align:top; word-break:normal}
.mb table.vl td{border:0; border-bottom:1px solid #e5e7eb; padding:12px 22px 12px 0; text-align:left; vertical-align:top; word-break:normal}
.mb table.ref thead{border:0}
.mb table.def thead{border:0}
.mb table.vl thead{border:0}
.mb table.ref thead th{font-size:14px; text-transform:uppercase; letter-spacing:.05em; color:#4b5563; font-weight:700; padding:0 22px 8px 0; border-bottom:2px solid #d1d5db; background:transparent}
.mb table.def thead th{font-size:14px; text-transform:uppercase; letter-spacing:.05em; color:#4b5563; font-weight:700; padding:0 22px 8px 0; border-bottom:2px solid #d1d5db; background:transparent}
.mb table.vl thead th{font-size:14px; text-transform:uppercase; letter-spacing:.05em; color:#4b5563; font-weight:700; padding:0 22px 8px 0; border-bottom:2px solid #d1d5db; background:transparent}
.mb table.ref tbody tr:last-child td{border-bottom:0}
.mb table.def tbody tr:last-child td{border-bottom:0}
.mb table.vl tbody tr:last-child td{border-bottom:0}
.mb table.vl tbody tr:last-child th{border-bottom:0}
.mb table.ref th:last-child{padding-right:0}
.mb table.ref td:last-child{padding-right:0}
.mb table.def td:last-child{padding-right:0}
.mb table.vl td:last-child{padding-right:0}
.mb table.ref th:first-child{width:38%}
.mb table.ref td:first-child{width:38%}
.mb table.ref .nm{font-weight:600; color:#111827}
.mb table.def td:first-child{width:28%; font-weight:700; color:#4338ca}
.mb table.vl tbody th{width:1%; white-space:nowrap; font-weight:600}
.mb table.ref tbody tr:nth-child(even) td{background:#f9fafb}
.mb table.def tbody tr:nth-child(even) td{background:#f9fafb}
.mb table.vl tbody tr:nth-child(even) td{background:#f9fafb}
.mb table.vl tbody tr:nth-child(even) th{background:#f9fafb}
.mb table.ref .sw td{background:#f5f3ff}
.mb dl.terms{margin:.2em 0 0}
.mb dl.terms dt{font-weight:700; color:#111827; margin-top:.7em}
.mb dl.terms dt:first-of-type{margin-top:0}
.mb dl.terms dd{margin:.15em 0 0; color:#374151}
.mb .gv{box-sizing:border-box; max-width:760px; margin:14px auto 0; background:#fff; border:1px solid #e5e7eb; border-radius:16px; box-shadow:0 6px 18px rgba(0,0,0,.06); overflow:hidden}
.mb .gv *{box-sizing:border-box}
.mb .gv-head{padding:16px 22px 6px}
.mb .gv-eyebrow{text-transform:uppercase; letter-spacing:.08em; font-size:14px; color:#4b5563; font-weight:700}
.mb .gv-title{font-size:20px; font-weight:700; color:#111827; margin:.25em 0 .1em}
.mb .gv-video{position:relative; padding-top:56.25%; background:#000}
.mb .gv-video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.mb .gv-meta{font-size:16px; color:#4b5563; padding:8px 22px 0}
.mb .gv-toggle{font:inherit; font-size:16px; font-weight:600; color:#4338ca; background:none; border:none; cursor:pointer; padding:12px 22px 10px}
.mb .gv-toggle:hover{text-decoration:underline}
.mb .gv-transcript{max-height:340px; overflow:auto; border-top:1px solid #e5e7eb; padding:6px 12px 14px}
.mb .gv-line{display:flex; gap:10px; width:100%; text-align:left; font:inherit; font-size:16px; background:none; border:none; border-radius:8px; color:#1f2937; padding:7px 9px; cursor:pointer}
.mb .gv-line:hover{background:#f5f7ff}
.mb .gv-t{flex:0 0 auto; color:#4338ca; font-weight:700; font-variant-numeric:tabular-nums; min-width:3em}
.mb .gv-x{flex:1}

/* THE THEME OUT-SPECIFIES THE TWO RULES ABOVE, AND PAINTS THE TRANSCRIPT IN ITS OWN BACKGROUND.
   Added 2026-08-18 after every transcript in the course was found rendering in pale mint on white.
   The theme's style.css carries:
       button:not(:hover):not(:active):not(.has-text-color){color:var(--global--color-background)}
   which is specificity (0,3,1). Every transcript control is a <button> - the toggle and all 12-30
   lines - and `.mb .gv-toggle` / `.mb .gv-line` are only (0,2,0), so the theme wins the colour.
   The result is present, correct, clickable and effectively invisible; it reads to a reader as
   "the transcript button is not showing" rather than as a CSS fault, because .gv-t is a <span>
   and keeps its indigo, so the timestamps look right while everything around them disappears.

   Adding :not(:hover):not(:active) takes these to (0,4,0), which wins. Hover is deliberately not
   restated: on hover the theme's own rule stops matching, so the base rules above already apply.
   The colours are the same ones declared above - this changes who wins, not what is declared. */
.mb .gv-toggle:not(:hover):not(:active){color:#4338ca}
.mb .gv-line:not(:hover):not(:active){color:#1f2937}
.mb .card + .score-avid{margin-top:-8px; border-top-left-radius:0; border-top-right-radius:0}
.mb .localshot{margin-top:.7em}
.mb .localshot img{width:100%; height:auto; display:block; border:1px solid #ddd6fe; border-radius:8px; background:#fff}
.mb .localshot .cap{display:block; font-size:16px; color:#4b5563; margin-top:.35em}
.mb .links{font-size:16px; margin-top:.6em}
.mb .links a{color:#4338ca; text-decoration:none; font-weight:600; border-bottom:1px solid #c7d2fe}
.mb .links a:hover{background:#eef2ff}
.mb .links span{color:#4b5563; margin:0 .4em}
.mb .yt{position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; cursor:pointer; background-size:cover; background-position:center}
.mb .yt::after{content:"▶"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:64px; height:44px; line-height:44px; border-radius:10px; background:rgba(0,0,0,.72); color:#fff; font-size:20px}
.mb .yt:hover::after{background:#e11d48}
.mb .ytlink{font-size:16px; margin-top:.3em}
.mb .ytlink a{color:#4338ca; font-weight:600; text-decoration:none; border-bottom:1px solid #c7d2fe}
.mb .clip{display:inline-block; font-size:16px; font-weight:700; color:#4338ca; background:#eef2ff; border-radius:999px; padding:2px 9px; margin-right:.4em; font-variant-numeric:tabular-nums}
.mb .warn{border-left-color:#f59e0b; background:#fffbeb}
.mb .warn .lbl{color:#b45309}
.mb .box p,.mb .note p,.mb .fwd p{margin:.5em 0 .2em}
.mb .box p:first-of-type,.mb .note p:first-of-type,.mb .fwd p:first-of-type{margin-top:.15em}
.mb .card ul{margin:.5em 0 .2em; padding-left:1.2em}
.mb .card li{margin:.32em 0}
.mb .tag{display:inline-block; font-size:14px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; border-radius:999px; padding:2px 9px; margin-left:.4em; vertical-align:.1em}
.mb .tag.n{background:#eef2ff; color:#4338ca}
.mb .tag.b{background:#ecfeff; color:#0e7490}
.mb .tag.t{background:#fef3c7; color:#b45309}
.mb .fig{display:inline-block; vertical-align:-0.32em; font-size:.7em; line-height:1.05; text-align:center; font-weight:700}
.mb .fig i{display:block; font-style:normal}
.mb .vid{position:relative; padding:56.25% 0 0 0; border-radius:12px; overflow:hidden; background:#111827; margin:14px 0}
.mb .vid iframe{position:absolute; top:0; left:0; width:100%; height:100%; border:0}
.mb .vidcap{font-size:16px; color:#4b5563; margin:-6px 0 14px}
.mb .rule{border:1px solid #e5e7eb; border-left:5px solid #4f46e5; border-radius:0 12px 12px 0; background:#fff; padding:14px 18px; margin:16px 0 0; box-shadow:0 4px 12px rgba(0,0,0,.04)}
.mb .rule .n{display:inline-flex; align-items:center; justify-content:center; width:23px; height:23px; border-radius:50%; background:#4f46e5; color:#fff; font-size:16px; font-weight:700; margin-right:9px}
.mb .rule .hd{font-weight:700; color:#111827; font-size:20px; display:flex; align-items:center; margin:0 0 .45em}
.mb .rule p{margin:.45em 0}
.mb .rule.trap{border-left-color:#b45309}
.mb .rule.trap .n{background:#b45309}
.mb .rule + .score-avid{margin-top:-6px; border-top-left-radius:0; border-top-right-radius:0}
.mb .run{border-left:4px solid #c7d2fe; padding-left:14px; margin:1em 0 1.4em}
.mb .run .steps{list-style:none; padding-left:0; margin:.5em 0 .8em; counter-reset:fig}
.mb .run .steps li{margin:.45em 0; padding-left:2.3em; position:relative; font-size:16px}
.mb .run .steps li::before{counter-increment:fig; content:attr(data-fig); position:absolute; left:0; top:.1em; font-size:11.52px; font-weight:700; color:#4338ca; background:#eef2ff; border:1px solid #c7d2fe; border-radius:5px; padding:1px 5px}
.mb .facts{background:#f9fafb; border:1px solid #e5e7eb; border-radius:10px; padding:12px 16px; margin:1em 0}
.mb .facts .lbl{font-weight:700; color:#111827; display:block; margin-bottom:.3em}
.mb .facts ul{margin:.3em 0 0; padding-left:1.15em}
.mb .facts li{margin:.32em 0; font-size:16px}
.mb .fwd{border-left-color:#8b5cf6; background:#f5f3ff}
.mb .fwd .lbl{color:#6d28d9}
.mb .why .lbl{color:#6d28d9}
.mb ol.method{margin:.5em 0 1em; padding-left:1.3em}
.mb ol.method li{margin:.4em 0}
.mb .card audio{width:100%; margin:.6em 0 .15em}
.mb .step{border-left:4px solid #c7d2fe; padding:2px 0 2px 16px; margin:1.5em 0 1.2em}
.mb .step .n{display:inline-block; font-size:16px; font-weight:700; color:#4338ca; background:#eef2ff; border:1px solid #c7d2fe; border-radius:5px; padding:1px 7px; vertical-align:2px; margin-right:.5em}
.mb .step h3{margin:.1em 0 .35em; display:inline}
.mb .step .ask{background:#f8fafc; border-radius:8px; padding:9px 13px; margin:.7em 0 .2em; font-size:16px}
.mb .step .ask b{color:#4338ca}
.mb .wrapup{background:#ecfdf5; border:1px solid #6ee7b7; border-radius:12px; padding:12px 16px; margin:1.2em 0; color:#065f46; font-size:16px}
.mb .why{border-left-color:#8b5cf6; background:#f5f3ff}
.mb p{margin:.7em 0}
.mb details.lo>summary::-webkit-details-marker{display:none}
.mb .note ul{margin:.4em 0 .1em 1.1em; padding:0}
.mb .fwd ul{margin:.4em 0 .1em 1.1em; padding:0}
.mb .vwclose{display:inline-block; margin-top:.45em; padding:4px 12px; font:inherit; font-size:14px; font-weight:600; color:#4338ca; background:#f5f3ff; border:1px solid #6366f1; border-radius:999px; cursor:pointer}
.mb .vwclose:hover{background:#eef2ff; border-color:#4f46e5}
.mb .gv-line.is-now:not(:hover){background:#eef2ff; box-shadow:inset 3px 0 0 #4338ca}
.mb .gv-line.is-now:not(:hover):not(:active){color:#111827}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
}

@supports not (aspect-ratio: 1/1){
  .mb .score iframe{height:var(--fallback,470px)}
}