/* ═══════════════════════════════════════════════════════════════════════
   MapVisualizer — brand.css
   ─────────────────────────────────────────────────────────────────────
   Shared design system for landing, signin, account, admin, callback.
   The app (app.html) will eventually consume the same tokens but has
   its own additional component vocabulary (panels, toolbars, etc).

   Sections:
     1. Tokens          — Colours, type, spacing, radius, shadow, timing
     2. Reset & base    — Box-sizing, body, headings, links, focus
     3. Atmosphere      — Background gradients, subtle grid texture
     4. Layout          — Page main container
     5. Wordmark + logo — The MapVisualizer wordmark and contour mark
     6. Navigation      — Top nav bar, logo lockup, links, status pill
     7. Buttons         — Primary, secondary, ghost
     8. Typography      — Eyebrows, headlines, body, italic accent
     9. Cards           — Panel, raised, framed
    10. Form controls   — Inputs, labels
    11. Status messages — Success, error, info
    12. Spinner         — Loading indicator
    13. Footer          — Standard footer
    14. Utilities       — Visually-hidden, fadeIn (the only utilities)
    15. Responsive      — Breakpoint adjustments

   Conventions:
   • Component classes prefixed with mv-
   • Element selectors (body, h1, a) stay unprefixed
   • Two breakpoints: 900px (tablet down) and 600px (mobile)
   ═══════════════════════════════════════════════════════════════════════ */


/* ╭─────────────────────────────────────────────────────────────────────╮
   │  1. TOKENS                                                          │
   ╰─────────────────────────────────────────────────────────────────────╯ */

:root {
  /* ─── Colour: surface ─────────────────────────────── */
  --mv-navy:        #0a1220;          /* base background */
  --mv-navy-2:      #101a2e;          /* surface elevated 1 */
  --mv-slate:       #1a2540;          /* surface elevated 2 (panels, cards) */
  --mv-slate-2:     #243352;          /* surface elevated 3 (hover, modals) */

  /* ─── Colour: rules ──────────────────────────────── */
  --mv-rule:        #1f2c47;          /* default border */
  --mv-rule-soft:   #16223a;          /* subtle separators */
  --mv-rule-strong: #2a3a5c;          /* emphasised border */

  /* ─── Colour: text ───────────────────────────────── */
  --mv-text:        #eaeef6;          /* primary text */
  --mv-text-2:      #a3aec5;          /* secondary text, subdued copy */
  --mv-text-mute:   #5d6a85;          /* tertiary, captions, hints */

  /* ─── Colour: brand ──────────────────────────────── */
  --mv-teal:        #2dd4b8;          /* primary accent — CTAs, links */
  --mv-teal-glow:   #4fe5cb;          /* hover/glow */
  --mv-teal-deep:   #1ba892;          /* on light backgrounds */
  --mv-teal-on:     #06241e;          /* text colour ON teal fill */

  /* ─── Colour: secondary ──────────────────────────── */
  --mv-blue:        #4a8ff0;          /* secondary accent — flows, info */
  --mv-blue-deep:   #1859a6;          /* on light backgrounds */
  --mv-sky:         #7ab8d4;          /* tertiary — small markers */

  /* ─── Colour: semantic ───────────────────────────── */
  --mv-success:     #2dd4b8;          /* alias for teal */
  --mv-warning:     #d4ac4a;          /* amber — caution, partial */
  --mv-danger:      #e2643a;          /* warm red — error states */

  /* ─── Typography: families ───────────────────────── */
  --mv-font-sans:   'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --mv-font-display:'Sora', 'Inter', sans-serif;
  --mv-font-mono:   'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --mv-font-serif:  'Instrument Serif', Georgia, serif;

  /* ─── Typography: scale ──────────────────────────── */
  --mv-text-xs:     11px;
  --mv-text-sm:     12.5px;
  --mv-text-base:   15px;
  --mv-text-md:     16px;
  --mv-text-lg:     18px;
  --mv-text-xl:     22px;

  /* ─── Spacing scale ──────────────────────────────── */
  --mv-space-1:     4px;
  --mv-space-2:     8px;
  --mv-space-3:     12px;
  --mv-space-4:     16px;
  --mv-space-5:     20px;
  --mv-space-6:     24px;
  --mv-space-8:     32px;
  --mv-space-10:    40px;
  --mv-space-12:    48px;
  --mv-space-16:    64px;
  --mv-space-20:    80px;
  --mv-space-24:    96px;

  /* ─── Radius ─────────────────────────────────────── */
  --mv-radius-sm:   4px;
  --mv-radius-md:   6px;
  --mv-radius-lg:   8px;
  --mv-radius-xl:   12px;
  --mv-radius-2xl:  16px;
  --mv-radius-full: 100px;

  /* ─── Shadow ─────────────────────────────────────── */
  --mv-shadow-card: 0 4px 16px rgba(0, 0, 0, 0.25);
  --mv-shadow-lift: 0 16px 48px rgba(0, 0, 0, 0.4);
  --mv-shadow-hero: 0 32px 80px rgba(0, 0, 0, 0.5),
                    0 0 0 1px rgba(45, 212, 184, 0.05);
  --mv-shadow-glow: 0 0 24px rgba(45, 212, 184, 0.25);

  /* ─── Timing ─────────────────────────────────────── */
  --mv-time-fast:   0.15s;
  --mv-time-base:   0.2s;

  /* ─── Layout ─────────────────────────────────────── */
  --mv-container:   1280px;
  --mv-container-narrow: 720px;
  --mv-pad-x-lg:    32px;
  --mv-pad-x-md:    20px;
}


