/* ConsoleMouse "Keycap" website prototype. Plain CSS, no build step.
   Tokens live in tokens.css. Fonts: Unbounded, Onest, JetBrains Mono (OFL), loaded via Google Fonts in index.html. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cm-ground);color:var(--cm-graphite);font-family:var(--cm-font-body);line-height:1.5;font-size:var(--cm-size-body);overflow-x:hidden}
img,svg{max-width:100%}
a{color:var(--cm-graphite)}
a:hover{color:var(--cm-signal-text)}
:focus-visible{outline:3px solid var(--cm-signal);outline-offset:4px}
.band :focus-visible{outline-color:var(--cm-signal)}
.skip{position:absolute;left:12px;top:-60px;background:var(--cm-graphite);color:var(--cm-card);padding:12px 16px;border-radius:10px;z-index:10;text-decoration:none}
.skip:focus{top:12px}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.disp{font-family:var(--cm-font-display);font-weight:800;letter-spacing:var(--cm-track-display);line-height:1.03;text-wrap:balance;margin:0}
.h2{font-size:var(--cm-size-h2)}
.mono{font-family:var(--cm-font-mono);font-weight:500;letter-spacing:var(--cm-track-mono);text-transform:uppercase;font-size:12.5px}
.mute{color:var(--cm-muted)}
.hot{color:var(--cm-signal-text)}
.sec{padding:clamp(64px,9vw,128px) 0}
p{margin:0}

/* keys */
.key{--kc:var(--cm-key);--edge:var(--cm-edge);display:grid;place-items:center;width:1em;height:1em;flex:none;border:0;padding:0;border-radius:var(--cm-r-key);background:var(--kc);color:var(--cm-graphite);box-shadow:var(--cm-key-shadow);transition:transform var(--cm-t-press),box-shadow var(--cm-t-press)}
.key.on{--kc:var(--cm-signal);--edge:var(--cm-signal-edge)}
.key.ink{--kc:var(--cm-graphite-key);--edge:var(--cm-graphite-edge);color:var(--cm-card)}
.key.wide{width:2.1em;border-radius:.19em}
.key.down{transform:translateY(var(--cm-key-down-shift));box-shadow:var(--cm-key-shadow-down)}
.keybtn{cursor:pointer;font:inherit}
.leg{font-family:var(--cm-font-mono);font-weight:700;font-size:.36em;line-height:1}
.word{font-family:var(--cm-font-word);font-weight:600;letter-spacing:var(--cm-track-word);line-height:1}
.lock{display:flex;align-items:center;gap:.42em;font-size:19px;white-space:nowrap;text-decoration:none;color:inherit}
.lock img{height:1.5em;width:auto;display:block}
.nav .lock,.foot-row .lock{min-height:44px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:48px;background:var(--cm-signal);color:var(--cm-graphite);font:inherit;font-weight:700;border:0;border-radius:var(--cm-r-btn);padding:14px 24px;box-shadow:var(--cm-btn-shadow);text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform var(--cm-t-press),box-shadow var(--cm-t-press)}
.btn.sm{min-height:44px;padding:9px 18px;box-shadow:0 4px 0 var(--cm-signal-edge)}
.btn:hover{color:var(--cm-graphite);transform:translateY(2px);box-shadow:0 4px 0 var(--cm-signal-edge)}
.btn:active{transform:translateY(5px);box-shadow:0 1px 0 var(--cm-signal-edge)}
.btn:focus-visible{outline-color:var(--cm-graphite)}

