/* =====================================================================
   MSM Markets — "Friday Night Lights" brand system for the public Event
   page. Approved handoff: docs/design/msm-brand-v1/ (README.md is the
   token source of truth; design_reference/*.dc.html are visual/copy
   references only, not production code).

   Loaded LAST by public/templates/event-preview-template.php, after
   event-preview.css and every conditional partial stylesheet, so its
   rules win the cascade without needing !important anywhere. This file
   is only ever linked from the Event template -- the Market/VIP/
   registration/confirmation templates are separate standalone HTML
   documents that never load it, so their current look is unaffected.

   Approach: redeclare the shared shape/type tokens (radius, font
   family) in place, since those are purely cosmetic and safe to unify;
   introduce new --fnl-* tokens for color, then apply color per section
   explicitly (this page alternates cream/white/navy bands, unlike the
   single dark-mode palette event-preview.css was originally built
   with) rather than trying to force one repainted "dark" palette to
   serve both light and dark sections.
   ===================================================================== */

:root {
  /* Brand colors (docs/design/msm-brand-v1/README.md) */
  --fnl-navy: #10264b;
  --fnl-navy-deep: #0b1c3a;
  --fnl-crimson: #c8102e;
  --fnl-crimson-dark: #a80e26;
  --fnl-gold: #e3b23c;
  --fnl-sky: #4fa8e0;
  --fnl-cream: #f6f1e7;
  --fnl-cream-line: #e4dcc9;
  --fnl-white: #ffffff;
  --fnl-text-gray: #5b6472;
  --fnl-text-gray-dark: #3a4250;
  --fnl-muted-on-navy: #c7d3e6;
  --fnl-muted-on-navy-2: #8fa0bc;
  --fnl-success: #2e9e5b;
  --fnl-warning: #e8a33d;
  --fnl-error: #c0392b;

  /* Shape + type tokens: reused by every existing selector across
     event-preview.css and its partials, so redeclaring them here is
     enough to flip the whole page to squared 4px controls/cards and
     Montserrat/Roboto without touching those files. */
  --msm-radius-sm: 4px;
  --msm-radius: 4px;
  --msm-radius-lg: 4px;
  --msm-radius-pill: 4px;
  --msm-shadow: 0 4px 14px rgba(16, 38, 75, 0.16);
  --msm-font-sans: "Roboto", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --msm-font-display: "Montserrat", "Roboto", system-ui, sans-serif;

  /* Hero-exact tokens, pulled from getComputedStyle() on the live
     reference (middleschoolmatchup.com/tampa-baseball-v2/), used ONLY
     by the header/countdown/hero/stats-strip rules below -- kept
     separate from --fnl-crimson/--fnl-sky above (which stay the
     documented brand-handoff values) so this recalibration can never
     shift the color of anything below the stats strip, which this pass
     must not touch. */
  --hero-navy: #0b274d;
  --hero-navy-deep: #0a2247;
  --hero-navy-tile: #06182f;
  --hero-crimson: #af1c2e;
  --hero-sky: #2191fb;
  --hero-sky-muted: #7fa0c9;
  --hero-mist: #f2f6fc;
  --hero-muted: #5e6b80;
  --hero-crimson-deep: #8e1624;
  --hero-shadow: 0 14px 40px rgba(11, 39, 77, 0.14);
  --hero-shadow-blue: 0 12px 26px rgba(33, 145, 251, 0.32);
}

/* ---------- Base ---------- */
body.msm-preview {
  background: var(--fnl-cream);
  color: var(--fnl-text-gray-dark);
}

.msm-preview h1,
.msm-preview h2,
.msm-preview h3 {
  font-weight: 900;
  text-transform: uppercase;
  color: var(--fnl-navy);
}

/* No blanket ".msm-preview p" color rule: an element+class selector
   like that is MORE specific than any single-class override below it
   (.msm-closed-notice, .msm-hero-sub, .msm-sponsor-heading, etc.) and
   would win regardless of source order, silently repainting every one
   of them back to this default gray. body.msm-preview's own "color"
   above already supplies the correct default via plain inheritance,
   which carries no specificity to fight with -- found live on Houston
   (closed notice, event-card meta, hero subtitle all unreadable). */

.msm-preview a { color: var(--fnl-crimson); }
.msm-preview a:hover { color: var(--fnl-crimson-dark); }

/* .msm-preview a's higher specificity than .msm-btn-primary alone would
   otherwise win and repaint every link-rendered primary button's text
   (the CTA destination link, each Event Card's "View Event") the same
   crimson as its background -- pin it back explicitly. */
.msm-preview a.msm-btn-primary,
.msm-preview a.msm-btn-primary:hover {
  color: var(--fnl-white);
}

/* ---------- Buttons ---------- */
.msm-btn {
  font-family: var(--msm-font-sans);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.9rem 1.7rem;
}
.msm-btn-primary {
  background: var(--fnl-crimson);
  box-shadow: none;
}
.msm-btn-primary:hover {
  background: var(--fnl-crimson-dark);
}

/* .msm-btn-disabled only ever renders inside the navy CTA section. */
.msm-btn-disabled {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--fnl-muted-on-navy);
}

/* Secondary (New Player Kit) button: context-aware outline. Default
   (light sections) reads navy-on-cream; the navy CTA section below
   overrides it to the reference's white-outline treatment. Function,
   destination, tracking attributes, and copy are untouched -- see
   public/templates/parts/new-player-kit-modal.php. */
.msm-btn-secondary {
  background: transparent;
  border: 1.5px solid var(--fnl-navy);
  color: var(--fnl-navy);
}
.msm-btn-secondary:hover {
  background: var(--fnl-navy);
  border-color: var(--fnl-navy);
  color: var(--fnl-white);
  transform: translateY(-2px);
}

/* ---------- Sticky nav ---------- */
/* Replaces the old always-fixed .msm-topfix header + .msm-countdown-
   strip (formerly pinned to the viewport from page load, matched 1:1
   to a reference design). Fixed from the first pixel, same as before
   -- an earlier revision of this bar hid it until the visitor
   scrolled past the hero, which was a direct misread of the spec and
   has been reverted. .msm-sticky-nav-offset (below) is this bar's
   flow spacer, the same role .msm-offset used to serve: it reserves
   the bar's real rendered height in normal document flow so the hero
   isn't hidden underneath a fixed-position element that occupies no
   space of its own. */
.msm-sticky-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--hero-navy);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.msm-sticky-nav-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 10px 22px;
}
.msm-header-left {
  display: flex;
  align-items: center;
  gap: 13px;
}
/* .msm-market-pill: the mobile dropdown's own city+date header line
   (.msm-sticky-nav-menu-meta below) still uses a solid pill badge --
   that line reads as a metadata block, not a spot beside the logo, so
   the button-vs-label confusion below doesn't apply there. Value comes
   from $market (event-preview-template.php), the same variable every
   other on-page city reference already uses -- never hardcoded, since
   this template runs across every Market. */
.msm-market-pill {
  display: inline-block;
  background: var(--hero-crimson);
  color: var(--fnl-white);
  font-family: var(--msm-font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: 8px;
  padding: 6px 14px;
  white-space: nowrap;
}
/* .msm-sticky-nav-market: the desktop/tablet instance next to the MSM
   logo. Previously shared .msm-market-pill's solid-pill treatment,
   which put it right beside the real REGISTER button/CTA and made it
   read as a second clickable action -- it isn't one, just a location
   label. Now plain text at the same weight/size/letter-spacing tier as
   the nav links to its right (How It Works / Pricing / FAQs), colored
   in the same brand crimson as the REGISTER buttons (--fnl-crimson) so
   it still visually ties to the hero badge below it. */
.msm-sticky-nav-market {
  display: inline-block;
  flex: none;
  color: var(--fnl-crimson);
  font-family: var(--msm-font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
}
.msm-sticky-nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}
/* Mobile-only city+date header line inside the dropdown panel --
   hidden here (desktop/tablet already shows .msm-sticky-nav-market
   inline next to the logo instead); see the 480px block below, where
   the two swap places. The city name inside is the same
   .msm-market-pill badge as the desktop position, not a second flat
   text treatment -- otherwise this mobile-only line would be the one
   place the city name goes back to reading as near-invisible muted
   text. */
.msm-sticky-nav-menu-meta {
  display: none;
}
.msm-sticky-nav-menu-meta .msm-market-pill {
  margin-right: 6px;
}
.msm-sticky-nav-links a {
  font-family: var(--msm-font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--fnl-white);
  text-decoration: none;
  opacity: 0.85;
}
.msm-sticky-nav-links a:hover { opacity: 1; }
.msm-sticky-nav-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
}
/* background: --fnl-crimson, not --hero-crimson -- this sticky-nav
   REGISTER button and the hero/Packages/Final CTA REGISTER buttons
   were rendering two visibly different reds (confirmed live:
   #af1c2e vs #c8102e) despite being the same action; unified to the
   latter (the plugin's default primary-button color, used by 3 of the
   4 REGISTER instances on the page) per explicit direction. */
