/* ===========================================================================
   Midnight — site design system (v5 "daylight")
   ---------------------------------------------------------------------------
   One stylesheet, loaded by every page, so the nav, the footer and the type
   scale are literally the same objects everywhere instead of 100 near-copies.

   Palette is sampled from the shipping 5.0 app (see app/APP_STORE_SCREENSHOTS.md
   §2): warm ivory paper, deep plum ink, Lumi yellow and star blue as the two
   accents, with four soft card tints.
   =========================================================================== */

/* ── tokens ────────────────────────────────────────────────────────────── */
:root {
  --font-display: 'Nunito', -apple-system, BlinkMacSystemFont, 'SF Pro Rounded', system-ui, sans-serif;
  --font-body:    'Nunito', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;

  --canvas:          #FCF8F5;
  --surface:         #FFFFFF;
  --surface-raised:  #F7F2ED;
  --surface-sunken:  #F0E8E1;
  --surface-inverted:#241E38;

  --ink:       #241E38;
  --ink-muted: #6B6478;
  --ink-faint: #8B8499;

  --stroke-subtle: #EFE7E0;
  --stroke:        #E2D8D0;
  --stroke-strong: #A79FB3;

  /* the two accents the brief asks for: Lumi yellow + star blue */
  --lumi:  #F2C14B;
  --star:  #7FB2D4;
  --peach: #F2947A;

  --honey-soft: #FCEFD2;
  --blue-soft:  #DCEAF5;
  --coral-soft: #FBE3DD;
  --sage-soft:  #DDEFE6;

  --shadow-border:
    0 0 0 1px oklch(0 0 0 / 0.05),
    0 1px 2px -1px oklch(0 0 0 / 0.06),
    0 2px 4px 0 oklch(0 0 0 / 0.04);
  --shadow-border-hover:
    0 0 0 1px oklch(0 0 0 / 0.08),
    0 1px 2px -1px oklch(0 0 0 / 0.08),
    0 2px 4px 0 oklch(0 0 0 / 0.06);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; max-width: 100vw; overflow-x: hidden; }
body { background: var(--canvas); color: var(--ink); font-family: var(--font-body); }
::selection { background: var(--honey-soft); color: var(--ink); }
img { max-width: 100%; }

/* ── type scale ────────────────────────────────────────────────────────── */
.display-xl, .display-lg, .display-md {
  font-family: var(--font-display); color: var(--ink);
  text-wrap: balance; overflow-wrap: break-word; margin: 0;
}
.display-xl { font-size: clamp(44px, 6.4vw, 88px); line-height: 0.98; letter-spacing: -0.045em; font-weight: 800; }
.display-lg { font-size: clamp(34px, 4.6vw, 62px); line-height: 1.02; letter-spacing: -0.038em; font-weight: 800; }
.display-md { font-size: clamp(24px, 2.9vw, 38px); line-height: 1.08; letter-spacing: -0.028em; font-weight: 800; }
.eyebrow    { font-family: var(--font-body); font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted); margin: 0; }
.body-lg    { font-family: var(--font-body); font-size: clamp(16.5px, 1.25vw, 19px); line-height: 1.6; letter-spacing: -0.008em; color: var(--ink-muted); font-weight: 400; }
.body-md    { font-family: var(--font-body); font-size: 15px; line-height: 1.62; color: var(--ink-muted); font-weight: 400; }

