.alpha{max-width:860px;margin:0 auto;padding:54px 22px 44px}
.agrid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:center}
.stage{align-self:center}
.stage{position:relative;height:320px;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.tf{max-width:460px}
.tf h1{font-size:34px;line-height:1.1;letter-spacing:-0.03em;margin:0 0 12px;font-weight:700;text-wrap:balance}
.tf .what{margin:0 0 6px;font-size:15px;line-height:1.5;color:var(--tx2);text-wrap:pretty}
.tf .more{margin:0 0 26px;font-size:14px}
.tf .field{position:relative;margin:0 0 10px}
.tf input[type=email]{width:100%;padding:14px 16px;font:500 16px var(--font);border-radius:13px;border:1px solid var(--hair2);background:var(--card);color:var(--tx);transition:border-color .16s ease,box-shadow .16s ease}
.tf input[type=email]:focus{outline:none;border-color:rgba(143,220,192,.6);box-shadow:0 0 0 3px var(--mint-dim)}
.tf input[type=email]::placeholder{color:var(--tx3)}
.tf .hp{position:absolute;left:-9999px;top:0;width:1px;height:1px;opacity:0;pointer-events:none}
.tf .btn{width:100%;padding:14px 22px;border-radius:13px;font-size:15px}
.tf .btn[disabled]{opacity:.55;cursor:default;transform:none;box-shadow:none}
.tf .msg{margin:10px 0 0;font-size:13.5px;line-height:1.45;min-height:20px;color:var(--tx2)}
.tf .msg.err{color:#FF9B8A}
.tf .more{margin-bottom:18px}
.tf .why{margin:0 0 22px;font-size:15px;line-height:1.55;color:var(--tx2);text-wrap:pretty}
/* the one thing people get wrong: it must be a Google account. Loud, and right above the field */
.tf .need{display:flex;gap:13px;align-items:flex-start;margin:0 0 12px;padding:16px 18px;border-radius:14px;background:var(--mint-dim);border:1px solid rgba(143,220,192,.38);color:var(--mint)}
/* An exclamation mark the full height of the box, in mint: a round-ended bar and a dot.
   Two pieces, so the bar stretches with the text while the dot keeps its shape. 3px is
   the weight the site's heavier line art renders at (the game's throw glyph, the rotate icon). */
.tf .need-ic{flex-shrink:0;align-self:stretch;display:flex;flex-direction:column;align-items:center;gap:5px;width:12px;padding:3px 0 2px}
.tf .need-ic svg{display:block;fill:currentColor}
.tf .need-ic .bar{flex:1 1 0;min-height:0;width:3px}
.tf .need-ic .pt{flex-shrink:0;width:4px;height:4px}
.tf .need-h{margin:0 0 5px;font-size:19px;line-height:1.3;font-weight:700;letter-spacing:-0.01em;color:var(--tx);text-wrap:balance}
.tf .need-p{margin:0;font-size:13.5px;line-height:1.45;color:var(--tx2)}
.tf .after{margin:22px 0 0;padding:18px 0 0;border-top:1px solid var(--hair)}
.tf .after p{margin:0 0 10px;font-size:14.5px;line-height:1.55;color:var(--tx2);text-wrap:pretty}
.tf .after .thanks{margin:0;padding-left:12px;border-left:2px solid var(--carbs);color:var(--tx)}
.tf .fine{margin:18px 0 0;font-size:12px;line-height:1.5;color:var(--tx3);text-wrap:pretty}
/* The iPhone section and the apple that opens it live in site.css: the landing has them too. */
.tf [hidden]{display:none}
#formwrap{transition:opacity .45s ease,transform .45s ease}
#formwrap.away{opacity:0;transform:translateY(-6px);pointer-events:none}
/* The confirmation is the loudest thing on the screen: a big mint headline, the
   promise at body size, the spam hint small and grey (.tf .fine). */
.done{padding-top:10px}.done h2{font-size:42px;line-height:1.08;letter-spacing:-0.035em;margin:0 0 16px;font-weight:800;color:var(--mint);text-wrap:balance}
.done p{margin:0 0 8px;font-size:16px;line-height:1.55;color:var(--tx);text-wrap:pretty}
.done .fine{margin-top:16px}
.done .replay{display:inline-block;margin-top:14px;font-size:13px;color:var(--tx3)}
.done:not([hidden]){animation:smf-in .55s ease-out both}
@keyframes smf-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:760px){.alpha{padding:30px 22px 40px}.agrid{grid-template-columns:1fr;gap:18px}.stage{order:-1;height:230px}.tf h1{font-size:28px}.tf .need-h{font-size:17.5px}.done h2{font-size:34px}.alpha .apz{margin-top:30px}}
@media(prefers-reduced-motion:reduce){#formwrap,.done:not([hidden]){transition:none;animation:none}}