/* ╭─────────────────────────────────────────────────────────────────────╮
   │  2. RESET & BASE                                                    │
   ╰─────────────────────────────────────────────────────────────────────╯ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--mv-navy);
  color: var(--mv-text);
  font-family: var(--mv-font-sans);
  font-size: var(--mv-text-base);
  line-height: 1.6;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--mv-time-fast), opacity var(--mv-time-fast);
}

a.mv-link {
  color: var(--mv-teal);
}
a.mv-link:hover {
  color: var(--mv-teal-glow);
}

:focus-visible {
  outline: 2px solid var(--mv-teal);
  outline-offset: 2px;
  border-radius: var(--mv-radius-sm);
}


/* ╭─────────────────────────────────────────────────────────────────────╮
   │  3. ATMOSPHERE                                                      │
   │  Two soft radial glows + a faint grid mask — gives the dark page    │
   │  a sense of depth without ever being noisy.                         │
   ╰─────────────────────────────────────────────────────────────────────╯ */

.mv-atmosphere::before,
.mv-atmosphere::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.mv-atmosphere::before {
  background:
    radial-gradient(ellipse at 15% -5%,  rgba(45, 212, 184, 0.10) 0%, transparent 45%),
    radial-gradient(ellipse at 85% 100%, rgba(74, 143, 240, 0.06) 0%, transparent 45%);
}

.mv-atmosphere::after {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 80%);
          mask-image: radial-gradient(ellipse at center, black 0%, transparent 80%);
}

/* For pages that want atmosphere applied to body without an extra class.
   Pages can opt in by adding `mv-atmosphere` class to <body>. */


/* ╭─────────────────────────────────────────────────────────────────────╮
   │  4. LAYOUT                                                          │
   ╰─────────────────────────────────────────────────────────────────────╯ */

.mv-main {
  position: relative;
  z-index: 1;
  max-width: var(--mv-container);
  margin: 0 auto;
  padding: 96px var(--mv-pad-x-lg) 64px;
}

.mv-main--narrow {
  max-width: var(--mv-container-narrow);
}

.mv-main--centered {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 60px); /* nav height roughly */
  padding-top: 64px;
}


/* ╭─────────────────────────────────────────────────────────────────────╮
   │  5. WORDMARK + LOGO                                                 │
   │                                                                     │
   │  Wordmark: "MapVisualizer" set in Sora 700, no space, with the     │
   │  "Visualizer" half tinted teal.                                    │
   │                                                                     │
   │  Logo: contour fragment — three nested topographic curves with a   │
   │  summit dot. Use as <svg class="mv-logo">…</svg> with the          │
   │  contents in section 5.b.                                          │
   ╰─────────────────────────────────────────────────────────────────────╯ */

.mv-wordmark {
  font-family: var(--mv-font-display);
  font-weight: 700;
  letter-spacing: -0.6px;
  color: var(--mv-text);
  white-space: nowrap;
}
.mv-wordmark .mv-wordmark-vis {
  color: var(--mv-teal);
}

/* Sizes */
.mv-wordmark--sm  { font-size: 17px; }       /* nav */
.mv-wordmark--md  { font-size: 22px; }       /* card headers */
.mv-wordmark--lg  { font-size: 36px; letter-spacing: -1px; }
.mv-wordmark--xl  { font-size: 48px; letter-spacing: -1.4px; }

