/* Info: one reading column on black. A lit bulb hangs beside the title; the roadmap is a string of bulbs on one cord,
   with the stage that is live now glowing and every later stage still dark. */
.defs{position:absolute;width:0;height:0;overflow:hidden}
.info{max-width:760px;margin:0 auto;font-size:var(--fs-read);line-height:var(--lh-body)}   /* 17px at every width, phones included */
.info a:not(.cta){color:var(--ink);text-decoration-color:var(--warm-line);text-underline-offset:3px}
.info a:not(.cta):hover{color:var(--warm)}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"eyebrow art" "title art" "lede art" "ca ca";column-gap:28px;margin-top:clamp(44px,8vw,88px)}
.eyebrow{grid-area:eyebrow;margin:0;font:500 15px/1.2 var(--font-display);letter-spacing:.08em;color:var(--faint)}
.hero h1{grid-area:title;margin:14px 0 0;font:300 clamp(46px,9.5vw,92px)/.98 var(--font-display);letter-spacing:-.01em}
.lede{grid-area:lede;margin:24px 0 0;max-width:30em;font-size:clamp(17px,2.1vw,19px);line-height:1.6;color:var(--soft)}
.hero-art{grid-area:art;align-self:start;width:clamp(58px,13vw,118px);margin-top:calc(-1 * clamp(44px,8vw,88px))}
.hero-art svg{width:100%;height:auto;transform-origin:50% 0}
.ca{grid-area:ca;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin:32px 0 0;padding:14px 16px;border:1px dashed rgba(243,234,217,.2);border-radius:12px}
.ca dt{font-size:var(--fs-label);font-weight:600;line-height:var(--lh-ui);color:var(--faint)}
.ca dd{margin:0;font-size:var(--fs-body);line-height:1.5;color:var(--soft)}

/* sections */
.block{margin-top:clamp(72px,11vw,112px)}
.block h2{margin:0;font:400 clamp(28px,4vw,36px)/1.15 var(--font-display)}
.block .intro{margin:10px 0 0;max-width:var(--measure);color:var(--soft)}

/* how it works */
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:28px 0 0;padding:0;list-style:none}
.steps li{counter-increment:step;position:relative;padding:84px 20px 22px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.steps li::before{content:counter(step);position:absolute;left:20px;top:18px;font:300 36px/1 var(--font-display);color:var(--warm)}
.steps p{margin:0;color:var(--soft)}
.steps p strong{color:var(--ink);font-weight:600}
.step-art{position:absolute;top:0;right:12px;width:130px;height:85px}

/* roadmap: one cord, one bulb per stage */
.road{position:relative;margin:30px 0 0;padding:0;list-style:none}
.road::before{content:"";position:absolute;left:27.5px;top:-30px;bottom:30px;width:1px;background:linear-gradient(to bottom,rgba(255,207,122,.6),rgba(243,234,217,.18) 18%,rgba(243,234,217,.12) 80%,rgba(243,234,217,0))}
.stage{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:18px;padding-bottom:38px}
.stage:last-child{padding-bottom:0}
.node{position:relative;width:56px;height:70px}
.node svg{position:absolute;left:0;top:0;width:56px;height:70px}

.stage-body{padding-top:10px;min-width:0}
.chip{display:inline-block;margin:0;padding:3px 11px;border:1px solid var(--line);border-radius:999px;font-size:var(--fs-label);font-weight:600;line-height:var(--lh-ui);color:var(--soft);white-space:nowrap}
.chip.live{background:var(--warm);border-color:var(--warm);color:var(--black);box-shadow:0 0 18px rgba(var(--glow),.45)}
.chip.next{border-color:var(--warm-line);color:var(--warm)}
.chip.explore{border-style:dashed}
.stage h3{margin:12px 0 0;font:400 var(--fs-h3)/1.25 var(--font-display);color:var(--soft)}
.stage p.what{margin:6px 0 0;max-width:var(--measure);color:var(--soft)}
.stage.is-live h3{color:var(--ink);font-weight:500}
.stage.is-live p.what{color:var(--ink)}
.stage .links{display:flex;flex-wrap:wrap;gap:6px 18px;margin:10px 0 0;font-size:var(--fs-btn);font-weight:500}

/* ground rules */
.rules{display:grid;gap:16px;margin:28px 0 0;padding:0;list-style:none}
.rules li{position:relative;max-width:calc(var(--measure) + 24px);padding-left:24px;color:var(--soft)}
.rules li::before{content:"";position:absolute;left:2px;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--warm);box-shadow:0 0 8px rgba(var(--glow),.75)}
.rules strong{color:var(--ink);font-weight:600}

/* faq */
.faq{margin:24px 0 0;border-top:1px solid var(--line)}
.qa{padding:18px 0;border-bottom:1px solid var(--line)}
.qa h3{margin:0;font-size:var(--fs-read);font-weight:600;line-height:1.35}
.qa p{margin:6px 0 0;max-width:var(--measure);color:var(--soft)}

.end{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(56px,9vw,84px)}

/* the hero bulb sways and the live stage breathes only for visitors who have not asked for less motion */
@media (prefers-reduced-motion:no-preference){
  .hero-art svg{animation:sway 7s ease-in-out infinite alternate}
  .node .halo{animation:breathe 3.4s ease-in-out infinite alternate}
}
@keyframes sway{from{transform:rotate(-1.8deg)}to{transform:rotate(1.8deg)}}
@keyframes breathe{from{opacity:.62}to{opacity:1}}

@media (max-width:640px){
  .hero{grid-template-areas:"eyebrow art" "title art" "lede lede" "ca ca";column-gap:16px}
  .steps{grid-template-columns:minmax(0,1fr)}
}