/* ============================================================================
   Mail Post Company — public site theme (re-skin of the MyNotaryBook theme)
   Class names keep the mnb- prefix on purpose: fixes can be ported between the
   two sites line for line. Only the colours, logos and names changed.
   ----------------------------------------------------------------------------
   Mail Post palette (web-001, 2026-10-20):
     gold  #F2C043  (logo gold)      navy bar #102D44      ink / dark bg #141B28
     link  #1D4E89  (light mode)     red      #B5242E      muted slate #708090
   Mail Post additions live in the MAIL POST block at the end of this file.
   ========================================================================== */

/* ---- LIGHT (default) ------------------------------------------------------ */
:root {
  /* surfaces */
  --mnb-bg:            #FBFAF7;   /* warm paper */
  --mnb-surface:       #FFFFFF;   /* cards / tables */
  --mnb-surface-2:     #F4F2EC;   /* zebra rows, inset panels */
  --mnb-border:        #E7E2D8;

  /* text */
  --mnb-text:          #141B28;   /* app charcoal — shared by both themes */
  --mnb-muted:         #708090;   /* citations, verified stamp, footer */
  --mnb-strong:        #141B28;

  /* brand gold — light uses a darker gold so gold text/links stay legible with no shadow */
  --mnb-gold:          #F2C043;
  --mnb-gold-on:       #141B28;   /* text/icon placed ON a gold fill */
  --mnb-gold-text:     #F2C043;
  --mnb-gold-shadow:   none;

  /* links */
  /* LIGHT-MODE LINKS (2026-08-05). Gold on the light background measured
     1.45:1 -- effectively invisible, and far under the 4.5:1 body text needs.
     #B5242E is the flag red trialled on the hero: 5.64:1 here, and it reads as
     a link rather than as an alarm now that it is not set at 64px. Dark mode
     keeps gold, which is 11:1 on charcoal and is what makes links obvious
     there. The gold text-shadow goes with it -- it exists to lift gold off a
     dark surface and only muddies a dark colour on a light one. */
  --mnb-link:          #1D4E89;
  --mnb-link-shadow:   none;

  /* status — accepted / conditional / not-accepted (light) */
  --mnb-ok:            #1E7A52;
  --mnb-ok-bg:         #E4F1EA;
  --mnb-cond:          #C2691F;   /* orange, kept distinct from gold */
  --mnb-cond-bg:       #FBEBDD;
  --mnb-no:            #B23A3A;
  --mnb-no-bg:         #F6E3E3;

  /* elevation */
  --mnb-shadow:        0 1px 2px rgba(20, 27, 40,.05), 0 2px 6px rgba(20, 27, 40,.07);
  --mnb-shadow-header: 0 1px 0 var(--mnb-border);

  /* shape & motion */
  --mnb-radius:        10px;
  --mnb-radius-sm:     6px;
  --mnb-maxw:          1120px;

  /* ambient page texture (fine grain + center glow) — light defaults */
  --mnb-tex-blend:     multiply;   /* darken paper slightly */
  --mnb-vignette:      rgba(229, 229, 229, 0.8);   /* #e5e5e5 @ 80% edge */
  --mnb-vignette-0:    rgba(229, 229, 229, 0);      /* transparent center, same hue */
  /* coarser, stronger grain in light so it reads against the pale background.
     Single large tile shown at cover (NOT repeated) so there is no tile boundary
     to seam when the browser rescales at fractional zoom -- the prior repeat,
     even matched 1:1, reseamed on zoom because a repeated tile gets resampled to
     non-integer px. One cover tile can't seam. Same feTurbulence look. */
  --mnb-grain:         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='1400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.62'/%3E%3C/svg%3E");
  --mnb-grain-size:    230px;
  --mnb-ease:          180ms ease;

  /* typography — Feross (owned) for display; system stack for body + fallback */
  --mnb-font-display:  "Feross", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mnb-font-impact:   "Anton", "Impact", "Haettenschweiler", "Franklin Gothic Bold", "Arial Narrow", sans-serif;
}/* ---- DARK (matches the app) ---------------------------------------------- */
[data-theme="dark"] {
  --mnb-bg:            #081621;   /* app background */

  /* ambient texture — dark: light speckle that lightens, faint center glow */
  --mnb-tex-blend:     screen;
  --mnb-vignette:      rgba(0, 0, 0, 0.55);  /* corner vignette (dark) */
  --mnb-vignette-0:    rgba(0, 0, 0, 0);
  --mnb-grain:         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='1400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeColorMatrix type='matrix' values='0.45 0 0 0 0 0 0.72 0 0 0 0 0 1 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  --mnb-grain-size:    200px;

  --mnb-surface:       #0E2030;   /* one notch up — app is flat, tables need cards */
  --mnb-surface-2:     #142838;
  --mnb-border:        rgba(112,128,144,.30);   /* app slate @30% */

  --mnb-text:          #FFFFFF;
  --mnb-muted:         #708090;
  --mnb-strong:        #FFFFFF;

  --mnb-gold:          #F2C043;
  --mnb-gold-on:       #141B28;
  --mnb-gold-text:     #F2C043;
  --mnb-gold-shadow:   none;

  --mnb-link:          var(--mnb-gold-text);
  --mnb-link-shadow:   none;

  --mnb-ok:            #3DBA86;
  --mnb-ok-bg:         rgba(61,186,134,.14);
  --mnb-cond:          #E0883D;
  --mnb-cond-bg:       rgba(224,136,61,.14);
  --mnb-no:            #E06666;
  --mnb-no-bg:         rgba(224,102,102,.14);

  --mnb-shadow:        0 1px 2px rgba(0,0,0,.40), 0 2px 8px rgba(0,0,0,.35);
  --mnb-shadow-header: 0 0.5px 0 var(--mnb-border);
}/* ============================================================================
   FONTS — Feross (owned by Jordan), subset to display glyphs, hash-named.
   Files live at /assets/f/ behind the folder .htaccess gate. Paths are
   ABSOLUTE from the web root (public_html), so this works no matter where the
   CSS file itself sits. Regular 400 only; >400 is browser-synthesized bold.
   swap = show fallback instantly, swap in Feross when ready.
   ========================================================================== */
/* Feross @font-face moved to includes/header.php (2026-07-22): the header
   inlines it with a filemtime() version stamp so every font-file update
   busts caches automatically — no manual ?v= bump. Files renamed to the
   official /assets/f/Feross.woff2 + Feross.woff. */
@font-face {
  font-family: "Anton";
  src: url("/assets/f/anton-400.woff2") format("woff2"),
       url("/assets/f/anton-400.woff")  format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}@font-face {
  font-family: "Varela Round";
  src: url("/assets/f/varela-round-400.woff2") format("woff2"),
       url("/assets/f/varela-round-400.woff")  format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}/* ============================================================================
   BASE
   ========================================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }html {
  -webkit-text-size-adjust: 100%;
  background-color: var(--mnb-bg);
  transition: background-color var(--mnb-ease);
  /* Smooth in-page navigation. Applied on the root rather than per-link so it
     covers menu clicks, keyboard activation, and a page opened WITH a hash --
     a JS handler would only catch the clicks. */
  scroll-behavior: smooth;
}body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: transparent;
  color: var(--mnb-text);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: clip;   /* contain the off-screen mobile menu (clip won't break sticky) */
  transition: background-color var(--mnb-ease), color var(--mnb-ease);
}/* Ambient texture as a position:fixed layer — stays put on scroll, including iOS
   Safari (which ignores background-attachment:fixed). No mix-blend-mode (that was
   the Safari stacking bug); grain blends via background-blend-mode against its own
   opaque base color, so z-index:-1 keeps it safely behind all content. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--mnb-bg);
  background-image:
    radial-gradient(circle at 50% 50%, var(--mnb-vignette-0) min(324px, 28vw), var(--mnb-vignette) min(600px, 64vw)),
    var(--mnb-grain);
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  background-blend-mode: normal, var(--mnb-tex-blend);
}/* lock background scroll while the full-screen mobile menu is open */
html.mnb-nav-open { overflow: hidden; }a {
  color: var(--mnb-link);
  text-shadow: var(--mnb-link-shadow);
  text-decoration: none;
}a:hover { text-decoration: underline; }:focus-visible {
  outline: 2px solid var(--mnb-gold);
  outline-offset: 2px;
  border-radius: var(--mnb-radius-sm);
}/* ============================================================================
   HEADER + PRIMARY NAV  (logo left, nav, Login button, theme toggle)
   ========================================================================== */
.mnb-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 20px 0;
}/* frosted bar on a separate layer — keeps backdrop-filter OFF the header element
   itself, so the fixed mobile nav can still escape to the full viewport */
.mnb-header::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  margin: 0 auto;
  max-width: calc(var(--mnb-maxw) - 40px);
  z-index: -1;
  background-color: rgba(16, 45, 68, 0.95);   /* #102D44 navy bar @ 95% (reads as the solid colour, keeps the frost) */
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  backdrop-filter: blur(10px) saturate(1.05);
  border-radius: 0 0 var(--mnb-radius) var(--mnb-radius);
}.mnb-header__inner {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(var(--mnb-maxw) - 40px);
  margin: 0 auto;
  padding: 0 28px;
}[data-theme="dark"] .mnb-header::before { background-color: rgba(14, 32, 48, 0.8); }/* dark charcoal bar */
.mnb-header__brand { display: flex; align-items: center; margin-right: auto; }.mnb-header__brand img { height: 50px; width: auto; display: block; }.mnb-header__brand .mnb-logo--dark { display: none; }/* light mode shows logo-lt.png */
[data-theme="dark"] .mnb-header__brand .mnb-logo--light { display: none; }/* dark mode shows logo.png */
[data-theme="dark"] .mnb-header__brand .mnb-logo--dark { display: block; }.mnb-header__actions { display: flex; align-items: center; gap: 6px; }/* nav links */
.mnb-nav__list { list-style: none; display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; }.mnb-nav__list a {
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--mnb-radius-sm);
  font-family: var(--mnb-font-impact);
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
  /* Never break a label across two lines. "Notary Rules" wrapping is what threw
     the whole bar out of alignment: a two-line item is taller than its
     neighbours, so the flex row centres everything against it. */
  white-space: nowrap;
}/* THE SQUEEZE BAND. Between the full-width layout and the burger at 860px the
   seven labels no longer fit at 1.1rem. Two steps down rather than one so the
   change is never abrupt, and both stop above 860px where the burger takes
   over and the sizing stops mattering. Padding tightens with the type, since
   at these widths the gaps cost as much room as the letters. */
@media (max-width: 1100px) and (min-width: 861px) {
  .mnb-nav__list a { font-size: 1rem; padding: 8px 8px; letter-spacing: .02em; }
  .mnb-nav__list   { gap: 0; }
}@media (max-width: 980px) and (min-width: 861px) {
  .mnb-nav__list a { font-size: .9rem; padding: 8px 6px; letter-spacing: .01em; }
}/* dot separators between primary items (Web.psd) */
.mnb-nav__list li + li::before {
  content: "\00B7";
  align-self: center;
  margin: 0 2px;
  color: rgba(255, 255, 255, .5);
  font-weight: 700;
}.mnb-nav__list li.mnb-nav__login-li::before { content: none; }/* inactive nav links = the Texas-title color, even if the <ul> ever loses its
   class (keeps the global gold `a` rule from leaking in). Hover / active /
   Login rules below still override to gold. */
.mnb-nav a { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }.mnb-nav__list a:hover { color: var(--mnb-gold-text); background: none; text-decoration: none; text-shadow: none; }.mnb-nav__list a[aria-current="page"] {
  color: var(--mnb-gold-text);
  box-shadow: none;   /* comp shows active link as solid gold, no underline */
}/* Login = distinct pill button (specificity beats the generic link rule, no !important) */
.mnb-nav__list a.mnb-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0;
  width: 32px;
  height: 40px;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  color: #fff;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4));
  transition: color var(--mnb-ease), filter var(--mnb-ease);
}.mnb-nav__list a.mnb-login:hover { color: var(--mnb-gold-text); filter: none; }.mnb-login__text { display: none; }/* desktop = icon only; mobile shows the word */

/* theme toggle */
.mnb-toggle {
  display: inline-flex;
  align-items: center;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}/* sliding sun/moon switch */
.mnb-toggle__track {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: 58px;
  height: 28px;
  padding: 0 7px;
  border-radius: 999px;
  background: #e2e2e2;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .18);
  transition: background var(--mnb-ease);
}.mnb-toggle__ico { position: relative; z-index: 2; width: 14px; height: 14px; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .45)); }.mnb-toggle__sun  { color: #fff; }/* sits on the gold knob (light) */
.mnb-toggle__moon { color: rgba(0, 0, 0, .42); }/* dim on the track (light) */
.mnb-toggle__knob {
  position: absolute; top: 3px; left: 3px; z-index: 1;
  width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 50% 32%, #F8DC8E, var(--mnb-gold));
  box-shadow:
    0 1px 3px rgba(0, 0, 0, .35),                /* drop */
    inset 0 2px 2px rgba(255, 255, 255, .55),    /* top highlight */
    inset 0 -3px 5px rgba(0, 0, 0, .25);         /* bottom shade */
  overflow: hidden;
  transition: transform var(--mnb-ease), background var(--mnb-ease);
}.mnb-toggle__knob::before {
  content: "";
  position: absolute;
  top: 6%; left: 10%; right: 10%;
  height: 42%;
  border-radius: 50%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
  pointer-events: none;
}[data-theme="dark"] .mnb-toggle__track { background: #243047; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5); }[data-theme="dark"] .mnb-toggle__sun  { color: rgba(255, 255, 255, .4); }[data-theme="dark"] .mnb-toggle__moon { color: #fff; }[data-theme="dark"] .mnb-toggle__knob { transform: translateX(30px); background: radial-gradient(circle at 50% 32%, #B0BAC0, #6F7A80); }/* hamburger — hidden on desktop, shown when nav collapses */
.mnb-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
}/* header controls sit on the slate bar -> white in both themes */
.mnb-header .mnb-burger { color: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4)); }.mnb-header .mnb-burger:hover { color: var(--mnb-gold-text); filter: none; }/* menu close button — only inside the mobile full-screen overlay */
.mnb-nav__close { display: none; }/* ---- nav becomes a full-screen panel that slides in right-to-left (<= 860px) ---- */
@media (max-width: 860px) {
  .mnb-burger { display: inline-flex; }

  /* mobile: header icons white in light, gold in dark (no hover needed on touch) */
  .mnb-header .mnb-toggle,
  .mnb-header .mnb-burger { color: #fff; }
  [data-theme="dark"] .mnb-header .mnb-toggle,
  [data-theme="dark"] .mnb-header .mnb-burger { color: var(--mnb-gold-text); }

  /* mobile view: solid full-width header bar (no inset, no rounded corners, no translucency/blur) */
  .mnb-header::before { background-color: #102D44; -webkit-backdrop-filter: none; backdrop-filter: none; max-width: none; border-radius: 0; }
  [data-theme="dark"] .mnb-header::before { background-color: #0E2030; }
  .mnb-header__inner { max-width: none; padding: 0 18px; }

  .mnb-nav {
    position: fixed;
    inset: 0;                 /* whole page */
    z-index: 200;
    display: flex;
    flex-direction: column;
    padding: 72px 22px 32px;  /* clear space for the close button up top */
    background: #102D44;      /* match the header bar (light) */
    overflow-y: auto;
    transform: translateX(100%);                 /* parked off-screen to the right */
    transition: transform .28s ease, visibility 0s linear .28s;
    visibility: hidden;
  }
  [data-theme="dark"] .mnb-nav { background: #0E2030; }   /* match the dark header bar */
  .mnb-nav.is-open {
    transform: translateX(0);                    /* slides leftward into view */
    visibility: visible;
    transition: transform .28s ease;             /* no visibility delay when opening */
  }

  .mnb-nav__close {
    position: absolute;
    top: 16px;
    right: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    font-size: 1.6rem;
    line-height: 1;
    color: #fff;
    background: none;
    border: none;
    cursor: pointer;
  }
  .mnb-nav__close:hover { color: var(--mnb-gold-text); }

  .mnb-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  /* full-screen menu: white text on the slate/charcoal panel, uppercase, large, tight */
  .mnb-nav a, .mnb-nav__list a {
    color: #fff;
    text-shadow: none;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
    font-size: 3rem;
  }
  .mnb-nav__list li + li::before { content: none; }
  .mnb-nav__list a { width: 100%; min-height: 0; padding: 3px 14px; }
  .mnb-nav__list a[aria-current="page"] { color: var(--mnb-gold-text); }   /* highlight = gold text, no bar */
  /* Login becomes a plain text link (icon hidden) */
  .mnb-nav__list a.mnb-login {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 3px 14px;
    justify-content: flex-start;
    color: #fff;
    filter: none;
  }
  .mnb-login__icon { display: none; }
  .mnb-login__text { display: inline; }
}/* ============================================================================
   LAYOUT
   ========================================================================== */
.mnb-main { max-width: var(--mnb-maxw); margin: 0 auto; padding: 32px 20px 72px; }.mnb-page-title { font-family: var(--mnb-font-impact); font-size: 3rem; line-height: 1; font-weight: 400; letter-spacing: .01em; text-transform: uppercase; color: #2B3A55; position: relative; }.mnb-page-title--home { margin-bottom: 30px; }/* room for the reflection (home has no breadcrumb/sub below) */
.mnb-page-title::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: calc(100% - 0.1875em);   /* scales with font-size (was 9px @ 3rem) */
  width: 100%;
  transform: scaleY(-1);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.15), transparent 80%);
          mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.15), transparent 80%);
}[data-theme="dark"] .mnb-page-title { color: #e6e9eb; }[data-theme="dark"] .mnb-page-title::after {
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent 85%);
          mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent 85%);
}.mnb-page-sub   { color: var(--mnb-muted); font-size: .9rem; margin-top: 4px; }/* section card — one per content domain */
.mnb-section {
  background: rgba(255, 255, 255, 0.72);   /* tinted glass — light. lower alpha = more texture */
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
  backdrop-filter: blur(14px) saturate(1.08);   /* samples the fixed texture behind -> real frosted glass */
  border: 1px solid var(--mnb-border);
  border-radius: var(--mnb-radius);
  box-shadow: var(--mnb-shadow);
  padding: 22px 22px 18px;
  margin-top: 22px;
}[data-theme="dark"] .mnb-section {
  background: rgba(4, 12, 20, 0.55);   /* tinted glass — dark. lower alpha = more texture */
  border-color: rgba(112, 128, 144, 0.45);   /* stronger than the .30 default */
}/* dark: zebra rows at 50% so the card's frosted texture reads through */
[data-theme="dark"] .mnb-rules tbody tr:nth-child(even),
[data-theme="dark"] .mnb-kv dt:nth-of-type(even),
[data-theme="dark"] .mnb-kv dd:nth-of-type(even) { background: rgba(20, 40, 56, 0.5); }/* gold section heading — mirrors the app's gold h2; shadow keeps it legible on light */
.mnb-section__title {
  font-family: var(--mnb-font-impact);   /* Anton (Impact look) */
  font-size: 1.0825rem;       /* ~17.3px (+1px) */
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .01em;
  text-align: center;
  color: var(--mnb-gold-text);
  text-shadow: var(--mnb-gold-shadow);
  margin-bottom: 4px;
}/* card title lifted ABOVE the card (Web.psd): centered, large, charcoal */
.mnb-section__title--above {
  font-size: 2rem;
  line-height: 1;
  color: #2B3A55;
  text-shadow: none;
  /* BOTTOM MARGIN CARRIES THE REFLECTION (2026-09-08).
     ::after is absolutely positioned, so the mirrored copy contributes NO
     height -- it hangs about 0.84em below the title box with nothing reserving
     space for it. Until now that clearance came from the statute citation that
     used to sit here (margin: -2px 0 14px); removing the citation removed the
     reflection's room with it, and the title landed on the card below.
     22px, not 18, so every section title clears its card by the SAME distance.
     Adjacent margins collapse to the larger of the two, and what follows a title
     differs by section: most are followed by .mnb-section (margin 22px), but
     Acceptable IDs is followed by .mnb-tabs (margin-top 14px). At 18px here the
     ID section collapsed to 18 while every other section collapsed to 22 -- the
     4px discrepancy. Setting 22 here makes the title itself the deciding value
     in both cases, so the spacing no longer depends on what comes next.
     22px also still clears the reflection's ~15.5px overhang. NOTE: that overhang
     scales with em and this does not, so revisit if the title font-size changes. */
  margin: 50px 0 22px;
  position: relative;
}.mnb-section__title--above::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: calc(100% - 0.156em);   /* scales with font-size (was 5px @ 2rem) */
  width: 100%;
  transform: scaleY(-1);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.15), transparent 80%);
          mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.15), transparent 80%);
}[data-theme="dark"] .mnb-section__title--above { color: #d3dade; }[data-theme="dark"] .mnb-section__title--above::after {
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent 85%);
          mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent 85%);
}/* the bottom "Last verified" stamp sits at the card's bottom-right */
.mnb-section > .mnb-cite:last-child { justify-content: flex-end; margin-top: 16px; }/* citation + last-verified stamp */
.mnb-cite {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  font-size: .8rem;
  color: var(--mnb-muted);
  margin-bottom: 14px;
}.mnb-cite a { font-size: inherit; }.mnb-verified::before { content: "✓ "; color: var(--mnb-ok); }/* ============================================================================
   RULE TABLE  (left = label, right = status)  — ID types, journal gating, acts
   ========================================================================== */
.mnb-rules { width: 100%; border-collapse: collapse; }.mnb-rules th,
.mnb-rules td {
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid var(--mnb-border);
  font-size: .92rem;
  vertical-align: top;
}.mnb-rules tr:last-child td { border-bottom: none; }.mnb-rules tbody tr:nth-child(even) { background: #F3F3F3; }.mnb-rules td.mnb-rules__status { width: 8rem; white-space: nowrap; text-align: center; }.mnb-rules__note { display: block; font-family: var(--mnb-font-display); text-transform: uppercase; font-size: .85rem; line-height: 1.4; color: rgba(20, 27, 40, 0.85); text-transform: uppercase; text-align: center; margin-top: 16px; }[data-theme="dark"] .mnb-rules__note { color: rgba(255, 255, 255, 0.85); }/* status badges + glyphs */
.mnb-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.5;
}.is-ok   { color: var(--mnb-ok);   background: var(--mnb-ok-bg); }.is-cond { color: var(--mnb-cond); background: var(--mnb-cond-bg); }.is-no   { color: var(--mnb-no);   background: var(--mnb-no-bg); }.mnb-glyph { font-weight: 700; }.mnb-glyph.is-ok   { color: var(--mnb-ok); background: none; }.mnb-glyph.is-no   { color: var(--mnb-no); background: none; }.mnb-glyph.is-cond { color: var(--mnb-cond); background: none; }/* key/value list for journal-gating flags */
.mnb-kv { display: grid; grid-template-columns: 1fr 8rem; }.mnb-kv dt, .mnb-kv dd { display: flex; align-items: center; padding: 10px 8px; }.mnb-kv dt { color: var(--mnb-text); font-size: .92rem; }.mnb-kv dd { justify-content: center; text-align: center; }/* plain-text values (statute status, identity model, retention trigger, money)
   were inheriting the full body size — match them to the badge pills */
.mnb-kv dd span:not([class]) { font-size: .78rem; line-height: 1.45; }/* alternating row shading, like the ID table (stripes the 2nd & 4th pairs) */
.mnb-kv dt:nth-of-type(even),
.mnb-kv dd:nth-of-type(even) { background: #F3F3F3; }/* folder-style tab that sticks out the top of the ID card (Traditional shown; RON/IPEN structural, hidden now) */
.mnb-tabs { display: flex; justify-content: center; gap: 4px; margin: 14px 0 -1px; position: relative; z-index: 1; }/* if only the Traditional tab is rendered (RON/IPEN hidden), hide the whole strip */
.mnb-tabs:not(:has(.mnb-tab:not([hidden]) ~ .mnb-tab:not([hidden]))) { display: none; }.mnb-tabs + .mnb-section { margin-top: 0; }/* tab sits flush on the card top */
.mnb-cite + .mnb-section { margin-top: 0; }/* the source citation sits flush on the card */
.mnb-section__title--above + .mnb-section { margin-top: 34px; }/* no citation -> match the citation cards' gap + clear the reflection */
.mnb-tab {
  padding: 14px 20px 9px;
  font-family: var(--mnb-font-display); text-transform: uppercase;
  font-size: .9rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: rgba(20, 27, 40, 0.85);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
  backdrop-filter: blur(14px) saturate(1.08);
  border: 1px solid var(--mnb-border);
  border-bottom: none;
  border-radius: var(--mnb-radius) var(--mnb-radius) 0 0;
  box-shadow: 0 -2px 6px rgba(20, 27, 40, 0.05);
  cursor: pointer;
}.mnb-tab[aria-selected="true"] { color: rgba(20, 27, 40, 0.85); }.mnb-tab[hidden] { display: none; }.mnb-tab__short { display: none; }/* desktop shows the full label */
[data-theme="dark"] .mnb-tab {
  color: var(--mnb-gold-text);
  background: rgba(4, 12, 20, 0.55);
  border-color: rgba(112, 128, 144, 0.45);
}[data-theme="dark"] .mnb-tab[aria-selected="true"] { color: var(--mnb-gold-text); }/* inline statute excerpt */
.mnb-excerpt {
  border-left: 3px solid var(--mnb-gold);
  background: var(--mnb-surface-2);
  border-radius: 0 var(--mnb-radius-sm) var(--mnb-radius-sm) 0;
  padding: 12px 14px;
  margin-top: 12px;
  font-size: .9rem;
}.mnb-excerpt__head { font-size: .78rem; color: var(--mnb-muted); margin-bottom: 6px; }/* download links (full statute / SoS handbook) */
.mnb-doc-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--mnb-border);
  border-radius: var(--mnb-radius-sm);
  background: var(--mnb-surface);
  color: var(--mnb-text);
  text-shadow: none;
  margin: 6px 8px 0 0;
}.mnb-doc-link:hover { border-color: var(--mnb-gold); text-decoration: none; }/* app CTA — end of page only, never mid-content */
.mnb-cta {
  margin-top: 28px;
  padding: 20px 22px;
  border: 1px solid var(--mnb-border);
  border-radius: var(--mnb-radius);
  background: var(--mnb-surface);
}.mnb-cta__btn {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 18px;
  border-radius: var(--mnb-radius-sm);
  background: var(--mnb-gold);
  color: var(--mnb-gold-on);
  text-shadow: none;
  font-weight: 600;
}.mnb-cta__btn:hover { text-decoration: none; filter: brightness(.96); }/* ============================================================================
   FOOTER + disclaimer
   ========================================================================== */
