@font-face {
      font-family: 'Geist Mono';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url('/fonts/GeistMono-Regular.woff2') format('woff2');
    }
    :root {
      color-scheme: dark;
      --bg: #000000;
      --fg: #ffffff;
      --card: #080808;
      --surface: #0d0d0d;
      --border: #1a1a1a;
      --muted: rgba(255, 255, 255, 0.62);
      --dim: rgba(255, 255, 255, 0.40);
      --hairline: rgba(255, 255, 255, 0.08);
      --hairline-strong: rgba(255, 255, 255, 0.13);
      --accent-violet: #6b5ecd;
      --accent-emerald: hsl(160 84% 39%);
      --alexandrite: #483d8b;
      --alexandrite-forest: #3a504b;
      --mono: 'Geist Mono', ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
      --sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }
    * { box-sizing: border-box; }
    html, body {
      margin: 0;
      padding: 0;
      background: var(--bg);
      color: var(--fg);
      font-family: var(--sans);
      font-size: 17px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    body { overflow-x: hidden; }
    main { display: block; }
    .wrap {
      max-width: 800px;
      margin: 0 auto;
      padding: 0 24px;
    }
    .wrap-wide {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
    }
    a {
      color: var(--fg);
      text-decoration: underline;
      text-decoration-color: var(--dim);
      text-underline-offset: 4px;
      transition: text-decoration-color 200ms ease;
    }
    a:hover, a:focus-visible { text-decoration-color: var(--accent-violet); }
    a:focus-visible {
      outline: 1px solid var(--accent-violet);
      outline-offset: 4px;
    }
    h1, h2, h3 {
      font-family: var(--mono);
      font-weight: 400;
      letter-spacing: -0.005em;
      margin: 0 0 24px;
      line-height: 1.3; /* floor — fixes descender clipping on g/p/q */
    }
    h2 {
      font-size: 28px;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      line-height: 1.3;
    }
    h3 {
      font-size: 14px;
      letter-spacing: 0.20em;
      text-transform: uppercase;
      color: var(--dim);
      margin-bottom: 12px;
      line-height: 1.4;
    }
    p {
      margin: 0 0 18px;
      color: var(--muted);
    }
    p strong { color: var(--fg); font-weight: 400; }

    /* ─── Header / Hero — tighter cluster, anchored composition ──────── */
    header.hero {
      padding: 56px 0 48px;
      text-align: center;
    }
    .hud-strip {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      margin-bottom: 28px;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.30em;
      text-transform: uppercase;
      color: var(--dim);
      line-height: 1.3;
    }
    .hud-strip .sep {
      display: inline-block;
      width: 4px;
      height: 4px;
      background: var(--hairline-strong);
      border-radius: 50%;
    }
    .wordmark {
      display: inline-block;
      width: min(48vw, 360px);
      height: auto;
      margin: 0 auto 24px;
    }
    .wordmark svg { display: block; width: 100%; height: auto; }
    .tagline {
      font-family: var(--mono);
      font-size: 22px;
      line-height: 1.3;
      letter-spacing: 0.01em;
      color: var(--fg);
      margin: 0 auto 18px;
      max-width: 520px;
    }
    .subhead {
      font-size: 18px;
      line-height: 1.55;
      color: var(--muted);
      max-width: 560px;
      margin: 0 auto 28px;
    }

    /* ─── CTAs — primary X-follow, secondary waitlist form ───────────── */
    .cta-primary {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 14px 28px;
      font-family: var(--mono);
      font-size: 13px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--fg);
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.20);
      border-radius: 2px;
      text-decoration: none;
      transition: background 200ms ease, border-color 200ms ease;
      line-height: 1.3;
    }
    .cta-primary:hover, .cta-primary:focus-visible {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.36);
      text-decoration: none;
    }
    .cta-primary .x-glyph {
      font-size: 16px;
      line-height: 1;
      letter-spacing: 0;
    }
    .cta-secondary-label {
      margin: 32px auto 12px;
      max-width: 460px;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--dim);
      line-height: 1.3;
    }

    /* ─── Hero — seat cap + anti-marketing + form-aside ──────────────── */
    .seat-cap {
      margin: 36px auto 14px;
      max-width: 460px;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.20em;
      text-transform: uppercase;
      color: var(--dim);
      text-align: center;
      line-height: 1.4;
    }
    .anti-marketing {
      margin: 0 auto 24px;
      max-width: 460px;
      font-family: var(--mono);
      font-size: 12px;
      letter-spacing: 0.04em;
      font-style: italic;
      color: var(--muted);
      text-align: center;
      line-height: 1.5;
    }
    .form-aside {
      margin: 20px auto 0;
      max-width: 460px;
      font-family: var(--mono);
      font-size: 12px;
      letter-spacing: 0.04em;
      color: var(--dim);
      text-align: center;
      line-height: 1.5;
    }
    .form-aside a {
      color: var(--fg);
      text-decoration-color: var(--dim);
    }
    .form-aside a:hover,
    .form-aside a:focus-visible {
      text-decoration-color: var(--accent-violet);
    }

    /* ─── Waitlist form — self-hosted, brand-aligned ─────────────────── */
    .waitlist-form {
      max-width: 460px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 12px;
      text-align: left;
    }
    .waitlist-form .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;
    }
    .waitlist-form .honeypot {
      position: absolute;
      left: -9999px;
      width: 1px;
      height: 1px;
      opacity: 0;
      pointer-events: none;
    }
    .waitlist-form input[type="email"] {
      width: 100%;
      padding: 14px 16px;
      font-family: var(--mono);
      font-size: 14px;
      letter-spacing: 0.02em;
      color: var(--fg);
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 2px;
      transition: border-color 200ms ease, background 200ms ease;
      -webkit-appearance: none;
      appearance: none;
    }
    .waitlist-form input[type="email"]::placeholder {
      color: var(--dim);
    }
    .waitlist-form input[type="email"]:hover {
      border-color: rgba(255, 255, 255, 0.18);
    }
    .waitlist-form input[type="email"]:focus,
    .waitlist-form input[type="email"]:focus-visible {
      outline: none;
      border-color: var(--accent-emerald);
      background: rgba(255, 255, 255, 0.05);
      box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
    }
    .waitlist-form button[type="submit"] {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 14px 28px;
      font-family: var(--mono);
      font-size: 13px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--fg);
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.20);
      border-radius: 2px;
      text-decoration: none;
      cursor: pointer;
      transition: background 200ms ease, border-color 200ms ease;
      line-height: 1.3;
    }
    .waitlist-form button[type="submit"]:hover,
    .waitlist-form button[type="submit"]:focus-visible {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.36);
    }
    .waitlist-form button[type="submit"]:disabled {
      opacity: 0.5;
      cursor: wait;
    }
    .waitlist-form .form-status {
      margin: 4px 0 0;
      font-family: var(--mono);
      font-size: 12px;
      letter-spacing: 0.04em;
      color: var(--dim);
      line-height: 1.4;
      min-height: 1.4em;
    }
    .waitlist-form .form-status.is-success { color: var(--accent-emerald); }
    .waitlist-form .form-status.is-error   { color: var(--fg); opacity: 0.78; }
    .waitlist-form .cf-turnstile {
      display: none; /* invisible widget — challenge runs without UI */
    }
    .waitlist-success {
      max-width: 460px;
      margin: 0 auto;
      padding: 20px 24px;
      font-family: var(--mono);
      font-size: 13px;
      letter-spacing: 0.04em;
      color: var(--fg);
      background: rgba(16, 185, 129, 0.06);
      border: 1px solid rgba(16, 185, 129, 0.20);
      border-radius: 2px;
      text-align: left;
      line-height: 1.5;
    }

    /* ─── Section base — denser, hairline at visibility floor ────────── */
    section {
      padding: 56px 0;
      border-top: 1px solid var(--hairline);
    }
    section .wrap > h2,
    section .wrap-wide > h2 { margin-bottom: 24px; }

    /* ─── Wow section — full-width image, intro above, caption below ── */
    #wow .wow-intro { margin-bottom: 36px; }
    .wow-card {
      position: relative;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 0;
      overflow: hidden;
      transition: border-color 280ms ease, box-shadow 280ms ease;
    }
    .wow-card:hover {
      border-color: var(--alexandrite);
      box-shadow:
        0 0 0 1px var(--alexandrite-forest),
        0 16px 64px -18px var(--alexandrite);
    }
    .wow-card img {
      display: block;
      width: 100%;
      height: auto;
      object-fit: contain;
    }
    .wow-caption {
      margin: 16px 0 0;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.06em;
      color: var(--dim);
      text-align: center;
      line-height: 1.5;
    }
    .wow-caption .sources-label {
      letter-spacing: 0.24em;
      color: var(--hairline-strong);
      margin-right: 8px;
      text-transform: uppercase;
    }

    /* ─── Commitments list ──────────────────────────────────────────── */
    .commitments {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .commitments li {
      padding: 18px 0;
      border-bottom: 1px solid var(--hairline);
      display: flex;
      gap: 20px;
      align-items: baseline;
    }
    .commitments li:last-child { border-bottom: 0; }
    .commitments .marker {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.20em;
      color: var(--dim);
      flex-shrink: 0;
      width: 32px;
    }
    .commitments .text { color: var(--fg); flex: 1; }

    /* ─── Founder socials — compact 3-icon row ──────────────────────── */
    .founder-socials {
      list-style: none;
      padding: 0;
      margin: 24px 0 0;
      display: flex;
      flex-wrap: wrap;
      gap: 24px;
      font-family: var(--mono);
      font-size: 12px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }
    .founder-socials a {
      color: var(--dim);
      text-decoration: none;
      transition: color 200ms ease;
    }
    .founder-socials a:hover,
    .founder-socials a:focus-visible { color: var(--fg); }

    /* ─── Manifesto blocks + why-now line ───────────────────────────── */
    #manifesto .wrap { text-align: center; }
    .manifesto-block {
      font-family: var(--mono);
      font-size: 20px;
      line-height: 1.5;
      color: var(--fg);
      margin: 0 auto 28px;
      max-width: 620px;
    }
    .manifesto-block:last-of-type { margin-bottom: 36px; }
    .why-now {
      margin: 0 auto;
      max-width: 600px;
      font-size: 15px;
      line-height: 1.55;
      color: var(--muted);
    }
    .why-now em { font-style: italic; }

    /* ─── Pillars list ──────────────────────────────────────────────── */
    .pillars {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .pillars li {
      padding: 20px 0;
      border-bottom: 1px solid var(--hairline);
      display: flex;
      gap: 28px;
      align-items: baseline;
    }
    .pillars li:last-child { border-bottom: 0; }
    .pillars .pillar-name {
      font-family: var(--mono);
      font-size: 12px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--fg);
      flex-shrink: 0;
      min-width: 110px;
    }
    .pillars .pillar-line {
      color: var(--muted);
      flex: 1;
      line-height: 1.55;
    }
    .pillars-closing {
      margin: 32px 0 0;
      font-family: var(--mono);
      font-size: 12px;
      letter-spacing: 0.06em;
      color: var(--dim);
      text-align: center;
      line-height: 1.5;
    }

    /* ─── Under the hood — provider-choice tagline ──────────────────── */
    .provider-line {
      margin: 32px auto 0;
      max-width: 560px;
      font-size: 16px;
      color: var(--fg);
      text-align: center;
      line-height: 1.5;
    }
    .provider-line em { font-style: italic; }

    /* ─── What's next — LIVE / BUILDING / NEXT 3-column ─────────────── */
    .next-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 40px;
    }
    .next-col h3 {
      font-family: var(--mono);
      font-size: 12px;
      letter-spacing: 0.30em;
      text-transform: uppercase;
      color: var(--fg);
      margin: 0 0 16px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--hairline-strong);
    }
    .next-col.next-live h3 { color: var(--accent-emerald); }
    .next-col ul {
      list-style: none;
      padding: 0;
      margin: 0;
      font-family: var(--mono);
      font-size: 13px;
      letter-spacing: 0.02em;
      line-height: 1.6;
    }
    .next-col li {
      padding: 6px 0;
      color: var(--muted);
    }
    .next-updated {
      margin: 40px 0 0;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.10em;
      color: var(--dim);
      text-align: center;
    }
    @media (min-width: 768px) {
      .next-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 36px;
        align-items: start;
      }
    }

    /* ─── Mission signature — italic outro above footer ─────────────── */
    #mission-signature { padding: 72px 0 48px; }
    .mission-signature {
      margin: 0 auto;
      max-width: 560px;
      font-family: var(--mono);
      font-size: 17px;
      line-height: 1.6;
      color: var(--fg);
      text-align: center;
    }
    .mission-signature em { font-style: italic; }

    /* ─── Footer — email row + last-shipped line ────────────────────── */
    footer .footer-email {
      margin: 0 0 20px;
      color: var(--dim);
    }
    footer .footer-email a {
      color: var(--fg);
      text-decoration: none;
      letter-spacing: 0.06em;
    }
    footer .footer-email a:hover,
    footer .footer-email a:focus-visible { color: var(--accent-violet); }

    /* ─── Footer ────────────────────────────────────────────────────── */
    footer {
      padding: 48px 0 64px;
      border-top: 1px solid var(--hairline);
      text-align: center;
      font-family: var(--mono);
      font-size: 12px;
      letter-spacing: 0.10em;
      color: var(--dim);
      line-height: 1.5;
    }
    footer .footer-wordmark {
      display: inline-block;
      width: 140px;
      margin-bottom: 20px;
      opacity: 0.62;
    }
    footer .footer-wordmark svg { display: block; width: 100%; height: auto; }
    footer .footer-meta { margin: 0 0 16px; color: var(--dim); }
    footer .footer-links {
      list-style: none;
      padding: 0;
      margin: 0 0 20px;
      display: flex;
      gap: 24px;
      justify-content: center;
      flex-wrap: wrap;
    }
    footer .footer-links a {
      color: var(--dim);
      text-decoration: none;
    }
    footer .footer-links a:hover,
    footer .footer-links a:focus-visible { color: var(--fg); }
    footer .copyright { color: var(--dim); opacity: 0.6; }

    /* ─── Responsive ────────────────────────────────────────────────── */
    @media (min-width: 768px) {
      header.hero { padding: 72px 0 64px; }
      section { padding: 72px 0; }
      .tagline { font-size: 26px; }
      .subhead { font-size: 19px; }
      h2 { font-size: 32px; }
    }
    @media (min-width: 1024px) {
      header.hero { padding: 88px 0 72px; }
      .wordmark { width: min(40vw, 480px); }
      .tagline { font-size: 30px; }
      h2 { font-size: 36px; }
      section { padding: 80px 0; }
    }
    @media (max-width: 480px) {
      header.hero { padding: 44px 0 36px; }
      section { padding: 44px 0; }
      .wrap, .wrap-wide { padding: 0 20px; }
      .wordmark { width: 75vw; }
      .tagline { font-size: 20px; }
      .subhead { font-size: 16px; }
      h2 { font-size: 22px; }
      .commitments li { flex-direction: column; gap: 4px; }
      .pillars li { flex-direction: column; gap: 6px; }
      .pillars .pillar-name { min-width: 0; }
      .founder-socials { justify-content: flex-start; gap: 20px; }
      .manifesto-block { font-size: 17px; }
      .why-now { font-size: 14px; }
      .mission-signature { font-size: 15px; }
      .cta-primary { padding: 12px 22px; font-size: 12px; }
      .waitlist-form input[type="email"] { font-size: 13px; padding: 12px 14px; }
      .waitlist-form button[type="submit"] { padding: 12px 22px; font-size: 12px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .wow-card, .cta-primary { transition: none; }
    }