/* Mia for VP components. Requires tokens/tokens.css. Every color and font here is a --mv-* token;
   nothing else. Classes are .mv-* so they never collide with app styles.
   Register: light-first. Cream-pink and blush bands all the way down; the plum field is the footer only.
   Signature detail: .mv-mark, a petal underline under one word per headline; .mv-mark--pill for the wordmark. */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--mv-field-light); color: var(--mv-title-on-light);
  font: var(--mv-fw-body) var(--mv-fs-body)/var(--mv-lh-body) var(--mv-font-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, p, figure, blockquote { margin: 0; }
img { max-width: 100%; display: block; }
:where(h1, h2, h3, h4, h5, .mv-display) { font-family: var(--mv-font-head); color: var(--mv-title-on-light); text-wrap: balance; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; } }

/* ---- Type ---- */
.mv-display { font-family: var(--mv-font-head); font-size: clamp(44px, 8vw, var(--mv-fs-display)); line-height: var(--mv-lh-display); font-weight: var(--mv-fw-display); letter-spacing: var(--mv-ls-display, 0); max-width: 14ch; overflow-wrap: anywhere; }
@media (max-width: 820px) { .mv-display { line-height: var(--mv-lh-display-sm); } }  /* a phone headline wraps, and the petal pill on its own line needs the leading that 1.10 does not give it */
@media (max-width: 480px) { .mv-display { font-size: clamp(44px, 13vw, 52px); } }  /* 8vw is 30px on a phone, so the floor was doing all the work; a phone hero wants the headline nearer h1 than h2 */
.mv-h1, h1 { font-size: clamp(36px, 6vw, var(--mv-fs-h1)); line-height: var(--mv-lh-h1); font-weight: var(--mv-fw-h1); letter-spacing: var(--mv-ls-h1, 0); }
.mv-h2, h2 { font-size: clamp(30px, 4.5vw, var(--mv-fs-h2)); line-height: var(--mv-lh-h2); font-weight: var(--mv-fw-h2); letter-spacing: var(--mv-ls-h2, 0); }
.mv-h3, h3 { font-size: var(--mv-fs-h3); line-height: var(--mv-lh-h3); font-weight: var(--mv-fw-h3); }
.mv-h4, h4 { font-size: var(--mv-fs-h4); line-height: var(--mv-lh-h4); font-weight: var(--mv-fw-h4); }
.mv-h5, h5 { font-size: var(--mv-fs-h5); line-height: var(--mv-lh-h5); font-weight: var(--mv-fw-h5); }
.mv-lede { font-size: var(--mv-fs-lede); line-height: var(--mv-lh-lede); color: var(--mv-body-on-light); max-width: 44ch; }
.mv-body { max-width: var(--mv-measure); color: var(--mv-body-on-light); }
.mv-body p + p { margin-top: var(--mv-space-md); }
.mv-small { font-size: var(--mv-fs-small); line-height: var(--mv-lh-small); }
.mv-caption { font-size: var(--mv-fs-caption); line-height: var(--mv-lh-caption); color: var(--mv-muted); }
.mv-overline { font: var(--mv-fw-overline) var(--mv-fs-overline)/var(--mv-lh-overline) var(--mv-font-mono); letter-spacing: var(--mv-ls-overline); text-transform: var(--mv-tt-overline, none); color: var(--mv-muted); margin-bottom: var(--mv-space-md); }
.mv-credit { font: var(--mv-fw-credit) var(--mv-fs-credit)/var(--mv-lh-credit) var(--mv-font-mono); letter-spacing: var(--mv-ls-credit); text-transform: var(--mv-tt-credit, none); color: var(--mv-muted); }
.mv-mono { font-family: var(--mv-font-mono); }

/* Signature detail: the petal pill behind ONE word per headline, never more. */
/* Default: a petal underline. It cannot collide with the line above, and a marked word that starts
   a line needs no correction — both of which the pill had to have tuned out of it. */
.mv-mark { color: var(--mv-title-on-light); text-decoration: underline;
  text-decoration-color: var(--mv-petal); text-decoration-thickness: 0.14em;
  text-underline-offset: 0.08em; text-decoration-skip-ink: none; }
/* The enclosed pill, kept for the wordmark: a logo needs a shape, not an underline. Drawn with
   box-shadow rather than horizontal padding so it never shifts the text it sits behind. */
