@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700&family=Schibsted+Grotesk:wght@400;500;600&family=Fragment+Mono&display=swap");

/* R29 marketing tokens. Loaded after legacy page-local CSS so every public surface shares
   the hero's porcelain/type language while page-specific layout remains intact. */
:root {
  /* BASE STYLE (founder, 2026-07-28): the marketing pages link THIS sheet, not
     style.css, so promoting the tokens there left the public site on the old warm
     palette while the app changed underneath it. Same values, second home. */
  --accent: #D3F84B;
  --on-accent: #0C0C0C;
  --a: var(--accent);
  --bg: #F1F1EF;
  --bg2: #E9E9E6;
  --paper: #F1F1EF;
  --card: #FFFFFF;
  --ink: #0C0C0C;
  --ink2: #4A4A47;
  --ink3: #8A8A85;
  --hair: rgba(12, 12, 12, .10);
  --radius: 14px;
  --shadow: none;
  --disp: "Bricolage Grotesque", system-ui, sans-serif;
  --body: "Schibsted Grotesk", -apple-system, system-ui, sans-serif;
  --mono: "Fragment Mono", ui-monospace, SFMono-Regular, monospace;
  --serif: var(--disp);
}
[data-theme="dark"] {
  --bg: #17191A;
  --bg2: #17191A;
  --paper: #17191A;
  --card: #212425;
  --ink: #F3F4F1;
  --ink2: #B8BEBA;
  --ink3: #8E9690;
  --hair: rgba(243, 244, 241, .14);
  --shadow: none;
}
body {
  background: var(--paper) !important;
  font-family: var(--body) !important;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
.serif, h1, h2, .hero h1, .story h2, .closer h2, .group h2, .section-head h2 {
  font-family: var(--disp) !important;
  font-style: normal !important;
  letter-spacing: -.025em !important;
}
.hero h1 em, h1 em, h2 em { color: var(--accent); font-style: normal !important; }
.k, .eyebrow, .section-kicker, .mono { font-family: var(--mono) !important; letter-spacing: .04em !important; }
.btn { border-radius: 10px !important; box-shadow: none !important; }
.card, .qa, .price-card, .guide-card, .lane, .st, .panel, .ph, details {
  border-color: var(--hair) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}
header.site img { display: none !important; }
header.site .name {
  font-family: var(--disp); font-size: 20px !important; font-weight: 600 !important;
  letter-spacing: -.01em;
}
header.site .name::first-letter { color: inherit; }
footer { border-color: var(--hair) !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}