/* THE LAUNCH LIST (Jed, 8 November 2026)
   ===================================================================
   The site's one sign-up: an email, then a first name, then thanks.
   Three faces, all from launch-list.js and this file alone:

     .ll        the capsule on a page, where "Apply for the beta" stood
     .pm        the popup, from the header's pill, any other pill that
                links to /early-access/, and the 30-second prompt
     .un        the unsubscribe page's card (/unsubscribe/)

   The words are in launch-list.js (WORDS). Change them there, once, and
   every page follows. The tokens come from style.css.
   =================================================================== */

/* ---------- the capsule ---------- */
.ll{position:relative;width:min(560px,100%);background:#fff;border:1.5px solid #d8d4e2;border-radius:999px;padding:7px;
  box-shadow:0 14px 34px rgba(11,11,15,.10),inset 0 1px 0 #fff;text-align:left;transition:border-radius .35s ease,box-shadow .3s ease;
  font-family:inherit}
.ll:focus-within{box-shadow:0 14px 34px rgba(11,11,15,.10),0 0 0 4px var(--violet-tint)}
.ll.is-done{border-radius:28px}
.ll-steps{position:relative;transition:height .38s cubic-bezier(.2,.7,.2,1);height:46px}
.ll-step{position:absolute;inset:0 0 auto 0;display:flex;align-items:center;gap:8px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .26s ease,transform .3s cubic-bezier(.2,.7,.2,1),visibility 0s .3s}
.ll-step.on{opacity:1;visibility:visible;transform:none;transition-delay:.06s,.06s,0s}
/* Steps that are not on can never catch a click, and the thanks step, once reached, is shown
   unconditionally: no transition can leave its Facebook and LinkedIn buttons hidden (8 Nov 2026). */
.ll-step:not(.on),.pm-step:not(.on){pointer-events:none}
.ll.is-done .ll-step:not(.thanks){display:none}
.ll-step.thanks.on,.pm-step[data-step="3"].on{opacity:1!important;visibility:visible!important;transform:none!important;transition:none!important}
.ll-step.thanks.on *,.pm-step[data-step="3"].on *{visibility:visible}
.ll-field{flex:1;min-width:0;display:flex;align-items:center;gap:10px;height:46px;padding:0 6px 0 16px;color:var(--ink);margin:0}
.ll-field svg{width:17px;height:17px;color:var(--muted);flex:0 0 auto}
.ll-field input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;font:inherit;font-size:15.5px;font-weight:600;color:var(--ink);letter-spacing:-.01em;padding:0;margin:0;box-shadow:none;border-radius:0}
.ll-field input::placeholder{color:var(--muted);font-weight:500}
.ll-btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 22px;border:0;border-radius:999px;cursor:pointer;white-space:nowrap;
  background:var(--grad);color:#fff;font:inherit;font-size:15px;font-weight:700;letter-spacing:-.01em;box-shadow:0 8px 20px rgba(105,64,221,.28);transition:transform .16s ease,box-shadow .16s ease,opacity .2s}
