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

:root {
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Inter,
    "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", "Courier New", monospace;
  --logo-size: clamp(30px, 7vw, 72px);
  --nav-grad-1: #b8d08a;
  --nav-grad-2: #9caf78;
  --nav-grad-3: #7f8f67;
  --container-max: 1020px;
  --nav-right-extra: 24px;
  --green: #16a534;
  --mint: #eaf8ec;
  --gap: 48px;
  --radius: 22px;
  --card-h: clamp(500px, 28vw, 750px);
  --card-h-m: clamp(320px, 75vw, 550px);
  --pill-h: 56px;
  --footer-green: #1fb34a;
  --footer-green-dark: #0f7c31;
  --footer-green-darker: #0a6b27;
  --pill-h: clamp(44px, 6.2vw, 56px);
  --card-h: clamp(300px, 28vw, 360px); /* desktop height (already have) */
  --card-h-m: clamp(280px, 60vw, 340px);
}

html {
  font-family: var(--font-sans);
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #ffffff;
  overflow-x: hidden;
}

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

/* Small Mobile */
@media (max-width: 480px) {
  .main-title {
    font-size: clamp(4rem, 9vw, 40px);
    letter-spacing: -0.2px;
  }

  .subtitle {
    font-size: clamp(16px, 4vw, 18px);
    border-radius: 18px;
  }
}