/* On light backgrounds (e.g. when embedded in a customer's deck) */
.mv-wordmark--light { color: #14110d; }
.mv-wordmark--light .mv-wordmark-vis { color: var(--mv-teal-deep); }

/* Logo mark — pure CSS sizing; SVG markup goes in the HTML.
   Recommended SVG: see brand-logo.svg or copy from the snippet below.
   Strokes use currentColor so the logo inherits whatever colour you set. */
.mv-logo {
  display: inline-block;
  flex-shrink: 0;
  color: var(--mv-teal);
}
.mv-logo--sm { width: 22px; height: 22px; }
.mv-logo--md { width: 32px; height: 32px; }
.mv-logo--lg { width: 64px; height: 64px; }
.mv-logo--light { color: var(--mv-teal-deep); }

/* Lockup: logo + wordmark side by side */
.mv-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.mv-lockup--lg { gap: 20px; }


/* ╭─────────────────────────────────────────────────────────────────────╮
   │  6. NAVIGATION                                                      │
   ╰─────────────────────────────────────────────────────────────────────╯ */

.mv-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--mv-pad-x-lg);
  background: rgba(10, 18, 32, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--mv-rule);
}

/* Variant: not fixed (e.g. for signin / account pages where there's no scroll content behind it) */
.mv-nav--static {
  position: static;
  background: var(--mv-navy);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.mv-nav-meta {
  font-family: var(--mv-font-mono);
  font-size: var(--mv-text-xs);
  color: var(--mv-text-mute);
  letter-spacing: 0.5px;
}

.mv-nav-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--mv-text-2);
}

.mv-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mv-teal);
}

.mv-nav-links {
  display: flex;
  gap: 28px;
  align-items: center;
}

.mv-nav-link {
  font-family: var(--mv-font-mono);
  font-size: var(--mv-text-xs);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--mv-text-mute);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  transition: color var(--mv-time-base);
}
.mv-nav-link:hover {
  color: var(--mv-text);
}

/* The right-side primary call-to-action in the nav */
.mv-nav-cta {
  padding: 8px 16px;
  background: transparent;
  color: var(--mv-text);
  border: 1px solid var(--mv-rule);
  border-radius: var(--mv-radius-md);
  font-family: var(--mv-font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: all var(--mv-time-base);
}
.mv-nav-cta:hover {
  border-color: var(--mv-teal);
  color: var(--mv-teal);
}


/* ╭─────────────────────────────────────────────────────────────────────╮
   │  7. BUTTONS                                                         │
   ╰─────────────────────────────────────────────────────────────────────╯ */

.mv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: var(--mv-radius-lg);
  font-family: var(--mv-font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.1px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all var(--mv-time-fast);
  text-decoration: none;
  white-space: nowrap;
}
.mv-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.mv-btn--primary {
  background: var(--mv-teal);
  color: var(--mv-teal-on);
  border-color: var(--mv-teal);
}
.mv-btn--primary:hover:not(:disabled) {
  background: var(--mv-teal-glow);
  border-color: var(--mv-teal-glow);
  box-shadow: var(--mv-shadow-glow);
}

.mv-btn--secondary {
  background: transparent;
  color: var(--mv-text);
  border-color: var(--mv-rule);
}
.mv-btn--secondary:hover:not(:disabled) {
  border-color: var(--mv-text-mute);
}

.mv-btn--ghost {
  background: transparent;
  color: var(--mv-text-2);
  border-color: transparent;
  padding: 8px 12px;
}
.mv-btn--ghost:hover:not(:disabled) {
  color: var(--mv-text);
  background: var(--mv-slate);
}

.mv-btn--full {
  width: 100%;
}

.mv-btn--sm {
  padding: 9px 16px;
  font-size: 13px;
}


/* ╭─────────────────────────────────────────────────────────────────────╮
   │  8. TYPOGRAPHY                                                      │
   ╰─────────────────────────────────────────────────────────────────────╯ */

/* The mono eyebrow — sits above section headlines as a small section label */
.mv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mv-font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--mv-teal);
  letter-spacing: 1.8px;
  text-transform: uppercase;
  margin-bottom: 28px;
}
.mv-eyebrow::before {
  content: "";
  width: 20px;
  height: 1px;
  background: var(--mv-teal);
}

/* Variant: no leading rule, used inside cards or constrained spaces */
.mv-eyebrow--bare::before { display: none; }

