:root{
  --void:#07080B;        /* deep canvas       */
  --void-2:#0E1018;      /* raised dark       */
  --paper:#FAF9F6;       /* light canvas      */
  --paper-2:#F1EFE9;     /* light raised      */
  --ink:#0A0A0A;
  --muted:#6B6656;       /* warm grey on light */
  --muted-d:#8A8FA3;     /* cool grey on dark  */
  --line:#E2DDD0;
  --line-d:rgba(255,255,255,.10);
  --blue:#0043FF;
  --blue-lift:#4B78FF;
  --blue-soft:#6A91FF;
  --blue-pale:#E6EEFF;
  --sand:#EFE7D3;
  --sans:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --maxw:1200px;
  --r:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
section,[id]{scroll-margin-top:110px}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--blue);color:#fff}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;position:relative}
@media(max-width:720px){.wrap{padding:0 18px}}
.center{text-align:center}
.center .lede{margin-left:auto;margin-right:auto}

/* ---------------- type ---------------- */
.mono{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:500}
.eyebrow{display:inline-flex;align-items:center;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--blue);font-weight:500}
.dark .eyebrow{color:var(--blue-lift)}

h1,h2,h3{font-weight:800;letter-spacing:-.038em;line-height:1.0}
h1{font-size:clamp(40px,6.3vw,80px)}
h2{font-size:clamp(32px,4.6vw,60px)}
h3{font-size:clamp(19px,1.6vw,22px);letter-spacing:-.03em;line-height:1.2}
.hl{color:var(--blue)}
.dark .hl{color:var(--blue-lift)}

.lede{font-size:clamp(16px,1.3vw,18.5px);line-height:1.58;letter-spacing:-.011em;
  color:var(--muted);font-weight:400;max-width:60ch}
.dark .lede{color:var(--muted-d)}
p.body{font-size:14.5px;line-height:1.62;letter-spacing:-.008em;color:var(--muted);font-weight:400}
.dark p.body{color:var(--muted-d)}

.dark{background:var(--void);color:var(--paper)}
.dark h1,.dark h2,.dark h3{color:var(--paper)}

/* ---------------- nav ---------------- */
#progress{position:fixed;top:0;left:0;right:0;height:2px;background:var(--blue-lift);z-index:100;
  transform:scaleX(0);transform-origin:0 50%;box-shadow:0 0 14px rgba(75,120,255,.8)}
header{position:fixed;top:14px;left:0;right:0;z-index:90;display:flex;justify-content:center;
  padding:0 16px;pointer-events:none}
.navpill{pointer-events:auto;display:flex;align-items:center;gap:8px;
  background:rgba(8,9,14,.88);backdrop-filter:blur(18px) saturate(1.6);
  border:1px solid rgba(255,255,255,.10);border-radius:999px;padding:7px 7px 7px 16px;
  box-shadow:0 10px 34px -18px rgba(0,0,0,.7);max-width:100%;
  transition:background .35s,border-color .35s,padding .4s cubic-bezier(.2,.8,.2,1),
             gap .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.scrolled .navpill{padding:6px 8px 6px 12px;gap:5px;
  box-shadow:0 14px 44px -18px rgba(0,0,0,.85)}
.scrolled .navpill .navlinks a{padding:7px 10px}
.navpill:hover{border-color:rgba(255,255,255,.18)}
.brand{display:flex;align-items:center;gap:9px;flex:none;color:var(--paper);
  transition:gap .4s cubic-bezier(.2,.8,.2,1)}
.brand .mk{width:19px;height:auto}
.brand b{font-size:14.5px;font-weight:800;letter-spacing:-.03em;white-space:nowrap;
  max-width:170px;overflow:hidden;
  transition:max-width .42s cubic-bezier(.2,.8,.2,1),opacity .26s ease}
/* once you leave the top, the wordmark collapses and only the mark stays */
.scrolled .brand{gap:0}
.scrolled .brand b{max-width:0;opacity:0}
.navlinks{display:flex;gap:4px;margin:0 6px}
.navlinks a{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(250,249,246,.62);padding:9px 12px;border-radius:999px;transition:.2s;white-space:nowrap}
.navlinks a:hover{color:var(--paper);background:rgba(255,255,255,.07)}
.lang{display:flex;background:rgba(255,255,255,.07);border-radius:999px;padding:2px;flex:none}
.lang button{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;padding:6px 9px;
  color:rgba(250,249,246,.6);border-radius:999px;transition:.2s;font-weight:500}
.lang button[aria-pressed="true"]{background:var(--paper);color:var(--void)}
@media(max-width:820px){.navlinks{display:none}}
@media(max-width:400px){.brand b{display:none}}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-size:13px;
  font-weight:700;letter-spacing:-.01em;padding:14px 24px;border-radius:999px;white-space:nowrap;
  transform:translateY(0);
  transition:background .25s,color .25s,border-color .25s,box-shadow .25s,
             transform .28s cubic-bezier(.2,.9,.3,1.2)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98);transition-duration:.08s}