.msm-header-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--fnl-crimson);
  color: var(--fnl-white);
  font-family: var(--msm-font-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.5px;
  padding: 10px 18px;
  border-radius: 8px;
  text-transform: uppercase;
  flex: none;
}

/* TEMP: title-sponsor / Branded Header Logo resolution is bypassed in
   event-preview-template.php while the hero redesign is finalized (see
   the comment there) -- this page currently always renders a plain
   <img class="msm-brand-mark-img"> of the standard MSM mark instead of
   requiring header-logo.php, so .msm-branded-header-logo below is
   presently unused on this page but left in place for when that's
   restored. */
.msm-brand-mark-img {
  display: block;
  height: 48px;
  width: auto;
}

.msm-branded-header-logo { border-radius: 0; }

/* Mobile hamburger toggle -- hidden by default, shown only under the
   wireframe's own 480px cutoff (see the mobile block below), where it
   swaps places with .msm-sticky-nav-links inline. */
.msm-sticky-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}
.msm-sticky-nav-toggle-bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--fnl-white);
  border-radius: 1px;
}

/* Flow spacer reserving the fixed bar's real rendered height -- 10px
   top/bottom padding + the 48px logo (the tallest item in the row,
   taller than the market text or the Register button) + the 1px
   border-bottom, unchanged from the value .msm-offset used before
   this bar was renamed. */
.msm-sticky-nav-offset {
  height: 69px;
}

/* ---------- Hero ---------- */
/* Content-driven height (no artificial min-height) -- the reference
   itself doesn't force hero height either; generous type/spacing below
   is what gives it presence. The background composite is set inline by
   event-preview-template.php from $data['hero_image_url'] -- the
   resolved Event -> Program -> Global image (includes/class-hero-
   image-resolver.php), never a shared/stock fallback baked in here. An
   Event where none of the 3 tiers resolves gets .msm-hero-no-photo's
   intentional photo-free gradient instead (only reachable once a
   Global default is configured -- see admin/class-admin-menu.php's
   Settings screen). */
.msm-hero {
  /* Zeroes out event-preview.css's own ".msm-hero { padding: clamp(3rem,
     8vw, 5.5rem) 0 ... }" -- a leftover from the pre-brand hero design
     that was never removed once .msm-hero .msm-wrap below got its own
     dedicated top padding, so the two were silently stacking (measured
     live: 48px from this rule, on top of .msm-wrap's own, on mobile --
     confirmed via getBoundingClientRect, not assumed from the CSS
     alone; 2026-09-02 feedback). .msm-wrap's own padding-top is now the
     only source of top spacing in the hero, at every width. */
  padding-top: 0;
  position: relative;
  overflow: hidden;
  color: var(--fnl-white);
}
.msm-hero-no-photo {
  background-image: linear-gradient(180deg, var(--hero-navy) 0%, var(--hero-navy-deep) 100%);
}
/* Subtle diagonal grid texture fading toward the bottom -- reference's
   ".hero::after". Cosmetic only; pointer-events:none so it never blocks
   the CTAs painted above it (same fix the reference itself needed). */
.msm-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image: linear-gradient(transparent 0 39px, rgba(255, 255, 255, 0.03) 39px 40px),
    linear-gradient(90deg, transparent 0 39px, rgba(255, 255, 255, 0.03) 39px 40px);
  background-size: 40px 40px;
  mask-image: linear-gradient(180deg, #000, transparent 80%);
  pointer-events: none;
}
.msm-hero .msm-wrap {
  position: relative;
  z-index: 3;
  width: min(100% - 2.5rem, 1120px);
  max-width: 1120px;
  /* Bottom padding tightened from 56px now that the CTA row is the last
     thing in the hero (the When/Where badges and the trust line below
     the CTAs were both dropped -- redundant with the "When"/"Where"
     values already in the new small meta line, and with the stats
     strip's own player/review counts directly below this section).
     Top padding tightened from 34px to 16px (2026-09-02 feedback) now
     that the Presenting Sponsor logo/pairing is the first thing in this
     wrap -- 34px was tuned back when the eyebrow line was the first
     element and read as too much empty space above the new logo row,
     pushing the page fold lower for no benefit. */
  padding: 16px 22px 40px;
  text-align: center;
}

/* ".msm-hero .msm-hero-title" (2 classes), not just ".msm-hero-title"
   (1 class): the shared event-preview.css's ".msm-preview h1,h2,h3"
   (1 class + 1 element) is otherwise MORE specific and silently wins
   the margin fight -- its own "margin: 0 0 0.5em" computes to a 49px
   bottom gap at this 98px font-size, not the intended 4px. Same root
   cause on every other hero h1/p override below. Found live via a
   user-annotated screenshot. */
.msm-hero .msm-hero-title {
  color: var(--fnl-white);
  font-weight: 900;
  font-size: clamp(44px, 8.5vw, 98px);
  letter-spacing: 0.5px;
  margin: 18px 0 4px;
  line-height: 1.02;
  text-shadow: 0 4px 26px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.5);
  /* Overrides event-preview.css's ".msm-hero-title { text-transform:
     uppercase }" -- invisible while this held "DALLAS" (already
     all-caps as a city name), but the new benefit headline needs real
     title case to match the approved reference image exactly. */
  text-transform: none;
}
.msm-hero-title .msm-grad {
  background: none;
  -webkit-text-fill-color: unset;
  color: var(--fnl-white);
  display: inline-block;
  border-bottom: 6px solid var(--hero-crimson);
  padding-bottom: 4px;
}

/* "Middle School {Program} Championships" -- reference's ".tagline".
   ".msm-hero .msm-hero-program-sub" (2 classes) for the same reason as
   .msm-hero-title above: this is a <p>, so the shared ".msm-preview p
   { margin: 0 0 1rem }" would otherwise win and both drop the intended
   margin-top to 0 and add an unwanted 16px margin-bottom. */
.msm-hero .msm-hero-program-sub {
  margin: 10px 0 0;
  font-family: var(--msm-font-display);
  font-weight: 700;
  font-size: clamp(15px, 2.4vw, 21px);
  color: #7dc0ff;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

/* Presenting Sponsor (dev spec, 2026-09-01; loosened + tightened
   2026-09-02) -- both graphic states sit immediately before
   .msm-hero-program-sub below, the "Presented by" line immediately
   after it. Own classes throughout, deliberately distinct from the nav
   bar's .msm-branded-header-logo / .msm-brand-mark-img (same source
   images, different context -- this sits over a photo background at a
   small credit-mark scale, not a flat navy bar), so sizing one can
   never affect the other. Rendering logic (which of the two graphic
   states, if either, shows) lives in event-preview-template.php; both
   are sized to the same small ~40px scale so swapping between them
   (depending on whether a Market has a custom lockup uploaded) doesn't
   visibly jump in weight. */
.msm-hero-presenting-logo {
  display: inline-block;
  height: 44px;
  width: auto;
  margin: 0 0 10px;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
}

/* Fallback pairing (MSM mark + Title Sponsor's own logo, side by side,
   no card/background around either -- 2026-09-02 feedback) -- shown
   instead of .msm-hero-presenting-logo above whenever no custom
   Branded Header Logo lockup is uploaded but a Title Sponsor with its
   own logo is set. Deliberately non-responsive: no @media adjustment
   shrinks or stacks this row at any width, per direct instruction --
   flex-shrink:0 on both halves plus the sponsor image's own min-height
   are a defensive floor against the row ever being squeezed smaller by
   an unrelated layout change, not a real design target (decent-quality
   sponsor logos going in means this should rarely if ever actually
   bind). */
.msm-hero-presenting-pairing {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 10px;
}
.msm-hero-presenting-pairing-mark {
  display: block;
  height: 36px;
  width: auto;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
}
.msm-hero-presenting-pairing-divider {
  display: block;
  width: 1px;
  height: 28px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.4);
}
/* No card/background here (2026-09-02 feedback: the bottom Sponsors
   section's white-card trick read as an unwanted box in the hero) --
   just the sponsor's own logo file directly, sized to match
   .msm-hero-presenting-pairing-mark exactly (36px tall) so the two read
   as one balanced pairing. Same defensive drop-shadow the mark already
   has, doing double duty here: it's what keeps a light or transparent
   sponsor logo legible against the photo now that there's no white
   card underneath it. min-height is a defensive floor only (matches
   the min-size-floor convention .msm-hero-presenting-pairing's own
   comment already establishes for this row) -- normal rendering is
   always the full 36px. */
