/* ============================================================
   Marvin Money — shared design system for the marketing site.
   Loaded by every page. Apple-grade restraint:
     • One typography scale (SF Pro Display via -apple-system)
     • One colour palette (charcoal ink + indigo brand + emerald accent)
     • One sectioning primitive (.fold) used by every page
     • Components: nav, button, card, footer
   ============================================================ */

/* ── Tokens ──────────────────────────────────────────────── */
:root {
  /* Backgrounds — alternated fold-by-fold for tonal contrast */
  --bg-dark:    #0a1628;
  --bg-darker:  #050b18;
  --bg-mid:     #0f1d36;
  --bg-light:   #fbfbfd;       /* apple's signature off-white */
  --bg-lighter: #ffffff;

  /* Ink */
  --ink:        #1d1d1f;
  --ink-soft:   #6e6e73;       /* apple's body grey */
  --ink-mute:   #86868b;       /* apple's caption grey */
  --line:       rgba(255,255,255,0.10);
  --line-light: rgba(0,0,0,0.08);

  /* Brand */
  --indigo:     #6366f1;
  --indigo-l:   #818cf8;
  --purple:     #9333ea;
  --emerald:    #34d399;
  --emerald-d:  #059669;
  --amber:      #fbbf24;
  --sky:        #38bdf8;

  /* Type scale (apple-inspired display) */
  --t-display:    clamp(48px, 7.6vw, 96px);
  --t-headline:   clamp(40px, 5.6vw, 72px);
  --t-title:      clamp(32px, 4.4vw, 56px);
  --t-subtitle:   clamp(22px, 2.6vw, 32px);
  --t-lede:       clamp(19px, 2.0vw, 24px);
  --t-body:       17px;
  --t-small:      14px;
  --t-caption:    12px;

  /* Spacing & layout */
  --container:    1024px;
  --container-wide: 1180px;
  --pad-fold:     clamp(80px, 12vw, 160px);
  --radius-sm:    8px;
  --radius:       14px;
  --radius-lg:    22px;
  --radius-pill:  980px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter",
               "Segoe UI", Roboto, sans-serif;
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.47;
  letter-spacing: -0.022em;
  color: var(--ink);
  background: var(--bg-dark);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }

/* ── Typography ────────────────────────────────────────── */
.t-display {
  font-size: var(--t-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.t-headline {
  font-size: var(--t-headline);
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -0.025em;
}
.t-title {
  font-size: var(--t-title);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.022em;
}
.t-subtitle {
  font-size: var(--t-subtitle);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.018em;
}
.t-lede {
  font-size: var(--t-lede);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--ink-soft);
  max-width: 720px;
}
.t-eyebrow {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--indigo);
  margin-bottom: 10px;
}