@media(prefers-reduced-motion:reduce){.btn,.btn:hover,.btn:active{transform:none}}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 8px 26px -12px rgba(0,67,255,.9)}
.btn-primary:hover{background:var(--blue-lift);box-shadow:0 14px 34px -12px rgba(0,67,255,1)}
.btn-ghost{border:1px solid var(--line);color:var(--ink);background:rgba(255,255,255,.5)}
.btn-ghost:hover{border-color:var(--ink)}
.dark .btn-ghost{border-color:rgba(255,255,255,.18);color:var(--paper);background:rgba(255,255,255,.04)}
.dark .btn-ghost:hover{border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.09)}
.btn-sm{padding:10px 17px;font-size:12px}
.btn .ar{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.btn:hover .ar{transform:translateX(4px)}

.badge{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;padding:8px 16px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.045);
  color:rgba(250,249,246,.86);font-weight:500}
.badge .pulse{width:6px;height:6px;border-radius:50%;background:var(--blue-lift);flex:none;
  box-shadow:0 0 0 0 rgba(75,120,255,.7);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(75,120,255,0)}100%{box-shadow:0 0 0 0 rgba(75,120,255,0)}}
@media(prefers-reduced-motion:reduce){.badge .pulse{animation:none}}

/* ---------------- hero ---------------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:128px 0 78px;overflow:hidden;isolation:isolate}
.hero:has(.ticker){padding-bottom:132px}
/* On a short window the hero would grow past the fold and take the ribbon with
   it, so the padding comes in and, below a point, the scroll hint goes. */
@media(max-height:860px){ .hero{padding-top:108px} .hero:has(.ticker){padding-bottom:114px} }
@media(max-height:780px){ .hero{padding-top:92px}  .hero:has(.ticker){padding-bottom:100px} }
@media(max-height:700px){ .hero{padding-top:80px}  .hero:has(.ticker){padding-bottom:88px}
  .hero .scrollarrow{display:none} }