.msm-hero-presenting-pairing-sponsor {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.msm-hero-presenting-pairing-sponsor-img {
  display: block;
  height: 36px;
  min-height: 20px;
  width: auto;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
}

/* ".msm-hero .msm-hero-presenting-sponsor" (2 classes), same reason as
   .msm-hero-program-sub above: this is a <p>, and the shared
   ".msm-preview p { margin: 0 0 1rem }" would otherwise win. Small and
   muted relative to .msm-hero-program-sub's bright blue eyebrow --
   this is a supporting credit line, not a second headline. Margin-top
   went 6px -> 2px -> -2px across two rounds of feedback, each time
   confirmed against the rendered result rather than trusting the CSS
   value alone -- the eyebrow's own uppercase, letter-spaced line-height
   keeps eating more of the visual gap than the raw margin number
   implies, even at 2px. font-family explicitly set to this stylesheet's
   display font (was inheriting the body font by omission, which read
   as inconsistent with .msm-hero-program-sub right above it). */
.msm-hero .msm-hero-presenting-sponsor {
  margin: -2px 0 0;
  font-family: var(--msm-font-display);
  font-size: clamp(12px, 1.6vw, 14px);
  font-weight: 600;
  letter-spacing: 0.4px;
  color: rgba(255, 255, 255, 0.72);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

/* "{MARKET} · {When}" badge -- a dark glass pill floating over the hero
   photo, city name and date at deliberately different weights/sizes
   inside it (the flat single-weight line this replaces let the city
   name get lost against the date). inline-flex + the hero's own
   text-align:center (event-preview.css) is what centers this as one
   unit.

   align-items was originally "baseline" (aligning the two spans on a
   shared text baseline, stat+label style), but that reads badly here:
   .msm-hero-meta-city sets line-height:1 while .msm-hero-meta-date
   doesn't (inherits a taller line-box), so their ascent/descent don't
   match around the shared baseline -- confirmed live, the city text
   sat ~11px from the pill's top edge but ~17px from its bottom edge
   (padding itself is a symmetric 10px/10px). "center" instead centers
   each span's own line box within the row regardless of their
   line-height mismatch, which measured out to a near-exact ~13px/13px
   split live. */
.msm-hero .msm-hero-meta-mini {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 0;
  background: rgba(5, 14, 28, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 10px 24px;
}
/* color: --fnl-crimson, not a hardcoded hex -- pulled from the actual
   REGISTER buttons (getComputedStyle confirmed flat rgb(200,16,46) on
   3 of 4 REGISTER instances on the page, no gradient), replacing a
   brighter/more coral #ff2d4e that didn't match anything else on the
   site. font-size gap to .msm-hero-meta-date also tightened (was
   24-32px vs 16-22px, ~1.45-1.5x) -- city should still lead, just not
   by as much; new range keeps a ~1.22-1.27x ratio instead. */
.msm-hero-meta-city {
  font-family: var(--msm-font-display);
  font-weight: 900;
  font-size: clamp(22px, 3.6vw, 28px);
  line-height: 1;
  color: var(--fnl-crimson);
  letter-spacing: 0.2px;
  text-transform: uppercase;
}
.msm-hero-meta-date {
  font-family: var(--msm-font-display);
  font-weight: 700;
  font-size: clamp(18px, 2.6vw, 22px);
  color: var(--fnl-white);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* Both <p> tags -- same ".msm-hero" rescope as above, for the same
   ".msm-preview p { margin: 0 0 1rem }" reason. .msm-hero-copy's loss
   was the more visible bug: its "margin: 18px auto 0" was being fully
   replaced, including the "auto" that centers the block -- with it
   gone the paragraph sat flush-left instead of centered (not a
   text-align problem; the box itself wasn't centered). */
.msm-hero .msm-hero-heading {
  margin: 14px 0 0;
  font-family: var(--msm-font-display);
  font-weight: 800;
  color: var(--fnl-white);
  font-size: clamp(16px, 2.4vw, 20px);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65);
}
.msm-hero .msm-hero-copy {
  max-width: 60ch;
  margin: 18px auto 0;
  color: #eaf1fb;
  font-size: clamp(15px, 2vw, 17.5px);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
}

/* Trust stat row (14 yrs / 72 NPS / :53 sec), between the subhead and
   the CTA buttons. Deliberately NOT named .msm-hero-stat* -- that's
   already the crimson stats-strip band directly below the hero
   (.msm-hero-stats-strip), a different element with different sizing;
   reusing its class names here would bleed that styling into this one
   or vice versa. Divider pattern mirrors that band's own
   ".msm-hero-stat + .msm-hero-stat" rule, just scoped to this new
   class and sized for sitting directly on the photo instead of a solid
   crimson background. */
.msm-hero-trust-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 10px;
  margin: 24px 0 0;
}
.msm-hero-trust-stat {
  text-align: center;
  padding: 0 20px;
}
.msm-hero-trust-stat + .msm-hero-trust-stat {
  border-left: 1px solid rgba(255, 255, 255, 0.22);
}
.msm-hero-trust-num {
  display: block;
  font-family: var(--msm-font-display);
  font-weight: 900;
  font-size: clamp(22px, 3.2vw, 28px);
  color: var(--fnl-white);
  line-height: 1.1;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}
.msm-hero-trust-label {
  display: block;
  margin-top: 2px;
  font-family: var(--msm-font-display);
  font-weight: 700;
  font-size: clamp(10px, 1.4vw, 12px);
  color: var(--hero-sky-muted);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
@media (max-width: 620px) {
  .msm-hero-trust-stat + .msm-hero-trust-stat { border-left: none; }
  .msm-hero-trust-stat { padding: 0 14px; }
}

/* Primary + New Player Kit CTAs rendered directly in the hero (same
   phase-resolution/destination logic and the same #msm-npk-modal
   trigger reused by the How It Works and Final CTA sections further
   down the page -- see event-preview-template.php). */
.msm-hero-ctas {
  display: flex;
  gap: 13px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 28px;
}
.msm-hero-ctas .msm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--msm-font-display);
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  font-size: 15px;
  padding: 16px 28px;
  border-radius: 10px;
  transition: transform 0.12s, box-shadow 0.12s, background 0.12s;
}
.msm-hero-ctas .msm-btn:hover { transform: translateY(-2px); }
.msm-hero-ctas .msm-btn-primary { box-shadow: 0 12px 26px rgba(175, 28, 46, 0.34); }
.msm-hero-ctas .msm-btn-secondary {
  background: transparent;
  color: var(--fnl-white);
  border: 2px solid rgba(255, 255, 255, 0.55);
}
.msm-hero-ctas .msm-btn-secondary:hover {
  border-color: var(--fnl-white);
  background: rgba(255, 255, 255, 0.08);
}

/* Registration-closes-in urgency dot (dev spec, 2026-09-02) -- sits in
   front of .msm-hero-reg-note's existing text, which is left completely
   unstyled here on purpose (inherits ambient text color, same as
   before this dot existed). Only the dot's color changes per stage;
   the pulse itself never stops once the dot exists, same fade-only
   technique .msm-live-dot already uses elsewhere on this page. */
.msm-hero-reg-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 0.5em;
  border-radius: 50%;
  vertical-align: middle;
  animation: msm-hero-reg-dot-pulse 1.6s ease-in-out infinite;
}
.msm-hero-reg-dot--yellow { background: var(--fnl-warning); }
.msm-hero-reg-dot--red { background: var(--fnl-error); }
@keyframes msm-hero-reg-dot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}
@media (prefers-reduced-motion: reduce) {
  .msm-hero-reg-dot { animation: none; }
}

/* ---------- Stats strip ---------- */
/* Separate full-width crimson band directly below the photo hero,
   reference's ".stats". Hardcoded, approved, site-wide MSM figures for
   this pass -- not tied to any Market/Event data field. */
