/* GENERATED — do not edit. Source: lps/redesign-profound/design-system.css */
/* ============================================================================
 * MH-1 LANDING PAGES — DARK DESIGN SYSTEM  ·  single source of truth
 * ----------------------------------------------------------------------------
 * > signal-mint readout on an obsidian canvas — one mint action per view,
 *   everything else in a tight cool-gray ramp; cards earn presence from 1px
 *   hairlines and soft depth, never fills.
 *
 * Theme: DARK. This file IS the standard — read it top-to-bottom and you have
 * read the standard. Spec and implementation cannot drift because they are the
 * same file. Edit ONLY this file (lps/redesign-profound/design-system.css);
 * every dark LP links it. Per-page <style> blocks hold ONLY bespoke section
 * layout, never tokens / buttons / type primitives (those live here).
 *
 * Borrowed doctrine: Profound (tryprofound.com) for clarity, restraint, and a
 * single conversion goal; Linear for token discipline and a defined type scale.
 * Profound is light-mode; MH-1 runs dark on purpose (AEO-first direction).
 *
 * ── DO ──────────────────────────────────────────────────────────────────────
 *  • Ration Mint to ONE primary action per section (.btn--mint). It is the only
 *    chromatic fill on the page.
 *  • Use the text ramp by role: Snow=headings, Fog=body/running text,
 *    Slate=muted labels only. Running text is never on Slate.
 *  • Pick type from the scale tokens / .t-* classes below — never a raw px size.
 *  • Cap weight at 600. Three weights only: 400 / 500 / 600.
 *  • Cards get depth from a 1px hairline + soft shadow, not bright fills.
 *  • Every link resolves: no href="#", no anchor without a matching id.
 *
 * ── DON'T ─────────────────────────────────────────────────────────────────--
 *  • No second chromatic fill, no new accent colors (Pink is decorative only).
 *  • No UNDIFFERENTIATED near-duplicate sizes (the old 9.5/10.5/13.5/14.5 sprawl).
 *    Defined roles may sit 1px apart (sm 14 / control 15 / body 16) — each a distinct job.
 *  • No font-size below 12px. Slate (.40→.55) never carries sentences.
 *  • No weight 700+. No `transition: all` on buttons (it animates color → vanish).
 *  • No more than one secondary CTA, and only when it points somewhere real.
 *
 * ── IMAGERY ──────────────────────────────────────────────────────────────────
 *  Heroes are glanceable, not readable — no busy dashboards, one focal point.
 *  Problem/process visuals use a per-card bento idiom; benefits use icons only.
 *  Product mocks sit framed on the canvas (hairline + soft shadow), never flat.
 *
 * ── NEW PAGE CHECKLIST ───────────────────────────────────────────────────────
 *  1. <link rel="stylesheet" href="design-system.css"> (canonical, copied in at
 *     deploy — see deploy note in each page's status.md).
 *  2. Use .t-* classes / --text-* tokens for ALL text. No raw font-size.
 *  3. One .btn--mint primary (header + hero + final CTA); ≤1 .btn--ghost secondary.
 *  4. Before deploy run the checks: contrast (Fog/Slate on Canvas ≥4.5:1), hover
 *     (every .btn--ghost label stays visible), dead links (grep href="#"), and the
 *     type audit (grep font-size — only scale rungs allowed).
 *  5. Responsive: ONE ~860px breakpoint collapses every multi-col grid to 1col
 *     (4-col stat strips may go 2col). Hero CTA stacking + wrap padding come from
 *     the canonical mobile baseline below — don't re-declare per page. Never set a
 *     mobile `body` font-size (base stays 16px). Test 360/390px: no horizontal
 *     scroll, no fixed `width` > viewport (use max-width), CTAs full-width.
 *
 * Peer references: Profound (bible) · Linear (token discipline) · Vercel.
 * ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  /* ── Surfaces (4-step stack: Canvas → Soft → Card → Input) ── */
  --bg: #08080A;                          /* Canvas — page background, the void */
  --bg-soft: #0E0E12;                     /* Soft — banded sections, proof band */
  --surface-card: rgba(255,255,255,0.04); /* Card — glass cards, raised surfaces */
  --surface-input: rgba(255,255,255,0.04);/* Input — fields, search */
  --hair: rgba(255,255,255,0.08);         /* Hairline — borders, dividers, card edges */
  --hair-strong: rgba(255,255,255,0.14);  /* Hairline-strong — emphasized edges, inputs */

  /* ── Text ramp (THE contrast fix lives here) ── */
  --ink-1: rgba(255,255,255,0.95);  /* Snow  — headings, primary text       (~17:1) */
  --ink-2: rgba(255,255,255,0.72);  /* Fog   — body / running text  (was .62 → ~10:1) */
  --ink-3: rgba(255,255,255,0.55);  /* Slate — muted labels ONLY    (was .40 → ~5.9:1) */

  /* ── Accent ── */
  --color-brand-green: #6BFFDC;        /* Mint — the one rationed chromatic fill */
  --color-brand-green-hover: #7FFFE2;  /* Mint-hover */
  --mint: var(--color-brand-green);
  --mint-ink: #07140F;                 /* near-black text that sits on Mint */
  --pink: #FF6FA5;                     /* decorative / "missing" highlight — never an action */

  /* ── Type families ── */
  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* ── Weights (three only — cap at 600) ── */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* ── Type scale (Linear-style roles; snap everything to these) ── */
  --text-display: clamp(40px, 5.4vw, 70px); /* hero H1 — one per page */
  --text-h2: clamp(30px, 3.7vw, 48px);    /* section headlines */
  --text-stat: clamp(34px, 3.8vw, 48px);  /* big metric numerals only */
  --text-h3: 22px;                        /* card / sub-section titles */
  --text-lead: clamp(17px, 1.4vw, 20px);  /* hero subhead, section intros (fluid, airy) */
  --text-h4: 18px;                        /* small feature/label headings */
  --text-body: 16px;                      /* default running text */
  --text-control: 15px;                   /* buttons, nav links, inputs (interactive) */
  --text-sm: 14px;                        /* secondary / dense text, table cells */
  --text-eyebrow: 12px;                   /* mono eyebrows, captions, micro-labels */

  /* ── Layout & spacing (base unit 4px) ── */
  --page-max: 1200px;
  --section-pad: 116px;   /* standard section vertical rhythm */
  --section-pad-tight: 96px;

  /* ── Radius ── */
  --radius-button: 10px;
  --radius-card: 16px;
  --radius-card-sm: 12px;
  --radius-input: 10px;
  --radius-pill: 9999px;

  /* ── Elevation ── */
  --shadow-cta: 0 8px 24px -10px rgba(107,255,220,.6);          /* mint glow under primary CTA */
  --shadow-card: 0 1px 0 0 rgba(255,255,255,0.04) inset, 0 30px 80px -40px rgba(0,0,0,0.8);
  --shadow-overlay: 0 20px 60px -20px rgba(0,0,0,0.7);
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-1);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, textarea { font: inherit; color: inherit; }

