/* ==========================================================================
   HOME PAGE
   ========================================================================== */

/* ---- Announcement bar (free-through-Week-3 + Discord request callout) ---- */
.announce-bar {
  background: var(--lime-500-10);
  border-bottom: var(--border-hair);
}
.announce-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  color: var(--text-300);
  text-align: center;
  flex-wrap: wrap;
}
.announce-item strong { color: var(--lime-500); }
.announce-item a { color: var(--lime-500); text-decoration: underline; text-underline-offset: 2px; }
.announce-item a:hover { color: var(--lime-400); }
.announce-divider { color: var(--text-600); }
@media (max-width: 640px) {
  .announce-divider { display: none; }
  .announce-inner { flex-direction: column; gap: var(--space-1); padding: var(--space-2) 0; }
}

/* ---- Shared hairline system for the newer card-based sections below ----
   This design language (demo card, vote card, moments timeline) leans on
   soft white-alpha borders/dividers rather than --border-hair's flat
   --ink-700, since these cards sit on gradient/dark-panel backgrounds
   where a warmer, softer line reads better. Kept as a small local scale
   instead of full tokens.css additions since it's specific to this look. */
.hero {
  --hair-07: rgba(245, 247, 245, 0.07);
  --hair-08: rgba(245, 247, 245, 0.08);
  --hair-10: rgba(245, 247, 245, 0.10);
  --hair-16: rgba(245, 247, 245, 0.16);
}

/* ---- Live pulse dot, shared by the demo card and vote card ---- */
.live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime-500);
  margin-right: var(--space-2);
  animation: winnr-pulse 1.6s ease-in-out infinite;
}
@keyframes winnr-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  padding: var(--space-24) 0 var(--space-16);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 420px;
  background: linear-gradient(180deg, var(--lime-500-10), transparent);
  pointer-events: none;
}
.hero .container { position: relative; }

.hero-top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-12);
  align-items: end;
  padding-bottom: var(--space-12);
}
.hero-copy { display: flex; flex-direction: column; gap: var(--space-5); }
.hero h1 {
  font-size: var(--text-4xl);
  letter-spacing: -0.03em;
  max-width: 14ch;
}
.hero h1 .hl { color: var(--lime-500); }
.hero-sub {
  font-size: var(--text-lg);
  color: var(--text-300);
  max-width: 42ch;
}
.hero-note { margin: 0; max-width: 38ch; font-size: var(--text-xs); line-height: 1.55; color: var(--text-600); }

/* Discord, demoted from a button to a plain link -- see the comment on
   its markup in index.html for why. Same lime-underline treatment as the
   announce bar's Discord link above, so the two read as the same kind of
   "secondary, text-only" action across the page. */
.hero-discord-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--lime-500);
  text-decoration: underline;
  text-underline-offset: 2px;
  width: fit-content;
}
.hero-discord-link:hover { color: var(--text-100); }

/* CTA banner living directly on top of the lineup grid, inside the
   demo card itself, instead of off in the hero-actions row. */
.demo-card-cta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-5);
  border-bottom: 1px solid var(--hair-07);
  background: var(--lime-500-10);
}
.demo-card-cta .hero-note { max-width: 30ch; }
@media (max-width: 480px) {
  .demo-card-cta { flex-direction: column; align-items: stretch; text-align: center; }
  .demo-card-cta .hero-note { max-width: none; }
}

/* Empty roster placeholder row (no name/opponent/verdict yet). */
.lineup-row .who.is-empty { color: var(--text-600); font-family: var(--font-data); }
.demo-call-empty { color: var(--text-400); font-size: var(--text-sm); line-height: 1.6; }

/* ---- Demo card: today's calls + rest of the lineup ---- */
/* Used to only round/border the top corners (border-bottom: none) so the
   card visually "bled" into the page below it -- worked fine when a
   whole section with its own top padding followed, but now that the
   toolkit grid sits much closer underneath, the missing bottom edge just
   read as the card getting cut off. Closed it into a normal complete
   card, and .hero now adds real space below it (see .hero padding-
   bottom) instead of relying on the next section's own top padding. */