/* ── motion ────────────────────────────────────────────────────────────── */
@keyframes mnFadeUp   { from { opacity: 0; transform: translateY(12px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes mnFadeDown { from { opacity: 0; transform: translateY(-12px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes mnScaleIn  { from { opacity: 0; transform: scale(0.96) translateY(16px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.anim-fu { opacity: 0; transform: translateY(12px); filter: blur(4px); }
.anim-fu.show { animation: mnFadeUp 460ms cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.anim-fd { opacity: 0; transform: translateY(-12px); }
.anim-fd.show { animation: mnFadeDown 460ms cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.anim-si { opacity: 0; transform: scale(0.96) translateY(16px); }
.anim-si.show { animation: mnScaleIn 560ms cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.anim-section {
  opacity: 0; transform: translateY(12px); filter: blur(4px);
  transition: opacity 460ms ease-out, transform 460ms ease-out, filter 460ms ease-out;
}
.anim-section.show { opacity: 1; transform: none; filter: none; }

/* ===========================================================================
   THE NAV — one pill, one fixed width, shared by all 100 pages.

   .mn-nav-bar is only a positioner: fixed, full width, transparent, and
   pointer-events:none so it never eats clicks on the page behind it.
   .mn-nav-shell is the pill itself at ONE explicit width. Letting it shrink to
   fit would make it visibly change size from page to page as the link labels
   change, which is exactly the inconsistency this file exists to remove.
   =========================================================================== */
.mn-nav-bar { position: fixed; inset: 14px 0 auto; z-index: 60; padding-inline: 16px; pointer-events: none; }
.mn-nav-shell {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: 18px; width: min(720px, 100%); height: 62px; margin-inline: auto;
  padding: 0 10px 0 20px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(226, 216, 208, 0.7);
  box-shadow: 0 14px 38px rgba(36, 30, 56, 0.07);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  pointer-events: auto;
}
.mn-nav-links { position: absolute; left: 50%; display: flex; align-items: center; gap: 2px; transform: translateX(-50%); }
.mn-nav-group { display: flex; align-items: center; gap: 8px; }
.mn-brand { display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto; min-width: 0; text-decoration: none; }
.mn-brand img { width: 30px; height: 30px; border-radius: 9px; box-shadow: 0 0 0 1px oklch(0 0 0 / 0.07); }
.mn-brand span { font-family: var(--font-display); font-size: 15px; font-weight: 800; color: var(--ink); letter-spacing: -0.025em; }
.mn-nav-link {
  font-family: var(--font-body); font-size: 12.5px; font-weight: 600; color: var(--ink-muted);
  padding: 6px 9px; border-radius: 9px; text-decoration: none;
  transition: color 120ms ease-out, background-color 120ms ease-out;
}
.mn-nav-link:hover { color: var(--ink); background: var(--surface-raised); }
.mn-nav-link[aria-current="page"] { color: var(--ink); background: var(--honey-soft); }
.mn-nav-link:focus-visible, .mn-brand:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 9px; }

/* mobile sheet */
.mn-nav-toggle {
  display: none; align-items: center; justify-content: center; width: 36px; height: 36px;
  padding: 0; border: 0; border-radius: 999px; background: var(--surface-raised);
  color: var(--ink); cursor: pointer;
}
.mn-nav-sheet {
  position: fixed; inset: 84px 14px auto; z-index: 59; display: none;
  padding: 10px; border-radius: 26px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--stroke);
  box-shadow: 0 22px 60px rgba(36, 30, 56, 0.14);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.mn-nav-sheet[data-open="true"] { display: block; animation: mnFadeUp 220ms ease-out forwards; }
.mn-nav-sheet a {
  display: flex; align-items: center; gap: 10px; padding: 13px 14px; border-radius: 16px;
  font-size: 15px; font-weight: 700; color: var(--ink); text-decoration: none;
}
.mn-nav-sheet a:hover { background: var(--surface-raised); }
.mn-nav-sheet a::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lumi); }
.mn-nav-sheet a:nth-child(2n)::before { background: var(--star); }

/* ── buttons ───────────────────────────────────────────────────────────── */
.btn-primary, .btn-nav {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 800; letter-spacing: -0.01em;
  color: #FFFFFF; background: var(--surface-inverted); border: 1px solid var(--surface-inverted);
  text-decoration: none; cursor: pointer;
  transition: scale 150ms ease-out, background-color 150ms ease-out, box-shadow 150ms ease-out;
}
.btn-primary { padding: 15px 26px; border-radius: 14px; font-size: 15px; box-shadow: 0 10px 24px rgba(36, 30, 56, 0.16); }
.btn-nav { min-height: 34px; padding: 7px 14px; border-radius: 17px; font-size: 12.5px; white-space: nowrap; }
.btn-primary:hover, .btn-nav:hover { background: #171227; border-color: #171227; box-shadow: 0 14px 30px rgba(36, 30, 56, 0.22); }
.btn-primary:active, .btn-nav:active { scale: 0.96; box-shadow: none; }
.btn-primary:focus-visible, .btn-nav:focus-visible, .btn-ghost:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 17px; border-radius: 999px;
  font-family: var(--font-body); font-size: 13.5px; font-weight: 700; color: var(--ink);
  background: var(--surface); box-shadow: var(--shadow-border); text-decoration: none;
  transition: scale 150ms ease-out, background-color 150ms ease-out, box-shadow 150ms ease-out;
}
.btn-ghost:hover { background: var(--surface-raised); box-shadow: var(--shadow-border-hover); }
.btn-ghost:active { scale: 0.96; }

/* ── layout ────────────────────────────────────────────────────────────── */
.section-inner { width: min(1120px, calc(100% - 40px)); margin-inline: auto; }
main > section { scroll-margin-top: 96px; }

/* ── the shared footer ─────────────────────────────────────────────────── */
.mn-footer { width: min(1120px, calc(100% - 40px)); margin-inline: auto; padding: 56px 0 44px; border-top: 1px solid var(--stroke); }
.mn-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.mn-footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.mn-footer-brand img { width: 26px; height: 26px; border-radius: 8px; }
.mn-footer-brand span { font-family: var(--font-display); font-size: 16px; font-weight: 800; color: var(--ink); }
.mn-footer p.tagline { font-size: 13.5px; color: var(--ink-muted); line-height: 1.68; max-width: 360px; margin: 0; }
.mn-footer h3 { font-size: 11px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.18em; margin: 0 0 12px; font-weight: 800; }
.mn-footer ul { list-style: none; margin: 0; padding: 0; font-size: 13.5px; line-height: 2.1; }
.mn-footer ul a { color: var(--ink-muted); text-decoration: none; }
.mn-footer ul a:hover { color: var(--ink); }
.mn-footer-base {
  display: flex; flex-direction: row; align-items: center; justify-content: space-between;
  gap: 14px; margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--stroke);
  font-size: 12.5px; color: var(--ink-faint);
}
.mn-footer-base p { margin: 0; }

/* ── shared small pieces ───────────────────────────────────────────────── */
.card { position: relative; background: var(--surface); border-radius: 28px; overflow: hidden; box-shadow: var(--shadow-border); transition: transform 160ms ease-out, box-shadow 160ms ease-out; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-border-hover), 0 22px 44px rgba(36, 30, 56, 0.07); }

.tile { padding: 30px; border-radius: 26px; background: var(--surface); box-shadow: var(--shadow-border); transition: transform 160ms ease-out, box-shadow 160ms ease-out; }
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-border-hover), 0 18px 38px rgba(36, 30, 56, 0.07); }
.tile-icon { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 16px; background: var(--honey-soft); color: var(--ink); margin-bottom: 20px; }

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .mn-nav-links { display: none; }
  .mn-nav-toggle { display: inline-flex; }
  .mn-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .mn-footer-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .mn-nav-bar { top: 10px; padding-inline: 10px; }
  .mn-nav-shell { height: 56px; gap: 10px; padding: 0 8px 0 14px; }
  .mn-brand span { font-size: 14px; }
  .section-inner { width: min(100% - 32px, 1120px); }
  .mn-footer-base { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}