/* Mockingbyrd — new homepage sections (#6 summary, #2 problem panels, #1 FAQ)
   Self-contained. All classes prefixed .mb- so nothing collides with existing CSS.
   Tokens follow the Color System Guide Rev. A. If the site already defines these
   custom properties, delete the :root block below and the site values win. */

/* The package shipped its own palette. The site already has one, and its --accent would have
   been overwritten by the package's, so the tokens are aliased to the site's instead of
   redefined: the .mb- classes keep working and everything takes the site's colors. */
:root {
  --bg-canvas: var(--ground); --bg-surface: var(--surface); --bg-raised: var(--surface-2);
  --border-hair: var(--rule-soft); --border-strong: var(--rule);
  /* --glass and --glass-raised come from site.css, which every page loads before this. */
  --text-primary: var(--ink); --text-secondary: var(--dim); --text-muted: var(--faint);
  --accent-strong: var(--accent-deep); --accent-dim: var(--accent-deep);
  --on-accent: var(--accent-ink);
  --state-open: var(--fail, #EF6F5E); --state-partial: var(--amber, #E8B04A); --state-drift: #F0906A;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-body: "Archivo", system-ui, sans-serif;
}

.mb-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.mb-mono { font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace); }
.mb-eyebrow {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--accent-text); font-weight: 500;
  margin: 0 0 12px;
}
.mb-h2 { color: var(--text-primary); font-size: clamp(26px, 3.2vw, 36px); line-height: 1.15;
  font-weight: 600; margin: 0 0 16px; max-width: 22ch; }
.mb-lede { color: var(--text-secondary); font-size: 17px; line-height: 1.6; max-width: 62ch; margin: 0; }

/* ---------- #6 Summary paragraph ---------- */
.mb-summary { color: var(--text-secondary); font-size: 17px; line-height: 1.65; max-width: 64ch;
  margin: 20px 0 0; }
.mb-summary strong { color: var(--text-primary); font-weight: 600; }

/* ---------- #2 Problem panels ---------- */
.mb-problem { padding: 96px 0; border-top: 1px solid var(--border-hair); }
.mb-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.mb-panel { background: var(--glass); border: 1px solid var(--border-hair); border-radius: 10px;
  padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.mb-panel h3 { color: var(--text-primary); font-size: 19px; line-height: 1.3; margin: 0; font-weight: 600; }
.mb-panel p { color: var(--text-secondary); font-size: 15px; line-height: 1.55; margin: 0; }
.mb-artifact { margin-top: auto; background: var(--glass-raised); border: 1px solid var(--border-hair);
  border-radius: 8px; padding: 14px; font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); overflow-x: auto; }
.mb-artifact__caption { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 11px;
  color: var(--text-muted); letter-spacing: .06em; margin-top: 8px; }

/* Review #14: this bottom-aligned the three artifacts, and they are 189, 75 and 150px tall,
   so the shortest one carried a 98px gap between the copy and the stat. Sitting each artifact
   under its own paragraph puts the leftover space at the foot of the card, where it reads as
   breathing room rather than as something missing. */
.mb-panel > div:last-child { margin-top: 18px; }

/* A: permission prompt */
.mb-prompt__q { color: var(--text-primary); margin-bottom: 10px; }
.mb-prompt__btns { display: flex; gap: 6px; flex-wrap: wrap; }
.mb-prompt__btn { border: 1px solid var(--border-strong); border-radius: 5px; padding: 3px 8px; font-size: 11.5px; }
.mb-prompt__btn--hot { border-color: rgba(232,176,74,.45); background: rgba(232,176,74,.12); color: var(--state-partial); }
.mb-prompt__count { margin-top: 10px; color: var(--state-partial); }

/* B: allow-list growth */
.mb-growth { display: flex; align-items: flex-end; gap: 14px; }
.mb-growth__n { color: var(--text-primary); font-size: 28px; line-height: 1; }
.mb-growth__n small { display: block; font-size: 11px; color: var(--text-muted); margin-top: 6px; }
.mb-growth svg { flex: 1; height: 44px; }

/* C: config excerpt */
.mb-code { margin: 0; white-space: pre; }
.mb-code .deny { color: var(--text-secondary); }
.mb-code .grant { color: var(--state-open); }
.mb-code .ln { color: var(--text-muted); user-select: none; }

/* ---------- #1 FAQ ---------- */
.mb-faq { padding: 96px 0; border-top: 1px solid var(--border-hair); }
.mb-faq__list { margin-top: 32px; border-top: 1px solid var(--border-hair); max-width: 820px; }
.mb-faq details { border-bottom: 1px solid var(--border-hair); }
.mb-faq summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative;
  color: var(--text-primary); font-size: 17px; font-weight: 600; line-height: 1.4; }
