/* =============================================================================
   site.css — Mouse Ears & Strollers shared public-website design system.

   The ONE source of design tokens + reusable public components (header, footer,
   buttons, badges, pills, cards, hero, forms, states, grid). The planner keeps its
   own app.css for its specialised itinerary UI, but both share the SAME token values
   here so the brand is consistent. Prefix `mes-` avoids clashing with planner classes.
   ============================================================================= */

:root {
  /* ---- brand palette (matches the planner) ---- */
  --pink: #d4537e; --pink-d: #993556; --pink-50: #fbeaf0; --pink-100: #f4c0d1;
  --sky: #378add; --sky-50: #e6f1fb; --sky-d: #0c447c;
  --grn: #2f8f4e; --grn-50: #e8f5ec; --grn-d: #1c5a30;
  --teal: #2aa38c; --teal-d: #1c8672; --teal-lt: #86d8c4;
  /* exact wordmark colours (from the logo): Mouse Ears · & · Strollers */
  --wm-ink: #2C373E; --wm-amp: #97C7B8; --wm-str: #E6888D;
  --amb: #ba7517; --amb-50: #faeeda; --amb-d: #7a4c0a;
  --red: #c8384f; --red-50: #fbe8eb;
  --purple: #7c5cc4; --purple-50: #efeaf9; --purple-d: #4b3585;
  /* ---- neutrals ---- */
  --navy: #16233a;                 /* primary headings / text */
  --ink: #1f2c3a; --ink-2: #55606f; --ink-3: #8b929b;
  --line: #e7eaf1; --line-2: #eef0f5;
  --bg: #f3f6fb;                   /* pale blue-grey page background */
  --bg-2: #e9eef7;
  --card: #ffffff;
  /* ---- scale ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(20,28,45,.05);
  --sh-2: 0 4px 16px rgba(20,28,45,.07);
  --sh-3: 0 14px 40px rgba(20,28,45,.10);
  --maxw: 1180px;
  --header-h: 92px;   /* floating nav band + bar; used for anchor scroll-margin offsets */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.mes-site {
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font);
  line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
body.mes-site img { max-width: 100%; display: block; }
a { color: var(--pink-d); }
h1, h2, h3, h4 { color: var(--navy); line-height: 1.2; margin: 0 0 .4em; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mes-skip { position: absolute; left: -999px; top: 0; z-index: 200; background: var(--pink); color: #fff; padding: 10px 16px; border-radius: 0 0 10px 0; }
.mes-skip:focus { left: 0; }

/* ---- layout ---- */
.mes-container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.mes-section { padding: clamp(28px, 5vw, 52px) 0; }
.mes-grid { display: grid; gap: var(--sp-5); }
@media (min-width: 700px) { .mes-cols-2 { grid-template-columns: 1fr 1fr; } .mes-cols-3 { grid-template-columns: repeat(3, 1fr); } .mes-cols-4 { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 699px) { .mes-cols-2, .mes-cols-3, .mes-cols-4 { grid-template-columns: 1fr; } }
.mes-cols-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 980px) { .mes-cols-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .mes-cols-5 { grid-template-columns: repeat(2, 1fr); } }
/* Inline 2-column grids (hero live grid, map, planner promo) stack on tablet/mobile. */
@media (max-width: 820px) { .mes-grid[style*="grid-template-columns"] { grid-template-columns: 1fr !important; } }

.mes-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: var(--sp-5); flex-wrap: wrap; }
.mes-section-head h2 { font-size: clamp(20px, 3vw, 26px); margin: 0; display: flex; align-items: center; gap: 10px; }
.mes-section-head h2 .ti { color: var(--pink); font-size: 1.1em; }
.mes-section-head .mes-link { font-size: 14px; font-weight: 600; white-space: nowrap; }
.mes-link { color: var(--pink-d); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.mes-link:hover { text-decoration: underline; }
.mes-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--pink); }

/* ---- buttons ---- */
.mes-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit;
  font-size: 15px; font-weight: 600; padding: 11px 20px; border-radius: var(--r-pill); border: 1px solid transparent;
  cursor: pointer; text-decoration: none; transition: transform .08s ease, box-shadow .15s ease, background .15s ease; white-space: nowrap; }
.mes-btn:active { transform: translateY(1px); }
.mes-btn-primary { background: var(--pink); color: #fff; box-shadow: 0 6px 16px rgba(212,83,126,.28); }
.mes-btn-primary:hover { background: var(--pink-d); }
.mes-btn-secondary { background: #fff; color: var(--sky-d); border-color: var(--line); }
.mes-btn-secondary:hover { border-color: var(--sky); color: var(--sky-d); }
.mes-btn-ghost { background: transparent; color: var(--ink-2); border-color: var(--line); }
.mes-btn-ghost:hover { border-color: var(--pink); color: var(--pink-d); }
.mes-btn-sm { font-size: 13.5px; padding: 8px 14px; }
.mes-btn-block { width: 100%; }
.mes-btn[disabled] { opacity: .6; pointer-events: none; }

/* ---- badges & pills ---- */
.mes-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: var(--r-pill); text-transform: uppercase; letter-spacing: .03em; }
.mes-badge .ti { font-size: 13px; }
.mes-badge-pink { background: var(--pink-50); color: var(--pink-d); }
.mes-badge-sky { background: var(--sky-50); color: var(--sky-d); }
.mes-badge-green { background: var(--grn-50); color: var(--grn-d); }
.mes-badge-amber { background: var(--amb-50); color: var(--amb-d); }
.mes-badge-red { background: var(--red-50); color: var(--red); }
.mes-badge-purple { background: var(--purple-50); color: var(--purple-d); }
.mes-badge-grey { background: #eef0f4; color: var(--ink-2); }
.mes-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; padding: 4px 11px; border-radius: var(--r-pill); background: #eef1f6; color: var(--ink-2); }
/* status dots (never colour alone — always paired with a label) */
.mes-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto; background: var(--ink-3); }
.mes-dot.is-open, .mes-dot.is-low { background: var(--grn); }
.mes-dot.is-moderate { background: var(--amb); }
.mes-dot.is-high, .mes-dot.is-closed { background: var(--red); }
.mes-dot.is-closed-hours { background: #6b7fa8; }

/* ---- cards ---- */
.mes-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-2); overflow: hidden; }
.mes-card-pad { padding: var(--sp-5); }
.mes-card-hover { transition: transform .12s ease, box-shadow .15s ease; }
.mes-card-hover:hover { transform: translateY(-2px); box-shadow: var(--sh-3); }
a.mes-card { color: inherit; text-decoration: none; display: block; }

/* article card */
.mes-article-media { aspect-ratio: 16/9; background: linear-gradient(135deg, var(--sky-50), var(--pink-50)); position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.mes-article-media .ti { font-size: 40px; color: rgba(255,255,255,.85); }
.mes-article-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mes-article-media .mes-badge { position: absolute; top: 10px; left: 10px; z-index: 1; }
.mes-guide-thumb { flex: 0 0 auto; width: 60px; height: 60px; border-radius: 12px; overflow: hidden; }
.mes-guide-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mes-hero-figure { margin: 0 0 22px; border-radius: 16px; overflow: hidden; aspect-ratio: 16/9; }
.mes-hero-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* reference detail pages (resort / restaurant / attraction): prose + a details strip */
.mes-detail-grid { display: grid; grid-template-columns: 1fr 260px; gap: 26px; align-items: start; }
@media (max-width: 760px) { .mes-detail-grid { grid-template-columns: 1fr; } }
.mes-spec { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 6px 16px; box-shadow: var(--sh-2); position: sticky; top: calc(var(--header-h) + 12px); }
@media (max-width: 760px) { .mes-spec { position: static; } }
.mes-spec-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-2); }
.mes-spec-row:first-child { border-top: none; }
.mes-spec-k { font-size: 12.5px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .03em; }
.mes-spec-v { font-size: 14.5px; font-weight: 600; color: var(--navy); text-align: right; }
.mes-article-body { padding: 16px 16px 18px; }
.mes-article-body h3 { font-size: 16px; margin: 4px 0 6px; }
.mes-article-body p { font-size: 13.5px; color: var(--ink-2); margin: 0 0 10px; }
.mes-article-meta { font-size: 12px; color: var(--ink-3); display: flex; gap: 10px; flex-wrap: wrap; }