.mv-mark--pill { background: var(--mv-petal); border-radius: var(--mv-radius-pill); text-decoration: none;
  padding: 0.04em 0; box-shadow: -0.16em 0 0 var(--mv-petal), 0.16em 0 0 var(--mv-petal);
  box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.mv-mark--solid { background: var(--mv-primary); color: var(--mv-on-primary); border-radius: var(--mv-radius-pill);
  text-decoration: none; padding: 0.04em 0; box-shadow: -0.16em 0 0 var(--mv-primary), 0.16em 0 0 var(--mv-primary);
  box-decoration-break: clone; -webkit-box-decoration-break: clone; }
/* Text-only variant: the signature idea without a second pill in view. For one word inside running
   copy — her middle name — where a pill would shout and bold Nunito is banned (see Type > Don't). */
.mv-mark--text { background: none; box-shadow: none; padding: 0; text-decoration: none; color: var(--mv-link); }

/* ---- Bands and layout ---- */
.mv-band-light { background: var(--mv-field-light); color: var(--mv-title-on-light); }
.mv-band-tint { background: var(--mv-field-tint); color: var(--mv-title-on-light); }
.mv-band-dark { background: var(--mv-field-dark); color: var(--mv-title-on-dark); }
.mv-band-dark :where(h1, h2, h3, h4, h5, .mv-display) { color: var(--mv-title-on-dark); }
.mv-band-dark .mv-body, .mv-band-dark .mv-lede, .mv-band-dark .mv-overline, .mv-band-dark .mv-caption, .mv-band-dark .mv-credit { color: var(--mv-body-on-dark); }
.mv-band-dark a:not(.mv-btn) { color: var(--mv-link-on-dark); }
.mv-container { max-width: var(--mv-container); margin: 0 auto; padding: var(--mv-section-y) var(--mv-gutter); }
.mv-two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--mv-space-2xl); align-items: center; }
.mv-two-col .mv-media { display: flex; justify-content: center; }  /* the photo cell of a two-column block */
@media (max-width: 820px) { .mv-two-col { grid-template-columns: minmax(0, 1fr); gap: var(--mv-space-lg); } .mv-two-col .mv-media { order: -1; }  /* stacked, the portrait leads */
  .mv-container { padding: var(--mv-space-xl) var(--mv-space-md); } }

/* Decorative circles. Always aria-hidden, never behind body text, at most two per band. */
.mv-blob { position: absolute; border-radius: var(--mv-radius-pill); background: var(--mv-blob); pointer-events: none; }
.mv-has-blobs { position: relative; overflow: hidden; isolation: isolate; }
.mv-has-blobs > :not(.mv-blob) { position: relative; z-index: 1; }
@media (max-width: 820px) { .mv-blob { display: none; } }  /* below md there is no room to keep a circle out from behind the text */

/* ---- Nav ---- */
.mv-nav { position: sticky; top: 0; z-index: 100; min-height: var(--mv-nav-height); padding: var(--mv-space-xs) var(--mv-gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--mv-space-lg);
  background: var(--mv-petal); color: var(--mv-title-on-light); border-bottom: 1px solid var(--mv-plum-20); }
.mv-nav .mv-logo { font: var(--mv-fw-h4) var(--mv-fs-h4)/1 var(--mv-font-head); color: inherit; text-decoration: none; white-space: nowrap; }
.mv-nav .mv-logo .mv-mark--text { color: var(--mv-petal-ink); }  /* "VP" in the ink the kit reserves for text on a petal fill — 4.85:1 */
.mv-nav .mv-links { display: flex; gap: var(--mv-space-lg); align-items: center; }
.mv-nav .mv-links a { color: var(--mv-title-on-light); text-decoration: none; font-family: var(--mv-font-head); font-size: var(--mv-fs-small); font-weight: var(--mv-fw-h3); white-space: nowrap; transition: color var(--mv-motion-fast) var(--mv-motion-ease); }
/* Ink on this bar is plum, not the body role: body-on-light is 3.17:1 on mid-rose and fails AA. Plum is 6.23:1. */
.mv-nav .mv-links a:hover, .mv-nav .mv-links a.is-hover { text-decoration: underline; text-decoration-color: var(--mv-plum-60); text-underline-offset: 6px; text-decoration-thickness: 2px; }
.mv-nav .mv-links a[aria-current] { text-decoration: underline; text-decoration-color: var(--mv-plum); text-underline-offset: 6px; text-decoration-thickness: 2px; }
.mv-nav a:focus-visible { outline: 2px solid var(--mv-plum); outline-offset: 4px; border-radius: var(--mv-radius-sm); }
.mv-nav .mv-btn--secondary { color: var(--mv-title-on-light); border-color: var(--mv-plum-40); }  /* rose-deep is 3.04:1 here; the plum ink carries it */
.mv-nav .mv-btn--secondary:hover, .mv-nav .mv-btn--secondary.is-hover { background: var(--mv-fill-light); border-color: var(--mv-plum); }
@media (max-width: 820px) { .mv-nav { min-height: var(--mv-nav-height-sm); padding: 0 var(--mv-space-md); }  /* no block padding: the token is the whole height, border included */
  .mv-nav .mv-btn--sm { min-height: 44px; }  /* thumb-target floor */
  .mv-nav .mv-links a:not(.mv-btn) { display: none; } }