.mb-faq summary::-webkit-details-marker { display: none; }
.mb-faq summary::after { content: "+"; position: absolute; right: 4px; top: 18px;
  font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 20px; color: var(--accent-strong);
  transition: transform .15s ease; }
.mb-faq details[open] summary::after { transform: rotate(45deg); }
.mb-faq summary:hover { color: var(--accent); }
.mb-faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.mb-faq__a { color: var(--text-secondary); font-size: 16px; line-height: 1.65; padding: 0 40px 22px 0; max-width: 68ch; }
.mb-faq__a p { margin: 0; }
.mb-faq__a code { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: .9em;
  background: var(--glass-raised); border: 1px solid var(--border-hair); border-radius: 4px; padding: 1px 5px;
  color: var(--text-primary); }

@media (max-width: 860px) {
  .mb-panels { grid-template-columns: minmax(0, 1fr); }
  .mb-problem, .mb-faq { padding: 64px 0; }
}
@media (prefers-reduced-motion: reduce) { .mb-faq summary::after { transition: none; } }

/* =====================================================================
   ADDITIONS FOR #3 #4 #5 #7 #8 #9 #10
   ===================================================================== */
.mb-section { padding: 96px 0; border-top: 1px solid var(--border-hair); }
@media (max-width: 860px) { .mb-section { padding: 64px 0; } }
.mb-btn { display: inline-block; border-radius: 8px; padding: 11px 18px; font-weight: 600; font-size: 15px;
  text-decoration: none; border: 1px solid transparent; cursor: pointer; font-family: inherit; }
.mb-btn--primary { background: var(--accent); color: var(--on-accent); }
.mb-btn--primary:hover { background: #FBEFBD; }
.mb-btn--ghost { color: var(--text-primary); border-color: var(--border-strong); background: transparent; }
.mb-btn--ghost:hover { border-color: var(--accent-dim); }
.mb-btn:focus-visible, .mb-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.mb-link { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent-dim); }
.mb-link:hover { text-decoration-color: var(--accent); }

/* status chips: tint recipe 12% fill / 45% border / solid text */
.mb-chip { display: inline-block; font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 11px;
  letter-spacing: .06em; padding: 2px 8px; border-radius: 4px; border: 1px solid; }