.hero .grid-bg{position:absolute;inset:0;z-index:-3;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:68px 68px;
  -webkit-mask-image:radial-gradient(ellipse 78% 62% at 50% 42%,#000 12%,transparent 76%);
  mask-image:radial-gradient(ellipse 78% 62% at 50% 42%,#000 12%,transparent 76%)}
.aurora{position:absolute;inset:-20%;z-index:-2;filter:blur(72px);opacity:.62;pointer-events:none}
.aurora i{position:absolute;display:block;border-radius:50%}
.a1{width:56vw;height:56vw;max-width:760px;max-height:760px;left:6%;top:2%;
  background:radial-gradient(circle,rgba(0,67,255,.62),transparent 66%)}
.a2{width:48vw;height:48vw;max-width:660px;max-height:660px;right:2%;top:16%;
  background:radial-gradient(circle,rgba(106,145,255,.42),transparent 66%)}
.a3{width:42vw;height:42vw;max-width:560px;max-height:560px;left:34%;bottom:-6%;
  background:radial-gradient(circle,rgba(230,238,255,.20),transparent 66%)}
.heromark{position:absolute;z-index:-1;top:50%;left:50%;
  transform:translate(-50%,-52%);width:min(620px,88vw);opacity:.11;pointer-events:none}
.heromark img{width:100%;height:auto}

.hero-in::before{content:"";position:absolute;inset:-14% -12%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 62% 58% at 50% 48%,rgba(7,8,11,.82),rgba(7,8,11,0) 72%)}
.hero-in{position:relative;display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:22px;max-width:980px;margin:0 auto;padding:0 24px}
.hero h1{max-width:17ch}
.hero .lede{max-width:56ch}
.hero .cta{display:flex;gap:11px;flex-wrap:wrap;justify-content:center;margin-top:6px}

/* word reveal */
.w{display:inline-block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em;
  vertical-align:bottom}
.w > i{display:inline-block;font-style:normal}
.js .w > i{transform:translateY(112%)}
.js.no-motion .w > i{transform:none}

.scrollarrow{position:relative;margin-top:28px;width:46px;height:46px;display:grid;
  place-items:center;color:var(--muted-d);transition:color .35s,transform .35s}
.scrollarrow .chev{width:24px;height:24px;
  animation:dive 2.6s cubic-bezier(.55,0,.35,1) infinite}
.scrollarrow:hover{color:var(--blue-lift);transform:translateY(3px)}
@keyframes dive{
  0%   {transform:translateY(-7px);opacity:0}
  22%  {opacity:1}
  62%  {transform:translateY(5px);opacity:1}
  100% {transform:translateY(12px);opacity:0}}
@media(prefers-reduced-motion:reduce){
  .scrollarrow .chev{animation:none;opacity:.7}}
@media(max-width:700px){.heromark{opacity:.075}}

/* ---------------- ticker ---------------- */
.ticker{background:var(--blue);color:#fff;overflow:hidden;padding:14px 0;--dur:42s;
  border-block:1px solid rgba(255,255,255,.16)}
/* inside the hero it sits on the bottom edge, so it lands on the first screen
   instead of being something you only find after scrolling past */
.hero .ticker{position:absolute;left:0;right:0;bottom:0;z-index:4;border-bottom:none}
.ttrack{display:flex;width:max-content;animation:slide var(--dur) linear infinite}
.ttrack span{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  padding:0 24px;font-weight:500;white-space:nowrap;display:flex;align-items:center;gap:24px}
.ttrack span::after{content:"";width:5px;height:5px;background:rgba(255,255,255,.55);
  transform:rotate(45deg);flex:none}
@keyframes slide{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ttrack{animation:none}}

/* ---------------- sections ---------------- */
section{padding:92px 0;position:relative}
@media(max-width:820px){section{padding:66px 0}}
.sechead{max-width:760px;margin:0 auto 46px}
.sechead h2{margin:16px 0 18px}
#s1title{white-space:nowrap;font-size:clamp(26px,4.1vw,52px)}
@media(max-width:620px){#s1title{white-space:normal;font-size:clamp(30px,7.6vw,42px)}}
.sechead h2:last-child{margin-bottom:0}

/* clickable cards */
button.tile,button.card,button.tier{text-align:left;width:100%;font:inherit;color:inherit;
  cursor:pointer}
.cardcta{display:inline-flex;align-items:center;gap:7px;margin-top:18px;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);font-weight:500}
.cardcta .ar{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.tile:hover .cardcta .ar,.card:hover .cardcta .ar,.tier:hover .cardcta .ar{transform:translateX(4px)}
.tier .cardcta{margin-top:0;padding-top:16px}
:focus-visible{outline:2px solid var(--blue-lift);outline-offset:3px;border-radius:4px}

/* ---------------- lightbox ---------------- */
.lb[hidden]{display:none}
.lb{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:24px}
.lb-backdrop{position:absolute;inset:0;background:rgba(4,5,8,.78);
  backdrop-filter:blur(10px) saturate(1.2)}
.lb-panel{position:relative;width:min(1080px,100%);max-height:92vh;overflow:hidden;
  display:grid;grid-template-columns:1.35fr .65fr;border-radius:20px;
  background:var(--void-2);border:1px solid rgba(255,255,255,.12);
  box-shadow:0 60px 120px -50px rgba(0,0,0,.9)}
@media(max-width:820px){.lb{padding:12px}
  .lb-panel{grid-template-columns:1fr;max-height:94vh;overflow-y:auto}}
.lb-close{position:absolute;top:12px;right:12px;z-index:3;width:38px;height:38px;
  border-radius:50%;background:rgba(10,11,16,.7);color:var(--paper);font-size:20px;line-height:1;
  border:1px solid rgba(255,255,255,.14);transition:.2s;display:grid;place-items:center}
.lb-close:hover{background:var(--blue);border-color:var(--blue)}

.lb-stage{position:relative;background:#05060A;min-height:300px;display:grid;place-items:center;
  overflow:hidden}
.lb-stage img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;opacity:0}
.lb-stage img.on{opacity:1}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:40px;height:40px;
  border-radius:50%;background:rgba(10,11,16,.66);border:1px solid rgba(255,255,255,.14);
  color:var(--paper);font-size:20px;line-height:1;display:grid;place-items:center;transition:.2s}
.lb-nav:hover{background:var(--blue);border-color:var(--blue)}
.lb-nav.prev{left:14px}.lb-nav.next{right:14px}
.lb-count{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:2;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--muted-d);
  background:rgba(10,11,16,.7);padding:6px 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.1)}