.mnb-footer {
  max-width: var(--mnb-maxw);
  margin: 0 auto;
  padding: 28px 20px 48px;
  border-top: 1px solid var(--mnb-border);
  color: var(--mnb-muted);
  font-size: .82rem;
}.mnb-disclaimer { line-height: 1.6; text-align: center; }[data-theme="dark"] .mnb-disclaimer { color: #fff; }.mnb-footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin: 0 0 18px; }.mnb-footer__nav a { color: var(--mnb-text); text-decoration: none; font-size: .85rem; }[data-theme="dark"] .mnb-footer__nav a { color: #fff; }.mnb-footer__nav a:hover { color: var(--mnb-muted); }   /* charcoal at rest, slate on hover */[data-theme="dark"] .mnb-footer__nav a:hover { color: var(--mnb-gold-text); }/* Size, weight and tracking live here so light and dark are identical -- only
   the COLOUR differs between themes. When they were set inside the dark rules
   the line changed size as well as colour on every toggle, which read as a
   glitch rather than a theme change. */
.mnb-footer__copy { text-align: center; margin: 16px 0 0; font-size: .65rem; font-weight: 600; letter-spacing: .01em; }
/* Gold in dark mode. It inherits the footer's --mnb-muted otherwise, which in
   dark resolves to a grey that all but disappears against the charcoal. Both
   theme paths, so the toggle and the OS preference agree. */
/* The colour was never the problem -- this is the same #F2C043 used elsewhere.
   Every other gold element on the site is Anton: condensed, heavy, plenty of
   ink. This line is a system font at .78rem weight 400, the thinnest text on
   the page, and a saturated yellow needs stroke to read as saturated. Weight
   and the weight gives it that; the hex is untouched. NOTE the size is now
   .65rem, SMALLER than the .78rem it started at, so the weight is doing all
   the work. If it reads pale again, raise the weight to 700 rather than the
   size.
   -webkit-font-smoothing is deliberately NOT set: on dark backgrounds it
   thins light text further, which is the opposite of what is wanted here. */
[data-theme="dark"] .mnb-footer__copy { color: var(--mnb-gold-text); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .mnb-footer__copy { color: var(--mnb-gold-text); }
}.mnb-footer__legal { text-align: center; margin: 16px 0 0; font-size: .82rem; }.mnb-footer__legal a { color: var(--mnb-text); text-decoration: none; }[data-theme="dark"] .mnb-footer__legal a { color: #fff; }.mnb-footer__legal a:hover { color: var(--mnb-muted); }[data-theme="dark"] .mnb-footer__legal a:hover { color: var(--mnb-gold-text); }/* Contact page details */
.mnb-contact { margin: 4px 0 18px; }.mnb-contact dt { font-family: var(--mnb-font-display); text-transform: uppercase; text-transform: uppercase; font-size: .8rem; letter-spacing: .03em; color: var(--mnb-muted); margin: 16px 0 2px; }.mnb-contact dt:first-child { margin-top: 0; }.mnb-contact dd { margin: 0; font-size: 1.25rem; }.mnb-contact dd a { color: var(--mnb-text); text-decoration: none; }.mnb-contact dd a:hover { color: var(--mnb-muted); }[data-theme="dark"] .mnb-contact dd a:hover { color: var(--mnb-gold-text); }/* Contact form */
.mnb-form { margin: 4px 0 16px; }.mnb-field { margin: 0 0 14px; }.mnb-field label { display: block; font-family: var(--mnb-font-display); text-transform: uppercase; text-transform: uppercase; font-size: .8rem; letter-spacing: .03em; color: var(--mnb-muted); margin: 0 0 5px; }.mnb-field input, .mnb-field select, .mnb-field textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; font: inherit; color: var(--mnb-text); background: var(--mnb-surface-2); border: 1px solid var(--mnb-border); border-radius: 8px; }.mnb-field textarea { resize: vertical; min-height: 110px; }.mnb-field input:focus, .mnb-field select:focus, .mnb-field textarea:focus { outline: none; border-color: var(--mnb-gold); }.mnb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }.mnb-form__ok { color: #1C7A3A; font-weight: 600; }[data-theme="dark"] .mnb-form__ok { color: #7ED957; }.mnb-form__err { color: #C0393D; font-weight: 600; }[data-theme="dark"] .mnb-form__err { color: #EE6065; }.mnb-contact__alt { margin-top: 6px; }.mnb-contact__alt a { color: var(--mnb-text); }.mnb-contact__alt a:hover { color: var(--mnb-gold-text); }/* ===== Contact page: two columns, Anton type, statute-style fields (theme-aware) ===== */
.mnb-contact-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 22px; align-items: start; margin: 4px 0 8px; }@media (max-width: 760px) { .mnb-contact-grid { grid-template-columns: 1fr; } }/* Anton for every bit of text in the contact cards; color follows the theme */
.mnb-contact-grid, .mnb-contact-grid * { font-family: var(--mnb-font-impact); }.mnb-contact-grid .mnb-section { margin-top: 22px; }.mnb-contact-grid .mnb-form { margin: 0; }.mnb-contact-lead { text-transform: uppercase; letter-spacing: .02em; font-size: 1.05rem; color: var(--mnb-text); margin: 0 0 16px; }.mnb-contact-info h3 { text-transform: uppercase; letter-spacing: .02em; font-size: 1.15rem; color: var(--mnb-text); margin: 0 0 14px; }.mnb-contact-info { text-align: center; }.mnb-contact-info p.mnb-contact-info__label { font-family: var(--mnb-font-impact); text-transform: uppercase; letter-spacing: .02em; font-size: .92rem; color: var(--mnb-text); margin: 22px 0 4px; line-height: 1.3; }.mnb-contact-info p.mnb-contact-info__label:first-child { margin-top: 0; }.mnb-contact-info p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.9; color: var(--mnb-text); margin: 0; }.mnb-contact-info a { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--mnb-text); text-decoration: none; font-weight: 700; }.mnb-contact-info .mnb-reveal-btn { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: inherit; color: var(--mnb-text); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; font-weight: 700; }.mnb-contact-info .mnb-reveal-btn:hover { color: var(--mnb-text); }.mnb-contact-info a:hover { color: var(--mnb-text); }/* labels */
.mnb-contact-grid .mnb-field label { font-family: var(--mnb-font-impact); color: var(--mnb-text); text-transform: uppercase; font-size: .92rem; letter-spacing: .02em; }/* fields — light: statute blue; matched heights for input & select */
.mnb-contact-grid .mnb-field input,
.mnb-contact-grid .mnb-field select,
.mnb-contact-grid .mnb-field textarea {
  background: #D6E3EA;
  border: 2px solid #9AA7AE;
  box-shadow: none;
  color: var(--mnb-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  border-radius: 10px;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
}.mnb-contact-grid .mnb-field input,
.mnb-contact-grid .mnb-field select { height: 50px; padding: 0 14px; line-height: normal; }.mnb-contact-grid .mnb-field textarea { padding: 12px 14px; min-height: 140px; line-height: 1.3; resize: vertical; overflow-x: hidden; overflow-y: auto; }.mnb-contact-grid .mnb-field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23171E22' stroke-width='2'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}.mnb-contact-grid .mnb-field input::placeholder,
.mnb-contact-grid .mnb-field textarea::placeholder { color: var(--mnb-muted); }.mnb-contact-grid .mnb-field input:focus,
.mnb-contact-grid .mnb-field select:focus,
.mnb-contact-grid .mnb-field textarea:focus { outline: none; border-color: var(--mnb-gold); }/* fields — dark: match the dark statute treatment */
[data-theme="dark"] .mnb-contact-grid .mnb-field input,
[data-theme="dark"] .mnb-contact-grid .mnb-field select,
[data-theme="dark"] .mnb-contact-grid .mnb-field textarea {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: var(--mnb-border);
  box-shadow: none;
}[data-theme="dark"] .mnb-contact-grid .mnb-field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23FFFFFF' stroke-width='2'/></svg>");
}/* invalid state */
.mnb-contact-grid .mnb-field.is-invalid input,
.mnb-contact-grid .mnb-field.is-invalid select,
.mnb-contact-grid .mnb-field.is-invalid textarea { border-color: #C0393D; }.mnb-field__hint { display: none; color: #C0393D; font-size: .8rem; margin-top: 4px; text-transform: uppercase; letter-spacing: .02em; }[data-theme="dark"] .mnb-field__hint { color: #EE6065; }.mnb-contact-grid .mnb-field.is-invalid .mnb-field__hint { display: block; }/* button row: reset left of submit, both right-aligned */
.mnb-form__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }.mnb-form__actions .mnb-btn { font-family: var(--mnb-font-impact); text-transform: uppercase; letter-spacing: .03em; }.mnb-btn--reset { background: transparent; }/* ===== App Features page: alternating text / screenshot rows ===== */
.mnb-features { display: flex; flex-direction: column; gap: 60px; margin: 10px 0 8px; }.mnb-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }.mnb-feature--rev .mnb-feature__copy { order: 2; }.mnb-feature--rev .mnb-feature__media { order: 1; }.mnb-feature__title { font-family: var(--mnb-font-impact); font-weight: 400; font-size: 1.7rem; line-height: 1.05; text-transform: uppercase; letter-spacing: .01em; color: var(--mnb-text); display: flex; align-items: center; gap: 12px; margin: 0 0 18px; }.mnb-feature__icon { display: inline-flex; flex: 0 0 auto; width: 34px; height: 34px; color: var(--mnb-muted); }.mnb-feature__icon svg { width: 100%; height: 100%; }.mnb-feature__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }.mnb-feature__list li { position: relative; padding-left: 28px; line-height: 1.45; color: var(--mnb-text); }.mnb-feature__list li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--mnb-muted); font-weight: 700; }[data-theme="dark"] .mnb-feature__icon,
[data-theme="dark"] .mnb-feature__list li::before { color: var(--mnb-gold-text); }.mnb-feature__media { display: flex; justify-content: center; }.mnb-feature__shot { position: relative; width: 100%; max-width: 290px; aspect-ratio: 760 / 1648; border-radius: 30px; overflow: hidden; box-shadow: 0 18px 44px rgba(0, 0, 0, .25); background: var(--mnb-surface-2); }.mnb-feature__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }.mnb-feature__shot--ph { display: flex; align-items: center; justify-content: center; border: 2px dashed var(--mnb-border); box-shadow: none; }.mnb-feature__shot--ph span { font-family: var(--mnb-font-impact); text-transform: uppercase; letter-spacing: .05em; font-size: .9rem; color: var(--mnb-muted); }@media (max-width: 760px) {
  .mnb-features { gap: 40px; }
  .mnb-feature { grid-template-columns: 1fr; gap: 22px; }
  .mnb-feature--rev .mnb-feature__copy,
  .mnb-feature--rev .mnb-feature__media { order: 0; }   /* mobile: always text first, then screenshot */
  .mnb-feature__title { font-size: 1.4rem; }
  .mnb-feature__shot { max-width: 240px; }
}.mnb-appband { background: rgba(16, 45, 68, 0.8); -webkit-backdrop-filter: blur(12px) saturate(1.06); backdrop-filter: blur(12px) saturate(1.06); overflow: hidden; }[data-theme="dark"] .mnb-appband { background: rgba(4, 12, 20, 0.55); }.mnb-appband__inner { max-width: var(--mnb-maxw); margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 44px; }.mnb-appband__copy { flex: 1 1 auto; padding: 44px 0; }
/* SLIDES STACKED IN ONE GRID CELL. All four occupy the same area, so the band
   takes the height of the TALLEST and never jumps as the copy changes -- which
   is what absolute positioning or display:none would both cause. Only opacity
   and pointer-events change, so there is no reflow at all during a transition. */
.mnb-appband__slides { display: grid; }
.mnb-appband__slides > .mnb-appband__slide { grid-area: 1 / 1; }
.mnb-appband__slide {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .6s ease, transform .6s ease, visibility 0s linear .6s;
}
.mnb-appband__slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .6s ease, transform .6s ease, visibility 0s;
}/* Anton, matching the title and button beneath it -- the band is now all one
   face. Tracking at 0 by choice: at this size the condensed caps hold together
   without it. */
.mnb-appband__kicker { font-family: var(--mnb-font-impact); text-transform: uppercase; letter-spacing: 0; font-size: 1.3125rem; color: #000; margin: 0 0 8px; }
@media (max-width: 760px) {
  .mnb-appband__kicker { font-size: 1.617rem; }   /* +40% on 1.155 */
}[data-theme="dark"] .mnb-appband__kicker { color: var(--mnb-gold-text); }.mnb-appband__title { font-family: var(--mnb-font-impact); font-weight: 400; font-size: 2.1rem; line-height: 1.05; margin: 0 0 12px; color: #fff; }.mnb-appband__sub { color: rgba(255, 255, 255, .72); margin: 0 0 22px; max-width: 44ch; line-height: 1.5; }.mnb-appband__btn { display: inline-block; background: var(--mnb-gold); color: var(--mnb-gold-on); font-family: var(--mnb-font-impact); font-size: 1.05rem; letter-spacing: .03em; text-transform: uppercase; padding: 13px 26px; border-radius: 12px; text-decoration: none; box-shadow: 0 5px 14px rgba(0, 0, 0, .28); transition: box-shadow .15s ease, background .15s ease, color .15s ease; }/* Stars on the trial button. Deliberately NOT .mnb-star -- that class carries
   gold plus the inner-glow filter, which on a gold button would be invisible.
   These simply inherit the button's own text colour, so they stay legible in
   both the resting and hover states. Slightly smaller and raised, because a
   full-size star out-weighs the caps it punctuates. */
.mnb-appband__star {
  font-size: .82em;
  /* Raised to the optical middle of the caps. U+2605 is drawn centred on its
     own em box, which sits lower than the middle of Anton's cap height, so it
     reads as dropped without this. */
  vertical-align: .22em;
  /* Black, no shadow. On the gold button this carries 13.9:1 on its own, so
     nothing has to prop it up -- the shadow only existed because white sat at
     1.5:1 here. On hover the button flips to black, so the stars inherit that
     state's gold text instead. */
  color: #000;
}
.mnb-appband__btn:hover { background: #000; color: var(--mnb-gold-text); text-decoration: none; box-shadow: none; }
.mnb-appband__btn:hover .mnb-appband__star { color: inherit; }   /* gold on the black hover, or the stars disappear */[data-theme="dark"] .mnb-appband__btn:hover { background: #fff; color: #000; }.mnb-appband__btn--stacked { display: none; align-self: center; }/* 10% larger with the TOP held still. The container is align-self: flex-end,
   so it grows upward by default -- pinning the top instead means absorbing the
   whole 36px of extra height at the bottom. -36 - 36 = -72px, which lets the
   phone hang further past the band and clips the lower tenth, leaving the top
   90% visible. */
.mnb-appband__shot { flex: 0 0 auto; align-self: flex-end; position: relative; height: 396px; aspect-ratio: 760 / 1648; margin-bottom: -72px; }.mnb-appband__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border-radius: 20px; box-shadow: 0 18px 44px rgba(0, 0, 0, .45); opacity: 0; transition: opacity .7s ease; }.mnb-appband__img.is-active { opacity: 1; }@media (max-width: 760px) {
  .mnb-appband__inner { flex-direction: column; gap: 22px; text-align: center; padding: 36px 20px; }
  .mnb-appband__copy { padding: 0; }
  .mnb-appband__sub { max-width: none; }
  .mnb-appband__shot { align-self: center; height: 300px; margin-bottom: 0; }
  .mnb-appband__btn--inline { display: none; }
  .mnb-appband__btn--stacked { display: inline-block; }
}/* Contained variant for the in-content (top) placement */
.mnb-appband--inset { border-radius: var(--mnb-radius); margin: 4px 0 30px; }.mnb-appband--inset .mnb-appband__inner { padding: 30px; }/* Inset variant: 300 -> 330px. align-self moves from center to flex-end so the
   growth cannot push the top up, and the extra 30px is taken off the bottom. */
.mnb-appband--inset .mnb-appband__shot { align-self: flex-end; height: 330px; margin-bottom: -30px; }
/* CORNER RADIUS, sized from the RENDERED width rather than a round number.
   At 396px tall the image is ~183px wide, and Apple's device corner is roughly
   a ninth of the short edge -- about 20px here. The old 30px was 16% of the
   width, closer to an iPod than an iPhone. The inset band renders the phone at
   152px, where the same 20px would read rounder, so it takes 17px. */
.mnb-appband--inset .mnb-appband__img { border-radius: 17px; }@media (max-width: 760px) {
  .mnb-appband--inset { display: none; }   /* top band hidden on mobile; bottom band still carries the CTA */
  .mnb-appband--inset.mnb-appband--home { display: block; }   /* ...except the homepage keeps its top band */

  /* The inset variant needs its own mobile reset. Its desktop rule sets
     align-self: flex-end to pin the phone's TOP while it grew 10% -- but once
     the band stacks into a column, align-self controls the HORIZONTAL axis, so
     flex-end threw the phone against the right edge and over the CTA. The
     generic .mnb-appband__shot mobile rule could not correct it: (0,1,0) loses
     to the variant's (0,2,0), so the override has to match that weight. */
  .mnb-appband--inset .mnb-appband__shot {
    align-self: center;
    height: 300px;
    margin-bottom: 0;
  }
}/* ============================================================================
   HOMEPAGE / STATE-PAGE PIECES
   ========================================================================== */
/* breadcrumb trail */
.mnb-breadcrumb {
  /* Above the page title in hit-testing. .mnb-page-title is position:relative
     (it needs that for its mirror ::after) with no z-index, and a positioned
     element wins clicks over a non-positioned sibling. With line-height:1 the
     title's BOX runs ~10px below its visible glyphs -- Anton sits high in the
     em box -- so it was covering the top half of these links and swallowing
     the clicks. The reflection itself was never the problem; it already has
     pointer-events: none. */
  position: relative;
  z-index: 1;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-family: var(--mnb-font-display); text-transform: uppercase;   /* Feross, per Web.psd */
  font-size: 1.2rem;
  line-height: 1;
  text-transform: uppercase;
  color: #97a2a9; margin: 5px 0 14px;
}.mnb-breadcrumb a { color: var(--mnb-text); text-shadow: none; position: relative; }/* light: inactive links charcoal */
/* INVISIBLE hit area, 4px above and below. An overlay pseudo-element rather
   than padding: padding grows the box and pushes the line taller, whereas this
   is absolutely positioned so it occupies no layout space at all. It belongs
   to the <a>, so clicking it activates the link. */
.mnb-breadcrumb a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -4px; bottom: -4px;
}.mnb-breadcrumb a:hover { color: var(--mnb-muted); text-decoration: none; }/* light: hover slate (not gold) */
[data-theme="dark"] .mnb-breadcrumb a { color: #97a2a9; }/* dark: keep slate */
[data-theme="dark"] .mnb-breadcrumb a:hover { color: var(--mnb-gold-text); }/* dark: keep gold hover */
.mnb-breadcrumb [aria-current="page"] { color: var(--mnb-text); }[data-theme="dark"] .mnb-breadcrumb [aria-current="page"] { color: var(--mnb-gold-text); }.mnb-breadcrumb__sep { color: #97a2a9; }/* ---------------------------------------------------------------------------
   STATE MAP ICONS. One sprite at /assets/state-maps.svg, 51 <symbol>s keyed
   s-XX on the two-letter code, referenced with <use>. A sprite rather than
   inline paths: the set is 66 KB, which would be added to the directory AND to
   every state page if inlined, but as one cached file it is fetched once.

   The paths carry no fill of their own, so fill: currentColor makes each icon
   take the colour of the text beside it -- charcoal in light, white in dark,
   gold on a hover row -- with no per-theme rules needed.

   Sized in em so the icon tracks whatever type it sits next to.
   --------------------------------------------------------------------------- */
.mnb-state-map {
  width: 1.25em;
  height: 1.25em;
  /* Gold in both themes now, with a drop shadow in light -- gold measures
     ~1.5:1 on the light background, so the shadow is what gives the outline an
     edge to read against rather than being decoration. Explicit fill rather
     than currentColor: the icon should NOT follow the link text through its
     hover colour change; the map is a fixed marker, the name is the thing that
     responds. */
  fill: var(--mnb-gold);
  /* Drop shadow translated from Jordan's Photoshop panel: Normal, black, 100%
     opacity, Angle 124 deg, Distance 1px, Spread 0, Size 1px.
     Photoshop's Angle is where the LIGHT comes from, so the shadow falls at
     124+180 = 304 deg, i.e. right and down. Blur is ZERO on purpose: that
     makes the shadow a solid offset copy of the shape rather than a soft
     halo, which is the crisp result. These are SVG paths, so drop-shadow is
     the tool; the matrix tick is a text glyph and uses text-shadow for the
     same effect. */
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 1));
  vertical-align: -.22em;    /* optical centring against the cap height */
  margin-right: .45em;
  flex: none;                /* never squashed inside a flex row */
  opacity: .85;              /* a shade back from the text, so it reads as an
                                icon rather than competing with the name */
}a:hover > .mnb-state-map,
.mnb-state-grid a:hover .mnb-state-map { opacity: 1; }[data-theme="dark"] .mnb-state-map { fill: var(--mnb-gold); }@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .mnb-state-map { fill: var(--mnb-gold); }
}/* jurisdiction directory grid */
.mnb-state-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: column;
  grid-template-rows: repeat(13, auto);   /* 51 items / 4 cols -> 13 rows */
  gap: 2px 12px;
}@media (max-width: 760px) {
  .mnb-state-grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(17, auto); }
}@media (max-width: 520px) {
  .mnb-state-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(26, auto); }
}@media (max-width: 360px) {
  .mnb-state-grid { grid-template-columns: 1fr; grid-template-rows: auto; grid-auto-flow: row; }
}.mnb-state-grid a {
  /* padding-left trimmed 10px -> 4px now that a map icon leads the row. The
     10px was balanced for text starting at the edge; with the icon in front,
     the same value plus the icon's own width pushed each jurisdiction visibly
     inward. Vertical padding and the right side are unchanged, so the hover
     target keeps its height. */
  display: block; padding: 8px 10px 8px 4px; border-radius: var(--mnb-radius-sm);
  color: var(--mnb-text); text-shadow: none; font-size: .95rem;
}/* Slate on hover in light mode, not gold (Jordan 2026-08-05). Gold reads at
   1.5:1 on the light background -- it looked like the link was fading out
   rather than responding. Dark keeps gold, where it has 11:1 and is the
   established affordance. The top menu is deliberately NOT included: it sits
   on its own slate bar, where gold is the only thing that shows. */
.mnb-state-grid a:hover { color: var(--mnb-muted); text-decoration: none; }[data-theme="dark"] .mnb-state-grid a:hover { color: var(--mnb-gold-text); }@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .mnb-state-grid a:hover { color: var(--mnb-gold-text); }
}/* give an intro paragraph room above a following grid/list/table */
.mnb-section > .mnb-page-sub { margin-bottom: 12px; }/* ID-section intro paragraphs (general_id_text_*) */
/* statute callout box — gold border + leading warning triangle.
   light: odd-row gray bg, charcoal text; dark: 20% black bg, white text */
.mnb-statute {
  background: #D6E3EA;
  border: 2px solid #ffffff;
  border-radius: 10px;
  box-shadow: 0 0px 10px rgba(20, 27, 40, 0.2);   /* larger than the cards, soft drop */
  color: rgba(20, 27, 40, 0.85);   /* statute text at 85% */
  font-family: var(--mnb-font-display); text-transform: uppercase;
  font-size: 1.1rem;          /* ~13pt */
  line-height: 1;
  text-transform: uppercase;
  padding: 30px;
  margin: 8px 0 27px;
}[data-theme="dark"] .mnb-statute { background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.85); border-color: var(--mnb-border); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); }.mnb-statute::before { content: none; }/* warning glyph removed — the "i" badge marks the statute now */

/* ID group sub-headings (State / Federal / Government employment / Foreign / Other) */
.mnb-id-grouptitle {
  font-family: var(--mnb-font-impact);   /* Anton (Impact look) */
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: .01em;
  text-align: center;
  color: #2B3A55;
  padding-top: 20px;
  margin: 22px 0 6px;
}[data-theme="dark"] .mnb-id-grouptitle { color: #d3dade; }.mnb-id-grouptitle:first-of-type { margin-top: 8px; }.mnb-section__title--keepcase { text-transform: none; }/* each ID group as its own inner card within the main ID card */
.mnb-id-group {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--mnb-border);
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(20, 27, 40, 0.06);
  padding: 6px 18px 20px;
  margin: 20px 0;
}.mnb-id-group:first-of-type { margin-top: 6px; }.mnb-id-group .mnb-id-grouptitle { padding-top: 8px; margin-top: 6px; }[data-theme="dark"] .mnb-id-group {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--mnb-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}.mnb-id-group > .mnb-cite:last-child { justify-content: flex-end; margin-top: 14px; }/* certificate body block — preserves statutory line breaks */
.mnb-cert-body { font-size: .92rem; line-height: 1.6; white-space: pre-wrap; }.mnb-cert-body code, .mnb-rules__note code { font-size: .9em; }/* disabled / coming-soon download link */
.mnb-doc-link--disabled { color: var(--mnb-muted); cursor: default; opacity: .75; }.mnb-doc-link--disabled:hover { border-color: var(--mnb-border); text-decoration: none; }/* ============================================================================
   RESPONSIVE  (mobile-first requirement — notaries check rules in the field)
   ----------------------------------------------------------------------------
   Tables keep their two columns and just tighten (per owner). Touch targets
   on the toggle, tabs, and download links stay >= 44px on small screens.
   ========================================================================== */

/* tablet */
@media (max-width: 768px) {
  :root { --mnb-maxw: 100%; }
  .mnb-page-title { font-size: 1.7rem; }
  .mnb-breadcrumb { font-size: 1rem; }
  .mnb-chip .mnb-chip__label { font-size: 12pt; }
  .mnb-section .mnb-statute { font-size: .99rem; }   /* -10% */
  .mnb-statute { padding: 30px 15px 15px; }   /* mobile: keep top 30, trim sides/bottom to 15 */
}/* phone */
@media (max-width: 600px) {
  .mnb-header        { padding: 12px 0; }
  .mnb-header__inner { padding: 0 14px 0 22px; }
  .mnb-header__brand img { height: 35px; }

  .mnb-main          { padding: 24px 14px 56px; }
  .mnb-page-title    { font-size: 1.4rem; }
  .mnb-breadcrumb    { font-size: .85rem; }
  .mnb-chip .mnb-chip__label { font-size: 10pt; }
  .mnb-tab__full { display: none; }
  .mnb-tab__short { display: inline; }

  .mnb-section       { padding: 16px 24px 12px; border-radius: 8px; margin-top: 16px; }
  .mnb-section__title,
  .mnb-id-grouptitle { font-size: 1.0425rem; }   /* ~16.7px (+1px) */
  .mnb-section__title--above { font-size: 1.15rem; }

  /* tables: same two columns, tighter cells + type */
  .mnb-rules th,
  .mnb-rules td      { padding: 9px 6px; font-size: .88rem; }
  .mnb-rules__note   { font-size: .8rem; }
  .mnb-badge         { font-size: .74rem; padding: 2px 8px; }

  /* tabs scroll sideways once RON/IPEN switch on, instead of wrapping/cramping */
  .mnb-tabs          { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .mnb-tab           { white-space: nowrap; min-height: 44px; }

  .mnb-cite          { font-size: .78rem; }
  .mnb-kv            { grid-template-columns: 1fr 6.5rem; }
  .mnb-kv dt, .mnb-kv dd { padding: 9px 6px; }
  .mnb-kv dt         { font-size: .9rem; }
  .mnb-kv dd         { justify-content: flex-end; text-align: right; }
  .mnb-rules td.mnb-rules__status { width: 1%; text-align: right; }

  /* finger-sized, full-width download links */
  .mnb-doc-link      { display: flex; width: 100%; min-height: 44px; margin: 8px 0 0; }
  .mnb-cta__btn      { display: block; text-align: center; min-height: 44px; line-height: 24px; }
}/* ============================================================================
   ACCESSIBILITY — reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  /* Smooth scrolling is motion too: readers who ask for less must get an
     instant jump, not a glide. */
  html { scroll-behavior: auto; }
}/* ============================================================================
   REPORT AN ERROR — floating toggle, mode banner, per-row flags, modal, toast
   ========================================================================== */

/* floating toggle, bottom-right */
.mnb-report-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 150;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-family: var(--mnb-font-impact);
  letter-spacing: .03em;
  font-size: .95rem;
  text-transform: uppercase;
  color: var(--mnb-text);
  background: var(--mnb-surface);
  border: 1px solid var(--mnb-border);
  border-radius: 999px;
  box-shadow: var(--mnb-shadow);
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease;
}/* PRESSED state -- unconditional. This is what report mode looks like and it
   must apply on every device. */
.mnb-report-fab[aria-pressed="true"] { background: var(--mnb-gold); color: #000; border-color: var(--mnb-gold); }/* HOVER state -- pointer devices ONLY.
   TOUCH DOUBLE-TAP FIX (2026-08-04): with a bare :hover rule, a touch browser
   treats the first tap as "move the pointer here" (applying the hover styles)
   and only the SECOND tap as the click. That is the reported behaviour: the
   report button needing two taps on mobile. Gating hover behind (hover: hover)
   means touch devices never enter a hover state, so the first tap is the
   click. Pointer devices are unaffected. */
@media (hover: hover) and (pointer: fine) {
  .mnb-report-fab:hover { background: var(--mnb-gold); color: #000; border-color: var(--mnb-gold); }
}/* The button reads as one text line -- "> REPORT AN ERROR" -- all Anton, all
   one colour. The chevron comes from CSS rather than the markup (same rule the
   medallion glyphs follow), so the label string stays pure words.
   WHY 2em: Anton draws punctuation far smaller than its caps, so a chevron at
   the label's own size reads as a stray tick. Doubling matches it optically to
   the capitals beside it.
   line-height:0 keeps the enlarged glyph out of the line box, so the pill's
   height and padding are unchanged -- growing the font would otherwise reflow
   the button. Colour and family are inherited: nothing is set here. */
.mnb-report-fab[aria-pressed="true"] .mnb-report-fab__txt { display: none; }.mnb-report-fab__txt-on { display: none; }.mnb-report-fab[aria-pressed="true"] .mnb-report-fab__txt-on { display: inline; }/* hide the report button while the mobile menu overlay is open */
.mnb-nav-open .mnb-report-fab { display: none; }/* mode banner, top of content */
.mnb-report-banner {
  position: sticky;
  top: 64px;                 /* clears the sticky header */
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 9px 40px 9px 14px;
  font-size: .92rem;
  text-align: center;
  color: var(--mnb-text);
  background: var(--mnb-surface-2);
  border: 1px dashed var(--mnb-gold);
  border-radius: 8px;
}.mnb-report-banner__exit {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .9rem; line-height: 1;
  color: var(--mnb-muted);
  background: none; border: none; border-radius: 50%;
  cursor: pointer;
}.mnb-report-banner__exit:hover { color: var(--mnb-text); background: rgba(0,0,0,.08); }/* per-row flag — hidden until report mode is on */
.mnb-flag {
  display: none;
  position: relative;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  margin-left: 8px;
  vertical-align: middle;
  font-size: .72rem; line-height: 1;
  color: #fff;
  background: radial-gradient(circle at 50% 32%, #EE6065, #E5484D);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, .30),
    inset 0 2px 2px rgba(255, 255, 255, .55),
    inset 0 -3px 5px rgba(0, 0, 0, .25);
}.mnb-flag::before {
  content: "";
  position: absolute;
  top: 6%; left: 10%; right: 10%;
  height: 42%;
  border-radius: 50%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
  pointer-events: none;
}.mnb-flag:hover { filter: brightness(1.08); }body.mnb-reporting .mnb-flag { display: inline-flex; }/* the demo flag inside the banner is always visible */
.mnb-flag--demo { display: inline-flex; width: 20px; height: 20px; cursor: default; margin: 0 2px; }/* modal */
.mnb-modal-backdrop {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,.5);
}.mnb-modal {
  width: 100%; max-width: 440px;
  background: var(--mnb-surface);
  color: var(--mnb-text);
  border: 1px solid var(--mnb-border);
  border-radius: var(--mnb-radius);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  padding: 20px 20px 18px;
}[data-theme="dark"] .mnb-modal { background: #06111A; }[data-theme="dark"] .mnb-modal__title { color: var(--mnb-gold-text); }[data-theme="dark"] .mnb-modal__ctx { color: #fff; }.mnb-modal__title { font-family: var(--mnb-font-display); text-transform: uppercase; font-size: 1.15rem; margin: 0 0 4px; text-transform: uppercase; text-align: center; }.mnb-modal__ctx {
  font-size: .9rem; color: var(--mnb-muted);
  margin: 0 0 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--mnb-border);
}.mnb-modal__ctx strong { color: var(--mnb-text); }.mnb-modal__reasons { display: flex; flex-direction: column; gap: 2px; margin: 0 0 16px; }.mnb-reason {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--mnb-border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}.mnb-reason + .mnb-reason { margin-top: 6px; }.mnb-reason:hover { border-color: var(--mnb-gold); }.mnb-reason input { margin-top: 3px; accent-color: var(--mnb-gold); }.mnb-reason.is-sel { border-color: var(--mnb-gold); background: rgba(223,168,0,.14); }.mnb-modal__actions { display: flex; justify-content: flex-end; gap: 10px; }.mnb-btn {
  padding: 9px 18px; font-size: .92rem; font-family: var(--mnb-font-display); text-transform: uppercase;
  border-radius: 8px; cursor: pointer; border: 1px solid var(--mnb-border);
  background: var(--mnb-surface-2); color: var(--mnb-text);
}.mnb-btn--primary { background: var(--mnb-gold); border-color: var(--mnb-gold); color: var(--mnb-gold-on); }.mnb-btn--primary:disabled { opacity: .5; cursor: not-allowed; }/* toast */
.mnb-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 500;
  padding: 11px 18px; font-size: .92rem;
  color: #fff; background: #1f7a3d;
  border-radius: 999px; box-shadow: var(--mnb-shadow);
}.mnb-toast--err { background: #9a2b2b; }@media (max-width: 600px) {
  .mnb-report-fab { right: 12px; bottom: 12px; padding: 9px 14px; font-size: .8075rem; }
  .mnb-report-banner { top: 56px; }
}/* ============================================================================
   CHIP GRID + STATUS MEDALLIONS  (state-page redesign — Web.psd)
   ========================================================================== */