/* nav + hero */
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0}
.links{display:flex;gap:12px;align-items:center;font-weight:500}
.links a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px;padding:0 8px}
.links a.btn{padding:9px 18px;margin-left:8px}
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center;padding:clamp(24px,5vw,72px) 0 clamp(48px,7vw,96px)}
.hero-copy{display:grid;gap:22px;justify-items:start}
.hero-lede{font-size:clamp(19px,2vw,24px);font-weight:500;max-width:26em}
.hero h1{font-size:clamp(38px,6.2vw,84px)}
.need{display:flex;align-items:center;gap:12px;font-weight:700}
.need .key{font-size:34px}
.cluster{display:flex;align-items:flex-start;gap:.125em;transform:rotate(-8deg);font-size:clamp(64px,9.5vw,124px);justify-self:center}
.kgrid{display:grid;grid-template-columns:repeat(2,1em);gap:.125em}
.mouse{--edge:var(--cm-signal-edge);position:relative;width:1.125em;height:2.1875em;margin-top:-.031em;border-radius:999px;background:var(--cm-signal);box-shadow:0 .13em 0 var(--edge),0 .2em .28em rgba(168,43,23,.35)}
.mouse::after{content:"";position:absolute;left:50%;top:.281em;width:.1875em;height:.469em;margin-left:-.094em;border-radius:.094em;background:var(--cm-graphite)}
.tap{animation:tap var(--cm-t-tap) infinite}
.d1{animation-delay:.4s}.d2{animation-delay:.8s}.d4{animation-delay:1.9s}
@keyframes tap{0%,8%,22%,100%{transform:translateY(0);box-shadow:0 .13em 0 var(--edge),0 .2em .28em rgba(27,27,31,.2)}11%,18%{transform:translateY(var(--cm-key-down-shift));box-shadow:0 .04em 0 var(--edge),0 .07em .1em rgba(27,27,31,.2)}}

