/* Scoped to the landing page only (via body.landing-page) - theme.css's body rule is shared
   with every prototype's own dashboard, so the full-height stretch below can't live there
   without risking their layouts. */
body.landing-page { height: 100%; display: flex; flex-direction: column; }
html:has(body.landing-page) { height: 100%; }

.landing {
  max-width: 2000px; margin: 0 auto; padding: 20px 28px 24px;
  flex: 1; display: flex; flex-direction: column; min-height: 0; width: 100%;
}

.hero { margin-bottom: 18px; flex: 0 0 auto; }
.hero h1 {
  font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; letter-spacing: -.02em;
  margin: 0 0 6px; line-height: 1.15; color: var(--ink); white-space: nowrap;
}
.hero .lead { font-size: 14px; color: var(--mut); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* flex: 1 + min-height: 0 lets this grid stretch to fill whatever vertical space the topbar
   and hero leave behind, instead of sizing to its own (small) content and leaving a gap at
   the bottom on taller screens. grid-auto-rows: 1fr then splits that height evenly across
   both rows, so each tile grows to fill it rather than staying a fixed small size.
   max-height + margin: auto 0 caps how big tiles get on very tall screens (otherwise a tile
   with one sentence of text would stretch into a mostly-empty box) and centers the grid in
   whatever extra space is left over above that cap, instead of only growing downward. */
.gcards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 18px;
  flex: 1;
  min-height: 0;
  max-height: 700px;
  margin: auto 0;
}
@media (max-width: 980px) { .gcards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .gcards { grid-template-columns: 1fr; } }

.gcard {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 24px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: var(--shadow-sm); transition: transform .18s var(--ease), box-shadow .18s, border-color .18s;
  text-align: left;
}
.gcard.live:hover { border-color: #FFC4AA; transform: translateY(-3px); box-shadow: 0 18px 34px -22px rgba(255,97,43,.55); }
.gcard.locked { opacity: .72; }

.gcard .gn {
  font: 800 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--or);
}
.gcard.locked .gn { color: var(--mut); }
.gcard h3 { font: 800 19px var(--font); color: var(--ink); line-height: 1.2; margin: 0; }
.gcard .gp { font-size: 15px; line-height: 1.5; color: var(--mut); margin: 0; }
.gcard .gtake { display: flex; flex-direction: column; gap: 2px; }
.gcard .gk { font: 800 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.gcard .gv { font-size: 14px; line-height: 1.4; color: var(--body); margin: 0; }
.gcard .gbtns { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; }