*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:#fff;color:#000}
body{font-family:"Roboto Mono",ui-monospace,Menlo,monospace;-webkit-font-smoothing:antialiased;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
img{display:block;max-width:100%}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:clamp(18px,3vw,38px) clamp(20px,10.5vw,155px) 0}
.logo{grid-column:2;display:block}
.logo img{width:clamp(120px,11vw,160px);height:auto;aspect-ratio:228/115}
.store{grid-column:3;justify-self:end;text-decoration:none;font-size:clamp(14px,1.25vw,18px);letter-spacing:.02em;font-weight:400;padding:6px 0;border-bottom:1px solid transparent;transition:border-color .2s}
.store:hover,.store:focus-visible{border-color:#000}

.stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:clamp(16px,4vh,64px) 20px clamp(12px,2vh,22px);text-align:center}
.hero{width:auto;height:clamp(240px,52vh,580px);max-width:min(90vw,530px);object-fit:contain;aspect-ratio:1080/1223}

.countdown{--timer-number:clamp(1.75rem,2.2vw,2rem);--timer-label:.75rem;--timer-gap:.75rem;margin-top:12px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--timer-gap);width:min(320px,100%);font-variant-numeric:tabular-nums}
.time-unit{display:flex;flex-direction:column;align-items:center;gap:.25rem}
.time-value{font-family:"Manrope",sans-serif;font-size:var(--timer-number);font-weight:400;line-height:1.1;letter-spacing:-.035em}
.time-label{font-size:var(--timer-label);font-weight:400;line-height:1.2;letter-spacing:.025em;color:#666}
.signup-title{margin:12px 0 0;font-size:clamp(12px,.95vw,14px);font-weight:400;letter-spacing:.04em}
.signup-sub{margin:10px 0 0;font-size:clamp(10px,.72vw,11px);letter-spacing:.01em}

.signup{margin-top:18px;display:flex;gap:4px;align-items:stretch}
.signup input{font:inherit;font-size:10px;letter-spacing:.04em;height:24px;width:120px;padding:0 9px;border:1px solid #e3e3e3;background:#fff;color:#000;border-radius:0;outline:none;transition:border-color .2s}
.signup input::placeholder{color:#b5b5b5}
.signup input:focus{border-color:#000}
.signup input[aria-invalid="true"]{border-color:#d10000}
.signup button{font:inherit;font-size:9px;letter-spacing:.06em;height:24px;padding:0 12px;border:0;background:#000;color:#fff;cursor:pointer;border-radius:0;transition:opacity .2s}
.signup button:hover{opacity:.82}
.signup button:disabled{opacity:.5;cursor:wait}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.msg{min-height:14px;margin:8px 0 0;font-size:10px;letter-spacing:.02em}
.msg.err{color:#d10000}

.ig{margin-top:6px;display:inline-flex;padding:4px;transition:transform .2s}
.ig:hover{transform:scale(1.1)}

@media (max-width:640px){
  .top{grid-template-columns:1fr auto;padding:20px 20px 0}
  .top-spacer{display:none}
  .logo{grid-column:1;justify-self:start}
  .logo img{width:118px}
  .store{grid-column:2;font-size:14px}
  .stage{justify-content:center;padding-top:28px}
  .hero{height:auto;width:min(78vw,360px)}
  .countdown{--timer-number:2rem;margin-top:18px;width:min(320px,100%)}
  .signup-title{font-size:14px}
  .signup-sub{font-size:11px;max-width:280px}
  .signup{flex-direction:column;width:100%;max-width:300px;gap:6px}
  .signup input,.signup button{width:100%;height:42px;font-size:16px}
  .signup button{font-size:13px}
  .msg{font-size:12px}
  .ig{margin-top:10px}
}