/* ==========================================================================
   Season One — site styles.
   Visual language derived from the original Season One badge: purple ground,
   hard edges, no blur, a six-colour edge strip, monospace as the utility voice.
   Two pages. Content spans the full width rather than hugging the left margin.
   ========================================================================== */

:root{
  --void:#0B0512;
  --void-2:#150A24;
  --grape:#5C2E90;
  --grape-lo:#3B1A66;
  --grape-hi:#7B45B8;
  --ice:#BEDEF7;
  --ice-dim:#8FB6D6;
  --gum:#F0A9E0;
  --acid:#3FD647;
  --ember:#F5A623;
  --siren:#E8342C;
  --cobalt:#2B4FE0;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --gutter:clamp(24px,4.5vw,72px);
}

*{box-sizing:border-box}

html,body{height:100%}
body{
  margin:0;
  background:var(--void);
  color:var(--ice);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  display:flex;
  flex-direction:column;
  min-height:100%;
}

/* Wide container — the page should reach across the screen, not sit in a
   column on the left. Capped so line length stays sane on very large displays. */
.wrap{width:100%;max-width:1560px;margin:0 auto;padding:0 var(--gutter)}

/* -- the six-colour edge strip, taken off the badge ------------------------ */
.strip{display:flex;height:7px;width:100%;flex:none}
.strip i{flex:1;display:block}
.strip .s1{background:var(--siren)}
.strip .s2{background:var(--ember)}
.strip .s3{background:var(--acid)}
.strip .s4{background:var(--cobalt)}
.strip .s5{background:var(--gum)}
.strip .s6{background:var(--grape-hi)}

/* -- nav: the logo appears here and nowhere else --------------------------- */
nav.top{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:26px 0;flex:none;
}
nav.top .logo{display:block;line-height:0}
nav.top .logo img{
  display:block;height:58px;width:auto;
  image-rendering:pixelated;image-rendering:-moz-crisp-edges;
}
nav.top .links{
  display:flex;gap:32px;font-family:var(--mono);font-size:13px;
  letter-spacing:.13em;text-transform:uppercase;
}
nav.top a{color:var(--ice-dim);text-decoration:none;padding-bottom:3px;border-bottom:2px solid transparent}
nav.top a:hover{color:var(--gum);border-bottom-color:var(--gum)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--acid);outline-offset:3px}
@media(max-width:560px){nav.top .logo img{height:42px}}

/* -- page body ------------------------------------------------------------- */
main{flex:1 0 auto;position:relative}
main::before{
  content:"";position:absolute;inset:-30% -10% 15% -10%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 32% 30%,rgba(92,46,144,.42) 0%,transparent 64%);
}