.mnb-chipgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 27px 32px;
  margin: 25px 0 6px 15px;   /* left inset so the straddling circles respect the card's inner padding */
}.mnb-chip {
  position: relative;
  display: flex;
  align-items: center;
  padding: 14px 16px 14px 30px;   /* left room for the half-overlapping medallion */
  min-height: 56px;
  background: #F3F3F3;
  border: 2px solid #ffffff;                          /* match statute card */
  border-radius: 12px;
  box-shadow: 0 0px 10px rgba(20, 27, 40, 0.2);       /* match statute card */
}[data-theme="dark"] .mnb-chip { background: rgba(255, 255, 255, 0.045); border-color: var(--mnb-border); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); }.mnb-chip__label { font-family: "Arial Rounded MT Bold", "Varela Round", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14pt; line-height: 1.2; color: rgba(20, 27, 40, 0.85); text-transform: uppercase; }[data-theme="dark"] .mnb-chip__label { color: rgba(255, 255, 255, 0.85); }.mnb-chip__note  { display: block; font-size: .75rem; color: var(--mnb-muted); margin-top: 2px; text-transform: none; }/* asterisk marker on IDs that carry a footnote, + the footnotes under each group */
.mnb-chip__star { margin-left: 2px; font-size: .85em; font-weight: 700; color: rgba(20, 27, 40, 0.55); vertical-align: baseline; position: relative; top: -0.3em; line-height: 0; }[data-theme="dark"] .mnb-chip__star { color: rgba(255, 255, 255, 0.55); }.mnb-id-footnotes { margin: 26px 0 6px; }.mnb-id-footnote { margin: 6px 0 0; font-family: var(--mnb-font-display); text-transform: uppercase; font-size: .85rem; line-height: 1.4; color: rgba(20, 27, 40, 0.85); text-transform: uppercase; /* LEFT, not centred (2026-09-08). Centring worked when the marker was a bare
     asterisk, but a numbered disc gives every line a hard left edge -- and
     centring then staggers those discs across the block, so the eye cannot run
     down a column to find note 6. Left-aligned, the discs stack and the text
     starts at one x. A numbered list wants a left edge; that is most of what
     makes it a list. */
  text-align: left;   /* Hanging indent: the disc sits in the gutter and wrapped lines align to the
     text, not under the marker. Without this a two-line note has its second
     line starting further left than its first. */
  padding-left: 22px;
  text-indent: -22px;
}[data-theme="dark"] .mnb-id-footnote { color: rgba(255, 255, 255, 0.85); }.mnb-id-footnote__star { margin-right: 5px; font-weight: 400; color: rgba(20, 27, 40, 0.85); }[data-theme="dark"] .mnb-id-footnote__star { color: rgba(255, 255, 255, 0.85); }.mnb-id-footnote__cite { display: block; margin-top: 3px; font-size: .78rem; letter-spacing: .02em; color: var(--mnb-muted); }/* Credible-witness paths: chip (one ID-cell wide) + descriptor in the adjacent column */
.mnb-cw-paths { margin: 22px 0 6px 15px; display: flex; flex-direction: column; gap: 16px; }.mnb-cw-path { display: grid; grid-template-columns: calc((100% - 32px) / 2) 1fr; column-gap: 32px; align-items: center; }.mnb-chip--auto { margin: 0; }.mnb-cw-path__desc { font-family: var(--mnb-font-display); text-transform: uppercase; text-transform: uppercase; font-size: .9rem; line-height: 1.35; color: rgba(20, 27, 40, 0.85); }[data-theme="dark"] .mnb-cw-path__desc { color: rgba(255, 255, 255, 0.85); }@media (max-width: 600px) {
  .mnb-cw-path { grid-template-columns: 1fr; row-gap: 8px; align-items: start; }
  .mnb-cw-path__desc { padding-left: 4px; }
}/* Journal entries: two-column Required / Prohibited lists */
.mnb-jchipcols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; margin: 12px 0 6px; align-items: stretch; }/* Each column (Required / Prohibited) sits in its own card so the two groups
   read as separate sets. Matches the .mnb-id-group frame. */
.mnb-jchipcol {
  min-width: 0;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--mnb-border);
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(20, 27, 40, 0.06);
  padding: 14px 18px 20px;
}[data-theme="dark"] .mnb-jchipcol {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--mnb-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}.mnb-jchipcol__title { font-family: var(--mnb-font-impact); text-transform: uppercase; font-size: 1.05rem; letter-spacing: .03em; color: var(--mnb-text); margin: 0 0 14px; text-align: center; }.mnb-jchipcol__none { font-family: var(--mnb-font-display); text-transform: uppercase; text-transform: uppercase; font-size: .85rem; color: rgba(20, 27, 40, 0.45); margin: 0; text-align: center; }[data-theme="dark"] .mnb-jchipcol__none { color: rgba(255, 255, 255, 0.45); }/* single-column chip grid variant (used inside Required/Prohibited columns) */
.mnb-chipgrid--single { grid-template-columns: 1fr; gap: 18px 0; margin-left: 8px; }@media (max-width: 600px) {
  .mnb-jchipcols { grid-template-columns: 1fr; gap: 28px; }
}.mnb-chip .mnb-flag { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); margin-left: 0; }/* medallion straddles the LEFT edge, vertically centered (Web.psd) */
.mnb-chip .mnb-med { position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); z-index: 2; }/* ---- Recording Restrictions strip (journal card) -------------------------
   Reuses the chip shell so the medallion straddles the left edge as usual;
   the line text is authored prose, so it runs sentence-case at reading size
   rather than the uppercase chip-label treatment. */
.mnb-jrestrict { margin: 26px 0 6px; }.mnb-chip--restrict { min-height: 0; align-items: flex-start; padding: 14px 16px 14px 34px; }.mnb-jrestrict__text {
  font-family: var(--mnb-font-display); text-transform: uppercase;
  /* Feross is a display face and the site sets it in caps everywhere else --
     this rule was the one prose block that missed it, so the Partial Recording
     Rules sentence rendered mixed-case under an all-caps heading and an
     all-caps citation. */
  text-transform: uppercase;
  font-size: .95rem;
  /* 1, not 1.45, to match .mnb-statute exactly. Both are Feross uppercase prose
     at 85% charcoal, so they should share a rhythm -- at 1.45 this block read
     noticeably airier than the statute card right next to it. Feross caps have
     no descenders to clear, which is why the statute can sit at 1 without
     crowding, and so can this. */
  line-height: 1;
  color: rgba(20, 27, 40, 0.85);
}[data-theme="dark"] .mnb-jrestrict__text { color: rgba(255, 255, 255, 0.85); }.mnb-jrestrict__cite {
  display: block;
  margin-top: 6px;
  font-family: var(--mnb-font-display); text-transform: uppercase;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: .78rem;
  color: var(--mnb-muted);
}/* circular status medallion */
.mnb-med {
  flex: none;
  position: relative;
  overflow: hidden;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid #fff;                 /* white ring (Web.psd) */
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.35rem; font-weight: 700; line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, .30),          /* outer drop — lifts off the chip */
    inset 0 2px 2px rgba(255, 255, 255, .55), /* top inner highlight — bevel */
    inset 0 -3px 5px rgba(0, 0, 0, .25);   /* bottom inner shade — bevel */
}/* glossy highlight cap over the top — the "glass/marble" sheen */
.mnb-med::before {
  content: "";
  position: absolute;
  top: 6%; left: 10%; right: 10%;
  height: 42%;
  border-radius: 50%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
  pointer-events: none;
}.mnb-med--ok { background: radial-gradient(circle at 50% 32%, #B8D228, #9EB500); --mnb-med-glyph: "\2713"; }.mnb-med--opt { background: radial-gradient(circle at 50% 32%, #F6D06A, #C99A1E); --mnb-med-glyph: "\2713"; }.mnb-med--no { background: radial-gradient(circle at 50% 32%, #EE6065, #E5484D); --mnb-med-glyph: "X"; font-family: var(--mnb-font-display); text-transform: uppercase; font-size: 1.35rem; font-weight: 400; -webkit-text-stroke: 0.6px currentColor; }/* caution medallion — limits, not permissions (Partial Recording Rules) */
.mnb-med--warn { background: radial-gradient(circle at 50% 32%, #FFC53D, #F0A500); --mnb-med-glyph: "!"; font-family: var(--mnb-font-display); text-transform: uppercase; font-size: 1.35rem; font-weight: 400; -webkit-text-stroke: 0.6px currentColor; }/* The glyph itself lives in CSS (single source of truth) — emitters output an
   empty <span class="mnb-med mnb-med--*">. ::before is the glossy sheen, so
   the glyph rides ::after, centered over the badge. */
.mnb-med::after {
  content: var(--mnb-med-glyph, "");
  position: relative; z-index: 1;
}/* ---- Multi-document paths selector (AK / CT / NY) ------------------------ */
.mnb-paths { margin: 20px 0 6px; }.mnb-paths-banner {
  margin: 14px 0 20px; padding: 14px 18px;
  border-radius: 12px;
  background: #FCEEEE; border: 2px solid #E5484D;
  font-family: var(--mnb-font-display); text-transform: uppercase; text-transform: uppercase;
  font-size: .95rem; line-height: 1.4; color: #8A1F22; text-align: center;
}[data-theme="dark"] .mnb-paths-banner { background: rgba(229,72,77,.14); color: #F5B5B7; }.mnb-paths__cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px;
  align-items: stretch;
}.mnb-paths__col {
  min-width: 0;
  display: flex; flex-direction: column;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--mnb-border);
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(20, 27, 40, 0.06);
  padding: 16px 18px 18px;
}.mnb-paths__col .mnb-paths__list { flex: 1 1 auto; }.mnb-paths__col[hidden] { display: none; }[data-theme="dark"] .mnb-paths__col {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.14);
}.mnb-paths__label {
  display: block; font-family: var(--mnb-font-impact); text-transform: uppercase;
  font-size: 1.05rem; letter-spacing: .03em; color: var(--mnb-text); margin: 0 0 8px;
  text-align: center;
}.mnb-paths__hint {
  font-family: var(--mnb-font-display); text-transform: uppercase; text-transform: uppercase; font-size: .88rem; line-height: 1.4;
  color: var(--mnb-muted); margin: 0 0 10px;
}.mnb-paths__list {
  width: 100%; padding: 6px; font-size: .98rem;
  border-radius: 10px; border: 2px solid var(--mnb-border, #C9CDD2);
  background: var(--mnb-card, #fff); color: var(--mnb-text);
  font-family: var(--mnb-font-body, inherit);
}.mnb-paths__list option { padding: 8px 10px; border-radius: 6px; }.mnb-paths__list option:checked {
  background: var(--mnb-gold, #C99A1E); color: #000;
}[data-theme="dark"] .mnb-paths__list { background: #152939; border-color: rgba(255,255,255,.25); }@media (max-width: 600px) {
  .mnb-paths__cols { grid-template-columns: 1fr; gap: 22px; }
  /* Mobile: the selectors become single-line dropdowns styled to match the
     contact form's Subject field (light blue, custom chevron). The size attr
     is overridden to a fixed height so it reads as a dropdown, not a listbox. */
  .mnb-paths__list {
    height: 50px;
    padding: 0 40px 0 14px;
    background: #D6E3EA;
    border: 2px solid #9AA7AE;
    border-radius: 10px;
    color: var(--mnb-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23171E22' stroke-width='2'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
  }
  .mnb-paths__list:focus { outline: none; border-color: var(--mnb-gold); }
  [data-theme="dark"] .mnb-paths__list {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--mnb-border);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23FFFFFF' stroke-width='2'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
  }
}.mnb-paths__summary {
  margin: 4px 0 20px; font-family: var(--mnb-font-display); text-transform: uppercase;
  font-size: .98rem; line-height: 1.15; color: var(--mnb-text);
  text-transform: uppercase;
}/* The confirm message reuses the .mnb-chip shell (see setMsg) so it is
   visually identical to the CW / Personally-Known chips. Only the top margin
   and the hidden guard are specific to it; frame, border, min-height, offset
   medallion and label all inherit from .mnb-chip. */
.mnb-paths__confirm { margin-top: 14px; margin-left: 17px; }/* The confirm keeps the chip frame but its label reverts to Feross at the
   original confirm size (the other chip labels use the rounded body stack).
   Colour stays the chip-label colour. */
.mnb-paths__confirm .mnb-chip__label {
  font-family: var(--mnb-font-display); text-transform: uppercase; text-transform: uppercase; font-size: .85rem; line-height: 1.15; color: #000;
}[data-theme="dark"] .mnb-paths__confirm .mnb-chip__label { color: #fff; }.mnb-paths__confirm[hidden] { display: none; }.mnb-paths__modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20, 27, 40,.55); padding: 20px;
}.mnb-paths__modal[hidden] { display: none; }.mnb-paths__modal-card {
  background: var(--mnb-card, #fff); color: var(--mnb-text);
  border-radius: 14px; max-width: 380px; width: 100%;
  padding: 22px 22px 18px; box-shadow: 0 12px 40px rgba(0,0,0,.3);
  border: 1px solid rgba(255, 255, 255, 0.15);
}[data-theme="dark"] .mnb-paths__modal-card { background: #0E2030; }.mnb-paths__modal-title {
  margin: 0 0 6px; font-family: var(--mnb-font-impact); text-transform: uppercase;
  font-size: 1.1rem; letter-spacing: .02em; color: var(--mnb-text); text-align: center;
}.mnb-paths__modal-sub {
  margin: 0 0 16px; font-family: var(--mnb-font-display); text-transform: uppercase; font-size: .82rem;
  line-height: 1.3; color: rgba(0, 0, 0, 0.9); text-transform: uppercase; text-align: center;
}[data-theme="dark"] .mnb-paths__modal-sub { color: rgba(255, 255, 255, 0.8); }.mnb-paths__modal-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin: 0 0 20px; }.mnb-paths__modal-box {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  font-family: var(--mnb-font-display); text-transform: uppercase; font-size: .95rem; text-transform: uppercase;
  color: var(--mnb-text);
}.mnb-paths__modal-box input { width: 18px; height: 18px; cursor: pointer; }.mnb-paths__modal-actions { display: flex; gap: 10px; justify-content: flex-end; }.mnb-paths__modal-cancel, .mnb-paths__modal-submit {
  padding: 9px 16px; border-radius: 8px; cursor: pointer;
  font-family: var(--mnb-font-impact); font-size: .82rem; text-transform: uppercase; letter-spacing: .03em;
}.mnb-paths__modal-cancel { background: transparent; border: 1.5px solid var(--mnb-border, #C9CDD2); color: #000; }.mnb-paths__modal-submit { background: var(--mnb-gold, #C99A1E); border: 1.5px solid var(--mnb-gold, #C99A1E); color: #000; }[data-theme="dark"] .mnb-paths__modal-cancel { border-color: rgba(255,255,255,.25); color: #fff; }.mnb-paths__verify {
  margin: 8px 0 0; padding: 9px 13px; border-radius: 9px;
  font-family: var(--mnb-font-display); text-transform: uppercase; font-size: .78rem; line-height: 1.15;
  text-transform: uppercase;
  background: rgba(229,72,77,.14); color: #8A1F22;
}[data-theme="dark"] .mnb-paths__verify { color: #F5B5B7; }.mnb-paths__prose {
  margin: 10px 0 0; font-family: var(--mnb-font-display); text-transform: uppercase; font-size: .88rem;
  line-height: 1.15; color: var(--mnb-muted);
  text-transform: uppercase;
}[data-theme="dark"] .mnb-med { border-color: rgba(255, 255, 255, .8); }/* YES / NO gold pill medallion (for boolean rows on the kv cards) */
.mnb-pill-med {
  flex: none;
  min-width: 38px; height: 30px; padding: 0 10px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 32%, #F5CB55, #E5B232);
  color: #5a4600; font-size: .72rem; font-weight: 800; letter-spacing: .03em;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}/* info "i" badge tabbed onto the top edge of a statute box */
.mnb-statute-wrap { position: relative; margin-top: 28px; }.mnb-statute-wrap .mnb-statute { margin-top: 0; }.mnb-statute-cite { font-family: var(--mnb-font-display); text-transform: uppercase; text-transform: uppercase; letter-spacing: .02em; font-size: .85rem; color: var(--mnb-muted); text-align: center; margin: 6px 0 22px; }.mnb-statute-cite--head { margin: -2px 0 14px; }/* sits under the card title, above the card */
.mnb-statute-cite a { color: inherit; text-decoration: underline; }.mnb-statute-cite a:hover { color: var(--mnb-text); }[data-theme="dark"] .mnb-statute-cite a:hover { color: var(--mnb-gold-text); }.mnb-info-badge {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  overflow: hidden;
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 32%, #808F98, #586870);
  color: #fff; font-family: Georgia, "Times New Roman", serif;
  font-style: italic; font-weight: 700; font-size: 1.05rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  box-shadow:
    0 2px 5px rgba(0, 0, 0, .3),
    inset 0 2px 2px rgba(255, 255, 255, .55),
    inset 0 -3px 5px rgba(0, 0, 0, .25);
  border: 2px solid var(--mnb-surface);
}.mnb-info-badge::before {
  content: "";
  position: absolute;
  top: 6%; left: 10%; right: 10%;
  height: 42%;
  border-radius: 50%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
  pointer-events: none;
}[data-theme="dark"] .mnb-info-badge { border-color: rgba(255, 255, 255, .8); }@media (max-width: 600px) {
  .mnb-chipgrid { grid-template-columns: 1fr; gap: 10px; margin-left: 10px; }   /* nudge box+circle unit ~5px left (was 15px) */
  .mnb-chip { padding: 14px 11px 14px 25px; }   /* -5px each side for more text room (was 16/30) */
}/* =========================================================================
   AUTO THEME (Jordan, 2026-07-22): with no explicit choice, the device's
   color scheme governs on load. Every [data-theme="dark"] rule above is
   mirrored here scoped to :root:not([data-theme]) inside a
   prefers-color-scheme media query - generated mechanically from the
   originals; edit the original rule and re-mirror. The moment the toggle
   sets data-theme (either value), these stop matching and the explicit
   choice wins.
   ========================================================================= */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { color-scheme: dark; }
  /* ---- DARK (matches the app) ---------------------------------------------- */
:root:not([data-theme]) {
  --mnb-bg:            #081621;   /* app background */

  /* ambient texture — dark: light speckle that lightens, faint center glow */
  --mnb-tex-blend:     screen;
  --mnb-vignette:      rgba(0, 0, 0, 0.55);  /* corner vignette (dark) */
  --mnb-vignette-0:    rgba(0, 0, 0, 0);
  --mnb-grain:         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='1400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeColorMatrix type='matrix' values='0.45 0 0 0 0 0 0.72 0 0 0 0 0 1 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  --mnb-grain-size:    200px;

  --mnb-surface:       #0E2030;   /* one notch up — app is flat, tables need cards */
  --mnb-surface-2:     #142838;
  --mnb-border:        rgba(112,128,144,.30);   /* app slate @30% */

  --mnb-text:          #FFFFFF;
  --mnb-muted:         #708090;
  --mnb-strong:        #FFFFFF;

  --mnb-gold:          #F2C043;
  --mnb-gold-on:       #141B28;
  --mnb-gold-text:     #F2C043;
  --mnb-gold-shadow:   none;

  --mnb-link:          var(--mnb-gold-text);
  --mnb-link-shadow:   none;

  --mnb-ok:            #3DBA86;
  --mnb-ok-bg:         rgba(61,186,134,.14);
  --mnb-cond:          #E0883D;
  --mnb-cond-bg:       rgba(224,136,61,.14);
  --mnb-no:            #E06666;
  --mnb-no-bg:         rgba(224,102,102,.14);

  --mnb-shadow:        0 1px 2px rgba(0,0,0,.40), 0 2px 8px rgba(0,0,0,.35);
  --mnb-shadow-header: 0 0.5px 0 var(--mnb-border);
  }
  :root:not([data-theme]) .mnb-header::before { background-color: rgba(14, 32, 48, 0.8);
  }
  /* light mode shows logo-lt.png */
:root:not([data-theme]) .mnb-header__brand .mnb-logo--light { display: none;
  }
  /* dark mode shows logo.png */
:root:not([data-theme]) .mnb-header__brand .mnb-logo--dark { display: block;
  }
  :root:not([data-theme]) .mnb-toggle__track { background: #243047; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5);
  }
  :root:not([data-theme]) .mnb-toggle__sun { color: rgba(255, 255, 255, .4);
  }
  :root:not([data-theme]) .mnb-toggle__moon { color: #fff;
  }
  :root:not([data-theme]) .mnb-toggle__knob { transform: translateX(30px); background: radial-gradient(circle at 50% 32%, #B0BAC0, #6F7A80);
  }
  :root:not([data-theme]) .mnb-page-title { color: #e6e9eb;
  }
  :root:not([data-theme]) .mnb-page-title::after {
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent 85%);
          mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent 85%);
  }
  :root:not([data-theme]) .mnb-section {
  background: rgba(4, 12, 20, 0.55);   /* tinted glass — dark. lower alpha = more texture */
  border-color: rgba(112, 128, 144, 0.45);   /* stronger than the .30 default */
  }
  /* dark: zebra rows at 50% so the card's frosted texture reads through */
:root:not([data-theme]) .mnb-rules tbody tr:nth-child(even), :root:not([data-theme]) .mnb-kv dt:nth-of-type(even), :root:not([data-theme]) .mnb-kv dd:nth-of-type(even) { background: rgba(20, 40, 56, 0.5);
  }
  :root:not([data-theme]) .mnb-section__title--above { color: #d3dade;
  }
  :root:not([data-theme]) .mnb-section__title--above::after {
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent 85%);
          mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent 85%);
  }
  :root:not([data-theme]) .mnb-rules__note { color: rgba(255, 255, 255, 0.85);
  }
  /* desktop shows the full label */
:root:not([data-theme]) .mnb-tab {
  color: var(--mnb-gold-text);
  background: rgba(4, 12, 20, 0.55);
  border-color: rgba(112, 128, 144, 0.45);
  }
  :root:not([data-theme]) .mnb-tab[aria-selected="true"] { color: var(--mnb-gold-text);
  }
  :root:not([data-theme]) .mnb-disclaimer { color: #fff;
  }
  :root:not([data-theme]) .mnb-footer__nav a { color: #fff;
  }
  :root:not([data-theme]) .mnb-footer__legal a { color: #fff;
  }
  :root:not([data-theme]) .mnb-form__ok { color: #7ED957;
  }
  :root:not([data-theme]) .mnb-form__err { color: #EE6065;
  }
  /* fields — dark: match the dark statute treatment */
:root:not([data-theme]) .mnb-contact-grid .mnb-field input, :root:not([data-theme]) .mnb-contact-grid .mnb-field select, :root:not([data-theme]) .mnb-contact-grid .mnb-field textarea {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: var(--mnb-border);
  box-shadow: none;
  }
  :root:not([data-theme]) .mnb-contact-grid .mnb-field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23FFFFFF' stroke-width='2'/></svg>");
  }
  :root:not([data-theme]) .mnb-field__hint { color: #EE6065;
  }
  :root:not([data-theme]) .mnb-feature__icon, :root:not([data-theme]) .mnb-feature__list li::before { color: var(--mnb-gold-text);
  }
  :root:not([data-theme]) .mnb-appband { background: rgba(4, 12, 20, 0.55);
  }
  :root:not([data-theme]) .mnb-appband__kicker { color: var(--mnb-gold-text);
  }
  :root:not([data-theme]) .mnb-appband__btn:hover { background: #fff; color: #000;
  }
  /* light: hover slate (not gold) */
:root:not([data-theme]) .mnb-breadcrumb a { color: #97a2a9;
  }
  /* dark: keep slate */
:root:not([data-theme]) .mnb-breadcrumb a:hover { color: var(--mnb-gold-text);
  }
  :root:not([data-theme]) .mnb-breadcrumb [aria-current="page"] { color: var(--mnb-gold-text);
  }
  :root:not([data-theme]) .mnb-statute { background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.85); border-color: var(--mnb-border); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  }
  :root:not([data-theme]) .mnb-id-grouptitle { color: #d3dade;
  }
  :root:not([data-theme]) .mnb-id-group {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--mnb-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }
  :root:not([data-theme]) .mnb-paths__col {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.14);
  }
  :root:not([data-theme]) .mnb-modal { background: #06111A;
  }
  :root:not([data-theme]) .mnb-modal__title { color: var(--mnb-gold-text);
  }
  :root:not([data-theme]) .mnb-modal__ctx { color: #fff;
  }
  :root:not([data-theme]) .mnb-chip { background: rgba(255, 255, 255, 0.045); border-color: var(--mnb-border); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  }
  :root:not([data-theme]) .mnb-chip__label { color: rgba(255, 255, 255, 0.85);
  }
  :root:not([data-theme]) .mnb-chip__star { color: rgba(255, 255, 255, 0.55);
  }
  :root:not([data-theme]) .mnb-id-footnote { color: rgba(255, 255, 255, 0.85);
  }
  :root:not([data-theme]) .mnb-id-footnote__star { color: rgba(255, 255, 255, 0.85);
  }
  :root:not([data-theme]) .mnb-cw-path__desc { color: rgba(255, 255, 255, 0.85);
  }
  :root:not([data-theme]) .mnb-jchipcol {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--mnb-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }
  :root:not([data-theme]) .mnb-jchipcol__none { color: rgba(255, 255, 255, 0.45);
  }
  :root:not([data-theme]) .mnb-med { border-color: rgba(255, 255, 255, .8);
  }
  :root:not([data-theme]) .mnb-statute-cite a:hover { color: var(--mnb-gold-text);
  }
  :root:not([data-theme]) .mnb-info-badge { border-color: rgba(255, 255, 255, .8);
  }
}/* Auto-theme mirrors for the three dark rules living inside the <=860px
   mobile media block above (same :root:not([data-theme]) scoping). */
/* Auto-theme mirrors for the paths selector. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .mnb-paths-banner { background: rgba(229,72,77,.14); color: #F5B5B7; }
  :root:not([data-theme]) .mnb-paths__list { background: #152939; border-color: rgba(255,255,255,.25); }

  :root:not([data-theme]) .mnb-paths__modal-card { background: #0E2030; }
  :root:not([data-theme]) .mnb-paths__confirm .mnb-chip__label { color: #fff; }
  :root:not([data-theme]) .mnb-paths__modal-sub { color: rgba(255, 255, 255, 0.8); }
  :root:not([data-theme]) .mnb-paths__modal-cancel { border-color: rgba(255,255,255,.25); color: #fff; }
  :root:not([data-theme]) .mnb-paths__verify { color: #F5B5B7; }
}/* Auto-theme mirror for the Recording Restrictions strip. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .mnb-jrestrict__text { color: rgba(255, 255, 255, 0.85); }
}@media (prefers-color-scheme: dark) and (max-width: 860px) {
  :root:not([data-theme]) .mnb-header .mnb-toggle,
  :root:not([data-theme]) .mnb-header .mnb-burger { color: var(--mnb-gold-text); }
  :root:not([data-theme]) .mnb-header::before { background-color: #0E2030; }
  :root:not([data-theme]) .mnb-nav { background: #0E2030; }
}/* Auto-theme (device dark) mobile dropdown: mirror the explicit-dark mobile
   select styling so device-dark users get the dark field + white chevron, and
   re-assert no-repeat/position so the desktop dark shorthand can't tile it. */