.mb-chip--open    { color: #EF6F5E; background: rgba(239,111,94,.12); border-color: rgba(239,111,94,.45); }
.mb-chip--partial { color: #E8B04A; background: rgba(232,176,74,.12); border-color: rgba(232,176,74,.45); }
.mb-chip--holding { color: #5FD6A0; background: rgba(95,214,160,.12); border-color: rgba(95,214,160,.45); }
.mb-chip--drift   { color: #F0906A; background: rgba(240,144,106,.12); border-color: rgba(240,144,106,.45); }

/* ---------- #7 Install facts ---------- */
.mb-facts { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 18px 0 0; padding: 0; list-style: none;
  font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 13px; color: var(--text-secondary); }
.mb-facts li strong { color: var(--text-primary); font-weight: 600; }

/* ---------- App-chrome primitives (score page) ---------- */
.mb-ui { background: var(--glass); border: 1px solid var(--border-hair); border-radius: 12px; padding: 22px; }
.mb-ui__label { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 11px; color: var(--text-muted);
  letter-spacing: .08em; margin: 0 0 14px; display: flex; justify-content: space-between; gap: 12px; }
.mb-ui__note { color: var(--text-muted); font-size: 13px; line-height: 1.5; margin: 14px 0 0; }

/* ---------- #5 Score CTA ---------- */
.mb-band { background: var(--glass); border: 1px solid var(--border-hair); border-radius: 12px; padding: 32px;
  display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.mb-band h2 { color: var(--text-primary); font-size: 24px; margin: 0 0 8px; font-weight: 600; }
.mb-band p { color: var(--text-secondary); margin: 0; max-width: 56ch; line-height: 1.6; }
.mb-band__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.mb-band + .mb-band { margin-top: 16px; }

/* ---------- #9 Version badge ---------- */
.mb-version { display: inline-flex; gap: 8px; align-items: center; font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  font-size: 12px; color: var(--text-muted); text-decoration: none; border: 1px solid var(--border-hair); border-radius: 999px; padding: 3px 10px; }
.mb-version b { color: var(--text-secondary); font-weight: 600; }
.mb-version:hover { border-color: var(--accent-dim); color: var(--text-secondary); }
.mb-version__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-strong); }

/* ---------- Page shell for /score /glossary /threats /changelog ---------- */
.mb-page { margin: 0; background: var(--bg-canvas); color: var(--text-primary);
  font-family: var(--font-body, -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif); -webkit-font-smoothing: antialiased; }
.mb-top { border-bottom: 1px solid var(--border-hair); }
/* nowrap, as .nav is on every other page. The row used to wrap because the wordmark was
   small enough that nothing ever pushed it; at the site's lockup size the theme toggle fell
   to a second row between 761 and about 900px. Below 761 the links are gone, so there is no
   width left at which wrapping was the thing that saved this row. .mb-nav still wraps its
   own links, which is where a narrow window should give. */
.mb-top .mb-wrap { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 16px; flex-wrap: nowrap; }
/* The same lockup measurement as .brand .lockup in site.css. This page is the only one with
   its own header template, and at 18px tall its wordmark was a quarter of the one every other
   page shows — the brand shrank when you arrived here and grew again when you left. */
.mb-top img { width: clamp(232px, 27vw, 344px); height: auto; display: block; }
.mb-nav { display: flex; gap: 22px; flex-wrap: wrap; }
.mb-nav a { color: var(--text-secondary); text-decoration: none; font-size: 14px; }
.mb-nav a:hover, .mb-nav a[aria-current="page"] { color: var(--accent); }
.mb-pagehead { padding: 72px 0 40px; }
/* Only the heroes that have a drawing take two columns. The modifier exists so that a page
   without one keeps the single column it has rather than growing an empty right half, which
   is the thing this was added to fix. The drawing stacks under the copy on a narrow screen
   instead of being hidden: it carries the page's idea, so a phone should get it too. */
.mb-pagehead--art .mb-wrap { display: grid; gap: 44px; align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr); }
.mb-pagehead--art h1 { max-width: none; }
.mb-pagehead__art svg { display: block; width: 100%; height: auto; }
@media (max-width: 880px) {
  .mb-pagehead--art .mb-wrap { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .mb-pagehead__art { max-width: 440px; }
}
.mb-pagehead h1 { font-size: clamp(34px, 5vw, 52px); line-height: 1.08; margin: 0 0 16px; font-weight: 600; max-width: 20ch; }
.mb-foot { border-top: 1px solid var(--border-hair); margin-top: 96px; padding: 28px 0 40px; color: var(--text-muted); font-size: 13px; }
.mb-foot .mb-wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; }
.mb-foot a { color: var(--text-secondary); text-decoration: none; margin-right: 18px; }
.mb-prose { max-width: 70ch; color: var(--text-secondary); font-size: 16.5px; line-height: 1.7; }
.mb-prose h2 { color: var(--text-primary); font-size: 24px; margin: 56px 0 12px; font-weight: 600; line-height: 1.25; }
.mb-prose h3 { color: var(--text-primary); font-size: 17px; margin: 28px 0 8px; font-weight: 600; }
.mb-prose p, .mb-prose ul { margin: 0 0 16px; }
.mb-prose code { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: .9em; color: var(--text-primary);
  background: var(--glass-raised); border: 1px solid var(--border-hair); border-radius: 4px; padding: 1px 5px; }
/* Code wraps rather than scrolling sideways. A sample is there to be read, and on a phone the
   audit line was 688px of content in a 319px box — nothing hidden, but nothing legible either
   without dragging it. pre-wrap keeps the newlines and the indentation; overflow-wrap lets a
   long path or quoted string break rather than push the box out. Where a block already fits,
   which is every one of them above about 720px, this changes nothing. overflow-x stays as the
   fallback for anything that still cannot fit, such as a very long unbroken token. */
.mb-prose pre { background: var(--glass-raised); border: 1px solid var(--border-hair); border-radius: 8px; padding: 14px;
  overflow-x: auto; font-size: 13px; line-height: 1.6; color: var(--text-primary);
  white-space: pre-wrap; overflow-wrap: anywhere; }
.mb-prose pre code { background: none; border: 0; padding: 0; }

/* ---------- Product pages: tables and the limits aside ---------- */
/* The prose column is 70ch; a table wants the full width it is given, and on a phone it wants
   to stop being a table. Same treatment as the privacy policy's: each row becomes a block and
   each value is labeled from the column heading. */
.mb-prose .tablewrap { overflow-x: auto; margin: 0 0 22px; }
.mb-prose table { width: 100%; border-collapse: collapse; min-width: 480px; }
.mb-prose th { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 9.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); font-weight: 500;
  text-align: left; padding: 0 16px 8px 0; border-bottom: 1px solid var(--border-hair); }
.mb-prose td { font-size: 14.5px; line-height: 1.5; color: var(--text-secondary);
  padding: 11px 16px 11px 0; border-bottom: 1px solid var(--border-hair); vertical-align: top; }
.mb-prose td:first-child { color: var(--text-primary); font-weight: 600; }
.mb-prose th:last-child, .mb-prose td:last-child { padding-right: 0; }

/* Not a disclaimer at the bottom of the page. The copy guide is explicit about this: what the
   product admits it cannot do is the strongest trust signal on the page, so it is placed where
   people read it and styled to be read rather than skipped. */
.mb-limits { margin: 56px 0 0; padding: 22px 24px 24px; border-radius: 12px;
  border: 1px solid var(--border-hair); border-left: 3px solid var(--border-strong);
  background: var(--glass); }
.mb-limits h2 { margin: 0 0 10px; font-size: 19px; }
.mb-limits p { margin: 0; color: var(--text-secondary); }

@media (max-width: 720px) {
  .mb-prose .tablewrap { overflow-x: visible; }
  .mb-prose table { min-width: 0; display: block; }
  .mb-prose thead { position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .mb-prose tbody, .mb-prose tr, .mb-prose td { display: block; }
  .mb-prose tr { border: 1px solid var(--border-hair); border-radius: 11px;
    padding: 4px 14px 6px; margin: 0 0 10px; }
  .mb-prose td { border-bottom: 0; padding: 7px 0; }
  .mb-prose td + td { border-top: 1px solid var(--border-hair); }
  .mb-prose td::before { content: attr(data-label); display: block; margin: 0 0 3px;
    font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 9.5px;
    letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
  .mb-prose td:empty { display: none; }
  .mb-limits { padding: 18px 18px 20px; }
}

/* ---------- Blog ---------- */
.mb-byline { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-muted); margin: 18px 0 0; }
.mb-pagehead .mb-eyebrow a { color: inherit; text-decoration: none;
  border-bottom: 1px solid var(--border-hair); padding-bottom: 1px; }
.mb-pagehead .mb-eyebrow a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* The index is a rail of topics beside a boxed list of posts. The rail ships hidden and
   assets/blog.js shows it — see the note there — so nothing is laid out for it until it is
   something a reader can use. */
.mb-bloglayout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px;
  align-items: start; }
.mb-bloglayout.is-railed { grid-template-columns: 190px minmax(0, 1fr); }
.mb-blogside[hidden] { display: none; }
.mb-blogside { position: sticky; top: 92px; }
.mb-filterhead { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-muted); margin: 0 0 14px; }
.mb-filters { list-style: none; margin: 0; padding: 0; }
.mb-filters button { display: flex; align-items: center; gap: 12px; width: 100%;
  background: none; border: 0; padding: 7px 0; cursor: pointer; font: inherit;
  font-size: 14.5px; color: var(--text-secondary); text-align: left; }
