/* Component classes — plain CSS (no build step / PostCSS @apply needed),
   loaded alongside the Tailwind Play CDN script which handles all utility
   classes written directly in templates. Colors match tailwind.config
   inline below: brand green (#3ECF8E / #128A5E) + charcoal (#152420). */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: #ffffff;
  color: #152420;
  -webkit-font-smoothing: antialiased;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
::selection { background: #B9F3D9; color: #152420; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 999px; font-size: 14px; font-weight: 600;
  transition: all 150ms ease-out; user-select: none; white-space: nowrap; cursor: pointer;
  border: none;
}
.btn:disabled { opacity: .5; pointer-events: none; }
.btn-primary { background: #128A5E; color: #fff; height: 52px; padding: 0 24px; }
.btn-primary:hover { background: #0d6e4a; }
.btn-secondary { background: #fff; color: #152420; border: 1px solid #d1d1d1; height: 52px; padding: 0 24px; }
.btn-secondary:hover { border-color: #128A5E; }
.btn-danger { background: #fff; color: #dc2626; border: 1px solid #fecaca; height: 44px; padding: 0 20px; }
.btn-danger:hover { border-color: #ef4444; }
.btn-ghost { background: transparent; color: #565656; height: 44px; padding: 0 16px; }
.btn-ghost:hover { color: #152420; background: #f4f4f4; }
.btn-sm.btn-primary, .btn-sm.btn-secondary { height: 40px; padding: 0 16px; font-size: 13px; }

.card { background: #fff; border: 1px solid rgba(21,36,32,0.08); border-radius: 14px; }

.input, .textarea, .select {
  width: 100%; height: 48px; border-radius: 14px; border: 1px solid #d1d1d1;
  background: #fff; padding: 0 16px; font-size: 14px; color: #152420; outline: none;
  transition: border-color 150ms;
}
.textarea { height: auto; padding: 12px 16px; resize: vertical; }
.input:focus, .textarea:focus, .select:focus { border-color: #128A5E; }
.input::placeholder, .textarea::placeholder { color: #a3a3a3; }
.label { display: block; font-size: 13px; font-weight: 500; color: #3d3d3d; margin-bottom: 8px; }

.badge {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 999px;
  border: 1px solid rgba(21,36,32,0.1); background: #fafafa; padding: 4px 10px;
  font-size: 11px; font-weight: 600; color: #565656;
}
.badge-verified { background: #128A5E; color: #fff; border-color: #128A5E; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: #7a7a7a;
}
.eyebrow::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: #128A5E; }