/* Standalone stylesheet - the marketing site shares no build with apps/web on
   purpose, so the few tokens it needs are copied here rather than imported.
   Keep the colour values in step with apps/web/src/app/globals.css by hand;
   there are only a handful and drifting slightly matters less than coupling
   the two deploys. Fonts are self-hosted copies of the app's own faces
   (Fraunces for the wordmark, Satoshi for text), served from this origin so
   the existing CSP (font-src 'self') covers them with no external request.

   Layout: sections run full width so a tinted band can bleed edge to edge;
   the column is held by .wrap on the inside of each one. */

@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/Fraunces-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('/fonts/Satoshi-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('/fonts/Satoshi-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

:root {
  /* Both themes are supported and follow the OS; there is no manual toggle,
     since persisting one needs JS and the CSP allows none. Declaring the
     scheme lets the browser match its own chrome (scrollbars, the canvas
     before paint) instead of flashing white into a dark page. */
  color-scheme: light dark;

  --bg: #fdfdfd;
  --surface: #ffffff;
  --surface-1: #f5f5f6;
  --border-faint: #e4e4e6;
  --fg: #131316;
  --fg-muted: #4b4b50;
  --fg-dim: #7c7c82;
  --accent: oklch(0.49 0.075 205);
  --accent-fg: #ffffff;
  --accent-soft: oklch(0.49 0.075 205 / 0.12);
  --accent-hover: oklch(0.43 0.075 205);
  --shadow-sm: 0 1px 2px rgba(17, 18, 22, 0.05),
               0 4px 12px -2px rgba(17, 18, 22, 0.06);

  --sans: 'Satoshi', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --display: 'Fraunces', Georgia, serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1c1b19;
    --surface: #232220;
    --surface-1: #262523;
    --border-faint: #302f2c;
    --fg: #f2f2f0;
    --fg-muted: #c4c4c0;
    --fg-dim: #8e8e8a;
    --accent: oklch(0.65 0.11 190);
    --accent-fg: #1c1b19;
    --accent-soft: oklch(0.65 0.11 190 / 0.15);
    --accent-hover: oklch(0.72 0.11 190);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28),
                 0 4px 12px -2px rgba(0, 0, 0, 0.22);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
svg { display: block; }

.wrap {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Header */

.site-header { padding: 28px 0 0; }

.header-inner {
  display: flex;
  align-items: center;
  gap: 14px;
}

.wordmark {
  font-family: var(--display);
  font-weight: 300;
  font-size: 27px;
  letter-spacing: -0.3px;
  color: var(--fg);
}

.pill {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 4px 10px;
}

.header-link {
  margin-left: auto;
  font-size: 14px;
  color: var(--fg-muted);
  text-decoration: none;
}

.header-link:hover { color: var(--fg); }

/* Hero */

.hero { padding: 72px 0 0; }

.hero h1 {
  font-family: var(--display);
  font-size: 44px;
  line-height: 1.12;
  letter-spacing: -0.8px;
  font-weight: 400;
  max-width: 660px;
}

.lead {
  margin-top: 20px;
  max-width: 660px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--fg-muted);
}

.hero-actions {
  margin-top: 30px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.hero-note {
  font-size: 13.5px;
  color: var(--fg-dim);
}

.button {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 7px;
}

.button:hover { background: var(--accent-hover); }
.button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Sections */

.section { padding: 56px 0 72px; }

.section-label {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 18px;
}

/* The three headline features */

/* Nine features, three across. No align-items on purpose: the cards stretch
   to a common height per row, so uneven copy does not leave a ragged bottom. */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: 14px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border-faint);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  padding: 22px;
}

.card h3 {
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: -0.1px;
  margin-bottom: 7px;
}

.card p {
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--fg-muted);
}

.icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: 15px;
}

.icon svg { width: 18px; height: 18px; }

/* Tinted band, full bleed */

.band {
  padding: 64px 0;
  background: var(--surface-1);
  border-top: 1px solid var(--border-faint);
  border-bottom: 1px solid var(--border-faint);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  align-items: start;
}

.card-quiet {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  padding: 0;
}

/* Closing */

.closing {
  padding: 40px;
  background: var(--surface-1);
  border: 1px solid var(--border-faint);
  border-radius: 12px;
  text-align: center;
}

.closing h2 {
  font-family: var(--display);
  font-size: 27px;
  letter-spacing: -0.4px;
}

.closing p {
  margin: 14px auto 0;
  max-width: 460px;
  font-size: 15.5px;
  color: var(--fg-muted);
}

.closing p:last-child { margin-top: 24px; }

/* Footer */

.site-footer {
  padding: 40px 0 48px;
  border-top: 1px solid var(--border-faint);
  font-size: 13.5px;
  color: var(--fg-muted);
}

.footer-dim { margin-top: 6px; color: var(--fg-dim); }

/* Narrow screens */

@media (max-width: 620px) {
  .hero { padding-top: 48px; }
  .hero h1 { font-size: 33px; letter-spacing: -0.5px; }
  .lead { font-size: 16.5px; }
  .closing { padding: 32px 24px; }
  .header-link { display: none; }
}