.demo-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--hair-10);
  background: linear-gradient(160deg, var(--ink-900), var(--ink-950));
  box-shadow: 0 -20px 80px -40px rgba(0,0,0,.9), inset 0 1px 0 var(--hair-07);
  overflow: hidden;
}
.demo-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--hair-07);
  background: rgba(245,247,245,.03);
}
.demo-card-live {
  display: flex;
  align-items: center;
  font-family: var(--font-data);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  color: var(--text-300);
}
.demo-card-format {
  font-family: var(--font-data);
  font-size: 0.65rem;
  color: var(--text-600);
}
.demo-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

.demo-call { padding: var(--space-6); border-right: 1px solid var(--hair-07); }
.demo-call-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: var(--lime-500-15);
  border: 1px solid var(--lime-500-35);
  color: var(--lime-500);
  font-family: var(--font-data);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
}
.demo-call h3 {
  margin: var(--space-4) 0 var(--space-3);
  font-size: var(--text-xl);
  text-transform: none;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.demo-call > p { color: var(--text-400); font-size: var(--text-sm); line-height: 1.6; margin-bottom: var(--space-5); }
.evidence-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--hair-08);
}
.evidence-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: rgba(245,247,245,.028);
  font-size: var(--text-sm);
  color: var(--text-300);
}
.evidence-row .v-lime { font-family: var(--font-data); font-size: 0.8rem; color: var(--lime-500); white-space: nowrap; }
.evidence-row .v-muted { font-family: var(--font-data); font-size: 0.8rem; color: var(--text-300); white-space: nowrap; }

.demo-lineup { padding: var(--space-6); }
.demo-lineup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  font-family: var(--font-data);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  color: var(--text-600);
}
.demo-lineup-head .v-lime { color: var(--lime-500); letter-spacing: 0.08em; }
.lineup-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0.15rem;
  border-bottom: 1px solid var(--hair-07);
}
.lineup-row:last-child { border-bottom: none; }
.lineup-row .slot { font-family: var(--font-data); font-size: 0.65rem; letter-spacing: 0.08em; color: var(--text-600); }
.lineup-row .who { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; }
.lineup-row .who strong { font-size: var(--text-sm); font-weight: 500; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lineup-row .who .opp { font-family: var(--font-data); font-size: 0.65rem; color: var(--text-600); flex-shrink: 0; }
.lineup-row .verdict {
  font-family: var(--font-data);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hair-16);
  color: var(--text-300);
  white-space: nowrap;
}
.lineup-row .verdict.is-flag { border-color: var(--lime-500-35); color: var(--lime-500); }

/* ==========================================================================
   TOOLKIT PREVIEW + VOTE (moved up near the top of the page)
   Reuses tools.css's tk-circle-* classes for the grid itself; these
   rules only handle this page's own type/spacing on top of them, and
   the section-level layout around the grid + vote card.
   ========================================================================== */
#toolkit-vote { padding-top: var(--space-12); padding-bottom: var(--space-16); }

/* "Explore" (small eyebrow) + "The Toolkit" (real heading) instead of
   just the tiny eyebrow on its own -- the eyebrow alone read as easy to
   miss/skim past, not like an actual label for the six circles under
   it. Same eyebrow+h2 pattern the other homepage sections already use
   (see #moments' "THE WEEK" / "Three moments decide your season."). */
.toolkit-heading {
  margin: var(--space-3) 0 var(--space-8);
  font-size: var(--text-2xl);
  letter-spacing: -0.02em;
}

/* tools.css sets these to Archivo/Space Mono for its own dark page --
   here they fall back to this page's already-loaded fonts instead of
   requiring that page's font links too. */
.toolkit-preview-grid .tk-circle-name { font-family: var(--font-body); }
.toolkit-preview-grid .tk-circle-status { font-family: var(--font-data); }