/* dark band: how it works */
.band{background:var(--cm-graphite);color:var(--cm-card)}
.band .mute{color:var(--cm-muted-dark)}
.modes{display:grid;gap:32px}
.modes-head{display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between;align-items:flex-end}
.modes-head>div:first-child{display:grid;gap:14px;max-width:36em}
.lead{font-size:19px}
.switches{display:grid;gap:14px;justify-items:end}
.switch{display:flex;align-items:center}
.switch.mode{gap:14px;font-size:72px}
.switch.con{gap:10px;font-size:46px}
.stage{container-type:inline-size;aspect-ratio:16/9;position:relative;overflow:hidden;border-radius:var(--cm-r-stage);background:linear-gradient(var(--cm-ground) 0 64%,var(--cm-ground-2) 64%);color:var(--cm-graphite)}
.ab{position:absolute}
.lab{position:absolute;font-family:var(--cm-font-mono);font-weight:700;font-size:max(1.05cqw,9px);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.board{left:6cqw;top:30cqw;width:56cqw;height:5cqw;background:var(--cm-edge);border-radius:.6cqw}
.tele{left:10cqw;top:4cqw;width:40cqw;height:23.5cqw;background:var(--cm-graphite);border-radius:1cqw}
.foot{left:28cqw;top:27.5cqw;width:4cqw;height:2.5cqw;background:var(--cm-graphite)}
.scr{position:absolute;inset:.8cqw;border-radius:.5cqw;overflow:hidden;background:var(--cm-graphite-key)}
.scr.live{background:var(--cm-graphite)}
.scr.live::before{content:"";position:absolute;inset:0;background:var(--cm-signal);clip-path:polygon(0 100%,0 58%,36% 32%,60% 62%,100% 22%,100% 100%)}
.scr.live::after{content:"";position:absolute;right:13%;top:13%;width:15%;aspect-ratio:1;border-radius:50%;background:var(--cm-key)}
.scr.idle{background:repeating-linear-gradient(135deg,var(--cm-graphite-key) 0 .8cqw,var(--cm-graphite) .8cqw 1.6cqw)}
.scr.appui{background:var(--cm-card)}
.scr.appui::before{content:"";position:absolute;left:0;right:0;top:0;height:1.5cqw;background:var(--cm-ground-2)}
.scr.appui::after{content:"";position:absolute;left:calc(50% - 2cqw);top:calc(50% - 1.4cqw);width:4cqw;height:4cqw;border-radius:.8cqw;background:var(--cm-signal);box-shadow:0 .5cqw 0 var(--cm-signal-edge)}
.ps{left:54cqw;top:13.5cqw;width:4.6cqw;height:16.5cqw;border-radius:1.4cqw 1.4cqw .5cqw .5cqw;background:linear-gradient(90deg,var(--cm-key) 0 30%,var(--cm-graphite) 30% 70%,var(--cm-key) 70%);box-shadow:0 0 0 .15cqw #BDB6AA}
.xb{left:53.4cqw;top:15.5cqw;width:6.4cqw;height:14.5cqw;border-radius:.5cqw;background:radial-gradient(circle at 50% 14%,#45454d 0 1.5cqw,transparent 1.6cqw),var(--cm-graphite)}
.lap{left:72cqw;top:14cqw;width:20cqw;height:13cqw;background:var(--cm-graphite);border-radius:.8cqw}
.base{left:70cqw;top:27.2cqw;width:24cqw;height:1.4cqw;border-radius:.4cqw;background:var(--cm-track)}
.desk{left:67cqw;top:28.6cqw;width:30cqw;height:1.6cqw;border-radius:.4cqw;background:var(--cm-edge)}
.kb{position:absolute;top:40cqw;width:22cqw;height:8.4cqw;background:var(--cm-key);border-radius:1cqw;box-shadow:0 .5cqw 0 var(--cm-edge);padding:.9cqw;display:grid;grid-template-columns:repeat(11,1fr);gap:.4cqw;transition:left var(--cm-t-slide) var(--cm-ease-slide)}
.kk{background:var(--cm-keycap-idle);border-radius:.3cqw}
.kk.d{background:var(--cm-graphite)}
.ms{position:absolute;top:41cqw;width:3.6cqw;height:6.2cqw;border-radius:1.8cqw;background:linear-gradient(var(--cm-graphite),var(--cm-graphite)) center .9cqw/.4cqw 1.2cqw no-repeat,var(--cm-signal);box-shadow:0 .5cqw 0 var(--cm-signal-edge);transition:left var(--cm-t-slide) var(--cm-ease-slide)}
.stage[data-mode="tv"] .kb,.stage[data-mode="tv"] .mk{left:17cqw}
.stage[data-mode="pc"] .kb,.stage[data-mode="pc"] .mk{left:67cqw}
.stage[data-mode="tv"] .ms{left:41cqw}
.stage[data-mode="pc"] .ms{left:91cqw}
.mk{transition:left var(--cm-t-slide) var(--cm-ease-slide)}
.hl{outline:.35cqw solid var(--cm-signal);outline-offset:.5cqw}
.trk{position:absolute;height:.3cqw;background:repeating-linear-gradient(90deg,var(--cm-track) 0 .5cqw,transparent .5cqw 1cqw)}
.trk.v{width:.3cqw;height:auto;background:repeating-linear-gradient(180deg,var(--cm-track) 0 .5cqw,transparent .5cqw 1cqw)}
.sig{position:absolute;top:-.4cqw;left:0;width:1.1cqw;height:1.1cqw;border-radius:.25cqw;background:var(--cm-signal);animation:run var(--cm-t-signal) linear infinite}
.sig.b{animation-delay:-.75s}
.sig.rev{animation-name:runback}
.sig.up{top:auto;left:-.4cqw;animation-name:runup}
.sig.pic{border-radius:50%;background:var(--cm-graphite);box-shadow:0 0 0 .15cqw var(--cm-key)}
@keyframes run{from{left:0}to{left:calc(100% - 1.1cqw)}}
@keyframes runback{from{left:calc(100% - 1.1cqw)}to{left:0}}
@keyframes runup{from{top:calc(100% - 1.1cqw)}to{top:0}}

/* scene state: driven by data-mode (tv|pc), data-con (ps|xb), data-step (0|1|2) on .stage */
.stage[data-con="ps"] .xb,.stage[data-con="xb"] .ps{display:none}
.stage[data-mode="tv"] .only-pc,.stage[data-mode="pc"] .only-tv{display:none}
.stage[data-step="0"] .kb{outline:.35cqw solid var(--cm-signal);outline-offset:.5cqw}
.stage[data-step="1"] .lap{outline:.35cqw solid var(--cm-signal);outline-offset:.5cqw}
.stage[data-step="2"] .ps,.stage[data-step="2"] .xb{outline:.35cqw solid var(--cm-signal);outline-offset:.5cqw}
.stage[data-step="2"][data-mode="tv"] .tele{outline:.35cqw solid var(--cm-signal);outline-offset:.5cqw}
.stage[data-step="2"][data-mode="pc"] .lap{outline:.35cqw solid var(--cm-signal);outline-offset:.5cqw}
@container (max-width:520px){
  .lab{font-size:8px;line-height:1;letter-spacing:.02em}
  .lab.net{display:none}
  .lab.strm{left:60cqw;letter-spacing:0}
}

/* steps + mode text */
.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:28px;align-items:start}
.steps{display:grid;gap:2px;list-style:none;margin:0;padding:0}
.step{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;width:100%;min-height:64px;text-align:left;font:inherit;color:var(--cm-muted-dark);background:transparent;border:0;padding:10px 0;cursor:pointer}
.step[aria-current="step"]{color:var(--cm-card);font-weight:700}
.step .key{font-size:44px}
.modetext{display:grid;gap:12px;justify-items:start}
.modetext h3{font-size:clamp(22px,2.6vw,32px)}
.pill{font:inherit;font-size:15px;min-height:44px;color:var(--cm-card);background:transparent;border:1.5px solid #8A857D;border-radius:var(--cm-r-pill);padding:8px 18px;cursor:pointer}
.pill:hover{border-color:var(--cm-card)}

/* requirements, status, price, faq */
.stack-40{display:grid;gap:40px}
.intro{display:grid;gap:14px;max-width:36em}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:28px}
.col{display:grid;gap:14px;align-content:start}
.col .key{font-size:72px}
.col b{font-size:21px}
.rowl{display:grid;grid-template-columns:minmax(110px,180px) minmax(0,1fr) auto;gap:20px;align-items:center;padding:20px 0;border-top:2px solid var(--cm-edge)}
.rowl b{font-size:21px}
.tag{display:inline-flex;align-items:center;gap:8px;border:1.5px solid currentColor;border-radius:var(--cm-r-pill);padding:4px 12px;white-space:nowrap}
.pricegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:40px;align-items:center}
.price{font-size:clamp(56px,8.4vw,112px)}
.price small{font-size:.3em}
.faqgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:40px}
.faq{border-top:2px solid var(--cm-edge);padding:0}
.faq summary{cursor:pointer;font-weight:700;font-size:19px;padding:18px 0;min-height:44px}
.faq .a{padding:0 0 18px}

/* waitlist + footer */
.card{background:var(--cm-key);border-radius:var(--cm-r-card);box-shadow:0 8px 0 var(--cm-edge);padding:clamp(28px,5vw,64px);display:grid;gap:24px}
.wlform{display:grid;gap:14px;max-width:640px}
.wlrow{display:flex;flex-wrap:wrap;gap:14px}
.field{font:inherit;min-height:52px;padding:14px 16px;border-radius:var(--cm-r-field);border:2px solid var(--cm-graphite);background:var(--cm-key);color:var(--cm-graphite);min-width:0;flex:1 1 220px}
.check{display:flex;gap:12px;align-items:center;min-height:44px;font-size:15px;color:var(--cm-muted)}
.check input{width:24px;height:24px;flex:none;margin:0;accent-color:var(--cm-signal)}
.protobadge{display:inline-flex;width:fit-content;border:1.5px dashed var(--cm-graphite);border-radius:var(--cm-r-pill);padding:4px 12px}
.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding-top:40px}
.foot-row p{max-width:40em;font-size:14.5px}
.wl{padding-bottom:96px}

@media (max-width:860px){
  .links a:not(.btn){display:none}
  .hero{grid-template-columns:1fr}
  .cluster{order:-1;font-size:clamp(52px,17vw,92px);margin:8px 0 20px}
  .rowl{grid-template-columns:1fr;gap:8px}
  .switches{justify-items:start}
}
@media (max-width:480px){
  .nav{gap:12px}
  .lock{font-size:16px}
  .links a.btn{padding:8px 12px;font-size:14px;margin-left:0}
  .switch.mode{font-size:64px}
}
@media (max-width:360px){
  .links{display:none}
}
@media (prefers-reduced-motion:reduce){
  .tap{animation:none}
  .sig{animation:none;left:calc(50% - .55cqw)}
  .sig.up{left:-.4cqw;top:calc(50% - .55cqw)}
  .kb,.ms,.mk{transition:none}
  .btn,.key{transition:none}
}