/* Homepage layout only. Fonts, colours, frames, buttons and art come from
   /brand/dist/brand.css and the <sq-*> components; never redefine them here.
   Text sizes come from the sq-type-* classes. Any font-size override must be a
   multiple of 6px (half an art-pixel step of the 12px em) — `npm run brand:check` enforces it. */
*{box-sizing:border-box}
html,body{width:100%;height:100%;min-width:0}
body{margin:0;display:grid;place-items:center;background:var(--sq-paper);color:var(--sq-ink)}
input,button{margin:0;border-radius:0;-webkit-appearance:none;appearance:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Reference composition: a fixed 1090 × 844 artboard (360 × 900 on mobile), scaled as a whole
   by fitPage() in landing.js so the complete phone and form are always visible. */
.viewport{width:100%;height:100svh;position:relative;overflow:clip}
.hero{position:absolute;left:50%;top:50%;width:1090px;height:844px;transform:translate(-50%,-50%) scale(var(--page-scale,1));transform-origin:center}
h1{margin:0}

.intro{position:absolute;left:483px;top:220px;width:570px;text-align:center}
.wordmark{display:block;width:570px;height:90px}
.byline{margin:2px 7px 0 auto;width:230px;height:48px}
.byline img{display:block;width:100%;height:100%}
.tagline{margin:26px 0 58px;line-height:30px}

/* StepQuest Body sits 9 px above the baseline and 3 px below, so a centred line box puts the caps
   1.5 px (.125em) high. .25em of top padding centres the caps in the input and button, as in the reference. */
.signup-fields{display:grid;grid-template-columns:352px 200px;gap:10px;justify-content:center}
.email-box{display:block;height:62px;cursor:text}
.email-box input{display:block;width:100%;height:100%;border:0;background:transparent;padding:.25em 12px 0;color:var(--sq-ink);outline:none}
.email-box input::placeholder{color:var(--sq-muted);opacity:1}
.email-box:focus-within{outline:2px dashed var(--sq-muted);outline-offset:4px}
.join{height:62px;width:100%;padding:.25em 0 0;color:var(--sq-paper);background:transparent;cursor:pointer}
.join:hover{opacity:.86}
.join:active{transform:translateY(2px)}
.join:disabled{opacity:.6;cursor:wait}
.join:focus-visible{outline:2px dashed var(--sq-ink);outline-offset:4px}
.beta-note{margin:22px 0 0}
/* Status and the Cloudflare Turnstile check float below the form, so they never push the layout
   and keep clear of the note. The check only appears when Cloudflare needs a click, then goes away. */
.form-feedback{position:absolute;top:100%;left:0;right:0;z-index:1;margin-top:18px;display:grid;justify-items:center;gap:18px}
#form-status{margin:0}
#form-status:empty{display:none}

/* Device mock-up. The phone shell is presentation chrome for the website, not a brand asset. */
.phone-stage{position:absolute;left:100px;top:85px;width:340px}
.phone{width:340px;height:673px;position:relative;border-radius:61px;background:linear-gradient(105deg,#080808,#414141 13%,#080808 19%,#000 75%,#555 94%,#111);padding:12px;border:2px solid #161616;box-shadow:inset 0 0 0 2px #747474,inset 0 0 0 5px #111,0 2px 2px #0003}
.phone:before,.phone:after{content:"";position:absolute;background:#252525;width:3px;border-radius:2px}
.phone:before{height:92px;left:-5px;top:26%;box-shadow:0 104px 0 #252525}
.phone:after{height:95px;right:-5px;top:32%}
.phone-screen{height:100%;border-radius:47px;background:var(--sq-paper);position:relative;overflow:hidden}
.statusbar{position:absolute;top:17px;left:30px;right:24px;display:flex;align-items:center;justify-content:space-between;font:700 14px/1 -apple-system,BlinkMacSystemFont,Arial,sans-serif;z-index:2}
.status-icons{display:flex;gap:5px;align-items:center}
.status-icons svg{width:16px;height:13px}
.battery{height:10px;width:20px;border:1px solid #555;border-radius:3px;padding:1px;position:relative}
.battery:before{content:"";display:block;height:100%;background:#111;border-radius:1px}
.battery:after{content:"";position:absolute;right:-3px;top:2px;width:2px;height:4px;background:#555}
.island{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:33%;height:30px;background:#000;border-radius:24px}
.island:after{content:"";position:absolute;right:13px;top:11px;width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#25588a,#071322 45%,#000)}

/* App screen content: brand components only. */
.game-screen{position:absolute;inset:21.5% 0 8%;display:flex;flex-direction:column;align-items:center}
.meters{display:grid;gap:30px;justify-items:center}
.character-slot{position:relative;margin-top:44px;line-height:0}
.character-slot [data-quest-light]{position:absolute;left:0;top:0;pointer-events:none}
.character-slot [data-quest-light][hidden]{display:none}
.quest-scene{margin:10px 0 0;text-align:center;color:var(--sq-ink)}

.legal{position:absolute;bottom:6px;left:0;right:0;margin:0;text-align:center;color:var(--sq-muted)}
.legal a{color:inherit}

@media(max-width:760px){
  .hero{width:360px;height:900px}
  .intro{left:26px;top:24px;width:308px}
  .wordmark{width:304px;height:48px;margin:0 auto}
  .byline{margin:4px 2px 0 auto;width:138px;height:29px}
  .tagline{font-size:18px;line-height:21px;margin:22px 0 26px}
  .tagline .mobile-line{display:block}
  .tagline br{display:none}
  .signup-fields{grid-template-columns:1fr;gap:8px}
  .email-box,.join{--sq-scale:1.5;height:48px}
  .email-box input,.join{font-size:18px;line-height:18px}
  .beta-note{margin:16px 12px 0;line-height:21px}
  /* No room above the phone on mobile, so a status message takes the note's two lines while it shows. */
  .form-feedback{top:calc(100% - 42px);margin-top:0}
  #form-status{margin:0 12px;line-height:21px}
  .intro:has(#form-status:not(:empty)) .beta-note{visibility:hidden}
  .phone-stage{left:75px;top:422px;width:210px;transform:scale(.6176470588);transform-origin:top left}
  .legal{bottom:12px}
}