/* A darker banded section (used by .section--dark wrappers carried over from markup) */
.section--dark { background: var(--bg); color: var(--ink-1); position: relative; }

/* ── Containers ── */
.wrap { max-width: var(--page-max); margin: 0 auto; padding: 0 28px; }
.wrap--narrow { max-width: 920px; }
section { position: relative; }

/* ============================================================================
 * TYPOGRAPHY — apply by role. .t-* classes are canonical; the tokens exist so
 * bespoke component CSS can reference a scale rung (var(--text-sm)) instead of
 * a raw number. Headings are weight 600 max; body 400; lead 500.
 * ========================================================================== */
h1, h2, h3, h4 { margin: 0; font-weight: var(--weight-semibold); letter-spacing: -0.02em; }

/* Headline fade: a subtle top-bright → dimmer vertical gradient on the type itself
 * (background-clip:text). Large-display only — the dimmer stop stays >3:1 at 40px+.
 * This is the premium Linear/Profound headline treatment; do not flatten to solid. */
.t-display, .display {
  font-size: var(--text-display); line-height: 1.04; letter-spacing: -0.03em;
  font-weight: var(--weight-semibold); text-wrap: balance;
  background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.76) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.t-h2, .h2 {
  font-size: var(--text-h2); line-height: 1.07; letter-spacing: -0.025em;
  font-weight: var(--weight-semibold); text-wrap: balance;
  background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.78) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.t-h3 { font-size: var(--text-h3); line-height: 1.2; letter-spacing: -0.02em; font-weight: var(--weight-semibold); }
