/* ============================================================
   AI 20/20 — mockup
   Brand system: AI2020 Branding Guidelines v1.0 (2026)
   Signal Black 70 / neutral 20 / AI Orange 10
   Hard edges everywhere. The mascot is the only curve, and the
   only thing allowed to glow.
   ============================================================ */

:root{
  --black:#0B0E11;          /* --ink   */
  --black-2:#12161C;        /* --panel */
  --black-3:#171C23;        /* panel, hovered */
  --orange:#FF5A1F;         /* --alert */
  --paper:#F3F1EA;
  --dim:#C9CDD3;
  --graphite:#8A9099;       /* --muted */
  --muted:#8A9099;
  --line:#242B33;
  --line-strong:#38424D;

  --display:"Bebas Neue","Haettenschweiler","Arial Narrow",Impact,sans-serif;
  --sans:"Inter",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --margin:60px;
  --rail:96px;
  --gap:96px;
  --maxw:1440px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--black);
  color:var(--paper);
  font-family:var(--sans);
  font-size:17px;
  line-height:28px;
  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;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--orange);color:var(--black)}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

h1,h2,h3,h4,.display{
  font-family:var(--display);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.015em;
}

.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  line-height:16px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--graphite);
}
.eyebrow .tick{color:var(--orange)}

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding-left:var(--margin);
  padding-right:var(--margin);
}

/* ---------- top bar ---------------------------------------- */
.topbar{
  position:fixed;inset:0 0 auto 0;z-index:60;
  height:64px;
  display:flex;align-items:center;
  border-bottom:1px solid transparent;
  background:rgba(11,14,17,0);
  transition:background .3s ease,border-color .3s ease;
}
.topbar.stuck{
  background:rgba(11,14,17,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
.topbar .wrap{display:flex;align-items:center;gap:24px;width:100%}

.lockup{display:flex;align-items:center;gap:12px}
.lockup .mascot-slot{width:30px;height:30px;flex:none}
.wordmark{
  font-family:var(--display);
  font-size:24px;line-height:24px;
  letter-spacing:.02em;
  white-space:nowrap;
}
.wordmark .slash{
  color:var(--orange);
  display:inline-block;
  transform:skewX(-12deg);
  padding:0 4px;
}

.cue-readout{
  margin-left:auto;
  display:flex;align-items:center;gap:16px;
  font-family:var(--mono);font-size:11px;line-height:16px;letter-spacing:.16em;
  color:var(--graphite);
}
.cue-readout .live{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--paper);
}
.cue-readout .dot{
  width:6px;height:6px;background:var(--orange);
  animation:blip 1.6s steps(1,end) infinite;
}
@keyframes blip{0%,55%{opacity:1}56%,100%{opacity:.15}}
.cue-readout .now{color:var(--orange);min-width:150px}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:12px;line-height:16px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  padding:12px 24px;
  border:1px solid var(--line-strong);
  background:transparent;color:var(--paper);
  transition:background .18s ease,color .18s ease,border-color .18s ease;
  will-change:transform;
}
.btn:hover{background:var(--paper);color:var(--black);border-color:var(--paper)}
.btn--solid{background:var(--orange);border-color:var(--orange);color:var(--black)}
.btn--solid:hover{background:var(--paper);border-color:var(--paper);color:var(--black)}
.btn--sm{padding:8px 16px;font-size:11px}
.btn .arw{transition:transform .18s ease}
.btn:hover .arw{transform:translateX(4px)}

/* ---------- left rundown rail ------------------------------ */
.rundown{
  position:fixed;left:22px;top:50%;transform:translateY(-50%);
  z-index:50;
  display:flex;flex-direction:column;gap:0px;
  font-family:var(--mono);font-size:10px;line-height:16px;letter-spacing:.16em;
}
.rundown a{
  position:relative;
  display:flex;align-items:center;gap:8px;
  padding:4px 0;color:var(--graphite);
  transition:color .2s ease;
}
.rundown .bar{
  width:16px;height:1px;background:currentColor;
  transition:width .3s cubic-bezier(.2,.8,.2,1),background .2s;
}
.rundown a:hover{color:var(--paper)}
.rundown.on-orange a{color:rgba(11,14,17,.5)}
.rundown.on-orange a:hover{color:var(--black)}
.rundown.on-orange a.on{color:var(--black)}
.rundown.on-orange a.on .bar{background:var(--black)}
.rundown.on-orange .lbl{background:var(--black);border-color:var(--black);color:var(--paper)}
.rundown a.on{color:var(--orange)}
.rundown a.on .bar{width:30px;background:var(--orange)}
.rundown .num{width:16px}
/* The label is a hover flyout, so it must not add width to the link.
   Left in flow it stretched each rail anchor ~250px across the page and
   swallowed clicks meant for the content underneath. */
.rundown .lbl{
  position:absolute;left:48px;top:50%;
  opacity:0;transform:translateY(-50%) translateX(-4px);
  transition:opacity .2s,transform .2s;
  background:var(--black-3);
  border:1px solid var(--line);
  padding:4px 8px;
  white-space:nowrap;
  pointer-events:none;
}
.rundown a:hover .lbl{opacity:1;transform:translateY(-50%)}

/* ---------- the lit mascot --------------------------------- */
/* The orange mark as it ships on joinai2020.com: a radial body, a
   gloss pass, a rim light, and a filter-only glow so the light spills
   past the box without touching layout or the 4px grid. Gradients are
   declared once in .mascot-defs at the top of <body>. */
