/* ============================================================================
   Sky - homepage design system
   ----------------------------------------------------------------------------
   One type scale, one spacing rhythm, one card surface. Loaded after
   custom.css, so it is additive: remove the <link> in layouts/master.njk and
   the theme goes back exactly as it was.
   ============================================================================ */

:root {
  /* vertical rhythm - every section breathes the same */
  --sky-section-py: clamp(56px, 6.5vw, 100px);

  /* type scale */
  --sky-h1: clamp(2.25rem, 5.2vw, 4.25rem);
  --sky-h2: clamp(1.75rem, 3.2vw, 2.75rem);
  --sky-sub: clamp(0.95rem, 1.1vw, 1.0625rem);
  --sky-eyebrow: 0.75rem;

  /* surfaces */
  --sky-ink: #fafafa;
  --sky-muted: #8a8a90;
  --sky-line: rgba(216, 216, 216, 0.12);
  --sky-line-hover: rgba(216, 216, 216, 0.3);
  --sky-card: linear-gradient(180deg, rgba(24, 24, 27, 0.72), rgba(9, 9, 11, 0.72));
  --sky-radius: 16px;
}

/* ---------- 1. one rhythm for every homepage section ---------- */
.games-section,
.pm-section,
.cta-discord-section,
.text-video-section,
.faq,
.text-block,
#app .component.container.py-20 {
  padding-top: var(--sky-section-py) !important;
  padding-bottom: var(--sky-section-py) !important;
}

/* The hero was 1243px tall because padding stacked three levels deep:
   .hero (0) + .container (96/96) + .content (128/120). Collapse it to one. */
.hero.height-short {
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.hero > .container {
  padding-top: clamp(56px, 6vw, 88px) !important;
  padding-bottom: clamp(44px, 4.5vw, 68px) !important;
}

.hero .content {
  padding-top: 0 !important;
  padding-bottom: clamp(28px, 3.5vw, 48px) !important;
}

/* ---------- 2. one type scale ---------- */
.hero h1 {
  font-size: var(--sky-h1) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.03em !important;
  margin-bottom: 1.1rem !important;
}

.pc-main-title,
.pm-title,
.cta-main-title,
.tv-title,
.faq-title,
.section-title h2,
.component > .container > h2,
.component > h2 {
  font-size: var(--sky-h2) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.022em !important;
  margin-bottom: 0.65rem !important;
}

/* supporting line under a section title */
.pc-main-subtitle,
.pm-subtitle,
.cta-sub-title,
.tv-subtitle,
.faq-subtitle {
  font-size: var(--sky-sub) !important;
  line-height: 1.6 !important;
  color: var(--sky-muted) !important;
  max-width: 54ch;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* small uppercase label above a title */
.pc-badge, .pm-badge, .cta-badge, .tv-badge, .faq-badge,
.pricing-plan-badge-mono {
  font-size: var(--sky-eyebrow) !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

/* ---------- 3. consistent gap between a section header and its content ---------- */
.pc-header, .pm-header, .faq-header, .tv-header, .cta-header {
  margin-bottom: clamp(32px, 3.6vw, 56px) !important;
}

/* ---------- 4. one card surface ---------- */
.product-neo-card,
.game-card,
.pm-card,
.faq .accordion-item,
.testimonial {
  border-radius: var(--sky-radius) !important;
  border: 1px solid var(--sky-line) !important;
  background: var(--sky-card) !important;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease !important;
}

.product-neo-card:hover,
.game-card:hover,
.pm-card:hover,
.testimonial:hover {
  border-color: var(--sky-line-hover) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45) !important;
}

/* ---------- 5. quieter decorative glows, so content leads ---------- */
.pm-glow-1, .pm-glow-2, .pc-glow-1, .pc-glow-2 {
  opacity: .5 !important;
}

/* ---------- 6. mobile ---------- */
@media (max-width: 575.98px) {
  :root { --sky-section-py: 48px; }
  .hero > .container {
    padding-top: 48px !important;
    padding-bottom: 36px !important;
  }
}