/* ══════════════════════════════════════════════════════
   large-screen.css — Overrides for screens wider than 1400px
   (Big monitors, 1080p+, 4K, large laptops)
   
   CRITICAL: Do NOT touch mobile (≤768px) or standard desktop.
   This file ONLY applies to screens ≥1400px.
   ══════════════════════════════════════════════════════ */

@media (min-width: 1400px) {

  /* ─────────────────────────────────────────
     HERO: Constrain left pane so text never bleeds
     past the center grid line on ultra-wide screens
  ───────────────────────────────────────── */
  .cell-left-pane {
    width: 36vw;
    max-width: 580px;
  }

  .hero__heading {
    font-size: clamp(44px, 4.2vw, 78px);
  }

  .hero__eyebrow {
    margin-bottom: -20px; /* Move tag 10px further up vs base -10px */
  }

  .hero__sub {
    max-width: 480px;
  }

  /* ─────────────────────────────────────────
     FOOTER HEADING: Hard cap width and ensure
     text wraps cleanly without odd layout shifts
  ───────────────────────────────────────── */
  .footer-header {
    max-width: 860px;
    padding: 120px 10vw 60px 10vw;
  }

  .contact-heading {
    font-size: clamp(48px, 4.5vw, 80px);
    line-height: 1.0;
    white-space: nowrap; /* Force single line per <br> — no mid-word wrap */
  }

  /* ─────────────────────────────────────────
     FOOTER INNER: Wider padding on big screens
     so 3-col grid sits inside grid lines correctly
  ───────────────────────────────────────── */
  .footer-inner {
    padding: 64px calc(8vw + 24px) 80px calc(8vw + 24px);
    max-width: 1600px;
    margin: 0 auto;
  }

  /* ─────────────────────────────────────────
     GLOBE FOOTER: On very tall/wide viewports
     push the globe Y-target down a little more
     so it doesn't overlap the heading text.
     This is done in CSS by reserving spacing.
  ───────────────────────────────────────── */
  .site-footer {
    margin-top: 32vh;
  }

  /* ─────────────────────────────────────────
     DEMO SECTION: Cap the grid so spotlight
     cards don't stretch too wide on 4K
  ───────────────────────────────────────── */
  .demo-inner {
    max-width: 1600px;
    margin: 0 auto;
  }

  /* ─────────────────────────────────────────
     PRICING SECTION: Cap inner width
  ───────────────────────────────────────── */
  .pricing-inner {
    max-width: 1400px;
    margin: 0 auto;
  }

  /* ─────────────────────────────────────────
     CONTACT SECTION: Cap inner width
  ───────────────────────────────────────── */
  .contact-inner {
    max-width: 700px;
  }
}

/* Ultra-wide: 1920px+ (4K monitors, big gaming monitors) */
@media (min-width: 1920px) {
  .cell-left-pane {
    width: 34vw;
    max-width: 780px;
  }

  .hero__heading {
    font-size: clamp(64px, 5.5vw, 110px);
  }

  .footer-header {
    max-width: 1000px;
  }

  .contact-heading {
    font-size: clamp(56px, 5vw, 96px);
    white-space: nowrap;
  }

  .footer-inner {
    max-width: 1800px;
  }

  .demo-inner {
    max-width: 1800px;
  }

  .pricing-inner {
    max-width: 1600px;
  }
}