/* honest empty state while the space is still a building site */
.lb-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  padding:52px 34px;text-align:center;min-height:320px;position:relative;overflow:hidden}
.lb-empty img{width:78px;opacity:.22}
.lb-empty .t{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue-lift);font-weight:500}
.lb-empty p{font-size:14px;line-height:1.6;color:var(--muted-d);max-width:38ch}

.lb-info{padding:34px 30px 30px;display:flex;flex-direction:column;overflow-y:auto}
.lb-info .idx{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--muted-d);
  margin-bottom:14px;padding-right:46px}
.lb-note{display:none;flex-direction:column;align-items:flex-start;gap:9px;
  margin:0 0 24px;padding:14px 15px 15px;
  border-radius:11px;background:rgba(75,120,255,.09);border:1px solid rgba(75,120,255,.22);
  font-size:12.5px;line-height:1.55;color:#A9BCEC;letter-spacing:-.005em}
.lb-note.on{display:flex}
.lb-note .tag{align-self:flex-start;font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:500;color:#fff;background:var(--blue);
  padding:4px 8px;border-radius:999px}
.lb-info h3{color:var(--paper);margin-bottom:12px;font-size:clamp(21px,2.2vw,26px)}
.lb-info p{font-size:14.5px;line-height:1.66;color:var(--muted-d);margin-bottom:22px}
.lb-thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.lb-thumbs button{width:56px;height:42px;border-radius:7px;overflow:hidden;
  border:1px solid rgba(255,255,255,.14);opacity:.55;transition:.2s;padding:0}
.lb-thumbs button.on,.lb-thumbs button:hover{opacity:1;border-color:var(--blue-lift)}
.lb-thumbs img{width:100%;height:100%;object-fit:cover}
.lb-info .btn{margin-top:auto;align-self:flex-start}

/* ---------------- bento ---------------- */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tile{position:relative;border-radius:var(--r);padding:28px;overflow:hidden;
  border:1px solid var(--line);background:var(--void);color:var(--paper);
  transition:transform .55s cubic-bezier(.2,.8,.2,1),border-color .4s,box-shadow .4s;
  display:flex;flex-direction:column;min-height:230px}
/* photo tiles: the render is the card, text sits on a scrim over it */
.tile::after{content:"";position:absolute;inset:0;z-index:0;background-image:var(--shot);
  background-size:cover;background-position:center;
  transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.tile:hover::after{transform:scale(1.07)}
.tile .scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(178deg,rgba(7,8,11,.32) 0%,rgba(7,8,11,.56) 36%,rgba(7,8,11,.80) 62%,rgba(7,8,11,.93) 100%);
  transition:opacity .5s}
.tile:hover .scrim{opacity:.88}
.tile::before{content:"";position:absolute;inset:0;z-index:2;opacity:0;transition:opacity .4s;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(0,67,255,.26),transparent 62%)}
.tile:hover{transform:translateY(-4px);box-shadow:0 30px 60px -34px rgba(10,10,10,.65)}
.tile:hover::before{opacity:1}
.tile > *{position:relative;z-index:3}
.tile .ic{width:30px;height:30px;color:var(--paper);margin-bottom:auto}
.tile h3{margin:26px 0 10px}
.tile .n{position:absolute;top:24px;right:26px;z-index:3;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;color:var(--paper);opacity:.62}
.tile h3{color:var(--paper)}
.tile p.body{color:rgba(250,249,246,.82)}
.tile .cardcta{color:#fff}
.tile:hover{border-color:rgba(255,255,255,.35)}
.t1{grid-column:span 2;grid-row:span 2}
.t1 h3{font-size:clamp(24px,2.6vw,32px)}
.t2{grid-column:span 2}
.t5{grid-column:span 4}

@media(max-width:900px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .t1,.t2,.t5{grid-column:span 2}
  .t1{grid-row:span 1}
}
@media(max-width:560px){.bento{grid-template-columns:1fr}
  .t1,.t2,.t3,.t4,.t5{grid-column:span 1}}

/* ---------------- who cards ---------------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:900px){.cards{grid-template-columns:1fr}}
.card{position:relative;border-radius:var(--r);padding:30px 26px 34px;overflow:hidden;
  border:1px solid var(--line);background:var(--paper-2);
  transition:transform .55s cubic-bezier(.2,.8,.2,1),border-color .4s,box-shadow .4s}
.card::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(0,67,255,.10),transparent 62%)}
.card:hover{transform:translateY(-4px);border-color:var(--blue-soft);
  box-shadow:0 26px 50px -34px rgba(10,10,10,.55)}
.card:hover::before{opacity:1}
.card > *{position:relative}
.card .ic{width:30px;height:30px;color:var(--blue);margin-bottom:22px}
.card h3{margin-bottom:11px}

/* ---------------- forms ---------------- */
.counter{display:inline-flex;align-items:center;gap:10px;margin:16px auto 0;padding:9px 18px;
  border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.045);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-d);font-weight:500}
