/* Layout: four phone screens side by side (stacking on a phone), each a working mock of one state:
   sign up, log in, wrong password, check your email. Lime page, white key-card forms. */
:root{color-scheme:light;--lime:#c8f542;--ink:#0d1440;--muted:#46507a;--blue:#1b1dd0;--line:#d5dae6;--err:#c42b1c;--errBg:#fdecea}
*{box-sizing:border-box}
body{margin:0;background:#c8f542;background-image:radial-gradient(800px 500px at 80% 0%,#e6ff9a,transparent 70%);color:var(--ink);font-family:Figtree,system-ui,sans-serif;padding-inline:16px}

h1{font-family:Archivo,sans-serif;font-stretch:120%;font-weight:900;text-transform:uppercase;font-size:clamp(26px,5vw,40px);margin:0 0 6px;line-height:.95}
.lede{margin:0 0 26px;color:var(--muted);max-width:62ch;font-size:16px}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:30px;align-items:start}
.col{display:flex;flex-direction:column;gap:12px;min-width:0}
.cap{font:700 13px Silkscreen,monospace;color:var(--ink)}
.phone{width:100%;max-width:360px;margin:0 auto;border:9px solid #0d1440;border-radius:40px;overflow:hidden;background:#c8f542;min-height:700px;display:flex;flex-direction:column}
.top{padding:16px 18px 18px;display:flex;justify-content:space-between;align-items:center}
.tile{display:block;border-radius:14px;padding:5px 8px 7px;background:linear-gradient(170deg,#fff,#dce0ea);box-shadow:0 4px 0 #959db1,inset 0 2px 1px #fff}
.logo{display:block;width:128px;height:54px;overflow:hidden;position:relative}
.logo img{position:absolute;width:186px;height:186px;left:-32px;top:-68px;max-width:none}
.tag{font:700 11px Silkscreen,monospace;color:var(--blue)}
.card{flex:1;background:#fff;border-radius:30px 30px 0 0;padding:24px 20px 22px;display:flex;flex-direction:column;gap:14px;box-shadow:0 -6px 0 rgba(13,20,64,.06)}
h2{font-family:Archivo,sans-serif;font-stretch:115%;font-weight:900;text-transform:uppercase;font-size:24px;line-height:1;margin:0}
.sub{margin:-6px 0 0;color:var(--muted);font-size:14.5px;line-height:1.45}
/* keycap buttons */
.k{--k1:#fff;--k2:#dce0ea;--k3:#959db1;--t:#0d1440;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;border:0;border-radius:14px;padding:14px 16px;font:800 15.5px Figtree,sans-serif;color:var(--t);cursor:pointer;
  background:linear-gradient(170deg,var(--k1),var(--k2));box-shadow:0 5px 0 var(--k3),0 10px 18px rgba(13,20,64,.16),inset 0 2px 1px rgba(255,255,255,.8);transition:transform .07s,box-shadow .07s}
.k:active{transform:translateY(4px);box-shadow:0 1px 0 var(--k3),0 4px 8px rgba(13,20,64,.14),inset 0 2px 1px rgba(255,255,255,.8)}
.k.b{--k1:#5a6bff;--k2:#1b1dd0;--k3:#0a0c70;--t:#fff}
.k.g{border:1.5px solid var(--line)}
.k:focus-visible,input:focus-visible,a:focus-visible,.seg button:focus-visible{outline:3px solid #ff2d8a;outline-offset:2px}
.or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;font-weight:600}
.or::before,.or::after{content:"";flex:1;height:1.5px;background:var(--line)}
/* inset fields, like a pressed key */
.f{display:flex;flex-direction:column;gap:6px}
.f label{font-weight:700;font-size:14px}
.fi{display:flex;align-items:center;background:#f2f4f9;border-radius:13px;box-shadow:inset 0 3px 5px rgba(13,20,64,.12),inset 0 -1px 0 #fff;border:2px solid transparent}
.fi input{flex:1;min-width:0;border:0;background:transparent;padding:13px 14px;font:600 16px Figtree,sans-serif;color:var(--ink);outline:none}
.fi:focus-within{border-color:var(--blue)}
.fi button{border:0;background:transparent;font:700 13px Figtree,sans-serif;color:var(--blue);padding:0 14px;cursor:pointer;align-self:stretch}
.help{font-size:12.5px;color:var(--muted)}
.bad .fi{border-color:var(--err);background:var(--errBg)}
.err{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;color:var(--err);font-weight:600;line-height:1.4}
.link{color:var(--blue);font-weight:700;font-size:14px;text-decoration:none}
.right{align-self:flex-end;margin-top:-6px}
/* own phone question */
.q{display:flex;flex-direction:column;gap:8px}
.q b{font-size:14px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.seg button{border:0;border-radius:12px;padding:11px 8px;font:700 14px Figtree,sans-serif;color:var(--ink);cursor:pointer;background:linear-gradient(170deg,#fff,#e4e7ef);box-shadow:0 4px 0 #a9b0c0,inset 0 2px 1px #fff;transition:transform .07s}
.seg button[aria-pressed="true"]{background:linear-gradient(170deg,#e6ff9a,#c8f542);box-shadow:0 1px 0 #6f9a10,inset 0 2px 4px rgba(0,0,0,.12);transform:translateY(3px)}
.tick{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.tick input{position:absolute;opacity:0;width:1px;height:1px}
.tick .box{flex:none;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(170deg,#fff,#e4e7ef);box-shadow:0 4px 0 #a9b0c0,inset 0 2px 1px #fff;transition:transform .07s}
.tick .box svg{opacity:0}
.tick input:checked+.box{background:linear-gradient(170deg,#e6ff9a,#c8f542);box-shadow:0 1px 0 #6f9a10,inset 0 2px 4px rgba(0,0,0,.12);transform:translateY(3px)}
.tick input:checked+.box svg{opacity:1}
.tick input:focus-visible+.box{outline:3px solid #ff2d8a;outline-offset:2px}
.tick b{display:block;font-size:14.5px;margin-bottom:2px}
.fine{font-size:12px;color:var(--muted);line-height:1.45;margin:0}
.fine a{color:var(--blue);font-weight:700}
.alt{text-align:center;font-size:14px;color:var(--muted);margin-top:auto}
/* check email */
.big{width:84px;height:84px;margin:6px auto 0;border-radius:22px;display:grid;place-items:center;background:linear-gradient(160deg,#e9ff9e,#b8f025);box-shadow:0 8px 0 #5c840a,0 0 34px rgba(200,245,66,.6),inset 0 2px 1px #fff}
.center{text-align:center}
.saved{display:flex;gap:10px;align-items:center;background:#eef6d2;border-radius:12px;padding:10px 12px;font-size:13.5px;font-weight:600;color:#2d4400}
@media (prefers-reduced-motion:reduce){.k,.seg button{transition:none}}

/* real page layout */
body{padding:0;min-height:100vh;min-height:100dvh}
.page{max-width:460px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.page .top{padding:18px 18px 18px}
.page .card{border-radius:30px 30px 0 0}
@media (min-width:600px){.page{padding-block:30px}.page .card{border-radius:30px;flex:none;box-shadow:0 10px 0 rgba(13,20,64,.12)}}
.msg{border-radius:13px;padding:11px 13px;font-size:14px;font-weight:600;line-height:1.45}
.msg.err{background:var(--errBg);color:var(--err)}
.msg.ok{background:#eef6d2;color:#2d4400}
.msg[hidden]{display:none}
.k[disabled]{opacity:.6;cursor:wait}
.consent{display:none}
.consent.on{display:flex}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}