.msm-hero-stats-strip {
  background: var(--hero-crimson);
}
.msm-hero-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 22px;
}
.msm-hero-stat {
  text-align: center;
  padding: 6px 8px;
}
.msm-hero-stat + .msm-hero-stat {
  border-left: 1px solid rgba(255, 255, 255, 0.22);
}
.msm-hero-stat-num {
  display: block;
  font-family: var(--msm-font-display);
  font-weight: 900;
  font-size: clamp(26px, 4.4vw, 42px);
  color: var(--fnl-white);
  line-height: 1;
}
.msm-hero-stat-label {
  display: block;
  font-family: var(--msm-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-size: 11.5px;
  color: var(--fnl-white);
  opacity: 0.92;
  margin-top: 5px;
}

/* Reference's own breakpoint (680px), used consistently for every
   hero-region rule below so there's no mismatch zone between two
   different cutoffs. */
@media (max-width: 680px) {
  /* Side inset tightened (2026-09-02 feedback: measured live at 84px
     total on a 390px phone -- width:min(...)'s own 2.5rem/40px plus
     22px horizontal padding on each side -- confirmed as the direct
     cause of the eyebrow wrapping to 3 lines and leaving the meta pill
     without enough room to stay on one line below). Down to 48px total
     (1.25rem/20px + 14px each side), freeing real width back to the
     text without touching the desktop-width formula at all (this whole
     block only applies at 680px and under). */
  .msm-hero .msm-wrap {
    width: min(100% - 1.25rem, 1120px);
    padding: 14px 14px 34px;
  }
  /* Plus-sign divider grid: vertical line between columns (existing
     border-left rule above), horizontal line between the two rows,
     matching the reference's exact nth-child pattern -- not just
     spacing, since a plain gap reads differently than these divider
     lines. */
  .msm-hero-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .msm-hero-stat {
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    padding: 15px 6px;
  }
  .msm-hero-stat:nth-child(1),
  .msm-hero-stat:nth-child(2) {
    border-top: none;
  }
  .msm-hero-stat:nth-child(3) {
    border-left: none;
  }

  /* "{MARKET} · {When}" pill (2026-09-02 feedback): was wrapping the
     date onto a second line inside the pill on narrow phones, ballooning
     it vertically instead of staying one horizontal capsule. white-space:
     nowrap on the parent (inherited by both spans) stops that outright;
     tighter padding and a lower font-size floor than the desktop clamp()
     give it enough room to actually fit at this width without nowrap
     forcing it wider than the wrap and overflowing sideways. */
  .msm-hero .msm-hero-meta-mini {
    white-space: nowrap;
    padding: 8px 16px;
  }
  .msm-hero-meta-city { font-size: 19px; }
  .msm-hero-meta-date { font-size: 15px; }

  /* Trust row (14 yrs / 72 NPS / :53 sec): the base rule's flex-wrap:
     wrap (needed at in-between tablet widths) was letting this drop to
     multiple rows on narrow phones -- forced back to one row here, with
     tighter stat padding and a lower label-font floor than the desktop
     clamp() (the longest label, "Higher Than Disney", is what actually
     determines whether 3 stats fit on one line at this width) so nowrap
     doesn't just push the row wider than the screen instead of wrapping
     it. */
  .msm-hero-trust-row { flex-wrap: nowrap; }
  .msm-hero-trust-stat { padding: 0 8px; }
  .msm-hero-trust-label { font-size: 9px; }

  /* Headline (dev spec, 2026-09-04): the clamp(44px, 8.5vw, 98px) above
     doesn't clear its own 44px floor until viewport width passes ~518px,
     so every phone renders this full-sentence headline at a flat 44px
     regardless of how narrow the screen actually is -- forcing several
     wrapped lines before any supporting copy or CTAs are visible. An
     explicit override here (not a lower clamp floor) leaves the clamp's
     own viewport-based scaling between ~518px and 680px untouched and
     only affects true phone widths, same "clamp for tablet/desktop, an
     explicit value for mobile" pattern already used for every other
     hero element in this block. */
  .msm-hero .msm-hero-title { font-size: 34px; }
}

/* Sticky nav's own breakpoint: the wireframe specifies this collapse
   at 480px specifically (not the 680px cutoff used above), so it gets
   its own query rather than folding into the block above. Below this
   width the 3 text links leave the bar's main row and become a
   full-width dropdown panel toggled by the hamburger button; the
   Register button never collapses, at any width -- the logo now does
   (dev spec, 2026-09-04), see .msm-brand-mark-img's override below. */
@media (max-width: 480px) {
  /* Logo shrink (dev spec, 2026-09-04): a stylized diagonal logotype
     with swash strokes, not a flat wordmark, so it reads as visually
     heavy at small phone widths next to the plain Register button and
     hamburger icon beside it -- worse than a one-off oversized element
     since this bar is position: fixed and stays on screen through the
     entire scroll. ~25% down from the 48px desktop/tablet size in
     .msm-brand-mark-img above, still clearly legible as the brand mark.
     .msm-sticky-nav-inner's padding gets a touch more room to match,
     since the bar's tallest element just got smaller. */
  .msm-brand-mark-img {
    height: 36px;
  }
  .msm-sticky-nav-inner {
    padding: 13px 22px;
  }
  /* .msm-sticky-nav-offset, recalculated for this breakpoint: NOT
     13+13+36+1=63px -- at 48px the logo was the row's tallest element
     (per the base rule's own comment above), but .msm-header-cta (the
     Register button, unchanged at every width, per spec) renders at
     ~43px tall, so once the logo drops to 36px the button becomes the
     tallest item instead and actually governs the row's height.
     Confirmed live via getBoundingClientRect (69.85px real bar height
     at 375px width, not the 63px a logo-only calculation would predict)
     -- 63px would leave the hero clipped ~7px under the fixed bar. 70px
     (13+13+43+1, the button now being tallest) matches the measured
     real height with a hair of margin. */
  .msm-sticky-nav-offset {
    height: 70px;
  }
  /* Below this width the city name moves out of the main bar row (a
     long one -- Jacksonville, Colorado Springs -- risks colliding
     with the Register button next to it) and into a header line at
     the top of the opened dropdown instead. */
  .msm-sticky-nav-market {
    display: none;
  }
  .msm-sticky-nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--hero-navy);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
  }
  .msm-sticky-nav.is-menu-open .msm-sticky-nav-links {
    display: flex;
  }
  /* Governs only the trailing "-- Nov 14-15, 2026" text now -- the
     nested .msm-market-pill city badge (its own explicit color/weight/
     size) is unaffected by this block's declarations regardless of
     specificity, since a child's own properties always win over an
     inherited value from its parent. */
  .msm-sticky-nav-menu-meta {
    display: block;
    width: 100%;
    padding: 12px 22px;
    font-family: var(--msm-font-display);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--hero-sky-muted);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .msm-sticky-nav-links a {
    width: 100%;
    padding: 14px 22px;
    opacity: 1;
  }
  .msm-sticky-nav-links a + a {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .msm-sticky-nav-toggle {
    display: flex;
  }
}

/* Anchor-jump targets: offset so the fixed sticky nav doesn't cover
   each section's heading when landed on via #how-it-works / #pricing
   / #faqs. 78px covers the bar's own ~69px rendered height (10px+10px
   padding + 48px logo, unchanged from the old .msm-offset value it
   replaced) plus a small buffer. html's smooth scroll-behavior is
   scoped to this page only -- this file only loads on the Event
   template, never sitewide. */
html { scroll-behavior: smooth; }
#how-it-works,
#pricing,
#faqs {
  scroll-margin-top: 78px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- Video / Idea / How It Works ---------- */
/* Static brand-education sections, same on every Event page --
   structure and values copied directly from the reference's own
   ".video"/".isnt"/".how" sections (supplied directly, not
   reconstructed). Shared eyebrow/heading/subcopy classes are scoped
   per-section via a descendant selector (2 classes) rather than a
   bare ".msm-section-eyebrow" (1 class) alone, for the same reason as
   every hero text fix above: the shared event-preview.css's
   ".msm-preview h1,h2,h3"/"p" rules are otherwise more specific and
   would win the margin/color fight. */
.msm-video-section,
.msm-idea-section,
.msm-how-section {
  padding: 68px 0;
}
/* Same 1120px-wrap override as .msm-hero .msm-wrap: the shared
   .msm-wrap class (event-preview.css, also used by the Market/VIP/
   registration/confirmation templates) caps at 860px -- scoped here so
   only these 3 new sections widen to match the reference, without
   touching that shared class or any other Event-page section. */