/* The rule in front of each topic is the whole indicator: it lengthens and takes the accent
   for the one in force. A filter has to be readable at a glance from across the page. */
.mb-filters button::before { content: ""; flex: none; width: 12px; height: 1px;
  background: var(--border-hair); transition: width .14s ease, background-color .14s ease; }
.mb-filters button:hover { color: var(--text-primary); }
.mb-filters button.is-on { color: var(--text-primary); }
.mb-filters button.is-on::before { width: 22px; background: var(--accent); }

.mb-posts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;
  gap: 16px; }
/* The illustration takes a little under half the row, which is the ratio that makes the list
   read as a shelf of covers rather than as a column of text with stamps beside it. Each post
   is its own box: the picture runs to its edges and the hairline between the two is the only
   seam inside it, and the gap above is what separates one post from the next. */
.mb-post { padding: 0; border: 1px solid var(--border-hair); border-radius: 14px;
  overflow: hidden;
  display: grid; grid-template-columns: 55% minmax(0, 1fr); align-items: stretch; }
.mb-post[hidden] { display: none; }
.mb-postthumb { display: block; height: 100%; border-right: 1px solid var(--border-hair); }
/* The ratio is the illustrations' own, declared so the row keeps its height before the image
   arrives; cover is what fills the row when the copy beside it runs longer than the picture. */
.mb-postthumb img { display: block; width: 100%; height: 100%; aspect-ratio: 1733 / 907;
  object-fit: cover; }
.mb-posttext { display: flex; flex-direction: column; justify-content: center;
  padding: 24px 28px; }
/* The copy is kept near the height of the picture beside it. The illustrations are close to
   2:1 and the row fills with whichever side is taller, so every line of dek the column does
   not need is a slice taken off the sides of the image to make up the difference. */
.mb-posttext .mb-postdek { display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; overflow: hidden; }
.mb-posttopic { color: var(--accent-strong); text-transform: uppercase;
  letter-spacing: .1em; font-size: 10.5px; }
