/* Planit — base tokens, fonts, reset. Shared across all web models. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

:root {
  --green: #157733;
  --green-ink: #0A3E1B;
  --green-soft: #DEEDE2;
  --yellow: #F6CB48;
  --yellow-soft: #FBEFC4;
  --pink: #E96095;
  --pink-soft: #FBD9E6;
  --cream: #F7F1E6;
  --cream-deep: #EFE7D6;
  --surface: #FFFFFF;
  --ink: #1B2920;
  --ink-soft: #5C6B62;
  --ink-faint: #A8B0AB;
  --line: #E6DECF;

  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --body: 'DM Sans', system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { font-family: var(--body); color: var(--ink); line-height: 1.5; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; }
.display { font-family: var(--display); }
.tnum { font-variant-numeric: tabular-nums; }

/* Shared helpers */
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.pill { border-radius: 999px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--body); font-weight: 700; border-radius: 999px; transition: transform .15s ease, box-shadow .2s ease, background .15s ease; }
.btn:active { transform: translateY(1px) scale(0.99); }
.eyebrow { font-family: var(--body); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }