#gpjoin{
  --j-ink:#0b0c0e; --j-line:#33363b;
  --j-grey:#8b9098; --j-bone:#e9e4da; --j-gold:#d9b45f;

  background:var(--j-ink); color:var(--j-bone);
  font:16px/1.55 "DejaVu Sans Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  -webkit-font-smoothing:antialiased;
  color-scheme:dark;              /* so the native select dropdown is dark too */
  padding:12vh 6vw;
  scroll-margin-top:2rem;         /* the SUBMIT YOUR INTEREST links land here */
}
#gpjoin *{box-sizing:border-box}
/* reset what a host theme is likely to style */
#gpjoin p,#gpjoin h2,#gpjoin h3,#gpjoin label{margin:0; padding:0; font-family:inherit;
                                              text-transform:none; font-style:normal}
/* option needs saying separately, some browsers will not inherit into it */
#gpjoin input,#gpjoin select,#gpjoin option,#gpjoin button{
  font-family:inherit; font-size:inherit; text-transform:none; border-radius:0}
#gpjoin svg{display:block}

#gpjoin .j-wrap{max-width:64rem; margin:0 auto; display:grid; gap:clamp(2.5rem,6vw,5rem);
                grid-template-columns:1fr}
@media(min-width:820px){ #gpjoin .j-wrap{grid-template-columns:1.15fr .85fr} }

#gpjoin .j-kicker{color:var(--j-gold); letter-spacing:.4em; font-size:.7rem; margin:0 0 1rem}
#gpjoin h2{font-size:clamp(1.7rem,4.2vw,2.6rem); letter-spacing:.12em; font-weight:700;
           color:var(--j-bone); margin:0 0 1rem}
#gpjoin .j-lede{color:var(--j-grey); max-width:34rem; margin:0 0 2rem}

#gpjoin .j-form{display:grid; gap:.9rem}
#gpjoin .j-row{display:grid; gap:.9rem; grid-template-columns:1fr}
@media(min-width:520px){ #gpjoin .j-row{grid-template-columns:1fr auto} }
#gpjoin label{display:block; color:var(--j-grey); font-size:.68rem;
              letter-spacing:.22em; margin:0 0 .4rem}
#gpjoin input[type=email],#gpjoin select{
  width:100%; background:#111317; color:var(--j-bone);
  border:1px solid var(--j-line); padding:.85rem 1rem; letter-spacing:.04em}
#gpjoin input[type=email]:focus,#gpjoin select:focus{
  outline:none; border-color:var(--j-gold)}
#gpjoin input[type=email]::placeholder{color:#5d626a}
#gpjoin .j-send{background:none; border:1px solid var(--j-gold); color:var(--j-gold);
                padding:.85rem 2.2rem; letter-spacing:.24em; font-size:.75rem; cursor:pointer}
#gpjoin .j-send:hover:enabled{background:var(--j-gold); color:var(--j-ink)}
#gpjoin .j-send:disabled{opacity:.5; cursor:default}
#gpjoin .j-note{color:#5d626a; font-size:.72rem; letter-spacing:.06em}
#gpjoin .j-status{min-height:1.4em; font-size:.8rem; letter-spacing:.06em; margin:.2rem 0 0}
#gpjoin .j-status.ok{color:var(--j-gold)}
#gpjoin .j-status.bad{color:#d98f5f}
/* the honeypot: a real field, hidden from people, filled in only by bots */
#gpjoin .j-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

#gpjoin .j-card{border:1px solid var(--j-line); padding:clamp(1.6rem,3vw,2.2rem);
                display:flex; flex-direction:column; gap:1.1rem; align-self:start}
#gpjoin .j-card .j-mark{width:52px}
#gpjoin .j-card h3{margin:0; font-size:1.1rem; letter-spacing:.18em; font-weight:700;
                   color:var(--j-bone); text-transform:none}
#gpjoin .j-card p{color:var(--j-grey); font-size:.9rem}
/* Discord blurple, with the mark in white on it, which is what Discord's own brand
   guidance asks for. It is the one thing on the page allowed to be off palette: people
   recognise this button by its colour before they read it */
#gpjoin .j-disc{display:inline-flex; align-items:center; justify-content:center; gap:.7rem;
                text-decoration:none; background:#5865f2; border:1px solid #5865f2;
                color:#fff; font-weight:700;
                padding:.85rem 1.4rem; letter-spacing:.2em; font-size:.72rem;
                transition:background .15s ease, border-color .15s ease}
#gpjoin .j-disc:hover{background:#4752c4; border-color:#4752c4; color:#fff}
/* the mark in currentColor, so it stays white with the label */
#gpjoin .j-disc svg{width:1.4em; height:auto; flex:none; fill:currentColor}