/* lead · "Not ready yet?" (ADR-0625, brief-hero-lead-capture.md, David 23 Sept).
   A small card that slides into the bottom corner once the visitor is past the
   live market tile, and a quiet line under the hero buttons that opens the
   same card. David's words: "go all in design language of the website" - so
   nothing here is a new look. The card is components.css .card, the fields are
   .field/.input, the grow/buy pick is .tabs-filter/.tab-filter (the page's own
   segmented look), the button is .btn--primary. The lines below only place the
   card, and every value is a token: no literal colour, no new radius.

   It NEVER dims or covers the page: no backdrop, fixed in a corner, one close.
   On a phone it is a bottom sheet the full width of the screen.

   MOTION: David's machine has reduced motion on. Under reduce the card simply
   appears; nothing here loops, and nothing is blurred (phones, ADR on blurred
   moving shapes). */

.lead-line {
  margin: var(--space-3) auto 0;
  text-align: center;
}
/* A button, not a link - it opens the card, it goes nowhere. NO-WRAP LAW
   (order-david-174611): its label stays on one line at every width. */
.lead-open {
  appearance: none; background: none; border: 0; padding: var(--space-1) var(--space-2);
  font: inherit; font-size: var(--font-base); color: var(--text-secondary);
  white-space: nowrap; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--border-strong);
  text-underline-offset: 3px; border-radius: var(--radius-control);
}
.lead-open:hover { color: var(--text); text-decoration-color: var(--accent); }
.lead-open:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ── the card ── */
.lead-card {
  position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: 900;
  width: min(380px, calc(100vw - 2 * var(--space-5)));
  box-sizing: border-box;
  box-shadow: var(--elevation-card), 0 18px 40px -18px var(--shadow-color);
  /* off-screen until opened; visibility (not display) so it can slide */
  transform: translateY(calc(100% + var(--space-6)));
  visibility: hidden;
  transition: transform .32s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .32s;
}
.lead-card.is-open {
  transform: none; visibility: visible;
  transition: transform .32s cubic-bezier(.2, .7, .2, 1), visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .lead-card, .lead-card.is-open { transition: none; }
}

.lead-card__x {
  position: absolute; top: var(--space-2); right: var(--space-2);
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: var(--radius-control);
  color: var(--text-secondary); font-size: 22px; line-height: 1; cursor: pointer;
}
.lead-card__x:hover { color: var(--text); background: var(--surface-recessed); }
.lead-card__x:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.lead-card__h {
  margin: 0 var(--space-6) var(--space-1) 0;
  font: 600 var(--font-h3, 20px) var(--display); letter-spacing: var(--tracking-tight, 0);
  color: var(--text);
}
.lead-card__sub { margin: 0 0 var(--space-4); font-size: var(--font-base); color: var(--text-secondary); }

.lead-form { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; }
.lead-form .input { width: 100%; box-sizing: border-box; }
.lead-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.lead-form legend { padding: 0; margin-bottom: var(--space-1); }
.lead-opt { text-transform: none; letter-spacing: 0; font-weight: 400; }

/* the grow / buy pick: two .tab-filter halves, each as wide as the other */
.lead-pick { display: flex; gap: var(--space-2); }
.lead-pick .tab-filter {
  flex: 1 1 0; position: relative; text-align: center; white-space: nowrap;
}
.lead-pick input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: pointer;
}
.lead-pick .tab-filter:has(input:focus-visible) { box-shadow: var(--focus-ring); }

.lead-form .btn { width: 100%; white-space: nowrap; box-sizing: border-box; }
.lead-fine { margin: 0; font-size: var(--font-sm); color: var(--text-secondary); }
.lead-fine a { color: var(--text-secondary); text-underline-offset: 2px; }
.lead-fine a:hover { color: var(--text); }
.lead-err:empty { display: none; }

/* HONEYPOT: a field no person sees or reaches. Off-screen, not display:none,
   because some bots skip hidden inputs. */
.lead-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.lead-done { margin: var(--space-2) 0 var(--space-1); font: 600 var(--font-body) var(--display); color: var(--text); }

/* ── phone: a bottom sheet the width of the screen ── */
@media (max-width: 600px) {
  .lead-card {
    left: 0; right: 0; bottom: 0; width: auto;
    border-radius: var(--radius-container) var(--radius-container) 0 0;
    border-bottom: 0;
    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    max-height: 88vh; overflow-y: auto;
  }
  .lead-card__sub { margin-bottom: var(--space-3); }
}