/* The landing page's own styles, on top of site.css: a centered showcase, where the logo and the app lead and the call
   to action is the one strong color. Its glow and its call to action use the logo's fixed colors; every other color
   is site.css's placeholder until the palette is approved. */
.landing {
  --logo-cyan: #22d3ee;
  --logo-violet: #8b5cf6;
  --logo-magenta: #e040fb;
  --raised: #121829;
  --sunken: #070a12;
  padding: 0;
}

.landing h2 { margin: 0 0 1rem; font-size: 2rem; line-height: 1.15; letter-spacing: -0.03em; }

/* The primary call to action: a pill filled with the logo's gradient */
.cta {
  display: inline-block;
  padding: 1rem 1.75rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--logo-cyan), var(--logo-violet) 55%, var(--logo-magenta));
  box-shadow: 0 8px 40px rgb(139 92 246 / 0.35);
  color: #fff;
  font-weight: 650;
  text-decoration: none;
}

.cta:hover, .cta:focus-visible { color: #fff; box-shadow: 0 8px 48px rgb(139 92 246 / 0.55); }

/* The hero, centered, over a soft glow in the logo's three colors */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 6rem var(--gutter) 4rem;
  text-align: center;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -20% 10% auto;
  z-index: -1;
  height: 36rem;
  background: radial-gradient(closest-side, var(--logo-violet), transparent),
              radial-gradient(closest-side at 30% 60%, var(--logo-cyan), transparent),
              radial-gradient(closest-side at 70% 60%, var(--logo-magenta), transparent);
  filter: blur(80px);
  opacity: 0.35;
}

.hero-logo {
  display: block;
  width: 7.5rem;
  height: 7.5rem;
  margin: 0 auto 2rem;
  filter: drop-shadow(0 0 32px rgb(139 92 246 / 0.55));
}

.badge {
  display: inline-block;
  margin: 0 0 1.5rem;
  padding: 0.3rem 0.875rem;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.8125rem;
}

.badge::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: var(--logo-cyan);
  box-shadow: 0 0 8px var(--logo-cyan);
}

.hero h1 {
  max-width: 48rem;
  margin: 0 auto 1.5rem;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 850;
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.lead { max-width: 36rem; margin: 0 auto 2.5rem; color: var(--muted); font-size: 1.25rem; }

.community { margin: 1.25rem 0 0; color: var(--muted); font-size: 0.875rem; }

/* The drawing of the app, in a window frame */
.app { max-width: 60rem; margin: 4rem auto 0; }

.window {
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 12px;
  background: var(--raised);
  box-shadow: 0 40px 120px rgb(0 0 0 / 0.6);
  text-align: left;
}

.window-bar { display: flex; gap: 0.4rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--rule); }

.window-bar i { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: #2c3346; }

.window-body { display: grid; grid-template-columns: 11rem 1fr; min-height: 20rem; }

.landing .window-nav {
  display: block;
  margin: 0;
  padding: 1rem;
  border-right: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.8125rem;
  list-style: none;
}

.window-nav li { padding: 0.375rem 0.625rem; border-radius: 6px; }

.window-nav .current { background: rgb(34 211 238 / 0.1); color: var(--text); }

.window-main { padding: 1.25rem 1.5rem; font-size: 0.8125rem; }

.window-title { margin: 0 0 1rem; font-size: 0.9375rem; font-weight: 600; }

.run {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 1rem;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--rule);
}

.run p { margin: 0; }

.run small { display: block; color: var(--muted); font-family: var(--font-mono); font-size: 0.75rem; }

.tag {
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  background: rgb(139 92 246 / 0.15);
  color: #c4b5fd;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}

.tag.running { background: rgb(34 211 238 / 0.12); color: var(--logo-cyan); }

.app figcaption { margin-top: 0.75rem; color: var(--muted); font-size: 0.75rem; }

/* Three features, in rows that alternate sides */
.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  padding: 5rem var(--gutter);
}

.feature:nth-of-type(odd) .feature-art { order: -1; }

.feature-text p { margin: 0; color: var(--muted); font-size: 1.0625rem; }

.feature-art {
  margin: 0;
  padding: 2rem;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: radial-gradient(circle at 30% 30%, rgb(34 211 238 / 0.12), transparent 60%),
              radial-gradient(circle at 70% 70%, rgb(224 64 251 / 0.1), transparent 60%), var(--raised);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.8;
}

pre.feature-art { overflow-x: auto; }

.comment { color: #5b6378; }

.landing .events { list-style: none; }

.events li { padding: 0.375rem 0; border-bottom: 1px solid var(--rule); }

.events li:last-child { border-bottom: 0; }

.events time { margin-right: 1rem; color: var(--muted); }

.failover { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: center; }

.harness {
  padding: 0.75rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--sunken);
  text-align: center;
}

.harness small { display: block; color: var(--logo-cyan); font-size: 0.6875rem; }

.harness.spent { color: var(--muted); }

.harness.spent small { color: var(--logo-magenta); }

.failover .arrow { color: var(--muted); font-size: 1.25rem; }

/* The closing call to action */
.closing { padding: 5rem var(--gutter); border-top: 1px solid var(--rule); text-align: center; }

.closing p { max-width: 32rem; margin: 0 auto 2rem; color: var(--muted); }

@media (max-width: 52rem) {
  .hero { padding-top: 4rem; }
  .window-body { grid-template-columns: 1fr; }
  .landing .window-nav { display: none; }
  .run { grid-template-columns: 1fr auto; }
  .run .tag:not(.running) { display: none; }
  .feature { grid-template-columns: 1fr; gap: 2rem; padding: 3rem var(--gutter); }
  .feature:nth-of-type(odd) .feature-art { order: 0; }
}