.msm-video-section .msm-wrap,
.msm-idea-section .msm-wrap,
.msm-how-section .msm-wrap {
  width: min(100% - 2.5rem, 1120px);
  max-width: 1120px;
}
.msm-video-section .msm-section-eyebrow,
.msm-idea-section .msm-section-eyebrow,
.msm-how-section .msm-section-eyebrow {
  margin: 0;
  font-family: var(--msm-font-display);
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--hero-sky);
  text-align: center;
}
.msm-video-section .msm-section-heading,
.msm-idea-section .msm-section-heading,
.msm-how-section .msm-section-heading {
  margin: 9px 0 0;
  font-family: var(--msm-font-display);
  font-size: clamp(28px, 4.6vw, 46px);
  font-weight: 800;
  text-align: center;
  color: var(--hero-navy);
  text-transform: none;
}
.msm-video-section .msm-section-subcopy,
.msm-idea-section .msm-section-subcopy {
  margin: 14px auto 0;
  max-width: 62ch;
  text-align: center;
  color: var(--hero-muted);
  font-size: 16.5px;
}

.msm-video-section { background: var(--hero-mist); }
.msm-vstage { max-width: 880px; margin: 38px auto 0; }
.msm-vframe {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--hero-shadow);
  border: 3px solid var(--fnl-white);
  background: #000;
}
.msm-vframe iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.msm-idea-section { background: var(--fnl-white); }
.msm-idea-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 42px;
}
.msm-idea-card {
  background: var(--fnl-white);
  border-radius: 16px;
  padding: 30px 28px;
  box-shadow: var(--hero-shadow);
  border-top: 6px solid var(--hero-sky);
}
.msm-idea-card-no { border-top-color: var(--hero-crimson); }
.msm-idea-card h3 {
  margin: 0;
  font-size: 24px;
  color: var(--hero-navy);
  display: flex;
  align-items: center;
  gap: 10px;
}
.msm-idea-card ul {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.msm-idea-card li {
  display: flex;
  gap: 11px;
  font-size: 15.5px;
  color: #33425c;
}
.msm-idea-ic { flex: none; font-weight: 800; color: var(--hero-sky); }
.msm-idea-card-no .msm-idea-ic { color: var(--hero-crimson); }

.msm-how-section { background: var(--hero-navy); color: var(--fnl-white); }
.msm-how-section .msm-section-heading { color: var(--fnl-white); }
.msm-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 48px;
}
.msm-step {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 28px 24px;
  position: relative;
}
.msm-step-base {
  position: absolute;
  top: -18px;
  left: 24px;
  width: 46px;
  height: 46px;
  background: var(--hero-sky);
  color: var(--fnl-white);
  font-family: var(--msm-font-display);
  font-weight: 900;
  font-size: 22px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--hero-shadow-blue);
}
.msm-step h3 {
  margin: 16px 0 9px;
  font-size: 20px;
  color: var(--hero-sky);
}
.msm-step p { margin: 0; color: #c6d3e6; font-size: 15.5px; }
.msm-how-cta-row { display: flex; justify-content: center; margin-top: 32px; }
.msm-how-cta-row .msm-btn {
  font-family: var(--msm-font-display);
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  font-size: 15px;
  padding: 16px 28px;
  border-radius: 10px;
}

/* Video rewatch trigger + optional Coach Sign-Up link (0.26.0) -- sits
   between the 3-step grid and the CTA button above. The trigger is a
   real <button> (opens a lightbox, not a navigation), styled as plain
   underlined text rather than a second .msm-btn so it doesn't compete
   with the primary CTA directly below it. The bullet separator is part
   of the Coach link's own conditional markup (event-preview-template.php),
   never a static character here, so it can't render as a dangling dot
   when that link is empty. .msm-how-link-btn is scoped as a 2-class
   descendant selector (.msm-how-links-row .msm-how-link-btn), not the
   bare class alone: the Coach link is a real <a>, and the shared
   ".msm-preview a" rule above (specificity 0,1,1) would otherwise beat
   a single-class selector (0,1,0) and silently repaint it crimson --
   confirmed live, same specificity trap as .msm-schedule-link below. */
.msm-how-links-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
  font-size: 14.5px;
}
.msm-how-links-row .msm-how-link-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 700;
  color: var(--hero-sky);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.msm-how-links-row .msm-how-link-btn:hover { color: var(--fnl-white); }
.msm-how-links-row .msm-how-link-btn:focus-visible { outline: 2px solid var(--hero-sky); outline-offset: 3px; }
.msm-how-link-sep { color: rgba(255, 255, 255, 0.4); }

@media (max-width: 920px) {
  .msm-idea-grid {
    grid-template-columns: 1fr;
  }
  /* 4 steps balance better as a 2x2 grid at tablet widths than a single
     stacked column -- .msm-idea-grid (2 cards) still goes straight to
     1 column here, unchanged. */
  .msm-steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 680px) {
  .msm-steps-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Generic light sections ---------- */
/* .msm-card's own rules were removed here -- the standalone Venue
   section (the only place this Event template used that class) was
   removed per explicit request; .msm-section itself stays, still used
   by the roster section and the private-preview-only debug block. */
.msm-section { color: var(--fnl-text-gray-dark); }

/* Schedule link (0.26.0) -- its own independent section, immediately
   before the roster section, gated on $data['schedule_url'] alone (never
   nested inside the roster's own $data['roster_show'] check), so the two
   can appear in any combination. Same link treatment as .msm-rev-more-link
   (sky blue, no underline until hover) for visual consistency with the
   page's other plain-text-link CTAs -- and, like that rule, scoped as a
   2-class descendant selector (.msm-schedule-link-section .msm-schedule-link)
   rather than the bare class alone: the shared ".msm-preview a" rule
   above has specificity (0,1,1), which beats a single-class selector
   (0,1,0) and would otherwise silently repaint this link crimson --
   confirmed live, the same specificity trap documented repeatedly
   elsewhere in this file (see the 0.14.1/0.24.1 changelog entries). */
.msm-schedule-link-section { padding: 12px 0 0; }
.msm-schedule-link-section .msm-schedule-link {
  display: block;
  text-align: center;
  color: var(--hero-sky);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
}
.msm-schedule-link-section .msm-schedule-link:hover { text-decoration: underline; }

/* Photo Gallery -- static grid, no slider, directly before Packages/
   Pricing (public/templates/event-preview-template.php only renders
   this section at all when $data['gallery_image_urls'] resolved to
   something; see includes/class-gallery-resolver.php). 4 columns x 2
   rows down to the same 680px cutoff used elsewhere in this file, 2
   columns x 4 rows below it. Cells are forced square via aspect-ratio
   + object-fit:cover so mixed portrait/landscape/square source photos
   all sit uniform without any manual cropping on upload. */
.msm-gallery-section { background: var(--fnl-white); padding: 68px 0; }
/* Same 1120px-wrap override as .msm-how-section .msm-wrap above: the
   shared .msm-wrap class caps at 860px via a width:min(...) rule, so
   max-width alone wouldn't actually widen anything -- width itself
   has to be overridden too. */
.msm-gallery-section .msm-wrap {
  width: min(100% - 2.5rem, 1120px);
  max-width: 1120px;
}
.msm-gallery-section .msm-section-heading {
  margin: 0 0 32px;
  font-family: var(--msm-font-display);
  font-size: clamp(28px, 4.6vw, 46px);
  font-weight: 800;
  text-align: center;
  color: var(--hero-navy);
  text-transform: none;
}
.msm-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.msm-gallery-cell {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--msm-radius-sm);
  background: var(--fnl-cream);
}
.msm-gallery-cell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 680px) {
  .msm-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Footer ---------- */
.msm-footer {
  background: var(--hero-navy-tile);
  color: var(--fnl-muted-on-navy-2);
  padding: 36px 22px;
  text-align: center;
}
.msm-footer-tag {
  font-family: var(--msm-font-display);
  font-weight: 900;
  color: var(--hero-sky);
  font-size: 20px;
  letter-spacing: 1px;
}
.msm-footer-links { margin-top: 12px; font-size: 13.5px; }
.msm-footer-links a { color: var(--fnl-muted-on-navy); }
.msm-footer .msm-footer-small { margin-top: 14px; font-size: 12px; color: var(--fnl-muted-on-navy-2); }

/* =====================================================================
   Packages (public/templates/parts/event-packages.php) -- PHP/data
   logic untouched (already correct: real Package Set name/price/items/
   image, is_most_popular flag, no selection button ever rendered).
   Values below copied directly from the reference's own ".pk"/".pk-
   card" rules. Per explicit direction: no "Choose Package" button is
   added (the template already never renders one); grid is a responsive
   auto-fit rather than the reference's fixed 3-column, since a real
   Package Set can hold any number of packages, not always exactly 3.
   ===================================================================== */
.msm-packages-section { border-top: none; background: var(--hero-mist); padding: 68px 0; }
.msm-packages-section .msm-wrap {
  width: min(100% - 2.5rem, 1120px);
  max-width: 1120px;
}
/* ".msm-packages-section .msm-packages-*" (2 classes) for the same
   reason as every hero text fix above: these are <p>/<h2> tags, so the
   shared event-preview.css's ".msm-preview h1,h2,h3"/"p" rules (1
   class + 1 element) are otherwise more specific and win the margin
   fight. */
.msm-packages-section .msm-packages-eyebrow {
  margin: 0;
  font-family: var(--msm-font-display);
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--hero-sky);
  text-align: center;
}
.msm-packages-section .msm-packages-headline {
  margin: 9px 0 0;
  font-family: var(--msm-font-display);
  font-size: clamp(28px, 4.6vw, 46px);
  font-weight: 800;
  color: var(--hero-navy);
  text-align: center;
}
.msm-packages-section .msm-packages-intro {
  margin: 14px auto 0;
  max-width: 62ch;
  color: var(--hero-muted);
  font-size: 16.5px;
  text-align: center;
}
.msm-packages-section .msm-packages-empty { color: var(--hero-muted); }
.msm-packages-warning {
  background: rgba(175, 28, 46, 0.06);
  border-color: rgba(175, 28, 46, 0.35);
  color: var(--hero-navy);
}

