/* raise.wine/forms/opportunity — the public qualification form.
   Composed as a hero rather than a page with a form on it: the vineyard
   runs full-bleed, a matte-glass panel floats on it, and the clay card
   sits inside that. Two layers, the way the seller sign-in screen does
   it. Fields, buttons and the card itself come from seller.css; this
   file adds the stage, the panel, and the radio groups. */

/* ── The stage ───────────────────────────────────────────────────
   The .sl canvas already paints the vineyard; this centres on it and
   gives the panel air on every side, including on a phone. */
.lf-stage {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 5vh, 64px) clamp(14px, 4vw, 40px);
}

/* ── The floating panel ──────────────────────────────────────────
   Same matte glass the portal floats over the vineyard: a light sheet
   that lets the photograph through rather than covering it. */
.lf-panel {
  width: 100%;
  max-width: 880px;
  padding: clamp(24px, 4vw, 46px);
  background: var(--sl-glass-panel, rgba(240, 233, 223, 0.30));
  backdrop-filter: blur(30px) saturate(1.1);
  -webkit-backdrop-filter: blur(30px) saturate(1.1);
  border: 1px solid var(--sl-glass-border, rgba(255, 255, 255, 0.5));
  border-radius: 30px;
  box-shadow: 0 30px 70px -28px rgba(22, 20, 18, 0.5);
}

/* ── Masthead ────────────────────────────────────────────────────
   The wordmark carries the page, the way it does on the sign-in
   screen — big, centred, with the section named beneath it. */
.lf-masthead { text-align: center; margin-bottom: clamp(18px, 3vw, 30px); }
.lf-mark {
  display: block;
  margin: 0 auto;
  height: clamp(34px, 5vw, 52px);
  width: auto;
}
.lf-masthead__sub {
  margin-top: 10px;
  font-family: var(--sl-sans);
  font-size: 13px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--sl-ink-2);
}

/* ── Intro ───────────────────────────────────────────────────── */
.lf-intro { text-align: center; margin-bottom: clamp(16px, 2.5vw, 26px); }
.lf-title {
  margin: 0;
  font-family: var(--sl-serif);
  font-weight: 600;
  font-size: clamp(28px, 4.4vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--sl-ink);
}
.lf-lede {
  margin: 12px auto 0;
  max-width: 54ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--sl-ink-2);
}

/* ── The card inside the panel ───────────────────────────────── */
.lf-card { border-radius: 24px; }
.lf-card--done { text-align: center; align-items: center; }
.lf-form { gap: 22px; }

/* ── Numbered questions ──────────────────────────────────────────
   The three qualifying answers are the point of the form, so they are
   numbered and given weight rather than being one label among twelve. */
.lf-group { border: 0; margin: 0; padding: 0; }
.lf-legend,
.lf-legend--plain {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 12px;
  font-family: var(--sl-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--sl-ink);
}
.lf-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  font-family: var(--sl-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--sl-brand, #6E4658);
  box-shadow: 2px 3px 6px rgba(120, 110, 92, 0.34);
}

/* ── Choice tiles ────────────────────────────────────────────────
   Tappable tiles, not bare radios: six small circles read as a chore,
   and these three answers decide what happens to the lead. */
.lf-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 9px;
}
.lf-choice {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 15px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--sl-ink);
  background: var(--sl-surface, #fff);
  border: 1px solid rgba(22, 20, 18, 0.12);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s, transform .12s;
}
.lf-choice:hover {
  border-color: rgba(110, 70, 88, 0.45);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -8px rgba(22, 20, 18, 0.4);
}
.lf-choice input {
  flex: none;
  width: 17px; height: 17px;
  accent-color: var(--sl-brand);
  cursor: pointer;
}
/* The whole tile answers, not just the dot. */
.lf-choice:has(input:checked) {
  border-color: var(--sl-brand);
  background: color-mix(in srgb, var(--sl-brand) 8%, #fff);
  box-shadow: 0 0 0 1px var(--sl-brand), 0 8px 16px -10px rgba(110, 70, 88, 0.6);
}
.lf-choice:has(input:focus-visible) {
  box-shadow: 0 0 0 3px var(--sl-ring, rgba(110, 70, 88, 0.28));
}

/* ── Contact fields ──────────────────────────────────────────── */
.lf-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(236px, 1fr));
  gap: 14px;
}

.lf-textarea {
  resize: vertical;
  min-height: 96px;
  font-family: var(--sl-sans);
  line-height: 1.5;
}

.lf-consent { align-items: flex-start; line-height: 1.5; }
.lf-consent input { margin-top: 2px; }

@media (max-width: 560px) {
  .lf-panel { border-radius: 24px; }
  .lf-choices { grid-template-columns: minmax(0, 1fr); }
}