/* ---- Hero (light by default; this brand has no dark hero) ---- */
.mv-hero { background: var(--mv-field-light); color: var(--mv-title-on-light); }
.mv-hero--tint { background: var(--mv-field-tint); }
.mv-hero .mv-inner { max-width: var(--mv-container); margin: 0 auto; padding: var(--mv-space-3xl) var(--mv-gutter); }
.mv-hero .mv-sub { margin-top: var(--mv-space-lg); font-size: var(--mv-fs-lede); line-height: var(--mv-lh-lede); color: var(--mv-body-on-light); max-width: 40ch; }
.mv-hero .mv-btns { margin-top: var(--mv-space-xl); display: flex; gap: var(--mv-space-sm); flex-wrap: wrap; }
@media (max-width: 820px) { .mv-hero .mv-inner { padding: var(--mv-space-xl) var(--mv-space-md); } .mv-hero .mv-sub { margin-top: var(--mv-space-xl); } }
@media (max-width: 480px) { .mv-hero .mv-btns .mv-btn { flex: 1 1 auto; } }  /* when the pair wraps on a narrow phone, each takes the full row instead of a ragged short second button */

/* The hero's facts line, under the sub: office and school on a petal rule, so the
   headline is the first thing read and the pill shape stays exclusive to .mv-mark.
   The countdown badge lives here too — when there is a date, it is the one pill in view. */
.mv-hero-byline { margin-top: var(--mv-space-lg); padding-top: var(--mv-space-md); border-top: 3px solid var(--mv-petal);
  max-width: 52ch; display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--mv-space-sm) var(--mv-space-lg); flex-wrap: wrap; }
/* The countdown takes its own row under the letterhead line. Inline, it forces the office to
   wrap on a phone and pushes the school off the rule's right edge. */
.mv-hero-byline #countdown { flex-basis: 100%; max-width: max-content; margin-top: var(--mv-space-xs); }
/* Set in the label face, sentence case, with the office dark and the school muted:
   a byline the page meant to write, not a caption left over from a template. */
.mv-hero-byline .mv-meta { font-family: var(--mv-font-head); font-size: var(--mv-fs-body); font-weight: var(--mv-fw-h3);
  line-height: var(--mv-lh-small); color: var(--mv-title-on-light); }
/* margin-left:auto, not just space-between: between 821 and ~1000 the two halves do not fit on
   one line, and this keeps the school on the rule's right end when it drops to its own row. */
.mv-hero-byline .mv-meta--end { color: var(--mv-body-on-light); text-align: right; margin-left: auto; }

/* Hero with a portrait beside the copy. Below 821 the arch is removed rather than
   shrunk: a phone hero is one thumb-length and a photo would cost the whole fold. */
.mv-hero-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: var(--mv-space-2xl); align-items: center; }
/* On a phone the hero is one column and the portrait is opt-in, not opt-out: it costs ~171px, and
   the hero has exactly one screen to hold a face, a slogan and two buttons above the sticky bar.
   It appears only where the screen can pay — measured, not guessed: 375x812 lands at exactly 696px
   of hero against 696px of usable screen, while 360x740 needs 738 and has 624. */
@media (max-width: 820px) { .mv-hero-split { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .mv-hero-split .mv-media { display: none; } }
@media (max-width: 820px) and (min-width: 361px) and (min-height: 800px) {
  .mv-hero-split .mv-media { display: flex; order: -1; margin-bottom: var(--mv-space-md); } }
@media (max-width: 820px) { .mv-hero .mv-inner { padding-block: var(--mv-space-lg); }
  .mv-hero .mv-sub { margin-top: var(--mv-space-lg); }
  .mv-hero .mv-hero-byline { margin-top: var(--mv-space-md); }
  .mv-hero .mv-btns { margin-top: var(--mv-space-lg); } }


/* ---- Buttons: 8 states. .is-* classes let the preview force a state. ---- */
.mv-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--mv-space-xs); position: relative;
  font: var(--mv-fw-h3) var(--mv-fs-button)/var(--mv-lh-button) var(--mv-font-head); letter-spacing: var(--mv-ls-button, 0);
  min-height: 48px; padding: 0 24px; border: 1.5px solid transparent; border-radius: var(--mv-radius-button);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--mv-motion-fast) var(--mv-motion-ease), color var(--mv-motion-fast) var(--mv-motion-ease), border-color var(--mv-motion-fast) var(--mv-motion-ease), transform var(--mv-motion-fast) var(--mv-motion-ease); }