/* The hero pill eyebrow — has a glowing dot at the start */
.mv-eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mv-font-mono);
  font-size: var(--mv-text-xs);
  color: var(--mv-text-mute);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 14px 6px 10px;
  border: 1px solid var(--mv-rule);
  border-radius: var(--mv-radius-full);
  background: rgba(26, 37, 64, 0.4);
}
.mv-eyebrow-pill .mv-eyebrow-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mv-teal);
  box-shadow: 0 0 6px var(--mv-teal);
}

/* Display headlines — big, Sora, with optional italic-serif accent. */
.mv-h1 {
  font-family: var(--mv-font-display);
  font-weight: 700;
  font-size: clamp(40px, 6.8vw, 80px);
  letter-spacing: -2.8px;
  line-height: 1.0;
  margin-bottom: 28px;
}

.mv-h2 {
  font-family: var(--mv-font-display);
  font-weight: 600;
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -1.5px;
  line-height: 1.1;
  margin-bottom: 24px;
}

.mv-h3 {
  font-family: var(--mv-font-display);
  font-weight: 600;
  font-size: var(--mv-text-lg);
  letter-spacing: -0.3px;
  line-height: 1.25;
  margin-bottom: 12px;
}

/* The italic serif accent — wrap any inline span in this for the
   "client-ready map" / "thirty years" / "replaces the puzzle" effect. */
.mv-accent {
  font-family: var(--mv-font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--mv-teal);
  letter-spacing: -1px;
}

/* Standalone copy paragraph (subtle muted) */
.mv-copy {
  font-size: var(--mv-text-lg);
  color: var(--mv-text-2);
  line-height: 1.55;
}
.mv-copy--sm { font-size: var(--mv-text-md); }
.mv-copy strong { color: var(--mv-text); font-weight: 500; }


/* ╭─────────────────────────────────────────────────────────────────────╮
   │  9. CARDS                                                           │
   ╰─────────────────────────────────────────────────────────────────────╯ */

/* Standard card — used for sign-in, account, modal-like containers */
.mv-card {
  background: var(--mv-slate);
  border: 1px solid var(--mv-rule);
  border-radius: var(--mv-radius-xl);
  padding: 36px 32px;
}

.mv-card--lg { padding: 56px 40px; }
.mv-card--sm { padding: 24px 20px; }

/* Card with a subtle gradient border halo (used for the beta CTA frame) */
.mv-card--glow {
  position: relative;
  background: var(--mv-slate);
  border: 1px solid var(--mv-rule);
  border-radius: var(--mv-radius-2xl);
}
.mv-card--glow::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: var(--mv-radius-2xl);
  background: linear-gradient(135deg, var(--mv-teal), transparent 40%, transparent 60%, var(--mv-blue));
  opacity: 0.3;
  z-index: -1;
}

/* Inline row inside a card — label/value pairs (used in account.html) */
.mv-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--mv-rule);
}
.mv-row:last-child { border-bottom: 0; }

.mv-row-label {
  font-family: var(--mv-font-mono);
  font-size: var(--mv-text-xs);
  letter-spacing: 1.5px;
  color: var(--mv-text-mute);
  text-transform: uppercase;
}
.mv-row-value {
  color: var(--mv-text);
  font-size: 14px;
  text-align: right;
  word-break: break-all;
}


/* ╭─────────────────────────────────────────────────────────────────────╮
   │  10. FORM CONTROLS                                                  │
   ╰─────────────────────────────────────────────────────────────────────╯ */

.mv-label {
  display: block;
  font-family: var(--mv-font-mono);
  font-size: var(--mv-text-xs);
  letter-spacing: 1.5px;
  color: var(--mv-text-mute);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.mv-input {
  width: 100%;
  padding: 13px 16px;
  background: var(--mv-navy);
  border: 1px solid var(--mv-rule);
  border-radius: var(--mv-radius-lg);
  color: var(--mv-text);
  font-family: var(--mv-font-sans);
  font-size: 14px;
  outline: none;
  transition: border-color var(--mv-time-base);
}
.mv-input:focus {
  border-color: var(--mv-teal);
}
.mv-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Select reuses .mv-input but adds a chevron */
.mv-select {
  width: 100%;
  padding: 13px 40px 13px 16px;
  background: var(--mv-navy);
  border: 1px solid var(--mv-rule);
  border-radius: var(--mv-radius-lg);
  color: var(--mv-text);
  font-family: var(--mv-font-sans);
  font-size: 14px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--mv-text-mute) 50%),
    linear-gradient(-45deg, transparent 50%, var(--mv-text-mute) 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  transition: border-color var(--mv-time-base);
}
.mv-select:focus {
  border-color: var(--mv-teal);
}