.counter b{color:var(--paper);font-family:var(--sans);font-size:15px;font-weight:800;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.counter .eyes{font-size:13px;line-height:1;margin-left:-2px}

.formcard{max-width:620px;margin:22px auto 0;border-radius:22px;padding:34px;
  background:var(--void-2);border:1px solid var(--line-d);text-align:left;
  box-shadow:0 40px 90px -60px rgba(0,67,255,.9)}
form{display:grid;gap:15px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:15px}
@media(max-width:600px){.frow{grid-template-columns:1fr}.formcard{padding:24px}}
.req{color:var(--blue-lift);font-weight:700}
label{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted-d);margin-bottom:8px;font-weight:500}
input,select,textarea{width:100%;background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.12);border-radius:11px;padding:13px 14px;
  font-family:var(--sans);font-size:15px;color:var(--paper);transition:.2s}
input::placeholder,textarea::placeholder{color:rgba(255,255,255,.28)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue-lift);
  background:rgba(255,255,255,.075);box-shadow:0 0 0 3px rgba(75,120,255,.16)}
textarea{resize:vertical;min-height:88px}
select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A8FA3' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
select option{background:var(--void-2);color:var(--paper)}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:9px 15px;font-size:12.5px;
  color:var(--muted-d);transition:.2s;font-weight:500}
