/* Pilot signup form (/lp/pilot + /pilot): additions on top of Maayan's site.css (pages/pilot-landing.html, pilot.html).
   B&W; the AI ring stays on the form card only; the green reassure note and the
   verdict-green check are the only colour (same tokens as .reassure). */
:root{--pl-error:#b42318;--pl-ok-fg:#1f6b3b;--pl-ok-bg:#ebf5ee}
#join-t:focus{outline:none}
[hidden]{display:none!important}

/* hero: live spots line under the facts */
.spots-hero{margin-top:18px;font-size:15px;color:var(--secondary-foreground)}
.spots-hero bdi{font-weight:500;color:var(--foreground)}
@media (max-width:767px){.spots-hero{margin-top:22px}}

/* join column: spots meter (one segment per spot, filled = taken) */
.spots{margin-top:28px;max-width:420px}
.spots-t{font-size:17px;color:var(--secondary-foreground)}
.spots-t bdi{font-weight:500;color:var(--foreground)}
.spots-seg{margin-top:12px;display:grid;grid-template-columns:repeat(15,1fr);gap:4px}
.spots-seg i{height:8px;border-radius:99px;background:var(--grey-200)}
.spots-seg i.on{background:var(--primary)}
.spots.full .spots-t{color:var(--foreground);font-weight:500}

/* errors: field hairline turns red, message under it, summary at the top */
.pl-err{font-size:14px;line-height:1.45;color:var(--pl-error);display:flex;gap:6px;align-items:flex-start}
.pl-err::before{content:"!";flex:none;width:16px;height:16px;margin-top:2px;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center;font-size:11px;font-weight:500;line-height:1}
.field.invalid input{border-color:var(--pl-error);box-shadow:inset 0 0 0 1px var(--pl-error)}
.consent-wrap{display:grid;gap:8px}
.consent-wrap.invalid .consent{border-color:var(--pl-error);box-shadow:inset 0 0 0 1px var(--pl-error);background:#fdf3f2}
.pl-sum{font-size:15px;font-weight:500;color:var(--pl-error);background:#fdf3f2;border:1px solid #f3c9c4;border-radius:14px;padding:12px 16px}
.reassure p{margin:0}
.consent{cursor:pointer}

/* submit: looks blocked until the required consent is ticked (still focusable, explains why) */
.form-card .btn.p[aria-disabled="true"]{background:var(--grey-300);color:var(--grey-700);cursor:not-allowed}
.form-card .btn.p[aria-busy="true"]{opacity:.7;cursor:progress}

/* honeypot: off-screen, not display:none (some bots skip hidden fields) */
.pl-hp{position:absolute;inset-inline-start:-10000px;width:1px;height:1px;overflow:hidden}
.ts{display:flex;justify-content:center}.ts:empty{display:none}

/* confirmation: replaces the form card, same ring */
.pl-done{position:relative;border-radius:32px;padding:44px 40px 40px;background:var(--ai-ring);box-shadow:var(--shadow-input)}
.pl-done::before{content:"";position:absolute;inset:1.6px;border-radius:30.5px;background:var(--paper)}
.pl-done>*{position:relative}
.pl-badge{width:56px;height:56px;border-radius:50%;background:var(--primary);color:var(--primary-foreground);display:grid;place-items:center;box-shadow:0 0 0 6px var(--paper),0 0 0 7.6px var(--grey-200)}
.pl-badge svg{width:26px;height:26px}
.pl-done.wait .pl-badge{background:var(--paper);color:var(--foreground);box-shadow:inset 0 0 0 1.6px var(--foreground),0 0 0 6px var(--paper),0 0 0 7.6px var(--grey-200)}
.pl-done-eye{margin-top:26px;font-size:14px;color:var(--muted-foreground)}
.pl-done h3{margin-top:6px;font-size:34px;font-weight:300;letter-spacing:-.6px;line-height:1.2;text-wrap:balance}
.pl-done h3:focus{outline:none}
.pl-done-lead{margin-top:10px;font-size:17px;color:var(--secondary-foreground);line-height:1.55}
.pl-done-lead bdi{color:var(--foreground);font-weight:500}
.pl-terms{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px}
.pl-terms li{font-size:14px;padding:6px 12px;border-radius:999px;background:var(--muted);color:var(--grey-800)}
.pl-next{margin-top:28px;padding-top:24px;border-top:1px solid var(--border)}
.pl-next h4{font-size:18px;font-weight:500}
.pl-steps{margin-top:14px;display:grid;gap:0;counter-reset:s}
.pl-steps li{counter-increment:s;position:relative;display:grid;grid-template-columns:32px 1fr;column-gap:14px;padding:10px 0 16px}
.pl-steps li::before{content:counter(s);grid-row:span 2;width:32px;height:32px;border-radius:50%;border:1px solid var(--border-strong);display:grid;place-items:center;font-size:14px;background:var(--paper);position:relative;z-index:1}
.pl-steps li:first-child::before{background:var(--primary);color:var(--primary-foreground);border-color:var(--primary)}
.pl-steps li:not(:last-child)::after{content:"";position:absolute;inset-inline-start:15.5px;top:44px;bottom:-8px;width:1px;background:var(--border-strong)}
.pl-steps b{font-weight:500;font-size:16px;line-height:32px}
.pl-steps span{font-size:15px;color:var(--muted-foreground);line-height:1.5}
.pl-steps bdi{color:var(--secondary-foreground)}
@media (max-width:767px){
 .pl-done{padding:30px 22px 26px;border-radius:26px}
 .pl-done::before{border-radius:24.5px}
 .pl-done h3{font-size:27px}
 .spots{margin-top:22px}
}
@media (prefers-reduced-motion:no-preference){.pl-done:not([hidden]){animation:pl-in .45s var(--ease-out) both}}
@keyframes pl-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}