/* Pre-launch: countdown to launch day + "notify me" email form.
   Loaded by every page; the launch date lives in launch.js. */
.notify{max-width:640px;margin:36px auto 0;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
/* The countdown capsule (.cdbox, see NotifyBlock): brand gradient, the seconds drop in on
   each tick, a bar drains each minute (launch.js). */
.cdbox{width:min(520px,100%);display:flex;flex-direction:column;align-items:center;padding:18px 20px 16px;border-radius:22px;color:#fff;background:linear-gradient(135deg,var(--blue),#3b82f6 55%,var(--cyan));box-shadow:0 26px 50px -28px rgba(37,99,235,.9)}
.cdbox .cdl{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;padding:5px 10px;border-radius:99px;background:rgba(255,255,255,.16);font:500 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#fff}
.cdbox .cdl::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;animation:cdblink 1s steps(1) infinite}
.cd{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%}
.cd div{padding:10px 4px 8px;border-radius:14px;background:rgba(255,255,255,.12);display:flex;flex-direction:column;align-items:center;gap:6px;overflow:hidden}
.cd b{display:inline-block;font:600 clamp(30px,6vw,44px)/1 var(--mono);letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:#fff}
.cd b.tick{animation:cdtick .35s var(--ease)}
.cd span{font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.cdbar{width:100%;height:4px;margin-top:12px;border-radius:4px;background:rgba(255,255,255,.22);overflow:hidden}
.cdbar i{display:block;height:100%;width:0;border-radius:4px;background:#fff;transition:width 1s linear}
.cd.live,.cdbox.live{display:none}
@keyframes cdblink{50%{opacity:.2}}
@keyframes cdtick{from{transform:translateY(-35%);opacity:.2}to{transform:none;opacity:1}}
.nwrap{width:100%;border-radius:18px;padding:1.5px;background:conic-gradient(from var(--ang,0deg),rgba(56,189,248,.9),rgba(37,99,235,.95),rgba(139,92,246,.9),rgba(228,229,234,.9) 75%,rgba(56,189,248,.9));animation:spin 7s linear infinite;box-shadow:0 22px 60px -26px rgba(37,99,235,.6)}
.nwrap.err{background:#E5484D;animation:shake .4s}
.nform{display:flex;align-items:center;gap:6px;margin:0;background:var(--card);border-radius:16.5px;padding:7px}
.nform input[type=email]{flex:1;min-width:0;border:0;outline:0;background:transparent;font:500 17px var(--sans);padding:12px 14px;color:var(--ink);letter-spacing:-.01em}
.nform input[type=email]::placeholder{color:#a7a8af;font-weight:400}
.nform .btn{padding:13px 20px;border-radius:12px}
.nform .btn[disabled]{opacity:.6;cursor:progress}
.nform .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.nmsg{font-size:14px;color:var(--muted);min-height:21px;max-width:52ch}
.nmsg.ok{color:var(--proof)}.nmsg.err{color:#D93036}
.notify.done .nwrap{display:none}
@keyframes spin{to{--ang:360deg}}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.dark .nform{background:#121318}
.dark .nform input[type=email]{color:var(--moon)}
.dark .nmsg{color:var(--dim)}.dark .nmsg.ok{color:var(--proof-d)}.dark .nmsg.err{color:#FF8589}
@media (max-width:520px){.cdbox{padding:14px 12px 12px}.cd{gap:6px}.cd div{padding:9px 2px 7px}.nform{flex-wrap:wrap}.nform .btn{width:100%}}
@media (prefers-reduced-motion:reduce){.nwrap,.cdbox .cdl::before,.cd b.tick{animation:none}.cdbar i{transition:none}}
.notify+.trust{margin-top:22px}
.cdl{font:500 11.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 -6px}
/* hero: a speech bubble pointing at the email box */
.hero-notify .nwrap{position:relative}
/* "Join the waitlist" as a hand-drawn doodle: handwriting beside the email box with a sketched arrow into it */
.bubble{position:absolute;right:calc(100% + 20px);top:-30px;color:var(--blue);font:700 30px/1 "Caveat","Comic Sans MS","Segoe Print",cursive;letter-spacing:0;white-space:nowrap;pointer-events:none;transform:rotate(-7deg);transform-origin:right bottom;animation:bubble 2.8s ease-in-out infinite}
.bubble::after{content:"";position:absolute;right:-34px;top:calc(100% + 2px);width:70px;height:52px;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 70 52%22 fill=%22none%22 stroke=%22%232563EB%22 stroke-width=%222.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 4c-2 14 4 30 22 36 9 3 20 3 34-1%22/%3E%3Cpath d=%22M53 31l10 8-11 6%22/%3E%3C/svg%3E") no-repeat center/contain}
@keyframes bubble{50%{transform:rotate(-7deg) translateY(-4px)}}
@media (max-width:1060px){.bubble{right:auto;left:10px;top:auto;bottom:calc(100% + 6px);font-size:26px;transform:rotate(-4deg);transform-origin:left bottom}
  .bubble::after{right:auto;left:calc(100% + 4px);top:-2px;width:46px;height:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 52 44%22 fill=%22none%22 stroke=%22%232563EB%22 stroke-width=%222.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 8c14-6 30-2 36 10 3 6 3 13 1 20%22/%3E%3Cpath d=%22M33 31l8 9 6-10%22/%3E%3C/svg%3E")}
  @keyframes bubble{50%{transform:rotate(-4deg) translateY(-3px)}}}
.hero-notify .cd{margin-bottom:0}.hero-notify .cdbox{margin-bottom:34px}
.notify.done .bubble,[data-live-hide][hidden]{display:none}
@media (prefers-reduced-motion:reduce){.bubble{animation:none}}
/* closing section: a second "Join the waitlist" doodle, left of the box in cyan, with an underline and a looping arrow */
#notify-end .nwrap{position:relative}
.doodle2{position:absolute;right:calc(100% + 30px);top:-44px;color:var(--cyan);font:700 31px/1 "Caveat","Comic Sans MS","Segoe Print",cursive;white-space:nowrap;pointer-events:none;transform:rotate(-5deg);transform-origin:right bottom;animation:doodle2 3.2s ease-in-out infinite}
.doodle2::after{content:"";position:absolute;left:2px;right:2px;bottom:-9px;height:10px;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 10%22 fill=%22none%22 stroke=%22%2338BDF8%22 stroke-width=%222.4%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M3 6c10-5 18 4 28 0s18-5 28 0 18 4 28 0 18-5 28-1%22/%3E%3C/svg%3E") no-repeat center/100% 100%}
.doodle2::before{content:"";position:absolute;right:-40px;top:calc(100% + 4px);width:80px;height:58px;transform:scaleX(-1);background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 80 58%22 fill=%22none%22 stroke=%22%2338BDF8%22 stroke-width=%222.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M68 4c-1 11-9 18-17 15-6-2-4-10 3-8 9 3 6 19-8 27-10 6-22 9-38 10%22/%3E%3Cpath d=%22M17 41L7 48l11 5%22/%3E%3C/svg%3E") no-repeat center/contain}
@keyframes doodle2{50%{transform:rotate(-5deg) translateY(-4px)}}
@media (max-width:1180px){#notify-end .cdbox{margin-bottom:28px}
  .doodle2{right:auto;left:10px;top:auto;bottom:calc(100% + 10px);font-size:26px;transform:rotate(-4deg);transform-origin:left bottom}
  .doodle2::before{right:-44px;top:-4px;width:44px;height:42px;background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 46%22 fill=%22none%22 stroke=%22%2338BDF8%22 stroke-width=%222.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M44 6c-12-4-26 0-32 10-4 7-4 15-2 23%22/%3E%3Cpath d=%22M4 31l6 10 7-9%22/%3E%3C/svg%3E")}
  @keyframes doodle2{50%{transform:rotate(-4deg) translateY(-3px)}}}
.notify.done .doodle2{display:none}
@media (prefers-reduced-motion:reduce){.doodle2{animation:none}}
.launch+.trust{margin-top:22px}
.urlbar .fav.logo,.urlbar.has .fav.logo,.cta .urlbar .fav.logo{background:#fff}
.urlbar .fav img{width:14px;height:14px;object-fit:contain;display:block}