.ll-btn:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(105,64,221,.36)}
.ll-btn:active{transform:none}
.ll-btn[disabled]{opacity:.55;cursor:default;transform:none;box-shadow:none}
.ll-btn .arrow{transition:transform .2s}
.ll-btn:hover .arrow{transform:translateX(3px)}
.ll-back{flex:0 0 auto;width:34px;height:34px;margin-left:6px;border:0;border-radius:50%;background:var(--surface);color:var(--ink-2);display:grid;place-items:center;cursor:pointer;padding:0}
.ll-back:hover{background:var(--violet-tint);color:var(--violet)}
.ll-back svg{width:15px;height:15px}
.ll-step.thanks{display:block;padding:14px 16px 12px 18px}
.ll-thanks{display:flex;align-items:center;gap:14px}
.ll-tick{width:40px;height:40px;border-radius:50%;background:var(--grad);display:grid;place-items:center;flex:0 0 auto;box-shadow:0 8px 20px rgba(105,64,221,.28)}
.ll-tick svg{width:18px;height:18px;color:#fff}
.ll-thanks .t1{display:block;font-size:16px;font-weight:700;letter-spacing:-.015em;color:var(--ink)}
.ll-thanks .t2{display:block;font-size:13px;color:var(--grey);font-weight:600;margin-top:2px}
.ll-social{display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);flex-wrap:wrap}
.ll-social small{font-size:12.5px;font-weight:700;color:var(--ink-2);margin-right:auto}
.ll-err{position:absolute;left:24px;top:100%;margin:8px 0 0;font-size:12.5px;font-weight:700;color:#c62b5a;opacity:0;transition:.2s;pointer-events:none}
.ll-err.show{opacity:1}
/* the quiet line under the capsule */
.ll-note{font-size:13.5px;font-weight:600;color:var(--grey);margin:14px 0 0;display:flex;align-items:center;gap:8px;justify-content:center;flex-wrap:wrap}
.ll-note i{width:6px;height:6px;border-radius:50%;background:var(--green);display:inline-block;box-shadow:0 0 0 3px rgba(52,199,89,.18)}
/* the host the page carries: the capsule and its note, centred where the old capsule sat */
.ll-host{display:flex;flex-direction:column;align-items:center;width:100%}
.ll-host.is-live{background:none;border:0;box-shadow:none;padding:0;border-radius:0;gap:0}
.hero-say-cta .ll-host{width:min(560px,100%)}
.ll-host .ll-note{text-align:center}
/* the social buttons (the capsule's thanks and the popup's) */
.so{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px 0 10px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font-size:12.5px;font-weight:700;color:var(--ink);text-decoration:none;cursor:pointer;pointer-events:auto;transition:border-color .16s,color .16s,transform .16s}
.so:hover{border-color:var(--violet);color:var(--violet);transform:translateY(-1px)}
.so svg{width:15px;height:15px}
.so.lg{height:44px;padding:0 18px 0 14px;font-size:14px;gap:9px}
.so.lg svg{width:18px;height:18px}
.so.so-fb svg{color:#1877F2}.so.so-li svg{color:#0A66C2}.so.so-yt svg{color:#FF0000}
.so.so-fb:hover{border-color:#1877F2;color:#1877F2}.so.so-li:hover{border-color:#0A66C2;color:#0A66C2}.so.so-yt:hover{border-color:#FF0000;color:#FF0000}

/* ---------- the popup ---------- */
.pm-scrim{position:fixed;inset:0;z-index:1000;background:rgba(14,10,24,.42);-webkit-backdrop-filter:blur(10px) saturate(1.1);backdrop-filter:blur(10px) saturate(1.1);display:grid;place-items:center;padding:24px;opacity:0;visibility:hidden;transition:opacity .28s ease,visibility 0s .3s}
.pm-scrim.open{opacity:1;visibility:visible;transition-delay:0s,0s}
.pm{position:relative;width:min(480px,100%);background:#fff;border-radius:28px;padding:40px 36px 34px;text-align:center;color:var(--ink);
  box-shadow:0 40px 100px rgba(10,4,24,.35),0 0 0 1px rgba(255,255,255,.6) inset;transform:translateY(18px) scale(.98);transition:transform .38s cubic-bezier(.2,.7,.2,1)}
.pm-scrim.open .pm{transform:none}
.pm [hidden]{display:none!important}
.pm-x,.pm-back{position:absolute;top:14px;width:34px;height:34px;border:0;border-radius:50%;background:var(--surface);color:var(--ink-2);display:grid;place-items:center;cursor:pointer;padding:0}
.pm-x{right:14px}.pm-back{left:14px}
.pm-x:hover,.pm-back:hover{background:var(--violet-tint);color:var(--violet)}
.pm-x svg,.pm-back svg{width:15px;height:15px}
.pm-orb{width:52px;height:auto;display:block;margin:0 auto 14px}
.pm h3{font-size:38px;line-height:1.05;letter-spacing:-.035em;font-weight:700;margin:16px 0 0;color:var(--ink)}
.pm .pm-sub{font-size:15px;line-height:1.5;color:var(--grey);font-weight:500;margin:12px auto 0;max-width:38ch}
.pm-steps{position:relative;margin-top:24px}
.pm-step{position:absolute;inset:0 0 auto 0;opacity:0;visibility:hidden;transform:translateX(16px);transition:opacity .24s ease,transform .32s cubic-bezier(.2,.7,.2,1),visibility 0s .3s}
.pm-step.on{position:relative;opacity:1;visibility:visible;transform:none;transition-delay:.05s,.05s,0s}
.pm-step.back{transform:translateX(-16px)}
.pm-form{display:flex;gap:9px;align-items:stretch}
.pm-input{flex:1 1 auto;min-width:0;height:50px;border:1.6px solid #E7E7EA;border-radius:14px;padding:0 16px;font:inherit;font-size:15.5px;font-weight:600;color:var(--ink);background:#fafafa;transition:.18s;outline:0;text-align:left;margin:0;box-shadow:none}
.pm-input::placeholder{color:var(--muted);font-weight:500}
.pm-input:focus{border-color:var(--violet);background:#fff;box-shadow:0 0 0 4px var(--violet-tint)}
.pm-btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:9px;height:50px;padding:0 24px;border:0;border-radius:999px;cursor:pointer;white-space:nowrap;
  background:var(--grad);color:#fff;font:inherit;font-size:15px;font-weight:700;letter-spacing:-.01em;box-shadow:0 10px 26px rgba(150,64,200,.30);transition:transform .16s ease,box-shadow .2s ease,opacity .2s}
.pm-btn:hover{transform:translateY(-1px);box-shadow:0 14px 32px rgba(150,64,200,.40)}
.pm-btn[disabled]{opacity:.5;cursor:default;transform:none;box-shadow:none}
.pm-btn.full{width:100%}
.pm-field{text-align:left;display:flex;flex-direction:column;gap:7px;margin-bottom:12px}
.pm-field label{font-size:12.5px;font-weight:700;color:var(--ink)}
.pm-field .pm-input{flex:0 0 auto}
.pm-fine{font-size:12.5px;color:var(--muted);font-weight:600;margin:14px 0 0;line-height:1.5}
.pm-err{font-size:12.5px;font-weight:700;color:#c62b5a;margin:10px 0 0;text-align:left}
.pm-who{display:inline-flex;align-items:center;gap:7px;margin-top:12px;padding:5px 12px 5px 8px;border-radius:999px;background:var(--surface);font-size:12.5px;font-weight:700;color:var(--ink-2)}
.pm-who i{width:16px;height:16px;border-radius:50%;background:var(--green);display:grid;place-items:center}
.pm-who i svg{width:9px;height:9px;color:#fff}
.pm-dots{display:flex;justify-content:center;gap:6px;margin-top:22px}
.pm-dots i{width:6px;height:6px;border-radius:50%;background:var(--line);transition:.25s}
.pm-dots i.on{width:18px;background:var(--violet)}
.pm-dots i.done{background:var(--violet)}
.pm-tick{width:64px;height:64px;border-radius:50%;background:var(--grad);display:grid;place-items:center;margin:0 auto;box-shadow:0 14px 34px rgba(105,64,221,.30);animation:llTickIn .5s cubic-bezier(.2,.9,.2,1.2) both}
.pm-tick svg{width:28px;height:28px;color:#fff}
@keyframes llTickIn{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.pm-socials{display:flex;gap:10px;justify-content:center;margin-top:20px;flex-wrap:wrap}
.pm-close-link{display:inline-block;margin-top:18px;font:inherit;font-size:13px;font-weight:700;color:var(--grey);background:none;border:0;cursor:pointer}
.pm-close-link:hover{color:var(--violet)}
.pm .glass-badge{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:800;letter-spacing:.01em;color:#fff;padding:9px 16px;border-radius:999px;
  background:linear-gradient(135deg,rgba(106,76,242,.9) 0%,rgba(194,95,208,.85) 50%,rgba(240,114,154,.9) 100%);border:1px solid rgba(255,255,255,.42);box-shadow:0 10px 26px rgba(10,6,30,.22),inset 0 1px 0 rgba(255,255,255,.5)}
.pm .glass-badge .dot{width:8px;height:8px;border-radius:50%;background:#fff;animation:llBadgePulse 2.4s infinite}
@keyframes llBadgePulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}70%{box-shadow:0 0 0 9px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
html.pm-open{overflow:hidden}

/* ---------- the launch-list page (/early-access/) ----------
   The old beta form stacked its screens absolutely and sized the panel from a script.
   One screen now, so it sits in the flow and the panel takes its height. */
.ea-panel.ll-single .ea-screen{position:relative}
.ea-panel.ll-single .ll-host{width:100%}
.ea-panel.ll-single .ea-hint{margin:18px 0 0}

/* ---------- the unsubscribe page ---------- */
.un{max-width:520px;margin:clamp(40px,8vh,90px) auto clamp(60px,10vh,120px);background:#fff;border:1px solid var(--line);border-radius:28px;padding:40px 36px 34px;text-align:center;box-shadow:0 20px 60px rgba(11,11,15,.08)}
.un .pm-orb{margin-bottom:10px}
.un h1{font-size:34px;line-height:1.08;letter-spacing:-.03em;margin:14px 0 0}
.un p{font-size:15.5px;line-height:1.55;color:var(--grey);margin:12px auto 0;max-width:40ch}
.un p b{color:var(--ink)}
.un-actions{display:flex;gap:10px;justify-content:center;margin-top:24px;flex-wrap:wrap}
.un-ghost{display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 24px;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--ink);font:inherit;font-size:15px;font-weight:700;cursor:pointer;text-decoration:none;transition:.16s}
.un-ghost:hover{border-color:var(--violet);color:var(--violet)}
.un [hidden]{display:none!important}

/* ---------- small screens ---------- */
@media (max-width:900px){
  .ll{border-radius:22px;padding:10px}
  .ll-steps{height:auto!important}
  .ll-step{position:static;flex-direction:column;align-items:stretch;gap:10px}
  .ll-step:not(.on){display:none}
  .ll-field{flex:0 0 auto;height:50px;border:1.6px solid #E7E7EA;border-radius:14px;background:#fafafa;padding-left:14px}
  .ll-btn{height:50px;justify-content:center}
  .ll-back{display:none}
  .ll-err{position:static;margin:8px 0 0 10px}
  .pm{padding:34px 22px 28px}
  .pm h3{font-size:32px}
  .pm-form{flex-direction:column}
  .un{padding:32px 22px 28px}
}
@media (prefers-reduced-motion:reduce){
  .ll-steps,.ll-step,.pm-scrim,.pm,.pm-step{transition:none}
  .pm-tick,.pm .glass-badge .dot{animation:none}
}