/* Minimal custom styles — Tailwind handles most layout and typography. NOTE: Avoid Tailwind @apply since we load via CDN only. */
:root {
  --prairie: #2F5D3A;
  --prairie-90: rgba(47, 93, 58, 0.9);
  --rust: #C7562A;
  --coal: #0E0E0E;
  --ring: 0 0 0 3px rgba(47, 93, 58, 0.35);
}

html { scroll-behavior: smooth; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem; /* 8px 16px */
  border-radius: 0.375rem; /* 6px */
  font-weight: 600;
  border: 1px solid rgba(0,0,0,0.1);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn-primary { background-color: var(--prairie); color: #fff; }
.btn-primary:hover { background-color: var(--prairie-90); }
.btn-secondary { background-color: var(--rust); color: #fff; }
.btn-secondary:hover { background-color: #b24d26; }
.btn-ghost { background-color: transparent; }
.btn-ghost:hover { background-color: rgba(0,0,0,0.05); }

/* Forms */
.form-label { display: block; font-size: 0.875rem; font-weight: 500; color: rgba(14,14,14,0.8); margin-bottom: 0.25rem; }
.form-input {
  width: 100%;
  border-radius: 0.375rem;
  border: 1px solid rgba(0,0,0,0.1);
  padding: 0.5rem 0.75rem; /* 8px 12px */
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.form-input:focus { box-shadow: 0 0 0 2px rgba(47,93,58,0.4); border-color: rgba(47,93,58,0.5); }

/* Cards & steps */
.card-step { padding: 1.25rem; border-radius: 0.5rem; border: 1px solid rgba(0,0,0,0.1); background-color: #fff; }
.step-num {
  width: 2rem; height: 2rem; border-radius: 9999px; background-color: var(--prairie); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
}
.step-title { margin-top: 0.75rem; font-weight: 600; }
.step-copy { margin-top: 0.5rem; font-size: 0.875rem; color: rgba(14,14,14,0.7); }

/* Stats */
.stat { padding: 1rem; border-radius: 0.5rem; border: 1px solid rgba(0,0,0,0.1); background-color: #fff; }
.stat-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(14,14,14,0.6); }
.stat-value { margin-top: 0.25rem; font-size: 1.5rem; font-weight: 800; font-family: 'Archivo', 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.stat-unit { font-size: 0.875rem; font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight: 600; color: rgba(14,14,14,0.6); margin-left: 0.25rem; }

/* Stories */
.story { padding: 1.25rem; border-radius: 0.5rem; border: 1px solid rgba(0,0,0,0.1); background-color: #fff; }
.story-quote { font-size: 1rem; font-style: italic; color: rgba(14,14,14,0.9); }
.story-byline { margin-top: 0.75rem; font-size: 0.875rem; color: rgba(14,14,14,0.6); }

/* Chips for image captions */
.chips { margin-top: 0.5rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.5rem; border-radius: 9999px; background-color: rgba(255,255,255,0.18); color: #fff; font-size: 0.75rem; border: 1px solid rgba(255,255,255,0.25); }

/* Accessibility tweaks */
:focus-visible { outline: var(--ring); border-radius: 6px; }

/* Imagery components */
.hero-bg { background-size: cover; background-position: center; background-image: url('images/hero.jpg'); }
.image-card { position: relative; aspect-ratio: 4/3; border-radius: 0.5rem; overflow: hidden; border: 1px solid rgba(0,0,0,0.1); background-color: #f8f5f1; background-size: cover; background-position: center; display: flex; align-items: flex-end; }
#landowners .image-card { background-image: url('images/landowners.jpg'); }
#buyers .image-card { background-image: url('images/buyers.jpg'); }
.image-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,14,14,0) 40%, rgba(14,14,14,0.55) 100%); }
.image-caption { position: relative; z-index: 1; color: #fff; padding: 1rem; }
.caption-kicker { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.75rem; opacity: 0.9; }
.caption-headline { margin-top: 0.25rem; font-weight: 700; }

/* Utility when JS toggles */
.hidden { display: none; }