@media (prefers-color-scheme: dark) and (max-width: 600px) {
  :root:not([data-theme]) .mnb-paths__list {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--mnb-border);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23FFFFFF' stroke-width='2'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
  }
}/* Anchor landing offset. The header is sticky, so a heading scrolled to the
   very top of the viewport lands UNDERNEATH it. scroll-margin-top reserves
   that space for every element the section menu targets -- headings plus the
   journal FAQ list -- and applies to native anchor jumps too. */
h2.mnb-section__title--above,
h3.mnb-id-grouptitle,
.mnb-kv { scroll-margin-top: 110px; }/* ============================================================================
   FLOATING SECTION MENU (state pages, desktop)
   ----------------------------------------------------------------------------
   Sits OUTSIDE the content column, to its left, like a wing mirror -- the card
   stack stays exactly where it was and keeps the page's centre of gravity. The
   menu is positioned off the viewport centre rather than the document flow, so
   adding it moves nothing: the main column's width and centring are untouched.

   left = 50% (centre) - half the content width - gutter - menu width.
   It only appears when there is genuinely room for it beside the content;
   below that the content would be pushed off-centre, so it is hidden rather
   than allowed to overlap. Mobile treatment is a separate decision.
   ========================================================================== */
.mnb-secnav {
  position: fixed;
  top: 128px;
  left: calc(50% - (var(--mnb-maxw) / 2) - 24px - 216px);
  width: 216px;
  max-height: calc(100vh - 176px);
  overflow-y: auto;
  z-index: 90;
  padding: 16px 16px 18px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--mnb-border);
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(20, 27, 40, 0.06);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  backdrop-filter: blur(10px) saturate(1.05);
}.mnb-secnav[hidden] { display: none; }.mnb-secnav__title {
  margin: 0 0 10px;
  font-family: var(--mnb-font-impact);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .945rem;          /* was .82rem (~13px); +2px */
  color: var(--mnb-text);      /* app charcoal in light; the dark rule below
                                  overrides to white */
  text-align: center;
}.mnb-secnav__list, .mnb-secnav__sublist { list-style: none; margin: 0; padding: 0; }.mnb-secnav__sublist { margin: 2px 0 6px 10px; padding-left: 8px; border-left: 1px solid var(--mnb-border); }.mnb-secnav__link {
  display: block;
  padding: 4px 6px;
  border-radius: 6px;
  /* body stack, NOT Feross: the menu is chrome, not page content, and the
     display face is reserved for the document's own voice. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: .84rem;
  line-height: 1.25;
  text-transform: uppercase;
  color: rgba(20, 27, 40, 0.82);
  text-shadow: none;
  transition: background var(--mnb-ease), color var(--mnb-ease);
}.mnb-secnav__item--sub .mnb-secnav__link { font-size: .78rem; color: rgba(20, 27, 40, 0.62); }.mnb-secnav__link:hover { background: rgba(20, 27, 40, 0.06); color: var(--mnb-text); text-decoration: none; }/* Current section (scroll spy). The highlighted OPTION takes the header bar's
   slate rather than gold -- gold read as a yellow smear against the white
   panel. Text reverses to white and bold, so only the current item is
   reversed out; every other option stays dark on white. */
.mnb-secnav__link.is-current,
.mnb-secnav__item--sub .mnb-secnav__link.is-current {
  background: rgba(16, 45, 68, 0.9);
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}/* Back to top: set off from the list by a blank line and a hairline, so it
   reads as an action rather than another section. */
.mnb-secnav__top {
  display: block;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--mnb-border);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-align: center;
  color: rgba(20, 27, 40, 0.62);
  text-shadow: none;
}.mnb-secnav__top:hover { color: var(--mnb-text); text-decoration: none; }[data-theme="dark"] .mnb-secnav {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}[data-theme="dark"] .mnb-secnav__title { color: #fff; }[data-theme="dark"] .mnb-secnav__link { color: rgba(255, 255, 255, 0.82); }[data-theme="dark"] .mnb-secnav__item--sub .mnb-secnav__link { color: rgba(255, 255, 255, 0.6); }[data-theme="dark"] .mnb-secnav__link:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }[data-theme="dark"] .mnb-secnav__link.is-current,
[data-theme="dark"] .mnb-secnav__item--sub .mnb-secnav__link.is-current { background: var(--mnb-gold); color: #000; font-weight: 700; text-shadow: none; }[data-theme="dark"] .mnb-secnav__top { border-top-color: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.6); }[data-theme="dark"] .mnb-secnav__top:hover { color: #fff; }/* No room beside the content -> hide rather than overlap or shove the column.
   1120 content + 2x240 wings = 1600; below that the mirror would clip. */
@media (max-width: 1600px) { .mnb-secnav { display: none; } }/* Auto-theme (device dark, no explicit choice) mirror for the section menu:
   without this a device-dark reader gets the LIGHT slate panel, since the
   light rules are the base. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .mnb-secnav {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  }
  :root:not([data-theme]) .mnb-secnav__title { color: #fff; }
  :root:not([data-theme]) .mnb-secnav__link { color: rgba(255, 255, 255, 0.82); }
  :root:not([data-theme]) .mnb-secnav__item--sub .mnb-secnav__link { color: rgba(255, 255, 255, 0.6); }
  :root:not([data-theme]) .mnb-secnav__link:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
  :root:not([data-theme]) .mnb-secnav__link.is-current,
  :root:not([data-theme]) .mnb-secnav__item--sub .mnb-secnav__link.is-current { background: var(--mnb-gold); color: #000; font-weight: 700; text-shadow: none; }
  :root:not([data-theme]) .mnb-secnav__sublist { border-left-color: var(--mnb-border); }
  :root:not([data-theme]) .mnb-secnav__top { border-top-color: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.6); }
  :root:not([data-theme]) .mnb-secnav__top:hover { color: #fff; }
}/* ============================================================================
   SUPPORT PAGE -- tutorials, FAQ, release history.
   Everything here rendered on browser defaults until now; these are its first
   rules. Inner padding is set on the CONTENT rather than widened on
   .mnb-section, because that card is shared with the state pages and changing
   it would move every jurisdiction layout on the site.
   ========================================================================== */
.mnb-support-body { padding: 4px 14px 6px; }/* ---- FAQ: native <details>, so it works without JavaScript --------------- */
.mnb-faq {
  padding: 14px 0;
  border-bottom: 1px solid var(--mnb-border);
}.mnb-faq:last-child { border-bottom: 0; }.mnb-faq__q {
  cursor: pointer;
  list-style: none;                 /* suppress the default disclosure marker */
  font-family: var(--mnb-font-impact);
  font-size: 1rem;
  letter-spacing: .01em;
  color: var(--mnb-text);
  padding-right: 26px;
  position: relative;
}.mnb-faq__q::-webkit-details-marker { display: none; }/* Own chevron, so the indicator matches the site rather than the OS. */
.mnb-faq__q::after {
  content: "";
  position: absolute;
  right: 4px;
  top: .35em;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--mnb-muted);
  border-bottom: 2px solid var(--mnb-muted);
  transform: rotate(45deg);
  transition: transform var(--mnb-ease);
}.mnb-faq[open] .mnb-faq__q::after { transform: rotate(-135deg); }.mnb-faq__a {
  margin: 10px 0 2px;
  padding-right: 26px;
  line-height: 1.55;
  color: var(--mnb-muted);
}/* ---- Release history ----------------------------------------------------- */
.mnb-release { padding: 16px 0 4px; border-bottom: 1px solid var(--mnb-border); }.mnb-release:last-child { border-bottom: 0; }/* The version heading: Anton, centred, per Jordan 2026-08-05. Date sits under
   it rather than beside it so the centring reads as a heading and not a row. */
.mnb-release__head { margin: 0 0 12px; text-align: center; font-weight: 400; }.mnb-release__ver {
  display: block;
  font-family: var(--mnb-font-impact);
  font-size: 1.35rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--mnb-text);
}.mnb-release__date {
  display: block;
  margin-top: 2px;
  font-size: .82rem;
  color: var(--mnb-muted);
}.mnb-release__list { margin: 0; padding-left: 20px; line-height: 1.55; }.mnb-release__list li { margin-bottom: 6px; }/* ---- Tutorials ----------------------------------------------------------- */
.mnb-tutorials { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }.mnb-tutorial__thumb { display: block; position: relative; border-radius: 10px; overflow: hidden; }.mnb-tutorial__thumb img { display: block; width: 100%; height: auto; }.mnb-tutorial__dur {
  position: absolute; right: 8px; bottom: 8px;
  background: rgba(0, 0, 0, .78); color: #fff;
  font-size: .72rem; padding: 2px 6px; border-radius: 4px;
}.mnb-tutorial__title { margin: 10px 0 4px; font-family: var(--mnb-font-impact); font-size: 1rem; }.mnb-tutorial__copy p { margin: 0; color: var(--mnb-muted); line-height: 1.5; }[data-theme="dark"] .mnb-faq__q,
[data-theme="dark"] .mnb-release__ver { color: #fff; }@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .mnb-faq__q,
  :root:not([data-theme]) .mnb-release__ver { color: #fff; }
}@media (max-width: 600px) {
  .mnb-support-body { padding: 4px 6px 6px; }
  .mnb-release__ver { font-size: 1.15rem; }
}/* ============================================================================
   PRICING PAGE
   ========================================================================== */

/* The monthly/yearly switch. Both prices are in the markup; this only chooses
   which is shown. The checkbox is visually hidden but still focusable, so the
   toggle is keyboard-operable without a line of script. */
/* Radios are visually hidden but still focusable, so the control is fully
   keyboard-operable -- arrow keys move between the two, as a radio group
   should. */
.mnb-cycle { position: absolute; opacity: 0; width: 0; height: 0; }/* Screen-reader-only text inside the two track halves, so each half announces
   what it selects rather than being an unlabelled hit area. */
.mnb-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}.mnb-pricing__toggle {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 4px 0 22px;
  font-family: var(--mnb-font-impact); text-transform: uppercase;
  font-size: .95rem; letter-spacing: .02em;
}.mnb-pricing__opt { cursor: pointer; color: var(--mnb-muted); transition: color var(--mnb-ease); }.mnb-cycle--mo:checked ~ .mnb-pricing__toggle .mnb-pricing__opt--mo,
.mnb-cycle--yr:checked ~ .mnb-pricing__toggle .mnb-pricing__opt--yr { color: var(--mnb-text); }.mnb-pricing__track {
  display: inline-block; width: 46px; height: 24px; border-radius: 999px;
  background: var(--mnb-border); position: relative; flex: none;
  transition: background var(--mnb-ease);
}/* Two halves, each selecting its own radio, so the slider behaves like a
   segmented control: clicking the left side is always "monthly". */
/* THE TRACK TOGGLES. Two labels, both covering the full track, stacked. Only
   the one that would CHANGE the state accepts clicks, so wherever you press,
   the switch flips -- which is how a switch should behave. The Monthly and
   Yearly words either side stay specific: each selects its own value, and
   clicking the current one does nothing.
   Radios cannot toggle themselves, so this pointer-events swap is what gives a
   radio group switch-like behaviour without JavaScript. */
.mnb-pricing__hit { position: absolute; inset: 0; cursor: pointer; z-index: 2; }
.mnb-pricing__hit--mo,
.mnb-pricing__hit--yr { pointer-events: none; }
.mnb-cycle--mo:checked ~ .mnb-pricing__toggle .mnb-pricing__hit--yr { pointer-events: auto; }
.mnb-cycle--yr:checked ~ .mnb-pricing__toggle .mnb-pricing__hit--mo { pointer-events: auto; }
.mnb-pricing__knob {
  position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.35);
  transition: transform var(--mnb-ease);
  pointer-events: none; z-index: 1;
}.mnb-cycle--yr:checked ~ .mnb-pricing__toggle .mnb-pricing__track { background: var(--mnb-gold); }.mnb-cycle--yr:checked ~ .mnb-pricing__toggle .mnb-pricing__knob { transform: translateX(22px); }.mnb-cycle:focus-visible ~ .mnb-pricing__toggle .mnb-pricing__track { outline: 2px solid var(--mnb-gold); outline-offset: 3px; }/* Price swap. Yearly is hidden by default so the page is correct before any
   interaction, and there is no flash of the wrong figure. */
.mnb-price--yr { display: none; }.mnb-cycle--yr:checked ~ .mnb-plans .mnb-price--mo { display: none; }.mnb-cycle--yr:checked ~ .mnb-plans .mnb-price--yr { display: inline; }/* ---- plan cards ---- */
/* auto-fit, not repeat(3): a fourth plan is an INSERT, and the layout should
   absorb it without a CSS edit. minmax keeps cards from going unreadably narrow
   -- past four columns they wrap to a second row rather than shrinking. */
.mnb-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 14px;
}.mnb-plan {
  position: relative; text-align: center;
  padding: 22px 16px 18px; border-radius: var(--mnb-radius);
  border: 1px solid var(--mnb-border); background: rgba(255,255,255,.35);
}/* The featured card carries a 2px border; the other two carry 1px. Left as is
   they would jump 1px on hover and shift their own contents, so all three get
   2px up front and the plain pair simply match the card background until they
   are hovered. */
.mnb-plan { border-width: 2px; }
.mnb-plan--featured { border-color: var(--mnb-gold); }

/* HOVER. Light: gold becomes the flag red. Dark: gold becomes white. Applies
   to the featured card's border AND its badge, and gives the other two the
   same 2px frame in the same colour so the set behaves as one control rather
   than one special card and two inert ones.
   transition on both properties, so the plain cards fade their border in
   rather than snapping. */
.mnb-plan { transition: border-color var(--mnb-ease), background var(--mnb-ease); }
.mnb-plan:hover { border-color: #B5242E; }
.mnb-plan--featured:hover .mnb-plan__badge { background: #B5242E; color: #fff; }
.mnb-plan__badge { transition: background var(--mnb-ease), color var(--mnb-ease); }

[data-theme="dark"] .mnb-plan:hover { border-color: #fff; }
[data-theme="dark"] .mnb-plan--featured:hover .mnb-plan__badge { background: #fff; color: #000; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .mnb-plan:hover { border-color: #fff; }
  :root:not([data-theme]) .mnb-plan--featured:hover .mnb-plan__badge { background: #fff; color: #000; }
}.mnb-plan__badge {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--mnb-gold); color: var(--mnb-gold-on);
  font-family: var(--mnb-font-impact); text-transform: uppercase;
  font-size: .7rem; letter-spacing: .04em; padding: 3px 10px; border-radius: 999px;
  white-space: nowrap;
}.mnb-plan__name { font-family: var(--mnb-font-impact); text-transform: uppercase;
  font-size: 1.25rem; font-weight: 400; margin: 0 0 6px; color: var(--mnb-text); }.mnb-plan__tag { margin: 0 0 14px; font-size: .85rem; line-height: 1.4; color: var(--mnb-muted); min-height: 3.4em; }.mnb-plan__price { margin: 0 0 16px; font-family: var(--mnb-font-impact); font-size: 2.4rem; line-height: 1; color: var(--mnb-text); }.mnb-price__cur { font-size: .5em; vertical-align: .55em; margin-right: 1px; }.mnb-price__per { font-size: .34em; color: var(--mnb-muted); margin-left: 2px; }.mnb-plan__cta {
  display: inline-block; padding: 10px 20px; border-radius: var(--mnb-radius-sm);
  background: var(--mnb-gold); color: var(--mnb-gold-on) !important;
  font-family: var(--mnb-font-impact); text-transform: uppercase;
  font-size: .9rem; letter-spacing: .03em; text-shadow: none;
}/* The button no longer has a hover of its own. It follows the CARD: hovering
   anywhere on the card turns the border, the badge and this button together,
   so the whole tile reads as one target instead of three things lighting up
   independently. The brightness filter it used before also lightened the label
   along with the fill, which washed it out. */
.mnb-plan__cta:hover { text-decoration: none; }
.mnb-plan:hover .mnb-plan__cta { background: #B5242E; color: #fff !important; }
[data-theme="dark"] .mnb-plan:hover .mnb-plan__cta { background: #fff; color: #000 !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .mnb-plan:hover .mnb-plan__cta { background: #fff; color: #000 !important; }
}/* ---- comparison matrix ---- */
/* ---- horizontal scroll affordance -------------------------------------------
   Three things tell the reader the table scrolls, none of which need JS:

   1. SCROLL SHADOWS. Two pairs of gradients. The `local` pair scrolls WITH the
      content and is painted in the surface colour, so it masks the shadow
      beneath it; the `scroll` pair is fixed to the viewport of the box. At the
      left edge the mask covers the shadow, and as you scroll away it slides
      off and the shadow appears. The result is a shadow that shows only on the
      side where content is hidden -- self-managing, no state to track.

   2. STICKY FIRST COLUMN, so the feature name stays put while the plan columns
      move. Without it, scrolling left leaves the reader looking at three ticks
      with no idea which row they belong to.

   3. A VISIBLE HINT above the table, shown only at widths where it scrolls.

   The wrap is also focusable and labelled, so keyboard users can scroll it and
   screen readers announce it as a region rather than a silent overflow box. */
.mnb-matrix-wrap {
  margin-top: 26px;
  overflow-x: auto;
  /* No scroll-shadow background. The trick needs opaque surface-coloured strips
     to mask the shadows, and --mnb-surface is #FFFFFF -- which is where the
     white came from. With the arrows and the demo scroll now carrying the
     message, the shadows are not worth a white band across the table. */
}
.mnb-matrix-wrap:focus-visible { outline: 2px solid var(--mnb-gold); outline-offset: 2px; }

/* SLIDE-IN REMOVED (2026-08-26, Jordan's call). The entrance animation set
   transform: translateX(100%) then transitioned to 0 -- and because the wrap was
   also a scroll container, it kept coming to rest OFF-CENTRE, leaving the table
   clipped on both edges. It was hinting "this scrolls sideways", which stopped
   being true once the table fitted. These no-ops stay so that a cached page
   still running the old script cannot hide or shift the table: the JS only adds
   classes, and both now do nothing. */
.mnb-matrix-wrap.is-armed,
.mnb-matrix-wrap.is-in { opacity: 1; transform: none; transition: none; }

/* Slide in from the right, fading up. 1.1s is deliberately unhurried -- the
   point is that the reader NOTICES the table arriving from that side, which a
   fast transition defeats. `is-armed` is added by the script rather than being
   the default, so the table is never left invisible if JS fails. */
/* Starts at the FULL width of its own frame, so the table travels in from the
   right edge rather than nudging 44px. The wrap has overflow-x, so nothing
   spills outside it while it moves. Opacity is held back until 25% of the way
   through, which keeps the arrival readable instead of fading up before it has
   gone anywhere. */
/* The moving wrap must not widen the document while it sits off to the right,
   or the whole page gains a horizontal scrollbar for the duration. */
.mnb-pricing { overflow-x: clip; }
/* The observer's anchor. Zero height so it changes no layout, but it occupies
   the table's position in the flow, which is the whole point. */
.mnb-matrix-cue { height: 0; }

/* Hidden above the scrolling threshold -- a hint that is always there stops
   being a hint. */
.mnb-matrix-hint { display: none; }
@media (max-width: 760px) {
  .mnb-matrix-hint {
    display: block;
    margin: 22px 0 -8px;
    text-align: center;
    font-family: var(--mnb-font-impact);
    text-transform: uppercase;
    font-size: .85rem;
    letter-spacing: .03em;
    color: var(--mnb-link);        /* dark red in light, gold in dark */
  }
  /* U+2190/2192 are drawn light and sit low on the baseline. Bumped in size
     and lifted to the optical middle of the caps beside them; the heavier
     glyphs are swapped in the markup. */
  /* ONE glyph, mirrored. U+2B05 and U+27A1 come from different Unicode blocks
     -- Miscellaneous Symbols and Arrows versus Dingbats -- and fonts draw them
     at different scales, so the left arrow rendered visibly larger. Using
     U+27A1 both sides and flipping one with scaleX(-1) makes a mismatch
     impossible. inline-block because transform does not apply to inline
     elements. */
  .mnb-matrix-hint__arw {
    display: inline-block;
    margin: 0 .35em;
    font-size: 1.5em;
    line-height: 0;            /* the bigger glyph must not grow the line */
    vertical-align: -.02em;
  }
  .mnb-matrix-hint__arw--l { transform: scaleX(-1); }
  /* Feature column down 25% (.92rem -> .69rem). It is the widest column and
     the only one carrying sentences, so it is where a narrow screen gains the
     most room. */
  .mnb-matrix tbody th { font-size: .9rem; }
  /* Header above the rows it labels, on mobile too. Anton is condensed, so it
     takes the extra size without costing much column width -- which matters
     here, where the table is already scrolling. */
  .mnb-matrix thead th { font-size: 1rem; }

}/* table-layout: fixed switches the browser from "measure the content" to
   "obey these numbers". Without it the columns size themselves by what they
   contain, which is why "Pro (Multi-State)" -- the longest header on the page
   -- was claiming far more room than Basic or Pro, and why the feature column
   stretched to fit its longest sentence.

   The plan columns share whatever is left after the feature column, divided by
   --mnb-plan-count, so all three stay equal and a fourth tier redistributes
   automatically rather than needing new numbers. */
.mnb-matrix { width: 100%; border-collapse: collapse; font-size: .92rem; table-layout: fixed; }
.mnb-matrix thead th:first-child { width: 34%; }
.mnb-matrix thead th:not(:first-child) { width: calc(66% / var(--mnb-plan-count, 3)); }
/* Fixed columns cannot widen for a long word, so headers and values wrap
   rather than overflow. */
.mnb-matrix thead th, .mnb-matrix tbody th, .mnb-matrix td { overflow-wrap: break-word; }.mnb-matrix__cap {
  font-family: var(--mnb-font-impact); text-transform: uppercase;
  font-size: 1.05rem; letter-spacing: .03em; color: var(--mnb-text);
  text-align: left; padding: 0 0 10px;
}.mnb-matrix th, .mnb-matrix td { padding: 9px 10px; border-bottom: 1px solid var(--mnb-border); }.mnb-matrix thead th {
  font-family: var(--mnb-font-impact); text-transform: uppercase;
  font-size: 1.05rem; letter-spacing: .03em; text-align: center; color: var(--mnb-text);
  /* Anton ships ONE cut (400) -- see its @font-face. <th> is bold in every
     browser's UA stylesheet, so without this the plan-name column headers get
     SYNTHETIC bold: the browser smears the 400 glyphs because there is no real
     bold to load. That is why they read heavier and muddier than everything
     else on the page. .mnb-matrix tbody th already sets 400; thead th was the
     one that was missed. */
  font-weight: 400;
  border-bottom-width: 2px;
}.mnb-matrix thead th:first-child { text-align: left; }.mnb-matrix tbody th { text-align: left; font-weight: 400; color: var(--mnb-text); }.mnb-matrix td { text-align: center; }.mnb-matrix__note { display: block; font-size: .78rem; color: var(--mnb-muted); }/* Gold measures ~1.5:1 on the light plate, so the shadow is what gives the
   tick an edge rather than being decoration -- same reasoning, and the same
   values, as the state map icons. Dark mode needs none: gold on charcoal is
   11:1, and the shadow would only muddy it. */
.mnb-matrix__yes {
  color: var(--mnb-gold);
  font-size: 1.45rem;
  line-height: 1;      /* the bigger glyph must not grow the row height */
  /* The same SVG inner glow the hero stars use, instead of a drop shadow --
     the offset copy read as a doubled glyph at this size. The filter is
     defined in includes/header.php and loads on every page that gets
     announce.css; the pricing page is on that list. */
  filter: url(#mnb-inner-glow);
}/* text-shadow, not filter -- the property changed when the tick moved from a
   drop-shadow to an offset duplicate, and `filter: none` would have silently
   left the shadow on in dark mode. */
[data-theme="dark"] .mnb-matrix__yes { filter: none; }@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .mnb-matrix__yes { filter: none; }
}.mnb-matrix__no  { color: var(--mnb-border); }.mnb-matrix__val { font-family: var(--mnb-font-impact); text-transform: uppercase; font-size: .9rem; }.mnb-matrix__row--metered td { font-size: 1rem; }/* Alternate rows only, and faint. A wash on every row reads as a solid block
   and defeats the purpose -- the point of striping is that the eye can track
   across a wide row without losing its place. */
.mnb-matrix tbody tr:nth-child(even) th,
.mnb-matrix tbody tr:nth-child(even) td { background: rgba(255,255,255,.28); }
.mnb-matrix tbody tr:hover th, .mnb-matrix tbody tr:hover td { background: rgba(0,0,0,.03); }
[data-theme="dark"] .mnb-matrix tbody tr:nth-child(even) th,
[data-theme="dark"] .mnb-matrix tbody tr:nth-child(even) td { background: rgba(255,255,255,.03); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .mnb-matrix tbody tr:nth-child(even) th,
  :root:not([data-theme]) .mnb-matrix tbody tr:nth-child(even) td { background: rgba(255,255,255,.03); }
}.mnb-pricing__note { margin-top: 18px; font-size: .85rem; color: var(--mnb-muted); line-height: 1.5; }[data-theme="dark"] .mnb-plan { background: rgba(255,255,255,.04); }[data-theme="dark"] .mnb-matrix tbody tr:hover th,
[data-theme="dark"] .mnb-matrix tbody tr:hover td { background: rgba(255,255,255,.04); }@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .mnb-plan { background: rgba(255,255,255,.04); }
}@media (max-width: 760px) {
  .mnb-plans { grid-template-columns: 1fr; gap: 18px; }
  .mnb-plan__tag { min-height: 0; }
  /* MOBILE MATRIX: FIT, don't scroll (2026-08-26).
     Previously this forced min-width: 210px + count*116px, which at four plans
     is 674px inside ~350px of phone width -- so the table scrolled sideways and
     a visitor saw ONLY the Companion column until they swiped. Adding companion
     made an already-scrolling table worse. A comparison table you cannot
     compare in is not doing its job, so the columns now fit the viewport, the
     way the in-app table does.

     Three things make it fit:
      1. min-width: 0 -- let table-layout: fixed do the work at 100% width.
      2. Tighter type and padding (values are ✓ / — / short words, so they
         survive shrinking far better than the feature labels do).
      3. overflow-wrap: break-word is KEPT as a safety net, with hyphens for
         a tidier break where supported. An earlier pass set overflow-wrap:
         normal to stop "COMPANI/ON" style chops -- but that let an unbreakable
         word ("INTERSTATE", "UNLIMITED") set a min-content floor the cell could
         not go below, so the table grew wider than the screen and sat clipped
         on BOTH edges mid-scroll. A rare ugly wrap is far better than a table
         you cannot read, so the net stays; the type sizes below are small
         enough that the current data never needs to break.
     Anton is condensed, so these sizes leave slack on a 390px phone. */
  .mnb-matrix { min-width: 0; font-size: .78rem; }
  .mnb-matrix th, .mnb-matrix td { padding: 7px 3px; }
  .mnb-matrix thead th:first-child { width: 30%; }
  .mnb-matrix thead th:not(:first-child) { width: calc(70% / var(--mnb-plan-count, 4)); }
  .mnb-matrix thead th { font-size: .58rem; letter-spacing: 0;
    overflow-wrap: break-word; hyphens: auto; padding-left: 2px; padding-right: 2px; }
  .mnb-matrix tbody th { font-size: .76rem; padding-left: 6px;
    overflow-wrap: break-word; hyphens: auto; }
  .mnb-matrix__val { font-size: .56rem; letter-spacing: 0;
    overflow-wrap: break-word; hyphens: auto; }
  .mnb-matrix__row--metered td { font-size: .8rem; }
  /* The tick kept its desktop 1.45rem while everything around it shrank, so it
     read oversized against the smaller type. 30% down = 1.02rem. line-height
     stays 1 so the taller glyph still cannot grow the row. */
  .mnb-matrix__yes { font-size: 1.02rem; }
  /* Nothing scrolls now, so the swipe prompt would be a lie. */
  .mnb-matrix-hint { display: none; }

  /* THE TABLE MUST NOT BE A SCROLL CONTAINER HERE.
     While overflow-x stayed `auto`, any residual pixel of overflow let the box
     hold a scrollLeft -- and the entrance animation pans it -- so the table
     came to rest offset, clipped on BOTH edges ("MPARE PLANS" / "INTERSTAT").
     visible, not hidden: if something ever does overflow, it should be seen
     rather than silently cut. */
  .mnb-matrix-wrap { overflow-x: visible; }

  /* Kill the slide-in on mobile. It exists to hint "this scrolls sideways",
     which is no longer true here, and its translateX is what left the table
     parked off-centre. Both states are neutralised so the table is simply
     present whether or not the script runs. */
  .mnb-matrix-wrap.is-armed,
  
  /* THE GUTTERS, FIXED AT SOURCE.
     The table sits three containers deep and each adds side padding:
       <=600px:  .mnb-main 14 + .mnb-section 24 + .mnb-support-body 6  = 44px A SIDE
       601-760:  .mnb-main 20 + .mnb-section 24 + .mnb-support-body 14 = 58px A SIDE
     That is up to 88-116px of a 390px phone lost to nesting alone, which is why
     the table had nothing left to lay out in.

     Earlier attempts pulled the table back out with negative margins on the
     wrap. That fights three ancestors with one number, cannot be right for both
     width bands at once, and two competing versions of it ended up in this file
     (-24px and -20px) with the later, smaller one winning -- so the gutter never
     visibly moved.

     Fixed at source instead: header.php puts data-page="pricing" on <body>
     exactly so one page can be targeted without touching shared components, so
     the padding is simply reduced on THIS page. Blast radius is one page, it is
     correct at every width, and there is no margin/padding tug of war. */
  [data-page="pricing"] .mnb-main         { padding-left: 6px;  padding-right: 6px; }
  [data-page="pricing"] .mnb-section      { padding-left: 8px;  padding-right: 8px; }
  [data-page="pricing"] .mnb-support-body { padding-left: 0;    padding-right: 0; }
  /* Outer columns keep breathing room off the card edge. 12px, not 8: the
     section's rounded corner curves inward at the top-left, and at 8px the
     first glyph of FEATURE sat in that curve and read as clipped. */
  .mnb-matrix th:first-child, .mnb-matrix td:first-child { padding-left: 16px; }
  .mnb-matrix th:last-child,  .mnb-matrix td:last-child  { padding-right: 10px; }
  /* Caption centred over the table on mobile. */
  .mnb-matrix__cap { text-align: center; padding-left: 16px; padding-right: 10px; }
}

/* Below ~360px (iPhone SE and older) four columns genuinely cannot hold a word
   like UNLIMITED at a legible size, so there we go back to scrolling and the
   swipe prompt returns -- honest fallback rather than unreadable type. */
@media (max-width: 359px) {
  .mnb-matrix { min-width: calc(180px + var(--mnb-plan-count, 4) * 84px); }
  .mnb-matrix-hint { display: block; }
}
/* ---- app band: manual controls ---------------------------------------------
   Hidden until the script adds .has-controls to the band. A slider's arrows
   and dots are worse than useless without JS -- they look interactive and do
   nothing -- so they only appear once something can act on them. */
.mnb-appband__nav,
.mnb-appband__dots { display: none; }

.mnb-appband { position: relative; }

.mnb-appband.has-controls .mnb-appband__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .28);
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
  transition: background var(--mnb-ease);
}
.mnb-appband.has-controls .mnb-appband__nav:hover { background: rgba(0, 0, 0, .5); }
.mnb-appband.has-controls .mnb-appband__nav:focus-visible { outline: 2px solid var(--mnb-gold); outline-offset: 2px; }
/* Pinned to the CONTENT column, not the browser edge. The band is full-bleed
   but .mnb-appband__inner is capped at --mnb-maxw, so left: 10px put the arrows
   metres away from the text on a wide monitor. This resolves to the inner
   container's own edge, and falls back to 8px once the viewport is narrower
   than the cap (where the calc would go negative). */
.mnb-appband.has-controls {
  --mnb-band-gutter: max(8px, calc(50% - var(--mnb-maxw) / 2 + 8px));
}
.mnb-appband__nav--prev { left: var(--mnb-band-gutter); }
.mnb-appband__nav--next { right: var(--mnb-band-gutter); }

/* Room for the arrows to sit in. 58px = the 38px button plus clearance, so
   neither the copy on the left nor the phone on the right runs underneath one.
   Applied only when the controls actually exist. */
.mnb-appband.has-controls .mnb-appband__inner { padding-left: 58px; padding-right: 58px; }
.mnb-appband--inset.has-controls .mnb-appband__inner { padding-left: 58px; padding-right: 58px; }
/* One glyph for both arrows, mirrored -- the same reason as the pricing hint:
   a matched left/right pair from different Unicode blocks renders at different
   sizes. */
.mnb-appband__nav--prev span { display: inline-block; transform: scaleX(-1); }

.mnb-appband.has-controls .mnb-appband__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  /* Bottom padding lifts the stars clear of the band's lower edge. The row
     itself has a fixed height below, so this only moves them up -- it does not
     let the scaled active star resize the band. */
  padding: 0 0 36px;
  position: relative;
  z-index: 3;
  /* Fixed height rather than letting the glyph's line box decide. A scaled
     active star would otherwise grow the row on every rotation, nudging the
     whole band as the slides change. */
  height: 20px;
}
/* Stars rather than circles, matching the star treatment on the trial button
   and the hero lines. A glyph rather than a background shape, so colour and
   size are one property each and the active state can simply be brighter. */