.mb-postdate { font-family: var(--font-mono); font-size: 11px; letter-spacing: .02em;
  color: var(--text-muted); margin: 0 0 9px; }
.mb-post h2 { font-size: clamp(19px, 1.7vw, 22px); line-height: 1.16; margin: 0 0 9px;
  font-weight: 600; letter-spacing: -.012em; }
.mb-post h2 a { color: var(--text-primary); text-decoration: none; }
.mb-post h2 a:hover { color: var(--accent); }
.mb-post p { color: var(--text-secondary); font-size: 16px; line-height: 1.6;
  margin: 0; max-width: 68ch; }
.mb-post h2 a { border-bottom: 1px solid var(--border-hair); }
.mb-post h2 a:hover { border-bottom-color: var(--accent); }
.mb-readmore { margin-top: 10px !important; font-family: var(--font-mono); font-size: 11.5px;
  color: var(--text-muted); }
.mb-readmore a { color: var(--accent-strong); text-decoration: none;
  border-bottom: 1px solid var(--border-hair); }
.mb-readmore a:hover { border-bottom-color: var(--accent); }

/* A figure is wider than the 70ch prose column, because a diagram that has to be read at
   reading-column width is a diagram nobody reads. */
.mb-figure { margin: 38px 0; max-width: 100%; }
.mb-figure svg { display: block; width: 100%; height: auto; max-width: 100%;
  background: var(--glass); border: 1px solid var(--border-hair); border-radius: 12px; }
/* An illustration is cornered and framed like a diagram, because on the page they are the
   same thing: a picture the prose stops for. */
.mb-figure img { display: block; width: 100%; height: auto; max-width: 100%;
  border: 1px solid var(--border-hair); border-radius: 12px; }
.mb-figure figcaption { font-size: 13.5px; line-height: 1.5; color: var(--text-muted);
  margin-top: 11px; }
.mb-figure figcaption b { color: var(--text-secondary); font-weight: 600; }

.mb-quote { margin: 32px 0; padding: 2px 0 2px 20px; border-left: 2px solid var(--accent-strong); }
.mb-quote p { font-family: "Newsreader", Georgia, serif; font-style: italic;
  font-size: clamp(19px, 2.2vw, 24px); line-height: 1.32; color: var(--text-primary);
  margin: 0; }
.mb-quote cite { display: block; font-family: var(--font-mono); font-style: normal;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted); margin-top: 12px; }

.mb-srchead { font-size: 19px !important; }
.mb-sources { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: 9px; }
.mb-sources li { font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; }

