@font-face {
  font-family: "Hesper Grotesk";
  src: url("/assets/fonts/hesper-grotesk-regular.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

html[data-base="light"] {
  --lp-brand: #15803d !important;
  --lp-accent: #ca8a04 !important;

  --lp-primary-50: 240 253 244 !important;
  --lp-primary-100: 220 252 231 !important;
  --lp-primary-200: 187 247 208 !important;
  --lp-primary-300: 134 239 172 !important;
  --lp-primary-400: 74 222 128 !important;
  --lp-primary-500: 22 163 74 !important;
  --lp-primary-600: 21 128 61 !important;
  --lp-primary-700: 22 101 52 !important;
  --lp-primary-800: 20 83 45 !important;
  --lp-primary-900: 5 46 22 !important;

  --lp-secondary-50: 247 250 245 !important;
  --lp-secondary-100: 237 244 233 !important;
  --lp-secondary-200: 216 229 210 !important;
  --lp-secondary-300: 184 207 177 !important;
  --lp-secondary-400: 133 171 126 !important;
  --lp-secondary-500: 88 130 82 !important;
  --lp-secondary-600: 66 104 61 !important;
  --lp-secondary-700: 47 80 45 !important;
  --lp-secondary-800: 32 60 34 !important;
  --lp-secondary-900: 18 43 25 !important;

  --lp-accent-50: 255 251 235 !important;
  --lp-accent-100: 254 243 199 !important;
  --lp-accent-200: 253 230 138 !important;
  --lp-accent-300: 252 211 77 !important;
  --lp-accent-400: 226 170 23 !important;
  --lp-accent-500: 202 138 4 !important;
  --lp-accent-600: 161 98 7 !important;
  --lp-accent-700: 133 77 14 !important;
  --lp-accent-800: 113 63 18 !important;
  --lp-accent-900: 66 32 6 !important;

  --lp-neutral-50: 249 250 247 !important;
  --lp-neutral-100: 241 244 238 !important;
  --lp-neutral-200: 222 228 218 !important;
  --lp-neutral-300: 196 207 191 !important;
  --lp-neutral-400: 146 163 143 !important;
  --lp-neutral-500: 100 117 98 !important;
  --lp-neutral-600: 76 91 75 !important;
  --lp-neutral-700: 55 70 55 !important;
  --lp-neutral-800: 36 50 38 !important;
  --lp-neutral-900: 23 35 27 !important;

  --lp-surface: 249 250 246 !important;
  --lp-surface-alt: 241 245 236 !important;
  --lp-surface-container: 255 255 252 !important;
  --lp-surface-container-high: 232 238 226 !important;
  --lp-on-surface: 24 48 34 !important;
  --lp-on-surface-variant: 89 108 94 !important;
  --lp-outline: 210 221 207 !important;
  --lp-outline-variant: 231 237 228 !important;
  --lp-on-accent: 27 35 27 !important;

  --lp-font-heading: "Hesper Grotesk", "Inter", system-ui, sans-serif !important;
  --lp-heading-weight: 400 !important;
  --lp-heading-tracking: -0.025em !important;
  --lp-text-display-tracking: -0.035em !important;
  --lp-text-h1-tracking: -0.03em !important;
  --lp-text-h2-tracking: -0.02em !important;
  --lp-shadow-card: 0 1px 2px rgb(18 43 25 / 0.06),
    0 10px 30px rgb(18 43 25 / 0.045) !important;
  --lp-shadow-hover: 0 18px 42px rgb(18 43 25 / 0.11) !important;
  --lp-card-border: 1px solid rgb(21 128 61 / 0.1) !important;
  --lp-ghost-border: 1px solid rgb(21 128 61 / 0.14) !important;
  --lp-ghost-bg: rgb(240 253 244 / 0.72) !important;
  --lp-ghost-bg-hover: rgb(220 252 231 / 0.88) !important;
  --lp-star: #ca8a04 !important;
  --lp-radius-card: 16px !important;
}

body {
  background-color: rgb(var(--lp-surface));
  background-image:
    radial-gradient(circle at 8% -10%, rgb(21 128 61 / 0.045), transparent 32rem),
    radial-gradient(circle at 95% 18%, rgb(202 138 4 / 0.035), transparent 27rem);
  color: rgb(var(--lp-on-surface));
}

:where(.font-heading, .lp-h3, h3) {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.012em !important;
}

:where(.lp-display, .lp-h1, .lp-h2, h1, h2, .editorial h1, .editorial h2) {
  font-family: "Hesper Grotesk", "Inter", system-ui, sans-serif !important;
  font-synthesis: none;
  font-weight: 400 !important;
}

.lp-display,
h1.font-heading {
  line-height: 1.01 !important;
  letter-spacing: -0.032em !important;
}

h2.font-heading {
  color: rgb(var(--lp-primary-900));
  letter-spacing: -0.025em !important;
}

h2.font-heading::after {
  display: block;
  width: 2rem;
  height: 2px;
  margin-top: 0.48rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #15803d 0 72%, #ca8a04 72% 100%);
  content: "";
}

header.lp-site-header {
  border-bottom-color: rgb(21 128 61 / 0.13) !important;
  box-shadow: 0 7px 24px rgb(18 43 25 / 0.035);
}

header.lp-site-header::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgb(21 128 61 / 0.55) 32%,
    rgb(202 138 4 / 0.6) 68%,
    transparent
  );
  content: "";
  opacity: 0.42;
}

header .lp-logo-std,
header .lp-logo-ondark {
  height: 3.15rem !important;
}