.mv-btn--primary { background: var(--mv-primary); color: var(--mv-on-primary); }
.mv-btn--primary:hover, .mv-btn--primary.is-hover { background: var(--mv-primary-hover); }
.mv-btn--primary:active, .mv-btn--primary.is-active { background: var(--mv-primary-hover); transform: translateY(1px); }
.mv-btn--secondary { background: transparent; color: var(--mv-title-on-light); border-color: var(--mv-line-light); }
.mv-btn--secondary:hover, .mv-btn--secondary.is-hover { background: var(--mv-fill-light); border-color: var(--mv-muted); }
.mv-btn--secondary:active, .mv-btn--secondary.is-active { transform: translateY(1px); }
.mv-btn--soft { background: var(--mv-field-tint); color: var(--mv-petal-ink); }
.mv-btn--soft:hover, .mv-btn--soft.is-hover { background: var(--mv-petal); }
.mv-btn--ghost { background: transparent; color: var(--mv-link); padding-left: 0; padding-right: 0; min-height: 44px; }
.mv-btn--ghost:hover, .mv-btn--ghost.is-hover { text-decoration: underline; text-underline-offset: 4px; }
.mv-btn--danger { background: var(--mv-danger); color: var(--mv-on-primary); }
.mv-btn--sm { min-height: 40px; padding: 0 18px; font-size: var(--mv-fs-caption); }
.mv-btn:focus-visible, .mv-btn.is-focus { outline: 2px solid var(--mv-focus); outline-offset: 3px; }
.mv-btn:disabled, .mv-btn.is-disabled { background: var(--mv-gray-1); color: var(--mv-disabled-ink); border-color: transparent; cursor: not-allowed; pointer-events: none; }
.mv-btn.is-loading { color: transparent; pointer-events: none; }
.mv-btn.is-loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border: 2px solid var(--mv-on-primary); border-right-color: transparent; border-radius: var(--mv-radius-pill); animation: mv-spin .7s linear infinite; }
.mv-btn.is-error { background: var(--mv-danger); color: var(--mv-on-primary); }
.mv-btn.is-success { background: var(--mv-success); color: var(--mv-on-primary); }
.mv-band-dark .mv-btn--secondary { color: var(--mv-title-on-dark); border-color: var(--mv-line-dark); }
.mv-band-dark .mv-btn--secondary:hover, .mv-band-dark .mv-btn--secondary.is-hover { background: var(--mv-fill-dark-hover); border-color: var(--mv-title-on-dark); }
@keyframes mv-spin { to { transform: rotate(360deg); } }

/* ---- Links ---- */
.mv-link { color: var(--mv-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; font-weight: var(--mv-fw-button); }
.mv-link:hover { text-decoration-thickness: 2.5px; }
.mv-link:focus-visible { outline: 2px solid var(--mv-focus); outline-offset: 3px; border-radius: var(--mv-radius-sm); }
.mv-link--plain { text-decoration: none; }
.mv-link--plain:hover { text-decoration: underline; }
.mv-link .mv-arrow { display: inline-block; transition: transform var(--mv-motion-fast) var(--mv-motion-ease); }
.mv-link:hover .mv-arrow { transform: translateX(3px); }
.mv-band-dark .mv-link { color: var(--mv-link-on-dark); }

/* ---- Cards ---- */
.mv-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--mv-space-md); margin-top: var(--mv-space-xl); }
.mv-card { background: var(--mv-card-light); border: 1px solid var(--mv-line-light); border-radius: var(--mv-radius-default); padding: var(--mv-space-lg); box-shadow: var(--mv-shadow-card); }
.mv-card--soft { background: var(--mv-field-tint); border-color: transparent; }
.mv-card .mv-card-title { font: var(--mv-fw-h5) var(--mv-fs-h5)/var(--mv-lh-h5) var(--mv-font-head); margin-bottom: var(--mv-space-xs); }
.mv-card p { font-size: var(--mv-fs-small); line-height: var(--mv-lh-small); color: var(--mv-body-on-light); }
.mv-card .mv-link { display: inline-block; margin-top: var(--mv-space-sm); }
.mv-band-tint .mv-card { border-color: transparent; }
.mv-band-dark .mv-card { background: var(--mv-card-dark); border-color: var(--mv-line-dark); }
.mv-band-dark .mv-card p { color: var(--mv-body-on-dark); }