/* On dark backgrounds, ledes & ink soften differently */
.dark .t-lede, .darker .t-lede, .hero .t-lede { color: rgba(255,255,255,0.72); }
.dark .t-eyebrow, .darker .t-eyebrow, .hero .t-eyebrow { color: var(--indigo-l); }
.dark, .darker, .hero { color: #fff; }

/* Gradient text utility — used for hero headlines */
.text-gradient-ice {
  background: linear-gradient(180deg, #ffffff 0%, #c9defc 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-gradient-mint {
  background: linear-gradient(180deg, #ffffff 0%, #d1fae5 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Sticky nav ────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  /* iOS notch / status bar: extend the nav background under the safe
     area at the top so the dark band is one continuous strip from the
     very top of the screen down to the bottom of the nav. Without this
     iOS Safari paints the safe-area band system-black, which doesn't
     match the rgba(0,0,0,0.72)-over-#0a1628 nav. Padding pushes the nav
     content (logo + links) back down to its original 64px lane.
     Requires viewport-fit=cover on the <meta name="viewport"> tag. */
  height: calc(64px + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(0,0,0,0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
}
.nav-inner {
  width: 100%;
  max-width: var(--container);
  padding: 0 22px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 14px;
  color: rgba(255,255,255,0.85);
}
.brand {
  display: flex; align-items: center;
  font-weight: 600;
  letter-spacing: -0.012em;
}
.brand a { display: inline-flex; align-items: center; }
.brand-logo {
  /* The actual Marvin Money lockup (icon + wordmark) shipped with
     the mobile app — used everywhere instead of an orb + text combo. */
  height: 40px; width: auto;
  display: block;
}
footer .brand-logo { height: 48px; }
/* Legacy orb-mark — only used when a page deliberately shows the
   icon-only brand element (e.g. press kit colour reference). */
.brand-mark {
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, var(--indigo), var(--purple));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 11px;
  flex-shrink: 0;
}
.nav-links {
  display: flex; gap: 28px;
  font-size: 13px;
  color: rgba(255,255,255,0.78);
}
.nav-links a {
  transition: color 0.15s ease;
  position: relative;
}
.nav-links a:hover { color: #fff; }
.nav-links a.current { color: #fff; }
.nav-links a.current::after {
  content: ""; position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--indigo-l);
  border-radius: 2px;
}
@media (max-width: 720px) { .nav-links { display: none; } }

/* ── Mobile menu — hamburger + slide-down drawer ──────── */
/* The button is injected by assets/marketing-nav.js into every page
   beside the brand logo; the drawer is a sibling of <body>. CSS lives
   here so all pages get the visual treatment with one shared file. */
.nav-menu-btn { display: none; }
.nav-drawer   { display: none; }
@media (max-width: 720px) {
  .nav-menu-btn {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 40px; height: 40px;
    background: transparent; border: none; padding: 0;
    cursor: pointer; color: rgba(255,255,255,0.85);
    border-radius: 10px;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .nav-menu-btn:hover, .nav-menu-btn:focus-visible {
    background: rgba(255,255,255,0.06); color: #fff; outline: none;
  }
  .nav-menu-btn svg { width: 22px; height: 22px; }

  .nav-drawer {
    display: block;
    position: fixed; left: 0; right: 0;
    top:    calc(56px + env(safe-area-inset-top, 0px));
    bottom: 0;
    background: rgba(5,11,24,0.98);
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    border-top: 1px solid rgba(255,255,255,0.08);
    z-index: 99;
    overflow-y: auto;
    padding: 18px 22px calc(40px + env(safe-area-inset-bottom, 0px));
    opacity: 0; pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.22s var(--ease-out),
                transform 0.22s var(--ease-out);
  }
  .nav-drawer.open {
    opacity: 1; pointer-events: auto;
    transform: translateY(0);
  }
  .nav-drawer a {
    display: block;
    padding: 16px 4px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-size: 18px; font-weight: 500;
    color: rgba(255,255,255,0.92);
    letter-spacing: -0.01em;
  }
  .nav-drawer a:last-child { border-bottom: none; }
  .nav-drawer a.current { color: var(--indigo-l); }
  .nav-drawer a:active { background: rgba(255,255,255,0.04); }

  /* Lock body scroll while the drawer is open so the page underneath
     doesn't drift when the user scrolls the menu list. */
  body.nav-drawer-open { overflow: hidden; }
}

/* ── Section primitive ─────────────────────────────────── */
.fold {
  min-height: 92vh;
  padding: var(--pad-fold) 22px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
}
.fold.short { min-height: auto; padding: clamp(60px, 8vw, 110px) 22px; }
.fold.dark    { background: var(--bg-dark);    color: #fff; }
.fold.darker  { background: var(--bg-darker);  color: #fff; }
.fold.mid     { background: var(--bg-mid);     color: #fff; }
.fold.light   { background: var(--bg-light);   color: var(--ink); }
.fold.white   { background: var(--bg-lighter); color: var(--ink); }
.fold-inner {
  width: 100%;
  max-width: var(--container);
  text-align: center;
  position: relative;
  z-index: 2;
}
.fold-inner.wide  { max-width: var(--container-wide); }
.fold-inner.left  { text-align: left; }

/* Two-column feature layout — copy + device */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  text-align: left;
}
.split.reverse { direction: rtl; }
.split.reverse > * { direction: ltr; }
.split .copy .t-lede { margin: 0; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: 36px; text-align: center; }
  .split .copy .t-lede { margin: 0 auto; }
  .split .cta-row { justify-content: center; }
}

/* ── Buttons ───────────────────────────────────────────── */
.cta-row {
  display: flex; gap: 14px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.fold-inner > .cta-row { justify-content: center; }
.split .cta-row { margin-top: 28px; }
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  font-size: 17px; font-weight: 500;
  letter-spacing: -0.012em;
  border: none; font-family: inherit;
  cursor: pointer;
  transition: transform 0.15s var(--ease-out),
              opacity 0.15s ease,
              background 0.15s ease;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--indigo); color: #fff; }
.btn-primary:hover { background: #4f51e0; }
.btn-on-dark { background: #fff; color: var(--ink); }
.btn-on-dark:hover { background: rgba(255,255,255,0.92); }
.btn-ghost-dark {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.30);
}
.btn-ghost-dark:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.50); }
.btn-link {
  background: transparent;
  color: var(--indigo);
  padding: 8px 0;
}
.dark .btn-link, .darker .btn-link, .hero .btn-link { color: var(--indigo-l); }
.btn-link::after {
  content: "›";
  margin-left: 4px;
  font-size: 18px; line-height: 1;
  transition: transform 0.15s var(--ease-out);
}
.btn-link:hover::after { transform: translateX(3px); }

/* ── Marvin orb (the brand element) ────────────────────── */
.orb {
  width: 120px; height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--indigo), var(--purple));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800;
  font-size: 50px;
  position: relative;
  box-shadow:
    0 0 80px rgba(129,140,248,0.55),
    0 0 140px rgba(147,51,234,0.30);
  animation: orb-breathe 3.2s ease-in-out infinite;
  flex-shrink: 0;
}
.orb.lg { width: 140px; height: 140px; font-size: 58px; }
.orb.sm { width: 36px; height: 36px; font-size: 14px; box-shadow: 0 0 24px rgba(129,140,248,0.45); }
.orb.with-pulse::after {
  content: ""; position: absolute;
  bottom: 6px; right: 6px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--emerald);
  border: 4px solid var(--bg-dark);
  box-shadow: 0 0 14px rgba(52,211,153,0.7);
  animation: orb-pulse 1.6s ease-in-out infinite;
}
.orb.sm.with-pulse::after {
  width: 9px; height: 9px;
  bottom: -1px; right: -1px;
  border-width: 2px;
}
@keyframes orb-breathe {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 80px rgba(129,140,248,0.55), 0 0 140px rgba(147,51,234,0.30);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 0 110px rgba(129,140,248,0.78), 0 0 180px rgba(147,51,234,0.45);
  }
}
@keyframes orb-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.25); }
}