.mnb-appband__dot {
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  background: none;
  /* line-height 0 so the glyph contributes no leading of its own -- the row's
     fixed height above is what positions it. */
  line-height: 0;
  font-size: 1.05rem;
  color: rgba(255, 255, 255, .42);
  cursor: pointer;
  transition: color var(--mnb-ease), transform var(--mnb-ease);
}
.mnb-appband__dot span { display: block; }
.mnb-appband__dot:hover { color: rgba(255, 255, 255, .75); }
.mnb-appband__dot.is-active { color: var(--mnb-gold); transform: scale(1.3); }
.mnb-appband__dot:focus-visible { outline: 2px solid var(--mnb-gold); outline-offset: 3px; }

@media (max-width: 760px) {
  /* On a phone the arrows would sit over the copy, and swipe is the expected
     gesture anyway -- the dots alone carry the affordance. */
  .mnb-appband.has-controls .mnb-appband__nav { display: none; }
  /* Arrows are gone here, so give the padding back rather than leaving 58px of
     empty gutter on a 360px screen. */
  .mnb-appband.has-controls .mnb-appband__inner,
  .mnb-appband--inset.has-controls .mnb-appband__inner { padding-left: 20px; padding-right: 20px; }
}

/* ---- legal documents --------------------------------------------------------
   Privacy Policy and Terms of Use. Numbered sections with anchors, because a
   legal document gets cited: "section 6" and "#data-retention" both have to
   resolve to the same place. */
.mnb-legal__meta {
  margin: 0 0 22px;
  font-size: .85rem;
  color: var(--mnb-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  align-items: baseline;
}
.mnb-legal__ver {
  font-family: var(--mnb-font-impact);
  text-transform: uppercase;
  font-size: .78rem;
  letter-spacing: .03em;
  opacity: .8;
}
.mnb-legal__toc {
  margin: 0 0 30px;
  padding: 16px 18px;
  border: 1px solid var(--mnb-border);
  border-radius: var(--mnb-radius-sm);
  background: rgba(255, 255, 255, .3);
}
[data-theme="dark"] .mnb-legal__toc { background: rgba(255, 255, 255, .04); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .mnb-legal__toc { background: rgba(255, 255, 255, .04); }
}
.mnb-legal__toc-title {
  margin: 0 0 10px;
  font-family: var(--mnb-font-impact);
  text-transform: uppercase;
  font-size: .9rem;
  font-weight: 400;
  letter-spacing: .03em;
  color: var(--mnb-text);
}
.mnb-legal__toc ol { margin: 0; padding-left: 1.35em; }
.mnb-legal__toc li { margin: 3px 0; font-size: .9rem; }

/* scroll-margin so an anchor jump does not park the heading under the sticky
   header -- the reader would land on a section and see the one above it. */
.mnb-legal__section { scroll-margin-top: 90px; margin: 0 0 26px; }
.mnb-legal__heading {
  margin: 0 0 8px;
  font-family: var(--mnb-font-impact);
  text-transform: uppercase;
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--mnb-text);
}
.mnb-legal__no { color: var(--mnb-muted); margin-right: .35em; }
.mnb-legal__section p { margin: 0 0 12px; line-height: 1.65; }
.mnb-legal__section p:last-child { margin-bottom: 0; }
.mnb-legal__section strong { font-weight: 600; color: var(--mnb-text); }
.mnb-legal__error { color: var(--mnb-no); font-weight: 600; }

/* ── FOOTNOTE MARKERS: numbered discs ──────────────────────────────────────
   Replaces the escalating asterisks. Fixed width at any count, so the footnote
   list aligns into a column instead of going ragged as the marker grows.

   The palette lives in state.php (mnb_fn_mark) and deliberately excludes
   green/amber/red, which are the medallion tier signals on this page — a disc
   must never be mistakable for a tier. The number carries the meaning; hue only
   helps the eye pair marker to note, so this reads fine in greyscale and print. */

.mnb-fn {
  display: inline-block;
  min-width: 15px;
  height: 15px;
  line-height: 15px;
  padding: 0 2px;
  border-radius: 999px;
  /* ONE COLOUR, SET BY THEME, WITH THE MEDALLIONS' GLOSS (2026-09-14).
     Light takes the header's grey family; dark takes house gold. The sheen is
     the same recipe the medallions use -- a radial body gradient lit from
     50% 30%, plus an elliptical white highlight in ::before -- minus the white
     ring, which would make a 15px disc read as a tiny medallion.

     #23365E, not the header's exact #102D44. The gloss lays white over the
     top of the disc, which lifts the background behind the numeral, so the
     grey has to step down to pay for it. Measured from rendered pixels at the
     shipped gloss strength (.36):

         #102D44 header grey   under AA
         #69777D               3.84:1  under
         #5B676D               4.46:1  under -- so close it is not worth risking
         #23365E  (shipped)    4.72:1  ok

     Same hue (200deg) and saturation throughout; only lightness moves. The
     sheen lifts the apparent brightness back up, so it still reads as the
     header grey rather than a darker slate.

     Dark uses the SAME gold gradient as the medallions -- #F6D06A -> #C99A1E,
     the pair on .mnb-med--opt -- rather than the bare --mnb-gold token. Those
     two are the same hue (47deg) and saturation, and their bottom stops are
     within a percent; the difference was the top stop, 65% lightness on the
     medallion against 50% on --mnb-gold. Matching it makes the disc read as
     the same material as the checkmarks instead of a slightly deeper cousin.

     The numeral stays --mnb-gold-on (#141B28), which exists because white on
     gold is 1.5:1 and unreadable. Gold takes a fuller gloss than the grey
     because a white highlight over a DARK glyph raises contrast rather than
     lowering it. */
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 50% 30%, #23365E, #4A5459);
  color: #fff;
  /* Absolute, so the <sup> wrapper's font-size reduction cannot shrink the
     number into illegibility. */
  font-size: 9.5px;
  font-weight: 700;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: 0;
  text-align: center;
  /* NEXT TO A LABEL the disc rides at the TOP of the text, like the
     superscript it replaces. text-top aligns it to the FONT's ascender rather
     than to the line box -- `top` would follow the line-height instead, so a
     chip with roomier leading would fling the disc higher than one without.
     The footnote list overrides this to middle; see below. */
  vertical-align: text-top;
  margin-left: 4px;
  /* text-indent INHERITS into inline-block, so the footnote list's hanging
     indent (text-indent: -22px) was also being applied inside the disc and
     pushing the numeral 22px left, clean out of its own circle -- discs
     rendered empty. Reset it here so the disc is immune to whatever indent
     its container uses. */
  text-indent: 0;
}

/* THE HIGHLIGHT. Same shape as .mnb-med::before, shortened from 42% to 30%:
   a medallion's glyph is 34px and sits clear of the sheen, but a 9.5px numeral
   in a 15px disc occupies the middle 60% and would sit under it. 30% puts the
   highlight above the numeral's cap. */
.mnb-fn::before {
  content: "";
  position: absolute;
  top: 6%;
  left: 10%;
  right: 10%;
  height: 30%;
  border-radius: 50%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .36), rgba(255, 255, 255, 0));
  pointer-events: none;
}

/* The marker sits inside <sup class="mnb-chip__star">. Neutralise the
   superscript lift and shrink: the disc positions itself. */
.mnb-chip__star { font-size: 100%; vertical-align: baseline; top: 0; }

/* IN THE FOOTNOTE LIST the disc LEADS the line rather than trailing a label,
   so it wants centring on that line, not lifting above it -- text-top there
   would sit the disc above its own sentence. No left margin, a little room
   before the text. */
.mnb-id-footnote__star .mnb-fn,
.mnb-id-footnote .mnb-fn {
  margin-left: 0;
  margin-right: 6px;
  vertical-align: middle;
}

/* Dark mode: gold disc, charcoal numeral. No brightness filter any more --
   that existed to stop the old mid-tone palette sinking into the dark plate,
   and gold has no such problem. #141B28 on #F2C043 measures 11.15:1. */
[data-theme="dark"] .mnb-fn {
  background: radial-gradient(circle at 50% 30%, #F6D06A, #C99A1E);
  color: var(--mnb-gold-on, #141B28);
}
[data-theme="dark"] .mnb-fn::before {
  height: 40%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .48), rgba(255, 255, 255, 0));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .mnb-fn {
    background: radial-gradient(circle at 50% 30%, #F6D06A, #C99A1E);
    color: var(--mnb-gold-on, #141B28);
  }
  :root:not([data-theme]) .mnb-fn::before {
    height: 40%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, .48), rgba(255, 255, 255, 0));
  }
}
/* ── FEATURE SCREENSHOT ROTATOR ────────────────────────────────────────────
   Two frames of the same screen stacked in one box, crossfading between
   themes. Appended to mnb-theme.css.

   The box is sized by aspect-ratio rather than a fixed height, so it scales
   with the column and reserves its space before the images decode -- no
   layout shift on load. All 24 shots are 760x1648, so one ratio serves. */

.mnb-feature__shot--rot {
  position: relative;
  aspect-ratio: 760 / 1648;
  overflow: hidden;
}

.mnb-feature__shot--rot .mnb-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 900ms is long enough to read as a dissolve rather than a cut, short
     enough not to sit visibly half-way for long. */
  transition: opacity 900ms ease-in-out;
}

/* Light is the resting state; the dark frame fades in over it. Stacking the
   dark one on top means only ONE opacity animates, so the two can never both
   be mid-fade and show the background through the gap. */
.mnb-feature__shot--rot .mnb-shot--light { opacity: 1; }
.mnb-feature__shot--rot .mnb-shot--dark  { opacity: 0; }
.mnb-feature__shot--rot.is-dark .mnb-shot--dark { opacity: 1; }

/* NO-SCRIPT FALLBACK, scoped to boxes the script has NOT claimed.
   The script adds .is-live on its first paint, which switches these off
   entirely -- so the two sets never compete on specificity. They would
   otherwise both compute to (0,3,0) and be decided by source order, which
   works until someone reorders the file. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .mnb-feature__shot--rot:not(.is-live) .mnb-shot--dark { opacity: 1; }
}
[data-theme="dark"]  .mnb-feature__shot--rot:not(.is-live) .mnb-shot--dark { opacity: 1; }
[data-theme="light"] .mnb-feature__shot--rot:not(.is-live) .mnb-shot--dark { opacity: 0; }

/* Script-controlled: .is-dark is the only thing that decides. */
.mnb-feature__shot--rot.is-live .mnb-shot--dark { opacity: 0; }
.mnb-feature__shot--rot.is-live.is-dark .mnb-shot--dark { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .mnb-feature__shot--rot .mnb-shot { transition: none; }
}

/* ── WHAT'S-NEW SECTION HEADINGS ───────────────────────────────────────────
   A release note whose body starts with "## " is a section heading rather
   than a bullet -- the convention the iOS client already uses. Release 19 is
   the first to carry them (Identification / Commission settings / Journal
   History / Elsewhere); every earlier release has none and renders unchanged.

   Left-aligned deliberately: .mnb-release__head is centred because it is the
   release TITLE, but these sit directly above a left-aligned bullet list and
   centring them would break that column. */

.mnb-release__section {
  margin: 18px 0 6px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mnb-muted, #5b6472);
}

/* The first heading in a release sits right under the centred version line,
   which already carries its own 12px -- no need to stack another 18 on top. */
.mnb-release__head + .mnb-release__section { margin-top: 4px; }

/* Each run of bullets is its own <ul> (an h4 cannot live inside a list), so
   the gap between a list and the next heading comes from the heading's
   margin-top; the list itself needs none. */
.mnb-release__section + .mnb-release__list { margin-top: 0; }

/* ── SUPPORT PAGE: TWO COLUMNS (Jordan, 2026-09-14) ────────────────────────
   Tutorials + FAQ at 67%, release history at 33%.

   MIN-WIDTH, NOT MAX-WIDTH. The rest of this stylesheet is written
   mobile-last (max-width overrides), but this one is inverted on purpose:
   single column is the DEFAULT and the grid only switches on above 900px.
   Written the other way -- grid by default, unstacked below a breakpoint --
   a browser that never matched the query would render a 33% column on a
   phone. This way the fallback is the safe layout, not the broken one. */

.mnb-support-cols { display: block; }

@media (min-width: 901px) {
  .mnb-support-cols {
    display: grid;
    grid-template-columns: 67fr 33fr;
    gap: 0 34px;
    /* STRETCH, not start (2026-09-14). The side column now matches the main
       column's height and grows with it, so the grid row must size both items
       to the same height. That only works because the chain below carries
       min-height: 0 -- see the note there. */
    align-items: stretch;
  }

  /* The first heading in each column carries .mnb-section__title--above's
     50px top margin. Both columns start at the same y, so both would push
     down together -- fine -- but the SIDE column's heading should line up
     with the MAIN column's first heading exactly, so neither is nudged. */
  .mnb-support-col > .mnb-section__title--above:first-child { margin-top: 50px; }

  /* Long prose in a 33% column wants slightly tighter type than a full-width
     card, or the release bullets wrap every three or four words. */
  .mnb-support-col--side .mnb-release__list { font-size: .92rem; padding-left: 18px; }
  .mnb-support-col--side .mnb-release__head { font-size: 1.05rem; }
}

/* ── WHAT'S-NEW SCROLL PANEL ───────────────────────────────────────────────
   The modern answer to what an iframe used to be used for: an independently
   scrolling region. Better than an iframe in every way that matters here --
   same document, so it inherits this stylesheet and the site's fonts, resizes
   with the column instead of a fixed pixel box, and every release stays in the
   page for search engines to index.

   DESKTOP ONLY. On mobile the page is one column and the release history
   simply continues down it; a scroll-within-scroll on a phone is a trap,
   because the inner region swallows the swipe that was meant to move the page. */