/* Phone rows. Below sm a stacked list of three cards runs past a screen, so a card can lay out sideways:
   --row keeps the icon tile on the left with title and copy beside it; --kv turns the title into a
   left-hand label ("When", "Where") beside its copy. Above sm both are ordinary stacked cards. */
@media (max-width: 640px) {
  .mv-card-grid { gap: var(--mv-space-sm); margin-top: var(--mv-space-lg); }
  .mv-card--row, .mv-card--kv { display: grid; column-gap: var(--mv-space-md); align-items: baseline; padding: var(--mv-space-md); }
  .mv-card--row { grid-template-columns: max-content minmax(0, 1fr); }
  .mv-card--row .mv-tile { grid-row: 1 / span 2; align-self: start; margin-bottom: 0; }
  .mv-card--row .mv-card-title { grid-column: 2; margin-bottom: 2px; }
  .mv-card--row p { grid-column: 2; }
  .mv-card--kv { grid-template-columns: 5.5em minmax(0, 1fr); }
  .mv-card--kv .mv-card-title { margin-bottom: 0; }
}

/* Round icon tile: blush on white cards, white on blush cards. */
.mv-tile { width: 48px; height: 48px; border-radius: var(--mv-radius-tile); background: var(--mv-icon-tile); color: var(--mv-petal-ink);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--mv-space-md); }
.mv-card--soft .mv-tile, .mv-band-tint .mv-card--soft .mv-tile { background: var(--mv-icon-tile-alt); } /* the card's own fill decides the tile, not the band */
.mv-band-dark .mv-tile { background: var(--mv-card-dark); color: var(--mv-link-on-dark); }

/* ---- Photo: the arch ---- */
.mv-photo { border-radius: var(--mv-radius-photo); overflow: hidden; background: var(--mv-petal); aspect-ratio: 4 / 5; }
.mv-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }  /* a face sits above centre; crop the feet, not the head */
.mv-photo--round { border-radius: var(--mv-radius-pill); aspect-ratio: 1; }
.mv-photo--card { border-radius: var(--mv-radius-default); aspect-ratio: 3 / 2; }
.mv-photo-frame { position: relative; display: inline-block; }
.mv-photo-frame .mv-badge { position: absolute; bottom: var(--mv-space-md); left: 50%; transform: translateX(-50%); }

/* ---- Badges ---- */
.mv-badge { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px;
  font: var(--mv-fw-h3) var(--mv-fs-badge)/var(--mv-lh-badge) var(--mv-font-head); letter-spacing: var(--mv-ls-badge); text-transform: var(--mv-tt-badge, none);
  border-radius: var(--mv-radius-pill); background: var(--mv-petal); color: var(--mv-petal-ink); }
.mv-badge--soft { background: var(--mv-field-tint); color: var(--mv-petal-ink); }
.mv-badge--solid { background: var(--mv-primary); color: var(--mv-on-primary); }
.mv-badge--success { background: color-mix(in srgb, var(--mv-success) 14%, var(--mv-white)); color: var(--mv-success); }
.mv-badge--warning { background: color-mix(in srgb, var(--mv-warning) 16%, var(--mv-white)); color: var(--mv-warning); }
.mv-badge--danger { background: color-mix(in srgb, var(--mv-danger) 12%, var(--mv-white)); color: var(--mv-danger); }
.mv-band-dark .mv-badge { background: var(--mv-card-dark); color: var(--mv-link-on-dark); }

/* ---- Alerts ---- */
.mv-alert { display: flex; gap: var(--mv-space-sm); padding: var(--mv-space-md) var(--mv-space-lg);
  border: 1px solid var(--mv-line-light); border-radius: var(--mv-radius-default); background: var(--mv-card-light); font-size: var(--mv-fs-small); line-height: var(--mv-lh-small); color: var(--mv-body-on-light); }
.mv-alert b { display: block; margin-bottom: 2px; color: var(--mv-title-on-light); font-weight: var(--mv-fw-button); }
.mv-alert .mv-icon { flex: none; color: var(--mv-primary); }
.mv-alert--success { background: color-mix(in srgb, var(--mv-success) 8%, var(--mv-white)); border-color: color-mix(in srgb, var(--mv-success) 30%, var(--mv-white)); }
.mv-alert--success .mv-icon { color: var(--mv-success); }
.mv-alert--warning { background: color-mix(in srgb, var(--mv-warning) 10%, var(--mv-white)); border-color: color-mix(in srgb, var(--mv-warning) 30%, var(--mv-white)); }
.mv-alert--warning .mv-icon { color: var(--mv-warning); }
.mv-alert--danger { background: color-mix(in srgb, var(--mv-danger) 8%, var(--mv-white)); border-color: color-mix(in srgb, var(--mv-danger) 30%, var(--mv-white)); }
.mv-alert--danger .mv-icon { color: var(--mv-danger); }

