/* ============================================================
   KX LANDING FIT SCREEN
   Scope: landing page content only.
   Does NOT alter navbar structure, navbar links, language, or theme.
   ============================================================ */

/* Keep the navbar untouched; only reduce the content area below it. */
body {
  overflow-x: hidden !important;
}

/* Main landing region should fit the visible viewport under the navbar. */
body > main,
main,
.kx-main,
.kx-page,
.kx-landing,
.kx-gateway,
.kx-home,
.kx-home-page {
  min-height: auto !important;
}

/* First hero section: reduce vertical footprint. */
main > section:first-of-type,
.kx-hero,
.hero,
.landing-hero,
.kx-gateway-hero,
.kx-constitutional-gateway,
.kx-hero-section {
  min-height: calc(100vh - 112px) !important;
  max-height: calc(100vh - 112px) !important;
  padding-top: clamp(12px, 1.4vh, 22px) !important;
  padding-bottom: clamp(10px, 1.2vh, 18px) !important;
  margin-top: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Main hero two-column grid. */
main > section:first-of-type > div,
.kx-hero-grid,
.hero-grid,
.kx-gateway-grid,
.kx-landing-grid,
.kx-hero-content-grid {
  max-height: calc(100vh - 142px) !important;
  display: grid !important;
  align-items: stretch !important;
  gap: clamp(18px, 2vw, 32px) !important;
  box-sizing: border-box !important;
}

/* Left and right hero cards. */
main > section:first-of-type article,
main > section:first-of-type .card,
main > section:first-of-type .kx-card,
main > section:first-of-type .hero-card,
main > section:first-of-type .kx-hero-card,
main > section:first-of-type .kx-panel,
.kx-hero-card,
.kx-gateway-card,
.kx-prism-card,
.kx-visual-card {
  max-height: calc(100vh - 158px) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Landing left text card: make it compact. */
main > section:first-of-type h1,
.kx-hero h1,
.hero h1,
.landing-hero h1,
.kx-gateway-hero h1 {
  font-size: clamp(46px, 5.7vw, 82px) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.055em !important;
  margin-top: clamp(8px, 1vh, 14px) !important;
  margin-bottom: clamp(12px, 1.4vh, 20px) !important;
  max-width: 780px !important;
}

/* Kicker text above title. */
main > section:first-of-type .eyebrow,
main > section:first-of-type .kicker,
main > section:first-of-type [class*="eyebrow"],
main > section:first-of-type [class*="kicker"] {
  margin-bottom: clamp(8px, 1vh, 14px) !important;
  font-size: clamp(10px, 0.8vw, 13px) !important;
  letter-spacing: 0.22em !important;
}

/* Lead paragraph. */
main > section:first-of-type p,
.kx-hero p,
.hero p,
.landing-hero p {
  font-size: clamp(16px, 1.25vw, 22px) !important;
  line-height: 1.5 !important;
  margin-top: 0 !important;
  margin-bottom: clamp(12px, 1.5vh, 20px) !important;
}

/* CTA group and buttons. */
main > section:first-of-type .actions,
main > section:first-of-type .kx-actions,
main > section:first-of-type .hero-actions,
main > section:first-of-type [class*="action"] {
  gap: clamp(10px, 1vw, 16px) !important;
  margin-top: clamp(12px, 1.4vh, 20px) !important;
  margin-bottom: 0 !important;
}

main > section:first-of-type a,
main > section:first-of-type button,
.kx-hero a,
.kx-hero button,
.hero a,
.hero button {
  min-height: 46px !important;
}

/* Large CTA buttons should not consume too much vertical height. */
main > section:first-of-type a[class*="btn"],
main > section:first-of-type button[class*="btn"],
.kx-btn,
.kx-btn-primary,
.kx-btn-secondary {
  min-height: 48px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: clamp(18px, 1.8vw, 28px) !important;
  padding-right: clamp(18px, 1.8vw, 28px) !important;
  font-size: clamp(14px, 1vw, 18px) !important;
}

/* Third button / View Platform Domains should remain visible but compact. */
main > section:first-of-type a:nth-of-type(n+3),
main > section:first-of-type button:nth-of-type(n+3) {
  min-height: 44px !important;
}

/* Visual prism/image panel should fit without forcing page scroll. */
main > section:first-of-type svg,
main > section:first-of-type img,
main > section:first-of-type canvas,
main > section:first-of-type .visual,
main > section:first-of-type .kx-visual,
main > section:first-of-type .kx-prism,
main > section:first-of-type [class*="visual"],
main > section:first-of-type [class*="prism"] {
  max-height: calc(100vh - 190px) !important;
}

/* If the visual card has an inner caption, keep it compact. */
main > section:first-of-type .caption,
main > section:first-of-type [class*="caption"],
main > section:first-of-type [class*="callout"] {
  padding: clamp(12px, 1.2vw, 20px) !important;
  margin-top: clamp(8px, 1vh, 12px) !important;
}

/* Hide lower sections from occupying first viewport; they remain available by scrolling. */
main > section:nth-of-type(n+2) {
  margin-top: clamp(18px, 2vh, 32px) !important;
}

/* Browser-height optimization for common 768px/800px screens. */
@media (max-height: 820px) and (min-width: 900px) {
  main > section:first-of-type,
  .kx-hero,
  .hero,
  .landing-hero,
  .kx-gateway-hero,
  .kx-constitutional-gateway,
  .kx-hero-section {
    min-height: calc(100vh - 98px) !important;
    max-height: calc(100vh - 98px) !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  main > section:first-of-type h1,
  .kx-hero h1,
  .hero h1,
  .landing-hero h1,
  .kx-gateway-hero h1 {
    font-size: clamp(42px, 5.15vw, 70px) !important;
    line-height: 0.95 !important;
    margin-bottom: 12px !important;
  }

  main > section:first-of-type p,
  .kx-hero p,
  .hero p,
  .landing-hero p {
    font-size: clamp(15px, 1.05vw, 19px) !important;
    line-height: 1.42 !important;
    margin-bottom: 12px !important;
  }

  main > section:first-of-type a[class*="btn"],
  main > section:first-of-type button[class*="btn"],
  .kx-btn,
  .kx-btn-primary,
  .kx-btn-secondary {
    min-height: 42px !important;
    font-size: 15px !important;
  }

  main > section:first-of-type svg,
  main > section:first-of-type img,
  main > section:first-of-type canvas,
  main > section:first-of-type [class*="visual"],
  main > section:first-of-type [class*="prism"] {
    max-height: calc(100vh - 170px) !important;
  }
}

/* Very wide desktop: use full width better. */
@media (min-width: 1300px) {
  main > section:first-of-type,
  .kx-hero,
  .hero,
  .landing-hero,
  .kx-gateway-hero,
  .kx-constitutional-gateway,
  .kx-hero-section {
    width: min(100% - 72px, 1720px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  main > section:first-of-type > div,
  .kx-hero-grid,
  .hero-grid,
  .kx-gateway-grid,
  .kx-landing-grid,
  .kx-hero-content-grid {
    width: 100% !important;
  }
}

/* Mobile remains scrollable and readable. */
@media (max-width: 899px) {
  main > section:first-of-type,
  .kx-hero,
  .hero,
  .landing-hero,
  .kx-gateway-hero,
  .kx-constitutional-gateway,
  .kx-hero-section {
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  main > section:first-of-type article,
  main > section:first-of-type .card,
  main > section:first-of-type .kx-card,
  main > section:first-of-type .hero-card,
  main > section:first-of-type .kx-hero-card,
  main > section:first-of-type .kx-panel {
    max-height: none !important;
    overflow: visible !important;
  }

  main > section:first-of-type h1 {
    font-size: clamp(40px, 12vw, 62px) !important;
  }
}