/* =========================================================
   MenoGlow@Work — Executive (masculine) Design Tokens
   Derived from the MenoGlow@Work design system, re-tuned to
   the Executive Pitch Deck aesthetic: Outfit-bold headlines,
   sharp 4–10px radii, navy gradient panels, hairline structure.
   ========================================================= */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-italic-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/outfit-latin.woff2") format("woff2");
}

:root {
  /* ---------- NAVY BRAND PALETTE (unchanged from @Work) ---------- */
  --navy:          #103365;   /* Primary — headlines, CTAs, the mark */
  --navy-deep:     #0A2547;   /* Deep panels, gradient dark end */
  --navy-bright:   #14457F;   /* Gradient light end */
  --blue-accent:   #3A6DB5;   /* Secondary accent, links, accent words */
  --blue-sky:      #6E9BD6;   /* Highlights on dark, timeline dots */
  --blue-soft:     #BCD2EC;   /* Quiet fills, dividers on dark */
  --blue-pale:     #E9F0F9;   /* Tinted card / section backgrounds */
  --blue-mist:     #F3F7FC;   /* Lightest background tint */
  --ice:           #F8FAFD;   /* Page background — cool off-white */
  --blue-hairline: #DCE7F4;   /* Hairline dividers / borders */

  /* On-dark text ramp (from the executive deck) */
  --on-navy:        #FFFFFF;
  --on-navy-strong: #EAF1FA;
  --on-navy-body:   #DCE7F4;
  --on-navy-muted:  #C9D9EE;
  --on-navy-accent: #9CC0EC;

  /* ---------- Legacy aliases (kept so older MenoGlow code re-themes) ---------- */
  --berry:          var(--navy);
  --berry-light:    var(--blue-sky);
  --berry-dark:     var(--navy-deep);
  --berry-tint:     #EAF1FA;
  --berry-tint-2:   #E3ECF7;
  --berry-pink:     #E8F0FA;
  --berry-hairline: var(--blue-hairline);
  --deep-purple:    var(--navy-deep);
  --orchid:         var(--blue-accent);
  --lavender:       var(--blue-pale);
  --lavender-soft:  var(--blue-mist);
  --dusty-lilac:    #D8E3F2;
  --rose:           var(--blue-sky);
  --soft-pink:      var(--blue-mist);
  --cream:          var(--ice);
  --cool-mist:      var(--blue-pale);
  --soft-blue:      var(--blue-soft);

  /* ---------- SEMANTIC COLORS ---------- */
  --bg:            var(--ice);
  --bg-soft:       var(--blue-pale);
  --bg-cool:       var(--blue-pale);
  --surface:       #ffffff;
  --surface-glass: rgba(255, 255, 255, 0.62);
  --surface-card:  #ffffff;
  --surface-on-dark: rgba(255, 255, 255, 0.07);   /* glass card on navy */
  --border-on-dark:  rgba(255, 255, 255, 0.16);

  --fg:        #1E2A3D;
  --fg-strong: var(--navy);
  --fg-muted:  #5A6678;
  --fg-soft:   #8995A6;
  --fg-on-dark: var(--ice);

  --primary:        var(--navy);
  --primary-hover:  #0C2A54;
  --primary-press:  var(--navy-deep);
  --on-primary:     #ffffff;

  --accent:    var(--blue-accent);
  --highlight: var(--blue-sky);

  --border:        var(--blue-hairline);
  --border-strong: #C6D6EC;
  --divider:       var(--blue-hairline);

  --success: #2E8B6F;
  --warning: #C98A2E;
  --danger:  #C2503F;
  --info:    var(--blue-accent);

  /* ---------- GRADIENTS ---------- */
  --gradient-navy:  linear-gradient(135deg, #0F2F5A 0%, #14457F 100%); /* @kind color */
  --gradient-panel: linear-gradient(150deg, #0F2F5A 0%, #14457F 100%); /* @kind color */
  --gradient-berry: var(--gradient-navy); /* @kind color */
  /* Light-slide wash — barely-there radial light on ice (executive deck bg) */
  --gradient-ice:   radial-gradient(58% 70% at 88% 10%, rgba(110, 155, 214, 0.13) 0%, transparent 58%),
                    radial-gradient(50% 64% at 6% 94%, rgba(58, 109, 181, 0.08) 0%, transparent 55%),
                    var(--ice); /* @kind color */
  /* Dark-slide wash — deeper radial lights on the navy panel gradient */
  --gradient-navy-stage: radial-gradient(55% 65% at 82% 16%, rgba(110, 155, 214, 0.32) 0%, transparent 60%),
                    radial-gradient(52% 62% at 10% 88%, rgba(58, 109, 181, 0.34) 0%, transparent 60%),
                    linear-gradient(135deg, #0F2F5A 0%, #14457F 100%); /* @kind color */
  --gradient-glow:  var(--gradient-ice); /* @kind color */
  --gradient-soft:  linear-gradient(160deg, rgba(233, 240, 249, 0.95) 0%, rgba(243, 247, 252, 0.80) 50%, rgba(188, 210, 236, 0.60) 100%); /* @kind color */
  --gradient-text-navy:  linear-gradient(120deg, #BCD2EC, #6E9BD6); /* @kind color */
  --gradient-text-berry: linear-gradient(120deg, #103365, #2A5BA0); /* @kind color */
  --gradient-swoosh: linear-gradient(90deg, #103365 0%, #6E9BD6 100%); /* @kind color */

  /* ---------- SHADOWS (navy-tinted, never black) ---------- */
  --shadow-xs: 0 1px 2px rgba(16, 51, 101, 0.06);
  --shadow-sm: 0 2px 8px rgba(16, 51, 101, 0.10);
  --shadow-md: 0 10px 24px rgba(16, 51, 101, 0.12);
  --shadow-lg: 0 24px 48px rgba(10, 37, 71, 0.16);
  --shadow-glow: 0 0 60px rgba(110, 155, 214, 0.40);
  --shadow-inner: inset 0 1px 2px rgba(120, 140, 170, 0.20);

  /* ---------- BORDER RADIUS — sharpened (executive) ----------
     The consumer brand ran 12–32px + pills. The @Work executive
     identity is rectilinear: 4–10px, no pills. */
  --radius-xs: 4px;    /* chips, badges, small tags */
  --radius-sm: 6px;    /* buttons, inputs */
  --radius:    8px;    /* base — cards, table row highlights */
  --radius-md: 10px;   /* feature cards, navy panels */
  --radius-lg: 12px;   /* large hero surfaces — maximum */
  --radius-xl: 12px;   /* alias — clamped to max */
  --radius-pill: 6px;  /* legacy alias — pills are retired; resolves to button radius */

  /* ---------- SPACING SCALE (4px base) ---------- */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;

  /* ---------- TYPOGRAPHY TOKENS ----------
     Executive flip: headlines are Outfit SemiBold/Bold.
     Cormorant Garamond is demoted to the wordmark + rare
     editorial italic accents only. */
  --font-headline:   "Outfit", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-body:       "Outfit", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-display:    "Cormorant Garamond", "Garamond", "Times New Roman", serif; /* wordmark + editorial accents ONLY */
  --font-mono:       ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fw-light:   300; /* @kind font */
  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */
  --fw-semi:    600; /* @kind font */
  --fw-bold:    700; /* @kind font */

  --fs-display: clamp(3rem, 6vw, 4.75rem); /* @kind font */
  --fs-h1:      clamp(2.5rem, 5vw, 3.5rem); /* @kind font */
  --fs-h2:      clamp(1.9rem, 4vw, 2.5rem); /* @kind font */
  --fs-h3:      1.625rem; /* @kind font */
  --fs-h4:      1.25rem; /* @kind font */
  --fs-lead:    1.25rem; /* @kind font */
  --fs-body:    1rem; /* @kind font */
  --fs-small:   0.875rem; /* @kind font */
  --fs-xs:      0.75rem; /* @kind font */
  --fs-stat:    clamp(4rem, 8vw, 7rem); /* @kind font */

  --lh-display: 1.0; /* @kind font */
  --lh-heading: 1.1; /* @kind font */
  --lh-body:    1.6; /* @kind font */
  --lh-tight:   1.3; /* @kind font */

  --tracking-tight:  -0.02em; /* @kind font */
  --tracking-normal: 0; /* @kind font */
  --tracking-wide:   0.06em; /* @kind font */
  --tracking-widest: 0.2em; /* @kind font */

  /* ---------- MOTION (composed, no bounce) ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --duration-fast: 160ms; /* @kind other */
  --duration:      240ms; /* @kind other */
  --duration-slow: 480ms; /* @kind other */

  /* ---------- BLUR ---------- */
  --blur-glass: 14px; /* @kind other */
}

/* =========================================================
   SEMANTIC ELEMENT STYLES
   ========================================================= */

.mg-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headlines — Outfit, bold, tight. NOT serif. */
.mg-display,
.mg-h1, .mg-h2, .mg-h3, .mg-h4 {
  font-family: var(--font-headline);
  color: var(--fg-strong);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  margin: 0;
}

.mg-display { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: var(--fw-bold); }
.mg-h1      { font-size: var(--fs-h1);      line-height: var(--lh-heading); font-weight: var(--fw-bold); }
.mg-h2      { font-size: var(--fs-h2);      line-height: var(--lh-heading); font-weight: var(--fw-bold); }
.mg-h3      { font-size: var(--fs-h3);      line-height: var(--lh-heading); font-weight: var(--fw-semi); }
.mg-h4      { font-size: var(--fs-h4);      line-height: var(--lh-tight);   font-weight: var(--fw-semi); letter-spacing: 0; }

/* Accent word inside a headline — plain blue-accent, no italic, no gradient */
.mg-accent { color: var(--blue-accent); }

/* On dark, accent words use blue-sky */
.mg-accent-on-dark { color: var(--blue-sky); }

/* Big stat numeral */
.mg-stat {
  font-family: var(--font-headline);
  font-weight: var(--fw-bold);
  font-size: var(--fs-stat);
  line-height: 0.9;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-strong);
}

/* Wordmark — the ONE place the serif survives: Meno<i>Glow</i>@Work */
.mg-wordmark {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  color: var(--fg-strong);
  letter-spacing: 0;
}
.mg-wordmark i, .mg-wordmark em { font-style: italic; }
.mg-wordmark .at { color: var(--blue-accent); font-style: normal; }

.mg-lead {
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--fg-muted);
  font-weight: var(--fw-regular);
  text-wrap: pretty;
}

.mg-p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  font-weight: var(--fw-regular);
  text-wrap: pretty;
}

.mg-small  { font-size: var(--fs-small); line-height: 1.5; color: var(--fg-muted); }
.mg-caption{ font-size: var(--fs-xs);    line-height: 1.4; color: var(--fg-soft); }

/* Eyebrow — 48×2px rule + tracked uppercase label (the deck's signature) */
.mg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--blue-accent);
}
.mg-eyebrow::before {
  content: "";
  width: 48px;
  height: 2px;
  background: var(--navy);
}
.mg-eyebrow-on-dark { color: var(--blue-soft); }
.mg-eyebrow-on-dark::before { background: var(--blue-sky); }

/* All-caps label */
.mg-label {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.mg-tagline {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  font-size: var(--fs-small);
  color: var(--fg-muted);
}

/* Inline link */
.mg-link {
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid rgba(16, 51, 101, 0.3);
  transition: border-color var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
}
.mg-link:hover { color: var(--primary-hover); border-bottom-color: var(--primary); }

/* Structural rule — replaces the gradient swoosh */
.mg-rule {
  display: inline-block;
  width: 48px;
  height: 2px;
  background: var(--navy);
}
/* Legacy alias */
.mg-swoosh { display: inline-block; width: 48px; height: 2px; background: var(--navy); border-radius: 0; }

/* Card — solid white, hairline border, soft navy shadow (the default) */
.mg-card {
  background: var(--surface);
  border: 1px solid var(--blue-hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* Tinted card — quiet emphasis, no shadow */
.mg-card-tint {
  background: var(--blue-pale);
  border: 1px solid var(--blue-hairline);
  border-radius: var(--radius);
}

/* Navy panel — featured card / dark section */
.mg-panel-navy {
  background: var(--gradient-panel);
  color: var(--on-navy-body);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

/* Glass card — ON DARK ONLY (frosted card over navy) */
.mg-card-glass {
  background: var(--surface-on-dark);
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-md);
}

/* Footer bar — hairline top border, wordmark left, meta right */
.mg-footbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  border-top: 1px solid var(--blue-hairline);
}