/* ---- Forms ---- */
.mv-field { display: flex; flex-direction: column; gap: 6px; }
.mv-label { font-size: var(--mv-fs-small); font-weight: var(--mv-fw-button); }
.mv-input, .mv-select, .mv-textarea { font: inherit; color: inherit; width: 100%; min-height: 48px; padding: 12px 16px;
  background: var(--mv-input-field); border: 1.5px solid var(--mv-line-light); border-radius: var(--mv-radius-input);
  transition: border-color var(--mv-motion-fast) var(--mv-motion-ease), box-shadow var(--mv-motion-fast) var(--mv-motion-ease); }
.mv-textarea { min-height: 120px; }
.mv-input::placeholder, .mv-textarea::placeholder { color: var(--mv-muted); }
.mv-input:hover, .mv-select:hover, .mv-textarea:hover { border-color: var(--mv-muted); }
.mv-input:focus-visible, .mv-select:focus-visible, .mv-textarea:focus-visible { outline: none; border-color: var(--mv-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mv-focus) 25%, transparent); }
.mv-input[aria-invalid="true"], .mv-field.is-error .mv-input { border-color: var(--mv-danger); }
.mv-field.is-success .mv-input { border-color: var(--mv-success); }
.mv-input:disabled, .mv-select:disabled, .mv-textarea:disabled { background: var(--mv-gray-1); color: var(--mv-disabled-ink); cursor: not-allowed; }
.mv-help { font-size: var(--mv-fs-caption); color: var(--mv-muted); }
.mv-field.is-error .mv-help { color: var(--mv-danger); }
.mv-field.is-success .mv-help { color: var(--mv-success); }
.mv-check { display: inline-flex; align-items: center; gap: var(--mv-space-xs); font-size: var(--mv-fs-small); cursor: pointer; min-height: 44px; }
.mv-check input { width: 20px; height: 20px; accent-color: var(--mv-primary); }
.mv-band-dark .mv-input, .mv-band-dark .mv-select, .mv-band-dark .mv-textarea { background: var(--mv-card-dark); border-color: var(--mv-line-dark); color: var(--mv-title-on-dark); }

/* ---- Call to action band ---- */
.mv-cta { background: var(--mv-field-tint); border-radius: var(--mv-radius-default); padding: var(--mv-space-xl);
  display: flex; align-items: center; justify-content: space-between; gap: var(--mv-space-lg); flex-wrap: wrap; }
.mv-band-tint .mv-cta { background: var(--mv-card-light); }  /* blush on blush has no edge; the CTA becomes a white card there */
.mv-cta--solid, .mv-band-tint .mv-cta--solid { background: var(--mv-primary); color: var(--mv-on-primary); }
.mv-cta--solid :where(h1, h2, h3, h4, h5) { color: var(--mv-on-primary); }
.mv-cta--solid .mv-body, .mv-cta--solid .mv-lede { color: var(--mv-on-primary); }
.mv-cta--solid .mv-btn--secondary { color: var(--mv-on-primary); border-color: var(--mv-on-primary); }
.mv-cta .mv-photo--round { flex: none; width: 88px; }
@media (max-width: 640px) { .mv-cta { padding: var(--mv-space-lg); gap: var(--mv-space-md); } .mv-cta .mv-photo--round { width: 64px; } }

/* Sticky mobile vote bar: appears under the md breakpoint only. */
.mv-sticky-cta { display: none; }
@media (max-width: 820px) {
  body { padding-bottom: calc(var(--mv-bar-height) + env(safe-area-inset-bottom)); }  /* so the bar never covers the last line of the page */
  .mv-sticky-cta { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; gap: var(--mv-space-xs);
    min-height: calc(var(--mv-bar-height) + env(safe-area-inset-bottom));
    padding: var(--mv-space-xs) var(--mv-space-md) calc(var(--mv-space-xs) + env(safe-area-inset-bottom));
    background: var(--mv-field-light); box-shadow: var(--mv-shadow-sticky); }  /* the shadow token is the bar's 1px edge; a border on top of it would double the line */
  .mv-sticky-cta .mv-btn { flex: 1; min-height: 44px; padding: 0 12px; }  /* 44px is the thumb-target floor; 8 + 44 + 8 is the bar-height token */
  .mv-sticky-cta .mv-btn--secondary { border-color: var(--mv-line-light); }
}