@media (max-width: 720px) {
  /* One column, and the tile goes above its own line rather than shrinking to a stamp. The
     rail lies down across the top, where it is a line of topics rather than a sidebar. */
  .mb-bloglayout, .mb-bloglayout.is-railed { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .mb-blogside { position: static; }
  .mb-filters { display: flex; flex-wrap: wrap; gap: 0 18px; }
  .mb-filters button { width: auto; }
  .mb-post { grid-template-columns: minmax(0, 1fr); }
  .mb-postthumb { border-right: 0; border-bottom: 1px solid var(--border-hair); }
  .mb-posttext { padding: 20px 20px 22px; }
  .mb-figure { margin: 28px 0; }
  /* The diagrams are drawn on an 880-wide canvas and do not survive a 319px column, so they
     scroll inside their own box rather than shrinking the type to nothing. */
  .mb-figure { overflow-x: auto; }
  .mb-figure svg { min-width: 560px; }
}
.mb-prose a { color: var(--accent); }

/* ---------- #8 Glossary ---------- */
/* The glossary's A-Z bar. A letter with a term is a link and carries the accent; a letter
   with none is inert and muted, because gold marks something you can act on. The bar is
   written from the <dt> list rather than kept beside it — this page once held two copies of
   its own terms and they drifted four apart. */
.mb-azbar { display: flex; flex-wrap: wrap; gap: 2px 4px; margin: 0 0 28px; max-width: 900px; }
.mb-azbar a, .mb-azbar span { font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  font-size: 12px; line-height: 1; padding: 7px 8px; border-radius: 5px; min-width: 28px;
  text-align: center; }
.mb-azbar a { color: var(--accent-text); text-decoration: none; border: 1px solid var(--border-hair); }
.mb-azbar a:hover { border-color: var(--accent-dim); }
.mb-azbar a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mb-azbar span { color: var(--text-muted); border: 1px solid transparent; }

.mb-gloss { display: grid; grid-template-columns: 220px 1fr; border-top: 1px solid var(--border-hair); margin: 0; max-width: 900px; }
.mb-gloss dt, .mb-gloss dd { padding: 16px 0; border-bottom: 1px solid var(--border-hair); margin: 0; }
.mb-gloss dt { color: var(--text-primary); font-weight: 600; padding-right: 20px; scroll-margin-top: 24px; }
.mb-gloss dd { color: var(--text-secondary); line-height: 1.65; }
.mb-gloss dd a { color: var(--accent); }
@media (max-width: 700px) { .mb-gloss { grid-template-columns: minmax(0, 1fr); } .mb-gloss dt { border-bottom: 0; padding-bottom: 4px; } }

/* ---------- #8 Threat library ---------- */
.mb-cards { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; margin: 0 0 24px; }
.mb-card { display: block; background: var(--glass); border: 1px solid var(--border-hair); border-radius: 12px; padding: 22px; text-decoration: none; }
.mb-card:hover { border-color: var(--border-strong); }
.mb-card h3 { color: var(--text-primary); margin: 10px 0 8px; font-size: 18px; }
.mb-card p { color: var(--text-secondary); margin: 0; line-height: 1.55; font-size: 15px; }
@media (max-width: 760px) { .mb-cards { grid-template-columns: minmax(0, 1fr); } }
/* Each case opens "A developer…" and reads as a report of something that happened to someone.
   The composite disclosure was on the index only, which is the one place a reader arriving at
   a case from a search result never sees. */
.casetag { margin: 0 0 14px !important; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .06em; color: var(--text-muted); }
.mb-writeup { border-top: 1px solid var(--border-hair); margin-top: 56px; scroll-margin-top: 24px; }

/* ---------- #9 Changelog ---------- */
.mb-release { border-top: 1px solid var(--border-hair); padding: 28px 0; display: grid; grid-template-columns: 200px 1fr; gap: 20px; max-width: 900px; }
.mb-release__v { font-family: var(--font-mono, ui-monospace, Menlo, monospace); color: var(--text-primary); font-size: 15px; }
.mb-release__v small { display: block; color: var(--text-muted); font-size: 12px; margin-top: 4px; }
.mb-release ul { margin: 0; padding-left: 18px; color: var(--text-secondary); line-height: 1.7; }
@media (max-width: 700px) { .mb-release { grid-template-columns: minmax(0, 1fr); } }

/* ---------- #10 Pricing (template, not live) ---------- */
.mb-tiers { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-top: 36px; }
.mb-tier { background: var(--glass); border: 1px solid var(--border-hair); border-radius: 12px; padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.mb-tier--featured { border-color: var(--accent-dim); }
.mb-tier h3 { margin: 0; color: var(--text-primary); font-size: 18px; }
.mb-tier__price { font-size: 34px; color: var(--text-primary); font-weight: 600; }
.mb-tier__price small { font-size: 14px; color: var(--text-muted); font-weight: 400; }
.mb-tier ul { margin: 0; padding-left: 18px; color: var(--text-secondary); line-height: 1.7; flex: 1; }
@media (max-width: 860px) { .mb-tiers { grid-template-columns: minmax(0, 1fr); } }

/* ---------- #5 Score page ---------- */
.mb-score__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .mb-score__grid { grid-template-columns: minmax(0, 1fr); } }
.mb-textarea { width: 100%; box-sizing: border-box; min-height: 340px; resize: vertical; background: var(--glass-raised); color: var(--text-primary);
  border: 1px solid var(--border-strong); border-radius: 10px; padding: 14px; font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  font-size: 13px; line-height: 1.55; }
.mb-textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.mb-score__controls { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; align-items: center; }
.mb-privacy { color: var(--text-secondary); font-size: 14px; line-height: 1.55;
  background: var(--glass); border: 1px solid var(--border-hair); border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; }
.mb-privacy code { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: .88em; color: var(--text-primary); }
.mb-result { min-height: 340px; }
.mb-ring { display: flex; align-items: center; gap: 20px; margin-bottom: 18px; }
.mb-ring svg { width: 112px; height: 112px; flex: none; }
.mb-ring p { margin: 0; color: var(--text-secondary); line-height: 1.55; }
.mb-ring p strong { color: var(--text-primary); }
.mb-find { border-top: 1px solid var(--border-hair); padding: 14px 0; }
.mb-find h4 { color: var(--text-primary); margin: 8px 0 6px; font-size: 15.5px; }
.mb-find p { color: var(--text-secondary); margin: 0 0 6px; font-size: 14px; line-height: 1.55; }
.mb-find .mb-ev { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 12px; color: var(--text-muted); word-break: break-all; }
.mb-err { color: #EF6F5E; font-size: 14px; }
.mb-empty { color: var(--text-muted); font-size: 14px; line-height: 1.6; }
.mb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* specificity guards: keep labels and notes consistent inside cards */
.mb-ui p.mb-ui__label { font-size: 11px; color: var(--text-muted); margin: 0 0 14px; line-height: 1.4; }
.mb-ui p.mb-ui__note { font-size: 13px; color: var(--text-muted); margin: 14px 0 0; line-height: 1.5; }

/* The install-steps block that used to live here is gone. Nothing on the site used it any
   more, but its .mb-step rules still matched the four-step run below - a card background and
   a 28px round .mb-step__n that the newer rules never reset, so the number sat as a circle
   on top of its own heading. Two designs cannot share a class name; the survivor keeps it. */


/* ---------- "Where do I find this file?" on /score/ ---------- */
.mb-help{border:1px solid var(--border-hair); border-radius:8px; background:var(--glass);
  margin:0 0 12px}
.mb-help > summary{cursor:pointer; padding:10px 13px; font-size:13.5px;
  color:var(--text-primary); list-style:none}
.mb-help > summary::-webkit-details-marker{display:none}
.mb-help > summary::before{content:"+ "; color:var(--text-muted)}
.mb-help[open] > summary::before{content:"\2212 "}
.mb-help > summary:hover{color:var(--accent)}
.mb-help__body{padding:0 13px 13px; border-top:1px solid var(--border-hair)}
.mb-help__body p{font-size:13px; line-height:1.6; color:var(--text-secondary); margin:10px 0 0}
.mb-help__body code{font-size:12px; color:var(--text-primary)}
.mb-help__paths{line-height:2 !important}
.mb-help__note{color:var(--text-muted) !important}
.mb-help kbd{font-family:var(--font-mono,ui-monospace,monospace); font-size:11px;
  border:1px solid var(--border-strong); border-radius:4px; padding:1px 5px; margin:0 1px;
  color:var(--text-primary)}


/* A flex or grid child will not shrink past its own content minimum unless told to, which
   is what pushed the problem cards past the right edge of a phone. */
.mb-growth svg{min-width:0}
.mb-artifact{overflow-x:auto}

/* ---------- Phone tap targets ----------
   At the end of the file on purpose: these override base rules above them, and a later rule
   of equal specificity wins on source order whether or not it sits in a media query. The same
   trap cost the theme toggle a round earlier.

   Only the boxes grow. Type and icons keep their sizes, so none of this is visible until a
   thumb lands on it. */
@media (max-width: 760px) {
  /* The header links go away on a phone, as .navlinks does in site.css for every other page:
     wrapped onto their own rows they took 105px, and the header came to 226px before the
     page began. Every one of them is in the footer, which is why hiding them costs nothing.
     The theme toggle is a sibling rather than a child, so it stays. */
  .mb-nav { display: none; }
  .mb-top .mb-wrap > a { display: flex; align-items: center; min-height: 44px; }

  /* 11px of padding on a 15px line came to 42 — close enough to look right and not close
     enough to count. */
  .mb-btn { padding: 12px 18px; }

  /* The "Where do I find this file?" disclosure is a control too, and it was 41px. */
  .mb-help > summary { padding: 12px 13px; }

  /* The FAQ rows on the home page are the same kind of control. */
  .mb-faq summary { padding-top: 16px; padding-bottom: 16px; }
}


/* ===== Homepage sections added after the hero rework =================================
   Same .mb- prefix and the same tokens as everything above. Four blocks: the pillar strip
   that sits straight under the stage, the four-step walk-through, the engine/audience grid,
   and the closing pilot call. */

/* --- pillar strip, directly under the stage ----------------------------------------- */
.mb-pillars{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--border-hair); border-bottom:1px solid var(--border-hair)}
.mb-pillar{display:flex; gap:14px; padding:26px 28px 28px;
  border-left:1px solid var(--border-hair)}
.mb-pillar:first-child{border-left:0}
.mb-pillar svg{flex:none; width:22px; height:22px; margin-top:2px; color:var(--accent-deep)}
.mb-pillar h3{margin:0 0 6px; font-size:16.5px; font-weight:600; color:var(--text-primary)}
.mb-pillar p{margin:0; font-size:14.5px; line-height:1.55; color:var(--text-secondary)}

/* --- four steps ---------------------------------------------------------------------- */
/* One rule runs the whole width with the four nodes standing on it. Four separate rules with
   a gap between each read as four things; this section is one sequence, in order. */
.mb-steps{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; margin-top:48px;
  border-top:1px solid var(--border-hair)}
/* No rules between the columns: the run's own line already groups them, and verticals turned
   four steps into four boxes. The gutter is padding, and the last step gives its back so the
   text ends where the line does. */
.mb-step{padding:0 26px 0 0}
.mb-step:last-child{padding-right:0}
/* Zero height, so the node centres on the run's rule above it rather than on a line of its own. */
.mb-step__rule{position:relative; height:0; margin:0 0 30px}
.mb-step__rule::before{content:""; position:absolute; left:0; top:0; width:17px; height:17px;
  transform:translateY(-50%); border-radius:50%; background:var(--bg-canvas);
  border:1px solid var(--accent-deep)}
.mb-step__rule::after{content:""; position:absolute; left:6px; top:0; width:5px; height:5px;
  transform:translateY(-50%); border-radius:50%; background:var(--accent)}
.mb-step__n{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.15em;
  color:var(--accent-text); margin:0 0 10px}
.mb-step h3{margin:0 0 10px; font-size:18px; font-weight:600; color:var(--text-primary)}
.mb-step p{margin:0; font-size:15px; line-height:1.55; color:var(--text-secondary)}
/* Two classes, because `.mb-step p` above is (0,1,1) and would otherwise win on margin. */
.mb-step .mb-step__you{margin:22px 0 0; padding-top:14px;
  border-top:1px solid var(--border-hair);
  font-size:13.5px; color:var(--text-secondary)}

/* --- engine grid + audiences ---------------------------------------------------------- */
.mb-engine{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--border-hair); margin-top:40px}
.mb-cell{padding:26px 28px 30px; border-left:1px solid var(--border-hair);
  border-bottom:1px solid var(--border-hair)}