.lp-menu {
  border-color: rgb(21 128 61 / 0.12);
  box-shadow: 0 18px 50px rgb(18 43 25 / 0.14);
}

.lp-card {
  border-color: rgb(21 128 61 / 0.1);
  background-color: rgb(var(--lp-surface-container));
  background-image: none;
}

.lp-card-interactive:hover {
  border-color: rgb(21 128 61 / 0.24);
}

.lp-card :where(.text-xs.uppercase, .lp-overline) {
  color: rgb(var(--lp-primary-700));
  letter-spacing: 0.075em;
}

.lp-card .rounded-full.bg-primary-600 {
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18);
}

.lp-panel {
  border: 1px solid rgb(21 128 61 / 0.1);
  background: rgb(247 250 245);
}

.lp-input {
  border-color: rgb(21 128 61 / 0.17);
  background-color: rgb(255 255 252 / 0.95);
  box-shadow: inset 0 1px 2px rgb(18 43 25 / 0.025);
}

.lp-input:focus {
  border-color: #15803d;
  box-shadow: 0 0 0 3px rgb(21 128 61 / 0.12);
}

.lp-accent-bg {
  border: 1px solid rgb(113 63 18 / 0.12);
  background: #ca8a04;
  box-shadow: 0 5px 16px rgb(202 138 4 / 0.17);
  transition: box-shadow 160ms ease, transform 160ms ease, filter 160ms ease;
}

.lp-accent-bg:hover {
  box-shadow: 0 8px 21px rgb(202 138 4 / 0.24);
  filter: brightness(0.97);
  transform: translateY(-1px);
}

.bg-primary-600,
.lp-brand-bg {
  background: #15803d !important;
}

.lp-btn-ghost {
  box-shadow: 0 2px 8px rgb(18 43 25 / 0.04);
}

.lp-chip,
.lp-chip-active {
  border: 1px solid rgb(21 128 61 / 0.11);
}

.lp-chip {
  background-color: rgb(247 250 245);
}

.lp-signature-flag,
.lp-badge-featured {
  border: 1px solid rgb(202 138 4 / 0.22);
}

main > section:first-child .rounded-full.bg-primary-100 {
  border: 1px solid rgb(21 128 61 / 0.08);
  box-shadow: 0 2px 8px rgb(18 43 25 / 0.035);
}

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid rgb(202 138 4 / 0.38);
  outline-offset: 3px;
}

main > section.bg-surface-alt,
main > section.bg-primary-50 {
  background-color: rgb(var(--lp-surface-alt));
  background-image:
    radial-gradient(circle at 10% 10%, rgb(21 128 61 / 0.075), transparent 26rem),
    radial-gradient(circle at 90% 90%, rgb(202 138 4 / 0.055), transparent 22rem),
    url("data:image/svg+xml,%3Csvg width='96' height='96' viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23183022' fill-opacity='.035'%3E%3Ccircle cx='12' cy='18' r='.8'/%3E%3Ccircle cx='63' cy='34' r='.7'/%3E%3Ccircle cx='37' cy='78' r='.6'/%3E%3Ccircle cx='88' cy='82' r='.7'/%3E%3C/g%3E%3C/svg%3E");
}

main > section:first-child {
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

main > section:first-child::before {
  position: absolute;
  z-index: -1;
  top: -3.5rem;
  right: -2.5rem;
  width: 15rem;
  height: 17rem;
  border: 1px solid rgb(21 128 61 / 0.08);
  border-radius: 30px;
  background: rgb(255 255 252 / 0.22);
  clip-path: polygon(18% 0, 100% 12%, 86% 100%, 0 84%);
  content: "";
  transform: rotate(8deg);
}

main > section:first-child img[class*="object-cover"] {
  border: 1px solid rgb(21 128 61 / 0.14);
  box-shadow:
    0 22px 56px rgb(18 43 25 / 0.14),
    6px 6px 0 rgb(202 138 4 / 0.065);
}

main > section:nth-of-type(4n) {
  background-image: none;
}

footer {
  --lp-on-surface: 247 250 245;
  --lp-on-surface-variant: 198 213 201;
  --lp-outline: 62 92 69;
  --lp-outline-variant: 42 72 49;
  position: relative;
  overflow: hidden;
  border-top: 4px solid #ca8a04 !important;
  background-color: #10291a !important;
  background-image:
    radial-gradient(circle at 12% 12%, rgb(21 128 61 / 0.24), transparent 30rem),
    radial-gradient(circle at 88% 100%, rgb(202 138 4 / 0.09), transparent 26rem),
    repeating-linear-gradient(
      118deg,
      transparent 0 42px,
      rgb(255 255 255 / 0.018) 42px 43px
    );
  color: rgb(var(--lp-on-surface));
}

footer a:hover {
  color: #f4c34d !important;
}

footer img {
  height: 2.8rem !important;
}

@media (max-width: 767px) {
  header .lp-logo-std,
  header .lp-logo-ondark {
    height: 2.65rem !important;
  }

  .lp-display,
  h1.font-heading {
    line-height: 1.02 !important;
  }

  main > section:first-child::before {
    top: -6rem;
    right: -9rem;
    opacity: 0.7;
  }

  main > section:first-child img[class*="object-cover"] {
    box-shadow:
      0 15px 38px rgb(18 43 25 / 0.13),
      5px 5px 0 rgb(202 138 4 / 0.08);
  }
}

@media (max-width: 480px) {
  main > section:first-child form.mt-4.flex.max-w-md {
    flex-direction: column;
  }

  main > section:first-child form.mt-4.flex.max-w-md button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-card,
  .lp-accent-bg,
  .lp-btn-ghost {
    transition: none !important;
  }
}