/* Responsive copy: swap a long string for a short one without duplicating markup semantics. */
.mv-sm-only { display: none; }
@media (max-width: 480px) { .mv-sm-only { display: inline; } .mv-sm-hide { display: none; } }
@media (max-width: 820px) { .mv-md-hide { display: none; } }  /* for a control the sticky bar already carries */

/* ---- Full-screen sections: one section per screen, scroll snaps to each ----
   Put .mv-snap on <html> so the snap container is the document scroller; the
   sections are children of <body>, hence the two-step selector. Each section
   fills the viewport minus the sticky nav, and its child is centred with auto
   margins rather than flex centring, so a section taller than the screen grows
   instead of clipping. Snapping is `proximity`, never `mandatory`: mandatory
   fights a section that does not fit, which is the phone case for anything with
   more than a headline in it. */
.mv-snap { scroll-snap-type: y proximity; scroll-padding-top: var(--mv-nav-height); }
.mv-snap > body > section { display: flex; min-height: calc(100svh - var(--mv-nav-height)); scroll-snap-align: start; }
/* No scroll-margin-top on the sections: the scroller's scroll-padding-top already offsets both snapping and
   anchor jumps, and setting both stacks them, so a tapped section lands one nav-height below the nav. */
.mv-snap > body > section > *, .mv-snap .mv-hero > .mv-inner { width: 100%; margin-block: auto; }  /* the second selector outranks `.mv-hero .mv-inner { margin: 0 auto }`, which otherwise pins the hero copy to the top */
@supports not (height: 100svh) { .mv-snap > body > section { min-height: calc(100vh - var(--mv-nav-height)); } }
@media (max-width: 820px) {
  /* shorter nav, and the fixed bottom bar takes the foot of every screen */
  .mv-snap { scroll-padding-top: var(--mv-nav-height-sm); }
  .mv-snap > body > section { min-height: calc(100svh - var(--mv-nav-height-sm) - var(--mv-bar-height) - env(safe-area-inset-bottom)); }
}

/* ---- Footer: the only dark field in this brand ---- */
.mv-footer { background: var(--mv-field-dark); color: var(--mv-body-on-dark); padding: var(--mv-space-3xl) var(--mv-gutter) var(--mv-space-2xl); }
.mv-footer .mv-h4 { color: var(--mv-title-on-dark); }  /* a class-based heading misses the :where(h1..h5) rule and falls back to the muted body ink */
.mv-footer .mv-mark--text { color: var(--mv-link-on-dark); }  /* "VP" in petal on the plum field: same de-enclosed wordmark as the nav, accent picked to suit the field */
.mv-footer a { color: var(--mv-link-on-dark); text-decoration: none; }
.mv-footer a:hover { text-decoration: underline; }
.mv-footer a:focus-visible { outline: 2px solid var(--mv-link-on-dark); outline-offset: 3px; }
.mv-footnote { margin-top: var(--mv-space-2xl); padding-top: var(--mv-space-lg); border-top: 1px solid var(--mv-line-dark);
  font: var(--mv-fw-credit) var(--mv-fs-credit)/var(--mv-lh-credit) var(--mv-font-mono); letter-spacing: var(--mv-ls-credit); text-transform: var(--mv-tt-credit, none);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--mv-space-xs); }
@media (max-width: 820px) { .mv-footer { padding: var(--mv-space-2xl) var(--mv-space-md) var(--mv-space-xl); } .mv-footnote { margin-top: var(--mv-space-xl); } }

/* ---- Icons: Lucide, 24 grid, 2px round caps ---- */
.mv-icon { width: var(--mv-icon-grid); height: var(--mv-icon-grid); stroke: currentColor; fill: none; stroke-width: var(--mv-icon-stroke); stroke-linecap: var(--mv-icon-linecap); stroke-linejoin: var(--mv-icon-linejoin); flex: none; }
.mv-icon--sm { width: 20px; height: 20px; }

/* ---- Do / Don't panels (used by the preview and by any guidance page) ---- */
.mv-dd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--mv-space-md); margin-top: var(--mv-space-lg); }
.mv-dd { border: 1px solid var(--mv-line-light); background: var(--mv-card-light); border-radius: var(--mv-radius-default); padding: var(--mv-space-lg); font-size: var(--mv-fs-small); line-height: var(--mv-lh-small); color: var(--mv-body-on-light); }
.mv-dd .mv-badge { margin-bottom: var(--mv-space-sm); }
.mv-dd p + p { margin-top: var(--mv-space-xs); }