.toolkit-preview-link { display: inline-flex; margin-top: var(--space-8); }
.toolkit-vote-label { display: block; margin: var(--space-12) 0 var(--space-4); }

/* ==========================================================================
   THREE MOMENTS
   ========================================================================== */
#moments .moments-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-8);
}
#moments .moments-timeline::before {
  content: "";
  position: absolute;
  top: 9px; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--lime-500), var(--lime-500-35) 55%, var(--ink-700));
}
.moment { display: flex; flex-direction: column; gap: var(--space-3); }
.moment-head { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--space-3); }
.moment-node { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--ink-700); background: var(--ink-950); flex-shrink: 0; }
.moment-node.is-lime { border-color: var(--lime-500); }
.moment-node.is-lime-dim { border-color: var(--lime-500-35); }
.moment-node.is-neutral { border-color: var(--text-600); }
.moment-day {
  font-family: var(--font-data);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--text-600);
  background: var(--ink-950);
  padding: 0.15rem 0.5rem 0.15rem 0;
}
.moment-day.is-lime { color: var(--lime-500); }
.moment h3 { font-size: var(--text-xl); text-transform: none; letter-spacing: -0.015em; line-height: 1.15; margin-top: var(--space-1); }
.moment p { color: var(--text-400); font-size: var(--text-sm); line-height: 1.6; max-width: 32ch; }
.moment-tool { font-family: var(--font-data); font-size: 0.65rem; letter-spacing: 0.1em; color: var(--text-600); }

/* ==========================================================================
   VOTE
   (the "You get a say in what gets built" copy that used to sit in its
   own section here now lives as the Built In Public headline below --
   see .built-in-public-inner)
   ========================================================================== */
.vote-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--hair-10);
  background: linear-gradient(160deg, var(--ink-900), var(--ink-950));
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.vote-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--hair-07);
  background: rgba(245,247,245,.03);
  font-family: var(--font-data);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
}
.vote-live { display: flex; align-items: center; color: var(--text-300); }
.vote-closes { color: var(--text-600); }
.vote-card-body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }
.vote-question { font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.015em; }
.vote-options { display: flex; flex-direction: column; gap: var(--space-4); }
.vote-option-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); font-weight: 500; margin-bottom: var(--space-2); }
.vote-option.is-dim .vote-option-row { color: var(--text-400); }
.vote-bar { height: 8px; border-radius: 4px; background: rgba(245,247,245,.08); overflow: hidden; }
.vote-bar-fill { height: 100%; border-radius: 4px; }
.vote-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--hair-08);
  font-size: var(--text-sm);
  color: var(--text-400);
}
.vote-cta { font-family: var(--font-display); font-weight: 600; color: var(--lime-500); }

/* .roadmap-link is kept -- it's now used by the "See the full toolkit"
   link under the toolkit preview grid near the top of the page, even
   though the old #roadmap section it was named after is gone. */
.roadmap-link { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; color: var(--lime-500); }
.roadmap-link:hover { color: var(--lime-400); }

/* ==========================================================================
   BUILT IN PUBLIC (closing CTA)
   ========================================================================== */
.built-in-public { position: relative; overflow: hidden; }
.built-in-public::before {
  content: "";
  position: absolute;
  bottom: -280px; left: 50%;
  transform: translateX(-50%);
  width: 900px; height: 520px;
  background: radial-gradient(closest-side, var(--lime-500-15), transparent);
  pointer-events: none;
}
.built-in-public-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}
.eyebrow.is-muted { color: var(--text-600); }
.built-in-public h2 { font-size: var(--text-3xl); max-width: 16ch; }
.built-in-public p { color: var(--text-400); max-width: 46ch; margin-bottom: var(--space-2); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 980px) {
  .hero h1 { max-width: none; }
}
@media (max-width: 640px) {
  .demo-call { border-right: none; border-bottom: 1px solid var(--hair-07); }
}