/* ============================================================
   MERIDIAN — BRIGHT & AIRY LANDING PAGE SYSTEM
   Single source of truth for the light landing-page treatment.
   Verified WCAG 2.2 AA on 2026-09-07. Do not edit a value without
   re-running the contrast check.

   The design move: the brand does not change, the ROLES invert.
   The dark site spends navy as a background. Here navy becomes INK,
   gold becomes a FILL, and the neon accents get deep text variants.

   Why that matters: on a light ground the original accents fail badly
   as text - gold 1.78:1, cyan 1.50:1, emerald 1.80:1. But navy ink on
   the ORIGINAL gold fill measures 9.80:1, so the brand gold survives
   intact wherever it is a surface rather than a letterform.
   ============================================================ */

:root {
  /* grounds */
  --m-paper:      #F7F9FC;   /* page ground, faint navy bias - never pure white */
  --m-white:      #FFFFFF;   /* cards, raised surfaces */
  --m-mist:       #EDF1F7;   /* recessed panels, table headers */

  /* ink - the brand navy, promoted from background to type */
  --m-ink:        #0A1428;   /* 17.41:1 on paper. Headlines, body. */
  --m-ink-2:      #33425C;   /*  9.60:1 on paper. Secondary copy. */
  --m-mute:       #586780;   /* passes on paper, white, mist AND the soft wash (4.77:1). Captions, labels. */
  --m-rule:       #DDE4EE;
  --m-rule-2:     #C3CEDE;

  /* gold - FILL ONLY. Never use --m-gold for text on a light ground. */
  --m-gold:       #E0B864;   /* the brand gold, unchanged */
  --m-gold-hi:    #F0CB86;   /* hover */
  --m-gold-lo:    #C79545;   /* pressed / gradient foot */
  --m-on-gold:    #0A1428;   /* navy on gold = 9.80:1 */
  --m-gold-wash:  #FBF3E4;   /* tinted panel */

  /* text-capable accent variants, derived from the dark-site accents */
  --m-gold-ink:    #7E6637;  /* 4.82:1 on mist, 5.18 paper, 5.46 white - all three grounds */
  --m-cyan-ink:    #1F707F;  /* passes on mist too */
  --m-emerald-ink: #18735A;  /* passes on mist too - "good fit", positive states */
  --m-danger-ink:  #A3282B;  /* warnings, Reality Check risk */

  /* non-text only: borders, icons, dividers. >=3.0:1 (WCAG 1.4.11) */
  --m-gold-edge:    #AB8C4C;
  --m-cyan-edge:    #2B9DB3;
  --m-emerald-edge: #22A37E;

  /* type - matches the existing site so the two systems stay one brand */
  --m-display: "Fraunces", Georgia, serif;
  --m-text:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* elevation - light-ground shadows must be navy-tinted, not black */
  --m-shadow:    0 1px 2px rgba(10,20,40,.05), 0 8px 24px -12px rgba(10,20,40,.12);
  --m-shadow-lg: 0 2px 4px rgba(10,20,40,.06), 0 24px 56px -24px rgba(10,20,40,.20);
}

/* ---- primitives ---------------------------------------------------- */

.m-btn-gold {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: 1rem 1.75rem; border-radius: 999px;
  font-family: var(--m-display); font-weight: 700; font-size: 1.05rem;
  color: var(--m-on-gold);
  background: linear-gradient(180deg, var(--m-gold-hi) 0%, var(--m-gold) 60%, var(--m-gold-lo) 100%);
  box-shadow: 0 14px 30px -14px rgba(199,149,69,.7);
  text-decoration: none; border: 0; cursor: pointer;
}
.m-btn-ghost {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .95rem 1.5rem; border-radius: 999px;
  border: 1.5px solid var(--m-rule-2); color: var(--m-ink);
  text-decoration: none; background: transparent;
}
.m-btn-gold:hover { filter: brightness(1.04); }
.m-btn-ghost:hover { border-color: var(--m-gold-edge); }

/* Reality Check family. Frame, label and copy are HTML/CSS - never baked
   into an image - so the module still reads if the Miles art fails. */
.m-rc {
  background: var(--m-white); border: 1px solid var(--m-rule);
  border-left: 4px solid var(--m-gold-edge); border-radius: 10px;
  padding: 1.5rem 1.75rem; box-shadow: var(--m-shadow);
}
.m-rc__label {
  font-family: var(--m-text); font-size: .6875rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--m-gold-ink);
  margin: 0 0 .5rem;
}
.m-rc--warning     { border-left-color: var(--m-danger-ink); }
.m-rc--warning  .m-rc__label { color: var(--m-danger-ink); }
.m-rc--goodfit     { border-left-color: var(--m-emerald-edge); }
.m-rc--goodfit  .m-rc__label { color: var(--m-emerald-ink); }
.m-rc--tip         { border-left-color: var(--m-cyan-edge); }
.m-rc--tip      .m-rc__label { color: var(--m-cyan-ink); }

/* Miles art is decorative support. Aspect-ratio box prevents CLS. */
.m-miles { display: block; height: auto; }
.m-miles--frame { aspect-ratio: 1 / 1; }

:focus-visible { outline: 3px solid var(--m-gold-edge); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}