.mb-cell:nth-child(3n+1){border-left:0}
/* The capability names are the one green on the page: they separate from both the gold the
   links and section labels use and the white of every other heading, so the twelve read as a
   set rather than as more headings. */
.mb-cell h3{margin:0 0 8px; font-size:17px; font-weight:600; color:var(--capability)}
.mb-cell p{margin:0 0 14px; font-size:14.5px; line-height:1.5; color:var(--text-secondary)}
.mb-cell a,.mb-aud a{font-size:14px; color:var(--accent-text); text-decoration:none}
.mb-cell a:hover,.mb-aud a:hover{text-decoration:underline; text-underline-offset:3px}
.mb-auds{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; margin-top:22px}
.mb-aud{display:flex; flex-direction:column; background:var(--glass);
  border:1px solid var(--border-hair); border-radius:10px; padding:20px 20px 18px}
.mb-aud svg{flex:none; width:27.5px; height:27.5px; margin:0 0 14px; color:var(--accent-deep)}
.mb-aud h3{margin:0 0 8px; font-size:16px; font-weight:600; color:var(--text-primary)}
.mb-aud p{margin:0 0 26px; font-size:14px; line-height:1.5; color:var(--text-secondary)}
.mb-aud a{margin-top:auto}

/* --- closing pilot call ----------------------------------------------------------------
   The glow is the stage's horizon again, low and centred, so the page ends where it began. */