.msm-packages-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  margin-top: 46px;
  align-items: stretch;
}

/* Card is 3 vertical zones -- a colored top band (name/price), a
   full-bleed image well, and a padded items list -- rather than one
   uniformly-padded box, so the card's own padding resets to 0 and each
   zone carries its own. */
/* position:relative here because .msm-package-flag (below) is the
   real markup's actual DOM structure: a sibling of .msm-package-top,
   not nested inside it -- its position:absolute was resolving against
   whatever positioned ancestor came next (none, effectively), pushing
   it off in the wrong spot instead of pinning to this card's own
   corner. Found live: the flag was confirmed present in the DOM with
   the right text, just invisible. */
.msm-package-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: var(--fnl-white);
  border: 2px solid transparent;
  border-radius: 18px;
  box-shadow: var(--hero-shadow);
  overflow: hidden;
}
.msm-package-card-featured {
  border-color: var(--hero-sky);
  background: var(--fnl-white);
  box-shadow: var(--hero-shadow);
}
@media (min-width: 681px) {
  .msm-package-card-featured { transform: scale(1.02); }
}

.msm-package-top {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px 24px;
  background: var(--hero-navy);
  color: var(--fnl-white);
}
.msm-package-card-featured .msm-package-top {
  background: linear-gradient(135deg, var(--hero-crimson), var(--hero-crimson-deep));
}
/* Ribbon pinned to the top band's own corner, matching the reference's
   ".pk-flag" exactly -- no longer a full-bleed banner across the
   card's top edge (that was this file's own earlier approximation
   before the reference's real CSS was available). z-index:2 is load-
   bearing, not decoration: the flag is a DOM sibling of
   .msm-package-top that comes BEFORE it, and .msm-package-top is also
   position:relative -- two positioned siblings with equal (auto)
   stacking paint in DOM order, so .msm-package-top was painting on top
   of the flag and hiding it completely. Confirmed via
   document.elementsFromPoint() on the live page, not visible from
   reading the CSS or from computed styles on the flag alone -- it had
   correct geometry/color/opacity throughout, it was just painted over. */
.msm-package-flag {
  position: absolute;
  z-index: 2;
  top: 14px;
  right: -2px;
  display: block;
  margin: 0;
  padding: 4px 12px;
  background: var(--hero-sky);
  color: var(--fnl-white);
  font-family: var(--msm-font-display);
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 6px 0 0 6px;
}

.msm-package-name {
  font-family: var(--msm-font-display);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--hero-sky);
}
.msm-package-card-featured .msm-package-name { color: var(--fnl-white); }
.msm-package-price {
  margin-top: 4px;
  font-family: var(--msm-font-display);
  font-weight: 900;
  font-size: 44px;
  line-height: 1;
  color: var(--fnl-white);
  white-space: normal;
}
.msm-package-price-missing { color: #ffb4b4; font-size: 1rem; }

.msm-package-image {
  margin: 0;
  border-radius: 0;
  aspect-ratio: 4 / 3;
  background: var(--fnl-white);
  border-bottom: 3px solid var(--hero-sky);
}
.msm-package-card-featured .msm-package-image { border-bottom-color: var(--hero-crimson); }
.msm-package-image img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }

/* ".msm-package-card .msm-package-items" (2 classes): this is a <ul>,
   so the shared event-preview.css's ".msm-preview ul { padding:0 }"
   (1 class + 1 element) is otherwise more specific and silently wins,
   same bug class as every other fix in this file -- found live via a
   user-annotated screenshot (checklist items sat flush against the
   card's left edge, no padding at all). */
.msm-package-card .msm-package-items {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 22px 24px;
}
.msm-package-items li { gap: 10px; font-size: 15px; color: #33425c; }
.msm-package-check { color: var(--hero-sky); }
.msm-package-card-featured .msm-package-check { color: var(--hero-crimson); }

/* "Fresh designs" headline + reassurance disclaimer (dev spec,
   2026-09-05), directly below the grid and above the cap callout --
   deliberately in that order so the section's last note before the
   Register CTA stays positive rather than ending on a caveat. */
.msm-packages-section .msm-packages-fresh-headline {
  margin: 40px 0 0;
  font-family: var(--msm-font-display);
  font-size: 16px;
  font-weight: 800;
  color: var(--hero-navy);
  text-align: center;
}
.msm-packages-section .msm-packages-fresh-disclaimer {
  margin: 6px auto 0;
  max-width: 62ch;
  color: var(--hero-muted);
  font-size: 12.5px;
  text-align: center;
}

/* Cap callout (dev spec, 2026-09-05): promoted from a small pill to a
   full-width band, same visual tier as the "Most Popular" flag's navy/
   crimson top band on the cards above -- a rounded rectangle spanning
   the section's content width rather than a centered line easy to miss.
   .msm-packages-cap-note is now a wrapping <div> (was a single <p>)
   holding two lines: the main sentence and a smaller static sub-line;
   see event-packages.php. No lighter-navy design token exists yet, so
   the gradient's second stop is a hand-picked value close to
   --hero-navy rather than a new named color. */
.msm-packages-section .msm-packages-cap-note {
  display: block;
  margin: 32px 0 0;
  /* event-packages.css's base rule sets max-width: 56ch (its own small-
     pill treatment) -- this file loads after it and overrides display/
     margin/etc, but never redeclared max-width, so that 56ch constraint
     was still winning and shrinking this band to its own text width
     instead of the full card-grid width. Explicit "none" here is the
     fix (2026-09-05 follow-up, confirmed live via getComputedStyle --
     the band was rendering at ~463px, not the ~1120px content width). */
  max-width: none;
  padding: 26px 32px;
  background: linear-gradient(135deg, var(--hero-navy), #1e3f6e);
  border-radius: 18px;
  box-shadow: var(--hero-shadow);
  text-align: center;
  color: var(--fnl-white);
}
.msm-packages-cap-note-main {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  color: var(--fnl-white);
}
/* Same ::before icon technique as before, just retargeted onto the
   main line specifically now that the outer element wraps two lines
   instead of holding the text directly. */
.msm-packages-cap-note-main::before {
  content: "\1F9E2";
  margin-right: 8px;
}
.msm-packages-cap-note-main strong {
  color: var(--fnl-gold);
  font-weight: 800;
  font-size: 1.15em;
}
.msm-packages-cap-note-sub {
  margin: 6px 0 0;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--fnl-white);
  opacity: 0.75;
}
/* Still needed for other children of .msm-wrap in this section (the
   admin-only mismatch warning box, package item list text) that rely
   on this inherited center alignment rather than setting their own --
   .msm-packages-cap-note above and the fresh-headline/disclaimer rules
   already set text-align:center explicitly, so this isn't load-bearing
   for those, but removing it would silently re-left-align everything
   else in the section. */
.msm-packages-section > .msm-wrap { text-align: center; }

@media (max-width: 680px) {
  .msm-packages-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   Testimonials / Zero Risk / FAQ / Final CTA -- static brand-education
   sections, copied directly from the reference's own ".rev"/".risk"/
   ".faq"/".final" rules (supplied directly, not reconstructed). Same
   eyebrow/heading pattern as Video/Idea/How above, scoped per-section;
   bare <p>/<h3> tags below intentionally rely on the same class+element
   (0,1,0+1=0,1,1) tie against event-preview.css's ".msm-preview p"/
   "h1,h2,h3" rules that .msm-step p etc. already use safely (this
   stylesheet loads last, so ties resolve in its favor) -- only actual
   single-class selectors competing against that shared 0,1,1 specificity
   (the heading/paragraph classes below that must reliably win a margin
   or color fight) are scoped as a 2-class descendant instead.
   ===================================================================== */
.msm-rev-section { background: var(--hero-navy-deep); color: var(--fnl-white); border-top: none; padding: 68px 0; }
.msm-rev-section .msm-wrap { width: min(100% - 2.5rem, 1120px); max-width: 1120px; }
.msm-rev-section .msm-section-eyebrow {
  margin: 0;
  font-family: var(--msm-font-display);
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--hero-sky);
  text-align: center;
}
.msm-rev-section .msm-section-heading {
  margin: 9px 0 0;
  font-family: var(--msm-font-display);
  font-size: clamp(28px, 4.6vw, 46px);
  font-weight: 800;
  text-align: center;
  color: var(--fnl-white);
  text-transform: none;
}
.msm-rev-badges {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 26px;
}
.msm-rev-badge {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(33, 145, 251, 0.32);
  border-radius: 12px;
  padding: 14px 22px;
  text-align: center;
}
.msm-rev-badge-num {
  display: block;
  font-family: var(--msm-font-display);
  font-weight: 900;
  font-size: 24px;
  color: var(--hero-sky);
  line-height: 1;
}
.msm-rev-badge-label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--fnl-muted-on-navy);
  margin-top: 4px;
  font-weight: 600;
}
.msm-rev-quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 40px;
}
.msm-rev-quote {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 24px;
}
.msm-rev-stars { color: var(--fnl-gold); letter-spacing: 2px; font-size: 14px; }
.msm-rev-headline {
  font-family: var(--msm-font-display);
  font-weight: 800;
  font-size: 18px;
  color: var(--fnl-white);
  margin: 10px 0;
  text-transform: none;
  letter-spacing: 0.2px;
  line-height: 1.2;
}
.msm-rev-quote p { color: var(--fnl-muted-on-navy); font-size: 14.5px; }
.msm-rev-by { margin-top: 13px; font-weight: 700; color: var(--hero-sky); font-size: 13px; }