.chip:hover{border-color:var(--blue-lift);color:var(--paper)}
.chip[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:12.5px;color:var(--muted-d);
  line-height:1.55;font-family:var(--sans);letter-spacing:normal;text-transform:none;
  margin-bottom:0;cursor:pointer;font-weight:400}
.consent input{width:16px;height:16px;flex:none;margin-top:1px;accent-color:var(--blue-lift)}
.formnote{font-size:11.5px;color:var(--muted-d);line-height:1.55;text-align:center}
/* the data-protection line: present, readable, and not competing with the form */
.privacy{font-size:11px;line-height:1.5;opacity:.72;margin-top:11px;max-width:74ch;
  margin-left:auto;margin-right:auto}
.privacy a{text-decoration:underline;text-underline-offset:2px;color:inherit}
.privacy a:hover{color:var(--blue-lift)}
.light .privacy a:hover{color:var(--blue)}
.msg{font-size:13.5px;padding:13px 15px;border-radius:11px;display:none;line-height:1.5}
.msg.ok{display:block;background:rgba(75,120,255,.16);color:#C9D8FF;
  border:1px solid rgba(75,120,255,.34)}
.msg.err{display:block;background:rgba(255,90,90,.12);color:#FFC2C2;
  border:1px solid rgba(255,90,90,.3)}

/* light-form variant for sponsor section */
.formcard.light{background:var(--paper-2);border-color:var(--line);
  box-shadow:0 40px 90px -64px rgba(10,10,10,.5)}