/* park card */
.mes-park-card { padding: 18px; }
.mes-park-card .mes-park-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.mes-park-ico { width: 38px; height: 38px; border-radius: 11px; background: var(--pink-50); color: var(--pink); display: flex; align-items: center; justify-content: center; font-size: 20px; flex: 0 0 auto; }
.mes-park-card h3 { font-size: 15px; margin: 0; }
.mes-park-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; padding: 6px 0; border-top: 1px solid var(--line-2); }
.mes-park-row:first-of-type { border-top: none; }
.mes-park-row .k { color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; }
.mes-park-row .v { font-weight: 700; color: var(--navy); }

/* recommendation card */
.mes-rec { padding: 18px; display: flex; gap: 14px; }
.mes-rec-ico { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 21px; flex: 0 0 auto; background: var(--purple-50); color: var(--purple-d); }
.mes-rec h3 { font-size: 15px; margin: 0 0 3px; }
.mes-rec .mes-rec-pick { font-weight: 700; color: var(--pink-d); font-size: 13.5px; margin: 0 0 4px; }
.mes-rec p { font-size: 13px; color: var(--ink-2); margin: 0; }

/* live / summary tiles */
.mes-tile { padding: 14px 16px; }
.mes-tile .k { font-size: 12px; color: var(--ink-3); }
.mes-tile .v { font-size: 20px; font-weight: 800; color: var(--navy); margin-top: 2px; }
.mes-tile .v.accent { color: var(--pink-d); }

/* ---- forms ---- */
.mes-field { display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; padding: 11px 14px; }
.mes-field:focus-within { border-color: var(--pink); box-shadow: 0 0 0 3px var(--pink-50); }
.mes-field input, .mes-field select { border: none; background: transparent; font: inherit; color: var(--ink); width: 100%; outline: none; }
.mes-field .ti { color: var(--ink-3); font-size: 18px; }
.mes-label { font-size: 13px; font-weight: 600; color: var(--ink-2); display: block; margin-bottom: 5px; }
.mes-help { font-size: 12.5px; color: var(--ink-3); }
.mes-error { font-size: 13px; color: var(--red); }
.mes-ok { font-size: 13px; color: var(--grn-d); }

