/* GROAT V3. Mint ground, forest ink, one lime accent. Type scale lives here only. */
:root {
  --ground: #F4FAED;
  --band: #E9F3DE;
  --ground-top: var(--ground);
  --ground-bottom: var(--band);
  --ink: #18280E;
  --ink-soft: #5C6555;
  --forest: #18280E;
  --lime: #B2EB76;
  --hairline: #DFE7D4;
  --card: #FFFFFF;
  --paper: var(--card);
  --glass: rgba(255, 255, 255, 0.86);
  --glass-border: var(--hairline);
  --glass-highlight: rgba(255, 255, 255, 0.55);
  --panel: var(--glass);
  --line: var(--hairline);
  --line-soft: #DFE7D4;
  --pane: var(--glass);
  --pane-strong: rgba(255, 255, 255, 0.94);
  --pane-border: var(--hairline);
  --mute: var(--ink-soft);

  --font-display: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Manrope", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --fs-h1: 38px;
  --fs-h2: 30px;
  --fs-h3: 24px;
  --fs-h4: 19px;
  --fs-body: 16px;
  --fs-label: 11px;
  --fs-data: 12px;
  --track-label: 0.09em;
  --track-h1: -0.022em;

  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;

  --radius: 16px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --notch: 14px;
  --notch-lg: 34px;
  --notch-ref-sm: 18px;
  --maxw: 1280px;
  --touch: 44px;
  --nav-break: 900px;
  --rhythm: 8px;
  --card-radius: 0px;
  --card-border: var(--hairline);
  --card-surface: var(--glass);
  --card-pad: 16px;
  --section-y: 48px;
  --section-y-sm: 48px;
  --gutter: 16px;
  --gap: 16px;

  --brand-glyph: 28px;
  --brand-glyph-sm: 20px;
  --brand-gap: 8px;
  --brand-gap-sm: 6px;
  --brand-mark: 16px;
  --brand-mark-sm: 13px;
  --brand-track: -0.02em;
  --bento-row: 200px;
  --bento-gap: 16px;
  --pipe-stroke: rgba(24, 40, 14, 0.22);
  --stream-row: 28px;
  --marquee-h: 44px;
  --epoch-value: 20px;
  --cta-panel: rgba(255, 255, 255, 0.96);
  --hero-min-h: min(100vh, 860px);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --ease-out-quint: var(--ease);
  --ease-out-expo: var(--ease);
  --fx-press: 100ms;
  --fx-hover: 180ms;
  --fx-disclosure: 200ms;
  --fx-receipt: 300ms;
  --fx-reveal: 600ms;
  --fx-mask: 600ms;
  --fx-stagger: 60ms;
  --fx-preloader: 400ms;
  --fx-digit: 300ms;
  --fx-load-heading: 0ms;
  --fx-load-band: 60ms;
  --fx-load-cta: 120ms;
  --fx-load-metrics: 180ms;
  --fx-load-scene: 240ms;
  color-scheme: light;
}

@media (min-width: 360px) {
  :root {
    --fs-h1: 38px;
    --fs-h2: 30px;
    --fs-h3: 24px;
    --section-y: 48px;
    --section-y-sm: 48px;
    --gutter: 16px;
    --gap: 16px;
    --card-pad: 16px;
  }
}

@media (min-width: 390px) {
  :root {
    --fs-h1: 38px;
    --fs-h2: 30px;
    --fs-h3: 24px;
    --section-y: 48px;
    --section-y-sm: 48px;
    --gutter: 16px;
    --gap: 16px;
    --card-pad: 16px;
  }
}

@media (min-width: 768px) {
  :root {
    --fs-h1: 50px;
    --fs-h2: 34px;
    --fs-h3: 24px;
    --section-y: 64px;
    --section-y-sm: 64px;
    --gutter: 24px;
    --gap: 24px;
    --card-pad: 24px;
  }
}

@media (min-width: 1024px) {
  :root {
    --fs-h1: 64px;
    --fs-h2: 44px;
    --fs-h3: 28px;
    --section-y: 80px;
    --gutter: 32px;
    --gap: 24px;
    --card-pad: 32px;
  }
}

@media (min-width: 1440px) {
  :root {
    --fs-h1: 80px;
    --fs-h2: 56px;
    --fs-h3: 32px;
    --section-y: 96px;
    --gutter: 48px;
    --gap: 32px;
    --card-pad: 32px;
  }
}