/* ── Mock device frame (used in feature folds) ─────────── */
.device {
  margin: 0 auto;
  max-width: 320px;
  width: 100%;
  aspect-ratio: 9 / 19.5;
  background: var(--bg-darker);
  border-radius: 38px;
  border: 8px solid #0f172a;
  box-shadow:
    0 60px 120px -20px rgba(0,0,0,0.55),
    0 30px 60px rgba(99,102,241,0.16);
  overflow: hidden;
  position: relative;
  color: #fff;
  display: flex; flex-direction: column;
}
.device .notch {
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 110px; height: 22px;
  background: #0f172a;
  border-radius: 0 0 14px 14px;
  z-index: 5;
}
.device .scrim {
  flex: 1;
  padding: 32px 18px 18px;
  background: radial-gradient(circle at 50% 30%, rgba(99,102,241,0.40) 0%, transparent 60%);
  display: flex; flex-direction: column; gap: 10px;
}
.device .scrim::after {
  content: ""; position: absolute; inset: 32px 0 0 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 0);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 0;
}
.device .scrim > * { position: relative; z-index: 1; }

/* ── Card surfaces ─────────────────────────────────────── */
.card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  padding: 22px;
  transition: transform 0.2s var(--ease-out),
              border-color 0.2s ease;
}
.card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.14); }
.card.light {
  background: #fff;
  border-color: var(--line-light);
}
.card.light:hover { box-shadow: 0 18px 40px -12px rgba(0,0,0,0.10); border-color: var(--line-light); }

/* ── Footer ────────────────────────────────────────────── */
footer.site-footer {
  background: #1d1d1f;
  color: rgba(255,255,255,0.55);
  padding: 60px 22px 36px;
  font-size: 13px;
}
footer.site-footer .footer-inner {
  max-width: var(--container);
  margin: 0 auto;
}
footer.site-footer .footer-cols {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 36px;
}
@media (max-width: 720px) { footer.site-footer .footer-cols { grid-template-columns: 1fr 1fr; } }
footer.site-footer h5 {
  color: #fff; font-size: 13px; font-weight: 600;
  margin-bottom: 12px; letter-spacing: -0.01em;
}
footer.site-footer ul { list-style: none; }
footer.site-footer ul li { margin-bottom: 8px; }
footer.site-footer ul li a {
  color: rgba(255,255,255,0.55);
  transition: color 0.15s ease;
}
footer.site-footer ul li a:hover { color: #fff; }
footer.site-footer .legal-line {
  border-top: 1px solid rgba(255,255,255,0.10);
  margin-top: 36px;
  padding-top: 22px;
  display: flex; flex-wrap: wrap; gap: 22px; justify-content: space-between;
  color: rgba(255,255,255,0.40);
  font-size: 12px;
}
footer.site-footer .footer-tagline {
  color: rgba(255,255,255,0.45);
  font-size: 13px;
  line-height: 1.5;
  max-width: 280px;
  margin-top: 14px;
}

/* ── Scroll-fade reveal ────────────────────────────────── */
.fade-in {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease-out),
              transform 0.8s var(--ease-out);
}
.fade-in.visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .fade-in { opacity: 1; transform: none; transition: none; }
  .orb { animation: none; }
  .orb.with-pulse::after { animation: none; }
}

/* ── Utility ───────────────────────────────────────────── */
.center { text-align: center; }
.mb-sm { margin-bottom: 16px; }
.mb-md { margin-bottom: 28px; }
.mb-lg { margin-bottom: 56px; }

/* ─────────────────────────────────────────────────────────
   Responsive — tablet portrait (≤860px)
   Ease the fold padding before we hit phone breakpoints.
   ───────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  :root { --pad-fold: clamp(64px, 9vw, 110px); }
}

/* ─────────────────────────────────────────────────────────
   Responsive — phone (≤720px)
   The desktop type scale floors at 48px (t-display) which
   is too large for a 390px viewport and breaks layout. We
   redefine the custom properties so every page that uses
   --t-display / --t-headline / --t-title / --t-subtitle /
   --t-lede shrinks proportionally — no per-page changes.
   ───────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  :root {
    --t-display:    clamp(36px, 9vw,   56px);
    --t-headline:   clamp(32px, 8vw,   48px);
    --t-title:      clamp(26px, 6.4vw, 38px);
    --t-subtitle:   clamp(19px, 4.4vw, 24px);
    --t-lede:       17px;
    --pad-fold:     clamp(52px, 14vw,  88px);
    --container:    100%;
  }
  body { letter-spacing: -0.018em; }

  /* Nav — tighter chrome, smaller logo */
  .nav { height: calc(56px + env(safe-area-inset-top, 0px)); }
  .nav-inner { padding: 0 16px; font-size: 13px; }
  .brand-logo { height: 32px; }
  footer .brand-logo { height: 38px; }

  /* Folds — let the content breathe naturally instead of forcing 92vh */
  .fold { min-height: auto; padding-left: 18px; padding-right: 18px; }
  .fold.short { padding-top: clamp(40px, 9vw, 64px); padding-bottom: clamp(40px, 9vw, 64px); }

  /* Body type — ledes shrink and re-centre under tighter widths */
  .t-lede { font-size: 17px; line-height: 1.5; max-width: 100%; }
  .t-eyebrow { font-size: 14px; }

  /* CTAs stack full-width inside a centred column on phones —
     the desktop horizontal row leaves gaps that read awkwardly. */
  .cta-row {
    flex-direction: column;
    align-items: stretch;
    width: 100%; max-width: 320px;
    margin-left: auto; margin-right: auto;
    gap: 10px;
  }
  .cta-row .btn { width: 100%; justify-content: center; padding: 14px 22px; font-size: 16px; }

  /* Marvin orb — slimmer on phone so it doesn't dominate the hero */
  .orb { width: 92px; height: 92px; font-size: 38px; }
  .orb.lg { width: 108px; height: 108px; font-size: 44px; }

  /* Device mockup — 280px so it fits a 390px viewport with margin */
  .device { max-width: 280px; border-radius: 32px; border-width: 6px; }
  .device .notch { width: 92px; height: 18px; }

  /* Cards — slightly tighter padding on phones */
  .card { padding: 18px; }

  /* Footer — already drops to 2 cols at 720px; tighten padding */
  footer.site-footer { padding: 44px 18px 28px; }
  footer.site-footer .footer-cols { gap: 28px; }
  footer.site-footer .legal-line {
    flex-direction: column; gap: 10px; align-items: flex-start;
  }

  /* Scroll-fade — shorter travel on phones (28→14px) so the
     first-paint shift is less jarring on a small viewport. */
  .fade-in { transform: translateY(14px); }
}

/* ─────────────────────────────────────────────────────────
   Responsive — small phones (≤480px)
   Pin headline sizes (no clamp) so a 360px viewport doesn't
   overflow on big display words like "We don't sell you...".
   ───────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  :root {
    --t-display:  34px;
    --t-headline: 30px;
    --t-title:    24px;
    --t-subtitle: 19px;
    --pad-fold:   48px;
  }
  .nav-inner { padding: 0 14px; }
  .brand-logo { height: 28px; }
  footer.site-footer .footer-cols { grid-template-columns: 1fr; }
}