.light label{color:var(--muted)}
.light input,.light select,.light textarea{background:#fff;border-color:var(--line);color:var(--ink)}
.light input::placeholder,.light textarea::placeholder{color:#B4AEA0}
.light select option{background:#fff;color:var(--ink)}
.light .formnote{color:var(--muted)}
.light .msg.ok{background:var(--blue-pale);color:#0A2A9E;border-color:rgba(0,67,255,.22)}
.light .msg.err{background:#FDECEC;color:#8A1F1F;border-color:#F3C9C9}

/* ---------------- tiers ---------------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;text-align:left}
@media(max-width:900px){.tiers{grid-template-columns:1fr}}
.tier{position:relative;border-radius:var(--r);padding:28px 24px 28px;overflow:hidden;
  border:1px solid var(--line);background:var(--paper-2);display:flex;flex-direction:column;
  transition:transform .55s cubic-bezier(.2,.8,.2,1),border-color .4s,box-shadow .4s}
.tier::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(0,67,255,.10),transparent 62%)}
.tier:hover{transform:translateY(-4px);border-color:var(--blue-soft);
  box-shadow:0 26px 50px -34px rgba(10,10,10,.55)}
.tier:hover::before{opacity:1}
.tier > *{position:relative}
.tier.feat{border-color:var(--blue);
  background:linear-gradient(165deg,var(--blue-pale),var(--paper-2) 58%)}
.tierhead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  margin-bottom:9px}
.tier .tag{flex:none;margin-top:3px;background:var(--blue);color:#fff;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 9px;border-radius:999px;font-weight:500;white-space:nowrap}
.tier h3{margin-bottom:0}
.tier .desc{min-height:62px;font-size:13.5px}
.tier .price{font-size:20px;font-weight:800;letter-spacing:-.03em;color:var(--blue);
  margin:18px 0 3px}
.tier .pricenote{font-family:var(--mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:22px;font-weight:500}
.tier ul{list-style:none;display:grid;gap:10px;margin-bottom:24px}
.tier li{font-size:13px;line-height:1.5;color:var(--muted);display:flex;gap:10px;font-weight:400}
.tier li::before{content:"";width:5px;height:5px;background:var(--blue);
  transform:rotate(45deg);margin-top:6px;flex:none}
.tier .slots{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-top:auto;padding-top:18px;border-top:1px solid var(--line);
  font-weight:500}

.inkind{position:relative;overflow:hidden;border-radius:var(--r);border:1px dashed var(--line);
  padding:26px 28px;text-align:left;background:rgba(255,255,255,.45);
  display:flex;flex-direction:column;width:100%;font:inherit;color:inherit;cursor:pointer;
  transition:transform .55s cubic-bezier(.2,.8,.2,1),border-color .4s,box-shadow .4s}
.inkind::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(0,67,255,.09),transparent 62%)}
.inkind:hover{border-color:var(--blue-soft);box-shadow:0 26px 50px -34px rgba(10,10,10,.55)}
.inkind:hover::before{opacity:1}
.inkind > *{position:relative}
.community{cursor:pointer;width:100%;font:inherit;text-align:left}
.community:hover{border-color:rgba(255,255,255,.28)}
.inkind h3{margin-bottom:10px}
.inkind .btn{align-self:flex-start;margin-top:auto;padding-top:12px;padding-bottom:12px}
.inkind p{margin-bottom:22px}
.inkind ul{list-style:none;display:grid;gap:11px;margin-bottom:26px}
.inkind li{font-size:13.5px;line-height:1.5;color:var(--muted);display:flex;gap:11px}
.inkind li::before{content:"";width:14px;height:1.5px;background:var(--blue);
  margin-top:9px;flex:none}

/* free community-partner panel, deliberately not a sponsorship tier */
.altrow{display:grid;grid-template-columns:1.25fr 1fr;gap:14px;margin-top:44px;align-items:stretch}
@media(max-width:900px){.altrow{grid-template-columns:1fr}}
.community{position:relative;overflow:hidden;border-radius:var(--r);padding:30px 30px 30px;
  background:var(--void);color:var(--paper);border:1px solid rgba(255,255,255,.10);
  display:flex;flex-direction:column;isolation:isolate}
.community::after{content:"";position:absolute;z-index:-1;width:420px;height:420px;
  right:-140px;top:-160px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,67,255,.55),transparent 66%);filter:blur(46px)}
.community h3{color:var(--paper);margin-bottom:10px}
.community .lede{color:var(--muted-d);font-size:15px;max-width:52ch;margin-bottom:22px}
.community .freepill{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;background:var(--blue);color:#fff;font-weight:500;
  margin-bottom:18px}
.community ul{list-style:none;display:grid;gap:11px;margin-bottom:26px}
.community li{font-size:13.5px;line-height:1.5;color:var(--muted-d);display:flex;gap:11px}
.community li::before{content:"";width:14px;height:1.5px;background:var(--blue-lift);
  margin-top:9px;flex:none}
.community .btn{align-self:flex-start;margin-top:auto;pointer-events:none}
.inkind .btn{pointer-events:none}

/* ---------------- faq ---------------- */
.faq{max-width:820px;margin:0 auto;display:grid;gap:9px}
.q{border:1px solid var(--line);border-radius:14px;background:var(--paper-2);
  transition:border-color .3s,background .3s;overflow:hidden}
.q[open]{border-color:var(--blue-soft);background:#fff}
.q summary{list-style:none;cursor:pointer;padding:20px 22px;display:flex;gap:18px;
  align-items:center;font-weight:700;font-size:15.5px;letter-spacing:-.015em;transition:color .2s}
.q summary::-webkit-details-marker{display:none}
.q summary:hover{color:var(--blue)}
.q summary::after{content:"";margin-left:auto;flex:none;width:11px;height:11px;
  border-right:1.8px solid var(--blue);border-bottom:1.8px solid var(--blue);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .3s}
.q[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.q .a{padding:0 22px 22px;max-width:72ch}

/* ---------------- footer ---------------- */
footer{background:var(--void);color:var(--paper);padding:80px 0 32px;position:relative;
  overflow:hidden}
footer .glowline{position:absolute;top:0;left:50%;transform:translateX(-50%);width:70%;height:1px;
  background:linear-gradient(90deg,transparent,var(--blue-lift),transparent);opacity:.65}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:44px;padding-bottom:52px;
  border-bottom:1px solid var(--line-d)}
@media(max-width:820px){.fgrid{grid-template-columns:1fr;gap:32px}}
footer h3{margin-bottom:14px}
footer p{font-size:14px;line-height:1.65;color:var(--muted-d)}
.flinks{display:grid;gap:11px;margin-top:16px}
.flinks a{font-size:14px;color:rgba(250,249,246,.72);transition:color .2s;
  display:inline-flex;align-items:center;gap:7px;width:fit-content}
.flinks a:hover{color:var(--blue-lift)}
.fbot{display:flex;justify-content:space-between;gap:18px;padding-top:26px;flex-wrap:wrap}
.fbot p{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:rgba(250,249,246,.4)}

/* ---------------- reveal ---------------- */
.js .rv{opacity:0;transform:translateY(24px)}
.js.no-motion .rv,.rv.shown{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none}
  .js .w > i{transform:none}
}
.js #markimg{opacity:0}
.js.no-motion #markimg{opacity:1}


/* =============== partners page =============== */
/* =============== partners hero ===============
   Same frame as the hub hero (dark canvas, type, nav pill, drifting light).
   What differs is the field behind the text: a network of nodes and links
   with signals travelling through it.
   ============================================= */
.phero{padding:132px 0 60px}
.phero .hero-in{gap:20px}
.phero h1{max-width:19ch;font-size:clamp(36px,5.6vw,68px)}
.phero .lede{max-width:58ch}

.pbg{position:absolute;inset:0;z-index:-1;pointer-events:none}

/* --- the network: nodes, links, and signals passing through ---
   Drawn on a canvas by netField() in site.js; the knobs are in the NET
   object just above that function. The mask keeps the middle quiet so the
   headline sits on near-empty canvas and the mesh builds toward the edges.
   No images, no motif, about sixty nodes. */
.phero .grid-bg{opacity:.14}
.pbg-net canvas{display:block;width:100%;height:100%;
  -webkit-mask-image:radial-gradient(ellipse 54% 42% at 50% 46%,
    transparent 34%,rgba(0,0,0,.42) 62%,#000 100%);
  mask-image:radial-gradient(ellipse 54% 42% at 50% 46%,
    transparent 34%,rgba(0,0,0,.42) 62%,#000 100%)}
/* the headline fills most of the width on a phone, so clear more room */
@media(max-width:820px){
  .pbg-net canvas{opacity:.72;
    -webkit-mask-image:radial-gradient(ellipse 96% 33% at 50% 50%,
      transparent 34%,rgba(0,0,0,.4) 68%,#000 100%);
    mask-image:radial-gradient(ellipse 96% 33% at 50% 50%,
      transparent 34%,rgba(0,0,0,.4) 68%,#000 100%)}
}
.phero .a1{opacity:.5}
.phero .a2{background:radial-gradient(circle,rgba(0,67,255,.30),transparent 66%)}
.phero .a3{background:radial-gradient(circle,rgba(239,231,211,.13),transparent 66%)}




/* the honeypot: off screen rather than display:none, which bots check for */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* the waitlist wants its heading, its count and the whole form on one screen,
   so this block runs a little tighter than the rest of the page */
#waitlist .sechead{margin-bottom:16px}
#waitlist .sechead .lede{margin-top:2px}