/* Divider with text in the middle (e.g. "OR" between auth options) */
.mv-divider {
  display: flex;
  align-items: center;
  margin: 22px 0;
  color: var(--mv-text-mute);
  font-family: var(--mv-font-mono);
  font-size: var(--mv-text-xs);
  letter-spacing: 2px;
}
.mv-divider::before,
.mv-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--mv-rule);
}
.mv-divider span { padding: 0 14px; }


/* ╭─────────────────────────────────────────────────────────────────────╮
   │  11. STATUS MESSAGES                                                │
   ╰─────────────────────────────────────────────────────────────────────╯ */

.mv-msg {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: var(--mv-radius-md);
  font-size: 13px;
  line-height: 1.5;
  border: 1px solid transparent;
  display: none;
}

.mv-msg--success,
.mv-msg--error,
.mv-msg--warning,
.mv-msg--info {
  display: block;
}

.mv-msg--success {
  background: rgba(45, 212, 184, 0.08);
  border-color: rgba(45, 212, 184, 0.3);
  color: var(--mv-teal);
}
.mv-msg--success strong { color: var(--mv-teal-glow); }

.mv-msg--error {
  background: rgba(226, 100, 58, 0.08);
  border-color: rgba(226, 100, 58, 0.3);
  color: var(--mv-danger);
}

.mv-msg--warning {
  background: rgba(212, 172, 74, 0.08);
  border-color: rgba(212, 172, 74, 0.3);
  color: var(--mv-warning);
}

.mv-msg--info {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--mv-rule);
  color: var(--mv-text-2);
}


/* ╭─────────────────────────────────────────────────────────────────────╮
   │  12. SPINNER                                                        │
   ╰─────────────────────────────────────────────────────────────────────╯ */

.mv-spinner {
  width: 28px;
  height: 28px;
  border: 2px solid var(--mv-rule);
  border-top-color: var(--mv-teal);
  border-radius: 50%;
  animation: mv-spin 0.8s linear infinite;
}
.mv-spinner--lg { width: 32px; height: 32px; border-width: 2.5px; }
.mv-spinner--sm { width: 16px; height: 16px; border-width: 1.5px; }

@keyframes mv-spin {
  to { transform: rotate(360deg); }
}

/* Standard splash/loading container — full-page centred spinner with caption */
.mv-splash {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 50vh;
}
.mv-splash-msg {
  color: var(--mv-text-mute);
  font-family: var(--mv-font-mono);
  font-size: var(--mv-text-xs);
  letter-spacing: 1px;
}


/* ╭─────────────────────────────────────────────────────────────────────╮
   │  13. FOOTER                                                         │
   ╰─────────────────────────────────────────────────────────────────────╯ */

.mv-footer {
  border-top: 1px solid var(--mv-rule);
  padding: 32px var(--mv-pad-x-lg);
  max-width: var(--mv-container);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-family: var(--mv-font-mono);
  font-size: var(--mv-text-xs);
  color: var(--mv-text-mute);
  letter-spacing: 0.3px;
}
.mv-footer-links {
  display: flex;
  gap: 24px;
}
.mv-footer a:hover { color: var(--mv-teal); }

/* Compact footer — for the smaller pages (signin/callback/account) */
.mv-footer--compact {
  display: block;
  text-align: center;
  padding: 24px var(--mv-pad-x-md);
  letter-spacing: 1px;
  text-transform: uppercase;
}


/* ╭─────────────────────────────────────────────────────────────────────╮
   │  14. UTILITIES (deliberately minimal)                               │
   ╰─────────────────────────────────────────────────────────────────────╯ */

.mv-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;
}

.mv-hidden { display: none !important; }


/* ╭─────────────────────────────────────────────────────────────────────╮
   │  15. RESPONSIVE                                                     │
   ╰─────────────────────────────────────────────────────────────────────╯ */

@media (max-width: 900px) {
  .mv-nav { padding: 16px var(--mv-pad-x-md); }
  .mv-nav-meta { display: none; }

  .mv-main { padding: 80px var(--mv-pad-x-md) 48px; }

  .mv-card,
  .mv-card--lg { padding: 28px 24px; }

  .mv-footer { padding: 24px var(--mv-pad-x-md); }
}

@media (max-width: 600px) {
  /* Hide secondary nav links on phone, keep only the wordmark + CTA */
  .mv-nav-link { display: none; }
}