:root {
  --primary-0:   #FFFFFF;
  --primary-100: #F8FAFC;
  --primary-200: #F1F5F9;
  --primary-300: #E2E8F0;
  --primary-400: #CBD5E1;
  --primary-500: #94A3B8;
  --primary-600: #64748B;
  --primary-700: #475569;
  --primary-800: #1E293B;
  --primary-900: #000000;

  --tertiary-50:  #FFFBEB;
  --tertiary-100: #FEF3C7;
  --tertiary-200: #FDE68A;
  --tertiary-300: #FCD34D;
  --tertiary-400: #FBBF24;
  --tertiary-500: #F59E0B;
  --tertiary-600: #D97706;
  --tertiary-700: #B45309;
  --tertiary-800: #92400E;
  --tertiary-900: #78350F;

  --secondary-50:  #F5FCF0;
  --secondary-100: #E5FCD3;
  --secondary-200: #D6FABA;
  --secondary-300: #C6F89F;
  --secondary-400: #B9F589;
  --secondary-500: #ADF177;
  --secondary-600: #8CDD4C;
  --secondary-700: #69C71F;
  --secondary-800: #3F8D00;
  --secondary-900: #357404;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/manrope-variable.woff2") format("woff2");
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/roboto-regular.woff2") format("woff2");
}

h1, h2, h3, h4 {
  font-family: "Manrope", sans-serif;
  font-variation-settings: "wght" 725;
}

h1 { font-size: 4.25rem; line-height: 1.1; }
h2 { font-size: 2.75rem; line-height: 1.2; }
h3 { font-size: 1.75rem; line-height: 1.3; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .75rem 2rem;
  border-radius: 5px;
  font-family: "Manrope", sans-serif;
  font-variation-settings: "wght" 625;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: opacity .15s, box-shadow .15s;
  color: #1E293B;
}

.btn-primary {
  background: linear-gradient(to top right, #92EA55 0%, #C1EF69 64%, #B9F589 100%);
}
.btn-primary:hover { opacity: .9; box-shadow: 0 4px 16px rgba(140,221,76,.35); }

.btn-secondary {
  background: transparent;
  border-color: #475569;
}
.btn-secondary:hover { border-color: #1E293B; }

body {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.6;
}

p {
  font-size: 1.1rem;
  color: var(--primary-600);
  line-height: 1.6;
}

/* ─── Fluid Typography ─────────────────────────────────────────── */
h1 { font-size: clamp(1.75rem, 5.5vw, 4.25rem); }
h2 { font-size: clamp(1.35rem, 3.8vw, 2.75rem); }
h3 { font-size: clamp(1.1rem, 2.2vw, 1.75rem); }

/* ─── Responsive Utilities ─────────────────────────────────────── */
@media (max-width: 767px) {
  h1 { font-size: 2.35rem; line-height: 1.15; }
  h2 { line-height: 1.25; }

  /* Hero leads: slightly smaller on mobile */
  p[style*="font-size:1.35rem"],
  p[style*="font-size:1.25rem"],
  p[style*="font-size:1.2rem"] {
    font-size: 1.05rem !important;
    line-height: 1.55 !important;
  }

  /* Section horizontal padding */
  .wf-section { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }

  /* Images shouldn't overflow */
  img { max-width: 100%; height: auto; }

  /* Buttons: side by side, compact — not full width */
  .btn { width: auto; justify-content: center; padding: .7rem 1.35rem; font-size: .95rem; }
}