/* ---- Empty state / skeleton ---- */
.mv-empty { text-align: center; padding: var(--mv-space-3xl) var(--mv-space-lg); border: 1.5px dashed var(--mv-line-light); border-radius: var(--mv-radius-default); color: var(--mv-muted); }
.mv-skeleton { background: linear-gradient(90deg, var(--mv-field-tint) 25%, var(--mv-skeleton-shine) 50%, var(--mv-field-tint) 75%); background-size: 200% 100%; animation: mv-shimmer 1.2s linear infinite; border-radius: var(--mv-radius-default); min-height: 1em; }
@keyframes mv-shimmer { to { background-position: -200% 0; } }

/* ---- Utilities ---- */
.mv-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mv-stack > * + * { margin-top: var(--mv-space-md); }
.mv-row { display: flex; gap: var(--mv-space-sm); flex-wrap: wrap; align-items: center; }

/* ---- Stat blocks: light by default; this brand has no charcoal stat tile ---- */
.mv-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--mv-space-md); margin-top: var(--mv-space-xl); }
.mv-stat { background: var(--mv-card-light); border: 1px solid var(--mv-line-light); border-radius: var(--mv-radius-default); padding: var(--mv-space-lg); }
.mv-stat--card { background: var(--mv-field-tint); border-color: transparent; }
.mv-stat--primary { background: var(--mv-primary); border-color: transparent; }
.mv-stat--primary .mv-num, .mv-stat--primary .mv-cap { color: var(--mv-on-primary); }
.mv-stat .mv-num { font: var(--mv-fw-h1) var(--mv-fs-h1)/1 var(--mv-font-head); letter-spacing: var(--mv-ls-h1, 0); color: var(--mv-title-on-light); font-variant-numeric: tabular-nums; }
.mv-stat .mv-cap { margin-top: var(--mv-space-xs); font-size: var(--mv-fs-small); line-height: var(--mv-lh-small); color: var(--mv-body-on-light); }
.mv-band-tint .mv-stat { border-color: transparent; }
.mv-band-dark .mv-stat { background: var(--mv-card-dark); border-color: var(--mv-line-dark); }
.mv-band-dark .mv-stat .mv-num { color: var(--mv-title-on-dark); }
.mv-band-dark .mv-stat .mv-cap { color: var(--mv-body-on-dark); }

/* ---- Quote / endorsement: petal rule above, never quotation-mark graphics ---- */
.mv-quote { border-top: 3px solid var(--mv-petal); padding-top: var(--mv-space-md); max-width: 46ch; }
.mv-quote blockquote { font: var(--mv-fw-h4) var(--mv-fs-h4)/var(--mv-lh-h4) var(--mv-font-head); color: var(--mv-title-on-light); }
.mv-quote figcaption { margin-top: var(--mv-space-sm); font-size: var(--mv-fs-small); color: var(--mv-muted); }
.mv-quote--soft { background: var(--mv-field-tint); border-top: 0; border-radius: var(--mv-radius-default); padding: var(--mv-space-lg); }
.mv-band-dark .mv-quote blockquote { color: var(--mv-title-on-dark); }
.mv-band-dark .mv-quote figcaption { color: var(--mv-body-on-dark); }

/* ---- Table: overline header, hover row, numbers right and tabular ---- */
.mv-table-wrap { overflow-x: auto; margin-top: var(--mv-space-lg); border: 1px solid var(--mv-line-light); border-radius: var(--mv-radius-default); }
.mv-table { width: 100%; border-collapse: collapse; background: var(--mv-card-light); font-size: var(--mv-fs-small); }
.mv-table th { text-align: left; padding: var(--mv-space-sm) var(--mv-space-md); border-bottom: 1px solid var(--mv-line-light);
  font: var(--mv-fw-overline) var(--mv-fs-overline)/var(--mv-lh-overline) var(--mv-font-mono); letter-spacing: var(--mv-ls-overline); text-transform: var(--mv-tt-overline, none); color: var(--mv-muted); white-space: nowrap; }
.mv-table td { padding: var(--mv-space-sm) var(--mv-space-md); border-bottom: 1px solid var(--mv-line-light); color: var(--mv-body-on-light); }
.mv-table tr:last-child td { border-bottom: 0; }
.mv-table tbody tr:hover td { background: var(--mv-field-tint); }
.mv-table .mv-value { text-align: right; font-variant-numeric: tabular-nums; color: var(--mv-title-on-light); }