@media (max-width: 920px) {
  .msm-rev-quotes { grid-template-columns: 1fr; }
}

/* Zone 2 -- horizontal auto-scrolling ticker of short quotes. The track
   renders the pool twice back-to-back (see the template); animating
   translateX from 0 to -50% loops seamlessly since the second half is an
   exact duplicate of the first, so the reader never sees a jump or reset. */
.msm-rev-ticker {
  position: relative;
  margin-top: 32px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
}
.msm-rev-ticker-track {
  display: flex;
  gap: 14px;
  width: max-content;
  /* ~115px/s -- a chip takes roughly 18s to cross the viewport, ambient
     rather than a fast-scrolling news ticker. Duration is tuned to the
     current pool size (123 items, includes/data/testimonial-ticker-
     quotes.php); if the pool changes size substantially, retune this. */
  animation: msm-rev-ticker-scroll 550s linear infinite;
}
.msm-rev-ticker:hover .msm-rev-ticker-track,
.msm-rev-ticker.is-paused .msm-rev-ticker-track {
  animation-play-state: paused;
}
@keyframes msm-rev-ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.msm-rev-chip {
  flex: none;
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 13.5px;
}
.msm-rev-chip-stars { color: var(--fnl-gold); letter-spacing: 1px; font-size: 11px; }
.msm-rev-chip-text { color: var(--fnl-white); font-weight: 600; }
.msm-rev-chip-by { color: var(--fnl-muted-on-navy); font-size: 12px; }

.msm-rev-section .msm-rev-more-link {
  display: block;
  text-align: center;
  margin-top: 32px;
  color: var(--hero-sky);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}
.msm-rev-section .msm-rev-more-link:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .msm-rev-ticker-track { animation: none; }
  .msm-rev-ticker { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

@media (max-width: 600px) {
  .msm-rev-ticker { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); }
  .msm-rev-chip { padding: 9px 16px; font-size: 12.5px; }
}

.msm-risk-section { background: var(--hero-sky); border-top: none; padding: 68px 0; }
.msm-risk-row {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}
.msm-risk-icon { flex: none; }
.msm-risk-section h3 {
  font-family: var(--msm-font-display);
  font-size: clamp(24px, 4vw, 38px);
  color: var(--fnl-white);
  font-weight: 900;
}
.msm-risk-section p {
  color: #eaf4ff;
  max-width: 62ch;
  margin: 10px auto 0;
  font-size: 15.5px;
}

.msm-faq-section { background: var(--fnl-white); border-top: none; padding: 68px 0; }
.msm-faq-section .msm-wrap { max-width: 820px; }
.msm-faq-section .msm-section-eyebrow {
  margin: 0;
  font-family: var(--msm-font-display);
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--hero-sky);
  text-align: center;
}
.msm-faq-section .msm-section-heading {
  margin: 9px 0 0;
  font-family: var(--msm-font-display);
  font-size: clamp(28px, 4.6vw, 46px);
  font-weight: 800;
  text-align: center;
  color: var(--hero-navy);
  text-transform: none;
}
.msm-faq-list { margin-top: 38px; }
.msm-faq-item {
  background: var(--fnl-white);
  border: 1px solid var(--fnl-cream-line);
  border-radius: 13px;
  margin-bottom: 12px;
  overflow: hidden;
}
.msm-faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 22px;
  font-family: var(--msm-font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--hero-navy);
  display: flex;
  justify-content: space-between;
  gap: 14px;
  text-transform: none;
  letter-spacing: 0.2px;
}
.msm-faq-item summary::-webkit-details-marker { display: none; }
.msm-faq-plus { color: var(--hero-crimson); font-size: 24px; transition: transform 0.2s; }
.msm-faq-item[open] .msm-faq-plus { transform: rotate(45deg); }
.msm-faq-answer { padding: 0 22px 20px; color: var(--hero-muted); font-size: 15.5px; }

/* Final CTA -- same 4-layer background composite technique as .msm-hero
   (radial vignette + linear scrim + photo + solid navy fallback), reusing
   $data['hero_image_url'] verbatim rather than a separate photo, per
   explicit direction. .msm-final-no-photo supplies just the solid
   gradient layer, exactly like .msm-hero-no-photo does above. */
.msm-final-section {
  position: relative;
  color: var(--fnl-white);
  text-align: center;
  overflow: hidden;
  border-top: none;
}
.msm-final-section.msm-final-no-photo {
  background-image: linear-gradient(180deg, var(--hero-navy) 0%, var(--hero-navy-deep) 100%);
}
.msm-final-section .msm-wrap { position: relative; padding: 120px 22px; }
.msm-final-section .msm-final-heading {
  margin: 0;
  font-family: var(--msm-font-display);
  font-size: clamp(32px, 6vw, 68px);
  font-weight: 900;
  color: var(--fnl-white);
  text-transform: uppercase;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.5);
}
.msm-final-heading .msm-u { border-bottom: 6px solid var(--hero-crimson); padding-bottom: 3px; }
.msm-final-section .msm-final-sub {
  color: #eaf1fb;
  font-size: 17px;
  margin: 14px 0 0;
  font-family: var(--msm-font-display);
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
}
.msm-final-cta-row { display: flex; justify-content: center; margin-top: 32px; }

@media (max-width: 680px) {
  .msm-rev-section,
  .msm-risk-section,
  .msm-faq-section { padding: 50px 0; }
  .msm-final-section .msm-wrap { padding: 70px 22px; }
}

/* =====================================================================
   Roster (async-loaded markup, public/assets/event-roster.js; classes
   below match the existing structure in event-roster.css unchanged).
   Reference: navy "Roster Is Filling Up" band -- closest match to the
   current dark styling of any section, so this is mostly a recolor.
   ===================================================================== */
.msm-roster-section { border-top: none; background: var(--fnl-navy); }
.msm-roster-tracker {
  background: var(--fnl-navy-deep);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}