@media (min-width: 901px) {
  .mnb-support-col--side .mnb-section { padding-right: 6px; }

  /* HEIGHT COMES FROM THE LEFT COLUMN, and grows with it.
     ------------------------------------------------------------------
     The chain is: grid row -> side column -> card -> scroll region, each
     passing its height down, and every link carries min-height: 0.

     That zero is the whole trick. A flex item defaults to min-height: auto,
     meaning "never shrink below my content" -- and this content is ~25,000px.
     Left at auto, the release history would size the grid row and the LEFT
     column would stretch to 25,000px instead. Setting 0 lets the panel be
     told its height rather than announcing one, so the row is sized by the
     tutorials and FAQ alone and the panel fills whatever that comes to. */
  .mnb-support-col--side {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .mnb-support-col--side .mnb-section {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  /* THE PANEL IS TAKEN OUT OF FLOW, and that is the part that actually works.
     min-height: 0 was not enough: an `auto` grid track sizes to MAX-content,
     which ignores it, so the release history still drove the row height and
     the left column stretched to match. Measured in Chrome: both a 3-FAQ and
     a 12-FAQ page came out at exactly 1079px, sized by the side column.

     Absolutely positioned children contribute NOTHING to their parent's
     height. So the card measures as empty, the row is sized by the tutorials
     and FAQ alone, the card flexes to fill that, and the panel fills the card.
     The padding moves onto the panel because the card no longer has content
     to pad. */
  .mnb-support-col--side .mnb-section { position: relative; padding: 0; }

  .mnb-support-scroll {
    position: absolute;
    inset: 0;
    padding: 4px 14px 6px;   /* what .mnb-support-body carried */
    overflow-y: auto;
    overscroll-behavior: contain;   /* reaching the end does not start
                                       scrolling the page behind it */
    padding-right: 10px;            /* keeps text off the scrollbar */
  }

  /* STICKY REMOVED. It earned its place when the panel was a viewport-height
     box that would otherwise scroll away. Now the panel is exactly as tall as
     the column beside it, so the two end together and there is nothing left
     for it to stick to -- sticky would be a no-op that reads as intent. */

  /* A focus ring on the region itself: it is tabbable, so a keyboard reader
     must be able to see where they are. */
  .mnb-support-scroll:focus-visible {
    outline: 2px solid var(--mnb-link);
    outline-offset: 4px;
    border-radius: 6px;
  }

  /* Fade the last few pixels so it reads as "more below" rather than a
     hard crop. Masked, not a gradient overlay, so it works on either theme
     without knowing the card colour. */
  .mnb-support-scroll {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
  }
  /* ...but not once the reader has reached the bottom, where a fade would
     just look like a rendering fault. */
  .mnb-support-scroll.is-end {
    -webkit-mask-image: none;
            mask-image: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mnb-support-scroll { scroll-behavior: auto; }
}

/* ── BODY CONTENT: TUCK IN 5px AT DESKTOP WIDTHS (Jordan, 2026-09-14) ──────
   The page content sat flush to the container edge at max width while the
   header's own content was inset well inside it:

       .mnb-header__inner   max-width 1080 + 28px padding  -> content 1024 wide
       .mnb-main            max-width 1120 + 20px padding  -> content 1080 wide

   So body content ran 28px WIDER than the header content on each side, which
   is what reads as the title and breadcrumb hanging off the edge. 25px pulls
   it in a hairline without chasing the header's inset, which would have moved
   everything on the page.

   HEADER AND FOOTER ARE DELIBERATELY UNTOUCHED -- they keep their own
   max-width and padding.

   min-width: 769px, not a max-width override, for two reasons: --mnb-maxw
   drops to 100% at 768px and below, so the centred layout this is correcting
   only exists above that; and writing it as min-width means a browser that
   fails to match the query keeps the current behaviour rather than inheriting
   a desktop value on a phone.

   Applies to every page -- the title, breadcrumbs, sections and cards all sit
   in .mnb-main, so they move together and stay aligned with each other. */
@media (min-width: 769px) {
  .mnb-main { padding-left: 25px; padding-right: 25px; }
}

/* ── MOBILE: BACKGROUND DRIFTS ON SCROLL (Jordan, 2026-09-14) ──────────────
   The page background is body::before, position: fixed with inset: 0. On
   iOS Safari a fixed element pinned by inset tracks the DYNAMIC viewport --
   so as the address bar collapses while you scroll, the layer resizes. Its
   background is cover-sized and the vignette is centred at 50% 50%, so both
   recompute on every resize and the centre slides by half the toolbar's
   height. That is the "scrolls up about halfway": it is not scrolling, it
   is re-centring on a box that keeps changing height.

   Fix: pin the top, and give the layer the LARGE viewport height, which
   does not change while the toolbar moves. 100vh first as the fallback --
   on iOS that is already the large viewport -- then 100lvh where supported.
   On desktop there is no dynamic toolbar, so this changes nothing there. */
body::before {
  inset: 0 0 auto 0;
  height: 100vh;
  height: 100lvh;
}

/* The open menu: scrolling inside it must not chain through to the page.
   Pairs with the body lock in footer.php, which is what actually stops the
   page moving behind the menu -- html { overflow: hidden } never did that
   on iOS, which ignores it for touch. */
.mnb-nav { overscroll-behavior: contain; }

/* ── MOBILE: BACKGROUND STILL MOVING ON SCROLL (Jordan, 2026-09-14) ────────
   The fixed-height fix above was right but not sufficient. What Jordan's
   screenshot shows is the page's BASE colour -- --mnb-bg, #FBFAF7 in light,
   a near-white -- appearing as a strip where the grey background layer should
   be. So the layer is lagging behind the scroll and its lower edge sweeps into
   view.

   Nothing in the stylesheet breaks position: fixed here -- checked every rule
   on html, :root and body for transform, filter, contain, container-type and
   will-change, and none carries one. This is iOS Safari: during momentum
   scrolling it can leave a fixed PSEUDO-element on the main painting layer,
   where it moves with the content until the scroll settles.

   1. PROMOTE IT. translateZ(0) + will-change gives the layer its own
      compositing layer, which iOS then holds in place during the scroll.
      Transform on the fixed element ITSELF does not affect its own fixed
      positioning -- only that of its descendants, and it has none. */
body::before {
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  will-change: transform;
}

/* 2. MAKE ANY SEAM INVISIBLE. Even if some future Safari lets the edge peek
      again, what shows through is html's own background. Painting the same
      vignette colour over the same base there means an exposed edge shows the
      SAME grey the layer has at its edges, instead of a white strip.

      Built from the existing tokens, so it is theme-aware for free: in light it
      composites to about #E9E9E9, in dark to about #0A0E0F -- the layer's edge
      tone in each case. It also makes the rubber-band overscroll area match
      the page instead of flashing near-white. Only the grain is missing from
      it, which at a sliver's width is not visible. */
html {
  background-image: linear-gradient(var(--mnb-vignette), var(--mnb-vignette));
}

/* ============================================================================
   MAIL POST — site-specific components (web-001)
   Everything below is new for mailpostcompany.com. Theme-dependent colours go
   through the --mpc-* tokens so each rule is written once; the three token
   blocks (light, explicit dark, device dark) are the only place they change.
   ========================================================================== */
:root {
  --mpc-chip-bg:      rgba(255, 255, 255, 0.85);
  --mpc-chip-border:  #DDD6C8;
  --mpc-chip-tick:    #1D4E89;
  --mpc-logo-bg:      #FFFFFF;
  --mpc-open:         #1E7A52;
  --mpc-closed:       #B5242E;
  --mpc-script:       #000000;   /* light: black (web-056; was navy #102D44) */
}
[data-theme="dark"] {
  --mpc-chip-bg:      rgba(255, 255, 255, 0.04);
  --mpc-chip-border:  rgba(112, 128, 144, 0.40);
  --mpc-chip-tick:    var(--mnb-gold-text);
  --mpc-logo-bg:      #F4F2EC;
  --mpc-open:         #3DBA86;
  --mpc-closed:       #E06666;
  --mpc-script:       var(--mnb-gold-text);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --mpc-chip-bg:      rgba(255, 255, 255, 0.04);
    --mpc-chip-border:  rgba(112, 128, 144, 0.40);
    --mpc-chip-tick:    var(--mnb-gold-text);
    --mpc-logo-bg:      #F4F2EC;
    --mpc-open:         #3DBA86;
    --mpc-closed:       #E06666;
    --mpc-script:       var(--mnb-gold-text);
  }
}

/* Logo: the script mark is 519 x 116, so 50px tall = 224px wide. */
.mnb-header__brand img { height: 50px; width: auto; }
@media (max-width: 480px) { .mnb-header__brand img { height: 38px; } }

/* EN | ES switch — sits on the navy bar, so white in both themes, gold = current. */
.mpc-lang { display: inline-flex; align-items: center; margin-right: 6px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px; overflow: hidden; }
.mpc-lang a {
  font-family: var(--mnb-font-impact); font-size: .85rem; letter-spacing: .04em;
  padding: 4px 9px; line-height: 1.2; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); text-decoration: none;
}
.mpc-lang a + a { border-left: 1px solid rgba(255, 255, 255, .45); }
.mpc-lang a[aria-current="true"] { background: var(--mnb-gold); color: #141B28; text-shadow: none; }
.mpc-lang a:hover { text-decoration: none; color: var(--mnb-gold-text); }
.mpc-lang a[aria-current="true"]:hover { color: #141B28; }

/* Phone in the nav: desktop shows it gold; in the mobile menu it is the last line. */
.mnb-nav__list .mpc-nav__call a { color: var(--mnb-gold-text); }
@media (max-width: 1100px) and (min-width: 861px) { .mnb-nav__list .mpc-nav__call { display: none; } }
@media (max-width: 860px) { .mnb-nav__list .mpc-nav__call a { font-size: 2rem; margin-top: 18px; } }

/* ---- Hero ---------------------------------------------------------------- */
.mpc-hero { text-align: center; padding: 18px 0 6px; }
.mpc-hero .mnb-page-title { margin-bottom: 38px; }
.mpc-hero__script { font-family: var(--mnb-font-display); text-transform: uppercase; font-size: 1.6rem; line-height: 1.2; color: var(--mpc-script); margin: 0 0 6px; }
@media (max-width: 600px) {
  .mpc-hero .mnb-page-title { font-size: 2.2rem; }
  .mpc-hero__script { font-size: 1.3rem; }
}

/* Open / closed line */
.mpc-status { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .95rem; margin: 0 0 14px; }
.mpc-status__dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.mpc-status.is-open   { color: var(--mpc-open); }
.mpc-status.is-closed { color: var(--mpc-closed); }
.mpc-status.is-open .mpc-status__dot   { background: var(--mpc-open); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mpc-open) 25%, transparent); }
.mpc-status.is-closed .mpc-status__dot { background: var(--mpc-closed); }

/* ---- Buttons: raised gradient, one text size. Green = do, black = view. -- */
.mpc-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 4px 0 6px; }
.mpc-visit__info .mpc-actions { justify-content: flex-start; margin-top: 14px; }
.mpc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 22px; border-radius: 10px;
  font-family: var(--mnb-font-impact); font-size: 1.05rem; letter-spacing: .03em; text-transform: uppercase;
  color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .35); text-decoration: none;
  border: 1px solid rgba(0, 0, 0, .35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 3px 8px rgba(0, 0, 0, .25);
  transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
}
.mpc-btn:hover  { text-decoration: none; filter: brightness(1.08); }
.mpc-btn:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 3px rgba(0, 0, 0, .25); }
.mpc-btn--go   { background: linear-gradient(to bottom, #4CB86A 0%, #2E8B47 55%, #237638 100%); }
.mpc-btn--view { background: linear-gradient(to bottom, #4A4F57 0%, #24282E 55%, #121519 100%); }
[data-theme="dark"] .mpc-btn--view { border-color: rgba(255, 255, 255, .25); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .mpc-btn--view { border-color: rgba(255, 255, 255, .25); } }

/* ---- Prose card ---------------------------------------------------------- */
.mpc-prose p { font-size: 1.05rem; line-height: 1.7; max-width: 72ch; margin: 0 auto 12px; }
.mpc-prose p:last-child { margin-bottom: 0; }

/* ---- Services ------------------------------------------------------------ */
.mpc-carriers { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 4px 0 20px; }
.mpc-carriers li { background: var(--mpc-logo-bg); border-radius: 8px; padding: 8px 14px; box-shadow: var(--mnb-shadow); display: flex; align-items: center; }
.mpc-carriers img { display: block; height: 33px; width: auto; }
.mpc-svc-grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 860px) { .mpc-svc-grid { grid-template-columns: repeat(2, 1fr); } }
.mpc-svc-grid li {
  position: relative; padding: 12px 14px 12px 38px; border-radius: var(--mnb-radius-sm);
  background: var(--mpc-chip-bg); border: 1px solid var(--mpc-chip-border);
  font-size: .98rem; line-height: 1.35;
}
.mpc-svc-grid li::before { content: "\2713"; position: absolute; left: 14px; top: 12px; font-weight: 700; color: var(--mpc-chip-tick); }
@media (max-width: 600px) { .mpc-svc-grid { grid-template-columns: 1fr; } }
.mpc-notary-notice { margin: 16px auto 0; max-width: 80ch; text-align: center; font-size: .75rem; line-height: 1.5; color: var(--mnb-muted); text-transform: uppercase; letter-spacing: .02em; }
.mpc-notary-notice + .mpc-notary-notice { margin-top: 6px; }

/* ---- Visit: info card + map ---------------------------------------------- */
.mpc-visit { display: grid; grid-template-columns: 1fr 1.1fr; gap: 22px; align-items: stretch; margin-top: 34px; }
.mpc-visit > .mnb-section { margin-top: 0; }
.mpc-visit__info p { line-height: 1.6; margin: 0 0 12px; }
.mpc-visit__addr { font-size: 1.2rem; font-weight: 600; line-height: 1.5; }
.mpc-visit__addr a { color: var(--mnb-text); }
.mpc-visit__sub { font-family: var(--mnb-font-impact); font-weight: 400; text-transform: uppercase; letter-spacing: .02em; font-size: 1.25rem; margin: 18px 0 6px; }
.mpc-hours { border-collapse: collapse; margin: 0 0 12px; width: 100%; max-width: 360px; }
.mpc-hours th, .mpc-hours td { text-align: left; padding: 6px 0; border-bottom: 1px solid var(--mnb-border); font-size: .98rem; }
.mpc-hours th { font-weight: 600; padding-right: 16px; }
.mpc-hours td { text-align: right; white-space: nowrap; }
.mpc-visit__map { border-radius: var(--mnb-radius); overflow: hidden; border: 1px solid var(--mnb-border); box-shadow: var(--mnb-shadow); min-height: 360px; background: var(--mnb-surface-2); }
.mpc-visit__map iframe { display: block; width: 100%; height: 100%; min-height: 360px; border: 0; }
@media (max-width: 860px) { .mpc-visit { grid-template-columns: 1fr; } }

/* Section anchors land below the sticky header. */
#about, #services, #visit { scroll-margin-top: 110px; }

/* ---- Footer: address + hours lines --------------------------------------- */
.mpc-footer__nap a { color: inherit; font-weight: 600; }
.mpc-footer__hours { margin-top: 6px; }


/* ---- English / Español: a row under the header on every page --------------
   (web-050) Moved out of the navy bar. Raised segments, gold = current; the
   colours come from the theme tokens, so light, dark and auto all follow. */
.mpc-langbar { display: flex; justify-content: center; padding: 16px 16px 0; position: relative; z-index: 1; }
.mpc-langpick { display: inline-flex; border: 1px solid var(--mnb-border); border-radius: 9px; overflow: hidden; background: var(--mnb-surface); box-shadow: var(--mnb-shadow); }
.mpc-langpick a {
  padding: 9px 18px; font-size: 14px; font-weight: 700; line-height: 1.2; text-decoration: none; color: var(--mnb-text);
  background-color: var(--mnb-surface);
  background-image: linear-gradient(to bottom, rgba(255,255,255,.30) 0%, rgba(255,255,255,.10) 45%, rgba(0,0,0,.02) 60%, rgba(0,0,0,.14) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(0,0,0,.12);
  transition: filter .12s;
}
.mpc-langpick a + a { border-left: 1px solid var(--mnb-border); }
.mpc-langpick a:hover { text-decoration: none; filter: brightness(1.05); color: var(--mnb-text); }
.mpc-langpick a[aria-current="true"] { background-color: var(--mnb-gold); color: #141B28;
  background-image: linear-gradient(to bottom, rgba(255,255,255,.45) 0%, rgba(0,0,0,.10) 100%); }
.mpc-langpick a[aria-current="true"]:hover { color: #141B28; }
[data-theme="dark"] .mpc-langpick a { background-image: linear-gradient(to bottom, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 45%, rgba(0,0,0,.06) 60%, rgba(0,0,0,.22) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.25); }
[data-theme="dark"] .mpc-langpick a[aria-current="true"] { background-image: linear-gradient(to bottom, rgba(255,255,255,.45) 0%, rgba(0,0,0,.10) 100%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .mpc-langpick a { background-image: linear-gradient(to bottom, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 45%, rgba(0,0,0,.06) 60%, rgba(0,0,0,.22) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.25); }
  :root:not([data-theme]) .mpc-langpick a[aria-current="true"] { background-image: linear-gradient(to bottom, rgba(255,255,255,.45) 0%, rgba(0,0,0,.10) 100%); }
}
.mpc-langbar + .mnb-main { padding-top: 20px; }

/* ---- HEADER + FOOTER BARS (web-051, Jordan 2026-10-27) ---------------------
   Desktop header: full width, square corners (was an inset bar rounded at the
   bottom). Light mode: back to the original slate bar #7C8A91 (it had been
   changed to navy #102D44), on phones too, and the phone menu panel with it.
   The footer sits on the same colour as the header in both themes, full width,
   with its text in white and gold the way the header's is. Dark mode keeps its
   own bar colour. */
.mnb-header::before { max-width: none; border-radius: 0; background-color: #7C8A91; }
@media (max-width: 860px) { .mnb-nav { background: #7C8A91; } }

.mnb-footer { max-width: none; margin: 0; padding: 28px 20px 48px; border-top: 0; background-color: #7C8A91; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
[data-theme="dark"] .mnb-footer { text-shadow: none; }
.mnb-footer > * { max-width: calc(var(--mnb-maxw) - 40px); margin-left: auto; margin-right: auto; }
.mnb-footer .mnb-disclaimer { color: #fff; }
.mnb-footer .mnb-footer__nav a { color: #fff; }
.mnb-footer .mnb-footer__nav a:hover { color: var(--mnb-gold-text); }
.mnb-footer .mnb-footer__copy { color: var(--mnb-gold-text); }
[data-theme="dark"] .mnb-footer { background-color: rgba(14, 32, 48, 0.8); }
@media (max-width: 860px) { [data-theme="dark"] .mnb-footer { background-color: #0E2030; } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .mnb-footer { background-color: rgba(14, 32, 48, 0.8); }
}
@media (prefers-color-scheme: dark) and (max-width: 860px) {
  :root:not([data-theme]) .mnb-footer { background-color: #0E2030; }
}

/* ---- Page titles (web-053, Jordan 2026-10-27) -----------------------------
   Light mode: the charcoal grey #525252 (was navy #2B3A55); dark keeps its own.
   Phones: the home title 20% smaller than before (2.2rem -> 1.76rem). */
.mnb-page-title { color: #525252; }
@media (max-width: 600px) { .mpc-hero .mnb-page-title { font-size: 1.426rem; } }   /* another 10% off twice (web-054, web-055) */

/* Hero order (web-057): title first, the "family owned" script line under it (below the title's
   reflection), then the open/closed line. */
.mpc-hero .mnb-page-title { margin-bottom: 14px; }     /* (web-058) the script line tucks up into the reflection's faded tail */
.mpc-hero__script { margin: 0 0 16px; position: relative; }
@media (max-width: 600px) { .mpc-hero .mnb-page-title { margin-bottom: 10px; } }
@media (max-width: 600px) { .mpc-hero__script { font-size: 1.17rem; } }   /* phones: 10% smaller (web-059; was 1.3rem) */
/* web-060: script line closer still to the title */
.mpc-hero .mnb-page-title { margin-bottom: 4px; }
.mpc-hero__script { line-height: 1.1; }
@media (max-width: 600px) { .mpc-hero .mnb-page-title { margin-bottom: 2px; } }

/* ---- Home: one big card under the hero (web-061) ---------------------------
   The card is the usual frosted section card; what used to be separate cards
   inside it lose their own frame and sit on the big card, each under its
   centred title, with a hairline between them. The map keeps its frame. */
.mpc-bigcard { margin-top: 18px; padding: 26px 32px 30px; }
.mpc-bigcard__top { text-align: center; }
.mpc-bigcard__top .mpc-status { margin-bottom: 12px; }
.mpc-bigcard .mnb-section { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; box-shadow: none; border-radius: 0; padding: 0; margin-top: 0; }
[data-theme="dark"] .mpc-bigcard .mnb-section { background: none; border: 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .mpc-bigcard .mnb-section { background: none; border: 0; } }
.mpc-bigcard .mnb-section__title--above { margin: 30px 0 26px; padding-top: 30px; border-top: 1px solid var(--mnb-border); }
.mpc-bigcard .mnb-section__title--above::after { top: calc(100% - 0.156em); }
.mpc-bigcard .mnb-section__title--above + .mnb-section { margin-top: 0; }
.mpc-bigcard .mpc-visit { margin-top: 0; }
@media (max-width: 600px) {
  .mpc-bigcard { padding: 20px 16px 22px; }
  .mpc-bigcard .mnb-section__title--above { margin: 24px 0 22px; padding-top: 24px; }
}
.mpc-prose p { max-width: none; }   /* web-063: About text runs the full width of the card on desktop (was held to 72ch) */
.mpc-bigcard__top .mpc-status { margin-bottom: 0; }   /* web-065: the Call / Directions buttons left the top of the card */

/* Carriers as words in Anton (web-066), not logo pictures: same chips, themed for light and dark. */
.mpc-carriers li { font-family: var(--mnb-font-impact); font-size: 1.45rem; line-height: 1; letter-spacing: .03em; text-transform: uppercase;
  color: var(--mnb-text); background: var(--mnb-surface); border: 1px solid var(--mnb-border); padding: 10px 20px; }
@media (max-width: 600px) { .mpc-carriers li { font-size: 1.2rem; padding: 9px 16px; } }
.mnb-section__title--above { color: #000000; }   /* web-067: section titles black in light mode (dark keeps #d3dade) */

/* ---- Service pages (web-068: Shipping is the first, and the template) ----- */
.mpc-bigcard__top.mpc-prose { text-align: left; }
.mpc-prose p a { color: var(--mnb-link); font-weight: 600; }
.mpc-bigcard .mpc-carriers { margin: 0 0 18px; }
.mpc-actions--end { justify-content: center; margin: 26px 0 4px; }
/* A home-page service tile that has its own page: the whole tile is the link, with an arrow. */
.mpc-svc-grid li.has-link { padding: 0; }
.mpc-svc-grid li.has-link a { display: block; padding: 12px 34px 12px 38px; color: inherit; font-weight: 600; text-decoration: none; position: relative; }
.mpc-svc-grid li.has-link a::after { content: "\203A"; position: absolute; right: 14px; top: 50%; transform: translateY(-52%); font-size: 1.3rem; line-height: 1; color: var(--mnb-link); }
.mpc-svc-grid li.has-link:hover { border-color: var(--mnb-link); }

/* ---- Menu with a sub-menu (web-070) ----------------------------------------
   Shipping opens Domestic / International: on a computer it drops down under
   the item on hover or keyboard focus, on the same colour as the header bar;
   in the phone menu the two sit indented under Shipping, always shown. */
.mpc-nav__has-sub { position: relative; }
.mpc-nav__caret { display: inline-block; width: 0; height: 0; margin-left: 6px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .85; }
.mpc-nav__sub { list-style: none; margin: 0; padding: 0; }
.mnb-nav__list .mpc-nav__sub li::before { content: none; }
@media (min-width: 861px) {
  .mpc-nav__sub {
    position: absolute; top: 100%; left: 0; z-index: 120; min-width: 250px; padding: 8px 0;
    background: #7C8A91; border-radius: 0 0 10px 10px; box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
    opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility 0s linear .15s;
  }
  .mpc-nav__has-sub:hover > .mpc-nav__sub, .mpc-nav__has-sub:focus-within > .mpc-nav__sub {
    opacity: 1; visibility: visible; transform: none; transition: opacity .15s, transform .15s;
  }
  .mpc-nav__sub a { display: flex; width: 100%; padding: 9px 18px; font-size: 1rem; }
  [data-theme="dark"] .mpc-nav__sub { background: #0E2030; }
}
@media (min-width: 861px) and (prefers-color-scheme: dark) { :root:not([data-theme]) .mpc-nav__sub { background: #0E2030; } }
@media (max-width: 860px) {
  .mpc-nav__caret { display: none; }
  .mpc-nav__sub { padding: 0 0 6px 22px; }
  .mnb-nav .mpc-nav__sub a { font-size: 1.7rem; padding: 4px 14px; opacity: .92; }
  /* ten items: a touch smaller than before so the whole list fits a phone screen */
  .mnb-nav a, .mnb-nav__list a { font-size: 2.3rem; }
  .mnb-nav .mpc-nav__sub a { font-size: 1.55rem; }
}

/* Mailboxes page (web-071): the two ID lists side by side, one column on phones. */
.mpc-idcols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 18px 0 6px; }
.mpc-idcols .mpc-visit__sub { margin-top: 0; }
.mpc-svc-grid.mpc-svc-grid--one { grid-template-columns: 1fr; }
.mpc-note { font-size: .92rem; color: var(--mnb-muted); margin-top: 14px; }
@media (max-width: 760px) { .mpc-idcols { grid-template-columns: 1fr; } }
/* (web-071) A hidden drop-down is taken out of the page entirely, not just faded out: the faded one
   still showed through the frosted panels as a faint ghost. */
@media (min-width: 861px) {
  .mpc-nav__sub { display: none; }
  .mpc-nav__has-sub:hover > .mpc-nav__sub, .mpc-nav__has-sub:focus-within > .mpc-nav__sub { display: block; animation: mpcSubIn .15s ease; }
}
@keyframes mpcSubIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Contact page (web-073): its first section title opens the card, so no divider line above it. */
.mpc-bigcard .mnb-section__title--above.mpc-first { margin-top: 4px; padding-top: 0; border-top: 0; }

/* Contact: phone and fax behind "Click to reveal" (web-074). */
.mpc-contact-lines { display: flex; flex-direction: column; gap: 6px; margin: -4px 0 14px; font-size: 1.05rem; }
.mpc-cl b { display: inline-block; min-width: 4.8em; font-weight: 700; }
.mpc-reveal { font: inherit; font-weight: 600; color: var(--mnb-link); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.mpc-reveal:hover { filter: brightness(1.15); }
.mpc-revealed { font-weight: 700; color: var(--mnb-text); }
a.mpc-revealed { text-decoration: none; }

/* Contact (web-075): "Address" and "Directions" headings open the two columns on the same row; the
   map fills the rest of its column. */
.mpc-visit__sub--first { margin-top: 0; }
.mpc-visit__mapcol { display: flex; flex-direction: column; min-width: 0; }
.mpc-visit__mapcol .mpc-visit__map { flex: 1; }
.mpc-bigcard--visit .mpc-visit { margin-top: 4px; }

/* ---- Title left, English / Español right (web-077) -------------------------
   On a computer the language switch floats to the right of the page title, on
   the title's row, and the title and its script line read from the left. The
   card below clears it. Phones keep the centred switch above a centred title. */
.mpc-langbar + .mnb-main { padding-top: 32px; }            /* (the bar now lives inside main) */
@media (min-width: 861px) {
  .mnb-main > .mpc-langbar { float: right; padding: 0; margin: 22px 0 0 24px; }
  .mpc-hero { text-align: left; }
  .mpc-bigcard, .trkw .pkg, .trkw .findbox, .trkw > .note { clear: both; }
}
@media (max-width: 860px) {
  .mnb-main:has(> .mpc-langbar) { padding-top: 16px; }
  .mnb-main > .mpc-langbar { padding: 0 0 4px; }
}

/* Keys page (web-078): the two services side by side up top, each a link down to its own section. */
.mpc-twoway { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0 2px; }
.mpc-twoway__card { display: flex; flex-direction: column; gap: 3px; padding: 16px 18px; border-radius: var(--mnb-radius); text-decoration: none;
  background: var(--mpc-chip-bg); border: 1px solid var(--mpc-chip-border); color: var(--mnb-text); }
.mpc-twoway__card:hover { text-decoration: none; border-color: var(--mnb-link); }
.mpc-twoway__card b { font-family: var(--mnb-font-impact); font-weight: 400; font-size: 1.5rem; line-height: 1.1; text-transform: uppercase; letter-spacing: .02em; }
.mpc-twoway__card span { font-size: 1rem; }
.mpc-twoway__card em { font-style: normal; font-weight: 700; font-size: .95rem; color: var(--mpc-open); }
.mpc-twoway__card + .mpc-twoway__card em { color: var(--mnb-cond); }
@media (max-width: 600px) { .mpc-twoway { grid-template-columns: 1fr; } }
#copies, #fobs { scroll-margin-top: 110px; }

/* Print page (web-079): the three ways to send files, one per line, each with its lead in bold. */
.mpc-ways { margin: 14px 0 0; }
.mpc-ways li b { font-weight: 700; }
.mpc-ways li a { color: var(--mnb-link); font-weight: 600; }

/* (web-080) Call and Directions buttons are for phones: on a computer they're hidden on every page,
   and a button row left with nothing in it goes too. Other buttons (Track a package, Upload your
   files) stay. */
@media (min-width: 861px) {
  a.mpc-btn[href^="tel:"], a.mpc-btn[href*="google.com/maps"], a.mpc-btn.mpc-reveal-call { display: none; }
  .mpc-actions:not(:has(> a.mpc-btn:not([href^="tel:"]):not([href*="google.com/maps"]):not(.mpc-reveal-call))) { display: none; }
}

/* Notary (web-082): the Texas notice on the Spanish page (Gov't Code §406.017(b)) - in English and
   Spanish, in letters of a conspicuous size - and the fee table. */
.mpc-legal { margin: 22px 0 6px; padding: 18px 20px; border: 2px solid var(--mnb-text); border-radius: var(--mnb-radius); background: var(--mnb-surface); }
.mpc-legal__big { font-size: 1.12rem; line-height: 1.4; font-weight: 800; letter-spacing: .01em; margin: 0 0 10px; color: var(--mnb-text); }
.mpc-legal p { margin: 0 0 10px; }
.mpc-fees { max-width: none; margin: 4px 0 0; }
.mpc-fees th { font-weight: 600; }
.mpc-fees th small { font-weight: 400; color: var(--mnb-muted); }

/* Notary (web-083): the "can't accept" list gets a red cross instead of the tick. */
.mpc-svc-grid--no li::before { content: "\2715"; color: #C0392B; }
[data-theme="dark"] .mpc-svc-grid--no li::before { color: #E06666; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .mpc-svc-grid--no li::before { color: #E06666; } }

/* International (web-087): where we ship, as one line in Anton instead of chips. */
.mpc-reach { font-family: var(--mnb-font-impact); font-size: 1.25rem; line-height: 1.3; letter-spacing: .02em; text-transform: uppercase; text-align: center; color: var(--mnb-text); margin: 16px 0 2px; }
@media (max-width: 600px) { .mpc-reach { font-size: 1.05rem; } }

/* Mailboxes page (web-091): box holders' way into their account, at the top of the page. */
.mpc-holder { display: flex; align-items: center; justify-content: space-between; gap: 14px 22px; flex-wrap: wrap; margin: 18px 0 2px; padding: 16px 18px;
  border-radius: var(--mnb-radius); background: var(--mpc-chip-bg); border: 1px solid var(--mpc-chip-border); }
.mpc-holder__text { display: flex; flex-direction: column; gap: 3px; flex: 1 1 320px; }
.mpc-holder__text b { font-family: var(--mnb-font-impact); font-weight: 400; font-size: 1.5rem; line-height: 1.1; text-transform: uppercase; letter-spacing: .02em; }
.mpc-holder__text span { font-size: 1rem; }
.mpc-holder__acts { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mpc-holder__acts .mpc-btn { margin: 0; }
.mpc-holder__first { font-size: .92rem; font-weight: 600; color: var(--mnb-link); }
@media (max-width: 600px) { .mpc-holder__acts { width: 100%; } .mpc-holder__acts .mpc-btn { width: 100%; text-align: center; } }

/* Header menu (web-092, sized in web-093): no dots between the items, and the labels at 19px on a
   computer (from 17.6px), the two squeeze steps in the same proportion. Phones keep their own
   full-screen menu sizes. */
.mnb-nav__list li + li::before { content: none; }
@media (min-width: 861px) {
  .mnb-nav__list { gap: 8px; }
  .mnb-nav__list > li > a { font-size: 1.1875rem; padding: 8px 10px; }            /* 19px */
}
@media (max-width: 1100px) and (min-width: 861px) {
  .mnb-nav__list { gap: 2px; }
  .mnb-nav__list > li > a { font-size: 1.08rem; padding: 8px 8px; }               /* 17.3px */
}
@media (max-width: 980px) and (min-width: 861px) {
  .mnb-nav__list > li > a { font-size: .97rem; padding: 8px 6px; }                /* 15.5px */
}
/* (web-094) The sizes above are for the top row only (they had been reaching the drop-downs too,
   squeezing their right side). Drop-down items: their own size, and room on the right. */
@media (min-width: 861px) {
  .mnb-nav__list .mpc-nav__sub a { font-size: 1.05rem; padding: 10px 34px 10px 20px; }
}

/* (web-095) One bar colour. The header bar, its drop-downs and the phone menu are all the same solid
   colour: slate #7C8A91 in light mode, #0E2030 in dark. In dark mode the bar had been see-through
   (80%), so it never quite matched the solid drop-downs under it. */
.mnb-header::before { background-color: #7C8A91; }
[data-theme="dark"] .mnb-header::before { background-color: #0E2030; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .mnb-header::before { background-color: #0E2030; } }
@media (min-width: 861px) {
  .mnb-nav__list .mpc-nav__sub { background: #7C8A91; }
  [data-theme="dark"] .mnb-nav__list .mpc-nav__sub { background: #0E2030; }
}
@media (min-width: 861px) and (prefers-color-scheme: dark) { :root:not([data-theme]) .mnb-nav__list .mpc-nav__sub { background: #0E2030; } }
/* (web-096) The drop-down's shadow showed above its top edge too, darkening the bar just over it so
   the drop-down read as lighter. The shadow now falls only on the sides and below. */
@media (min-width: 861px) { .mnb-nav__list .mpc-nav__sub { clip-path: inset(0 -40px -40px -40px); } }

/* ---- Open-now card (web-097) ------------------------------------------------
   A sign, not a line of text: green while open, amber in the last half hour, red when closed.
   Anton throughout; a storefront badge on the left, a "live" dot that pulses while open (and
   faster when closing soon), and a sheen that sweeps across now and then. */
.mpc-open { position: relative; overflow: hidden; display: flex; align-items: center; gap: 18px;
  padding: 18px 26px; margin: 0; border-radius: 16px; color: #fff; isolation: isolate;
  font-family: var(--mnb-font-impact); text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -2px 0 rgba(0, 0, 0, .15), 0 10px 24px -10px var(--mpc-open-glow, rgba(0, 0, 0, .4));
  border: 1px solid rgba(0, 0, 0, .18); transition: background .4s ease, box-shadow .4s ease; }
.mpc-open.is-open   { background: linear-gradient(135deg, #3FB868 0%, #23934A 55%, #19773A 100%); --mpc-open-glow: rgba(35, 147, 74, .7); }
.mpc-open.is-soon   { background: linear-gradient(135deg, #F6B547 0%, #E58E1E 55%, #C87412 100%); --mpc-open-glow: rgba(229, 142, 30, .7); }
.mpc-open.is-closed { background: linear-gradient(135deg, #E05A4E 0%, #C0352B 55%, #9C261E 100%); --mpc-open-glow: rgba(192, 53, 43, .7); }
/* the sheen */
.mpc-open::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%);
  transform: translateX(-120%); animation: mpcOpenSheen 7s ease-in-out 1.2s infinite; }
@keyframes mpcOpenSheen { 0% { transform: translateX(-120%); } 22%, 100% { transform: translateX(120%); } }
/* storefront badge */
.mpc-open__sign { flex: none; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%;
  background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35); }
.mpc-open__sign svg { width: 32px; height: 32px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); }
.mpc-open__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mpc-open__word { display: flex; align-items: center; gap: 12px; font-size: 2.5rem; line-height: 1; text-transform: uppercase; letter-spacing: .03em; }
.mpc-open__detail { font-size: 1.3rem; line-height: 1.15; letter-spacing: .04em; text-transform: uppercase; opacity: .95; }
/* the live dot */
.mpc-open__dot { position: relative; flex: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, .9); }
.mpc-open__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #fff; animation: mpcOpenPing 1.8s ease-out infinite; }
.mpc-open.is-soon .mpc-open__dot::after { animation-duration: .9s; }
.mpc-open.is-closed .mpc-open__dot { background: rgba(255, 255, 255, .55); box-shadow: none; }
.mpc-open.is-closed .mpc-open__dot::after { animation: none; display: none; }
@keyframes mpcOpenPing { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
/* the smaller one, above the hours table on Contact */
.mpc-open--sm { padding: 12px 18px; gap: 14px; border-radius: 12px; margin: 0 0 14px; }
.mpc-open--sm .mpc-open__sign { width: 46px; height: 46px; }
.mpc-open--sm .mpc-open__sign svg { width: 24px; height: 24px; }
.mpc-open--sm .mpc-open__word { font-size: 1.75rem; gap: 10px; }
.mpc-open--sm .mpc-open__detail { font-size: 1.05rem; }
.mpc-open--sm .mpc-open__dot { width: 11px; height: 11px; }
@media (max-width: 600px) {
  .mpc-open { padding: 14px 16px; gap: 14px; }
  .mpc-open__sign { width: 50px; height: 50px; }
  .mpc-open__sign svg { width: 26px; height: 26px; }
  .mpc-open__word { font-size: 1.95rem; gap: 10px; }
  .mpc-open__detail { font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) { .mpc-open::after, .mpc-open__dot::after { animation: none; } .mpc-open::after { display: none; } }
/* today's hours on the right of the big card; not on phones or on the small card */
.mpc-open__today { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding-left: 22px;
  border-left: 2px solid rgba(255, 255, 255, .3); text-transform: uppercase; }
.mpc-open__today small { font-size: .95rem; letter-spacing: .12em; opacity: .85; }
.mpc-open__today b { font-weight: 400; font-size: 1.6rem; letter-spacing: .03em; white-space: nowrap; }
.mpc-open--sm .mpc-open__today { display: none; }
@media (max-width: 760px) { .mpc-open__today { display: none; } }
.mpc-open { text-align: left; }   /* the home card sits in a centred block */

/* Notary page (web-099): the store's and the notary's open cards, one under the other, a label over each
   state; then the notary hours as three tiles under the page's own section title. */
.mpc-open-pair { display: grid; gap: 12px; margin: 0 0 22px; }
.mpc-open__tag { font-size: .95rem; line-height: 1; letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
.mpc-hourtiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mpc-hourtiles li { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 12px; text-align: center;
  border-radius: var(--mnb-radius); background: var(--mpc-chip-bg); border: 1px solid var(--mpc-chip-border); }
.mpc-hourtiles span { font-family: var(--mnb-font-impact); font-size: 1.1rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mnb-muted); }
.mpc-hourtiles b { font-family: var(--mnb-font-impact); font-weight: 400; font-size: 1.6rem; letter-spacing: .02em; text-transform: uppercase; color: var(--mnb-text); white-space: nowrap; }
.mpc-hourtiles li.is-closed b { color: var(--mnb-muted); }
@media (max-width: 700px) { .mpc-hourtiles { grid-template-columns: 1fr; } .mpc-hourtiles li { flex-direction: row; justify-content: space-between; padding: 14px 18px; } }
/* Contact (web-098): the notary's earlier weekday close, under the store hours. */
.mpc-notary-note { max-width: 360px; box-sizing: border-box; margin: -4px 0 14px; padding: 10px 14px; border-radius: var(--mnb-radius-sm); font-size: .95rem; line-height: 1.45;
  background: var(--mnb-cond-bg); border: 1px solid color-mix(in srgb, var(--mnb-cond) 35%, transparent); color: var(--mnb-text); }
.mpc-notary-note a { color: var(--mnb-link); font-weight: 600; white-space: nowrap; }

/* (web-100) The notary's card: orange while open (the store's is green), gold in its last half hour,
   red when closed. Two small cards stacked on Contact; the store hours as rows under them. */
/* (web-101) Open: the theme's gold (#F2C043) with its own dark text, as gold is used everywhere else on
   the site. The last half hour: the same amber as the store's. */
.mpc-open--notary.is-open { background: linear-gradient(135deg, #F7D06A 0%, #F2C043 50%, #DDA92A 100%); --mpc-open-glow: rgba(242, 192, 67, .75);
  color: var(--mnb-gold-on); text-shadow: 0 1px 0 rgba(255, 255, 255, .35); }
.mpc-open--notary.is-open .mpc-open__sign { background: rgba(20, 27, 40, .1); box-shadow: inset 0 0 0 2px rgba(20, 27, 40, .3); }
.mpc-open--notary.is-open .mpc-open__sign svg { filter: none; }
.mpc-open--notary.is-open .mpc-open__dot { background: var(--mnb-gold-on); box-shadow: 0 0 8px rgba(20, 27, 40, .35); }
.mpc-open--notary.is-open .mpc-open__dot::after { border-color: var(--mnb-gold-on); }
.mpc-open--notary.is-open .mpc-open__today { border-left-color: rgba(20, 27, 40, .25); }
.mpc-open-pair--sm { gap: 10px; margin: 0 0 14px; }
.mpc-open-pair--sm .mpc-open--sm { margin: 0; }
.mpc-open--sm .mpc-open__tag { font-size: .8rem; }
.mpc-hourtiles--rows { grid-template-columns: 1fr; gap: 8px; margin: 0 0 14px; }
.mpc-hourtiles--rows li { flex-direction: row; justify-content: space-between; align-items: center; padding: 12px 16px; text-align: left; }
.mpc-hourtiles--rows span { font-size: 1rem; }
.mpc-hourtiles--rows b { font-size: 1.3rem; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.mpc-hourtiles--rows b small { font-size: .82rem; letter-spacing: .06em; color: #A97C0F; }   /* the theme gold, deep enough to read on white */
[data-theme="dark"] .mpc-hourtiles--rows b small { color: var(--mnb-gold); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .mpc-hourtiles--rows b small { color: var(--mnb-gold); } }

/* ---- Check and ✕ tiles, sharpened (web-102) ----------------------------------
   Every .mpc-svc-grid on the site (services, notary, packing, print, keys, mailboxes, drop-offs…):
   a clean raised tile with a coloured edge on the left, a round badge with a crisp drawn tick
   (green) or cross (red), and a lift on hover. Tiles rise into place as they scroll into view
   in browsers that can (Edge, Chrome); elsewhere they're simply there. */
.mpc-svc-grid { gap: 12px; }
.mpc-svc-grid li {
  --tile-a: #2FA65A; --tile-b: #1B7F3F;                         /* the badge and edge colours */
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 58px;
  padding: 12px 16px 12px 20px; border-radius: 12px; overflow: hidden;
  background: linear-gradient(180deg, var(--mnb-surface) 0%, color-mix(in srgb, var(--mnb-surface) 92%, var(--mnb-border)) 100%);
  border: 1px solid var(--mpc-chip-border);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 1px 2px rgba(20, 27, 40, .06), 0 4px 12px -6px rgba(20, 27, 40, .18);
  font-size: 1rem; font-weight: 600; line-height: 1.3; color: var(--mnb-text);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.mpc-svc-grid--no li { --tile-a: #E35A4F; --tile-b: #B32C23; }
/* the coloured edge */
.mpc-svc-grid li::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--tile-a), var(--tile-b)); transition: width .18s ease; }
/* the badge: a round chip with the mark cut out of it */
.mpc-svc-grid li::before {
  content: ""; position: static; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .45), transparent 55%),
    linear-gradient(145deg, var(--tile-a), var(--tile-b));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tile-a) 18%, transparent), 0 2px 4px -1px rgba(0, 0, 0, .3);
  -webkit-mask: var(--tile-mark) center / 100% 100% no-repeat; mask: var(--tile-mark) center / 100% 100% no-repeat;
  --tile-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='28' height='28' fill='white'/%3E%3Cpath d='M8 14.5l4 4 8-9' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='14' cy='14' r='14' fill='white' mask='url(%23m)'/%3E%3C/svg%3E");
}
.mpc-svc-grid--no li::before {
  --tile-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='28' height='28' fill='white'/%3E%3Cpath d='M9.5 9.5l9 9M18.5 9.5l-9 9' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='14' cy='14' r='14' fill='white' mask='url(%23m)'/%3E%3C/svg%3E");
}
.mpc-svc-grid li:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--tile-a) 45%, var(--mpc-chip-border));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 10px 22px -10px color-mix(in srgb, var(--tile-b) 55%, transparent); }
.mpc-svc-grid li:hover::after { width: 6px; }
/* the old ✕ colours, retired: the badge carries the colour now */
.mpc-svc-grid--no li::before, [data-theme="dark"] .mpc-svc-grid--no li::before { color: transparent; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .mpc-svc-grid--no li::before { color: transparent; } }
/* tiles that are links: the whole tile is the link, with a round arrow that slides on hover */
.mpc-svc-grid li.has-link { padding: 0; }
.mpc-svc-grid li.has-link::before { margin-left: 20px; }
.mpc-svc-grid li.has-link a { flex: 1; display: flex; align-items: center; align-self: stretch; padding: 12px 52px 12px 0; position: relative; color: inherit; font-weight: 600; text-decoration: none; }
.mpc-svc-grid li.has-link a::after { content: "\203A"; position: absolute; right: 14px; top: 50%; width: 26px; height: 26px; transform: translateY(-50%);
  display: grid; place-items: center; border-radius: 50%; font-size: 1.25rem; line-height: 1; color: var(--mnb-link);
  background: color-mix(in srgb, var(--mnb-link) 10%, transparent); transition: transform .18s ease, background .18s ease, color .18s ease; }
.mpc-svc-grid li.has-link:hover a::after { transform: translate(4px, -50%); background: var(--mnb-link); color: var(--mnb-surface); }
/* lists whose items are a sentence with a bold lead and links in it (print: Upload from home…;
   international: what we need for the receiver): one flowing line, the badge set in the margin */
.mpc-svc-grid.mpc-ways li { display: block; padding: 14px 18px 14px 62px; font-weight: 400; line-height: 1.5; }
.mpc-svc-grid.mpc-ways li::before { position: absolute; left: 20px; top: 14px; }
.mpc-ways li b { font-weight: 700; }
/* dark mode: deeper tiles, softer edges */
[data-theme="dark"] .mpc-svc-grid li { background: linear-gradient(180deg, #13283A 0%, #0F2131 100%); border-color: rgba(112, 128, 144, .35);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 6px 16px -8px rgba(0, 0, 0, .6); }
[data-theme="dark"] .mpc-svc-grid li { --tile-a: #3DBA6E; --tile-b: #23944C; }
[data-theme="dark"] .mpc-svc-grid--no li { --tile-a: #EE6B60; --tile-b: #C0392B; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .mpc-svc-grid li { background: linear-gradient(180deg, #13283A 0%, #0F2131 100%); border-color: rgba(112, 128, 144, .35);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 6px 16px -8px rgba(0, 0, 0, .6); --tile-a: #3DBA6E; --tile-b: #23944C; }
  :root:not([data-theme]) .mpc-svc-grid--no li { --tile-a: #EE6B60; --tile-b: #C0392B; }
}
/* rise into place on scroll */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .mpc-svc-grid li { animation: mpcTileIn linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  }
}
@keyframes mpcTileIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) { .mpc-svc-grid li { min-height: 52px; } }

/* (web-103) Check tiles in the theme's gold instead of green: a gold badge with a dark tick drawn on
   it (the theme's text-on-gold colour), and a gold edge. The ✕ tiles stay red. */
.mpc-svc-grid:not(.mpc-svc-grid--no) li { --tile-a: #F7D06A; --tile-b: #DDA92A; }
.mpc-svc-grid:not(.mpc-svc-grid--no) li::before {
  -webkit-mask: none; mask: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M8 14.5l4 4 8-9' fill='none' stroke='%23141B28' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat,
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .5), transparent 55%),
    linear-gradient(145deg, #F7D06A, #E0AE34);
  box-shadow: 0 0 0 3px rgba(242, 192, 67, .22), 0 2px 4px -1px rgba(0, 0, 0, .25);
}
[data-theme="dark"] .mpc-svc-grid:not(.mpc-svc-grid--no) li { --tile-a: #F2C043; --tile-b: #D9A52A; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .mpc-svc-grid:not(.mpc-svc-grid--no) li { --tile-a: #F2C043; --tile-b: #D9A52A; } }

/* (web-104) The round arrow on linked tiles: a drawn chevron (the text one sat off-centre), gold on a
   charcoal circle; on hover the circle turns gold, the chevron charcoal, and it slides over. */
.mpc-svc-grid li.has-link a::after {
  content: ""; width: 28px; height: 28px; font-size: 0;
  background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M12 8.5l5.5 5.5-5.5 5.5' fill='none' stroke='%23F2C043' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  /* (web-107) light mode: a white circle (it was the header slate in web-105); dark mode keeps charcoal (below) */
  box-shadow: 0 2px 5px -1px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.mpc-svc-grid li.has-link:hover a::after {
  background: #F2C043 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M12 8.5l5.5 5.5-5.5 5.5' fill='none' stroke='%23141B28' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
[data-theme="dark"] .mpc-svc-grid li.has-link a::after { box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 2px 5px -1px rgba(0, 0, 0, .5); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .mpc-svc-grid li.has-link a::after { box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 2px 5px -1px rgba(0, 0, 0, .5); } }
.mpc-svc-grid li.has-link:hover { border-color: color-mix(in srgb, #F2C043 60%, var(--mpc-chip-border)); }   /* gold, not the old blue */
[data-theme="dark"] .mpc-svc-grid li.has-link:not(:hover) a::after { background-color: #2A2F36; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .mpc-svc-grid li.has-link:not(:hover) a::after { background-color: #2A2F36; } }

/* Carrier chips (web-106): each in its own colour (from the app's settings; Amazon in its yellow),
   with a light sheen and the letters in whichever of white or dark reads on it. */
.mpc-carriers li.mpc-car { background: linear-gradient(180deg, color-mix(in srgb, var(--car-bg) 82%, #fff) 0%, var(--car-bg) 45%, color-mix(in srgb, var(--car-bg) 85%, #000) 100%);
  color: var(--car-fg); border: 1px solid color-mix(in srgb, var(--car-bg) 70%, #000); text-shadow: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 4px 10px -4px color-mix(in srgb, var(--car-bg) 70%, transparent); }
/* (web-107) the white circle needs an edge to sit on a white tile */
.mpc-svc-grid li.has-link:not(:hover) a::after { box-shadow: 0 0 0 1px var(--mpc-chip-border), 0 2px 5px -1px rgba(20, 27, 40, .18); }
[data-theme="dark"] .mpc-svc-grid li.has-link:not(:hover) a::after { box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 2px 5px -1px rgba(0, 0, 0, .5); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .mpc-svc-grid li.has-link:not(:hover) a::after { box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 2px 5px -1px rgba(0, 0, 0, .5); } }

/* (web-108) Linked tiles: no circle. The tile is split: its right end is a glossy black panel the full
   height of the tile, with a gold chevron on it (Jordan's design). On hover the panel turns gold, the
   chevron charcoal, and the chevron nudges right. Replaces the circles of web-104/105/107. */
.mpc-svc-grid li.has-link a { padding-right: 76px; }
.mpc-svc-grid li.has-link a::after,
.mpc-svc-grid li.has-link:not(:hover) a::after,
[data-theme="dark"] .mpc-svc-grid li.has-link:not(:hover) a::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: auto; width: 60px; height: auto; transform: none;
  border-radius: 0; font-size: 0; display: block;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M11 7.5l6.5 6.5-6.5 6.5' fill='none' stroke='%23F2C043' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 28px 28px no-repeat,
    linear-gradient(180deg, #4A4A4A 0%, #1A1A1A 38%, #000 52%, #0B0B0B 100%);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .18);
  transition: background-position .18s ease;
}
.mpc-svc-grid li.has-link:hover a::after {
  top: 0; bottom: 0; width: 60px; height: auto; transform: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M11 7.5l6.5 6.5-6.5 6.5' fill='none' stroke='%23141B28' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") calc(50% + 4px) center / 28px 28px no-repeat,
    linear-gradient(180deg, #F9D97A 0%, #F2C043 50%, #DDA92A 100%);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, .3);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .mpc-svc-grid li.has-link:not(:hover) a::after { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .18); } }
/* (web-109) Dark mode: the panel is gold with a black chevron; on hover it brightens and the chevron nudges right. */
[data-theme="dark"] .mpc-svc-grid li.has-link a::after,
[data-theme="dark"] .mpc-svc-grid li.has-link:not(:hover) a::after {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M11 7.5l6.5 6.5-6.5 6.5' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 28px 28px no-repeat,
    linear-gradient(180deg, #F9D97A 0%, #F2C043 50%, #DDA92A 100%);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, .3);
}
[data-theme="dark"] .mpc-svc-grid li.has-link:hover a::after {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M11 7.5l6.5 6.5-6.5 6.5' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") calc(50% + 4px) center / 28px 28px no-repeat,
    linear-gradient(180deg, #FCE39A 0%, #F6CC5A 50%, #E6B23A 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .mpc-svc-grid li.has-link a::after,
  :root:not([data-theme]) .mpc-svc-grid li.has-link:not(:hover) a::after {
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M11 7.5l6.5 6.5-6.5 6.5' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 28px 28px no-repeat,
      linear-gradient(180deg, #F9D97A 0%, #F2C043 50%, #DDA92A 100%);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .3);
  }
  :root:not([data-theme]) .mpc-svc-grid li.has-link:hover a::after {
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M11 7.5l6.5 6.5-6.5 6.5' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") calc(50% + 4px) center / 28px 28px no-repeat,
      linear-gradient(180deg, #FCE39A 0%, #F6CC5A 50%, #E6B23A 100%);
  }
}
/* (web-110) Light mode: the panel is the header and footer slate (#7C8A91, glossy) with a white chevron.
   Hover (gold) and dark mode (gold with a black chevron) are unchanged. */
.mpc-svc-grid li.has-link:not(:hover) a::after {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M11 7.5l6.5 6.5-6.5 6.5' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 28px 28px no-repeat,
    linear-gradient(180deg, #A3AFB5 0%, #8A979D 38%, #7C8A91 52%, #6E7C83 100%);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, .25), inset 0 1px 0 rgba(255, 255, 255, .35);
}
/* (web-111) Light mode: a tile's hover shadow is a plain gray shadow, not a coloured glow. Dark mode unchanged. */
.mpc-svc-grid li:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 10px 20px -10px rgba(20, 27, 40, .35), 0 2px 6px -2px rgba(20, 27, 40, .12); }
[data-theme="dark"] .mpc-svc-grid li:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 10px 22px -10px color-mix(in srgb, var(--tile-b) 55%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .mpc-svc-grid li:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 10px 22px -10px color-mix(in srgb, var(--tile-b) 55%, transparent); } }
/* (web-112) Light mode, linked tiles: hover only turns the gray panel gold (chevron charcoal so it
   reads). No lift, no shadow change, no gold border, no wider edge, no nudge. Dark mode unchanged. */
.mpc-svc-grid li.has-link:hover { transform: none; border-color: var(--mpc-chip-border);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 1px 2px rgba(20, 27, 40, .06), 0 4px 12px -6px rgba(20, 27, 40, .18); }
.mpc-svc-grid li.has-link:hover::after { width: 4px; }
.mpc-svc-grid li.has-link:hover a::after { background-position: center, 0 0; }
[data-theme="dark"] .mpc-svc-grid li.has-link:hover { transform: translateY(-2px); border-color: color-mix(in srgb, #F2C043 60%, var(--mpc-chip-border));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 10px 22px -10px color-mix(in srgb, var(--tile-b) 55%, transparent); }
[data-theme="dark"] .mpc-svc-grid li.has-link:hover::after { width: 6px; }
[data-theme="dark"] .mpc-svc-grid li.has-link:hover a::after { background-position: calc(50% + 4px) center, 0 0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .mpc-svc-grid li.has-link:hover { transform: translateY(-2px); border-color: color-mix(in srgb, #F2C043 60%, var(--mpc-chip-border));
    box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 10px 22px -10px color-mix(in srgb, var(--tile-b) 55%, transparent); }
  :root:not([data-theme]) .mpc-svc-grid li.has-link:hover::after { width: 6px; }
  :root:not([data-theme]) .mpc-svc-grid li.has-link:hover a::after { background-position: calc(50% + 4px) center, 0 0; }
}
/* (web-113) Light mode: the panel is gold (not gray), with a black chevron, the same as dark mode.
   Hover only brightens the gold. */
.mpc-svc-grid li.has-link:not(:hover) a::after {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M11 7.5l6.5 6.5-6.5 6.5' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 28px 28px no-repeat,
    linear-gradient(180deg, #F9D97A 0%, #F2C043 50%, #DDA92A 100%);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, .3);
}
.mpc-svc-grid li.has-link:hover a::after {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M11 7.5l6.5 6.5-6.5 6.5' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 28px 28px no-repeat,
    linear-gradient(180deg, #FCE39A 0%, #F6CC5A 50%, #E6B23A 100%);
}
[data-theme="dark"] .mpc-svc-grid li.has-link:hover a::after { background-position: calc(50% + 4px) center, 0 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .mpc-svc-grid li.has-link:hover a::after { background-position: calc(50% + 4px) center, 0 0; } }
/* (web-114) Light mode, linked tiles: the gray hover shadow is back (web-112 had taken it off). */
.mpc-svc-grid li.has-link:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 10px 20px -10px rgba(20, 27, 40, .35), 0 2px 6px -2px rgba(20, 27, 40, .12); }
[data-theme="dark"] .mpc-svc-grid li.has-link:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 10px 22px -10px color-mix(in srgb, var(--tile-b) 55%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .mpc-svc-grid li.has-link:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 10px 22px -10px color-mix(in srgb, var(--tile-b) 55%, transparent); } }

/* (web-115) International, what we need for the receiver: the item's name on a gold button on the left,
   its explanation beside it; on a phone the explanation goes under the button. */
.mpc-need { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.mpc-need li { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; align-items: center; }
.mpc-need__label { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 16px 8px 12px; border-radius: 10px;
  font-family: var(--mnb-font-impact); font-size: 1.12rem; line-height: 1.1; letter-spacing: .03em; text-transform: uppercase; color: var(--mnb-gold-on);
  background: linear-gradient(180deg, #F9D97A 0%, #F2C043 50%, #DDA92A 100%); border: 1px solid #C9961F;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 3px 8px -3px rgba(20, 27, 40, .35); }
.mpc-need__label::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; background: rgba(20, 27, 40, .88)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M8 14.5l4 4 8-9' fill='none' stroke='%23F2C043' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.mpc-need__text { font-size: 1.02rem; line-height: 1.5; color: var(--mnb-text); }
@media (max-width: 700px) {
  .mpc-need { gap: 16px; }
  .mpc-need li { grid-template-columns: 1fr; gap: 6px; }
  .mpc-need__label { justify-self: start; min-height: 42px; }
}
/* (web-116) The receiver labels in the same style as the check tiles: a raised white tile with the gold
   edge on the left and the gold badge with its dark tick; deep navy in dark mode. */
.mpc-need__label { position: relative; overflow: hidden; gap: 12px; min-height: 52px; padding: 10px 14px 10px 18px; border-radius: 12px;
  font-family: inherit; font-size: 1rem; font-weight: 600; letter-spacing: 0; text-transform: none; line-height: 1.3; color: var(--mnb-text); text-shadow: none;
  background: linear-gradient(180deg, var(--mnb-surface) 0%, color-mix(in srgb, var(--mnb-surface) 92%, var(--mnb-border)) 100%);
  border: 1px solid var(--mpc-chip-border);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 1px 2px rgba(20, 27, 40, .06), 0 4px 12px -6px rgba(20, 27, 40, .18); }
.mpc-need__label::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, #F7D06A, #DDA92A); }
.mpc-need__label::before { width: 28px; height: 28px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M8 14.5l4 4 8-9' fill='none' stroke='%23141B28' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat,
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .5), transparent 55%),
    linear-gradient(145deg, #F7D06A, #E0AE34);
  box-shadow: 0 0 0 3px rgba(242, 192, 67, .22), 0 2px 4px -1px rgba(0, 0, 0, .25); }
[data-theme="dark"] .mpc-need__label { background: linear-gradient(180deg, #13283A 0%, #0F2131 100%); border-color: rgba(112, 128, 144, .35);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 6px 16px -8px rgba(0, 0, 0, .6); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .mpc-need__label { background: linear-gradient(180deg, #13283A 0%, #0F2131 100%); border-color: rgba(112, 128, 144, .35);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 6px 16px -8px rgba(0, 0, 0, .6); } }
/* (web-116) a thin line between the items */
.mpc-need { gap: 0; }
.mpc-need li { padding: 12px 0; }
.mpc-need li + li { border-top: 1px solid var(--mnb-border); }
.mpc-need li:first-child { padding-top: 0; }
.mpc-need li:last-child { padding-bottom: 0; }

/* (web-117) International, receiver details: a customs-form table. Ruled rows, a gold numbered circle,
   the item in Anton, what to bring, and a stamp: red REQUIRED, amber MOST COUNTRIES, gray RECOMMENDED.
   Dark mode: deep navy paper with light rules. Phones: number and item on top, the text, then the stamp. */
.mpc-cform { margin: 14px 0 0; border: 2px solid var(--mnb-text); border-radius: 6px; background: #FFFDF7; overflow: hidden; color: var(--mnb-text);
  box-shadow: 0 6px 18px -10px rgba(20, 27, 40, .35); }
.mpc-cform__hd { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 2px solid var(--mnb-text); }
.mpc-cform__hd span { font-family: var(--mnb-font-impact); font-size: 1.15rem; letter-spacing: .1em; text-transform: uppercase; }
.mpc-cform__hd small { font-family: "Courier New", Courier, monospace; font-size: .8rem; letter-spacing: .02em; text-transform: uppercase; color: var(--mnb-muted); }
.mpc-cform__r { display: grid; grid-template-columns: 74px 220px minmax(0, 1fr) 170px; align-items: center; border-bottom: 1px solid #A9B1B5; }
.mpc-cform__r:last-child { border-bottom: 0; }
.mpc-cform__n { align-self: stretch; display: grid; place-items: center; padding: 10px 0; border-right: 1px solid #A9B1B5; }
.mpc-cform__n b { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  font-family: var(--mnb-font-impact); font-weight: 400; font-size: 1.35rem; color: var(--mnb-gold-on);
  background: linear-gradient(145deg, #F9D97A, #DDA92A); box-shadow: 0 0 0 4px rgba(242, 192, 67, .2), 0 3px 8px -2px rgba(0, 0, 0, .3); }
.mpc-cform__k { padding: 14px 16px; font-family: var(--mnb-font-impact); font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; line-height: 1.15; }
.mpc-cform__v { align-self: stretch; display: flex; align-items: center; padding: 14px 16px; border-left: 1px dashed #C7CDD0; font-size: .98rem; line-height: 1.45; }
.mpc-cform__s { justify-self: center; margin: 10px; padding: 4px 10px; border: 2px solid currentColor; border-radius: 4px; transform: rotate(-6deg);
  font-family: var(--mnb-font-impact); font-size: .88rem; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; opacity: .9;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 25%, transparent); }
.mpc-cform__s.is-req  { color: #B32C23; }
.mpc-cform__s.is-most { color: #C87412; }
.mpc-cform__s.is-rec  { color: #6E7C83; }
[data-theme="dark"] .mpc-cform { background: #0F2131; border-color: rgba(255, 255, 255, .55); }
[data-theme="dark"] .mpc-cform__hd { border-bottom-color: rgba(255, 255, 255, .55); }
[data-theme="dark"] .mpc-cform__r, [data-theme="dark"] .mpc-cform__n { border-color: rgba(112, 128, 144, .45); }
[data-theme="dark"] .mpc-cform__v { border-left-color: rgba(112, 128, 144, .35); }
[data-theme="dark"] .mpc-cform__s.is-req { color: #EE6B60; } [data-theme="dark"] .mpc-cform__s.is-most { color: #F0A040; } [data-theme="dark"] .mpc-cform__s.is-rec { color: #9AA6AC; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .mpc-cform { background: #0F2131; border-color: rgba(255, 255, 255, .55); }
  :root:not([data-theme]) .mpc-cform__hd { border-bottom-color: rgba(255, 255, 255, .55); }
  :root:not([data-theme]) .mpc-cform__r, :root:not([data-theme]) .mpc-cform__n { border-color: rgba(112, 128, 144, .45); }
  :root:not([data-theme]) .mpc-cform__v { border-left-color: rgba(112, 128, 144, .35); }
  :root:not([data-theme]) .mpc-cform__s.is-req { color: #EE6B60; } :root:not([data-theme]) .mpc-cform__s.is-most { color: #F0A040; } :root:not([data-theme]) .mpc-cform__s.is-rec { color: #9AA6AC; }
}
@media (max-width: 760px) {
  .mpc-cform__r { grid-template-columns: 62px minmax(0, 1fr); grid-template-areas: "n k" "n v" "n s"; align-items: start; padding: 12px 12px 12px 0; }
  .mpc-cform__n { grid-area: n; align-self: stretch; place-items: start center; padding: 2px 0 0; border-right: 0; }
  .mpc-cform__n b { width: 40px; height: 40px; font-size: 1.2rem; }
  .mpc-cform__k { grid-area: k; padding: 8px 0 4px; }
  .mpc-cform__v { grid-area: v; padding: 0; border-left: 0; }
  .mpc-cform__s { grid-area: s; justify-self: start; margin: 10px 0 2px 4px; }
}

/* (web-118) The red customs form (What can't go): red numbered circles, the item across the middle,
   a red NOT ALLOWED stamp. */
.mpc-cform--no .mpc-cform__r { grid-template-columns: 74px minmax(0, 1fr) 170px; }
.mpc-cform--no .mpc-cform__n b { color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
  background: linear-gradient(145deg, #EE6B60, #B32C23); box-shadow: 0 0 0 4px rgba(227, 90, 79, .18), 0 3px 8px -2px rgba(0, 0, 0, .3); }
.mpc-cform--no .mpc-cform__k { font-size: 1.1rem; }
.mpc-cform__s.is-no { color: #B32C23; }
[data-theme="dark"] .mpc-cform__s.is-no { color: #EE6B60; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .mpc-cform__s.is-no { color: #EE6B60; } }
@media (max-width: 760px) {
  .mpc-cform--no .mpc-cform__r { grid-template-columns: 62px minmax(0, 1fr); grid-template-areas: "n k" "n s"; }
}

/* (web-121) Notary: the credible-witness callout under the ID lists. A gold-edged card with a two-people
   badge, a strong title, and the four conditions as check tiles. */
.mpc-witness { position: relative; display: flex; gap: 18px; margin: 22px 0 4px; padding: 20px 22px 20px 26px; border-radius: 14px; overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, #F2C043 16%, var(--mnb-surface)) 0%, var(--mnb-surface) 60%);
  border: 1px solid color-mix(in srgb, #F2C043 45%, var(--mpc-chip-border));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 8px 20px -12px rgba(20, 27, 40, .3); }
.mpc-witness::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(180deg, #F7D06A, #DDA92A); }
.mpc-witness__icon { flex: none; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; color: var(--mnb-gold-on);
  background: linear-gradient(145deg, #F9D97A, #DDA92A); box-shadow: 0 0 0 5px rgba(242, 192, 67, .2), 0 4px 10px -3px rgba(0, 0, 0, .3); }
.mpc-witness__body { min-width: 0; flex: 1; }
.mpc-witness__title { margin: 2px 0 6px; font-family: var(--mnb-font-impact); font-weight: 400; font-size: 1.45rem; line-height: 1.15; letter-spacing: .02em; text-transform: uppercase; color: var(--mnb-text); }
.mpc-witness__body > p { margin: 0 0 14px; font-size: 1.02rem; line-height: 1.5; }
.mpc-witness__list { grid-template-columns: repeat(2, 1fr); }
[data-theme="dark"] .mpc-witness { background: linear-gradient(135deg, rgba(242, 192, 67, .12) 0%, #0F2131 60%); border-color: rgba(242, 192, 67, .35); box-shadow: 0 8px 20px -12px rgba(0, 0, 0, .6); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .mpc-witness { background: linear-gradient(135deg, rgba(242, 192, 67, .12) 0%, #0F2131 60%); border-color: rgba(242, 192, 67, .35); box-shadow: 0 8px 20px -12px rgba(0, 0, 0, .6); } }
@media (max-width: 700px) {
  .mpc-witness { flex-direction: column; gap: 12px; padding: 18px 16px 18px 20px; }
  .mpc-witness__icon { width: 52px; height: 52px; }
  .mpc-witness__title { font-size: 1.25rem; }
  .mpc-witness__list { grid-template-columns: 1fr; }
}
.mpc-witness__note { margin: 12px 0 0; font-size: .92rem; color: var(--mnb-muted); }

/* (web-122) The credible-witness callout in green (the gold stays for the rest): green edge, green
   two-people badge, a light green wash, and its four tiles with green edges and green tick badges. */
.mpc-witness { background: linear-gradient(135deg, color-mix(in srgb, #2FA65A 14%, var(--mnb-surface)) 0%, var(--mnb-surface) 60%);
  border-color: color-mix(in srgb, #2FA65A 45%, var(--mpc-chip-border)); }
.mpc-witness::before { background: linear-gradient(180deg, #3FB868, #1B7F3F); }
.mpc-witness__icon { color: #fff; background: linear-gradient(145deg, #3FB868, #1B7F3F); box-shadow: 0 0 0 5px rgba(47, 166, 90, .2), 0 4px 10px -3px rgba(0, 0, 0, .3); }
.mpc-witness .mpc-svc-grid li { --tile-a: #2FA65A; --tile-b: #1B7F3F; }
.mpc-witness .mpc-svc-grid li::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M8 14.5l4 4 8-9' fill='none' stroke='%23FFFFFF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat,
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .45), transparent 55%),
    linear-gradient(145deg, #3FB868, #1B7F3F);
  box-shadow: 0 0 0 3px rgba(47, 166, 90, .2), 0 2px 4px -1px rgba(0, 0, 0, .3); }
[data-theme="dark"] .mpc-witness { background: linear-gradient(135deg, rgba(61, 186, 110, .14) 0%, #0F2131 60%); border-color: rgba(61, 186, 110, .4); }
[data-theme="dark"] .mpc-witness .mpc-svc-grid li { --tile-a: #3DBA6E; --tile-b: #23944C; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .mpc-witness { background: linear-gradient(135deg, rgba(61, 186, 110, .14) 0%, #0F2131 60%); border-color: rgba(61, 186, 110, .4); }
  :root:not([data-theme]) .mpc-witness .mpc-svc-grid li { --tile-a: #3DBA6E; --tile-b: #23944C; }
}
/* (web-123) The witness badge at the top of the card, centred, with the title (and the line under it)
   centred beneath; the tiles keep the full width. */
.mpc-witness { flex-direction: column; align-items: center; gap: 12px; padding: 22px 24px 20px 28px; }
.mpc-witness__icon { width: 58px; height: 58px; }
.mpc-witness__body { width: 100%; }
.mpc-witness__title, .mpc-witness__body > p, .mpc-witness__note { text-align: center; }
.mpc-witness__title { margin: 0 0 6px; }
@media (max-width: 700px) { .mpc-witness { padding: 18px 16px 18px 20px; } }

/* (web-124) Print / Fax / Scan, the three ways to send: the customs-form table with its own stamps. */
.mpc-cform__s.is-gold  { color: #A97C0F; }
.mpc-cform__s.is-green { color: #1B7F3F; }
.mpc-cform__s.is-slate { color: #5E6C73; }
.mpc-cform__v a { color: var(--mnb-link); font-weight: 600; }
[data-theme="dark"] .mpc-cform__s.is-gold { color: #F2C043; } [data-theme="dark"] .mpc-cform__s.is-green { color: #3DBA6E; } [data-theme="dark"] .mpc-cform__s.is-slate { color: #9AA6AC; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .mpc-cform__s.is-gold { color: #F2C043; } :root:not([data-theme]) .mpc-cform__s.is-green { color: #3DBA6E; } :root:not([data-theme]) .mpc-cform__s.is-slate { color: #9AA6AC; }
}
/* (web-124) a cell holding a sentence with links in it: the sentence is one inline run */
.mpc-cform__v > span { display: block; }
/* (web-126) The form tables on phones: the numbered circle centred top to bottom in its row, the
   stamp centred across, and more room above and below each row. */
@media (max-width: 760px) {
  .mpc-cform__r { padding: 18px 14px 18px 0; }
  .mpc-cform__n { place-items: center; padding: 0; }
  .mpc-cform__k { padding-top: 0; }
  .mpc-cform__s { justify-self: center; margin: 12px 0 0; }
}
/* (web-127) Phones: the stamp gets a row of its own across the whole table, centred on its width. */
@media (max-width: 760px) {
  .mpc-cform__r { grid-template-areas: "n k" "n v" "s s"; padding-left: 0; }
  .mpc-cform--no .mpc-cform__r { grid-template-areas: "n k" "s s"; }
  .mpc-cform__s { grid-area: s; justify-self: center; margin: 14px 0 0 14px; }
}
/* (web-128) Phones: the stamps sit straight (they keep their tilt on a computer). */
@media (max-width: 760px) { .mpc-cform__s { transform: none; } }

/* (web-133) Mailboxes "At a glance": icon cards two by two (the last one full width), small chips, and
   the two ID lists as bordered lists with gold headers. */
.mpc-glance { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 4px 0 8px; }
.mpc-glance__card { display: flex; gap: 14px; padding: 16px 18px; border: 1px solid var(--mnb-border); border-radius: 12px; background: var(--mnb-surface); box-shadow: var(--mnb-shadow); scroll-margin-top: 90px; }
.mpc-glance__card--wide { grid-column: 1 / -1; }
.mpc-glance__icon { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: var(--mnb-gold-on);
  background: linear-gradient(145deg, #F9D97A, #DDA92A); box-shadow: 0 0 0 4px rgba(242, 192, 67, .2); }
.mpc-glance__card h3 { margin: 2px 0 4px; font-family: var(--mnb-font-impact); font-weight: 400; font-size: 1.2rem; line-height: 1.15; letter-spacing: .03em; text-transform: uppercase; color: var(--mnb-text); }
.mpc-glance__card p { margin: 0; font-size: .97rem; line-height: 1.5; }
.mpc-glance__card p a { color: var(--mnb-link); font-weight: 600; }
.mpc-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; }
.mpc-chips li { padding: 4px 11px; border-radius: 999px; border: 1px solid var(--mnb-border); background: var(--mnb-bg); font-size: .86rem; font-weight: 600; }
.mpc-carriers.mpc-carriers--mini { gap: 6px; margin: 10px 0 0; padding: 0; justify-content: flex-start; }
.mpc-carriers.mpc-carriers--mini li { font-size: .95rem; padding: 5px 9px; border-radius: 6px; }
.mpc-idlists { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0 0; }
.mpc-idlists > div { border: 1px solid var(--mnb-border); border-radius: 12px; overflow: hidden; background: var(--mnb-surface); box-shadow: var(--mnb-shadow); }
.mpc-idlists h3 { margin: 0; padding: 10px 14px; font-family: var(--mnb-font-impact); font-weight: 400; font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--mnb-gold-on); background: linear-gradient(145deg, #F9D97A, #DDA92A); }
.mpc-idlists ul { list-style: none; margin: 0; padding: 0; }
.mpc-idlists li { margin: 0; padding: 8px 14px; border-top: 1px solid var(--mnb-border); font-size: .94rem; line-height: 1.4; }
.mpc-idlists li:first-child { border-top: 0; }
.mpc-idlists + .mpc-note { margin-top: 14px; }
@media (max-width: 700px) {
  .mpc-glance, .mpc-idlists { grid-template-columns: 1fr; }
  .mpc-glance__card { padding: 14px 14px; gap: 12px; }
  .mpc-glance__icon { width: 40px; height: 40px; }
}

/* (web-134) Keys & Fobs: key copies as one walk-in card, and the key fob request form — numbered gold
   steps, picture tiles for the key, day and time chips. The chosen tile or chip turns gold with a tick. */
.mpc-walkin { display: flex; gap: 18px; align-items: center; padding: 18px 20px; border-radius: 14px; border: 1px solid var(--mnb-border); background: var(--mnb-surface); box-shadow: var(--mnb-shadow); scroll-margin-top: 90px; }
.mpc-walkin__icon { flex: none; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; color: var(--mnb-gold-on); background: linear-gradient(145deg, #F9D97A, #DDA92A); box-shadow: 0 0 0 5px rgba(242, 192, 67, .2); }
.mpc-walkin__text { min-width: 0; flex: 1; }
.mpc-walkin h2 { margin: 0 0 3px; font-family: var(--mnb-font-impact); font-weight: 400; font-size: 1.35rem; line-height: 1.15; letter-spacing: .03em; text-transform: uppercase; color: var(--mnb-text); }
.mpc-walkin p { margin: 0; }
.mpc-walkin__pill { flex: none; padding: 7px 14px; border-radius: 999px; font-weight: 800; font-size: .85rem; letter-spacing: .03em; text-transform: uppercase; color: #fff; background: linear-gradient(#3FB868, #1B7F3F); box-shadow: 0 2px 6px -2px rgba(0, 0, 0, .35); }
.mpc-fob { margin: 16px 0 0; border-radius: 16px; border: 1px solid var(--mnb-border); background: var(--mnb-surface); box-shadow: var(--mnb-shadow); overflow: hidden; scroll-margin-top: 90px; }
.mpc-fob__step { padding: 18px 22px 20px; border-top: 1px solid var(--mnb-border); scroll-margin-top: 110px; }
.mpc-fob__step:first-child { border-top: 0; }
.mpc-fob__step h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-family: var(--mnb-font-impact); font-weight: 400; font-size: 1.25rem; letter-spacing: .03em; text-transform: uppercase; color: var(--mnb-text); }
.mpc-fob__step h3 b { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-weight: 400; color: var(--mnb-gold-on); background: linear-gradient(145deg, #F9D97A, #DDA92A); box-shadow: 0 0 0 4px rgba(242, 192, 67, .2); }
.mpc-fob__row { display: grid; gap: 12px; }
.mpc-fob__row + .mpc-fob__row { margin-top: 12px; }
.mpc-fob__row--car { grid-template-columns: 110px 1fr 1fr; }
.mpc-fob__row--two { grid-template-columns: 1fr 1fr; }
.mpc-fob__f label { display: block; margin: 0 0 4px; font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mnb-muted); }
.mpc-fob__f input { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--mnb-border); background: var(--mnb-bg); color: var(--mnb-text); }
.mpc-fob__f input:focus { outline: 0; border-color: #DDA92A; box-shadow: 0 0 0 3px rgba(242, 192, 67, .25); }
.mpc-fob__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mpc-fob__tiles label, .mpc-fob__days label, .mpc-fob__times label { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  border-radius: 12px; border: 2px solid var(--mnb-border); background: var(--mnb-bg); color: var(--mnb-text); cursor: pointer; transition: border-color .12s, background-color .12s; }
.mpc-fob__tiles label { gap: 4px; padding: 14px 10px 12px; }
.mpc-fob__tiles b { font-size: .95rem; line-height: 1.25; } .mpc-fob__tiles small { font-size: .8rem; line-height: 1.3; color: var(--mnb-muted); }
.mpc-fob input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.mpc-fob__days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.mpc-fob__days label { padding: 8px 4px; line-height: 1.1; }
.mpc-fob__days b { font-family: var(--mnb-font-impact); font-weight: 400; font-size: 1.5rem; margin: 2px 0; }
.mpc-fob__days small { font-size: .76rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mnb-muted); }
.mpc-fob__times { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 14px 0 0; }
.mpc-fob__times label { padding: 10px 4px; } .mpc-fob__times b { font-size: .95rem; }
.mpc-fob__times .mpc-fob__hint { grid-column: 1 / -1; margin: 0; }
.mpc-fob__hint { margin: 10px 0 0; font-size: .88rem; color: var(--mnb-muted); }
.mpc-fob label:has(input:checked) { border-color: #DDA92A; background: color-mix(in srgb, #F2C043 16%, var(--mnb-surface)); box-shadow: 0 0 0 3px rgba(242, 192, 67, .25); }
.mpc-fob__tiles label:has(input:checked)::after { content: "\2713"; position: absolute; top: 6px; right: 8px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: .8rem; font-weight: 800; color: var(--mnb-gold-on); background: #F2C043; }
.mpc-fob label:has(input:focus-visible) { outline: 2px solid var(--mnb-link); outline-offset: 2px; }
.mpc-fob__step.is-bad { background: color-mix(in srgb, #B32C23 7%, var(--mnb-surface)); }
.mpc-fob__f input.is-bad { border-color: #B32C23; box-shadow: 0 0 0 3px rgba(179, 44, 35, .18); }
.mpc-fob__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mpc-fob__send { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 22px; border-top: 1px solid var(--mnb-border); background: color-mix(in srgb, var(--mnb-text) 4%, var(--mnb-surface)); }
.mpc-fob__send p { margin: 0; font-size: .9rem; color: var(--mnb-muted); }
.mpc-fob__send p.is-bad { color: #B32C23; font-weight: 700; }
.mpc-fob__send .mpc-btn { white-space: nowrap; cursor: pointer; font-family: var(--mnb-font-impact); font-size: 1.05rem; }
.mpc-fob__send .mpc-btn[disabled] { opacity: .7; cursor: default; }
.mpc-fob--done { padding: 26px 22px; text-align: center; }
.mpc-fob--done h3 { margin: 8px 0 6px; font-family: var(--mnb-font-impact); font-weight: 400; font-size: 1.5rem; letter-spacing: .03em; text-transform: uppercase; }
.mpc-fob--done p { margin: 0 auto 14px; max-width: 520px; }
.mpc-fob--done .mpc-actions { justify-content: center; }
.mpc-fob__ok { display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; font-size: 30px; font-weight: 800; color: #fff; background: linear-gradient(145deg, #3FB868, #1B7F3F); box-shadow: 0 0 0 5px rgba(47, 166, 90, .2); }
[data-theme="dark"] .mpc-fob__step.is-bad { background: rgba(179, 44, 35, .16); }
[data-theme="dark"] .mpc-fob__send p.is-bad { color: #F08A80; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .mpc-fob__step.is-bad { background: rgba(179, 44, 35, .16); } :root:not([data-theme]) .mpc-fob__send p.is-bad { color: #F08A80; } }
@media (max-width: 760px) {
  .mpc-walkin { flex-wrap: wrap; }
  .mpc-walkin__text { flex: 1 1 calc(100% - 80px); }
  .mpc-walkin__pill { margin-left: auto; }
  .mpc-fob__step { padding: 16px 14px 18px; }
  .mpc-fob__row--car, .mpc-fob__row--two { grid-template-columns: 1fr; }
  .mpc-fob__tiles { grid-template-columns: 1fr 1fr; }
  .mpc-fob__days { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .mpc-fob__days b { font-size: 1.3rem; }
  .mpc-fob__times { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mpc-fob__send { flex-direction: column; align-items: stretch; padding: 16px 14px; }
}
/* (web-136) Fob form in the contact form's colours, not the tan: boxes, key tiles, day and time chips
   light blue with a slate edge (dark mode: the contact form's dark fields). The chosen one stays gold. */
.mpc-fob__f input { height: 50px; padding: 0 14px; background: #D6E3EA; border: 2px solid #9AA7AE; border-radius: 10px; }
.mpc-fob__f input::placeholder { color: #6E7C83; }
.mpc-fob__f input:focus { border-color: var(--mnb-gold); box-shadow: none; }
.mpc-fob__tiles label, .mpc-fob__days label, .mpc-fob__times label { background: #D6E3EA; border-color: #9AA7AE; }
.mpc-fob__tiles label:hover, .mpc-fob__days label:hover, .mpc-fob__times label:hover { border-color: #6E7C83; }
.mpc-fob__tiles small, .mpc-fob__days small { color: #4F5C63; }
.mpc-fob label:has(input:checked) { background: color-mix(in srgb, #F2C043 22%, #FFFFFF); border-color: #DDA92A; }
[data-theme="dark"] .mpc-fob__f input, [data-theme="dark"] .mpc-fob__tiles label, [data-theme="dark"] .mpc-fob__days label, [data-theme="dark"] .mpc-fob__times label { background-color: rgba(255, 255, 255, .05); border-color: var(--mnb-border); }
[data-theme="dark"] .mpc-fob__f input::placeholder, [data-theme="dark"] .mpc-fob__tiles small, [data-theme="dark"] .mpc-fob__days small { color: var(--mnb-muted); }
[data-theme="dark"] .mpc-fob label:has(input:checked) { background: rgba(242, 192, 67, .16); border-color: #DDA92A; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .mpc-fob__f input, :root:not([data-theme]) .mpc-fob__tiles label, :root:not([data-theme]) .mpc-fob__days label, :root:not([data-theme]) .mpc-fob__times label { background-color: rgba(255, 255, 255, .05); border-color: var(--mnb-border); }
  :root:not([data-theme]) .mpc-fob__f input::placeholder, :root:not([data-theme]) .mpc-fob__tiles small, :root:not([data-theme]) .mpc-fob__days small { color: var(--mnb-muted); }
  :root:not([data-theme]) .mpc-fob label:has(input:checked) { background: rgba(242, 192, 67, .16); border-color: #DDA92A; }
}

/* (web-137) Footer: a thin line on top, the menu as left-aligned columns with gold headings, a centred
   line with the address and hours, and the copyright centred at the bottom under a thin rule. */
.mnb-footer.mpc-foot { padding: 34px 24px 22px; border-top: 1px solid rgba(255, 255, 255, .5); }   /* (web-138) a thin white line, not the gold stripe */
.mpc-foot > * { max-width: 1050px; }
.mpc-foot__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; margin-bottom: 0; text-align: left; }
.mpc-foot__col h2 { margin: 0 0 12px; font-family: var(--mnb-font-impact); font-weight: 400; font-size: 1.1rem; line-height: 1.1; letter-spacing: .06em; text-transform: uppercase; color: #F2C043; }
.mpc-foot__col ul { list-style: none; margin: 0; padding: 0; }
.mpc-foot__col li { margin: 0 0 9px; font-size: .95rem; line-height: 1.35; }
.mpc-foot__col a { color: #fff; text-decoration: none; }
.mpc-foot__col a:hover { color: #F2C043; text-decoration: none; }
.mpc-foot__strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin-top: 28px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .22); font-size: .9rem; line-height: 1.5; color: #fff; text-align: center; }
.mpc-foot__copy { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .14); text-align: center; font-size: .75rem; font-weight: 600; color: #F2C043; }
@media (max-width: 760px) {
  .mnb-footer.mpc-foot { padding: 28px 20px 20px; }
  .mpc-foot__cols { grid-template-columns: 1fr 1fr; gap: 24px 18px; }
  .mpc-foot__strip { flex-direction: column; gap: 2px; }
}
/* (web-139) Light mode: the footer casts a soft shadow up onto the page above it. */
:root:not([data-theme="dark"]) .mnb-footer.mpc-foot { position: relative; box-shadow: 0 -8px 18px -8px rgba(0, 0, 0, .35), 0 -1px 3px rgba(0, 0, 0, .12); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .mnb-footer.mpc-foot { box-shadow: none; } }
/* (web-140) Light mode: the footer's column headings in white (dark mode keeps them gold). */
:root:not([data-theme="dark"]) .mpc-foot__col h2 { color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .mpc-foot__col h2 { color: #F2C043; } }
/* (web-142) Fob form: year / make / model drop-downs in the same light-blue boxes (the Contact form's
   chevron), the optional VIN with its Look-it-up button, and the line under it saying what it found. */
.mpc-fob__f select { width: 100%; box-sizing: border-box; height: 50px; padding: 0 40px 0 14px; font: inherit; font-size: 16px; color: var(--mnb-text);
  background: #D6E3EA url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23171E22' stroke-width='2'/></svg>") no-repeat right 14px center;
  border: 2px solid #9AA7AE; border-radius: 10px; -webkit-appearance: none; appearance: none; }
.mpc-fob__f select:focus { outline: 0; border-color: var(--mnb-gold); }
.mpc-fob__f select:disabled { opacity: .6; }
.mpc-fob__f select.is-bad { border-color: #B32C23; box-shadow: 0 0 0 3px rgba(179, 44, 35, .18); }
.mpc-fob__f input[hidden], .mpc-fob__f select[hidden] { display: none; }
.mpc-fob__f label small { font-weight: 600; text-transform: none; letter-spacing: 0; opacity: .8; }
.mpc-fob__vin { margin: 0 0 14px; padding: 0 0 14px; border-bottom: 1px dashed var(--mnb-border); }
.mpc-fob__vinrow { display: flex; gap: 10px; }
.mpc-fob__vinrow input { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; }
.mpc-fob__vinrow input::placeholder { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: 0; text-transform: none; }
.mpc-fob__vinrow .mpc-btn { flex: none; height: 50px; padding: 0 18px; cursor: pointer; font-family: var(--mnb-font-impact); font-size: 1.05rem; white-space: nowrap; }
.mpc-fob__hint.is-good { color: #1B7F3F; font-weight: 700; }
.mpc-fob__hint.is-bad { color: #B32C23; font-weight: 700; }
[data-theme="dark"] .mpc-fob__f select { background-color: rgba(255, 255, 255, .05); border-color: var(--mnb-border);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23E5E7EB' stroke-width='2'/></svg>"); }
[data-theme="dark"] .mpc-fob__f select option { background: #0E2030; color: #fff; }
[data-theme="dark"] .mpc-fob__hint.is-good { color: #5BD08A; } [data-theme="dark"] .mpc-fob__hint.is-bad { color: #F08A80; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .mpc-fob__f select { background-color: rgba(255, 255, 255, .05); border-color: var(--mnb-border);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23E5E7EB' stroke-width='2'/></svg>"); }
  :root:not([data-theme]) .mpc-fob__f select option { background: #0E2030; color: #fff; }
  :root:not([data-theme]) .mpc-fob__hint.is-good { color: #5BD08A; } :root:not([data-theme]) .mpc-fob__hint.is-bad { color: #F08A80; }
}
@media (max-width: 760px) { .mpc-fob__vinrow { flex-direction: column; } .mpc-fob__vinrow .mpc-btn { height: 46px; } }
/* (web-143) Anything hidden inside the page card stays hidden (the fob form's thank-you hides what's above it). */
.mpc-bigcard [hidden], .mnb-section__title[hidden] { display: none !important; }
/* (web-144) Fob form, step 1: the VIN on the left, year / make / model on the right, and "OR" between
   them (a line with a round badge), so it's clear either one is enough. Stacked on phones, with the
   line across instead. */
.mpc-fob__pick { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0 22px; align-items: start; }
.mpc-fob__pick .mpc-fob__vin { margin: 0; padding: 0; border: 0; }
.mpc-fob__pick .mpc-fob__row--car { grid-template-columns: 120px minmax(0, 1fr); }
.mpc-fob__pick .mpc-fob__row--car > .mpc-fob__f:last-child { grid-column: 1 / -1; }
.mpc-fob__or { position: relative; align-self: stretch; display: flex; align-items: center; justify-content: center; min-height: 120px; width: 44px; }
.mpc-fob__or::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px dashed var(--mnb-border); }
.mpc-fob__or span { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--mnb-surface, #fff); border: 2px solid var(--mnb-border); color: var(--mnb-muted);
  font-family: var(--mnb-font-impact); font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; }
.mpc-fob__pick .mpc-fob__vinrow { flex-direction: row; }
.mpc-fob__pick .mpc-fob__vinrow .mpc-btn { height: 50px; }
@media (max-width: 760px) {
  .mpc-fob__pick { grid-template-columns: 1fr; }
  .mpc-fob__or { width: auto; min-height: 0; height: 44px; margin: 14px 0; }
  .mpc-fob__or::before { top: 50%; bottom: auto; left: 0; right: 0; border-left: 0; border-top: 1px dashed var(--mnb-border); }
  .mpc-fob__pick .mpc-fob__row--car { grid-template-columns: 1fr; }
  .mpc-fob__pick .mpc-fob__vinrow .mpc-btn { padding: 0 14px; }
}
/* (web-145) The OR line and badge, easier to see: darker in light mode, lighter in dark mode. */
.mpc-fob__or::before { border-color: #8A979E; border-left-width: 2px; }
.mpc-fob__or span { border-color: #8A979E; color: #5B6970; }
@media (max-width: 760px) { .mpc-fob__or::before { border-left-width: 0; border-top-width: 2px; } }
[data-theme="dark"] .mpc-fob__or::before, [data-theme="dark"] .mpc-fob__or span { border-color: rgba(255, 255, 255, .45); }
[data-theme="dark"] .mpc-fob__or span { color: rgba(255, 255, 255, .8); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .mpc-fob__or::before, :root:not([data-theme]) .mpc-fob__or span { border-color: rgba(255, 255, 255, .45); }
  :root:not([data-theme]) .mpc-fob__or span { color: rgba(255, 255, 255, .8); }
}
/* (web-146) The VIN's help line: smaller, like instructions. */
.mpc-fob .mpc-fob__vin .mpc-fob__hint { font-size: .8rem; line-height: 1.45; margin-top: 8px; }
/* (web-147) Drop-offs: sample labels we take (green check) and a QR code we don't (red X). */
.mpc-samples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 6px 0 22px; }
.mpc-sample { margin: 0; text-align: center; }
.mpc-sample__img { display: block; width: 100%; max-width: 190px; height: auto; margin: 0 auto; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .14)); }
.mpc-sample figcaption { margin-top: 8px; font-weight: 700; font-size: .92rem; }
.mpc-sample--ok figcaption { color: #1B7F3F; }
.mpc-sample--no figcaption { color: #B32C23; }
.mpc-qrnote { display: flex; align-items: center; gap: 24px; }
.mpc-qrnote .mpc-sample { flex: 0 0 160px; }
.mpc-qrnote p { margin: 0; }
[data-theme="dark"] .mpc-sample--ok figcaption { color: #5BD08A; } [data-theme="dark"] .mpc-sample--no figcaption { color: #F08A80; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .mpc-sample--ok figcaption { color: #5BD08A; } :root:not([data-theme]) .mpc-sample--no figcaption { color: #F08A80; } }
@media (max-width: 600px) {
  .mpc-samples { gap: 10px; }
  .mpc-sample figcaption { font-size: .78rem; }
  .mpc-qrnote { flex-direction: column; gap: 14px; }
  .mpc-qrnote .mpc-sample { flex-basis: auto; width: 150px; }
}
/* (web-149) The QR picture drawn at the same size as the labels, so its red X matches their checks. */
.mpc-qrnote .mpc-sample { flex: 0 0 190px; }
@media (max-width: 600px) { .mpc-qrnote .mpc-sample { flex-basis: auto; width: calc((100% - 20px) / 3); } }
/* (web-151) Fob form: "Is the vehicle drivable?" (Yes / No chips like the times) and, on No, where
   the car is; in step 2 an optional photo of the key, with a small preview once it's picked. */
.mpc-fob [hidden] { display: none !important; }
.mpc-fob__drive { margin: 18px 0 0; padding: 16px 0 0; border-top: 1px dashed #8A979E; }
.mpc-fob__q { margin: 0 0 10px; font-size: 1rem; font-weight: 700; color: var(--mnb-text); }
.mpc-fob__times.mpc-fob__yn { grid-template-columns: repeat(2, minmax(0, 130px)); margin: 0; }
.mpc-fob__yn.is-bad label { border-color: #B32C23; }
.mpc-fob__where { margin: 14px 0 0; }
.mpc-fob__where > .mpc-fob__hint { margin: 0 0 12px; }
.mpc-fob__row--addr { grid-template-columns: minmax(0, 1fr) 90px 140px; }
.mpc-fob__photo { margin: 16px 0 0; }
.mpc-fob__photobtn { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; padding: 14px 16px; border-radius: 12px; border: 2px dashed #8A979E;
  background: transparent; color: var(--mnb-text); font: inherit; font-weight: 700; text-align: left; cursor: pointer; transition: border-color .12s; }
.mpc-fob__photobtn:hover { border-color: #DDA92A; }
.mpc-fob__photobtn svg { flex: none; width: 28px; height: 28px; }
.mpc-fob__photobtn small { margin-left: auto; font-size: .82rem; font-weight: 600; color: var(--mnb-muted); }
.mpc-fob__photoprev { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 12px; border: 2px solid #DDA92A; background: color-mix(in srgb, #F2C043 12%, transparent); }
.mpc-fob__photoprev img { flex: none; width: 84px; height: 84px; object-fit: cover; border-radius: 8px; }
.mpc-fob__photoprev button { padding: 0; border: 0; background: none; font: inherit; color: var(--mnb-link); text-decoration: underline; cursor: pointer; }
.mpc-fob__photo.is-bad .mpc-fob__photobtn, .mpc-fob__photo.is-bad .mpc-fob__photoprev { border-color: #B32C23; }
[data-theme="dark"] .mpc-fob__drive, [data-theme="dark"] .mpc-fob__photobtn { border-color: rgba(255, 255, 255, .35); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .mpc-fob__drive, :root:not([data-theme]) .mpc-fob__photobtn { border-color: rgba(255, 255, 255, .35); } }
@media (max-width: 760px) {
  .mpc-fob__times.mpc-fob__yn { grid-template-columns: 1fr 1fr; }
  .mpc-fob__row--addr { grid-template-columns: 90px minmax(0, 1fr); }
  .mpc-fob__row--addr > :first-child { grid-column: 1 / -1; }
}
/* (web-152) "Is the vehicle drivable?" is its own step (2), so no line of its own above it. */
#fdrivestep .mpc-fob__yn { margin-top: 0; }
/* (web-153) Yes / No: half the width each, a little taller and bigger. */
.mpc-fob__times.mpc-fob__yn { grid-template-columns: 1fr 1fr; gap: 12px; }
.mpc-fob__yn label { padding: 16px 8px; }
.mpc-fob__yn b { font-size: 1.15rem; }
/* (web-155) Key copies: the green tag on its own row under the sentence, left-aligned with it */
.mpc-walkin__text .mpc-walkin__pill { display: inline-block; margin: 10px 0 0; }
@media (max-width: 760px) { .mpc-walkin__text .mpc-walkin__pill { margin-left: 0; border-radius: 12px; line-height: 1.3; } }