.mb-cta{position:relative; overflow:hidden; text-align:center; padding:104px 0 120px;
  border-top:1px solid var(--border-hair)}
.mb-cta::after{content:""; position:absolute; left:50%; bottom:-280px; width:900px; height:420px;
  transform:translateX(-50%); pointer-events:none; border-radius:50%;
  background:radial-gradient(closest-side, rgba(233,215,158,.16), rgba(201,181,126,.05) 55%, transparent)}
.mb-cta > *{position:relative}
/* `.mb-cta p` below is (0,1,1) and the eyebrow is a p, so without a second class here it was
   taking the lede's 17px and grey - the one section label on the page at a different size. */
.mb-cta .mb-eyebrow{margin-bottom:18px; font-size:10.5px; line-height:1.5;
  color:var(--accent-text)}
.mb-cta h2{margin:0 auto 18px; max-width:18ch; font-size:clamp(32px,4.6vw,56px); line-height:1.08;
  font-weight:600; letter-spacing:-.01em; color:var(--text-primary)}
.mb-cta p{margin:0 auto 32px; max-width:52ch; font-size:17px; line-height:1.6;
  color:var(--text-secondary)}
.mb-cta__btns{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

@media (max-width:900px){
  .mb-pillars,.mb-engine{grid-template-columns:minmax(0,1fr)}
  .mb-pillar,.mb-cell{border-left:0; border-top:1px solid var(--border-hair)}
  .mb-pillar:first-child,.mb-cell:first-child{border-top:0}
  /* Stacked, one shared rule cannot reach the lower steps, so each takes its own back. */
  .mb-steps{grid-template-columns:minmax(0,1fr); gap:34px; border-top:0}
  .mb-step{padding-right:0}
  .mb-step__rule{height:1px; background:var(--border-hair); margin:0 0 26px}
  .mb-auds{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){ .mb-auds{grid-template-columns:minmax(0,1fr)} }