.msm-roster-eyebrow { color: var(--fnl-gold); }
.msm-live-dot { background: var(--fnl-success); }
.msm-roster-tracker h2 { color: var(--fnl-white); }
.msm-roster-stat-line { color: var(--fnl-muted-on-navy); }
.msm-roster-stat-num { color: var(--fnl-white); font-weight: 900; }
.msm-roster-stat-label { color: var(--fnl-muted-on-navy-2); }

.msm-roster-grade-chip {
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--fnl-muted-on-navy);
}
.msm-roster-grade-chip strong { color: var(--fnl-gold); }

.msm-roster-search {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: var(--fnl-white);
}
.msm-roster-search::placeholder { color: var(--fnl-muted-on-navy-2); }

.msm-roster-school-chip {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: var(--fnl-muted-on-navy);
}

.msm-roster-board { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.msm-roster-row { border-bottom-color: rgba(255, 255, 255, 0.1); }
.msm-roster-row-toggle { color: var(--fnl-white); }
.msm-roster-rank { color: var(--fnl-muted-on-navy-2); }
.msm-roster-row-muted .msm-roster-school-name { color: var(--fnl-muted-on-navy-2); }

.msm-roster-bar-track { background: rgba(255, 255, 255, 0.1); }
.msm-roster-bar { background: var(--fnl-gold); }

.msm-roster-count { color: var(--fnl-white); font-weight: 900; }
.msm-roster-count small { color: var(--fnl-muted-on-navy-2); }

.msm-roster-toggle-icon { border-color: rgba(255, 255, 255, 0.25); color: var(--fnl-muted-on-navy); }
.msm-roster-row-toggle[aria-expanded="true"] .msm-roster-toggle-icon {
  background: rgba(227, 178, 60, 0.18);
}

.msm-roster-player { color: var(--fnl-muted-on-navy); }
.msm-roster-player-grade,
.msm-roster-player-meta { color: var(--fnl-muted-on-navy-2); }

.msm-roster-state {
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--fnl-muted-on-navy);
}

.msm-roster-reveal summary {
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--fnl-gold);
}
.msm-roster-reveal summary:hover { background: rgba(227, 178, 60, 0.1); }
.msm-roster-tracker .msm-roster-cache-note { color: var(--fnl-muted-on-navy-2); }

/* =====================================================================
   Sponsors (public/templates/parts/sponsor-section.php)
   Reference has no direct equivalent section; white background chosen
   for logo legibility/contrast, consistent with the packages band above
   it and the "Other Active Events" band below it. Eyebrow labels match
   the blue-eyebrow pattern used by every other new section; the Title
   Sponsor's card gets a sky-blue accent border + shadow to read as
   featured while staying a plain white card like every other logo.
   ===================================================================== */
.msm-sponsor-section { border-top: none; background: var(--fnl-white); }
.msm-sponsor-section .msm-sponsor-heading {
  font-family: var(--msm-font-display);
  font-weight: 800;
  letter-spacing: 2.5px;
  font-size: 13px;
  color: var(--hero-sky);
}
.msm-title-sponsor .msm-title-sponsor-eyebrow {
  font-family: var(--msm-font-display);
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--hero-sky);
}
.msm-title-sponsor-card {
  background: var(--fnl-white);
  border-color: var(--hero-sky);
  box-shadow: var(--hero-shadow);
}
.msm-sponsor-logo-link {
  background: var(--fnl-white);
  border-color: var(--fnl-cream-line);
}
.msm-sponsor-logo-link:hover,
.msm-sponsor-logo-link:focus-visible {
  border-color: var(--hero-sky);
  box-shadow: var(--hero-shadow);
}
.msm-sponsor-logo-link:focus-visible { outline-color: var(--fnl-gold); }

/* =====================================================================
   Other Active Events (public/templates/parts/event-card-mini.php) --
   deliberately its own compact tile, not the shared public/templates/
   parts/event-card.php also used by the Market overview page's card
   grid (market-template.php); that shared partial/its event-card.css are
   untouched by this redesign. Eyebrow/heading match the Testimonials/
   FAQ pattern above; the grid itself stays narrow/centered (~820px, not
   the other new sections' 1120px) per explicit direction -- a handful of
   tiles should read as a small footnote block, not a full-width band.
   ===================================================================== */
.msm-other-events-section { background: var(--fnl-cream); padding: 68px 0; }
.msm-other-events-section .msm-section-eyebrow {
  margin: 0;
  font-family: var(--msm-font-display);
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--hero-sky);
  text-align: center;
}
.msm-other-events-section .msm-section-heading {
  margin: 9px 0 0;
  font-family: var(--msm-font-display);
  font-size: clamp(28px, 4.6vw, 46px);
  font-weight: 800;
  text-align: center;
  color: var(--hero-navy);
  text-transform: none;
}

.msm-mini-card-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: 820px;
  margin: 34px auto 0;
}
.msm-mini-card {
  display: flex;
  flex: 0 1 170px;
  flex-direction: column;
  gap: 7px;
  align-items: flex-start;
  background: var(--fnl-white);
  border: 1px solid var(--fnl-cream-line);
  border-radius: 10px;
  padding: 12px 13px;
  text-decoration: none;
  transition: border-color 0.15s;
}
a.msm-mini-card:hover { border-color: var(--hero-sky); }

.msm-mini-card-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border: 1px solid;
  border-radius: 999px;
}
.msm-mini-card-badge--vip {
  background: rgba(227, 178, 60, 0.16);
  border-color: rgba(227, 178, 60, 0.45);
  color: #a97a10;
}
.msm-mini-card-badge--registration {
  background: rgba(46, 158, 91, 0.12);
  border-color: rgba(46, 158, 91, 0.4);
  color: var(--fnl-success);
}
.msm-mini-card-badge--waitlist {
  background: rgba(200, 16, 46, 0.1);
  border-color: rgba(200, 16, 46, 0.35);
  color: var(--hero-crimson);
}
.msm-mini-card-badge--teams_released {
  background: rgba(16, 38, 75, 0.08);
  border-color: rgba(16, 38, 75, 0.25);
  color: var(--hero-navy);
}

.msm-mini-card-sport {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--msm-font-display);
  font-weight: 800;
  font-size: 13.5px;
  color: var(--hero-navy);
}
.msm-mini-card-emoji { font-size: 16px; line-height: 1; }
.msm-mini-card-when { font-size: 11.5px; color: var(--hero-muted); }

/* =====================================================================
   New Player Kit modal (public/templates/parts/new-player-kit-modal.php)
   Functionally untouched: same fields, same ActiveCampaign action URL,
   same success text -- recolor only.
   ===================================================================== */
.msm-npk-dialog {
  background: var(--fnl-white);
  border-color: var(--fnl-cream-line);
  box-shadow: 0 20px 48px rgba(16, 38, 75, 0.28);
}
.msm-npk-close {
  border-color: var(--fnl-cream-line);
  background: var(--fnl-cream);
  color: var(--fnl-navy);
}
.msm-npk-close:hover { background: var(--fnl-crimson); border-color: var(--fnl-crimson); color: var(--fnl-white); }
.msm-npk-close:focus-visible,
.msm-npk-input:focus-visible,
.msm-npk-submit:focus-visible { outline-color: var(--fnl-gold); }

.msm-npk-eyebrow { color: var(--fnl-crimson); }
.msm-npk-headline { color: var(--fnl-navy); }
.msm-npk-description { color: var(--fnl-text-gray-dark); }

/* Checklist (re-added 2026-09-05 with new content) -- same color as
   .msm-npk-description above, matching that base file's "typography
   inherited, color explicitly matched" approach. Checkmark color
   matches the eyebrow/link accent already used throughout this file. */
.msm-npk-checklist li { color: var(--fnl-text-gray-dark); }
.msm-npk-checklist li::before { color: var(--fnl-crimson); }

/* Social proof footer + trust note (2026-09-03, footer relocated
   2026-09-04, 3rd stat added then shortened 2026-09-05) -- recolor
   only, same "functionally untouched" convention as the rest of this
   block. */
.msm-npk-social-proof { color: var(--fnl-text-gray); border-top-color: var(--fnl-cream-line); }
.msm-npk-social-proof-sep { color: var(--fnl-cream-line); }
.msm-npk-trust-note { color: var(--fnl-text-gray); }

.msm-npk-label { color: var(--fnl-text-gray); }
.msm-npk-input {
  border-color: var(--fnl-cream-line);
  background: var(--fnl-cream);
  color: var(--fnl-text-gray-dark);
}
.msm-npk-input.msm-npk-input-invalid { border-color: var(--fnl-error); }
.msm-npk-error { color: var(--fnl-error); }
.msm-npk-success p { color: var(--fnl-text-gray-dark); }