/* ==========================================================================
   conversion.css
   Shared design tokens + base styles for the conversion component library.
   --------------------------------------------------------------------------
   USAGE: copy flat into the site folder (next to index.html) and load AFTER
   the site brand.css:
     <link rel="stylesheet" href="conversion.css">
     <link rel="stylesheet" href="hero-conv.css">   <!-- per component -->

   DESIGN CONTRACT:
   - Defines ONLY --cv-* tokens. Never redefines the site tokens
     (--accent, --ink, --paper, --line, --muted, --display, --body, --mono),
     it only READS them, always with a fallback so the components also work
     on a page that has no brand.css.
   - All classes are prefixed cv- so nothing clobbers .btn, .block, .hero,
     intake.css or paypal-payments.css.
   - Mobile-first. Focus-visible states included. Reduced-motion respected.
   ========================================================================== */

:root {
  /* spacing scale */
  --cv-space-1: .5rem;
  --cv-space-2: .75rem;
  --cv-space-3: 1rem;
  --cv-space-4: 1.5rem;
  --cv-space-5: 2.25rem;
  --cv-space-6: 3.5rem;
  /* shape + elevation */
  --cv-radius: 10px;
  --cv-radius-sm: 6px;
  --cv-shadow: 0 8px 28px rgba(0, 0, 0, .12);
  --cv-shadow-sm: 0 2px 10px rgba(0, 0, 0, .08);
  /* buttons: thumb-reach minimum on touch */
  --cv-btn-min: 56px;
  /* aliases to site tokens (fallbacks keep components standalone) */
  --cv-ink: var(--ink, #1b2430);
  --cv-muted: var(--muted, #5b6470);
  --cv-line: var(--line, #d5e0dc);
  --cv-line-soft: var(--line-soft, #e4edeb);
  --cv-paper: var(--paper, #fdfcfa);
  --cv-tint: var(--tint, #eef4f2);
  --cv-accent: var(--accent, #0b5f58);
  --cv-accent-ink: var(--accent-ink, #ffffff);
  --cv-ok: var(--ok, #1f7a4d);
  --cv-no: var(--no, #a4261c);
  --cv-font-display: var(--display, Georgia, "Times New Roman", serif);
  --cv-font-body: var(--body, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  --cv-font-mono: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
}

/* ---------- section rhythm ---------- */
.cv-section {
  padding: var(--cv-space-6) 0;
  border-bottom: 2px solid var(--cv-line-soft);
}
.cv-section:last-of-type { border-bottom: none; }
.cv-wrap {
  max-width: var(--cv-max, 68rem);
  margin: 0 auto;
  padding: 0 var(--gutter, 20px);
}
.cv-eyebrow {
  font-family: var(--cv-font-mono);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cv-accent);
  margin: 0 0 var(--cv-space-2);
}
.cv-section h2 {
  font-family: var(--cv-font-display);
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  line-height: 1.25;
  margin: 0 0 var(--cv-space-2);
  max-width: 30ch;
}
.cv-lede {
  color: var(--cv-muted);
  max-width: 65ch;
  margin: 0 0 var(--cv-space-4);
  font-size: 1.02rem;
  line-height: 1.65;
}

/* ---------- buttons ---------- */
.cv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--cv-btn-min);          /* thumb reach */
  padding: 12px 26px;
  border-radius: var(--cv-radius-sm);
  border: 2px solid var(--cv-accent);
  background: var(--cv-accent);
  color: var(--cv-accent-ink);
  font-family: var(--cv-font-body);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition: filter .15s ease, transform .15s ease;
}
.cv-btn:hover { filter: brightness(.93); }
.cv-btn:active { transform: translateY(1px); }
.cv-btn-soft {
  background: transparent;
  color: var(--cv-ink);
  border-color: var(--cv-ink);
}
.cv-btn-soft:hover { background: var(--cv-tint); filter: none; }
.cv-btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
@media (max-width: 640px) {
  .cv-btn { width: 100%; }                /* full-width tap target on phones */
}

/* ---------- form helpers ---------- */
.cv-field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 var(--cv-space-3); }
.cv-field label { font-weight: 700; font-size: .95rem; color: var(--cv-ink); }
.cv-field input[type="text"],
.cv-field input[type="email"],
.cv-field input[type="tel"],
.cv-field input[type="date"],
.cv-field select,
.cv-field textarea {
  font: inherit;
  color: var(--cv-ink);
  background: #fff;
  border: 2px solid var(--cv-line);
  border-radius: var(--cv-radius-sm);
  padding: 12px 14px;
  min-height: 52px;
  width: 100%;
  box-sizing: border-box;
}
.cv-field input:focus,
.cv-field select:focus,
.cv-field textarea:focus {
  border-color: var(--cv-accent);
  outline: 3px solid var(--cv-accent);
  outline-offset: 1px;
}
.cv-err {
  color: var(--cv-no);
  font-size: .88rem;
  font-weight: 600;
  margin: .25rem 0 0;
}
.cv-fine {
  font-size: .8rem;
  color: var(--cv-muted);
  line-height: 1.6;
  margin: var(--cv-space-2) 0 0;
}

/* ---------- trust microcopy ---------- */
.cv-trust {
  font-size: .82rem;
  color: var(--cv-muted);
  line-height: 1.6;
  margin: var(--cv-space-2) 0 0;
  max-width: 60ch;
}
.cv-trust .tick { color: var(--cv-ok); font-weight: 700; }

/* ---------- accessibility utilities ---------- */
.cv-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--cv-accent);
  outline-offset: 2px;
}

/* ---------- reduced motion: no transitions anywhere in cv-* ---------- */
@media (prefers-reduced-motion: reduce) {
  .cv-btn, .cv-stickybar, .cv-faq-a, .cv-lead-box, .cv-lead-backdrop {
    transition: none !important;
    animation: none !important;
  }
  html { scroll-behavior: auto; }
}