/* ============================================================
   Miles Mosaic — Marketing page styles
   Translated from ui_kits/marketing/ design system prototype.
   ============================================================ */

/* Brand-register tertiary tokens — article cover gradients.
   Defined per DESIGN.brand.md §2 "Tertiary". Single source of
   truth for the four named cover variants used as fallback
   artwork on article cards when no commissioned hero photo
   exists. */
:root {
  --mm-cover-navy:   linear-gradient(135deg, #14223D 0%, #1A2B4C 50%, #253A62 100%);
  --mm-cover-orange: linear-gradient(135deg, #FF6B00 0%, #FF8A33 55%, #FFAA66 100%);
  --mm-cover-teal:   linear-gradient(135deg, #0F3B4A 0%, #1A4E63 50%, #2A6B84 100%);
  --mm-cover-plum:   linear-gradient(135deg, #3A1F4E 0%, #55305F 55%, #754A78 100%);
}

/* ---------- Shell ---------- */
.mkt-root { background: var(--color-bg-page); min-height: 100vh; }
.mkt-container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* a11y */
.sr-only-focus {
  position: absolute; left: -9999px; top: 0;
  background: var(--color-primary-700); color: #fff; padding: 10px 14px;
  z-index: 1000; border-radius: 0 0 8px 0;
}
.sr-only-focus:focus { left: 0; }

/* ---------- Public nav ----------
 * Phase 7 (Q-h): solid navy bar matching the post-login .v2-topnav. Glass +
 * backdrop-filter retired so the pre-login → post-login transition is
 * invisible. Same #0E1F3B fill, same 68px height, same 1px white-alpha
 * bottom hairline as the post-login chrome.
 */
.mkt-nav {
  position: sticky; top: 0; z-index: 50;
  height: 68px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 48px;
  background: #0E1F3B; /* var(--mm-navy) */
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: #FFFFFF;
}
.mkt-nav__brand img { height: 44px; width: auto; display: block; }
.mkt-nav__links { display: flex; gap: 28px; }
.mkt-nav__links a {
  color: rgba(255,255,255,0.78); font: 500 14px var(--mm-font-body);
  text-decoration: none; transition: color var(--mm-dur) var(--mm-ease);
}
.mkt-nav__links a:hover { color: #FFFFFF; }
/* audit-r3 P1-3-I4 close: aria-current="page" anchor state. The orange accent
   doubles as a focus signal for screen readers (announces "current page") and
   sighted users (the underlined link is the route the user is reading). */
.mkt-nav__links a.is-active,
.mkt-nav__links a[aria-current="page"] {
  color: #FFFFFF;
  position: relative;
}
.mkt-nav__links a.is-active::after,
.mkt-nav__links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px;
  height: 2px; background: var(--mm-accent, #FF6810); border-radius: 2px;
}
.mkt-nav__cta { display: flex; gap: 10px; }

/* Variants kept for backward compatibility, but every variant now uses the
 * solid-navy treatment above. .mkt-home keeps `position: fixed` so the
 * hero photo can slide under the nav. */
.mkt-home .mkt-nav,
.mkt-dark-nav .mkt-nav {
  background: #0E1F3B;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mkt-home .mkt-nav {
  position: fixed; left: 0; right: 0; top: 0;
}
.mkt-home .mkt-nav__brand img,
.mkt-dark-nav .mkt-nav__brand img { height: 44px; }
.mkt-home .mkt-nav__links a,
.mkt-dark-nav .mkt-nav__links a { color: rgba(255,255,255,0.78); }
.mkt-home .mkt-nav__links a:hover,
.mkt-dark-nav .mkt-nav__links a:hover { color: #fff; }
.mkt-home .mkt-nav .mm-btn--ghost,
.mkt-dark-nav .mkt-nav .mm-btn--ghost {
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.88);
}
.mkt-home .mkt-nav .mm-btn--ghost:hover,
.mkt-dark-nav .mkt-nav .mm-btn--ghost:hover { background: rgba(255,255,255,0.15); color: #fff; }

/* ---------- Hero ---------- */
/* Landing-page hero: photo bg, scattered loyalty-card stack, wave transition. */
.mkt-hero {
  position: relative; overflow: hidden;
  min-height: 680px;
  display: flex; align-items: center;
  background: var(--color-bg-page);
}
/* audit-r3 P1-3-O4 close: hero is now a <picture> element (was background-div).
   Position absolute over the hero section; img inside fills the picture. */
.mkt-hero__photo {
  position: absolute; inset: 0; z-index: 1;
  display: block; width: 100%; height: 100%;
}
.mkt-hero__photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
  display: block;
  filter: brightness(0.88) saturate(1.15) contrast(1.05);
}
/* Hero overlay scrim. The left-anchored gradient sits under the copy column
   and earns WCAG AA contrast (≥4.5:1) on white text + opaque navy-tinted
   shadow. A weaker top-to-bottom wash darkens the bottom edge under the
   ribbon of trust ticks. Increased opacity vs the original (0.78 → 0.86,
   etc.) because the previous values relied on heavy dual-layer
   text-shadow to compensate, which blurred character edges. */
.mkt-hero__overlay {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(
      95deg,
      rgba(6, 13, 28, 0.86) 0%,
      rgba(8, 16, 36, 0.78) 22%,
      rgba(10, 20, 44, 0.60) 42%,
      rgba(12, 22, 48, 0.32) 60%,
      rgba(12, 22, 48, 0.08) 78%,
      transparent 92%
    ),
    linear-gradient(to top, rgba(6, 12, 26, 0.22) 0%, transparent 38%);
}
.mkt-hero__inner {
  position: relative; z-index: 4;
  width: 100%; max-width: 1200px; margin: 0 auto;
  padding: 108px 48px 100px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
  align-items: center;
}
.mkt-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 11px/1.3 var(--mm-font-body);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  margin: 0 0 18px;
  /* Single subtle shadow; the strengthened overlay carries contrast. */
  text-shadow: 0 1px 6px rgba(0,0,0,0.45);
}
.mkt-hero__eyebrow::before {
  content: ""; display: block;
  width: 20px; height: 1px; background: var(--color-accent-500); flex-shrink: 0;
}
.mkt-hero__title {
  margin: 0 0 18px; color: #fff;
  /* Phase C1 (audit-r2 P0-16): Direction A's signature gesture.
     Cormorant Garamond 700 at the 48–76px scale — the one over-invested
     visual exclamation moment of the entire public surface. */
  font-family: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  font-weight: 700;
  font-size: clamp(48px, 5.8vw, 76px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-wrap: balance;
  /* Single shadow keeps Cormorant's letterforms crisp against photo
     variation; the strengthened scrim overlay carries the rest of the
     contrast. Two shadows blur the serifs. */
  text-shadow: 0 1px 3px rgba(0,0,0,0.40);
}
.mkt-hero__title i { font-style: italic; font-weight: 500; color: var(--mm-orange-soft, #FFAA66); }
.mkt-hero__lede {
  font: 400 16px/1.68 var(--mm-font-body);
  color: rgba(255,255,255,0.94);
  margin: 0 0 34px; max-width: 420px; text-wrap: pretty;
  text-shadow: 0 1px 4px rgba(0,0,0,0.45);
}
.mkt-hero__ctas {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 34px; flex-wrap: wrap;
}
/* Hero-specific CTA sizing + colour overrides. Hosted on the same .mm-btn
   primitive used site-wide, so hovers, focus rings and radii stay consistent. */
.mkt-hero__ctas .mm-btn {
  padding: 13px 26px; font-size: 15px; border-radius: 999px;
}
.mkt-hero__ctas .mm-btn--primary:hover { transform: translateY(-1px); }
.mkt-hero__ctas .mm-btn--ghost {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.80);
}
.mkt-hero__ctas .mm-btn--ghost:hover {
  background: rgba(255,255,255,0.14); color: #fff;
}
.mkt-hero__cta-arrow { width: 14px; height: 14px; margin-left: 8px; }
.mkt-hero__trust {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 9px;
  font: 400 13px var(--mm-font-body); color: rgba(255,255,255,0.82);
}
.mkt-hero__trust li {
  display: flex; align-items: center; gap: 9px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}
.mkt-hero__trust li::before {
  content: ""; width: 16px; height: 16px; border-radius: 50%;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  /* SVG check drawn in the centre */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' fill='none'><path d='M1.5 4.5L3.5 6.5L7.5 2.5' stroke='%23ffffffb8' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: center; background-size: 9px 9px;
  background-color: rgba(255,255,255,0.07);
  flex-shrink: 0;
}

/* Right column: scattered loyalty card stack */
.mkt-hero__art {
  position: relative; height: 520px;
  display: flex; align-items: center; justify-content: center;
}
.mkt-hero__stack {
  position: relative; width: 100%; max-width: 460px; height: 440px;
}
/* Hero card stack is decorative: it demonstrates real programme names as
   first-class typography. The cards are not clickable, and per
   DESIGN.brand.md (§5 + §6) the cursor must agree. No hover lift, no
   bouncy easing, no !important. */
.mkt-hero__card {
  position: absolute; width: 252px;
  background: #fff; border-radius: 14px; padding: 14px 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.38), 0 2px 10px rgba(0,0,0,0.22);
}
.mkt-hero__card--lc1 { top: 210px; left: 0;    z-index: 1; --r: -14deg; transform: rotate(-14deg); }
.mkt-hero__card--lc2 { top: 185px; left: 190px; z-index: 2; --r:  12deg; transform: rotate( 12deg); }
.mkt-hero__card--lc3 { top: 120px; left: 20px;  z-index: 3; --r:  -7deg; transform: rotate( -7deg); }
.mkt-hero__card--lc4 { top: 100px; left: 200px; z-index: 4; --r:   8deg; transform: rotate(  8deg); }
.mkt-hero__card--lc5 { top:  30px; left: 160px; z-index: 5; --r:  -5deg; transform: rotate( -5deg); }
.mkt-hero__card--lc6 { top:  10px; left:  50px; z-index: 6; --r:   3deg; transform: rotate(  3deg); }

.mkt-hero__card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px; gap: 9px;
}
.mkt-hero__card-prog { display: flex; align-items: center; gap: 9px; min-width: 0; }
.mkt-hero__card-logo {
  width: 30px; height: 30px; border-radius: 7px;
  background: #f4f6fa; padding: 3px; object-fit: contain; flex-shrink: 0;
}
.mkt-hero__card-name {
  font: 700 12px/1.2 var(--mm-font-heading);
  color: var(--color-primary-700);
}
.mkt-hero__card-sub {
  font: 400 10px var(--mm-font-body);
  color: var(--color-text-muted); margin-top: 1px;
}
.mkt-hero__card-badge {
  font: 600 10px var(--mm-font-body); padding: 3px 8px;
  border-radius: 999px; white-space: nowrap; flex-shrink: 0;
}
/* audit-r4 P1-4-I6 close: token-driven tier badges (was raw cool-grey/amber-
   paper/violet-paper/emerald-paper hex). Each fallback matches the
   pace-token-paper hue so the visual treatment is identical pre/post-token. */
.mkt-hero__card-badge--silver   { background: var(--mm-bg-alt, #f1f3f8); color: var(--mm-fg-muted); }
.mkt-hero__card-badge--gold     { background: var(--mm-pace-amber-paper, #fef3c7); color: var(--mm-warning); }
.mkt-hero__card-badge--titanium { background: var(--mm-navy); color: #fff; }
.mkt-hero__card-badge--diamond  { background: var(--mm-tier-diamond-paper, #ede9fe); color: var(--mm-tier-diamond, #4C3A9C); }
.mkt-hero__card-badge--platinum { background: var(--mm-navy-100, #E2E7F0); color: var(--mm-fg-strong, #0B1220); }
.mkt-hero__card-badge--elite    { background: var(--mm-pace-on-track-paper, #e6f4ec); color: var(--mm-success); }
.mkt-hero__card-value {
  font: 600 24px/1 var(--mm-font-mono);
  color: var(--color-primary-900);
  letter-spacing: -0.02em; margin-bottom: 2px;
  font-variant-numeric: tabular-nums;
}
.mkt-hero__card-unit {
  font: 400 10px var(--mm-font-body);
  color: var(--color-text-muted); margin-bottom: 9px;
}
.mkt-hero__card-bar {
  height: 4px; background: var(--color-primary-100);
  border-radius: 2px; overflow: hidden; margin-bottom: 4px;
}
.mkt-hero__card-bar span {
  display: block; height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--color-accent-400), var(--color-accent-500));
}
.mkt-hero__card-foot {
  display: flex; justify-content: space-between;
  font: 400 10px var(--mm-font-mono);
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
}

/* Wavy bottom edge transitioning hero → page background (zero visible seam) */
.mkt-hero__wave {
  position: absolute; left: 0; right: 0; bottom: -2px; z-index: 3;
  line-height: 0; pointer-events: none;
}
.mkt-hero__wave svg { display: block; width: 100%; height: 80px; }

/* Entrance animations — fire once on load. Respects reduced motion. */
@keyframes mkt-hero-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes mkt-hero-scatter {
  from { opacity: 0; transform: translateY(28px) rotate(var(--r, 0deg)) scale(.94); }
  to   { opacity: 1; transform: translateY(0)    rotate(var(--r, 0deg)) scale(1); }
}
.mkt-hero__eyebrow { animation: mkt-hero-fade-up .5s .05s both ease-out; }
.mkt-hero__title   { animation: mkt-hero-fade-up .5s .12s both ease-out; }
.mkt-hero__lede    { animation: mkt-hero-fade-up .5s .19s both ease-out; }
.mkt-hero__ctas    { animation: mkt-hero-fade-up .5s .26s both ease-out; }
.mkt-hero__trust   { animation: mkt-hero-fade-up .5s .33s both ease-out; }
.mkt-hero__card--lc1 { animation: mkt-hero-scatter .65s .08s both cubic-bezier(0,0,0.2,1); }
.mkt-hero__card--lc2 { animation: mkt-hero-scatter .65s .16s both cubic-bezier(0,0,0.2,1); }
.mkt-hero__card--lc3 { animation: mkt-hero-scatter .65s .24s both cubic-bezier(0,0,0.2,1); }
.mkt-hero__card--lc4 { animation: mkt-hero-scatter .65s .32s both cubic-bezier(0,0,0.2,1); }
.mkt-hero__card--lc5 { animation: mkt-hero-scatter .65s .40s both cubic-bezier(0,0,0.2,1); }
.mkt-hero__card--lc6 { animation: mkt-hero-scatter .65s .48s both cubic-bezier(0,0,0.2,1); }
@media (prefers-reduced-motion: reduce) {
  .mkt-hero__eyebrow, .mkt-hero__title, .mkt-hero__lede,
  .mkt-hero__ctas, .mkt-hero__trust,
  .mkt-hero__card--lc1, .mkt-hero__card--lc2, .mkt-hero__card--lc3,
  .mkt-hero__card--lc4, .mkt-hero__card--lc5, .mkt-hero__card--lc6 {
    animation: none;
  }
}

/* ---------- Articles ---------- */
.mkt-articles { max-width: 1180px; margin: 0 auto; padding: 24px 32px 56px; }
.mkt-articles__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 24px; gap: 20px;
}
.mkt-articles__head h2 {
  font: 700 28px/1.2 var(--mm-font-display); color: var(--color-primary-700);
  letter-spacing: -0.015em; margin: 8px 0 0; text-wrap: balance; max-width: 620px;
}
.mkt-articles__all {
  font: 600 13.5px var(--mm-font-body); color: var(--color-accent-500);
  text-decoration: none; white-space: nowrap;
  transition: color var(--mm-dur) var(--mm-ease);
}
.mkt-articles__all:hover { color: var(--color-accent-700); }
.mkt-articles__grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 14px;
}
.mkt-article--feature { grid-column: span 1; grid-row: span 2; }
.mkt-article {
  background: #fff; border: 1px solid var(--color-neutral-200); border-radius: var(--mm-radius-lg);
  overflow: hidden; box-shadow: var(--mm-shadow-card);
  transition: box-shadow var(--mm-dur) var(--mm-ease), transform var(--mm-dur) var(--mm-ease);
  display: flex; flex-direction: column;
}
.mkt-article:hover { box-shadow: var(--mm-shadow-md); transform: translateY(-2px); }
.mkt-article__link { display: flex; flex-direction: column; color: inherit; text-decoration: none; height: 100%; }
.mkt-article__visual {
  position: relative; aspect-ratio: 16/9; overflow: hidden;
  display: grid; place-items: center; flex-shrink: 0;
}
.mkt-article--feature .mkt-article__visual { aspect-ratio: 16/10; }
.mkt-article--navy   .mkt-article__visual { background: var(--mm-cover-navy); }
.mkt-article--orange .mkt-article__visual { background: var(--mm-cover-orange); }
.mkt-article--teal   .mkt-article__visual { background: var(--mm-cover-teal); }
.mkt-article--plum   .mkt-article__visual { background: var(--mm-cover-plum); }
.mkt-article__pattern {
  position: absolute; inset: 0; opacity: 0.22;
  background-image:
    repeating-linear-gradient(45deg, transparent 0 20px, rgba(255,255,255,0.4) 20px 21px),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.3) 0 2px, transparent 2px);
  background-size: auto, 40px 40px;
}
.mkt-article--orange .mkt-article__pattern {
  background-image:
    repeating-linear-gradient(-30deg, transparent 0 22px, rgba(26,43,76,0.3) 22px 23px),
    radial-gradient(circle at 20% 80%, rgba(26,43,76,0.25) 0 3px, transparent 3px);
  background-size: auto, 50px 50px;
}
.article-card__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.mkt-article__category {
  /* audit-r3 P1-3-I10 close: JetBrains Mono eyebrow-mono treatment matches
     the rest of the editorial surface. Was Inter caps, drifted from the
     mono signature that runs through every other label on the site. */
  position: absolute; top: 16px; left: 16px; z-index: 1;
  padding: 5px 12px; border-radius: var(--mm-radius-pill);
  background: rgba(255,255,255,0.92); color: var(--color-primary-700);
  font-family: var(--mm-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.mkt-article--orange .mkt-article__category { background: var(--color-primary-700); color: #fff; }
.mkt-article__body { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.mkt-article__meta { font: 500 11.5px var(--mm-font-body); color: var(--color-text-muted); letter-spacing: 0.02em; }
.mkt-article__body h3 { font: 700 15px/1.3 var(--mm-font-heading); color: var(--color-text-strong); margin: 0 0 2px; text-wrap: balance; }
.mkt-article--feature .mkt-article__body { padding: 18px 20px 20px; gap: 8px; }
.mkt-article--feature .mkt-article__body h3 { font-size: 20px; line-height: 1.25; }
.mkt-article__body p { color: var(--color-text-muted); font-size: 13px; line-height: 1.5; margin: 0; flex: 1; }
.mkt-article__cta { font: 600 12.5px var(--mm-font-body); color: var(--color-accent-500); margin-top: 4px; }
.mkt-article:hover .mkt-article__cta { color: var(--color-accent-700); }

/* ---------- Programmes strip ---------- */
.mkt-strip { padding: 32px 32px 16px; max-width: 1180px; margin: 0 auto; text-align: center; }
.mkt-strip__eyebrow { display: block; margin-bottom: 20px; }
.mkt-strip__row {
  display: grid; grid-template-columns: repeat(10, 1fr); gap: 16px; align-items: center;
}
.mkt-strip__tile {
  padding: 10px; border: 1px solid var(--color-neutral-200); border-radius: var(--mm-radius-card);
  background: #fff; aspect-ratio: 1; display: grid; place-items: center;
}
.mkt-strip__tile img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- Feature bento grid ---------- */
.mkt-features { padding: 72px 32px; max-width: 1180px; margin: 0 auto; }
.mkt-features__head { text-align: center; margin-bottom: 40px; max-width: 680px; margin-left: auto; margin-right: auto; }
.mkt-features__head h2 { color: var(--color-primary-700); margin: 10px 0 12px; text-wrap: balance; }
.mkt-features__head p { color: var(--color-text-muted); margin: 0 auto; line-height: 1.55; }

.mkt-bento {
  display: grid; grid-template-columns: 2fr 1.2fr 1.2fr;
  grid-template-rows: auto auto; gap: 16px;
}
.mkt-bento__card {
  background: #fff; border: 1px solid var(--color-neutral-200); border-radius: var(--mm-radius-lg);
  padding: 24px; box-shadow: var(--mm-shadow-card);
  position: relative; overflow: hidden;
  transition: box-shadow var(--mm-dur) var(--mm-ease), transform var(--mm-dur) var(--mm-ease);
  display: flex; flex-direction: column; min-height: 200px;
}
.mkt-bento__card:hover { box-shadow: var(--mm-shadow-md); transform: translateY(-2px); }
.mkt-bento__card h3 {
  font: 700 18px/1.3 var(--mm-font-heading); color: var(--color-text-strong);
  margin: 8px 0 6px; letter-spacing: -0.005em; text-wrap: balance;
}
.mkt-bento__card p { color: var(--color-text-muted); font-size: 13.5px; line-height: 1.55; margin: 0; }
.mkt-bento__tag {
  display: inline-flex; align-items: center; align-self: flex-start;
  font: 600 11px/1 var(--mm-font-mono); color: var(--color-text-muted);
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 9px; border: 1px solid var(--color-neutral-200); border-radius: var(--mm-radius-pill);
  background: var(--color-bg-alt);
}
.mkt-bento__tag--light { color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.06); }
.mkt-bento__tag--pro   { color: #fff; background: var(--color-accent-500); border-color: var(--color-accent-500); }

.mkt-bento__card--lg  { grid-column: span 2; grid-row: span 1; min-height: 280px; }
.mkt-bento__card--navy { background: var(--color-primary-700); color: #fff; border-color: var(--color-primary-800); }
.mkt-bento__card--navy::before {
  content: ""; position: absolute; inset: -60% -30% auto auto; width: 500px; height: 400px;
  background: radial-gradient(closest-side, rgba(255,107,0,0.20), transparent 70%);
  pointer-events: none;
}
.mkt-bento__card--navy h3 { color: #fff; font-size: 26px; letter-spacing: -0.01em; max-width: 440px; }
.mkt-bento__card--navy p { color: var(--mm-fg-inverse-muted); font-size: 14px; max-width: 440px; }

/* Tier track mock inside navy bento card */
.mkt-bento__track { position: relative; margin-top: auto; padding: 40px 16px 30px; }
.mkt-bento__track-rail { position: relative; height: 6px; background: rgba(255,255,255,0.15); border-radius: 99px; }
.mkt-bento__track-fill {
  position: absolute; inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--color-accent-400), var(--color-accent-500));
  border-radius: 99px;
}
.mkt-bento__track-stop {
  position: absolute; top: 50%; transform: translate(-50%,-50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--color-primary-700); border: 2px solid rgba(255,255,255,0.35);
}
.mkt-bento__track-stop.is-done { background: var(--color-accent-500); border-color: var(--color-accent-500); }
.mkt-bento__track-stop.is-here {
  background: #fff; border: 3px solid var(--color-accent-500);
  width: 16px; height: 16px; box-shadow: 0 0 0 6px rgba(255,107,0,0.18);
}
.mkt-bento__track-stop span {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  font: 500 10.5px var(--mm-font-mono); color: rgba(255,255,255,0.65);
  white-space: nowrap; letter-spacing: 0.04em;
}
.mkt-bento__track-stop.is-here span { color: var(--color-accent-300); font-weight: 600; }

/* Privacy card. Flat warm-paper background per the Tinted-Neutral Rule;
   the gradient body was pure decoration and not earning its place. */
.mkt-bento__card--privacy {
  grid-column: span 1; grid-row: span 2;
  background: var(--mm-accent-50, #FFF4EC);
  border-color: var(--mm-accent-tint, #FFE8D6);
}
.mkt-bento__shield { color: var(--color-accent-500); margin: auto 0 16px; align-self: center; }

/* Flight/stay mock rows */
.mkt-bento__mock { margin-top: auto; padding-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.mkt-bento__flight {
  display: grid; grid-template-columns: 58px 1fr auto; gap: 10px; align-items: center;
  padding: 10px 12px; background: var(--color-bg-alt);
  border: 1px solid var(--color-neutral-100); border-radius: 8px;
}
.mkt-bento__flight--muted { opacity: 0.55; }
.mkt-bento__flight-code { font: 600 11px var(--mm-font-mono); color: var(--color-text-muted); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.mkt-bento__flight-code strong { color: var(--color-primary-700); font-weight: 700; }
.mkt-bento__flight-route { display: flex; align-items: center; gap: 6px; font: 600 12px var(--mm-font-mono); color: var(--color-text-strong); }
.mkt-bento__flight-value { font: 600 12px var(--mm-font-mono); color: var(--color-primary-700); font-variant-numeric: tabular-nums; }
.mkt-bento__flight-value em { font: 400 10px var(--mm-font-body); font-style: normal; color: var(--color-text-muted); margin-left: 2px; }

/* Hotel nights grid */
.mkt-bento__nights { margin-top: auto; padding-top: 12px; }
.mkt-bento__nights-head { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.mkt-bento__nights-head img { width: 28px; height: 28px; object-fit: contain; border: 1px solid var(--color-neutral-200); border-radius: 4px; }
.mkt-bento__nights-head strong { display: block; font: 600 12px var(--mm-font-heading); color: var(--color-text-strong); }
.mkt-bento__nights-head span { font: 500 11px var(--mm-font-mono); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.mkt-bento__nights-grid { display: grid; grid-template-columns: repeat(25, 1fr); gap: 2px; }
.mkt-bento__nights-grid span { aspect-ratio: 1; background: var(--color-primary-50); border-radius: 2px; }
.mkt-bento__nights-grid .is-filled { background: var(--color-accent-500); }

/* Analytics card */
.mkt-bento__card--analytics {
  grid-column: span 2;
  background: linear-gradient(135deg, #F4F6FA 0%, #FFFFFF 100%); min-height: 280px;
}
.mkt-bento__bars {
  margin-top: auto; padding-top: 20px;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;
  align-items: end; height: 130px;
}
.mkt-bento__bar { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.mkt-bento__bar-fill {
  width: 100%; max-width: 48px;
  background: linear-gradient(180deg, var(--color-primary-300) 0%, var(--color-primary-400) 100%);
  border-radius: 4px 4px 0 0; min-height: 8px;
}
.mkt-bento__bar:first-child .mkt-bento__bar-fill {
  background: linear-gradient(180deg, var(--color-accent-500) 0%, var(--color-accent-600) 100%);
}
.mkt-bento__bar span { font: 600 10px var(--mm-font-mono); color: var(--color-text-muted); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }

/* Pro tier simulator card */
.mkt-bento__card--pro { background: var(--color-primary-700); color: #fff; border-color: var(--color-accent-500); position: relative; overflow: hidden; }
.mkt-bento__card--pro::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 100% 0%, rgba(255,107,0,0.25), transparent 60%);
  pointer-events: none;
}
.mkt-bento__card--pro h3 { color: #fff; }
.mkt-bento__card--pro p { color: var(--mm-fg-inverse-muted); }
.mkt-bento__sim { margin-top: auto; padding-top: 14px; display: flex; flex-direction: column; gap: 6px; position: relative; }
.mkt-bento__sim-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px;
  background: rgba(255,255,255,0.04); font: 500 12px var(--mm-font-body); color: var(--mm-fg-inverse-muted);
}
.mkt-bento__sim-row strong { font: 700 14px var(--mm-font-heading); color: #fff; }
.mkt-bento__sim-row--target { background: rgba(255,107,0,0.18); border-color: rgba(255,107,0,0.4); }
.mkt-bento__sim-row--target strong { color: var(--color-accent-300); }

/* ---------- Privacy promise ---------- */
.mkt-privacy {
  max-width: 1180px; margin: 0 auto 80px; padding: 48px;
  background: var(--color-primary-700); color: #fff; border-radius: var(--mm-radius-xl);
  display: grid; grid-template-columns: 1fr 1.6fr; gap: 40px; align-items: center;
  position: relative; overflow: hidden;
}
.mkt-privacy::before {
  content: ""; position: absolute; inset: -40% -40% auto auto; width: 500px; height: 500px;
  background: radial-gradient(closest-side, rgba(255,107,0,0.22), transparent 70%);
  pointer-events: none;
}
.mkt-privacy__art { display: flex; align-items: center; justify-content: center; position: relative; }
.mkt-privacy__art svg { color: var(--color-accent-400); }
.mkt-privacy__copy { position: relative; }
.mkt-privacy__copy .mm-eyebrow { color: var(--color-accent-400); }
.mkt-privacy__copy h2 { color: #fff; font: 700 28px/1.25 var(--mm-font-heading); margin: 8px 0 14px; }
.mkt-privacy__copy p { color: var(--mm-fg-inverse-muted); font-size: 16px; }
.mkt-privacy__ticks {
  list-style: none; padding: 0; margin: 16px 0 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 14px; color: rgba(255,255,255,0.85);
}
.mkt-privacy__ticks li::before { content: "✓ "; color: var(--color-accent-400); font-weight: 700; }

/* ---------- Pricing ---------- */
.mkt-pricing { padding: 40px 32px 80px; max-width: 1000px; margin: 0 auto; }
.mkt-pricing__head { text-align: center; margin-bottom: 40px; }
.mkt-pricing__head .mm-eyebrow { display: block; margin-bottom: 12px; }
.mkt-pricing__head h2 { color: var(--color-primary-700); margin: 0 0 8px; text-wrap: balance; }
.mkt-pricing__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.mkt-plan {
  background: #fff; border: 1px solid var(--color-neutral-200); border-radius: var(--mm-radius-lg);
  padding: 32px; position: relative; display: flex; flex-direction: column;
}
.mkt-plan--pro { border-color: var(--color-accent-500); box-shadow: var(--mm-shadow-gold-glow); }
.mkt-plan__ribbon {
  position: absolute; top: -12px; right: 24px;
  background: var(--color-accent-500); color: #fff;
  padding: 4px 10px; border-radius: var(--mm-radius-pill); font: 600 11px var(--mm-font-body);
}
.mkt-plan__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.mkt-plan__head h3 { margin: 0; font: 700 20px/1 var(--mm-font-heading); color: var(--color-primary-700); }
.mkt-plan__price span { font: 700 32px/1 var(--mm-font-mono); color: var(--color-text-strong); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.mkt-plan__price small { font: var(--mm-caption); color: var(--color-text-muted); margin-left: 4px; }
.mkt-plan__lede { color: var(--color-text-muted); margin: 0 0 20px; font-size: 14px; }
.mkt-plan__list {
  list-style: none; padding: 0; margin: 0 0 24px;
  display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--color-text); flex: 1;
}
.mkt-plan__list li { display: flex; align-items: flex-start; gap: 8px; }
.mkt-plan__list li::before { content: "✓"; color: var(--color-accent-500); font-weight: 700; flex-shrink: 0; }

/* ---------- CTA band ---------- */
.mkt-cta {
  background: var(--color-primary-700); color: #fff; padding: 72px 32px;
  text-align: center; position: relative; overflow: hidden;
}
.mkt-cta::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,107,0,0.20), transparent 60%);
  pointer-events: none;
}
.mkt-cta h2 { color: #fff; margin: 0 0 12px; position: relative; }
.mkt-cta p  { color: var(--mm-fg-inverse-muted); margin: 0 0 28px; font-size: 17px; position: relative; }
.mkt-cta .mm-btn { position: relative; }

/* ---------- Footer ---------- */
.mkt-foot { background: var(--color-primary-900); color: #fff; padding: 56px 32px 24px; }
/* Footer renders 5 children: brand block (wider) + 4 link columns
   (Articles, About, Compare, Legal). The grid uses an explicit
   2.4fr + four equal 1fr columns so Legal sits on the same row as
   its peers at desktop widths (≥1024px) instead of wrapping below. */
.mkt-foot__top {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: 2.4fr repeat(4, 1fr); gap: 28px;
}
.mkt-foot__logo { height: 32px; width: auto; margin-bottom: 12px; display: block; }
.mkt-foot__top p { color: var(--mm-fg-inverse-muted); font-size: 14px; max-width: 320px; }
.mkt-foot__top h4 {
  color: #fff; font: 600 13px var(--mm-font-heading);
  margin: 0 0 12px; text-transform: uppercase; letter-spacing: 0.08em;
}
.mkt-foot__top a { display: block; color: var(--mm-fg-inverse-muted); text-decoration: none; font-size: 14px; padding: 4px 0; }
.mkt-foot__top a:hover { color: var(--color-accent-400); }
.mkt-foot__base {
  max-width: 1180px; margin: 40px auto 0; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex; justify-content: space-between;
  color: var(--mm-fg-inverse-muted); font-size: 13px;
}

/* ---------- Responsive ---------- */
/* The articles grid collapses earlier (≤1180px) than the rest of the page
   because the `1.6fr 1fr 1fr 1fr` editorial grid + feature card with
   `grid-row: span 2` leaves a stranded white rectangle under the feature
   card at mid-tablet widths (1025–1180px). Raising the threshold to 1180px
   hands those widths the 2-col layout directly. The other surfaces still
   collapse at 1024px. */
@media (max-width: 1180px) {
  .mkt-articles__grid { grid-template-columns: 1fr 1fr; }
  .mkt-article--feature { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 1024px) {
  .mkt-hero { min-height: 620px; }
  .mkt-hero__inner { grid-template-columns: 1fr; padding: 120px 32px 90px; }
  .mkt-hero__art { display: none; }
  .mkt-bento { grid-template-columns: 1fr 1fr; }
  .mkt-bento__card--lg { grid-column: span 2; }
  .mkt-bento__card--privacy { grid-row: span 1; }
  .mkt-bento__card--analytics { grid-column: span 2; }
  .mkt-strip__row { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 1100px) {
  /* Brand block drops onto its own row above the link columns. The four
     link columns continue to share one row. */
  .mkt-foot__top { grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .mkt-foot__top > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .mkt-nav { padding: 14px 20px; }
  .mkt-home .mkt-nav,
  .mkt-dark-nav .mkt-nav { padding: 0 20px; }
  .mkt-nav__links { display: none; }
  .mkt-hero { min-height: 560px; }
  .mkt-hero__inner { padding: 104px 20px 80px; }
  .mkt-hero__title { font-size: clamp(40px, 9vw, 56px); letter-spacing: -0.01em; }
  .mkt-articles { padding: 16px 20px 40px; }
  .mkt-articles__grid { grid-template-columns: 1fr; }
  .mkt-article--feature { grid-column: span 1; }
  .mkt-features { padding: 48px 20px; }
  .mkt-bento { grid-template-columns: 1fr; }
  .mkt-bento__card--lg, .mkt-bento__card--analytics { grid-column: span 1; }
  .mkt-privacy { grid-template-columns: 1fr; padding: 32px 24px; margin: 0 20px 48px; }
  .mkt-privacy__art { display: none; }
  .mkt-pricing__grid { grid-template-columns: 1fr; }
  .mkt-pricing { padding: 32px 20px 48px; }
  .mkt-cta { padding: 48px 20px; }
  .mkt-foot { padding: 40px 20px 24px; }
  .mkt-foot__top { grid-template-columns: 1fr 1fr; gap: 24px; }
  .mkt-foot__base { flex-direction: column; gap: 16px; }
  .mkt-strip { padding: 24px 20px 12px; }
  .mkt-strip__row { grid-template-columns: repeat(5, 1fr); }
}

/* V2-010 — extracted from index.php inline <style> blocks (R2-029, mkt-howitworks, mkt-trust). */

/* R2-029: programme-themed gradients for hero card progress bars,
   extracted out of inline style="..." attributes. Also covers
   the terms/privacy modal styling and the dark-bg ghost CTA. */
.mkt-hero__card-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--mm-navy); }
/* audit-r4 P1-4-I5 close: tokenised hero card progress bars. Was 10 raw
   Tailwind hex literals across 5 per-programme gradients (Tailwind indigo,
   emerald, sky, amber, red). The hero card stack is decorative; one
   shared accent gradient lands on Direction A. */
.mkt-hero__card--lc1 .mkt-hero__card-bar > span,
.mkt-hero__card--lc2 .mkt-hero__card-bar > span,
.mkt-hero__card--lc3 .mkt-hero__card-bar > span,
.mkt-hero__card--lc4 .mkt-hero__card-bar > span,
.mkt-hero__card--lc5 .mkt-hero__card-bar > span {
  background: linear-gradient(90deg, var(--mm-accent-700, #C44600), var(--mm-accent, #FF6810));
}
.mkt-hero__card-note { margin: 14px 0 0; font-size: 12px; color: var(--mm-fg-subtle); text-align: center; font-style: italic; }
.mkt-evidence-head { text-align: center; margin-bottom: 8px; }
.mkt-evidence-head h3 { margin: 8px 0 12px; font-size: clamp(20px, 2.4vw, 26px); color: var(--mm-fg-strong); }
.mkt-evidence-head p { margin: 0 auto 12px; max-width: 640px; color: var(--mm-fg-muted); font-size: 15px; }
.mkt-evidence-link { margin: 12px auto 0; text-align: center; font-size: 13px; color: var(--mm-fg-muted); }
.mkt-evidence-link a { color: var(--mm-gold-700); font-weight: 600; text-decoration: none; }
.mm-btn--ghost-on-dark { border-color: rgba(255, 255, 255, 0.3); color: #fff; }
.mm-modal__backdrop { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 10000; background: rgba(0, 0, 0, 0.55); }
.mm-modal__panel { background: var(--mm-bg); width: clamp(300px, 90%, 880px); max-height: 85vh; overflow: auto; border-radius: 16px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25); position: relative; padding: 32px 28px; }
.mm-modal__close { position: absolute; top: 10px; right: 10px; background: var(--mm-bg-alt); border: 0; border-radius: 50%; width: 36px; height: 36px; cursor: pointer; font-size: 18px; }
.mm-modal__body { font-size: 14px; line-height: 1.55; color: var(--mm-fg); }

.mkt-proof { background: var(--mm-navy-50); padding: 48px 16px; border-top: 1px solid var(--mm-border); border-bottom: 1px solid var(--mm-border); }
.mkt-proof__inner { max-width: 1100px; margin: 0 auto; text-align: center; }
.mkt-proof__eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--mm-fg-muted); margin: 0 0 8px; font-weight: 600; }
.mkt-proof__title { font-size: clamp(22px, 3vw, 30px); color: var(--mm-navy); margin: 0 0 28px; font-weight: 700; }
.mkt-proof__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; margin-bottom: 24px; }
.mkt-proof__stat { display: flex; flex-direction: column; gap: 6px; align-items: center; }
/* All proof figures sit in --mm-fg-strong by default so the "one orange = a decision is implied"
   rule survives. A single stat can opt into the accent treatment via .mkt-proof__stat--lead. */
.mkt-proof__stat-num { font-size: clamp(34px, 4.5vw, 44px); font-weight: 700; color: var(--mm-fg-strong); line-height: 1; font-variant-numeric: tabular-nums; font-family: var(--mm-font-mono); letter-spacing: -0.02em; }
.mkt-proof__stat--lead .mkt-proof__stat-num { color: var(--mm-accent); }
.mkt-proof__stat-label { font-size: 14px; color: var(--mm-fg-muted); max-width: 200px; line-height: 1.4; }
.mkt-proof__footnote { margin: 18px auto 0; max-width: 680px; font-size: 14px; color: var(--mm-fg-muted); line-height: 1.55; }
.mkt-proof__footnote a { color: var(--mm-navy); text-decoration: underline; }
.mkt-proof__footnote a:hover { color: var(--mm-accent); }
.mkt-proof__sources { margin: 18px auto 0; padding: 14px 16px; max-width: 720px; background: rgba(255, 255, 255, 0.65); border: 1px solid var(--mm-border); border-radius: 10px; font-size: 13px; color: var(--mm-fg-muted); line-height: 1.55; text-align: left; }
.mkt-proof__sources strong { color: var(--mm-fg-strong); }
.mkt-proof__sources ul { margin: 6px 0 0; padding-left: 18px; }
.mkt-proof__sources a { color: var(--mm-navy); text-decoration: underline; }
@media (max-width: 640px) {
  .mkt-proof { padding: 32px 16px; }
  .mkt-proof__stats { gap: 16px; }
}

.mkt-howitworks { padding: 56px 16px; background: #fff; }
.mkt-howitworks__inner { max-width: 1100px; margin: 0 auto; }
.mkt-howitworks__eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--mm-fg-muted); margin: 0 0 8px; font-weight: 600; text-align: center; }
.mkt-howitworks__title { font-size: clamp(22px, 3vw, 30px); color: var(--mm-navy); margin: 0 0 36px; text-align: center; }
.mkt-howitworks__steps { list-style: none; padding: 0; margin: 0 0 36px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; counter-reset: step; }
.mkt-howitworks__step { background: var(--mm-navy-50); border: 1px solid var(--mm-border); border-radius: 14px; padding: 24px; position: relative; }
.mkt-howitworks__num { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--mm-accent); color: #fff; font-weight: 700; margin-bottom: 12px; }
.mkt-howitworks__step h3 { font-size: 17px; color: var(--mm-navy); margin: 0 0 8px; }
.mkt-howitworks__step p { font-size: 14px; color: var(--mm-fg-muted); line-height: 1.55; margin: 0; }
.mkt-howitworks__shot { margin: 0; border: 1px solid var(--mm-border); border-radius: 16px; overflow: hidden; box-shadow: 0 12px 28px rgba(26, 43, 76, 0.12); }
.mkt-howitworks__shot img { width: 100%; height: auto; display: block; }
.mkt-howitworks__shot figcaption { font-size: 13px; color: var(--mm-fg-muted); padding: 14px 18px; background: var(--mm-bg-alt); border-top: 1px solid var(--mm-border); text-align: center; }
.mkt-howitworks__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 24px; margin-top: 24px; }
.mkt-howitworks__shot--half figcaption { padding: 12px 14px; font-size: 12px; }
@media (max-width: 760px) {
  .mkt-howitworks__pair { grid-template-columns: 1fr; }
}

.mkt-trust { padding: 32px 16px 16px; text-align: center; }
.mkt-trust__eyebrow { display: inline-block; margin-bottom: 8px; }
.mkt-trust__title { margin: 6px 0 0; font-size: clamp(22px, 2.8vw, 30px); }
.mkt-trust__stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px; margin: 18px auto 0; max-width: 980px; }
.mkt-trust__stat { display: flex; flex-direction: column; gap: 4px; align-items: center; min-width: 160px; }
.mkt-trust__stat-value { font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; color: var(--mm-fg-strong); line-height: 1.1; font-family: var(--mm-font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.mkt-trust__stat-label { font-size: 13px; color: var(--mm-fg-muted); line-height: 1.3; }
/* "Live" badge is now a real element in the markup (instead of CSS ::after content)
   so it translates and reads correctly. */
.mkt-trust__stat-live { display: inline-block; margin-left: 6px; padding: 2px 6px; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mm-success); background: var(--mm-success-bg); border-radius: var(--mm-radius-full, 999px); vertical-align: middle; font-family: var(--mm-font-body); }
.mkt-trust__sourcing { margin: 18px auto 0; max-width: 720px; font-size: 13px; color: var(--mm-fg-muted); line-height: 1.55; }
.mkt-trust__sourcing a { color: var(--mm-navy); text-decoration: underline; }
.mkt-trust__badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 18px auto 0; max-width: 720px; }
.mkt-trust__badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--mm-bg-alt); font-size: 12px; font-weight: 600; color: var(--mm-fg-muted); border: 1px solid var(--mm-border); }
/* Decorative checkmark as a background SVG so it's hidden from the
   accessibility tree (CSS-content checkmarks read as "tick" or similar
   inconsistently). The badge text itself carries the meaning. */
.mkt-trust__badge::before {
  content: "";
  display: inline-block;
  width: 12px; height: 12px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23B45309' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><polyline points='2.5,6.5 5,9 9.5,3.5'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}
.mkt-trust__quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; max-width: 980px; margin: 24px auto 0; }
.mkt-trust__quote { background: var(--mm-bg-alt); border-radius: 12px; padding: 18px; border: 1px solid var(--mm-border); text-align: left; }
.mkt-trust__quote p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: var(--mm-fg); }
.mkt-trust__quote cite { font-size: 12px; color: var(--mm-fg-muted); font-style: normal; }

/* D1: "Editorial citations" strip in hero — small horizontal trust row.
   Hero background is dark navy (the hero photo + scrim), so text uses
   white-on-dark with reduced opacity to keep the strip subtle below the
   primary CTA. */
.mkt-cited { margin: 14px 0 0; padding: 0; font-size: 13px; color: rgba(255,255,255,0.72); display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; line-height: 1.4; }
.mkt-cited__label { font-weight: 600; color: rgba(255,255,255,0.86); }
/* Solid underline matches the site-wide link convention. Previously dotted
   border-bottom — inconsistent with the rest of the brand surface. */
.mkt-cited a { color: rgba(255,255,255,0.94); text-decoration: underline; text-decoration-color: rgba(255,255,255,0.40); text-underline-offset: 2px; }
.mkt-cited a:hover { color: #fff; text-decoration-color: rgba(255,255,255,0.85); }

/* ============================================================
   V2-018 — about/*.php inline <style> extraction
   ------------------------------------------------------------
   Previously, 10 about-family pages each shipped a per-render
   inline <style> block totalling ~1,200 lines. They are
   relocated here under per-page class scopes so marketing.css
   covers the marketing register in one cacheable bundle.

   Slate-grey neutrals (`#475569`, `#64748b`, `#94a3b8`, etc.)
   are resolved to `--mm-fg-*` tokens during this move, per
   DESIGN.brand.md §2 "The Slate-Drift Ban".

   Class names are preserved verbatim so existing markup
   continues to work without HTML churn.
   ============================================================ */

/* ---------- about/about.php ---------- */
.mm-about-page { --mm-blue: var(--mm-navy); --mm-orange: var(--mm-accent); --mm-text: var(--mm-fg); --mm-sky: var(--mm-navy-50); --mm-muted: var(--mm-fg-muted); }
.mm-about-page { font-family: var(--mm-font-body); color: var(--mm-text); line-height:1.55; }
.mm-about-shell { max-width: 980px; margin: 0 auto; padding: 8px 8px 48px; }
.mm-about-hero { background: linear-gradient(135deg, #fff, var(--mm-sky)); border:1px solid var(--mm-border); border-radius: 18px; padding: 38px 40px 42px; position:relative; overflow:hidden; }
.mm-about-hero:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 85% 20%, rgba(255,107,0,0.18), transparent 60%); pointer-events:none; }
.mm-about-hero h1 { margin:0 0 14px; font-size: clamp(34px,5vw,54px); color: var(--mm-blue); letter-spacing:.5px; line-height:1.1; }
.mm-about-hero p.lead { font-size: clamp(16px,2.1vw,21px); margin:0; max-width: 780px; color: var(--mm-muted); }
.mm-about-grid { margin-top:40px; display:grid; gap:40px; }
.mm-about-section { background:#fff; border:1px solid var(--mm-border); border-radius:16px; padding:32px 30px 34px; position:relative; }
.mm-about-section h2 { margin:0 0 14px; font-size: clamp(22px,2.6vw,30px); color: var(--mm-blue); letter-spacing:.4px; }
.mm-about-section h3 { margin:28px 0 10px; font-size:20px; color: var(--mm-blue); }
.mm-about-section p { margin:0 0 16px; font-size:16px; }
.mm-about-section ul { margin:0 0 16px 20px; padding:0; }
.mm-about-section li { margin:0 0 10px; padding-left:4px; }
.mm-about-page .mm-callout { border:1px solid var(--mm-accent-tint); background: var(--mm-accent-50); padding:18px 20px 20px; border-radius:12px; margin:28px 0 8px; }
.mm-about-page .mm-callout h3 { margin-top:0; }
.mm-section-accent { position:absolute; top:0; left:0; height:5px; width:100%; background:linear-gradient(90deg, var(--mm-orange), var(--mm-blue)); border-radius:16px 16px 0 0; }
.mm-about-section:last-child { box-shadow:0 12px 28px -8px rgba(26,43,76,0.12); }
.mm-about-mini-title { margin:0 0 6px; font-size:18px; }
.mm-about-callout-copy { margin:0; }
.mm-about-author-card { background: var(--mm-navy-50); border:1px solid var(--mm-border); border-radius:12px; padding:20px 22px; margin-top:28px; }
.mm-about-author-card h2 { color: var(--mm-navy); margin:0 0 8px; font-size:18px; }
.mm-about-author-card p { margin:0 0 12px; color: var(--mm-fg-muted); line-height:1.55; }
.mm-about-author-link { color: var(--mm-navy); font-weight:600; text-decoration:none; }
.mm-about-author-link:hover { color: var(--mm-accent-600); }
@media (max-width: 720px) { .mm-about-hero { padding:28px 24px 36px; } .mm-about-section { padding:26px 22px 30px; } }

/* ---------- about/affiliate-disclosure.php ---------- */
.mm-ad-page { max-width:820px; margin:0 auto; padding:24px 20px 60px; color: var(--mm-fg); font-family: var(--mm-font-body); line-height:1.6 }
/* audit-codex P3-polish: the hero now uses .mkt-am (audit-r4 P0-3-8 close;
   .dash-page-header is the post-login dashboard chrome and was the wrong
   reference). Body selectors below remain scoped with :not(.dash-page-header *)
   AND :not(.mkt-am *) so the legacy h1/p body styling never bleeds into
   either masthead variant. */
.mm-ad-page h1:not(.dash-page-header *):not(.mkt-am *) { color: var(--mm-navy); font-size:clamp(28px,4vw,36px); margin:0 0 12px }
.mm-ad-page .lede { font-size:17px; color: var(--mm-fg-muted); margin:0 0 28px }
.mm-ad-page h2 { color: var(--mm-navy); font-size:22px; margin:32px 0 10px }
.mm-ad-page p:not(.dash-page-header *):not(.mkt-am *) { margin:0 0 14px }
.mm-ad-page ul { margin:0 0 14px 22px; padding:0 }
.mm-ad-page li { margin:0 0 8px }
.mm-ad-page .mm-ad-summary { background: var(--mm-accent-50); border:1px solid var(--mm-accent-tint); border-radius:10px; padding:20px 22px; margin:0 0 28px }
.mm-ad-page .mm-ad-summary strong { color: var(--mm-navy) }
.mm-ad-page .mm-ad-card { background:#fff; border:1px solid var(--mm-border); border-radius:12px; padding:20px 22px; margin:16px 0 }
.mm-ad-page .mm-bc { font-size:13px; color: var(--mm-fg-muted); margin-bottom:18px }
.mm-ad-page .mm-bc a { color: var(--mm-fg-muted); text-decoration:none }
.mm-ad-page .mm-bc span { margin:0 5px }
.mm-ad-page a { color: var(--mm-navy) }
.mm-ad-page a:hover { color: var(--mm-accent) }

/* ---------- about/author.php ---------- */
.mm-author-page { max-width:820px; margin:0 auto; padding:24px 20px 60px; color: var(--mm-fg); font-family: var(--mm-font-body); line-height:1.6; }
.mm-author-page .mm-bc { font-size:13px; color: var(--mm-fg-muted); margin-bottom:16px; }
.mm-author-page .mm-bc a { color: var(--mm-fg-muted); text-decoration:none; }
.mm-author-page .mm-bc a:hover { text-decoration:underline; }
.mm-author-page .mm-bc span { margin:0 5px; }
.mm-author-page .mm-ah { display:flex; gap:28px; align-items:flex-start; background:#fff; border:1px solid var(--mm-border); border-radius:16px; padding:28px; margin-bottom:28px; }
.mm-author-page .mm-av { width:88px; height:88px; border-radius:50%; background: var(--mm-navy); color:#fff; display:flex; align-items:center; justify-content:center; font-size:32px; font-weight:700; flex-shrink:0; letter-spacing:-1px; object-fit:cover; }
.mm-author-page .mm-av--photo { background:transparent; }
.mm-author-page .mm-ad h1 { color: var(--mm-navy); margin:0 0 4px; font-size:clamp(22px,3vw,28px); }
.mm-author-page .mm-ad .mm-role { color: var(--mm-fg-muted); font-size:15px; margin:0 0 14px; }
.mm-author-page .mm-ad p { color: var(--mm-fg); font-size:16px; line-height:1.65; margin:0; }
.mm-author-page .mm-eg { display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; margin-bottom:32px; }
.mm-author-page .mm-ec { background:#fff; border:1px solid var(--mm-border); border-radius:12px; padding:18px; }
.mm-author-page .mm-ec h3 { margin:0 0 6px; color: var(--mm-navy); font-size:15px; }
.mm-author-page .mm-ec p { margin:0; color: var(--mm-fg-muted); font-size:14px; line-height:1.5; }
.mm-author-page .mm-aal h2 { color: var(--mm-navy); font-size:20px; margin:0 0 14px; }
.mm-author-page .mm-aal-list { display:flex; flex-direction:column; gap:10px; }
.mm-author-page .mm-aal-item { background:#fff; border:1px solid var(--mm-border); border-radius:10px; padding:14px 18px; }
.mm-author-page .mm-aal-item a { color: var(--mm-navy); text-decoration:none; font-weight:600; font-size:15px; line-height:1.35; }
.mm-author-page .mm-aal-item a:hover { color: var(--mm-accent); text-decoration:underline; }
.mm-author-page .mm-ep { background: var(--mm-navy-50); border:1px solid var(--mm-border); border-radius:12px; padding:20px 22px; margin-top:28px; }
.mm-author-page .mm-ep h2 { color: var(--mm-navy); font-size:17px; margin:0 0 10px; }
.mm-author-page .mm-ep p { color: var(--mm-fg-muted); font-size:14px; line-height:1.55; margin:0; }
.mm-author-page .mm-byn { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin:0 0 28px; }
.mm-author-page .mm-byn-cell { background:#fff; border:1px solid var(--mm-border); border-radius:12px; padding:14px 16px; text-align:center; }
.mm-author-page .mm-byn-num { display:block; color: var(--mm-navy); font-weight:700; font-size:22px; line-height:1.1; margin-bottom:4px; font-family: var(--mm-font-mono); font-variant-numeric: tabular-nums; }
.mm-author-page .mm-byn-lbl { color: var(--mm-fg-muted); font-size:12px; line-height:1.35; }
.mm-author-page .mm-method { background:#fff; border:1px solid var(--mm-border); border-radius:12px; padding:22px 24px; margin:0 0 28px; }
.mm-author-page .mm-method h2 { color: var(--mm-navy); font-size:20px; margin:0 0 10px; }
.mm-author-page .mm-method p { color: var(--mm-fg); font-size:15px; line-height:1.6; margin:0 0 12px; }
.mm-author-page .mm-method ul { margin:0 0 12px 22px; padding:0; color: var(--mm-fg); font-size:15px; line-height:1.6; }
.mm-author-page .mm-method li { margin:0 0 8px; }
.mm-author-page .mm-method a { color: var(--mm-navy); }
.mm-author-page .mm-method a:hover { color: var(--mm-accent); }
@media (max-width: 600px) { .mm-author-page .mm-ah { flex-direction:column; } .mm-author-page .mm-eg { grid-template-columns:1fr; } .mm-author-page .mm-byn { grid-template-columns:repeat(2, 1fr); } }

/* ---------- about/corrections.php ---------- */
.mm-corr-page { max-width:820px; margin:0 auto; padding:24px 20px 60px; color: var(--mm-fg); font-family: var(--mm-font-body); line-height:1.6 }
.mm-corr-page h1 { color: var(--mm-navy); font-size:clamp(28px,4vw,36px); margin:0 0 12px }
.mm-corr-page .lede { font-size:17px; color: var(--mm-fg-muted); margin:0 0 28px }
.mm-corr-page .mm-corr-empty { background:#fff; border:1px solid var(--mm-border); border-radius:12px; padding:28px; text-align:center; color: var(--mm-fg-muted) }
.mm-corr-page .mm-corr-list { display:flex; flex-direction:column; gap:16px }
.mm-corr-page .mm-corr-item { background:#fff; border:1px solid var(--mm-border); border-radius:12px; padding:20px 22px }
.mm-corr-page .mm-corr-item .date { font-size:13px; color: var(--mm-fg-subtle); letter-spacing:.05em; text-transform:uppercase; margin-bottom:6px; font-variant-numeric: tabular-nums; }
.mm-corr-page .mm-corr-item h3 { margin:0 0 10px; color: var(--mm-navy); font-size:16px }
.mm-corr-page .mm-corr-item h3 a { color: var(--mm-navy); text-decoration:none }
.mm-corr-page .mm-corr-item h3 a:hover { color: var(--mm-accent); text-decoration:underline }
.mm-corr-page .mm-corr-item p { margin:0 0 8px; font-size:15px }
.mm-corr-page .mm-corr-item p strong { color: var(--mm-navy) }
.mm-corr-page .mm-bc { font-size:13px; color: var(--mm-fg-muted); margin-bottom:18px }
.mm-corr-page .mm-bc a { color: var(--mm-fg-muted); text-decoration:none }
.mm-corr-page .mm-bc span { margin:0 5px }

/* ---------- about/editorial-policy.php ---------- */
.mm-ep-page { max-width:820px; margin:0 auto; padding:24px 20px 60px; color: var(--mm-fg); font-family: var(--mm-font-body); line-height:1.6 }
/* audit-codex P3-polish: hero now uses .mkt-am (cream Direction A editorial
   chrome) per audit-r4 P0-3-8 close; .dash-page-header was post-login
   dashboard chrome. Body selectors stay scoped with :not(.dash-page-header *)
   AND :not(.mkt-am *) so the legacy h1/p styling never bleeds into either. */
.mm-ep-page h1:not(.dash-page-header *):not(.mkt-am *) { color: var(--mm-navy); font-size:clamp(28px,4vw,36px); margin:0 0 12px }
.mm-ep-page .lede { font-size:17px; color: var(--mm-fg-muted); margin:0 0 28px }
.mm-ep-page h2 { color: var(--mm-navy); font-size:22px; margin:32px 0 10px }
.mm-ep-page h3 { color: var(--mm-navy); font-size:17px; margin:22px 0 6px }
.mm-ep-page p:not(.dash-page-header *):not(.mkt-am *) { margin:0 0 14px; color: var(--mm-fg) }
.mm-ep-page ul { margin:0 0 14px 22px; padding:0 }
.mm-ep-page li { margin:0 0 8px }
.mm-ep-page .mm-ep-card { background:#fff; border:1px solid var(--mm-border); border-radius:12px; padding:20px 22px; margin:16px 0 }
.mm-ep-page .mm-ep-bc { font-size:13px; color: var(--mm-fg-muted); margin-bottom:18px }
.mm-ep-page .mm-ep-bc a { color: var(--mm-fg-muted); text-decoration:none }
.mm-ep-page .mm-ep-bc span { margin:0 5px }
.mm-ep-page a { color: var(--mm-navy) }
.mm-ep-page a:hover { color: var(--mm-accent) }

/* ---------- about/glossary.php ---------- */
.mm-glossary { max-width: 880px; margin: 0 auto; padding: 24px 20px 60px; color: var(--mm-fg); font-family: var(--mm-font-body); line-height: 1.6; }
.mm-glossary h1 { color: var(--mm-navy); font-size: clamp(24px, 3vw, 32px); margin: 0 0 8px; }
.mm-glossary > .lead { color: var(--mm-fg-muted); font-size: 16px; margin: 0 0 28px; }
.mm-glossary__entry { background: #fff; border: 1px solid var(--mm-border); border-radius: 10px; padding: 16px 18px; margin: 0 0 12px; scroll-margin-top: 80px; }
.mm-glossary__entry h2 { font-size: 17px; color: var(--mm-navy); margin: 0 0 6px; }
.mm-glossary__entry p { font-size: 15px; margin: 0 0 8px; color: var(--mm-fg); }
.mm-glossary__used { font-size: 13px; color: var(--mm-fg-muted); }
.mm-glossary__used strong { color: var(--mm-fg-strong); font-weight: 600; }
.mm-glossary__toc { margin: 0 0 32px; padding: 14px 16px; background: var(--mm-bg-alt); border-radius: 10px; border: 1px solid var(--mm-border); display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 13px; }
.mm-glossary__toc a { color: var(--mm-navy); text-decoration: none; font-weight: 500; }
.mm-glossary__toc a:hover { text-decoration: underline; }

/* ---------- about/privacy.php and about/terms.php (shared) ---------- */
/* These two pages previously used a :root override pattern. Replaced with a
   scoped doc class so the cascade isn't polluted globally. The PHP markup
   is updated in parallel to add `class="mm-doc-page"` to <main>. */
main.mm-doc-page { display: block; max-width: 960px; width: 100%; margin: 32px auto 48px; padding: 0 16px; font-family: var(--mm-font-body); color: var(--mm-fg); }
.mm-doc-page .card { background: #fff; border-radius: 8px; padding: 32px; box-shadow: var(--mm-shadow-card); border: 1px solid var(--mm-border); }
.mm-doc-page article section { margin-bottom: 32px; }
.mm-doc-page h2 { font-size: 22px; margin: 32px 0 16px 0; color: var(--mm-navy); font-weight: 700; }
.mm-doc-page h3 { font-size: 18px; margin: 24px 0 12px 0; color: var(--mm-navy); font-weight: 600; }
.mm-doc-page p { line-height: 1.6; margin: 12px 0; }
.mm-doc-page ul { line-height: 1.8; margin: 12px 0; padding-left: 24px; }
.mm-doc-page li { margin: 8px 0; }
.mm-doc-page a { color: var(--mm-navy); text-decoration: none; font-weight: 500; }
.mm-doc-page a:hover { text-decoration: underline; color: var(--mm-accent); }
.mm-doc-page .muted { color: var(--mm-fg-muted); font-size: 14px; }
.mm-doc-page strong { color: var(--mm-navy); font-weight: 600; }

/* ---------- about/contact.php ---------- */
.mm-contact-page { --color-brand-blue: var(--mm-navy); --color-brand-orange: var(--mm-accent); --color-bg-page: var(--mm-bg-page); --color-bg-surface: var(--mm-bg-surface); --color-text-primary: var(--mm-fg); --color-text-secondary: var(--mm-fg-strong); --color-text-muted: var(--mm-fg-muted); --color-border: var(--mm-border); --color-success: var(--mm-success); --color-error: var(--mm-danger); --color-warn-bg: var(--mm-warning-bg); font-family: var(--mm-font-body); color: var(--color-text-primary); line-height: 1.5; }
.mm-contact-shell { max-width: 780px; margin: 0 auto; padding: 8px 8px 48px; }
.mm-contact-hero { background: linear-gradient(135deg, #fff, var(--mm-bg-alt)); border: 1px solid var(--color-border); border-radius: 18px; padding: 38px 40px 42px; position: relative; overflow: hidden; margin-bottom: 32px; }
.mm-contact-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 20%, rgba(255, 107, 0, 0.18), transparent 60%); pointer-events: none; }
.mm-contact-hero h1 { margin: 0 0 14px; font-size: clamp(32px, 5vw, 48px); color: var(--color-brand-blue); letter-spacing: 0.5px; line-height: 1.1; position: relative; z-index: 1; }
.mm-contact-hero p { margin: 0; max-width: 700px; font-size: 16px; color: var(--color-text-muted); position: relative; z-index: 1; }
.mm-contact-form { background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: 16px; padding: 32px 30px 34px; box-shadow: var(--mm-shadow-card); }
.mm-contact-page .form-group { margin-bottom: 24px; }
.mm-contact-page .form-group:last-child { margin-bottom: 0; }
.mm-contact-page .form-label { display: block; font-weight: 600; font-size: 14px; color: var(--color-text-secondary); margin-bottom: 8px; letter-spacing: 0.3px; }
.mm-contact-page .form-label .optional { font-weight: 400; color: var(--color-text-muted); margin-left: 6px; }
.mm-contact-page .form-input, .mm-contact-page .form-textarea { width: 100%; padding: 12px 14px; font-size: 15px; font-family: inherit; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-bg-surface); color: var(--color-text-primary); transition: border-color 0.2s, box-shadow 0.2s; box-sizing: border-box; }
.mm-contact-page .form-input:focus, .mm-contact-page .form-textarea:focus { border-color: var(--mm-navy); box-shadow: 0 0 0 3px rgba(26, 43, 76, 0.10); }
.mm-contact-page .form-textarea { resize: vertical; min-height: 140px; font-family: inherit; }
.mm-contact-page .form-attachments { margin-bottom: 28px; }
.mm-contact-page .attachment-help { font-size: 13px; color: var(--color-text-muted); margin-top: 6px; margin-bottom: 12px; }
.mm-contact-page .file-input-wrapper { position: relative; display: inline-block; width: 100%; }
.mm-contact-page .file-input-wrapper input[type="file"] { display: none; }
.mm-contact-page .file-input-label { display: flex; align-items: center; justify-content: center; padding: 20px; border: 2px dashed var(--color-border); border-radius: 8px; background: var(--mm-bg-alt); cursor: pointer; transition: border-color 0.2s, background 0.2s; gap: 12px; }
.mm-contact-page .file-input-label:hover { border-color: var(--color-brand-blue); background: var(--mm-navy-50); }
.mm-contact-page .file-input-label svg { width: 20px; height: 20px; color: var(--color-brand-blue); flex-shrink: 0; }
.mm-contact-page .file-input-text { text-align: center; }
.mm-contact-page .file-input-text strong { display: block; color: var(--color-brand-blue); font-size: 14px; margin-bottom: 2px; }
.mm-contact-page .file-input-text span { display: block; font-size: 12px; color: var(--color-text-muted); }
.mm-contact-page .file-list { margin-top: 12px; padding: 0; list-style: none; }
.mm-contact-page .file-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: var(--color-bg-page); border: 1px solid var(--color-border); border-radius: 6px; margin-bottom: 8px; font-size: 13px; }
.mm-contact-page .file-item-name { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.mm-contact-page .file-item-icon { flex-shrink: 0; width: 16px; height: 16px; color: var(--color-brand-blue); }
.mm-contact-page .file-item-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mm-contact-page .file-item-title { font-weight: 500; color: var(--color-text-secondary); word-break: break-word; overflow: hidden; text-overflow: ellipsis; }
.mm-contact-page .file-item-size { font-size: 12px; color: var(--color-text-muted); }
.mm-contact-page .file-item-remove { flex-shrink: 0; padding: 4px 8px; margin-left: 8px; background: transparent; color: var(--color-error); border: 1px solid var(--color-error); border-radius: 4px; cursor: pointer; font-size: 11px; font-weight: 600; transition: background 0.2s, color 0.2s; }
.mm-contact-page .file-item-remove:hover { background: var(--color-error); color: white; }
.mm-contact-page .form-actions { display: flex; gap: 12px; margin-top: 32px; }
.mm-contact-page .btn-primary, .mm-contact-page .btn-secondary { padding: 12px 24px; font-size: 14px; font-weight: 600; border: none; border-radius: 8px; cursor: pointer; transition: background 0.2s, box-shadow 0.2s, border-color 0.2s; letter-spacing: 0.3px; }
.mm-contact-page .btn-primary { background: var(--color-brand-blue); color: white; }
.mm-contact-page .btn-primary:hover:not(:disabled) { background: var(--mm-navy-600); box-shadow: 0 4px 12px rgba(26, 43, 76, 0.20); }
.mm-contact-page .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
.mm-contact-page .btn-secondary { background: var(--color-bg-page); color: var(--color-text-secondary); border: 1px solid var(--color-border); }
.mm-contact-page .btn-secondary:hover:not(:disabled) { background: var(--color-bg-surface); border-color: var(--color-text-secondary); }
.mm-contact-page .form-message { padding: 14px 16px; border-radius: 8px; margin-bottom: 20px; font-size: 14px; display: none; }
.mm-contact-page .form-message.show { display: block; }
.mm-contact-page .form-message.success { background: var(--mm-success-bg); border: 1px solid var(--mm-success-bg); color: var(--mm-success); }
.mm-contact-page .form-message.error { background: var(--mm-danger-bg); border: 1px solid var(--mm-danger-bg); color: var(--mm-danger); }
.mm-contact-page .form-message.loading { background: var(--color-warn-bg); border: 1px solid rgba(255, 107, 0, 0.3); color: var(--color-text-secondary); }
.mm-contact-page .field-error { color: var(--color-error); font-size: 12px; margin-top: 6px; display: none; }
.mm-contact-page .field-error.show { display: block; }
.mm-contact-page .form-input.error, .mm-contact-page .form-textarea.error { border-color: var(--color-error); }
.mm-contact-page .spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255, 107, 0, 0.3); border-top-color: var(--color-brand-orange); border-radius: 50%; animation: mkt-spin 0.6s linear infinite; margin-right: 8px; }
@keyframes mkt-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mm-contact-page .spinner { animation: none; } }
@media (max-width: 720px) {
  .mm-contact-hero { padding: 28px 24px 36px; }
  .mm-contact-form { padding: 26px 22px 30px; }
  .mm-contact-page .form-actions { flex-direction: column; }
  .mm-contact-page .btn-primary, .mm-contact-page .btn-secondary { width: 100%; }
}

/* ---------- about/help.php ---------- */
.mm-help-page { --mm-help-blue: var(--mm-navy); --mm-help-blue-soft: var(--mm-navy-50); --mm-help-orange: var(--mm-accent); --mm-help-ink: var(--mm-fg-strong); --mm-help-text: var(--mm-fg); --mm-help-muted: var(--mm-fg-muted); --mm-help-border: var(--mm-border); --mm-help-panel: rgba(255, 255, 255, 0.98); --mm-help-cloud: linear-gradient(180deg, var(--mm-navy-50) 0%, #ffffff 100%); max-width: 960px; margin: 0 auto; padding: 20px 14px 56px; color: var(--mm-help-text); font-family: var(--mm-font-body); }
.mm-help-hero { position: relative; overflow: hidden; margin-bottom: 24px; padding: 30px 28px; border: 1px solid rgba(26, 43, 76, 0.12); border-radius: 24px; background: radial-gradient(circle at top right, rgba(255, 107, 0, 0.18), transparent 26%), var(--mm-help-cloud); box-shadow: var(--mm-shadow-lg); }
.mm-help-hero__eyebrow { margin: 0 0 8px; color: var(--mm-help-orange); font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.mm-help-hero__title { margin: 0 0 10px; color: var(--mm-help-blue); font-size: clamp(30px, 5vw, 44px); line-height: 1.04; }
.mm-help-hero__copy, .mm-help-hero__meta { max-width: 760px; margin: 0; font-size: 16px; line-height: 1.72; color: var(--mm-help-muted); }
.mm-help-hero__meta { margin-top: 14px; font-size: 14px; }
.mm-help-hero__copy a, .mm-help-hero__meta a, .mm-help-answer a, .mm-help-contact a { color: var(--mm-help-blue); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.mm-help-hero__copy a:hover, .mm-help-hero__meta a:hover, .mm-help-answer a:hover, .mm-help-contact a:hover { color: var(--mm-help-orange); }
.mm-help-toc { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; padding: 14px; border: 1px solid var(--mm-help-border); border-radius: 18px; background: var(--mm-bg-alt); }
.mm-help-toc__link { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 14px; border: 1px solid var(--mm-help-border); border-radius: 999px; background: #fff; color: var(--mm-help-blue); font-size: 13px; font-weight: 700; text-decoration: none; transition: background var(--mm-dur) var(--mm-ease), border-color var(--mm-dur) var(--mm-ease), color var(--mm-dur) var(--mm-ease), transform var(--mm-dur-fast) var(--mm-ease); }
.mm-help-toc__link:hover { transform: translateY(-1px); border-color: var(--mm-help-blue); background: var(--mm-help-blue); color: #fff; }
.mm-help-group { margin-bottom: 34px; padding: 24px 22px; border: 1px solid var(--mm-help-border); border-radius: 22px; background: var(--mm-help-panel); box-shadow: var(--mm-shadow-md); scroll-margin-top: 88px; }
.mm-help-group__title { margin: 0 0 8px; color: var(--mm-help-blue); font-size: clamp(22px, 3vw, 28px); line-height: 1.18; }
.mm-help-group__intro { margin: 0 0 18px; color: var(--mm-help-muted); font-size: 15px; line-height: 1.7; }
.mm-help-accordion { display: grid; gap: 10px; }
.mm-help-item { border: 1px solid var(--mm-help-border); border-radius: 16px; background: #fff; overflow: hidden; }
.mm-help-item[open] { border-color: rgba(26, 43, 76, 0.42); box-shadow: var(--mm-shadow-md); }
.mm-help-summary { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; cursor: pointer; list-style: none; }
.mm-help-summary::-webkit-details-marker { display: none; }
.mm-help-question { flex: 1; color: var(--mm-help-ink); font-size: 15px; font-weight: 700; line-height: 1.5; }
.mm-help-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: 0 0 26px; border-radius: 999px; background: var(--mm-help-blue-soft); color: var(--mm-help-blue); font-size: 18px; font-weight: 800; line-height: 1; transition: transform var(--mm-dur) var(--mm-ease), background var(--mm-dur) var(--mm-ease), color var(--mm-dur) var(--mm-ease); }
.mm-help-item[open] .mm-help-icon { transform: rotate(45deg); background: var(--mm-help-orange); color: #fff; }
.mm-help-answer { padding: 0 18px 18px; color: var(--mm-help-text); font-size: 14.5px; line-height: 1.72; }
.mm-help-answer strong { color: var(--mm-help-blue); }
.mm-help-contact { margin-top: 42px; padding: 26px 22px; border: 1px solid var(--mm-help-border); border-radius: 22px; background: var(--mm-bg-surface); text-align: center; }
.mm-help-contact__title { margin: 0 0 8px; color: var(--mm-help-blue); font-size: 26px; }
.mm-help-contact__copy { margin: 0 auto 16px; max-width: 680px; color: var(--mm-help-muted); line-height: 1.7; }
.mm-help-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 12px 18px; border: 1px solid transparent; border-radius: 999px; background: var(--mm-accent); color: #fff; font-weight: 800; text-decoration: none; box-shadow: var(--mm-shadow-accent-glow); transition: background var(--mm-dur) var(--mm-ease), transform var(--mm-dur-fast) var(--mm-ease); }
.mm-help-btn:hover { background: var(--mm-accent-600); color: #fff; transform: translateY(-1px); }
@media (max-width: 640px) {
  .mm-help-page { padding: 16px 10px 44px; }
  .mm-help-hero, .mm-help-group, .mm-help-contact { padding-left: 16px; padding-right: 16px; }
  .mm-help-summary { padding: 16px; }
  .mm-help-answer { padding: 0 16px 16px; }
  .mm-help-toc { padding: 10px; }
  .mm-help-toc__link { min-height: 38px; padding: 8px 12px; }
}

/* ---------- about/pricing.php — .mm-pricing-v2 ----------
 * audit-r3 P0-3-9 close: the entire .mm-pricing-v2 mirror (~90 lines) was
 * deleted. The authoritative copy lives inline in mm_pricing_render() in
 * about/pricing.php — Fraunces / Geist literals there were swept to
 * Cormorant / DM Sans / JetBrains Mono in the r2 closeout. Keeping a
 * duplicate here created a register-disagreement landmine (mirror said
 * Fraunces+Geist, inline said Cormorant+DM Sans). The inline copy ships
 * in both the standalone and the v2-shell render paths.
 */

/* ---------- about/pricing.php (legacy .mm-pricing-page wrapper; only used
 *            by the older mm-doc-page path before mm-pricing-v2 took over) ---------- */
.mm-pricing-page { background: var(--mm-bg-page); padding: 40px 0 0; font-family: var(--mm-font-body); color: var(--mm-fg); }
.mm-pricing-page .mm-bc { max-width: 980px; margin: 0 auto 8px; padding: 0 32px; font-size: 13px; color: var(--mm-fg-muted); }
.mm-pricing-page .mm-bc a { color: var(--mm-fg-muted); text-decoration: none; }
.mm-pricing-page .mm-bc a:hover { text-decoration: underline; }
.mm-pricing-page .mm-bc span { margin: 0 5px; }
.mm-pricing-page .mm-pricing-alert { max-width: 980px; margin: 0 auto 16px; padding: 14px 18px; border-radius: 12px; background: var(--mm-accent-50); border: 1px solid var(--mm-accent-tint); color: var(--mm-fg-strong); font-size: 14px; }
.mm-pricing-page .mm-pricing-alert strong { color: var(--mm-navy); }
.mm-pricing-page .mm-pricing-faq { max-width: 980px; margin: 16px auto 0; padding: 0 32px 80px; }
.mm-pricing-page .mm-pricing-faq h2 { color: var(--mm-navy); font-size: 24px; margin: 0 0 16px; text-align: center; }
.mm-pricing-page .mm-pricing-faq details { background: #fff; border: 1px solid var(--mm-border); border-radius: 12px; padding: 14px 18px; margin: 0 0 10px; }
.mm-pricing-page .mm-pricing-faq summary { cursor: pointer; font-weight: 600; color: var(--mm-navy); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.mm-pricing-page .mm-pricing-faq summary::-webkit-details-marker { display: none; }
.mm-pricing-page .mm-pricing-faq summary::after { content: '+'; color: var(--mm-accent); font-size: 20px; font-weight: 700; }
.mm-pricing-page .mm-pricing-faq details[open] summary::after { content: '−'; }
.mm-pricing-page .mm-pricing-faq .answer { margin-top: 10px; color: var(--mm-fg-muted); line-height: 1.6; font-size: 15px; }
.mm-pricing-page .mm-pricing-note { max-width: 980px; margin: 16px auto 0; padding: 0 32px 24px; color: var(--mm-fg-muted); font-size: 13px; line-height: 1.55; text-align: center; }
.mm-pricing-page > .dash-page-header { max-width: 980px; margin: 0 auto 16px; }
.mm-pricing-privacy-callout { margin: 12px 0 0; padding: 10px 14px; background: var(--mm-accent-50); border: 1px solid var(--mm-accent-tint); border-radius: 8px; font-size: 14px; color: var(--mm-fg-strong); line-height: 1.5; max-width: 540px; }
.mm-pricing-privacy-callout a { color: var(--mm-accent-700); font-weight: 600; text-decoration: none; }
.mm-pricing-privacy-callout a:hover { text-decoration: underline; }
@media (max-width: 640px) { .mm-pricing-page .mm-bc { padding: 0 20px; } }

/* ============================================================
   Phase 7 mockup migration — Direction A "Broadsheet, by Daylight"
   ------------------------------------------------------------
   New sections layered under the existing hero + 9-card articles
   strip on index.php: proof band, three travel-life chapters,
   AdSense calm slot, programme coverage grid (39 tiles), pricing
   (Explorer + Pro), final navy CTA. All selectors prefixed `ph7-`
   to avoid colliding with the legacy `.mkt-*` namespace. Tokens
   resolved from lib/mm-design-system.css; the cream paper tone is
   a literal #FAF6EF (used 3 places, not worth a new token).
   Honours `prefers-reduced-motion: reduce`.
   ============================================================ */

/* Shared editorial primitives ----------------------------------- */
.ph7-eyebrow-mono {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mm-fg-muted);
  display: inline-block;
}

/* PROOF BAND ---------------------------------------------------- */
.ph7-proof {
  /* audit-r4 P1-4-I3 close: --mm-broadsheet-cream token (was raw #FAF6EF). */
  background: var(--mm-broadsheet-cream, #FAF6EF);
  /* audit-r3 Polish 24: shared section rhythm token. -md (was 64px) keeps
     the proof band slightly tighter than the chapter sections. */
  padding: var(--mm-section-padding-md, clamp(40px, 6vw, 64px)) 32px;
  border-top: 1px solid var(--mm-border-subtle);
  border-bottom: 1px solid var(--mm-border-subtle);
}
.ph7-proof__inner {
  max-width: 1280px; margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
}
.ph7-proof__stat .ph7-eyebrow-mono { display: block; margin-bottom: 12px; }
.ph7-proof__figure {
  font-family: var(--mm-font-mono);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--mm-fg-strong);
  font-variant-numeric: tabular-nums;
  margin: 0 0 12px;
  text-wrap: balance;
}
.ph7-proof__figure i {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: var(--mm-accent-700);
}
.ph7-proof__stat--accent .ph7-proof__figure { color: var(--mm-accent-700); }
.ph7-proof__label {
  font-family: var(--mm-font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--mm-fg-strong);
  margin: 0 0 8px;
  max-width: 280px;
}
.ph7-proof__cite {
  font-family: var(--mm-font-body);
  font-size: 11.5px;
  font-style: italic;
  color: var(--mm-fg-muted);
  margin: 0;
}
.ph7-proof__cite a { color: var(--mm-accent-700); text-decoration: underline; }
.ph7-proof__cite a:hover { color: var(--mm-accent); }

/* CHAPTERS ------------------------------------------------------ */
.ph7-chapter {
  /* audit-r3 Polish 24: shared section rhythm. -lg is the canonical
     chapter padding (was 80px). */
  padding: var(--mm-section-padding-lg, clamp(56px, 8vw, 80px)) 32px;
  background: var(--mm-bg-surface, #FFFFFF);
}
.ph7-chapter--cream { background: var(--mm-broadsheet-cream, #FAF6EF); }
.ph7-chapter__inner { max-width: 1280px; margin: 0 auto; }
.ph7-chapter__head { margin-bottom: 48px; max-width: 720px; }
.ph7-chapter__head .ph7-eyebrow-mono { display: block; margin-bottom: 12px; }
.ph7-chapter h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 700;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.022em;
  margin: 0 0 16px;
  color: var(--mm-fg-strong);
  text-wrap: balance;
}
.ph7-chapter h2 i {
  font-style: italic;
  font-weight: 500;
  color: var(--mm-accent-700);
}
.ph7-chapter__lede {
  font-family: var(--mm-font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--mm-fg-muted);
  max-width: 620px;
  margin: 0;
}
.ph7-chapter__body {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 24px;
}

/* Bento "broadsheet" cards inside chapters ---------------------- */
.ph7-bcard {
  background: var(--mm-bg-surface, #FFFFFF);
  border: 1px solid var(--mm-border, #E2E7F0);
  border-radius: var(--mm-radius-xl, 16px);
  padding: 32px;
  box-shadow: var(--mm-shadow-card);
}
.ph7-chapter--cream .ph7-bcard { background: #FFFFFF; }
.ph7-bcard__title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.012em;
  margin: 0 0 12px;
  color: var(--mm-fg-strong);
  text-wrap: balance;
}
.ph7-bcard__lede {
  font-family: var(--mm-font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--mm-fg-muted);
  margin: 0 0 24px;
}
.ph7-bcard__body {
  font-family: var(--mm-font-body);
  font-size: 14px;
  line-height: 1.65;
  color: var(--mm-fg-muted);
  margin: 20px 0 0;
}

/* Pullquote inside chapter bcards. audit-r3 P1-3-I7 close: retired the 3px
   coloured border-left in favour of an orange-paper background + token
   hairline. Brand rule: no thick coloured border-left accents on editorial
   surfaces. */
.ph7-pullquote {
  margin: 24px 0 0;
  padding: 24px 28px;
  background: var(--mm-accent-50, #FFF4EC);
  border: 1px solid var(--mm-accent-tint, #FFE8D6);
  border-radius: var(--mm-radius-lg, 12px);
}
.ph7-pullquote p {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 19px;
  line-height: 1.45;
  color: var(--mm-fg-strong);
  margin: 0 0 8px;
  text-wrap: balance;
}
.ph7-pullquote cite {
  font-family: var(--mm-font-body);
  font-size: 12px;
  font-style: normal;
  color: var(--mm-fg-muted);
  letter-spacing: 0.02em;
}

/* Mini-tracker mock used inside chapter bcards */
.ph7-minitrack {
  background: var(--mm-bg-surface, #FFFFFF);
  border: 1px solid var(--mm-border, #E2E7F0);
  border-radius: var(--mm-radius-lg, 12px);
  overflow: hidden;
}
.ph7-minitrack__row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1.4fr) minmax(0, 0.9fr) minmax(0, 0.95fr);
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--mm-border-subtle, #EEF1F6);
}
.ph7-minitrack__row:last-child { border-bottom: 0; }
.ph7-minitrack__logo {
  width: 22px; height: 22px;
  border-radius: 4px;
  object-fit: contain;
  background: var(--mm-bg-page, #F4F6FA);
  padding: 1px;
}
.ph7-minitrack__name {
  font-family: var(--mm-font-heading);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--mm-fg-strong);
  line-height: 1.2;
}
.ph7-minitrack__tier {
  /* audit-r3 P1-3-I9 close: Real Names Rule. Tier strings ("Executive
     Platinum", "Titanium Elite") are first-class typography; JetBrains Mono
     eyebrow-mono treatment matches the rest of the editorial surface and
     beats the previous DM Sans 10.5px italic, which read as a footnote. */
  font-family: var(--mm-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--mm-fg-muted);
  margin-top: 4px;
}
.ph7-minitrack__bar {
  height: 5px;
  background: var(--mm-border-subtle, #EEF1F6);
  border-radius: 999px;
  overflow: hidden;
}
.ph7-minitrack__bar > i { display: block; height: 100%; border-radius: 999px; }
/* audit-r3 P1-3-I2 close: tokenised tracker progress bars. The four pace
   colours (on-track green, at-risk amber, behind ruby, achievement orange-
   gradient) come from documented brand tokens — not inline hex literals
   that drifted from the canonical values. */
.ph7-minitrack__fill { display: block; height: 100%; border-radius: 999px; }
.ph7-minitrack__fill--ok { background: var(--mm-pace-on-track, #2D8F5C); }
.ph7-minitrack__fill--at { background: var(--mm-pace-amber, #C58A2B); }
.ph7-minitrack__fill--be { background: var(--mm-pace-ruby, #B53A2B); }
.ph7-minitrack__fill--ach { background: linear-gradient(90deg, var(--mm-accent-700, #C44600), var(--mm-accent, #FF6810)); }
.ph7-minitrack__bal {
  text-align: right;
  font-family: var(--mm-font-mono);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--mm-fg-strong);
}
.ph7-minitrack__bal--accent { color: var(--mm-accent-700); }
.ph7-minitrack__balsub {
  text-align: right;
  font-family: var(--mm-font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mm-fg-muted);
  margin-top: 2px;
}

/* Advisor recommendation card in Chapter 3 */
.ph7-rec {
  background: var(--mm-bg-surface, #FFFFFF);
  border: 1px solid var(--mm-border, #E2E7F0);
  border-radius: var(--mm-radius-lg, 12px);
  padding: 22px 24px;
}
.ph7-rec__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.ph7-rec__label {
  font-family: var(--mm-font-heading);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--mm-fg-strong);
  margin: 0;
}
.ph7-rec__chip {
  font-family: var(--mm-font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mm-accent-700);
  background: var(--mm-accent-50, #FFF4EC);
  border: 1px solid var(--mm-accent-tint, #FFE8D6);
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}
.ph7-rec__quote {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.45;
  color: var(--mm-fg-strong);
  margin: 0 0 14px;
}
.ph7-rec__foot {
  font-family: var(--mm-font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--mm-fg-muted);
  margin: 0;
}

/* ADSENSE CALM SLOT --------------------------------------------- */
.ph7-adband {
  background: var(--mm-bg-surface, #FFFFFF);
  padding: 32px 32px 0;
}
.ph7-adband__inner { max-width: 1280px; margin: 0 auto; }
.ph7-adband__inner:empty { display: none; }

/* PROGRAMME COVERAGE -------------------------------------------- */
.ph7-coverage {
  background: var(--mm-bg-surface, #FFFFFF);
  padding: var(--mm-section-padding-lg, clamp(56px, 8vw, 80px)) 32px;
}
.ph7-coverage__inner { max-width: 1280px; margin: 0 auto; }
.ph7-coverage__head { margin-bottom: 40px; max-width: 720px; }
.ph7-coverage__head .ph7-eyebrow-mono { display: block; margin-bottom: 12px; }
.ph7-coverage h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  margin: 0 0 12px;
  color: var(--mm-fg-strong);
  text-wrap: balance;
}
.ph7-coverage__lede {
  font-family: var(--mm-font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--mm-fg-muted);
  max-width: 620px;
  margin: 0;
}
.ph7-coverage__group { margin-top: 40px; }
.ph7-coverage__group:first-of-type { margin-top: 0; }
.ph7-coverage__group-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--mm-border, #E2E7F0);
}
.ph7-coverage__group-name {
  font-family: var(--mm-font-heading);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--mm-fg-strong);
}
.ph7-coverage__group-count {
  font-family: var(--mm-font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mm-fg-muted);
  font-variant-numeric: tabular-nums;
}
.ph7-coverage__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

/* Programme tile */
.ph7-ptile {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--mm-bg-surface, #FFFFFF);
  border: 1px solid var(--mm-border, #E2E7F0);
  border-radius: var(--mm-radius-card, 8px);
  transition: border-color 120ms var(--mm-ease, ease-out),
              transform 120ms var(--mm-ease, ease-out),
              box-shadow 120ms var(--mm-ease, ease-out);
}
.ph7-ptile:hover {
  border-color: var(--mm-border-strong, #C5CDDB);
  transform: translateY(-1px);
  box-shadow: var(--mm-shadow-card);
}
.ph7-ptile__logo {
  width: 28px; height: 28px;
  border-radius: 4px;
  object-fit: contain;
  background: var(--mm-bg-page, #F4F6FA);
  padding: 2px;
  flex: 0 0 auto;
}
.ph7-ptile__logo--text {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mm-font-heading);
  font-size: 10px;
  font-weight: 700;
  color: var(--mm-fg-inverse, #FFFFFF);
  letter-spacing: 0.04em;
  background: var(--mm-navy);
  padding: 0;
}
.ph7-ptile__text { display: flex; flex-direction: column; min-width: 0; }
.ph7-ptile__name {
  font-family: var(--mm-font-heading);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--mm-fg-strong);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ph7-ptile__sub {
  font-family: var(--mm-font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mm-fg-muted);
  margin-top: 2px;
}

/* PRICING ------------------------------------------------------- */
.ph7-pricing {
  background: var(--mm-broadsheet-cream, #FAF6EF);
  padding: var(--mm-section-padding-lg, clamp(56px, 8vw, 80px)) 32px;
}
.ph7-pricing__inner { max-width: 1100px; margin: 0 auto; }
.ph7-pricing__head { text-align: center; margin-bottom: 48px; }
.ph7-pricing__head .ph7-eyebrow-mono { display: block; margin-bottom: 12px; }
.ph7-pricing__head h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 700;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.06;
  letter-spacing: -0.022em;
  margin: 0 0 12px;
  color: var(--mm-fg-strong);
  text-wrap: balance;
}
.ph7-pricing__head h2 i {
  font-style: italic;
  font-weight: 500;
  color: var(--mm-accent-700);
}
.ph7-pricing__lede {
  font-family: var(--mm-font-body);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--mm-fg-muted);
  max-width: 580px;
  margin: 0 auto;
}
.ph7-plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.ph7-plan {
  background: var(--mm-bg-surface, #FFFFFF);
  border: 1px solid var(--mm-border, #E2E7F0);
  border-radius: var(--mm-radius-xl, 16px);
  padding: 36px 36px 40px;
  position: relative;
  display: flex; flex-direction: column;
  box-shadow: var(--mm-shadow-card);
  transition: transform 200ms var(--mm-ease, ease-out),
              box-shadow 200ms var(--mm-ease, ease-out);
}
.ph7-plan:hover { transform: translateY(-2px); box-shadow: var(--mm-shadow-md); }
.ph7-plan--pro {
  border-color: rgba(255, 104, 16, 0.35);
  /* Signature gold glow on the Pro card. Defined inline since the existing
     --mm-shadow-gold-glow doesn't have a matching token here. */
  box-shadow: 0 0 0 1px rgba(255, 104, 16, 0.45),
              0 18px 40px rgba(255, 104, 16, 0.18),
              0 6px 18px rgba(196, 70, 0, 0.10);
}
.ph7-plan--pro:hover {
  box-shadow: 0 0 0 1px rgba(255, 104, 16, 0.55),
              0 22px 50px rgba(255, 104, 16, 0.24),
              0 6px 18px rgba(196, 70, 0, 0.14);
}
.ph7-plan__ribbon {
  position: absolute; top: -10px; left: 24px;
  background: var(--mm-accent-50, #FFF4EC);
  color: var(--mm-accent-700);
  font-family: var(--mm-font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 104, 16, 0.3);
}
.ph7-plan__name {
  font-family: var(--mm-font-heading);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.012em;
  margin: 0 0 12px;
  color: var(--mm-fg-strong);
}
.ph7-plan__price {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 16px;
}
.ph7-plan__price-figure {
  font-family: var(--mm-font-mono);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--mm-fg-strong);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.ph7-plan__price-unit {
  font-family: var(--mm-font-body);
  font-size: 13px;
  color: var(--mm-fg-muted);
}
.ph7-plan__lede {
  font-family: var(--mm-font-body);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--mm-fg-muted);
  margin: 0 0 24px;
}
.ph7-plan__group {
  font-family: var(--mm-font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mm-fg-strong);
  margin: 0 0 16px;
}
.ph7-plan__features {
  list-style: none; padding: 0; margin: 0 0 28px;
  display: grid; gap: 12px;
}
.ph7-plan__features li {
  display: grid; grid-template-columns: 18px 1fr; gap: 10px;
  font-family: var(--mm-font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--mm-fg-strong);
}
.ph7-plan__check {
  color: var(--mm-success, #1C6E48);
  font-weight: 700;
  line-height: 1.4;
}
.ph7-plan__cta { margin-top: auto; }
.ph7-plan__cta .mm-btn { width: 100%; justify-content: center; }

/* FINAL CTA ----------------------------------------------------- */
.ph7-finalcta {
  background: var(--mm-navy);
  color: var(--mm-fg-inverse, #FFFFFF);
  padding: var(--mm-section-padding-lg, clamp(56px, 8vw, 80px)) 32px;
  text-align: center;
}
.ph7-finalcta__inner { max-width: 760px; margin: 0 auto; }
.ph7-finalcta .ph7-eyebrow-mono {
  color: rgba(255, 255, 255, 0.65);
  display: block;
  margin-bottom: 16px;
}
.ph7-finalcta h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 700;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.022em;
  margin: 0 0 20px;
  color: #FFFFFF;
  text-wrap: balance;
}
.ph7-finalcta h2 i {
  font-style: italic;
  font-weight: 500;
  color: #FFD8B3;
}
.ph7-finalcta__lede {
  font-family: var(--mm-font-body);
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 32px;
}
.ph7-finalcta__ctas {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
}
.ph7-finalcta__ctas .mm-btn--ghost-on-dark {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.30);
  color: #FFFFFF;
}
.ph7-finalcta__ctas .mm-btn--ghost-on-dark:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.50);
}

/* Responsive: collapse the Phase 7 sections to single column ---- */
@media (max-width: 980px) {
  .ph7-chapter__body { grid-template-columns: 1fr; }
}
@media (max-width: 880px) {
  .ph7-proof__inner { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 800px) {
  .ph7-plans { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  /* audit-r3 Polish 24: vertical overrides retired. The
     --mm-section-padding-{lg,md} clamps already converge on 56px (lg) and
     40px (md) at narrow viewports, so explicit padding-top/padding-bottom
     overrides are redundant. Horizontal padding stays per-rule (container
     widths vary). */
  .ph7-proof,
  .ph7-chapter,
  .ph7-coverage,
  .ph7-pricing,
  .ph7-finalcta { padding-left: 20px; padding-right: 20px; }
  .ph7-bcard { padding: 24px 22px; }
  .ph7-plan { padding: 28px 26px 32px; }
  .ph7-coverage__grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .ph7-minitrack__row {
    grid-template-columns: 22px minmax(0, 1.4fr) minmax(0, 0.9fr);
    gap: 12px;
    padding: 12px 14px;
  }
  /* On mobile, hide the progress bar column to keep two readable columns. */
  .ph7-minitrack__row > .ph7-minitrack__bar { display: none; }
  .ph7-rec { padding: 18px 18px; }
}

/* Honour reduced motion: the only animated transitions here are
   tile hover lifts and plan card lifts; disable those entirely. */
@media (prefers-reduced-motion: reduce) {
  .ph7-ptile,
  .ph7-plan { transition: none; }
  .ph7-ptile:hover,
  .ph7-plan:hover { transform: none; }
}

/* ---------- /vs/* and /with/* Compare pages ----------
   audit-codex P3-polish: about/privacy and about/terms now use .mkt-am
   (cream Direction A editorial chrome) per audit-r4 P0-3-8. The comparison
   pages historically followed the same V2 chrome — same mm-doc-page wrapper,
   semantic article body. The substantive comparison data (privacy block,
   full table, essay grid, FAQ, CTA) is preserved; only the page chrome was
   modernised here.

   .mm-compare-page extends .mm-doc-page so all the typography rules
   (h2/h3/p/ul) already apply. The bits that are Compare-specific:
     - two-column essay grid ("when MM / when Other is right")
     - card-style FAQ block
     - section spacing
     - eyebrow accents above each section heading
*/
main.mm-doc-page.mm-compare-page { max-width: 1080px; }

.mm-compare-page .dash-page-header__sub { max-width: 760px; }

.mm-compare-page__lede {
  margin: 0 0 28px;
  color: var(--mm-fg-muted);
  font-size: 17px;
  line-height: 1.6;
  max-width: 760px;
}

.mm-compare-page__section {
  margin: 36px 0 0;
}
.mm-compare-page__section + .mm-compare-page__section { margin-top: 44px; }

.mm-compare-page__section-head {
  margin: 0 0 18px;
}
.mm-compare-page__section-head .mm-eyebrow {
  display: inline-block;
  font: 600 11px/1.3 var(--mm-font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mm-accent);
  margin: 0 0 8px;
}
.mm-compare-page__section-head h2 {
  margin: 0 0 6px;
  font-family: var(--mm-font-display);
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--mm-navy);
  text-wrap: balance;
}
.mm-compare-page__section-head p {
  margin: 0;
  color: var(--mm-fg-muted);
  font-size: 15px;
  line-height: 1.55;
  max-width: 720px;
}

.mm-compare-page__card {
  background: #fff;
  border: 1px solid var(--mm-border);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 1px 0 rgba(15,23,42,0.04);
}
.mm-compare-page__card--padded { padding: 28px; }

.mm-compare-page__essay-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.mm-compare-page__essay {
  background: #fff;
  border: 1px solid var(--mm-border);
  border-radius: 14px;
  padding: 24px 24px 22px;
}
.mm-compare-page__essay--us {
  border-color: var(--mm-accent);
  background: linear-gradient(135deg, #fff, var(--mm-bg-alt));
}
.mm-compare-page__essay h3 {
  margin: 0 0 10px;
  font-family: var(--mm-font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--mm-navy);
}
.mm-compare-page__essay p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--mm-fg);
}

.mm-compare-page__faq details {
  border-top: 1px solid var(--mm-border);
  padding: 14px 4px;
}
.mm-compare-page__faq details:first-of-type { border-top: 0; }
.mm-compare-page__faq summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--mm-navy);
  list-style: none;
  padding-right: 28px;
  position: relative;
}
.mm-compare-page__faq summary::-webkit-details-marker { display: none; }
.mm-compare-page__faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 0;
  color: var(--mm-fg-muted);
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
}
.mm-compare-page__faq details[open] summary::after { content: "−"; }
.mm-compare-page__faq details p {
  margin: 10px 0 0;
  color: var(--mm-fg);
  line-height: 1.6;
  font-size: 15px;
}

.mm-compare-page__cta {
  margin-top: 48px;
  background: var(--mm-navy);
  color: #fff;
  border-radius: 16px;
  padding: 40px 32px;
  text-align: center;
}
.mm-compare-page__cta .mm-eyebrow {
  display: block;
  font: 600 11px/1.3 var(--mm-font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mm-accent);
  margin: 0 0 12px;
}
.mm-compare-page__cta h2 {
  margin: 0 0 10px;
  color: #fff;
  font-family: var(--mm-font-display);
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 700;
}
.mm-compare-page__cta p {
  margin: 0 0 22px;
  color: rgba(255,255,255,0.82);
  font-size: 16px;
  line-height: 1.55;
}
.mm-compare-page__cta-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* dash-page-header__title default size is tuned for dashboard pages; on the
   editorial Compare pages we want a larger, more confident display. */
.mm-compare-page .dash-page-header__title {
  font-size: clamp(28px, 4vw, 42px);
  letter-spacing: -0.01em;
}

@media (max-width: 720px) {
  .mm-compare-page__essay-grid { grid-template-columns: 1fr; }
  .mm-compare-page__cta { padding: 32px 22px; }
  .mm-compare-page__card--padded { padding: 18px; }
}

/* --------------------------------------------------------------------------
   Phase C2 (audit-r2 P0-10): WCAG 2.4.1 skip-link.
   --------------------------------------------------------------------------
   Visually hidden until keyboard focus reveals it. On focus, jumps to the
   <main id="main-content"> landmark, bypassing the nav.
   -------------------------------------------------------------------------- */
.mm-skip-link {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 10000;
}
.mm-skip-link:focus,
.mm-skip-link:focus-visible {
  left: 12px;
  top: 12px;
  width: auto;
  height: auto;
  padding: 12px 18px;
  background: var(--mm-navy, #0E1F3B);
  color: #fff;
  border-radius: 4px;
  font: 600 14px/1.2 var(--mm-font-body, 'DM Sans'), system-ui, sans-serif;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(14, 31, 59, 0.3);
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Phase B3 (audit-r2 P0-14): AdSense slot styling.
   --------------------------------------------------------------------------
   Implements ADSENSE.md G-4 / G-5 / §6.1:
     • G-4 — Visible "Advertisement" label in 11–12 px DM Sans uppercase,
             letter-spacing 0.08em, muted ink.
     • G-5 — Neutral #FAFBFC background + 1 px hairline border
             rgba(14, 31, 59, 0.08).
     • §6.1 — CLS reservation: 100 px horizontal, 280 px rectangle, never 0×0.

   Rendered by mm_render_ad_slot() in lib/ads.php. The label is a ::before
   pseudo so it sits inside the container without needing markup changes.
   -------------------------------------------------------------------------- */
.mm-ad-slot {
  position: relative;
  width: 100%;
  min-height: 100px;
  background: #FAFBFC;
  border: 1px solid rgba(14, 31, 59, 0.08);
  border-radius: 4px;
  padding: 26px 16px 14px;
  margin: 32px 0;
  box-sizing: border-box;
  /* The .adsbygoogle <ins> centres within the reserved frame. */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.mm-ad-slot::before {
  content: "Advertisement";
  position: absolute;
  top: 6px;
  left: 14px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5A6275;
  /* Stop AdSense's injected iframe from sitting on top of the label. */
  z-index: 1;
  pointer-events: none;
}
.mm-ad-slot .adsbygoogle {
  display: block;
  width: 100%;
  min-height: 70px;
}
.mm-ad-slot--horizontal { min-height: 100px; }
.mm-ad-slot--in_content {
  min-height: 250px;
  max-width: 728px;
  margin: 48px auto;
}

/* audit-codex P1-3 close: inert ad-slot placeholder preview. Reserves the
   same CLS budget as a real ad slot so designers + reviewers can verify
   spacing, label legibility, and surrounding rhythm without flipping the
   AdSense approval flag (which would ship live creatives to every visitor).
   Gated to ?mm_ad_preview=1 on staging/local OR admin sessions — see
   mm_ad_slot_preview_enabled() in lib/ads.php. */
.mm-ad-slot--preview {
  /* Hatched diagonal lines visually announce "inert preview, not a real ad" */
  background:
    repeating-linear-gradient(
      45deg,
      var(--mm-bg-alt, #F8FAFC),
      var(--mm-bg-alt, #F8FAFC) 8px,
      var(--mm-paper, #F6F8FB) 8px,
      var(--mm-paper, #F6F8FB) 16px
    );
  display: flex;
  align-items: center;
  justify-content: center;
}
.mm-ad-slot--preview .mm-ad-slot__preview-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  padding: 12px 24px;
  background: var(--mm-bg-surface, #FFFFFF);
  border: 1px dashed var(--mm-border, #E2E7F0);
  border-radius: var(--mm-radius-card, 8px);
}
.mm-ad-slot--preview .mm-ad-slot__preview-label {
  font-family: var(--mm-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mm-fg-strong, #0B1220);
}
.mm-ad-slot--preview .mm-ad-slot__preview-note {
  font-family: var(--mm-font-body);
  font-size: 12px;
  color: var(--mm-fg-muted, #5A6275);
  font-style: italic;
}
.mm-ad-slot--rectangle {
  min-height: 280px;
  aspect-ratio: 6 / 5;
}
@media (max-width: 600px) {
  .mm-ad-slot { padding-top: 28px; margin: 24px 0; }
  .mm-ad-slot::before { font-size: 10px; }
  .mm-ad-slot--in_content { min-height: 250px; }
  .mm-ad-slot--rectangle { aspect-ratio: 5 / 6; min-height: 250px; }
}
@media (prefers-reduced-motion: no-preference) {
  /* Faint background pulse so the reserved slot doesn't look broken
     during AdSense's network fetch. ≤200 ms transition stops once
     the .adsbygoogle iframe loads. */
  .mm-ad-slot { transition: background-color 200ms ease-out; }
}

/* ============================================================
   Public-surface masthead component (.mkt-am)

   Used by: about/*, articles/index, articles/category/<slug>,
   404, login/* (via .mkt-am--auth variant). Article DETAIL pages
   use .mm-article-masthead (cream slab; designed for long-form
   reading with hero photo).

   audit-codex hero-redesign (2026-05-16): reskinned from cream
   broadsheet to navy gradient at editorial Cormorant scale.
   The cream backdrop (#FAF6EF) was too close in tone to the
   page background (#F4F6FA) and barely separated visually.
   The navy gradient (matches the .dash-page-header treatment
   still used on /vs/* and /with/* Compare pages) gives the
   masthead a strong "card-as-object" presence against the
   pure-stone page bg. Editorial scale (Cormorant 40-64px) is
   preserved — the audit-r3 P0-3-8 lesson was about SCALE
   (dashboard chrome was 22-30px), not colour. White ink on
   navy holds WCAG AA at every viewport; orange eyebrow +
   orange-soft italic emphasis carry the brand register.
   ============================================================ */
.mkt-am {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg,
      var(--mm-navy, #0E1F3B) 0%,
      var(--mm-navy-700, #0E1F3B) 100%);
  border-radius: var(--mm-radius-xl, 20px);
  padding: clamp(48px, 7vw, 80px) clamp(28px, 4vw, 44px);
  margin: 0 0 36px;
  color: #FFFFFF;
}
.mkt-am::before {
  /* Top-right orange radial accent — same recipe as .dash-page-header so
     the Compare-page surfaces and the about/legal/login mastheads
     read as siblings rather than two different chrome systems. */
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(700px 300px at 95% -20%,
      rgba(255, 107, 0, 0.18), transparent 60%);
  pointer-events: none;
}
.mkt-am::after {
  /* Soft orange circle bottom-right for editorial depth. */
  content: '';
  position: absolute;
  bottom: -40px; right: -40px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: rgba(255, 107, 0, 0.06);
  pointer-events: none;
}
.mkt-am__inner { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; }
.mkt-am__bc {
  font-family: var(--mm-font-body);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 22px;
}
.mkt-am__bc a { color: rgba(255, 255, 255, 0.62); text-decoration: none; }
.mkt-am__bc a:hover { color: #FFFFFF; text-decoration: underline; }
.mkt-am__bc span[aria-current="page"] { color: #FFFFFF; font-weight: 600; }
.mkt-am__eyebrow {
  display: inline-block;
  font-family: var(--mm-font-mono);
  font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--mm-accent, #FF6810);
  margin: 0 0 14px;
}
.mkt-am__title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 700;
  font-size: clamp(40px, 5.6vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin: 0 0 18px;
  text-wrap: balance;
}
.mkt-am__title i {
  font-style: italic; font-weight: 500;
  color: var(--mm-orange-soft, #FFAA66);
}
.mkt-am__lede {
  font-family: var(--mm-font-body);
  font-size: 17px; line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
  max-width: 640px; margin: 0;
}
.mkt-am__lede a { color: #FFFFFF; text-decoration: underline; }
.mkt-am__byline {
  font-family: var(--mm-font-mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  margin: 18px 0 0;
}
.mkt-am--articles .mkt-am__title { font-size: clamp(48px, 7vw, 72px); }
.mkt-am--404 { text-align: center; }
.mkt-am--auth {
  /* audit-r4 P0-4-2 close (reskinned 2026-05-16): auth surfaces inherit
     the same navy gradient + Cormorant scale, downscaled slightly to
     34-52px and breadcrumb-less because the auth-form layout below
     wants the chrome to read as functional anchor rather than
     narrative gesture. */
  text-align: left;
  padding: clamp(40px, 6vw, 64px) clamp(28px, 4vw, 44px);
  margin: 0 0 32px;
}
.mkt-am--auth .mkt-am__title { font-size: clamp(34px, 4.4vw, 52px); }
.mkt-am--auth .mkt-am__bc { display: none; }
@media (max-width: 720px) {
  .mkt-am {
    padding: clamp(40px, 8vw, 56px) 24px;
    border-radius: var(--mm-radius-lg, 14px);
  }
  .mkt-am__title { font-size: clamp(34px, 7vw, 44px); }
}

/* ============================================================
   404 page — audit-r3 P1-3-I5 close. The "404" code is JetBrains
   Mono 700 (Real Numbers Rule); recent-articles strip turns a
   dead-end into a re-entry.
   ============================================================ */
.mkt-404__code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  font-size: clamp(96px, 14vw, 156px);
  line-height: 1; letter-spacing: -0.04em;
  color: var(--mm-accent);
  font-variant-numeric: tabular-nums;
  margin: 24px 0 8px;
}
.mkt-404__actions {
  display: flex; gap: 12px; justify-content: center; margin: 24px 0 0; flex-wrap: wrap;
}
.mkt-404__main {
  max-width: 720px; margin: 0 auto;
  padding: clamp(40px, 6vw, 56px) 24px clamp(56px, 8vw, 80px);
}
.mkt-404__recent { /* container */ }
.mkt-404__list {
  list-style: none; margin: 16px 0 0; padding: 0;
}
.mkt-404__list li {
  padding: 16px 0;
  border-bottom: 1px solid var(--mm-border-subtle, #EEF1F6);
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.mkt-404__list li:last-child { border-bottom: 0; }
.mkt-404__list a {
  color: var(--mm-fg-strong); text-decoration: none; font-weight: 600;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18px; line-height: 1.3;
}
.mkt-404__list a:hover { color: var(--mm-accent); }
.mkt-404__list time {
  font-family: var(--mm-font-mono, 'JetBrains Mono', monospace);
  font-size: 12px; color: var(--mm-fg-muted);
  white-space: nowrap;
}