/* Below the Hype: tokens and type match brand-kit/web/brand.css. */
@font-face{font-family:"Bricolage Grotesque";src:url("fonts/bricolage.woff2") format("woff2");font-weight:200 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Space Mono";src:url("fonts/spacemono-bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("fonts/instrument.woff2") format("woff2");font-weight:400 700;font-stretch:75% 100%;font-display:swap}
:root{
  --sky:#A9DDFF; --ink:#15121A; --pink:#FF4FA3; --navy:#1B2A6B; --paper:#FFFFFF;
  --display:"Bricolage Grotesque",sans-serif; --mono:"Space Mono",monospace; --body:"Instrument Sans",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--sky);-webkit-text-size-adjust:100%}
body{min-height:100vh;background:var(--sky);color:var(--ink);font:500 1.125rem/1.5 var(--body)}
.page{width:100%;max-width:46rem;margin:0 auto;padding:clamp(2rem,6vw,4.5rem) 1.25rem 2.5rem}
.logo{display:block;width:min(100%,24rem);height:auto;transform:translateX(-3.9%)} /* cancels the SVG's inset so the bar lines up with the text */
h1{margin-top:clamp(2.5rem,7vw,4rem);font:800 clamp(2.75rem,10vw,5.25rem)/.95 var(--display);letter-spacing:-.04em}
.intro{margin-top:1.5rem;max-width:36rem;font-size:clamp(1.15rem,3vw,1.4rem);line-height:1.4}

.device{margin-top:clamp(2.5rem,7vw,4rem)}
.label{display:block;font:700 .85rem/1.2 var(--mono);text-transform:uppercase;letter-spacing:.06em}
.claim{display:inline-block;padding:.75rem 1.1rem .85rem;background:var(--pink);border:.2rem solid var(--ink);border-radius:.75rem;box-shadow:.25rem .3rem 0 var(--ink);transform:rotate(-1.5deg);transform-origin:left bottom}
.claim p,.reality p{font:800 clamp(1.3rem,4vw,1.75rem)/1.1 var(--display);letter-spacing:-.02em}
.claim p{margin-top:.25rem}
.bar{height:.55rem;margin:1.1rem 0;background:var(--ink);border:0}
.reality p{margin-top:.35rem}

.soon{margin-top:clamp(2.5rem,7vw,4rem);font:700 1rem/1.3 var(--mono)}
.links{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1rem;list-style:none}
.links a{display:block;padding:.7rem 1.05rem .75rem;border-radius:.5rem;background:var(--ink);color:var(--sky);font:700 1rem/1.2 var(--mono);text-decoration:none;overflow-wrap:anywhere}
.links a:hover{background:var(--navy);color:var(--paper)}
a:focus-visible{outline:.2rem solid var(--navy);outline-offset:.2rem}