/* THE LEAD FORM. The page wears the free tools' family look (kiosk.css); this
   file is the form itself and what differs from the kiosk page. A form is used
   standing up with a phone in the other hand, so everything is big, high
   contrast and one column, whatever the screen. Sized in container units so the
   preview and the full screen form are the same design at two sizes. */
.plinth--tall { max-width: 420px; justify-self: center; width: 100%; }
.screen--tablet { aspect-ratio: 3 / 4; border-radius: 26px; padding: 16px; }

.lf {
  --bg: #121417; --ink: #f4f1ea; --soft: rgba(244, 241, 234, 0.62); --field: #1d2025; --line: rgba(244, 241, 234, 0.18);
  --u: min(1cqh, 1.4cqw);
  position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 10px; container-type: size;
  background: var(--bg); color: var(--ink); font-family: "Inter", system-ui, sans-serif;
}
.lf[data-theme="daylight"] { --bg: #f2f4f7; --ink: #15202b; --soft: rgba(21, 32, 43, 0.6); --field: #ffffff; --line: rgba(21, 32, 43, 0.2); }
.lf__form { position: absolute; inset: 0; overflow-y: auto; display: flex; flex-direction: column; gap: calc(var(--u) * 2.2); padding: calc(var(--u) * 6) 7cqw calc(var(--u) * 6); }
.lf__head { margin-bottom: calc(var(--u) * 1); }
.lf__who { margin: 0 0 calc(var(--u) * 1); font: 600 clamp(8px, calc(var(--u) * 2.4), 22px) "Inter", sans-serif; color: var(--soft); }
.lf__who:empty { display: none; }
.lf__title { margin: 0; font: 800 clamp(12px, calc(var(--u) * 4.8), 52px)/1.08 "Archivo", sans-serif; letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; }
.lf__fields { display: flex; flex-direction: column; gap: calc(var(--u) * 2); }
.lf__f { display: flex; flex-direction: column; gap: calc(var(--u) * 0.7); }
.lf__f > span { font: 600 clamp(8px, calc(var(--u) * 2.2), 22px) "Inter", sans-serif; color: var(--soft); }
.lf__f input, .lf__f textarea {
  width: 100%; border: 0; border-radius: calc(var(--u) * 1.4); padding: calc(var(--u) * 1.8) calc(var(--u) * 2); background: var(--field); color: var(--ink);
  font: 500 clamp(10px, calc(var(--u) * 2.8), 28px) "Inter", sans-serif; box-shadow: 0 0 0 1px var(--line) inset; transition: box-shadow 0.15s;
}
.lf__f textarea { min-height: calc(var(--u) * 12); resize: none; }
.lf__f input:focus, .lf__f textarea:focus { outline: none; box-shadow: 0 0 0 3px var(--accent) inset; }
.lf__f.bad input { box-shadow: 0 0 0 3px #ff6a3d inset; }
.lf__err { margin: 0; font: 600 clamp(8px, calc(var(--u) * 2), 20px) "Inter", sans-serif; color: #ff8a65; }
.lf[data-theme="daylight"] .lf__err { color: #c2410c; }
/* interest choices: big pills, more than one allowed */
.lf__picks { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 1.2); }
.lf__picks label { cursor: pointer; }
.lf__picks input { position: absolute; opacity: 0; pointer-events: none; }
.lf__picks span { display: block; padding: calc(var(--u) * 1.4) calc(var(--u) * 2.2); border-radius: 99px; font: 600 clamp(9px, calc(var(--u) * 2.4), 24px) "Inter", sans-serif; background: var(--field); box-shadow: 0 0 0 1px var(--line) inset; }
.lf__picks input:checked + span { background: var(--accent); color: #0b0b0b; box-shadow: none; }
.lf__picks input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }
.lf__send {
  margin-top: calc(var(--u) * 1); align-self: stretch; border: 0; cursor: pointer; border-radius: 99px; padding: calc(var(--u) * 2.2);
  font: 800 clamp(11px, calc(var(--u) * 3.4), 34px) "Archivo", sans-serif; color: #0b0b0b; background: var(--accent);
  box-shadow: 0 calc(var(--u) * 0.9) 0 color-mix(in srgb, var(--accent) 30%, #000);
}
.lf__send:active { transform: translateY(calc(var(--u) * 0.7)); box-shadow: 0 calc(var(--u) * 0.2) 0 color-mix(in srgb, var(--accent) 30%, #000); }
.lf__keep { margin: 0; font: 500 clamp(7px, calc(var(--u) * 1.9), 18px) "Inter", sans-serif; color: var(--soft); text-align: center; }
.lf__credit { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 1.4); margin: 0; text-align: center; font: 500 clamp(6px, calc(var(--u) * 1.5), 14px) "Inter", sans-serif; color: var(--soft); opacity: 0.6; pointer-events: none; }

/* thank-you screen, then back to an empty form for the next person */
.lf__thanks { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: calc(var(--u) * 3); padding: 8cqw; text-align: center; background: var(--bg); }
.lf__thanks[hidden] { display: none; }
.lf__thanks h2 { margin: 0; font: 800 clamp(12px, calc(var(--u) * 5), 54px)/1.1 "Archivo", sans-serif; color: var(--ink); text-wrap: balance; }
.lf__check { margin: 0; width: calc(var(--u) * 14); height: calc(var(--u) * 14); border-radius: 50%; background: var(--accent); position: relative; }
.lf__check::after { content: ""; position: absolute; left: 33%; top: 22%; width: 22%; height: 42%; border-right: calc(var(--u) * 1.4) solid #0b0b0b; border-bottom: calc(var(--u) * 1.4) solid #0b0b0b; transform: rotate(45deg); }

/* staff PIN pad: the only way out of the form, and the only way to the leads */
.lf__pin { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 3); background: var(--bg); }
.lf__pin[hidden] { display: none; }
.lf__pin h2 { margin: 0; font: 800 clamp(12px, calc(var(--u) * 4.4), 44px) "Archivo", sans-serif; }
.lf__dots { display: flex; gap: calc(var(--u) * 2); margin: 0; }
.lf__dots i { width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.6); border-radius: 50%; box-shadow: 0 0 0 2px var(--ink) inset; }
.lf__dots i.on { background: var(--ink); }
.lf__pin.wrong .lf__dots { animation: lfshake 0.4s; }
@keyframes lfshake { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
@media (prefers-reduced-motion: reduce) { .lf__pin.wrong .lf__dots { animation: none; } }
.lf__pad { display: grid; grid-template-columns: repeat(3, calc(var(--u) * 11)); gap: calc(var(--u) * 1.6); }
.lf__pad button { aspect-ratio: 1; border: 0; border-radius: 50%; cursor: pointer; font: 700 clamp(12px, calc(var(--u) * 4), 40px) "Archivo", sans-serif; color: var(--ink); background: var(--field); box-shadow: 0 0 0 1px var(--line) inset; }
.lf__pad button:active { background: var(--accent); color: #0b0b0b; }
.lf__pad button.zero { grid-column: 2; }
.lf__cancel { border: 0; background: none; color: var(--soft); font: 600 clamp(9px, calc(var(--u) * 2.4), 22px) "Inter", sans-serif; cursor: pointer; padding: calc(var(--u) * 1.4); }

/* run mode */
.lf.run { position: fixed; inset: 0; z-index: 2147483000; width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; }
.lf.run .lf__corner { display: block; }
.lf:fullscreen { width: 100%; height: 100%; }
/* on a wide screen the form stays a comfortable column in the middle */
@container (aspect-ratio > 1) { .lf__form { padding-left: max(7cqw, calc(50cqw - calc(var(--u) * 42))); padding-right: max(7cqw, calc(50cqw - calc(var(--u) * 42))); } }

/* ---------- setup ---------- */
.lf-grid .leads { grid-column: 1 / -1; }
.asks { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0 0 1rem; }
.asks legend { width: 100%; font-size: 0.92rem; font-weight: 600; margin-bottom: 0.6rem; }
.asks legend i { font-style: normal; color: var(--muted); font-weight: 400; }
.asks label { cursor: pointer; }
.asks input { position: absolute; opacity: 0; pointer-events: none; }
.asks span { display: block; padding: 0.5em 1em; border-radius: 999px; font-size: 0.92rem; box-shadow: 0 0 0 1px rgba(127, 208, 255, 0.25) inset; transition: background 0.15s, color 0.15s; }
.asks label:hover span { background: rgba(127, 208, 255, 0.07); }
.asks input:checked + span { color: var(--navy); background: var(--yellow); box-shadow: 0 0 0 2px var(--brass-dim); font-weight: 600; }
.asks input:focus-visible + span { outline: 2px solid var(--text); outline-offset: 3px; }
.field[hidden] { display: none; }
input.pin-in { max-width: 9rem; letter-spacing: 0.5em; font-size: 1.2rem; text-align: center; }
.leads__go { display: flex; flex-wrap: wrap; gap: 10px; margin: 0.4rem 0 1rem; }
.leads__go[hidden] { display: none; }
.leads__del:hover { box-shadow: 0 0 0 1px #ff6a3d inset; color: #ffb199; }
.leads__table { overflow-x: auto; }
.leads__table table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.leads__table th, .leads__table td { text-align: left; padding: 0.55rem 0.7rem; border-bottom: 1px solid rgba(127, 208, 255, 0.12); white-space: nowrap; }
.leads__table th { color: var(--muted); font-weight: 600; }
.leads__table td.wrap { white-space: normal; min-width: 12rem; }

/* the free side of the comparison: a plain form */
.vs__screen--form { background: #121417; display: flex; flex-direction: column; gap: 7%; padding: 8% 12%; }
.vs__screen--form b { font: 800 clamp(0.75rem, 1.6vw, 1rem) "Archivo", sans-serif; color: #f4f1ea; }
.vs__screen--form span { height: 14%; border-radius: 6px; background: #1d2025; box-shadow: 0 0 0 1px rgba(244, 241, 234, 0.15) inset; }
.vs__screen--form i { height: 14%; border-radius: 99px; background: var(--yellow); }