body{margin:0;background:#050A18;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}a:hover{opacity:.85}
input::placeholder{color:inherit;opacity:.45}
html{scroll-behavior:smooth}
@keyframes siBlink{50%{opacity:0}}
@keyframes siScan{0%{top:6%}50%{top:90%}100%{top:6%}}
@keyframes siPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(3.2);opacity:0}}
@keyframes siAur1{0%{transform:translate(-8%,0) rotate(-8deg) scaleX(1)}50%{transform:translate(7%,5%) rotate(-2deg) scaleX(1.18)}100%{transform:translate(-2%,-4%) rotate(-13deg) scaleX(.94)}}
@keyframes siAur2{0%{transform:translate(6%,-2%) rotate(10deg) scale(1)}50%{transform:translate(-8%,6%) rotate(4deg) scale(1.12)}100%{transform:translate(2%,0) rotate(14deg) scale(.96)}}
@keyframes siAur3{0%{transform:translate(-10%,3%) scale(1);opacity:.7}50%{transform:translate(12%,-4%) scale(1.2);opacity:1}100%{transform:translate(0,6%) scale(.9);opacity:.8}}
@keyframes siAurPulse{0%,100%{opacity:.5;transform:scaleX(1)}50%{opacity:1;transform:scaleX(1.25)}}
/* ---- Added for production (not in the prototype) ---- */
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hp{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;padding:0;opacity:0}
x-list{display:contents}
:focus-visible{outline:2px solid #8AA0FF;outline-offset:3px}
form input:focus-visible{outline:none}
form:focus-within{border-color:rgba(138,160,255,.6)!important}
button:disabled{opacity:.7;cursor:progress!important}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* The nav link pill only fits from ~1000px; below that the CTA and the page itself carry navigation */
@media (max-width:1000px){
  nav[aria-label="Main"] > div[style*="max-height:46px"]{display:none!important}
}

/* ---- Phones and small tablets (the prototype was verified down to ~800px; this is the mobile pass) ----
   The page keeps the design's inline styles; these overrides match them by attribute. */
@media (max-width:760px){
  /* Section gutters */
  [style*="padding:120px 56px"]{padding:72px 20px!important}
  [style*="padding:110px 56px 120px"]{padding:72px 20px!important}
  [style*="padding:150px 56px 130px"]{padding:96px 20px 88px!important}
  [style*="padding:30px 56px"]{padding:24px 20px!important}
  [style*="padding:0 56px"]{padding:0 20px!important}

  /* Hero */
  [style*="height:1010px"]{height:auto!important;min-height:100svh;padding-bottom:72px}
  [style*="height:1010px"] [style*="max-width:1040px"]{width:100%}
  nav[aria-label="Main"]{height:88px!important}
  nav[aria-label="Main"] [style*="font-size:38px"]{font-size:27px!important}
  nav[aria-label="Main"] [style*="letter-spacing:.12em"]{font-size:8.5px!important;letter-spacing:.1em!important}
  nav[aria-label="Main"] [style*="font-size:13px;letter-spacing:.14em"]{font-size:10px!important;padding:3px 6px!important}
  nav[aria-label="Main"] > a[href="#join"]{height:36px!important;padding:0 14px!important;font-size:12.5px!important}
  h1[style*="font-size:80px"]{font-size:clamp(40px,11.5vw,80px)!important}
  [style*="font-size:28px;line-height:1.3"]{font-size:20px!important}
  [style*="font-size:18px;line-height:1.5"]{font-size:16px!important}
  [style*="letter-spacing:.32em"]{font-size:20px!important;letter-spacing:.24em!important}
  [style*="letter-spacing:.32em"] > [style*="margin-right:-.32em"]{margin-right:-.24em!important}

  /* Email forms and their confirmations */
  form[data-form],[data-if^="joined"]{width:100%!important;max-width:540px;box-sizing:border-box}
  [data-if^="joined"]{height:auto!important;min-height:58px;padding:14px 20px;border-radius:24px!important;text-align:left;overflow-wrap:anywhere}
  form[data-form] input[type="email"]{padding:0 14px!important;font-size:16px!important}
  form[data-form] button[type="submit"]{padding:0 16px!important;font-size:13.5px!important}

  /* Bento: wide tiles fall back to one column */
  [style*="grid-column:span 2"]{grid-column:auto!important}
  [style*="grid-row:span 2"]{grid-row:auto!important}

  /* Side-by-side mockups stack */
  [style*="grid-template-columns:minmax(0,1.5fr) minmax(0,.75fr)"],
  [style*="grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)"],
  [style*="grid-template-columns:minmax(0,190px) minmax(0,1fr)"]{grid-template-columns:minmax(0,1fr)!important}
  [style*="height:700px"][style*="perspective:1400px"]{height:640px!important;overflow:hidden}
  [style*="grid-template-columns:104px minmax(0,1fr) auto"]{grid-template-columns:86px minmax(0,1fr) auto!important;padding-left:14px!important;padding-right:14px!important}
  [style*="grid-template-columns:minmax(110px,.8fr) minmax(0,1fr) minmax(0,1fr)"]{grid-template-columns:minmax(84px,.7fr) minmax(0,1fr) minmax(0,1fr)!important;font-size:13px}

  /* Big type */
  [style*="font-size:56px;line-height:1.05"]{font-size:clamp(34px,9vw,56px)!important}
  [style*="font-size:72px"]{font-size:clamp(40px,11vw,72px)!important}
}
@media (max-width:400px){
  :has(> [style*="padding:11px 18px;border-radius:999px;background:#4566FF"]){flex-wrap:wrap!important}
}
@media (max-width:359px){
  nav[aria-label="Main"] > a[href="#join"]{display:none!important}
}