/* ---- states ---- */
.mes-empty, .mes-loading, .mes-errbox { text-align: center; padding: 28px 16px; color: var(--ink-3); font-size: 14px; }
.mes-empty .ti, .mes-errbox .ti { font-size: 30px; display: block; margin: 0 auto 8px; color: var(--ink-3); }
.mes-skel { background: linear-gradient(90deg, #eef1f6 25%, #f6f8fb 37%, #eef1f6 63%); background-size: 400% 100%; animation: mes-shimmer 1.3s ease infinite; border-radius: 8px; }
@keyframes mes-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.mes-note { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; border-radius: var(--r-md); padding: 11px 14px; }
.mes-note .ti { flex: 0 0 auto; margin-top: 1px; }
.mes-note-info { background: var(--sky-50); color: var(--sky-d); }
.mes-note-warn { background: var(--amb-50); color: var(--amb-d); }
.mes-note-calm { background: #eef1f7; color: #56617a; }
.mes-note-ok { background: var(--grn-50); color: var(--grn-d); }
/* live page: longest current waits */
.mes-longest { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; }
.mes-longest li { display: flex; align-items: center; gap: 12px; padding: 9px 4px; border-top: 1px solid var(--line-2); }
.mes-longest li:first-child { border-top: 0; }
.mes-longest .rk { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px; background: var(--amb-50); color: var(--amb-d); font-size: 12.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.mes-longest .nm { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.mes-longest .nm strong { font-size: 14px; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mes-longest .nm small { font-size: 12px; color: var(--ink-3); }
.mes-longest .wt { flex: 0 0 auto; font-size: 14px; font-weight: 800; color: var(--pink-d); }

/* =============================================================================
   Live Park Info page (/live/) — park selector + full per-park detail
   ============================================================================= */
@keyframes mes-spin { to { transform: rotate(360deg); } }
.mes-spin { display: inline-block; animation: mes-spin .8s linear infinite; }

/* refresh button inside the status banner */
.mes-liverefresh { border: 0; background: rgba(255,255,255,.6); color: inherit; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 3px 10px; border-radius: 999px; margin-left: 8px; display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; }
.mes-liverefresh:hover { background: rgba(255,255,255,.95); }
.mes-liverefresh[disabled] { opacity: .7; cursor: default; }

/* park selector — a horizontally scrollable segmented row */
.mes-livetabs { display: flex; gap: 8px; overflow-x: auto; padding: 4px; margin: 0 -4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mes-livetabs::-webkit-scrollbar { display: none; }
.mes-livetab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink-2); font-size: 13.5px; font-weight: 700; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; white-space: nowrap; }
.mes-livetab .ti { font-size: 16px; color: var(--pink); }
.mes-livetab:hover { border-color: var(--pink-100); background: var(--pink-50); }
.mes-livetab.is-active { background: var(--pink); border-color: var(--pink); color: #fff; }
.mes-livetab.is-active .ti { color: #fff; }
.mes-livetab .mes-dot { width: 8px; height: 8px; }

/* summary tiles row (responsive auto-fit) */
.mes-livetiles { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }

/* overall park cards become buttons */
.mes-livecards .mes-park-card-btn { text-align: left; border: 1px solid var(--line); background: #fff; cursor: pointer; font: inherit; width: 100%; display: block; transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; }
.mes-livecards .mes-park-card-btn:hover { border-color: var(--pink-100); box-shadow: 0 10px 26px rgba(20,35,58,.08); transform: translateY(-2px); }
.mes-livecard-cta { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--pink-d); }
.mes-livecard-cta .ti { font-size: 15px; transition: transform .15s ease; }
.mes-park-card-btn:hover .mes-livecard-cta .ti { transform: translateX(3px); }

/* per-park header */
.mes-livehead-top { display: flex; align-items: center; gap: 14px; }
.mes-livehead .mes-park-ico { width: 46px; height: 46px; font-size: 22px; }
.mes-livehead-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.mes-livehead-hours { font-size: 13px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 5px; }

/* ride-list toolbar */
.mes-livetoolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.mes-livecount { font-size: 12px; font-weight: 700; color: var(--ink-3); background: #eef0f4; border-radius: 999px; padding: 1px 8px; vertical-align: middle; margin-left: 4px; }
.mes-search { position: relative; display: inline-flex; align-items: center; }
.mes-search .ti { position: absolute; left: 10px; color: var(--ink-3); font-size: 16px; pointer-events: none; }
.mes-search input { padding: 8px 12px 8px 32px; border: 1px solid var(--line); border-radius: 999px; font: inherit; font-size: 13.5px; background: var(--bg); width: 170px; }
.mes-search input:focus { outline: none; border-color: var(--pink-100); background: #fff; }
.mes-select { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; font: inherit; font-size: 13.5px; background: var(--bg); color: var(--ink); cursor: pointer; }
.mes-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; user-select: none; }
.mes-check input { accent-color: var(--pink); }

/* ride / show rows */
.mes-ridelist, .mes-showlist { display: flex; flex-direction: column; }
.mes-riderow { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-top: 1px solid var(--line-2); }
.mes-riderow:first-child { border-top: 0; }
.mes-ride-nm { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.mes-ride-nm strong { font-size: 14px; color: var(--navy); }
.mes-ride-nm small { font-size: 12px; color: var(--ink-3); margin-top: 1px; }
.mes-riderow .mes-badge { flex: 0 0 auto; min-width: 62px; justify-content: center; }

.mes-livepark-cta { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 560px) { .mes-livepark-cta .mes-btn { flex: 1 1 100%; } .mes-search input { width: 100%; } .mes-search { flex: 1 1 140px; } }

/* =============================================================================
   Header
   ============================================================================= */
/* Floating white nav bar on a soft pale-blue band. Colour lives in the icons + active
   accents; labels stay navy. Compact height; a subtle stronger shadow once scrolled. */
.mes-header { position: sticky; top: 0; z-index: 100; background: linear-gradient(180deg, #e9f1fc, #eef3fb); padding: 14px clamp(12px, 3vw, 30px); transition: padding .2s ease; }
.mes-header.scrolled { padding-top: 8px; padding-bottom: 8px; }
.mes-header-bar { max-width: 1280px; margin: 0 auto; background: #fff; border-radius: 28px; box-shadow: 0 10px 34px rgba(20,35,58,.09); display: flex; align-items: center; gap: clamp(4px, 1vw, 14px); padding: 8px clamp(12px, 1.4vw, 20px); transition: box-shadow .2s ease, padding .2s ease; }
.mes-header.scrolled .mes-header-bar { box-shadow: 0 12px 38px rgba(20,35,58,.16); padding-top: 5px; padding-bottom: 5px; }

/* brand */
.mes-logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--navy); font-weight: 800; font-size: 16px; letter-spacing: -.01em; flex: 0 0 auto; }
.mes-logo-mark { width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.mes-logo-mark img { width: 100%; height: 100%; display: block; }
.mes-logo-text { display: block; line-height: 1.06; color: var(--wm-ink); font-weight: 800; }   /* “Mouse Ears” */
.mes-logo-text .l1, .mes-logo-text .l2 { display: block; }
.mes-logo-text .l2, .mes-logo-text .str { color: var(--wm-str); }   /* “Strollers” coral */
.mes-logo-text small { display: block; font-size: 8.5px; letter-spacing: .11em; font-weight: 800; color: var(--pink); text-transform: uppercase; margin-top: 3px; }
.mes-logo b { color: var(--pink); }
/* the “&” is mint and visually distinct from the coral “Strollers”. Higher specificity +
   placed last so it always wins over `.mes-logo b`. (Logotype — brand colours, exempt from
   contrast rules.) */
.mes-logo .mes-logo-text .amp { color: var(--wm-amp); }
.mes-brand-divider { width: 1px; align-self: stretch; margin: 10px 6px 10px 8px; background: var(--line); flex: 0 0 auto; }

/* nav — icon over label */
.mes-nav { display: flex; align-items: stretch; gap: clamp(0px, .4vw, 6px); flex: 1; justify-content: center; }
.mes-navitem { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 5px 11px 8px; border-radius: 15px; text-decoration: none; background: none; border: none; font-family: inherit; cursor: pointer; color: var(--navy); }
.mes-navicon { font-size: 25px; line-height: 1; color: var(--ink-2); transition: transform .15s ease; }
.mes-navlabel { font-size: 13.5px; font-weight: 600; color: var(--navy); white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; }
.mes-navchev { font-size: 13px; opacity: .7; }
.mes-navitem:hover { background: var(--pink-50); }
.mes-navitem:hover .mes-navicon { transform: translateY(-2px); }
.mes-navitem:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
.mes-navitem[aria-current="page"] .mes-navlabel { color: var(--pink-d); }
.mes-navitem[aria-current="page"]::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 1px; width: 22px; height: 3px; border-radius: 3px; background: var(--pink); }
/* icon tones */
.mes-tone-pink > .mes-navbtn .mes-navicon, a.mes-tone-pink .mes-navicon { color: var(--pink); }
.mes-tone-blue > .mes-navbtn .mes-navicon, a.mes-tone-blue .mes-navicon { color: var(--sky); }
.mes-tone-green > .mes-navbtn .mes-navicon, a.mes-tone-green .mes-navicon { color: var(--grn); }
.mes-tone-purple > .mes-navbtn .mes-navicon, a.mes-tone-purple .mes-navicon { color: var(--purple); }
.mes-tone-amber > .mes-navbtn .mes-navicon, a.mes-tone-amber .mes-navicon { color: var(--amb); }
.mes-tone-sky > .mes-navbtn .mes-navicon, a.mes-tone-sky .mes-navicon { color: var(--sky); }

/* ---- dropdowns: compact mini-mega-menus (Parks · Resorts & Dining) ----
   An extension of the floating navbar — white surface, thin pale border, soft layered
   shadow, a restrained pink→sky accent line, pastel icon tiles and a 2×2 grid. */
.mes-has-drop { position: relative; }
.mes-drop { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: #fff; border: 1px solid var(--line); border-radius: 22px;
  box-shadow: 0 18px 44px rgba(20,35,58,.14), 0 4px 12px rgba(20,35,58,.06);
  padding: 18px; display: none; z-index: 20; }
/* NOTE: no `overflow: hidden` here — it would clip the negative-offset hover-bridge below
   and re-open the "menu vanishes as the cursor crosses the gap" dead zone. */
/* restrained pink→sky accent line along the top (inset within the rounded corners) */
.mes-drop::after { content: ""; position: absolute; top: 1px; left: 22px; right: 22px; height: 3px;
  border-radius: 3px; background: linear-gradient(90deg, var(--pink), var(--sky)); }
/* Invisible hover-bridge covering the whole gap between the button and the menu (plus slack
   each side + a couple of px of overlap onto the button), so moving the cursor down or
   diagonally onto an item never crosses a dead zone that would close the menu. */
.mes-drop::before { content: ""; position: absolute; left: -16px; right: -16px; top: -14px; height: 16px; }
.mes-has-drop.open .mes-drop, .mes-has-drop:focus-within .mes-drop { display: block; animation: mes-drop-in .16s ease both; }
@media (hover: hover) { .mes-has-drop:hover .mes-drop { display: block; } }
@keyframes mes-drop-in { from { opacity: 0; transform: translateX(-50%) translateY(-5px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

.mes-megamenu { width: 452px; max-width: calc(100vw - 28px); }
.mes-mm-head { margin: 2px 2px 12px; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.mes-mm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mes-mm-item { position: relative; display: flex; align-items: flex-start; gap: 11px; padding: 12px 13px; border-radius: 15px;
  text-decoration: none; border: 1px solid transparent; transition: background .16s ease, border-color .16s ease; }
.mes-mm-tile { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 21px; transition: transform .16s ease; }
.mes-mm-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mes-mm-title { font-size: 15px; font-weight: 700; color: var(--navy); line-height: 1.25; text-decoration: none; }
.mes-mm-desc { font-size: 12.5px; color: var(--ink-2); line-height: 1.35; }
.mes-mm-arrow { position: absolute; top: 12px; right: 11px; font-size: 15px; color: var(--ink-3); opacity: 0; transform: translateX(-3px); transition: opacity .16s ease, transform .16s ease; }
.mes-mm-item:hover, .mes-mm-item:focus-visible { outline: none; }
.mes-mm-item:focus-visible { box-shadow: 0 0 0 2px var(--pink); }
.mes-mm-item:hover .mes-mm-arrow, .mes-mm-item:focus-visible .mes-mm-arrow { opacity: 1; transform: translateX(0); }
.mes-mm-item:hover .mes-mm-tile, .mes-mm-item:focus-visible .mes-mm-tile { transform: translateY(-1px); }
/* footer "view all" action */
.mes-mm-all { display: inline-flex; align-items: center; gap: 6px; margin: 12px 2px 0; padding: 9px 12px; border-radius: 11px;
  font-size: 13.5px; font-weight: 700; color: var(--pink-d); text-decoration: none; }
.mes-mm-all .ti { font-size: 15px; transition: transform .16s ease; }
.mes-mm-all:hover, .mes-mm-all:focus-visible { background: var(--pink-50); outline: none; }
.mes-mm-all:hover .ti, .mes-mm-all:focus-visible .ti { transform: translateX(2px); }

/* per-accent tints — colour lives in the tile + hover wash + current tint, not at rest */
.mes-mm-pink   .mes-mm-tile { background: var(--pink-50); color: var(--pink-d); }
.mes-mm-sky    .mes-mm-tile { background: var(--sky-50); color: var(--sky-d); }
.mes-mm-green  .mes-mm-tile { background: var(--grn-50); color: var(--grn-d); }
.mes-mm-purple .mes-mm-tile { background: var(--purple-50); color: var(--purple-d); }
.mes-mm-amber  .mes-mm-tile { background: var(--amb-50); color: var(--amb-d); }
.mes-mm-teal   .mes-mm-tile { background: #e2f4f0; color: var(--teal-d); }
.mes-mm-pink:hover,   .mes-mm-pink.is-current   { background: var(--pink-50); }
.mes-mm-sky:hover,    .mes-mm-sky.is-current    { background: var(--sky-50); }
.mes-mm-green:hover,  .mes-mm-green.is-current  { background: var(--grn-50); }
.mes-mm-purple:hover, .mes-mm-purple.is-current { background: var(--purple-50); }
.mes-mm-amber:hover,  .mes-mm-amber.is-current  { background: var(--amb-50); }
.mes-mm-teal:hover,   .mes-mm-teal.is-current   { background: #e2f4f0; }
/* current-page: soft persistent tint + a small accent edge + a "Current" chip */
.mes-mm-item.is-current { border-color: var(--line); }
.mes-mm-item.is-current::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--pink); }
.mes-mm-item.is-current .mes-mm-title::after { content: "Current"; margin-left: 7px; font-size: 10px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--pink-d); vertical-align: middle; }

/* utilities */
.mes-header-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; margin-left: auto; }
.mes-icon-btn { position: relative; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--navy); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; text-decoration: none; box-shadow: 0 2px 8px rgba(20,35,58,.07); }
.mes-icon-btn:hover { border-color: var(--pink-100); color: var(--pink-d); box-shadow: 0 4px 12px rgba(212,83,126,.2); }
.mes-icon-btn:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
.mes-account-dot, .mes-icon-btn.is-in::after { content: ""; position: absolute; top: 7px; right: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--pink); border: 2px solid #fff; }
.mes-myplans { position: relative; background: linear-gradient(135deg, var(--pink), var(--pink-d)); color: #fff; border-radius: 999px; height: 48px; padding: 0 20px; font-weight: 800; font-size: 14.5px; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 8px 20px rgba(212,83,126,.34); }
.mes-myplans:hover { filter: brightness(1.04); box-shadow: 0 10px 26px rgba(212,83,126,.44); }
.mes-myplans:active { transform: translateY(1px); }
.mes-myplans:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(212,83,126,.45); }
.mes-myplans-cal { font-size: 19px; }
.mes-myplans-spark { position: absolute; top: -5px; right: 10px; font-size: 13px; color: #ffe1ee; }
.mes-burger { display: none; }

/* responsive: tighten, then collapse into the drawer (before it can ever overflow) */
@media (max-width: 1180px) { .mes-logo-text small { display: none; } .mes-navlabel { font-size: 12.5px; } .mes-navitem { padding: 5px 7px 8px; } .mes-navicon { font-size: 22px; } .mes-brand-divider { margin-left: 4px; } .mes-header-actions { gap: 8px; } }
@media (max-width: 1024px) {
  .mes-nav, .mes-brand-divider { display: none; }
  .mes-burger { display: inline-flex; }
  #mes-account { display: none; }
  .mes-myplans .lbl, .mes-myplans-spark { display: none; }
  .mes-myplans { width: 48px; padding: 0; justify-content: center; }
  .mes-myplans-cal { font-size: 21px; }
}
@media (max-width: 380px) { .mes-logo-text { font-size: 15px; } .mes-logo-mark { width: 42px; height: 42px; } }

/* mobile menu (off-canvas drawer) */
.mes-mobilenav { position: fixed; inset: 0; z-index: 150; display: none; }
.mes-mobilenav.open { display: block; }
.mes-mobilenav-scrim { position: absolute; inset: 0; background: rgba(18,24,38,.45); }
.mes-mobilenav-panel { position: absolute; top: 0; right: 0; width: min(360px, 88vw); height: 100%; background: #fff; box-shadow: -10px 0 40px rgba(20,28,45,.2); padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
.mes-mobilenav-panel .mes-mn-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.mes-mobilenav-panel .mes-mn-head .mes-logo-mark { width: 38px; height: 38px; font-size: 20px; }
.mes-mn-top { display: flex; align-items: center; gap: 12px; padding: 13px 12px; border-radius: 12px; font-size: 15.5px; font-weight: 600; color: var(--ink); text-decoration: none; }
.mes-mn-top:hover, .mes-mn-top:focus-visible { background: var(--pink-50); outline: none; }
.mes-mn-top[aria-current="page"] { background: var(--pink-50); color: var(--pink-d); }
.mes-mn-top .ti { font-size: 21px; }
.mes-mn-plans { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 999px; font-size: 15.5px; font-weight: 800; color: #fff; text-decoration: none; background: linear-gradient(135deg, var(--pink), var(--pink-d)); box-shadow: 0 8px 18px rgba(212,83,126,.3); margin-bottom: 6px; }
.mes-mn-plans .ti { font-size: 20px; }
/* accordion group header (Parks / Resorts & Dining) — a disclosure button */
.mes-mn-acc { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 12px; border: none; background: none; border-radius: 12px;
  font-family: inherit; font-size: 15.5px; font-weight: 600; color: var(--ink); cursor: pointer; text-align: left; }
.mes-mn-acc .mes-mn-acclabel { flex: 1; }
.mes-mn-acc:hover, .mes-mn-acc:focus-visible { background: var(--pink-50); outline: none; }
.mes-mn-acc:focus-visible { box-shadow: 0 0 0 2px var(--pink); }
.mes-mn-acc > .ti:first-child { font-size: 21px; }
.mes-mn-accchev { font-size: 16px; color: var(--ink-3); transition: transform .18s ease; }
.mes-mn-acc[aria-expanded="true"] .mes-mn-accchev { transform: rotate(180deg); }
.mes-mn-sub { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 6px 6px; }
.mes-mn-sub[hidden] { display: none; }
/* full-width, touch-friendly destination rows (icon tile + title + description) */
.mes-mn-row { display: flex; align-items: center; gap: 11px; min-height: 44px; padding: 9px 12px; border-radius: 12px; text-decoration: none; }
.mes-mn-row:hover, .mes-mn-row:focus-visible { background: var(--line-2); outline: none; }
.mes-mn-row:focus-visible { box-shadow: 0 0 0 2px var(--pink); }
.mes-mn-rowtile { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: 19px; }
.mes-mn-rowbody { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mes-mn-rowtitle { font-size: 14.5px; font-weight: 700; color: var(--navy); }
.mes-mn-rowdesc { font-size: 12px; color: var(--ink-2); line-height: 1.3; }
.mes-mn-row[aria-current="page"] { background: var(--pink-50); }
.mes-mn-row[aria-current="page"] .mes-mn-rowtitle { color: var(--pink-d); }
.mes-mn-all { justify-content: flex-start; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--pink-d); padding-left: 14px; }
.mes-mn-all .ti { font-size: 15px; }
/* icon-tile tints in the drawer reuse the mega-menu accents */
.mes-mn-row.mes-mm-pink   .mes-mn-rowtile { background: var(--pink-50); color: var(--pink-d); }
.mes-mn-row.mes-mm-sky    .mes-mn-rowtile { background: var(--sky-50); color: var(--sky-d); }
.mes-mn-row.mes-mm-green  .mes-mn-rowtile { background: var(--grn-50); color: var(--grn-d); }
.mes-mn-row.mes-mm-purple .mes-mn-rowtile { background: var(--purple-50); color: var(--purple-d); }
.mes-mn-row.mes-mm-amber  .mes-mn-rowtile { background: var(--amb-50); color: var(--amb-d); }
.mes-mn-row.mes-mm-teal   .mes-mn-rowtile { background: #e2f4f0; color: var(--teal-d); }
/* icon tone in the drawer */
.mes-mn-top .ti.mes-tone-pink, .mes-mn-acc .ti.mes-tone-pink { color: var(--pink); } .mes-mn-top .ti.mes-tone-blue, .mes-mn-top .ti.mes-tone-sky, .mes-mn-acc .ti.mes-tone-sky { color: var(--sky); }
.mes-mn-top .ti.mes-tone-green, .mes-mn-acc .ti.mes-tone-green { color: var(--grn); } .mes-mn-top .ti.mes-tone-purple, .mes-mn-acc .ti.mes-tone-purple { color: var(--purple); } .mes-mn-top .ti.mes-tone-amber, .mes-mn-acc .ti.mes-tone-amber { color: var(--amb); }

/* search overlay */
.mes-search-overlay { position: fixed; inset: 0; z-index: 160; display: none; padding: 8vh 16px 0; background: rgba(18,24,38,.5); }
.mes-search-overlay.open { display: block; }
.mes-search-box { max-width: 640px; margin: 0 auto; background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-3); overflow: hidden; }
.mes-search-in { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.mes-search-in input { border: none; outline: none; font-size: 17px; width: 100%; font-family: inherit; color: var(--ink); }
.mes-search-in .ti { font-size: 22px; color: var(--pink); }
.mes-search-results { max-height: 60vh; overflow-y: auto; padding: 6px; }
.mes-search-results a { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 11px; text-decoration: none; color: var(--ink); }
.mes-search-results a:hover, .mes-search-results a.sel { background: var(--pink-50); }
.mes-search-results .r-type { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-3); flex: 0 0 auto; }
.mes-search-results .r-title { font-weight: 600; font-size: 14.5px; }
.mes-search-results .r-sub { font-size: 12.5px; color: var(--ink-3); }

/* =============================================================================
   Footer
   ============================================================================= */
.mes-footer { background: var(--navy); color: #cfd6e4; margin-top: 40px; }
.mes-footer a { color: #cfd6e4; text-decoration: none; }
.mes-footer a:hover { color: #fff; }
.mes-footer-top { display: grid; gap: 28px; padding: 44px 0 34px; grid-template-columns: 1.4fr repeat(3, 1fr); }
@media (max-width: 800px) { .mes-footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .mes-footer-top { grid-template-columns: 1fr; } }
.mes-footer h4 { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 12px; }
.mes-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 14px; }
.mes-footer-brand .mes-logo { color: #fff; }
.mes-footer-brand p { font-size: 13.5px; color: #9aa4b8; max-width: 30ch; margin: 12px 0 0; }
/* admin-managed social icons (footer) */
.mes-footer-social { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
.mes-footer-social .mes-social-link { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.08); color: #cdd4e2; font-size: 19px; transition: background .15s ease, color .15s ease, transform .15s ease; }
.mes-footer-social .mes-social-link:hover { background: var(--pink); color: #fff; transform: translateY(-2px); }
/* full brand lock-up (footer / About) — mark on a pale ring so the navy line-art stays
   readable on the dark footer, plus the wordmark + the curved-style tagline. */
.mes-footer-badge, .mes-brand-lockup { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
.mes-badge-ring { width: 78px; height: 78px; border-radius: 50%; background: rgba(255,255,255,.94); display: grid; place-items: center; flex: 0 0 auto; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.mes-badge-ring img { width: 62px; height: 62px; display: block; }
.mes-badge-word { display: block; line-height: 1.05; }
.mes-badge-word .l1 { display: block; font-size: 21px; font-weight: 800; color: #fff; }
.mes-badge-word .l2 { display: block; font-size: 21px; font-weight: 800; color: var(--wm-str); }
.mes-badge-word .l2 .amp { color: var(--wm-amp); }
.mes-badge-word small { display: block; font-size: 9.5px; letter-spacing: .09em; font-weight: 700; text-transform: uppercase; color: rgba(255,255,255,.55); margin-top: 5px; }
/* On light backgrounds (About page) the ring can be pale-blue and the wordmark navy/coral. */
.mes-brand-lockup.on-light .mes-badge-ring { background: var(--sky-50); box-shadow: inset 0 0 0 2px #dbe9f7; }
.mes-brand-lockup.on-light .mes-badge-word .l1 { color: var(--wm-ink); }
.mes-brand-lockup.on-light .mes-badge-word .l2 { color: var(--wm-str); }
.mes-brand-lockup.on-light .mes-badge-word .l2 .amp { color: var(--wm-amp); }
.mes-brand-lockup.on-light .mes-badge-word small { color: var(--ink-3); }
.mes-footer-values { display: flex; gap: 22px; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.1); padding: 22px 0; }
.mes-footer-values div { display: flex; align-items: center; gap: 9px; font-size: 13px; color: #b9c1d2; }
.mes-footer-values .ti { color: var(--pink-100); font-size: 20px; }
.mes-footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 18px 0; font-size: 12.5px; color: #8a93a8; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* =============================================================================
   Hero (homepage)
   ============================================================================= */
.mes-hero { background: linear-gradient(180deg, #eaf2fd 0%, var(--bg) 100%); position: relative; overflow: hidden; }
/* padding-block only — keep the container's horizontal gutters (was `… 0`, which made the
   hero + feature card sit edge-to-edge, obvious on mobile). */
.mes-hero-in { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; padding-block: clamp(30px, 5vw, 60px); }
@media (max-width: 900px) { .mes-hero-in { grid-template-columns: 1fr; } }
.mes-hero h1 { font-size: clamp(34px, 6vw, 52px); letter-spacing: -.02em; margin: 12px 0 14px; }
.mes-hero h1 .heart { color: var(--pink); }
.mes-hero p.lede { font-size: clamp(15px, 2vw, 18px); color: var(--ink-2); max-width: 46ch; margin: 0 0 22px; }
.mes-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.mes-hero-art { position: relative; min-height: 260px; }
.mes-hero-liveupdate { max-width: 380px; margin-left: auto; }
.mes-hero-planlink { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--pink-d); text-decoration: none; }
.mes-hero-planlink:hover { text-decoration: underline; }

/* ===== editorial homepage ===== */
/* hero feature card (CMS-driven) */
.mes-herofeat { max-width: 400px; margin-left: auto; display: block; text-decoration: none; color: var(--ink); overflow: hidden; padding: 0; }
.mes-herofeat.mes-card-pad { padding: 18px; }
.mes-herofeat-media { aspect-ratio: 16/9; overflow: hidden; background: linear-gradient(135deg, var(--sky-50), var(--pink-50)); display: flex; align-items: center; justify-content: center; }
.mes-herofeat-media img { width: 100%; height: 100%; object-fit: cover; }
.mes-herofeat-media .ti { font-size: 44px; color: rgba(255,255,255,.85); }
.mes-herofeat-body { padding: 16px 18px 18px; }
.mes-herofeat-body h3 { font-size: 19px; margin: 8px 0 6px; line-height: 1.25; }
.mes-herofeat-body p { font-size: 14px; color: var(--ink-2); margin: 0 0 12px; }
.mes-herofeat-kicker { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mes-herofeat-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--ink-3); border-top: 1px solid var(--line-2); padding-top: 12px; }
.mes-herofeat-foot .mes-link { font-weight: 700; }
@media (max-width: 900px) { .mes-herofeat, .mes-hero-liveupdate { max-width: 100%; margin: 22px 0 0; } .mes-hero-art { min-height: 0; } }

/* compact live strip */
.mes-livestrip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; padding: 11px 16px; border-radius: var(--r-pill, 999px); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1, 0 1px 3px rgba(20,35,58,.06)); text-decoration: none; color: var(--ink-2); font-size: 13.5px; }
.mes-livestrip:hover { border-color: var(--pink-100); }
.mes-livestrip-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-3); flex: 0 0 auto; }
.mes-livestrip.is-fresh .mes-livestrip-dot { background: var(--grn); box-shadow: 0 0 0 3px var(--grn-50); }
.mes-livestrip.is-stale .mes-livestrip-dot { background: var(--amb); }
.mes-livestrip.is-closed .mes-livestrip-dot, .mes-livestrip.is-offline .mes-livestrip-dot { background: var(--ink-3); }
.mes-livestrip-text { flex: 1; min-width: 0; color: var(--ink); }
.mes-livestrip-text strong { color: var(--navy); }
.mes-livestrip-cta { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--pink-d); white-space: nowrap; }

/* topic cards */
.mes-topicgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mes-topic { padding: 20px; text-decoration: none; color: var(--ink); display: block; }
.mes-topic-ico { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 12px; }
.mes-topic h3 { font-size: 16.5px; margin: 0 0 5px; }
.mes-topic p { font-size: 13.5px; color: var(--ink-2); margin: 0; }
@media (max-width: 900px) { .mes-topicgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .mes-topicgrid { grid-auto-flow: column; grid-auto-columns: 78%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; margin: 0 calc(-1 * var(--sp-4, 16px)); padding-left: var(--sp-4, 16px); padding-right: var(--sp-4, 16px); } .mes-topic { scroll-snap-align: start; } }

/* latest news editorial: lead + supporting */
.mes-news-editorial { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: start; }
.mes-news-lead { display: block; text-decoration: none; color: var(--ink); overflow: hidden; }
.mes-news-lead .mes-newslead-media { aspect-ratio: 16/9; overflow: hidden; background: linear-gradient(135deg, var(--sky-50), var(--pink-50)); display: flex; align-items: center; justify-content: center; position: relative; }
.mes-news-lead .mes-newslead-media img { width: 100%; height: 100%; object-fit: cover; }
.mes-news-lead .mes-newslead-media .ti { font-size: 48px; color: rgba(255,255,255,.85); }
.mes-news-lead .mes-newslead-body { padding: 18px 20px 20px; }
.mes-news-lead h3 { font-size: clamp(20px, 2.4vw, 26px); margin: 8px 0 8px; line-height: 1.2; }
.mes-news-lead p { font-size: 14.5px; color: var(--ink-2); margin: 0 0 12px; }
.mes-news-side { display: flex; flex-direction: column; gap: 2px; }
.mes-news-side a { display: flex; gap: 12px; padding: 12px 6px; border-top: 1px solid var(--line-2); text-decoration: none; color: var(--ink); }
.mes-news-side a:first-child { border-top: none; }
.mes-news-side a:hover h4 { color: var(--pink-d); }
.mes-news-side .mes-newsside-ico { width: 42px; height: 42px; border-radius: 11px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: var(--pink-50); color: var(--pink-d); font-size: 20px; overflow: hidden; }
.mes-news-side .mes-newsside-ico img { width: 100%; height: 100%; object-fit: cover; }
.mes-news-side h4 { font-size: 14.5px; margin: 0 0 3px; line-height: 1.3; }
.mes-news-side .mes-newsside-meta { font-size: 12px; color: var(--ink-3); }
@media (max-width: 820px) { .mes-news-editorial { grid-template-columns: 1fr; } }

/* popular guides editorial */
.mes-guides-editorial { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .mes-guides-editorial { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .mes-guides-editorial { grid-template-columns: 1fr; } }
.mes-guidecard { display: block; text-decoration: none; color: var(--ink); overflow: hidden; }
.mes-guidecard .mes-guidecard-media { aspect-ratio: 16/9; overflow: hidden; background: linear-gradient(135deg, var(--sky-50), var(--pink-50)); display: flex; align-items: center; justify-content: center; }
.mes-guidecard .mes-guidecard-media img { width: 100%; height: 100%; object-fit: cover; }
.mes-guidecard .mes-guidecard-media .ti { font-size: 38px; color: rgba(255,255,255,.85); }
.mes-guidecard-body { padding: 14px 16px 16px; }
.mes-guidecard-body h3 { font-size: 16px; margin: 6px 0 5px; }
.mes-guidecard-body p { font-size: 13.5px; color: var(--ink-2); margin: 0 0 8px; }

/* planner promo (consolidated) */
.mes-planner-promo { display: grid; grid-template-columns: 1.4fr .6fr; gap: 8px; align-items: center; padding: clamp(20px, 3vw, 32px); background: linear-gradient(135deg, var(--pink-50), #fff); border-color: var(--pink-100); }
.mes-planner-copy h2 { font-size: clamp(22px, 3vw, 28px); margin: 10px 0 8px; }
.mes-planner-copy > p { font-size: 15px; color: var(--ink-2); max-width: 52ch; margin: 0 0 16px; }
.mes-planner-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.mes-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--pink-100); color: var(--pink-d); font-weight: 700; font-size: 13.5px; text-decoration: none; }
.mes-chip:hover { background: var(--pink); color: #fff; border-color: var(--pink); }
.mes-planner-benefits { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; font-size: 14px; }
.mes-planner-benefits li { display: flex; gap: 8px; align-items: flex-start; }
.mes-planner-benefits .ti { color: var(--grn); flex: 0 0 auto; }
.mes-planner-art { text-align: center; }
/* body.mes-site img (0,1,2) beats a single-class rule, so scope this to win the cap. */
body.mes-site .mes-planner-art img { width: auto; max-width: 100%; height: auto; max-height: 360px; border-radius: 26px; box-shadow: 0 20px 55px rgba(22, 35, 58, .18); }
.mes-planner-art a { display: inline-block; border-radius: 26px; transition: transform .18s ease; }
.mes-planner-art a:hover { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .mes-planner-art a:hover { transform: none; } }
@media (max-width: 820px) { .mes-planner-promo { grid-template-columns: 1fr; } .mes-planner-art { display: none; } }
@media (max-width: 440px) { .mes-planner-benefits { grid-template-columns: 1fr; } }

/* compact live park section */
.mes-live-parks .mes-park-card { padding: 14px; }
.mes-live-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 16px; }
@media (max-width: 900px) { .mes-live-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .mes-live-tiles { grid-template-columns: repeat(2, 1fr); } }
.mes-live-more { text-align: center; margin-top: 16px; font-size: 13.5px; color: var(--ink-3); }
@media (max-width: 560px) { .mes-live-parks { grid-auto-flow: column; grid-auto-columns: 74%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; } .mes-live-parks .mes-park-card { scroll-snap-align: start; } }
.mes-newsletter { text-align: center; background: linear-gradient(135deg, var(--sky-50), #fff); border-color: #cfe4f7; position: relative; overflow: hidden; }
/* restrained faded stroller watermark — decorative (CSS only), never behind the form text */
.mes-newsletter::before { content: ""; position: absolute; right: -18px; bottom: -22px; width: 130px; height: 130px; background: url(/assets/brand/mouse-ears-stroller.svg) no-repeat center / contain; opacity: .08; pointer-events: none; }
.mes-newsletter > * { position: relative; }

/* About page brand-story lock-up */
.mes-about-brand { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; background: linear-gradient(135deg, var(--sky-50), #fff); border-color: #cfe4f7; }
.mes-about-brand .mes-brand-lockup { flex: 0 0 auto; }
.mes-about-brand-copy { flex: 1; min-width: 260px; }
.mes-about-brand-copy h2 { margin: 0 0 8px; font-size: clamp(18px, 2.4vw, 24px); }
.mes-about-brand-copy p { margin: 0; color: var(--ink-2); font-size: 15px; }
@media (max-width: 560px) { .mes-about-brand { justify-content: center; text-align: center; } .mes-about-brand .mes-brand-lockup { flex-direction: column; text-align: center; } }

/* small decorative sky illustration container */
.mes-illus { width: 100%; height: 100%; }

/* ---- article / guide reading layout ---- */
.mes-read { max-width: 760px; margin: 0 auto; padding: clamp(24px, 4vw, 40px) 20px 20px; }
.mes-prose { font-size: 16.5px; line-height: 1.72; color: var(--ink); }
.mes-prose h2 { font-size: 22px; margin: 30px 0 8px; scroll-margin-top: calc(var(--header-h) + 10px); }
.mes-prose p { margin: 0 0 16px; }
.mes-prose a { color: var(--pink-d); }
/* Buttons inside prose keep their own text colour — the generic prose-link rule above
   must not tint a primary (pink) button's label dark and make it unreadable. */
.mes-prose a.mes-btn-primary { color: #fff; }
.mes-prose a.mes-btn { text-decoration: none; }
.mes-breadcrumb a { text-decoration: none; }
.mes-breadcrumb a:hover { text-decoration: underline; }

/* ---- generic page header band ---- */
.mes-pagehead { background: linear-gradient(180deg, #eaf2fd, var(--bg)); border-bottom: 1px solid var(--line); }
.mes-pagehead-in { padding: clamp(28px, 5vw, 48px) 0; }
.mes-pagehead h1 { font-size: clamp(28px, 5vw, 42px); margin: 10px 0 8px; }
.mes-pagehead p { font-size: 16px; color: var(--ink-2); max-width: 60ch; margin: 0; }

/* ---- editorial content blocks (rendered by assets/js/shared/content-blocks.js) ---- */
.mes-prose h3 { font-size: 18px; margin: 24px 0 6px; scroll-margin-top: calc(var(--header-h) + 10px); }
.mes-prose ul, .mes-prose ol { margin: 0 0 16px; padding-left: 22px; }
.mes-prose li { margin: 4px 0; }
.mes-block-figure { margin: 22px 0; }
.mes-block-figure img { width: 100%; height: auto; border-radius: var(--radius, 14px); display: block; }
.mes-block-figure figcaption { font-size: 13px; color: var(--ink-3); margin-top: 8px; text-align: center; }
.mes-block-quote { margin: 22px 0; padding: 4px 0 4px 18px; border-left: 4px solid var(--pink-100); font-size: 18px; color: var(--ink-2); font-style: italic; }
.mes-block-quote cite { display: block; margin-top: 8px; font-size: 14px; color: var(--ink-3); font-style: normal; }
.mes-block-divider { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }
.mes-block-btn { margin: 20px 0; }
.mes-block-tablewrap { overflow-x: auto; margin: 22px 0; }
.mes-block-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.mes-block-table th, .mes-block-table td { border: 1px solid var(--line); padding: 9px 12px; text-align: left; vertical-align: top; }
.mes-block-table th { background: var(--sky-50); color: var(--navy); font-weight: 700; }
.mes-block-callout { margin: 22px 0; border-radius: 14px; padding: 14px 16px; border: 1px solid var(--line); background: #fff; }
.mes-callout-head { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 6px; }
.mes-callout-body p:last-child { margin-bottom: 0; }
.mes-callout-info { background: var(--sky-50); border-color: #cfe4f7; } .mes-callout-info .mes-callout-head { color: var(--sky-d); }
.mes-callout-grn { background: var(--grn-50); border-color: #cbe7d3; } .mes-callout-grn .mes-callout-head { color: var(--grn-d); }
.mes-callout-amb { background: var(--amb-50); border-color: #eed5ab; } .mes-callout-amb .mes-callout-head { color: var(--amb-d); }
.mes-callout-purple { background: var(--purple-50); border-color: #d9cef0; } .mes-callout-purple .mes-callout-head { color: var(--purple-d); }
.mes-block-proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 22px 0; }
.mes-pc-col { border-radius: 14px; padding: 14px 16px; border: 1px solid var(--line); }
.mes-pc-good { background: var(--grn-50); border-color: #cbe7d3; } .mes-pc-bad { background: var(--amb-50); border-color: #eed5ab; }
.mes-pc-col h4 { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; font-size: 15px; }
.mes-pc-col ul { margin: 0; }
.mes-block-faq { margin: 22px 0; display: flex; flex-direction: column; gap: 8px; }
.mes-faq-item { border: 1px solid var(--line); border-radius: 12px; padding: 4px 14px; background: #fff; }
.mes-faq-item summary { cursor: pointer; font-weight: 600; padding: 10px 0; }
.mes-faq-a { padding: 0 0 10px; }
.mes-block-price { margin: 22px 0; border-radius: 14px; padding: 14px 16px; background: var(--amb-50); border: 1px solid #eed5ab; }
.mes-price-level { display: flex; align-items: baseline; gap: 10px; } .mes-price-marks { font-size: 20px; font-weight: 800; color: var(--amb-d); letter-spacing: 2px; }
.mes-price-from { font-size: 14px; color: var(--ink-2); }
.mes-block-ref { margin: 22px 0; border-radius: 14px; padding: 14px 16px; border: 1px solid var(--line); background: var(--sky-50); }
.mes-ref-head { display: flex; align-items: center; gap: 8px; font-weight: 700; } .mes-ref-head a { color: var(--sky-d); }
.mes-block-cta { margin: 24px 0; border-radius: 16px; padding: 18px 20px; background: var(--pink-50); border: 1px solid var(--pink-100); display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.mes-block-cta i { color: var(--pink-d); font-size: 22px; }
.mes-block-related { margin: 22px 0; } .mes-block-related h4 { margin: 0 0 8px; }
.mes-block-live { margin: 18px 0; border-radius: 12px; padding: 12px 14px; background: var(--purple-50); border: 1px dashed #c8b8ec; color: var(--purple-d); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.mes-block-embed { position: relative; padding-top: 56.25%; margin: 22px 0; border-radius: 14px; overflow: hidden; background: #000; }
.mes-block-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 620px) { .mes-block-proscons { grid-template-columns: 1fr; } }

@media print { .mes-header, .mes-footer, .mes-mobilenav, .mes-search-overlay { display: none !important; } }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } html { scroll-behavior: auto; } }

/* ============================================================================
   Advertising — clearly commercial, brand-fitting, layout-stable (no CLS).
   Empty slots are `hidden` by markup + collapsed by ads.js, so they occupy no
   space until an ad actually resolves. Never a blank box.
   ============================================================================ */
/* Unfilled slots take no space (but stay in the layout so the lazy-loader can observe
   them); spacing is applied only once an ad actually fills. */
.mes-ad { margin: 0; }
.mes-ad.is-filled { margin: 26px 0; }
.mes-ad[hidden], .mes-ad.is-empty { display: none !important; margin: 0; }
.mes-ad-wrap { width: 100%; }
.mes-ad-card {
  display: inline-block; max-width: 100%; position: relative;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: #fbfcfe; padding: 10px 10px 8px; box-shadow: var(--sh-1, 0 1px 3px rgba(20,30,50,.06));
  vertical-align: top;
}
.mes-ad-plain { border: 0; background: transparent; box-shadow: none; padding: 0; }
.mes-ad-label {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 6px 2px;
}
.mes-ad-plain .mes-ad-label { margin-bottom: 4px; }
.mes-ad-link { display: block; text-decoration: none; color: inherit; border-radius: var(--r-sm); outline-offset: 3px; }
.mes-ad-link:focus-visible { outline: 2px solid var(--pink); }
.mes-ad-img {
  display: block; max-width: 100%; height: auto; border-radius: var(--r-sm);
  /* reserve the slot's shape before the image paints, using the format ratio */
  aspect-ratio: var(--ad-ar, auto); background: #eef1f6;
}
/* native sponsored card — may harmonise with editorial, but is always labelled */
.mes-ad-native { max-width: 360px; padding: 0; overflow: hidden; }
.mes-ad-native .mes-ad-label { position: absolute; top: 8px; left: 8px; z-index: 2; background: rgba(255,255,255,.9); padding: 2px 6px; border-radius: var(--r-pill); margin: 0; }
.mes-ad-native .mes-ad-img { border-radius: 0; aspect-ratio: 16 / 9; object-fit: cover; }
.mes-ad-native-body { display: block; padding: 12px 14px 14px; }
.mes-ad-headline { display: block; font-weight: 800; font-size: 15px; color: var(--ink); line-height: 1.3; }
.mes-ad-copy { display: block; font-size: 13px; color: var(--ink-2); margin-top: 4px; line-height: 1.45; }
.mes-ad-host { display: block; font-size: 11px; color: var(--ink-3); margin-top: 8px; }
.mes-ad-cta { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--pink-d); }
.mes-ad-native .mes-ad-link:hover .mes-ad-cta { text-decoration: underline; }
/* gentle reveal — suppressed under reduced-motion via the global rule above */
.mes-ad-in { animation: mes-ad-fade .35s ease both; }
@keyframes mes-ad-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* third-party ad tag: sandboxed iframe, reserved size, no scroll */
.mes-ad-frame { display: block; border: 0; max-width: 100%; background: #eef1f6; border-radius: var(--r-sm); overflow: hidden; }
/* mobile: never let two units crowd; give inline slots breathing room */
@media (max-width: 700px) { .mes-ad { margin: 22px 0; } .mes-ad-native { max-width: 100%; } }

/* ============================================================================
   Legal & privacy: readable article pages, consent manager, footer legal row.
   ============================================================================ */
.mes-legal-wrap { padding-block: clamp(24px, 4vw, 48px); }
.mes-legal { max-width: 760px; margin: 0 auto; }
.mes-legal-h1 { font-size: clamp(26px, 4vw, 38px); margin: 0 0 10px; color: var(--navy); }
.mes-legal-lead { font-size: 18px; color: var(--ink-2); margin: 0 0 18px; }
.mes-legal-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; font-size: 13px; color: var(--ink-3);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 12px 0; margin: 0 0 22px; }
.mes-legal-meta span { display: inline-flex; align-items: center; gap: 5px; }
.mes-legal-print { margin-left: auto; background: none; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 6px 12px; font: inherit; font-size: 13px; color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.mes-legal-print:hover { border-color: var(--pink-100); color: var(--pink-d); }
.mes-legal-toc { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 20px; margin: 0 0 26px; }
.mes-legal-toc-h { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); margin: 0 0 8px; }
.mes-legal-toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 28px; }
.mes-legal-toc li { margin: 3px 0; break-inside: avoid; }
.mes-legal-toc a { color: var(--pink-d); text-decoration: none; font-size: 14px; }
.mes-legal-toc a:hover { text-decoration: underline; }
.mes-legal-prose h2 { font-size: 20px; color: var(--navy); margin: 30px 0 8px; scroll-margin-top: 100px; }
.mes-legal-prose h3 { font-size: 16px; color: var(--navy); margin: 20px 0 6px; }
.mes-legal-prose p, .mes-legal-prose li { color: var(--ink); line-height: 1.65; }
.mes-legal-tablewrap { overflow-x: auto; margin: 16px 0; }
.mes-legal-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mes-legal-table th, .mes-legal-table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.mes-legal-table th { background: var(--bg); color: var(--ink-2); font-weight: 700; }
.mes-legal-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 18px; }
.mes-legal-card { text-decoration: none; color: inherit; display: block; }
.mes-legal-card h2 { font-size: 16px; margin: 0 0 4px; color: var(--navy); }
.mes-legal-card p { font-size: 13.5px; color: var(--ink-2); margin: 0 0 8px; }
@media (max-width: 620px) { .mes-legal-toc ol { columns: 1; } }

/* footer legal row */
.mes-footer-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; border-top: 1px solid rgba(255,255,255,.14); margin-top: 22px; padding-top: 16px; }
.mes-footer-legal a, .mes-footer-cookiebtn { color: rgba(255,255,255,.82); text-decoration: none; font-size: 13px; background: none; border: none; padding: 0; font: inherit; cursor: pointer; }
.mes-footer-legal a:hover, .mes-footer-cookiebtn:hover { color: #fff; text-decoration: underline; }

/* consent banner */
.mes-consent { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 200; background: #fff; border: 1px solid var(--line);
  border-radius: 18px; box-shadow: 0 18px 44px rgba(20,35,58,.22); padding: 16px 18px; }
.mes-consent-in { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; max-width: 1100px; margin: 0 auto; }
.mes-consent-body { flex: 1; min-width: 260px; }
.mes-consent-body strong { color: var(--navy); }
.mes-consent-body p { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-2); }
.mes-consent-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 640px) { .mes-consent-actions { width: 100%; } .mes-consent-actions .mes-btn { flex: 1; justify-content: center; } }
/* consent settings dialog */
.mes-consent-panel { position: fixed; inset: 0; z-index: 210; background: rgba(18,24,38,.5); display: flex; align-items: center; justify-content: center; padding: 16px; }
.mes-consent-dialog { background: #fff; border-radius: var(--r-lg); max-width: 560px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: var(--sh-3); }
.mes-consent-dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.mes-consent-dialog-head h2 { margin: 0; font-size: 18px; }
.mes-consent-dialog-body { padding: 8px 18px 4px; }
.mes-consent-cat { padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.mes-consent-cat-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mes-consent-cat-h strong { color: var(--navy); }
.mes-consent-cat p { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); }
.mes-consent-always { font-size: 12px; font-weight: 700; color: var(--grn-d); }
.mes-consent-dialog-foot { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; padding: 14px 18px; border-top: 1px solid var(--line); }
/* accessible toggle switch */
.mes-switch { position: relative; display: inline-block; width: 44px; height: 26px; flex: 0 0 auto; }
.mes-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.mes-switch-t { position: absolute; inset: 0; background: #cfd6e2; border-radius: 999px; transition: background .15s ease; }
.mes-switch-t::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: transform .15s ease; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.mes-switch input:checked + .mes-switch-t { background: var(--grn); }
.mes-switch input:checked + .mes-switch-t::after { transform: translateX(18px); }
.mes-switch input:focus-visible + .mes-switch-t { outline: 2px solid var(--pink); outline-offset: 2px; }

@media print {
  .mes-header, .mes-footer, .mes-consent, .mes-consent-panel, .mes-mobilenav, .mes-legal-print { display: none !important; }
  .mes-legal { max-width: none; }
  .mes-legal-prose h2 { page-break-after: avoid; }
}

/* ---------------- Maintenance mode (public overlay + staff banner) ---------------- */
html.mes-maint-locked, html.mes-maint-locked body { overflow: hidden; }
.mes-maint {
  position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: linear-gradient(160deg, #16233a 0%, #24344f 60%, #993556 160%); color: #fff;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.mes-maint-card { max-width: 560px; text-align: center; }
.mes-maint-mark { width: 84px; height: 84px; margin: 0 auto 20px; border-radius: 22px; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; }
.mes-maint-mark img { filter: brightness(0) invert(1); }
.mes-maint h1 { color: #fff; font-size: clamp(26px, 5vw, 40px); margin: 0 0 14px; }
.mes-maint p { color: rgba(255,255,255,.9); font-size: clamp(15px, 2.4vw, 18px); line-height: 1.55; margin: 0 auto 10px; max-width: 46ch; }
.mes-maint .mes-maint-sub { color: rgba(255,255,255,.6); font-size: 14px; margin-top: 18px; }

.mes-maint-banner {
  position: sticky; top: 0; z-index: 400; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #7a1f2b; color: #fff; padding: 9px 16px; font-size: 13.5px; font-weight: 500;
}
.mes-maint-banner i { font-size: 18px; }
.mes-maint-banner a { color: #fff; text-decoration: underline; margin-left: auto; font-weight: 700; }