/* Intellica — the qualifying lead form, a modal (2026-10-17). Built by leadform.js; load after brand.css + components.css.
   Everything is scoped to .lf and .lf-* (home.css already owns .close and .step). Reused from the system: .h3 (Fraunces)
   for the title, .btn.primary / .btn.ghost for the buttons, the brand tokens for every colour.
   Desktop: a 560px card, centred, that opens up to 1080 × 820 for the scheduler. Phones (under 640px): a full-height sheet. */

.lf { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px;
  font-family: var(--sans); color: var(--ink); }
.lf[hidden] { display: none; }
.lf-backdrop { position: absolute; inset: 0; background: rgba(2, 11, 36, .46); opacity: 0; transition: opacity .2s var(--ease); touch-action: none; }
.lf.is-open .lf-backdrop { opacity: 1; }

/* the card: white, a hairline edge, a soft shadow */
.lf-card { position: relative; display: flex; flex-direction: column; width: min(560px, 100%);
  max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
  background: var(--surface); border: 1px solid var(--line); border-radius: 24px; overflow: hidden;
  box-shadow: 0 2px 6px rgba(2, 11, 36, .06), 0 32px 80px rgba(2, 11, 36, .24);
  opacity: 0; transform: translateY(12px) scale(.985);
  transition: opacity .2s var(--ease), transform .26s var(--ease); }
.lf.is-open .lf-card { opacity: 1; transform: none; }
.lf-card:focus { outline: none; }
.lf-card.is-sizing { transition: opacity .2s var(--ease), transform .26s var(--ease), width .3s var(--ease), height .3s var(--ease); }
/* the scheduler step: Calendly lays out side by side (details | calendar | times) from 1000px wide, and its own embed
   is 700px tall, so the card opens up to 1080 × 820, capped by the window */
.lf.is-wide .lf-card { width: min(1080px, 100%); height: min(820px, calc(100vh - 48px)); height: min(820px, calc(100dvh - 48px)); }

/* the top row: back on the left, the four dots in the middle. The X sits in the corner on every screen. */
.lf-head { flex: none; position: relative; display: flex; align-items: center; height: 40px; margin: 20px 20px 0; }
.lf.is-done .lf-head { display: none; }
.lf-back { display: inline-flex; align-items: center; gap: 2px; height: 40px; padding: 0 14px 0 8px; border: 0; border-radius: 999px;
  background: transparent; color: var(--ink-2); font-size: 15px; line-height: 1; cursor: pointer; transition: background .15s, color .15s; }
.lf-back[hidden] { display: none; }
.lf-back svg { width: 18px; height: 18px; }
.lf-back:hover { background: var(--ground); color: var(--ink); }
.lf-dots { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; gap: 6px; }
.lf-dots i { display: block; width: 6px; height: 6px; border-radius: 3px; background: var(--line-2); transition: width .24s var(--ease), background .24s; }
.lf-dots i.done { background: color-mix(in oklab, var(--hero) 40%, var(--surface)); }
.lf-dots i.on { width: 22px; background: var(--hero); }
.lf-x { position: absolute; top: 20px; right: 20px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer; transition: background .15s, color .15s; }
.lf-x svg { width: 20px; height: 20px; }
.lf-x:hover { background: var(--ground); color: var(--ink); }
.lf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lf-guard { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; outline: none; }