/* Hero spans the full width: statement on the left, signup on the right. */
.hero{
  padding:clamp(40px,6vw,88px) 0 clamp(72px,9vw,132px);
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(40px,6vw,96px);
  align-items:start;
}
h1{
  font-weight:800;font-size:clamp(38px,5.4vw,72px);line-height:1.03;
  letter-spacing:-.032em;margin:0;color:#fff;text-wrap:balance;
}
h1 em{font-style:normal;color:var(--gum)}
.lede{margin:32px 0 0;font-size:clamp(17px,1.35vw,21px);line-height:1.6;color:var(--ice);max-width:52ch}
.lede b{color:#fff;font-weight:700}

.app-line{
  margin-top:36px;display:flex;flex-wrap:wrap;gap:10px;
  font-family:var(--mono);font-size:12px;letter-spacing:.11em;text-transform:uppercase;
}
.app-line span{border:1.5px solid rgba(190,222,247,.32);color:var(--ice-dim);padding:7px 13px}

/* -- beta form ------------------------------------------------------------- */
.beta{
  border:3px solid #000;background:var(--grape-lo);
  box-shadow:11px 11px 0 rgba(0,0,0,.6);
  position:sticky;top:32px;
}
.beta-head{
  padding:18px 26px;background:var(--grape);border-bottom:3px solid #000;
  font-family:var(--mono);font-size:13px;letter-spacing:.17em;text-transform:uppercase;color:#fff;
}
.beta-body{padding:26px}
.beta-row{display:flex;gap:11px;flex-wrap:wrap}
.beta-row input[type=email]{
  flex:1 1 14rem;min-width:0;font-family:var(--sans);font-size:16px;
  padding:14px 15px;background:var(--void);color:var(--ice);
  border:2px solid rgba(190,222,247,.35);
}
.beta-row input[type=email]::placeholder{color:#6C8CA8}
.beta-row input[type=email]:focus{border-color:var(--gum);outline:none}
.btn{
  font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;padding:14px 24px;border:2px solid #000;cursor:pointer;
  background:var(--acid);color:#06200A;box-shadow:4px 4px 0 #000;
  text-decoration:none;display:inline-block;
}
.btn:hover:not(:disabled){transform:translate(2px,2px);box-shadow:2px 2px 0 #000}
.btn:disabled{opacity:.55;cursor:not-allowed}
.consent{
  display:flex;gap:11px;align-items:flex-start;margin-top:18px;
  font-size:13.5px;line-height:1.55;color:var(--ice-dim);
}
.consent input{margin-top:3px;flex:none;width:16px;height:16px;accent-color:var(--acid)}
.consent a{color:var(--gum)}
.beta-note{margin:16px 0 0;font-family:var(--mono);font-size:11.5px;color:var(--ice-dim)}
.form-success,.form-error{display:none;font-size:15px;padding:16px 0 0}
.form-success{color:var(--acid)}
.form-error{color:var(--gum)}

@media(max-width:900px){
  .hero{grid-template-columns:1fr;gap:48px}
  .beta{position:static;max-width:38rem}
}

/* -- about page ------------------------------------------------------------ */
.page{padding:clamp(28px,4vw,56px) 0 clamp(72px,9vw,120px)}
.page h1{font-size:clamp(34px,4.6vw,58px);max-width:16ch}
.page .page-lede{
  margin:30px 0 0;font-size:clamp(18px,1.6vw,24px);line-height:1.5;
  color:#fff;max-width:34ch;font-weight:600;
}
/* Body sections run in two columns on wide screens so the page fills the width. */
.page-body{
  margin-top:clamp(48px,6vw,84px);
  columns:2;column-gap:clamp(40px,5vw,88px);
}
.page-body section{break-inside:avoid-column;margin:0 0 40px}
.page h2{
  font-family:var(--mono);font-size:12px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--gum);margin:0 0 14px;font-weight:700;
}
.page p{font-size:16.5px;line-height:1.72;color:var(--ice);margin:0 0 16px;max-width:62ch}
.page p:last-child{margin-bottom:0}
.page p b{color:#fff}
.page a{color:var(--gum)}
@media(max-width:880px){
  .page-body{columns:1}
  .page .page-lede{max-width:46ch}
}

/* -- footer ---------------------------------------------------------------- */
footer{flex:none;background:var(--void-2);padding:clamp(32px,4vw,52px) 0;margin-top:auto}
.foot-in{
  display:grid;grid-template-columns:1fr auto;gap:26px 48px;align-items:start;
}
.foot-links{display:flex;flex-wrap:wrap;gap:30px;font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase}
.foot-links a{color:var(--ice-dim);text-decoration:none}
.foot-links a:hover{color:var(--gum)}
.foot-legal{
  grid-column:1/-1;font-family:var(--mono);font-size:11.5px;color:#6C8CA8;
  line-height:1.9;padding-top:22px;border-top:1px solid rgba(190,222,247,.14);max-width:110ch;
}
.foot-mark{font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:#6C8CA8}
@media(max-width:640px){.foot-in{grid-template-columns:1fr}}

@media (prefers-reduced-motion:no-preference){
  .btn{transition:transform .1s steps(2),box-shadow .1s steps(2)}
  nav.top a,.foot-links a{transition:color .13s,border-color .13s}
}