.t-h4 { font-size: var(--text-h4); line-height: 1.3; letter-spacing: -0.01em; font-weight: var(--weight-semibold); }
.t-lead, .lead { font-size: var(--text-lead); line-height: 1.55; font-weight: var(--weight-regular); color: var(--ink-2); }
.t-body, .sub { font-size: var(--text-body); line-height: 1.55; color: var(--ink-2); }
.t-body-sm { font-size: var(--text-sm); line-height: 1.5; color: var(--ink-2); }
.t-stat { font-size: var(--text-stat); line-height: 1; letter-spacing: -0.03em; font-weight: var(--weight-semibold); color: var(--ink-1); }

/* Eyebrow — wide-tracked mono section label. .mono — tighter inline mono. ≤12px only here. */
.t-eyebrow, .eyebrow {
  font-family: var(--font-mono); font-size: var(--text-eyebrow);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
  font-weight: var(--weight-medium);
}
.mono {
  font-family: var(--font-mono); font-size: var(--text-eyebrow);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
}
.eyebrow .dot { color: var(--mint); }
.mint { color: var(--mint); }

/* ============================================================================
 * NAV
 * ========================================================================== */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  background: rgba(8,8,10,0.72);
  border-bottom: 1px solid var(--hair);
}
.nav__row { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: var(--weight-semibold); font-size: var(--text-body); letter-spacing: -0.01em; }
.brand__logo, .brand img { height: 24px; width: auto; display: block; }
.nav__links { display: flex; align-items: center; gap: 28px; }
.nav__links a { color: var(--ink-2); text-decoration: none; font-size: var(--text-control); transition: color .16s ease; }
.nav__links a:hover { color: var(--ink-1); }
.nav__links a.btn--mint, .nav__links a.btn--mint:hover { color: var(--mint-ink); }

/* ── Mobile baseline (shared by every LP; pages still collapse their own grids) ──
 * At ≤860px nav text links collapse to just the brand + primary CTA.
 * At ≤640px the hero CTA pair stacks full-width (two btn--lg overflow a phone row).
 * Pages keep their own single ~860px breakpoint to collapse multi-col grids to 1col. */
@media (max-width: 860px) { .nav__links a:not(.btn) { display: none; } }
@media (max-width: 640px) {
  .wrap { padding: 0 20px; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }
}

/* ============================================================================
 * BUTTONS
 *  Primary = .btn--mint (the readable header CTA on every page; one per section).
 *  Secondary = .btn--ghost. Hover NEVER animates color/opacity (that is what made
 *  the label vanish): explicit transitions only, and hover locks the text color.
 * ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: var(--radius-button);
  font-weight: var(--weight-semibold); font-size: var(--text-control); letter-spacing: -0.01em;
  text-decoration: none; cursor: pointer; border: 1px solid transparent; white-space: nowrap;
  transition: background-color .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.btn--lg { height: 56px; padding: 0 28px; font-size: var(--text-body); }

.btn--mint { background: var(--mint); color: var(--mint-ink); box-shadow: var(--shadow-cta); }
.btn--mint:hover { background: var(--color-brand-green-hover); color: var(--mint-ink); transform: translateY(-1px); }

.btn--ghost {
  background: var(--surface-card); color: var(--ink-1); border-color: var(--hair-strong);
}
.btn--ghost:hover { background: rgba(255,255,255,0.09); color: var(--ink-1); border-color: var(--hair-strong); }
/* keep the label above any decorative overlay so it can never be covered */
.btn > * { position: relative; z-index: 1; }

.btn:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }

/* ============================================================================
 * SURFACES — glass card primitive + pill
 * ========================================================================== */
.glass {
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
  border: 1px solid var(--hair); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border-radius: var(--radius-pill); font-family: var(--font-mono);
  font-size: var(--text-eyebrow); font-weight: var(--weight-medium);
  letter-spacing: 0.05em; text-transform: uppercase;
}
.pill--accent {
  color: var(--mint); background: rgba(107,255,220,0.10);
  border: 1px solid rgba(107,255,220,0.32);
}