/* the step: title (display face, lowercase), the question (sentence case), the answer */
.lf-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  padding: 18px 40px 40px; }
.lf.is-done .lf-body { padding-top: 34px; }
.lf.is-wide .lf-body { padding: 30px 40px 0; }
.lf-title { margin: 0; padding-right: 36px; font-size: 34px; line-height: 1.06; letter-spacing: -.02em; }
.lf-title[hidden] { display: none; }
.lf-pane { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.lf-pane.lf-enter { animation: lf-in .24s var(--ease) both; }
@keyframes lf-in { from { opacity: 0; transform: translateY(6px); } }
.lf-q { display: block; margin-top: 10px; font-size: 19px; font-weight: 500; line-height: 1.35; letter-spacing: -.01em; color: var(--ink); }

/* step 1: the email */
.lf-form { display: flex; flex-direction: column; align-items: flex-start; }
.lf-input { display: block; width: 100%; height: 56px; margin: 22px 0 0; padding: 0 18px; border: 1px solid var(--line-2); border-radius: 14px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: 17px; outline: none; -webkit-appearance: none; appearance: none;
  transition: border-color .15s, box-shadow .15s; }
.lf-input::placeholder { color: var(--ink-3); opacity: 1; }
.lf-input:hover { border-color: color-mix(in oklab, var(--ink) 34%, transparent); }
.lf-input:focus { border-color: var(--hero); box-shadow: 0 0 0 4px color-mix(in oklab, var(--hero) 16%, transparent); }
.lf-input[aria-invalid="true"] { border-color: var(--red-pen); box-shadow: 0 0 0 4px color-mix(in oklab, var(--red-pen) 13%, transparent); }
.lf-err { min-height: 20px; margin: 8px 0 0 2px; font-size: 14px; line-height: 20px; color: var(--red-pen); }   /* the room is kept, so nothing jumps */
.lf-next { margin-top: 12px; }

/* steps 2–4: one full-width row per answer, a radio group */
.lf-opts { display: grid; gap: 8px; margin-top: 22px; }
.lf-opt { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; margin: 0; padding: 12px 18px;
  border: 1px solid var(--line-2); border-radius: 14px; background: var(--surface); color: var(--ink);
  font: inherit; font-size: 17px; line-height: 1.3; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background .15s, border-color .15s; }
.lf-opt:hover { background: var(--ground); border-color: color-mix(in oklab, var(--ink) 30%, transparent); }
.lf-opt[aria-checked="true"] { background: var(--hero-tint); border-color: var(--hero); }
.lf-radio { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid color-mix(in oklab, var(--ink) 28%, transparent);
  background: var(--surface); transition: border-color .15s, background .15s, box-shadow .15s; }
.lf-opt:hover .lf-radio { border-color: var(--ink-3); }
.lf-opt[aria-checked="true"] .lf-radio { border-color: var(--hero); background: var(--hero); box-shadow: inset 0 0 0 4px var(--surface); }

/* keyboard focus: the brand blue ring */
.lf-opt:focus-visible, .lf-back:focus-visible, .lf-x:focus-visible, .lf .btn:focus-visible, .lf-tab:focus-visible { outline: 2px solid var(--hero); outline-offset: 2px; }
.lf-msg:focus { outline: none; }   /* focused only so a screen reader reads it */

/* the outcomes. Qualified: the client's line and the new-tab link on one row, then the scheduler edge to edge
   under it, down to the card's bottom edge. Declined: the thank-you on its own and a Close button. */
.lf-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 24px; margin-top: 8px; }
.lf-lead { font-size: 17px; line-height: 1.45; color: var(--ink-2); }
.lf-say { padding-right: 36px; font-size: 22px; font-weight: 500; line-height: 1.4; letter-spacing: -.012em; color: var(--ink); text-wrap: pretty; }
.lf-done { align-self: flex-start; margin-top: 28px; }
.lf-cal { position: relative; flex: 1 1 auto; min-height: 440px; margin: 20px -40px 0; border-top: 1px solid var(--line);
  overflow: hidden; background: var(--ground); }
.lf-cal iframe { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; border: 0; }
.lf-wait { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; }   /* under the iframe until Calendly paints */
.lf-cal.is-loaded .lf-wait { display: none; }
.lf-wait i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); animation: lf-blink 1.2s infinite; }
.lf-wait i:nth-child(2) { animation-delay: .2s; }
.lf-wait i:nth-child(3) { animation-delay: .4s; }
@keyframes lf-blink { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }
.lf-tab { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 14px; line-height: 20px;
  color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; border-radius: 4px; }
.lf-tab:hover { color: var(--ink); text-decoration-color: currentColor; }
.lf-tab svg { width: 14px; height: 14px; }

/* phones: a full-height sheet that rises from the bottom */
@media (max-width: 639.98px) {
  .lf { padding: 12px 0 0; place-items: stretch; }
  .lf-card { border-width: 1px 0 0; border-radius: 20px 20px 0 0; transform: translateY(40px); }
  .lf-card, .lf.is-wide .lf-card { width: 100%; height: auto; max-height: none; }
  .lf-head { margin: 10px 12px 0; }
  .lf-x { top: 10px; right: 12px; }
  .lf-body { padding: 14px 20px calc(24px + env(safe-area-inset-bottom, 0px)); }
  .lf.is-done .lf-body { padding-top: 24px; }
  .lf.is-wide .lf-body { padding: 24px 20px 0; }
  .lf-title { font-size: 30px; }
  .lf-q { font-size: 18px; }
  .lf-say { font-size: 20px; }
  .lf-next, .lf-done { align-self: stretch; justify-content: center; }
  .lf-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .lf-cal { min-height: 0; margin: 16px -20px 0; }   /* edge to edge: Calendly gets the full width */
}

@media (prefers-reduced-motion: reduce) {
  .lf-backdrop, .lf-card, .lf-card.is-sizing, .lf-dots i { transition: none; }
  .lf-card { transform: none; }
  .lf-pane.lf-enter { animation: none; }
  .lf-wait i { animation: none; opacity: .6; }
}