@font-face{font-family:Cubit;src:url(/font-reg.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Cubit;src:url(/font.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Cubit;src:url(/font-xb.woff2) format('woff2');font-weight:800;font-display:swap}
:root{--sky-ink:rgb(66,141,168);--sky-paper:rgb(222,233,244);--sky-field:rgb(82,150,176);--ink:#15171d;--punch:rgb(86,125,135);--punch-a:rgba(86,125,135,.30);--ring:rgb(56,80,87);--ring-a:rgba(56,80,87,.55);--available-height:100svh}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:#fff;color:var(--ink);font-family:Cubit,Arial,sans-serif}
body{margin:0;min-height:100svh;background:#fff;overflow-x:clip}
a{color:inherit;text-underline-offset:4px}
button,input{font:inherit}
button,a,input{touch-action:manipulation}
:focus-visible{outline:3px solid var(--ink);outline-offset:5px}
header{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:32px clamp(24px,5vw,80px)}
.wordmark{font-size:32px;font-weight:600;letter-spacing:-1.2px;text-decoration:none}
.mark{display:inline-block;width:.715em;height:.715em;margin-left:.24em;background:currentColor;mask:url(/mark.png) center/contain no-repeat;-webkit-mask:url(/mark.png) center/contain no-repeat}
.back{font-size:16px;font-weight:600;text-decoration:none;padding:10px 0}
.back span{margin-left:10px}
main{position:relative;min-height:calc(100svh - 190px);display:flex;align-items:center;isolation:isolate}
.content{position:relative;z-index:1;width:min(440px,40vw);margin:24px 0 42px clamp(40px,10vw,160px)}
#waitlist[data-step=device]{align-items:flex-start}
#waitlist[data-step=device] .content{width:min(560px,44vw);margin-top:clamp(40px,6vh,70px)}
h1{font-size:clamp(42px,3.8vw,52px);font-weight:600;line-height:1.07;letter-spacing:-.02em;margin:0 0 23px}
h1 strong{font-weight:800;color:var(--punch);letter-spacing:-.035em}
.lead{font-size:18px;line-height:1.5;max-width:400px;margin:0 0 29px}
form label[for]{display:block;font-size:15px;font-weight:600;margin-bottom:9px}
#email,#code{width:100%;height:54px;border:1px solid #c8cbd0;border-radius:var(--app-field-radius);background:#fff;color:var(--ink);padding:14px 16px;font-size:17px}
#email::placeholder{color:#4d5963;opacity:1}
#email:focus,#code:focus{outline:2px solid var(--ink);outline-offset:3px}
#email[aria-invalid=true]{border-color:#8f2636}
fieldset{border:0;margin:22px 0 25px;padding:0;min-width:0}
legend{font-size:15px;font-weight:600;margin-bottom:10px;padding:0}
.platforms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.platforms label{position:relative;cursor:pointer;min-width:0}
.platforms input{position:absolute;inset:0;z-index:1;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.platforms span{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;min-height:136px;padding:22px 12px 18px;border:2px solid rgba(21,23,29,.2);border-radius:var(--app-field-radius);background:rgba(255,255,255,.8);font-size:16px;font-weight:600}
.platforms span::after{content:'';position:absolute;top:12px;right:12px;width:19px;height:19px;border:1.5px solid rgba(21,23,29,.25);border-radius:50%;font-size:13px;line-height:18px;text-align:center}
@media(hover:hover){.platforms label:hover span{background:#edf8fb;border-color:var(--punch)}}
.platforms input:disabled{cursor:wait}
.platforms input:disabled+span{opacity:.65}



.pbtn{min-height:48px;border:0;border-radius:var(--app-field-radius);font-weight:600;font-size:16px;background:var(--ink);color:#fff;cursor:pointer;padding:13px 24px;transition:background .15s}
.pbtn:hover{background:#34363b}
.pbtn:active{background:#090a0d}
.pbtn:disabled{cursor:wait;transform:none;opacity:.8}
.consent{font-size:13px;line-height:1.5;margin:18px 0 0;color:#60636b}
#status{min-height:24px;margin:16px 0 0;font-size:15px;font-weight:600;line-height:1.4}
.character{position:absolute;width:58vw;height:100%;right:0;top:0;overflow:clip;container-type:size;z-index:0;pointer-events:none}
#cubit{display:block;position:absolute;--cubit-lean:-16;width:min(104cqh,96cqw,1080px);height:auto;aspect-ratio:1;left:88%;top:50%;transform:translate(-50%,-50%)}
.confirmation-note{font-size:16px;line-height:1.5;max-width:350px}
.text-button{padding:12px 0;border:0;background:none;font-weight:600;font-size:16px;cursor:pointer;text-decoration:underline;text-underline-offset:5px}
.text-button span{margin-left:10px}
footer{position:relative;z-index:1;display:flex;gap:24px;justify-content:flex-end;padding:14px clamp(24px,5vw,80px) 24px;font-size:13px;font-weight:600}
@media(max-width:899px){
 header{padding:22px 24px 8px}.wordmark{font-size:27px}.back{font-size:14px}
 main{display:flex;flex-direction:column;min-height:0}
 .character{position:relative;width:100%;height:clamp(240px,38svh,340px);order:0}
 #cubit{--cubit-lean:-12;left:calc(100% - min(25cqw,35cqh))}
 .content,#waitlist[data-step=device] .content{order:1;width:min(480px,calc(100% - 48px));margin:10px auto 22px}
 h1{font-size:clamp(38px,9vw,52px);margin-bottom:17px}
 .lead{font-size:18px;margin-bottom:23px}
 footer{padding:12px 24px 24px}
 .keyboard-space .character{height:84px}
}
@media(max-height:600px) and (max-width:899px){.character{height:140px}.content{margin-top:0}h1{font-size:40px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}

#confirmation h1:focus{outline:none}

form .pbtn{display:block;margin-top:24px}
.platforms svg{width:56px;height:56px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.platforms input:checked+span{border-color:var(--punch);background:#dff2f7}
.platforms input:checked+span::after{content:'✓';border-color:var(--punch);background:var(--punch);color:#fff}
.platforms input:focus-visible+span{outline:2px solid var(--ink);outline-offset:4px}
.secondary-actions{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:12px}
.text-button:disabled{color:#767981;cursor:default}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#step-title:focus{outline:none}

@media(max-width:899px){.platforms{grid-template-columns:repeat(2,minmax(0,1fr))}.platforms span{min-height:126px}.platforms svg{width:52px;height:52px}}

.email-box{position:relative;height:var(--app-field-height);border:1px solid #c8cbd0;border-radius:var(--app-field-radius);overflow:hidden;background:#fff}
.email-box:focus-within{outline:2px solid var(--ink);outline-offset:3px}
.email-box:has([aria-invalid=true]){border-color:#8f2636}
.email-box #email{height:100%;border:0;border-radius:0;padding-right:16px;outline:none}
.email-box.ready #email{padding-right:122px}
.email-box #continue{position:absolute;right:var(--app-send-inset);top:var(--app-send-inset);min-height:var(--app-send-height);height:var(--app-send-height);margin:0;padding:10px 18px;border-radius:var(--app-button-radius);font-size:14px;visibility:hidden;opacity:0;pointer-events:none;transform:translateX(calc(100% + 12px));transition:transform 340ms cubic-bezier(.215,.61,.355,1),opacity 220ms ease-out,visibility 0s linear 340ms}
.email-box.ready #continue{visibility:visible;opacity:1;pointer-events:auto;transform:translateX(0);transition-delay:0s}
.email-box #continue:focus-visible{outline:2px solid #fff;outline-offset:-4px}
@media(prefers-reduced-motion:reduce){.email-box #continue{transition:none}}

/* Owner-selected cyan palette, fading across the left side into white. */
.brand-edge{position:fixed;inset:-10px auto -10px -8px;width:clamp(180px,46vw,760px);pointer-events:none;opacity:.44;background:linear-gradient(#91D1E1,#b8e2ec);mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.75) 30%,transparent 100%);animation:edge-boil 910ms steps(1,end) infinite;z-index:0}
@keyframes edge-boil{0%,100%{transform:translate(0,0)}14%{transform:translate(.7px,.4px)}28%{transform:translate(-.6px,-.3px)}42%{transform:translate(.4px,-.5px)}56%{transform:translate(-.7px,.2px)}70%{transform:translate(.3px,.5px)}84%{transform:translate(-.2px,-.4px)}}
html.page-hidden .brand-edge{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.brand-edge{animation:none}}
.code-entry{position:relative;width:min(100%,calc(6 * var(--app-cell-width) + 5 * var(--app-gap) + var(--app-group-gap)));height:auto;cursor:text}
.code-cells{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) calc(var(--app-group-gap) - var(--app-gap)) repeat(3,minmax(0,1fr));gap:var(--app-gap);height:auto;pointer-events:none;transform-origin:center;transition:transform 170ms cubic-bezier(.215,.61,.355,1)}
.code-cell{display:flex;align-items:center;justify-content:center;min-width:0;aspect-ratio:var(--app-cell-aspect);border-radius:var(--app-cell-radius-x) / var(--app-cell-radius-y);border:2px solid rgba(21,23,29,.3);background:#fff;transition:border-color 140ms,background 170ms;color:var(--ink)}
.code-digit{font-size:22px;font-weight:700;line-height:1}
.code-cell.filled{border-color:#aab2bc}
.code-cell.live{border:2px solid var(--app-accent)}
.code-dash{align-self:center;justify-self:start;margin-left:4px;width:10px;height:2px;border-radius:1px;background:#c9ced6}
.code-entry #code{position:absolute;inset:0;z-index:1;width:100%;max-width:none;height:100%;margin:0;padding:0;opacity:0;outline:0;border:0;font-size:22px;letter-spacing:normal;cursor:text}
.code-entry.checking .code-cells{transform:scale(var(--app-press))}
.code-entry.checking .code-cell{border:2px solid var(--app-accent);background:rgba(66,141,168,.13);color:var(--app-accent)}
.code-entry.invalid .code-cell{border:2px solid var(--app-red);background:rgba(255,107,84,.14);color:var(--app-red)}
.code-entry.verified .code-cell{border:2px solid #57b25b;background:rgba(87,178,91,.13);color:#57b25b}
.code-entry.verified .code-cells{animation:code-confirm 350ms ease-in-out}
@keyframes code-confirm{0%{transform:scale(var(--code-from,1))}50%{transform:scale(1.035)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.code-cells{transition:none}.code-entry.verified .code-cells{animation:none}}

/* The platforms line above the heading (Isac 2026-10-10). */
.coming{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;font-size:14px;font-weight:600;color:#5a7f8a;margin:0 0 20px}
.coming span{display:inline-flex;align-items:center;gap:6px}.coming svg{width:16px;height:16px;fill:currentColor;flex:none}
.coming .coming-to{font-size:12px;letter-spacing:.06em;text-transform:uppercase}
/* The app's Cubit (live-character.js) is drawn smaller inside a larger canvas, so the cheer's lean, hop and sway stay inside it. */
#cubit.live{width:min(135cqh,125cqw,1400px)}
/* The confirmation fills a wide screen instead of keeping the form's 440 px column. */
@media(min-width:900px){#waitlist[data-step=success] .content{width:min(720px,46vw)}#waitlist[data-step=success] h1{font-size:clamp(52px,6.2vw,112px)}#waitlist[data-step=success] .lead,#waitlist[data-step=success] .confirmation-note{font-size:clamp(18px,1.3vw,24px);max-width:34em}}
/* On a phone the confirmation is one line when it fits (Isac 2026-10-10); it wraps on its own when it does not. */
@media(max-width:899px){#confirmation h1 br{display:none}#confirmation h1 strong::before{content:' '}}
@keyframes wl-in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
/* ---- the stylized key (the same as 'Join the waitlist' on the intro page): 'Back to home' on the success screen ---- */
/* ---- the soft keys (the canvas's "Website: soft keys", Isac 2026-10-14): flat at rest, nothing underneath; on hover
   the face rises 3 px and its side reaches 2 px below where it rested, with a soft shadow; a press pushes it 2 px into
   the floor, squashed a hair, in 70 ms, and letting go springs it back past the hover height. The motion lives on
   `translate` and `scale`, never `transform`, which the confirmation's entrance animation holds. Every state lists the
   same five shadows in the same order and kind, or a press snaps instead of moving. A strip under each key keeps the
   hover while the face rises out from under the pointer (else the word jittered up and down). */
.homekey,.outlinekey{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:54px;padding:0 26px;box-sizing:border-box;border:0;border-radius:15px;font:inherit;font-size:17px;font-weight:600;letter-spacing:-.01em;text-decoration:none;cursor:pointer;
  translate:0 0;scale:1 1;transition:translate .12s ease-in,scale .12s ease-in,box-shadow .12s ease-in,background-color .1s ease-out}
.homekey::after,.outlinekey::after{content:'';position:absolute;left:0;right:0;top:100%;height:5px}
.homekey{background:#22252d;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.24),inset 0 0 0 rgba(0,0,0,0),0 0 0 #3a3e48,0 0 0 rgba(30,33,40,0),0 0 0 rgba(46,98,114,0)}
.outlinekey{background-color:transparent;color:var(--ink,#15171d);box-shadow:inset 0 0 0 2px rgba(30,33,40,.6),inset 0 0 0 rgba(30,60,72,0),0 0 0 rgba(30,33,40,.35),0 0 0 rgba(30,60,72,0),0 0 0 rgba(46,98,114,0)}
@media(hover:hover){
  .homekey:hover,.outlinekey:hover{translate:0 -3px;transition:background-color .08s ease-out,translate .22s cubic-bezier(.3,1.35,.6,1) .03s,box-shadow .22s cubic-bezier(.3,1.35,.6,1) .03s}
  .homekey:hover:not(:active),.outlinekey:hover:not(:active){transition:background-color .08s ease-out,translate .32s cubic-bezier(.25,1.8,.5,1),scale .32s cubic-bezier(.25,1.8,.5,1),box-shadow .32s cubic-bezier(.25,1.8,.5,1)}
  .homekey:hover{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.24),inset 0 0 0 rgba(0,0,0,0),0 5px 0 #3a3e48,0 17px 22px -8px rgba(30,33,40,.32),0 23px 30px -10px rgba(46,98,114,.38)}
  .outlinekey:hover{box-shadow:inset 0 0 0 2px rgba(30,33,40,.6),inset 0 0 0 rgba(30,60,72,0),0 5px 0 rgba(30,33,40,.35),0 17px 22px -8px rgba(30,60,72,.2),0 23px 30px -10px rgba(46,98,114,0)}
}
@media(hover:none){
  .homekey{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.24),inset 0 0 0 rgba(0,0,0,0),0 4px 0 #3a3e48,0 14px 20px -8px rgba(30,33,40,.3),0 0 0 rgba(46,98,114,0)}
  .outlinekey{box-shadow:inset 0 0 0 2px rgba(30,33,40,.6),inset 0 0 0 rgba(30,60,72,0),0 4px 0 rgba(30,33,40,.3),0 14px 20px -8px rgba(30,60,72,.16),0 0 0 rgba(46,98,114,0)}
}
.homekey:active,.outlinekey:active{translate:0 2px;scale:.985 .97;transition:translate .07s cubic-bezier(.4,0,.7,1),scale .07s cubic-bezier(.4,0,.7,1),box-shadow .07s cubic-bezier(.4,0,.7,1),background-color .07s ease-in}
.homekey:active{background:#1b1e25;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.2),inset 0 3px 7px rgba(0,0,0,.5),0 0 0 #3a3e48,0 1px 3px -1px rgba(30,33,40,.3),0 0 0 rgba(46,98,114,0)}
.outlinekey:active{box-shadow:inset 0 0 0 2px rgba(30,33,40,.6),inset 0 0 0 rgba(30,60,72,0),0 0 0 rgba(30,33,40,.35),0 0 0 rgba(30,60,72,0),0 0 0 rgba(46,98,114,0)}
.homekey:focus-visible,.outlinekey:focus-visible{outline:2px solid var(--ink,#15171d);outline-offset:4px}
@media(prefers-reduced-motion:reduce){.homekey,.outlinekey,.homekey:hover,.outlinekey:hover,.homekey:active,.outlinekey:active{transition:none!important}}
#confirmation .homekey{display:flex;width:fit-content}
#confirmation:not([hidden]) .homekey{animation:wl-in .5s .36s cubic-bezier(.2,.8,.2,1) both}
#confirmation .keys{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:22px 0 4px}   /* side by side, so one rising under the pointer never meets the other */
#confirmation .keys .homekey{margin:0}
#confirmation:not([hidden]) .outlinekey{animation:wl-in .5s .44s cubic-bezier(.2,.8,.2,1) both}

/* Join the beta waitlist: the soft solid key like Back to home above (flat at rest, rises 3 px, presses 2 px in). Continue stays the small send button inside the field, which clips what rises. */
#join{position:relative;border-radius:15px;background:#22252d;translate:0 0;scale:1 1;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.24),inset 0 0 0 rgba(0,0,0,0),0 0 0 #3a3e48,0 0 0 rgba(30,33,40,0),0 0 0 rgba(46,98,114,0);transition:translate .12s ease-in,scale .12s ease-in,box-shadow .12s ease-in,background-color .1s ease-out}
#join::after{content:'';position:absolute;left:0;right:0;top:100%;height:5px}
@media(hover:hover){#join:not(:disabled):hover{translate:0 -3px;background:#22252d;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.24),inset 0 0 0 rgba(0,0,0,0),0 5px 0 #3a3e48,0 17px 22px -8px rgba(30,33,40,.32),0 23px 30px -10px rgba(46,98,114,.38);transition:background-color .08s ease-out,translate .32s cubic-bezier(.25,1.8,.5,1),scale .32s cubic-bezier(.25,1.8,.5,1),box-shadow .32s cubic-bezier(.25,1.8,.5,1)}}
#join:not(:disabled):active,#join:not(:disabled):hover:active{translate:0 2px;scale:.985 .97;background:#1b1e25;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.2),inset 0 3px 7px rgba(0,0,0,.5),0 0 0 #3a3e48,0 1px 3px -1px rgba(30,33,40,.3),0 0 0 rgba(46,98,114,0);transition:translate .07s cubic-bezier(.4,0,.7,1),scale .07s cubic-bezier(.4,0,.7,1),box-shadow .07s cubic-bezier(.4,0,.7,1),background-color .07s ease-in}
@media(prefers-reduced-motion:reduce){#join,#join:hover,#join:active{transition:none!important}}