.mascot-defs{position:absolute;width:0;height:0;overflow:hidden}
.mascot{overflow:visible}
.mascot .m-body{fill:url(#mBody)}
.mascot .m-gloss{fill:url(#mGloss)}
.mascot .m-rim{fill:none;stroke:url(#mRim);stroke-width:1}
.mascot .eye{fill:url(#mEye);transform-box:fill-box;transform-origin:50% 50%}

/* Each eye aims on its own. .track carries the translate (cursor or
   idle glance) in unrotated space; the rect itself carries its rotation
   and its blink. Same split as the live site. */
.mascot .track{transition:transform .16s ease}
.mascot .eye-l{--rot:-7deg;animation:blinkL 6.5s ease-in-out infinite}
.mascot .eye-r{--rot:7deg;animation:blinkR 6.5s ease-in-out infinite;animation-delay:.08s}
@keyframes blinkL{0%,92%,100%{transform:rotate(-7deg) scaleY(1)}95%{transform:rotate(-7deg) scaleY(.12)}}
@keyframes blinkR{0%,92%,100%{transform:rotate(7deg) scaleY(1)}95%{transform:rotate(7deg) scaleY(.12)}}

/* until the pointer shows up, the eyes drift on their own */
@keyframes glance{
  0%,35%{transform:translateX(0)}
  45%,60%{transform:translateX(2.4px)}
  70%,90%{transform:translateX(-2.4px)}
  100%{transform:translateX(0)}
}
html:not(.tracking) .mascot .track{animation:glance 5s ease-in-out infinite}

/* A held expression stops the idle blink: a mascot holding a wink
   should not also be blinking. */
.mascot[data-x="blink"]  .eye{animation:none;transform:rotate(var(--rot)) scaleY(.12)}
.mascot[data-x="wide"]   .eye{animation:none;transform:rotate(var(--rot)) scaleY(1.15) scaleX(1.06)}
.mascot[data-x="squint"] .eye{animation:none;transform:rotate(var(--rot)) scaleY(.4) scaleX(1.1)}
.mascot[data-x="wink"]   .eye-l{animation:none;transform:rotate(var(--rot)) scaleY(.12)}
.mascot[data-x="sleep"]  .eye{animation:none;transform:rotate(var(--rot)) translateY(1.6px) scaleY(.12)}
.mascot[data-x="glance"] .track{animation:none;transform:translateX(1.6px)}

/* on a solid orange ground the lit mark disappears; the guidelines'
   accent lockup takes over there: paper plate, orange eyes */
.mascot--accent .m-body{fill:var(--paper)}
.mascot--accent .m-gloss{fill:none}
.mascot--accent .m-rim{stroke:rgba(11,14,17,.18)}
/* Lit on the orange panel the mark goes white rather than paper cream,
   and keeps the gloss pass so it stays dimensional instead of flat.
   The dark rim would read as a grey outline here, so it turns white. */
/* Same four layers the orange mark uses, white-toned: radial body,
   gloss pass, rim light. No extra shade layer, so it matches. */
.mascot .m-shade{fill:none}
.join .mascot--accent .m-body{fill:url(#mWhite)}
.join .mascot--accent .m-gloss{fill:url(#mWhiteGloss)}
.join .mascot--accent .m-rim{stroke:url(#mWhiteRim);stroke-width:1}
.join .mascot--accent .eye{fill:url(#mEyeLit)}
.mascot--accent .eye{fill:var(--orange)}

/* the luminous glow */
.glowbox{display:inline-block;line-height:0}
.glowbox > .mascot,.lit{
  filter:
    drop-shadow(0 0 6px rgba(255,122,61,.55))
    drop-shadow(0 0 20px rgba(255,90,31,.34))
    drop-shadow(0 0 38px rgba(255,90,31,.13))
    drop-shadow(0 8px 18px rgba(0,0,0,.55));
  animation:mascotbreathe 7s ease-in-out infinite;
  will-change:filter;
}
@keyframes mascotbreathe{
  0%,100%{filter:
    drop-shadow(0 0 6px rgba(255,122,61,.55))
    drop-shadow(0 0 20px rgba(255,90,31,.34))
    drop-shadow(0 0 38px rgba(255,90,31,.13))
    drop-shadow(0 8px 18px rgba(0,0,0,.55))}
  50%{filter:
    drop-shadow(0 0 8px rgba(255,145,90,.68))
    drop-shadow(0 0 28px rgba(255,90,31,.44))
    drop-shadow(0 0 50px rgba(255,90,31,.19))
    drop-shadow(0 8px 18px rgba(0,0,0,.55))}
}
/* On the orange panel the mark is lit by a white bloom.
   A white drop-shadow does not work here: drop-shadow reproduces the
   mark's own rounded-square silhouette and composites white over orange
   as a dull grey ring. A round radial bloom behind the mark reads as
   light instead. The contact bar does the grounding, so no dark shadow. */
.join .glowbox{position:relative;display:block}
.join .glowbox::before{
  content:"";
  position:absolute;left:50%;top:50%;
  width:344px;height:344px;margin:-172px 0 0 -172px;
  background:radial-gradient(circle,
    rgba(255,255,255,1)   0%,
    rgba(255,255,255,.92) 17%,
    rgba(255,255,255,.56) 31%,
    rgba(255,255,255,.24) 46%,
    rgba(255,255,255,.07) 62%,
    rgba(255,255,255,0)   74%);
  filter:blur(12px);
  pointer-events:none;
  animation:joinhalo 7s ease-in-out infinite;
}
.join .glowbox > .mascot{
  position:relative;
  /* a warm-light drop: the glow under the mark is tinted toward the
     panel's own orange, so it reads as warm light bouncing up rather
     than a neutral white halo pasted underneath */
  filter:
    drop-shadow(0 2px 5px rgba(255,244,230,.85))
    drop-shadow(0 7px 16px rgba(255,226,196,.62))
    drop-shadow(0 14px 32px rgba(255,208,166,.4));
  animation:none;
}
@keyframes joinhalo{
  0%,100%{opacity:.78;transform:scale(1)}
  50%{opacity:1;transform:scale(1.1)}
}

/* ---------- the join mascot: a character, not a graphic ---- */
/* It floats on a hard contact bar, springs in when the panel arrives,
   leans toward you on hover, and tumbles when you poke it. The bar is a
   flat rule rather than a blurred shadow so the panel keeps its edges. */
.join-mascot{
  position:relative;display:inline-block;
  background:none;border:0;padding:0;
  cursor:pointer;
  animation:joinbob 4.8s ease-in-out infinite;
}
.join-mascot .mascot{width:180px;height:180px}
.join-mascot .glowbox{
  display:block;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.jm-bar{
  position:absolute;left:50%;bottom:-28px;
  width:120px;height:4px;margin-left:-60px;
  background:rgba(255,238,216,.6);
  animation:jmbar 4.8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes joinbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes jmbar{
  0%,100%{transform:scaleX(1);opacity:.5}
  50%{transform:scaleX(.82);opacity:.26}
}
.join-mascot:hover,.join-mascot:focus-visible{animation-play-state:paused}
.join-mascot:hover .glowbox,
.join-mascot:focus-visible .glowbox{transform:scale(1.07) rotate(-5deg)}
.join-mascot:active .glowbox{transform:scale(.96) rotate(0)}

.join-mascot.tumble .glowbox{
  animation:jmtumble .78s cubic-bezier(.3,.9,.3,1);
}
@keyframes jmtumble{
  0%{transform:rotate(0deg) scale(1,1)}
  14%{transform:rotate(-16deg) scale(1.08,.92)}
  50%{transform:rotate(190deg) scale(.92,1.1)}
  78%{transform:rotate(330deg) scale(1.04,.96)}
  100%{transform:rotate(360deg) scale(1,1)}
}
.jm-hint{
  display:block;margin-top:40px;
  font-family:var(--mono);font-size:10px;line-height:16px;
  letter-spacing:.18em;text-transform:uppercase;
  color:rgba(11,14,17,.5);
  transition:color .2s ease;
}
.join-mascot:hover + .jm-hint{color:var(--black)}

/* The footer mark sleeps until you come near it. --wake is driven from
   JS by cursor proximity (1 = fully awake), so it stirs as you approach
   instead of snapping open only on a direct hover. */
footer .lockup{--wake:0}
footer .lockup .mascot .sleep{fill:url(#mEye)}
footer .lockup .mascot .sleep,
footer .lockup .mascot .track{transition:opacity .22s ease}
footer .lockup .mascot .sleep{opacity:calc(1 - var(--wake))}
footer .lockup .mascot .track{opacity:var(--wake)}
/* hover and keyboard focus still force it fully awake */
footer .lockup:hover,
footer .lockup:focus-visible{--wake:1}

/* ---------- hero ------------------------------------------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;align-items:center;
  padding:120px 0 72px;
  overflow:hidden;
}
/* faint precision grid — rules, not glows */
.hero .grid-bg{
  position:absolute;inset:0;
  background-image:
    linear-gradient(to right,var(--line) 1px,transparent 1px),
    linear-gradient(to bottom,var(--line) 1px,transparent 1px);
  background-size:120px 120px;
  opacity:.4;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 45%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 45%,#000 20%,transparent 78%);
}
/* cursor spotlight */
.hero .spot{
  position:absolute;width:760px;height:760px;left:0;top:0;
  margin:-380px 0 0 -380px;
  background:radial-gradient(circle,rgba(255,90,31,.13) 0%,rgba(255,90,31,0) 62%);
  pointer-events:none;
  transition:opacity .5s ease;
  opacity:0;
}
.hero.awake .spot{opacity:1}

.hero .wrap{position:relative;z-index:2;width:100%}
.hero-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:56px;align-items:center;
}
.hero h1{
  font-size:56px;line-height:52px;
  margin:24px 0 0;
}
.hero h1 .ln{display:block;overflow:hidden}
.hero h1 .ch{
  display:inline-block;
  transform:translateY(105%);
  transition:transform .78s cubic-bezier(.16,1,.3,1);
}
.hero h1 .ch.in{transform:none}
.hero h1 em{font-style:normal;color:var(--orange)}

.hero .sub{
  max-width:56ch;margin-top:28px;
  font-size:20px;line-height:32px;color:var(--dim);
}
.hero .sub b{color:var(--paper);font-weight:600}
.hero-cta{display:flex;flex-wrap:wrap;gap:16px;margin-top:36px}

.hero-copy{grid-column:1 / span 3}
.hero-mascot{
  display:flex;flex-direction:column;align-items:flex-start;gap:20px;
}
.hero-mascot .mascot{width:200px;height:200px}

.scan{
  position:absolute;left:0;right:0;bottom:0;height:10px;
  background:var(--orange);
}
.scan::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 100%);
  transform:translateX(-100%);
  animation:sweep 4.6s cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes sweep{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}

/* ---------- ticker ----------------------------------------- */
.ticker{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--black-2);
  overflow:hidden;
  padding:16px 0;
}
.ticker .track{
  display:flex;width:max-content;
  animation:roll 42s linear infinite;
}
.ticker:hover .track{animation-play-state:paused}
@keyframes roll{from{transform:translateX(0)}to{transform:translateX(calc(var(--roll,50%) * -1))}}
.ticker .item{
  font-family:var(--display);font-size:28px;line-height:28px;letter-spacing:.03em;
  text-transform:uppercase;padding:0 24px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  color:var(--dim);white-space:nowrap;
}
.ticker .item .sl{color:var(--orange);transform:skewX(-12deg);display:inline-block}

/* ---------- generic section -------------------------------- */
section{position:relative}
.sec{padding:var(--gap) 0}
.sec-head{
  display:flex;align-items:baseline;gap:16px;
  padding-bottom:20px;margin-bottom:48px;
  border-bottom:1px solid var(--line);
}
.sec-head h2{font-size:40px;line-height:36px}
.sec-head .cue{margin-left:auto;white-space:nowrap}

.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- mission ---------------------------------------- */
.mission{background:var(--black)}
.mission-grid{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:64px;align-items:start;
}
.big-say{
  font-family:var(--display);
  font-size:34px;line-height:32px;text-transform:uppercase;
  position:relative;z-index:0;
}
.big-say .hi{
  position:relative;display:inline-block;
  color:var(--paper);
  transition:color .35s ease .5s;
  padding:0 8px;
}
.big-say .hi.in{color:var(--black)}
.big-say .hi::before{
  content:"";position:absolute;left:0;top:6%;bottom:8%;width:0;
  background:var(--orange);z-index:-1;
  transition:width .7s cubic-bezier(.16,1,.3,1) .25s;
}
.big-say .hi.in::before{width:100%}
.mission p{margin-top:24px;color:var(--dim);max-width:60ch}
.mission p b{color:var(--paper);font-weight:600}

/* signature stat block, straight from the guidelines */
.stat{
  background:var(--black-3);
  border:1px solid var(--line);
  padding:32px;
}
.stat + .stat{margin-top:20px}
.stat .lab-top{
  font-family:var(--mono);font-size:10px;line-height:16px;letter-spacing:.2em;
  color:var(--orange);text-transform:uppercase;
}
.stat .num{
  font-family:var(--display);
  font-size:64px;line-height:56px;
  margin:16px 0 8px;
}
.stat .lab{
  font-family:var(--mono);font-size:10px;line-height:16px;letter-spacing:.18em;
  color:var(--graphite);text-transform:uppercase;
}
.stat .rule{height:1px;background:var(--line);margin:20px 0 16px}
.stat p{font-size:15px;line-height:24px;color:var(--dim)}

/* ---------- what we do ------------------------------------- */
.panels{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line);
}
.panel{
  position:relative;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:32px 28px;
  min-height:340px;
  display:flex;flex-direction:column;
  background:var(--black);
  transition:background .3s ease;
  overflow:hidden;
}
.panel:last-child{border-right:0}
.panel::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--orange);transform:scaleX(0);transform-origin:left;
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.panel:hover{background:var(--black-3)}
.panel:hover::after{transform:scaleX(1)}
/* Card mascots sleep until you look at them, ported from the live
   cards on joinai2020.com: the dashes cross-fade to open eyes and the
   whole mark pops a little. Each card wakes with its own pose. */
.panel .p-mascot,.slotcard .p-mascot{
  width:44px;height:44px;flex:none;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.panel .p-mascot{margin-bottom:24px}
.p-mascot .m-body{fill:var(--paper)}
.p-mascot .closed rect,.p-mascot .open rect{fill:var(--black)}
.p-mascot .open{opacity:0}
.p-mascot .open,.p-mascot .closed{transition:opacity .18s ease}
.panel:hover .p-mascot .open,.panel:focus-within .p-mascot .open,
.slotcard:hover .p-mascot .open,.slotcard:focus-within .p-mascot .open{opacity:1}
.panel:hover .p-mascot .closed,.panel:focus-within .p-mascot .closed,
.slotcard:hover .p-mascot .closed,.slotcard:focus-within .p-mascot .closed{opacity:0}
.panel:hover .p-mascot,.panel:focus-within .p-mascot,
.slotcard:hover .p-mascot,.slotcard:focus-within .p-mascot{transform:scale(1.14) rotate(-4deg)}
.panel h3{font-size:28px;line-height:28px;margin-bottom:16px}
.panel p{font-size:15px;line-height:24px;color:var(--dim);flex:1}
.panel .idx{
  position:absolute;top:32px;right:28px;
  font-family:var(--mono);font-size:10px;line-height:16px;letter-spacing:.16em;color:var(--graphite);
}
.panel .soon{
  display:inline-block;padding-top:20px;
  font-family:var(--mono);font-size:10px;line-height:16px;letter-spacing:.18em;
  color:var(--orange);text-transform:uppercase;
}

/* ---------- who it's for ----------------------------------- */
.who-lede{
  font-size:20px;line-height:32px;color:var(--dim);
  max-width:68ch;margin-bottom:48px;
}
.who-lede b{color:var(--paper);font-weight:600}
.roles{border-top:1px solid var(--line)}
.role{
  display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1fr);
  gap:24px;align-items:center;
  padding:24px 8px;
  border-bottom:1px solid var(--line);
  transition:padding-left .35s cubic-bezier(.16,1,.3,1),background .3s;
  cursor:default;
}
.role:hover{padding-left:24px;background:var(--black-3)}
.role .n{font-family:var(--mono);font-size:11px;line-height:16px;letter-spacing:.16em;color:var(--graphite)}
.role h3{font-size:28px;line-height:28px;transition:color .25s}
.role:hover h3{color:var(--orange)}
.role p{font-size:15px;line-height:24px;color:var(--dim)}
.roles-foot{
  margin-top:32px;
  font-family:var(--display);font-size:28px;line-height:28px;
  text-transform:uppercase;
}
.roles-foot em{font-style:normal;color:var(--orange)}

/* ---------- the show --------------------------------------- */
.show{background:var(--black-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rundown-strip{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
/* Bracketed cards, ported from the dossier cards on joinai2020.com:
   two orange corner rules that extend when you hover, and the card
   lifts a hair. */
.slotcard{
  position:relative;
  background:var(--black-2);
  border:1px solid var(--line);
  padding:36px;
  display:flex;flex-direction:column;gap:16px;
  transition:border-color .2s ease,transform .2s ease;
}
.slotcard::before,.slotcard::after{
  content:"";position:absolute;width:20px;height:20px;
  border-color:var(--orange);border-style:solid;border-width:0;
  transition:width .45s cubic-bezier(.2,.7,.2,1),height .45s cubic-bezier(.2,.7,.2,1);
}
.slotcard::before{top:-1px;left:-1px;border-top-width:2px;border-left-width:2px}
.slotcard::after{bottom:-1px;right:-1px;border-bottom-width:2px;border-right-width:2px}
.slotcard:hover{border-color:#3A434E;transform:translateY(-2px)}
.slotcard:hover::before,.slotcard:hover::after{width:36px;height:36px}

.slotcard:hover{background:var(--black-3)}
.slotcard .tc{
  font-family:var(--mono);font-size:11px;line-height:16px;letter-spacing:.18em;color:var(--orange);
}
.slotcard h3{font-size:28px;line-height:28px}
.slotcard p{font-size:15px;line-height:24px;color:var(--dim)}

/* ---------- events rail ------------------------------------ */
.events-rail{margin-top:48px}
.ev-state{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:32px 0;
  display:grid;grid-template-columns:minmax(0,1fr) 280px;align-items:center;gap:24px;
  background:var(--black);
}
.ev-state .btn{justify-content:center}
.ev-state h3{font-size:28px;line-height:28px;margin-bottom:8px}
.ev-state p{font-size:15px;line-height:24px;color:var(--dim);max-width:56ch}
.ev-list{display:grid;border-top:1px solid var(--line)}
.ev{
  background:var(--black);border-bottom:1px solid var(--line);padding:24px 0;
  display:grid;grid-template-columns:150px minmax(0,1fr) auto;
  gap:24px;align-items:center;
  transition:background .25s;
}
.ev:hover{background:var(--black-3)}
.ev .when{font-family:var(--mono);font-size:12px;line-height:16px;letter-spacing:.1em;color:var(--orange)}
.ev h3{font-size:24px;line-height:24px;margin-bottom:4px}
.ev .meta{font-family:var(--mono);font-size:11px;line-height:16px;letter-spacing:.1em;color:var(--graphite)}

/* ---------- the map ---------------------------------------- */
.map-rail{
  display:flex;gap:0;overflow-x:auto;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding-left:var(--margin);
  scrollbar-width:none;
}
.map-rail::-webkit-scrollbar{display:none}
.city{
  flex:none;width:260px;
  padding:36px 28px 32px 0;
  border-right:1px solid var(--line);
  transition:background .3s;
}
.city:not(:first-child){padding-left:28px}
.city:hover{background:var(--black-3)}
.city .k{font-family:var(--mono);font-size:10px;line-height:16px;letter-spacing:.2em;color:var(--graphite);text-transform:uppercase}
.city h3{font-size:32px;line-height:32px;margin:16px 0 8px}
.city .st{font-family:var(--mono);font-size:11px;line-height:16px;letter-spacing:.14em;color:var(--graphite)}
.city.first .k,.city.first .st{color:var(--orange)}
.map-note{
  margin-top:24px;font-family:var(--mono);font-size:11px;line-height:16px;
  letter-spacing:.14em;color:var(--graphite);text-transform:uppercase;
  display:flex;flex-wrap:wrap;gap:24px;
}
.map-note .hint{margin-left:auto;color:var(--orange)}
.map-rail{cursor:grab}

/* ---------- why -------------------------------------------- */
.why{padding:var(--gap) 0}
.why-lines{display:grid;gap:0;border-top:1px solid var(--line)}
.why-line{
  padding:40px 0;border-bottom:1px solid var(--line);
  display:flex;align-items:baseline;gap:24px;flex-wrap:wrap;
}
.why-line .k{font-family:var(--mono);font-size:11px;line-height:16px;letter-spacing:.18em;color:var(--orange);flex:none;width:56px}
.why-line .t{
  font-family:var(--display);text-transform:uppercase;
  font-size:32px;line-height:28px;
}
.why-close{
  margin-top:44px;max-width:70ch;font-size:18px;line-height:28px;color:var(--dim);
}
.why-close b{color:var(--paper);font-weight:600}

/* ---------- join ------------------------------------------- */
.join{
  background:var(--orange);color:var(--black);
  padding:96px 0 0;
  position:relative;overflow:hidden;
}
.join .wrap{position:relative;z-index:2}
.join-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:56px;align-items:center}
.join-copy{grid-column:1 / span 3}
.join .eyebrow{color:rgba(11,14,17,.78)}
.join .eyebrow .tick{color:var(--black)}
.join h2{font-size:52px;line-height:48px;margin:16px 0 24px}
.join p{font-size:20px;line-height:32px;max-width:52ch;color:rgba(11,14,17,.82)}
.join .btn{border-color:rgba(11,14,17,.32);color:var(--black)}
.join .btn:hover{background:var(--black);color:var(--paper);border-color:var(--black)}
.join .btn--solid{background:var(--black);border-color:var(--black);color:var(--paper)}
.join .btn--solid:hover{background:var(--paper);color:var(--black);border-color:var(--paper)}
.join .mascot{width:180px;height:180px;margin:0 auto}
.join .glowbox::before{
  background:radial-gradient(circle at 50% 50%,rgba(11,14,17,.35) 0%,rgba(11,14,17,0) 68%);
}
.join .glowbox > .mascot{
  filter:drop-shadow(0 0 16px rgba(11,14,17,.28));
  animation:none;
}
.join-strip{
  margin-top:80px;border-top:1px solid rgba(11,14,17,.24);
  padding:24px 0;
  font-family:var(--mono);font-size:11px;line-height:16px;letter-spacing:.2em;text-transform:uppercase;
  display:flex;flex-wrap:wrap;gap:20px;align-items:center;
  color:rgba(11,14,17,.72);
}
.join-strip .site{margin-left:auto;color:var(--black)}

/* ---------- footer ----------------------------------------- */
footer{padding:56px 0 72px;border-top:1px solid var(--line)}
.foot-grid{display:flex;flex-wrap:wrap;gap:28px;align-items:center}
.foot-grid .links{
  margin-left:auto;display:flex;flex-wrap:wrap;gap:24px;
  font-family:var(--mono);font-size:11px;line-height:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--graphite);
}
.foot-grid .links a:hover{color:var(--orange)}
.foot-note{
  margin-top:32px;font-family:var(--mono);font-size:10px;line-height:20px;letter-spacing:.14em;
  color:#5A626C;text-transform:uppercase;
}

/* ---------- the stage: speaker + sponsor ------------------- */
.stage{border-top:1px solid var(--line)}
.stage-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:56px;
}
.stage-card{
  border-top:1px solid var(--line);
  padding-top:32px;
}
.stage-card h3{font-size:32px;line-height:32px;margin:12px 0 16px}
.stage-card > p{font-size:17px;line-height:28px;color:var(--dim);max-width:52ch}
.stage-card .btn{margin-top:24px}

.form{
  margin-top:32px;
  border-top:1px solid var(--line);
  padding-top:24px;
  display:none;
}
.form.open{display:block}
.field{margin-bottom:20px}
.field:last-of-type{margin-bottom:24px}
.field label{
  display:block;margin-bottom:8px;
  font-family:var(--mono);font-size:10px;line-height:16px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
.field label .opt{color:var(--line-strong)}
.field input,.field select,.field textarea{
  width:100%;
  background:var(--black-2);
  border:1px solid var(--line);
  color:var(--paper);
  font-family:var(--sans);font-size:15px;line-height:24px;
  padding:12px;
  border-radius:0;
  -webkit-appearance:none;appearance:none;
}
.field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 20px,calc(100% - 14px) 20px;
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
  padding-right:40px;
}
.field textarea{min-height:96px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--orange);
}
.field input::placeholder,.field textarea::placeholder{color:var(--line-strong)}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.radio-row{display:flex;gap:24px;align-items:center;padding-top:4px}
.radio-row label{
  display:flex;align-items:center;gap:8px;margin:0;
  font-family:var(--sans);font-size:15px;line-height:24px;
  letter-spacing:0;text-transform:none;color:var(--paper);
}
.radio-row input[type="radio"]{
  width:16px;height:16px;flex:none;padding:0;
  -webkit-appearance:radio;appearance:radio;
  accent-color:var(--orange);
}
.form-note{
  font-family:var(--mono);font-size:10px;line-height:16px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  margin-top:16px;
}
.form-note b{color:var(--orange);font-weight:500}

/* ---------- subscribe strip -------------------------------- */
.sub-strip{
  border-top:1px solid rgba(11,14,17,.24);
  padding-top:32px;margin-top:32px;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:56px;align-items:start;
}
.sub-strip .lede{grid-column:1 / span 2}
.sub-strip h3{font-size:28px;line-height:28px;margin-bottom:8px}
.sub-strip p{font-size:15px;line-height:24px;color:rgba(11,14,17,.78)}
/* Name and email, laid out on a fixed two-column grid with the note
   line already in place, so submitting never reflows the panel. */
.sub-form{
  grid-column:3 / span 2;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.sub-wide{grid-column:1 / -1}
.sub-form .field{margin-bottom:0}
.sub-form .field label{color:rgba(11,14,17,.8)}
.sub-form input{
  width:100%;
  background:transparent;border:1px solid rgba(11,14,17,.32);
  color:var(--black);border-radius:0;
  font-family:var(--sans);font-size:15px;line-height:24px;padding:12px;
  -webkit-appearance:none;appearance:none;
}
.sub-form input::placeholder{color:rgba(11,14,17,.66)}
.sub-form input:focus{outline:none;border-color:var(--black)}
.sub-form .btn{justify-content:center}
.sub-form .form-note{
  margin:0;
  /* the row is reserved at its filled height, so the submit message
     drops in without pushing the footer down */
  min-height:24px;
  color:rgba(11,14,17,.8);
}
.sub-form .form-note b{color:var(--black);font-weight:600}

/* ---------- responsive ------------------------------------- */
/* the rundown rail needs a gutter of its own at desktop */
@media (min-width:1180px){
  :root{--margin:120px}
  .rundown{left:24px}
}

/* display scale steps — every line-height a multiple of 4 */
@media (min-width:760px){
  .hero h1{font-size:88px;line-height:80px}
  .sec-head h2{font-size:56px;line-height:52px}
  .big-say{font-size:46px;line-height:44px}
  .stat .num{font-size:80px;line-height:72px}
  .role h3,.roles-foot{font-size:36px;line-height:32px}
  .why-line .t{font-size:44px;line-height:40px}
  .join h2{font-size:84px;line-height:76px}
}
@media (min-width:1180px){
  .hero h1{font-size:128px;line-height:116px}
  .sec-head h2{font-size:68px;line-height:60px}
  .big-say{font-size:56px;line-height:52px}
  .stat .num{font-size:92px;line-height:80px}
  .role h3,.roles-foot{font-size:44px;line-height:40px}
  .why-line .t{font-size:56px;line-height:52px}
  .join h2{font-size:108px;line-height:96px}
}

@media (max-width:1180px){
  .rundown{display:none}
  .panels{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){

  .stage-grid{grid-template-columns:1fr;gap:48px}
  .sub-strip{grid-template-columns:1fr;gap:24px}
  .sub-strip .lede,.sub-form{grid-column:1}
  .field-row{grid-template-columns:1fr}

  :root{--margin:24px;--gap:64px}
  .hero{padding:96px 0 56px}
  .hero-grid{grid-template-columns:1fr;gap:32px}
  .hero-copy{grid-column:1}
  /* on a phone the mascot leads: it is the fastest read of the brand,
     and it stops the fold from cutting it in half */
  .hero-mascot{align-items:flex-start;order:-1;gap:0}
  .hero-mascot .mascot{width:104px;height:104px}
    .mission-grid{grid-template-columns:1fr;gap:40px}
  .rundown-strip{grid-template-columns:1fr}
  .ev-state{grid-template-columns:1fr}
  .join-grid{grid-template-columns:1fr;gap:36px}
  .join-copy{grid-column:1}
  .join .mascot{margin:0}
  .role{grid-template-columns:40px 1fr;row-gap:8px}
  .role p{grid-column:2}
  .ev{grid-template-columns:1fr;gap:8px}
  .cue-readout .now{display:none}
}
@media (max-width:560px){

  .panels{grid-template-columns:1fr}
  .cue-readout{display:none}
  /* the readout carried margin-left:auto; without it the CTA
     crowds the lockup */
  .topbar .btn{margin-left:auto}
  /* 0.2em tracking pushes the eyebrow onto a second line here */
  .eyebrow{letter-spacing:.12em}
  /* stacked, the vertical rule and the equal-height floor both stop
     earning their space */
  .panel{border-right:0;padding:32px 0;min-height:0}
  .panel .idx{right:0}
  .panel .idx{top:32px}
  .ticker .item{font-size:22px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .reveal{opacity:1;transform:none}
  .mascot .eye,.mascot .track,.glowbox > .mascot{animation:none !important}
  .join-mascot,.jm-bar{animation:none}
  .join .glowbox::before{animation:none}
  .join-mascot .glowbox{transition:none}
  .join-mascot:hover .glowbox,.join-mascot:focus-visible .glowbox{transform:none}
  footer .lockup .mascot .sleep,footer .lockup .mascot .track{transition:none}
  .panel .p-mascot,.slotcard .p-mascot,.p-mascot .open,.p-mascot .closed{transition:none}
  .panel:hover .p-mascot,.panel:focus-within .p-mascot,
  .slotcard:hover .p-mascot,.slotcard:focus-within .p-mascot{transform:none}
  .slotcard,.slotcard::before,.slotcard::after{transition:none}
  .slotcard:hover{transform:none}
  .hero h1 .ch{transform:none}
  .big-say .hi::before{width:100%}
}

/* ============================================================
   SUBPAGE: the speaker and sponsor application pages
   ============================================================ */
.subpage{padding-top:64px}
.backbar{
  border-bottom:1px solid var(--line);
  padding:20px 0;
}
.backbar .wrap{display:flex;align-items:center;gap:24px}
.backlink{
  font-family:var(--mono);font-size:11px;line-height:16px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  transition:color .2s ease;
}
.backlink:hover{color:var(--orange)}
.backbar .other{margin-left:auto}

.page-hero{padding:96px 0 64px;position:relative;overflow:hidden}
.page-hero .grid-bg{
  position:absolute;inset:0;
  background-image:
    linear-gradient(to right,var(--line) 1px,transparent 1px),
    linear-gradient(to bottom,var(--line) 1px,transparent 1px);
  background-size:120px 120px;opacity:.4;
  mask-image:radial-gradient(ellipse 80% 80% at 30% 40%,#000 10%,transparent 76%);
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 30% 40%,#000 10%,transparent 76%);
}
.page-hero .wrap{position:relative;z-index:2}
.page-hero-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:56px;align-items:center;
}
.page-hero-copy{grid-column:1 / span 3}
.page-hero h1{font-size:56px;line-height:52px;margin:16px 0 24px}
.page-hero .lede{font-size:20px;line-height:32px;color:var(--dim);max-width:56ch}
.page-hero .mascot{width:96px;height:96px}

/* ---- the application layout ---- */
.form-page{
  padding:0 0 96px;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:56px;
  align-items:start;
}
.form-main{grid-column:1 / span 3}
.form-side{grid-column:4;position:sticky;top:88px}

.step{border:0;padding:0;margin:0 0 48px}
.step-head{
  display:flex;align-items:baseline;gap:16px;
  border-top:1px solid var(--line);
  padding-top:20px;margin-bottom:28px;
}
.step-head .sn{
  font-family:var(--mono);font-size:11px;line-height:16px;
  letter-spacing:.18em;color:var(--orange);
}
.step-head h2{font-size:32px;line-height:32px}
.step-head .hint{
  margin-left:auto;
  font-family:var(--mono);font-size:10px;line-height:16px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}

.side-card{
  border-top:1px solid var(--line);
  padding-top:20px;margin-bottom:32px;
}
.side-card h3{
  font-family:var(--mono);font-size:10px;line-height:16px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--orange);
  margin-bottom:16px;font-weight:500;
}
.side-card ul{list-style:none}
.side-card li{
  font-size:15px;line-height:24px;color:var(--dim);
  padding-left:16px;position:relative;margin-bottom:12px;
}
.side-card li::before{
  content:"";position:absolute;left:0;top:11px;
  width:8px;height:1px;background:var(--orange);
}
.side-card p{font-size:15px;line-height:24px;color:var(--dim)}

.submit-row{
  border-top:1px solid var(--line);
  padding-top:24px;
  display:flex;flex-wrap:wrap;align-items:center;gap:24px;
}
.submit-row .form-note{margin:0}

.req{color:var(--orange)}

footer.sub-footer{border-top:1px solid var(--line);padding:48px 0 64px}

@media (max-width:900px){
  .page-hero{padding:64px 0 48px}
  .page-hero-grid{grid-template-columns:1fr;gap:32px}
  .page-hero-copy{grid-column:1}
  .page-hero h1{font-size:44px;line-height:40px}
  .form-page{grid-template-columns:1fr;gap:48px}
  .form-main,.form-side{grid-column:1}
  .form-side{position:static}
}
@media (min-width:760px){
  .page-hero h1{font-size:72px;line-height:64px}
}
@media (min-width:1180px){
  .page-hero h1{font-size:88px;line-height:80px}
}

/* ============================================================
   THE EARLY-ACCESS DIALOG
   Every Get Early Access CTA opens this instead of scrolling the
   page down to the strip. Hard edges, one orange signal, the same
   reserved note row so submitting never reflows it.
   ============================================================ */
.ea{
  border:0;padding:0;
  background:transparent;
  color:var(--paper);
  max-width:none;max-height:none;
  width:100%;height:100%;
}
.ea::backdrop{
  background:rgba(4,6,8,.78);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.ea[open]{
  display:flex;align-items:center;justify-content:center;
  padding:24px;
}
.ea-panel{
  position:relative;
  width:100%;max-width:520px;
  background:var(--black-2);
  border:1px solid var(--line);
  padding:40px;
}
.ea-panel::before,.ea-panel::after{
  content:"";position:absolute;width:24px;height:24px;
  border-color:var(--orange);border-style:solid;border-width:0;
}
.ea-panel::before{top:-1px;left:-1px;border-top-width:2px;border-left-width:2px}
.ea-panel::after{bottom:-1px;right:-1px;border-bottom-width:2px;border-right-width:2px}
.ea-panel h2{font-size:44px;line-height:40px;margin:12px 0 16px}
.ea-lede{font-size:15px;line-height:24px;color:var(--dim);margin-bottom:28px}
.ea-close{
  position:absolute;top:12px;right:12px;
  width:32px;height:32px;
  font-family:var(--sans);font-size:22px;line-height:1;
  color:var(--muted);
  transition:color .18s ease;
}
.ea-close:hover{color:var(--orange)}
.ea-form .field:last-of-type{margin-bottom:24px}
.ea-submit{width:100%;justify-content:center}
.ea-form .form-note{margin-top:16px;min-height:24px}

@media (max-width:560px){
  .ea-panel{padding:32px 24px}
  .ea-panel h2{font-size:36px;line-height:32px}
}
@media (prefers-reduced-motion:reduce){
  .ea::backdrop{backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* the lead honeypot: off-screen, never focusable, forwarded as-is */
input.hp{position:absolute;left:-9999px;height:0;width:0;border:0;padding:0;margin:0}

/* the module's own status classes on the note line */
.form-note.ok{color:var(--paper)}
.form-note.err{color:var(--orange)}
.sub-form .form-note.ok,.sub-form .form-note.err{color:var(--black)}