/* ============================================================
   Forge AI Labs Academy — V15 final responsive composition
   Loaded after styles.css to provide one authoritative layout.
   ============================================================ */

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  html,
  body,
  main {
    overflow-x: clip;
  }
}

/* The visual fits by geometry. The hero itself does not crop it. */
.hero {
  max-width: min(var(--max), calc(100% - 40px));
  overflow: visible !important;
}

.hero > .eyebrow,
.hero > h1,
.hero > .hero-copy,
.hero > .hero-facts,
.hero > .hero-actions,
.hero > .price-grid,
.hero > .pricing-note {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.hero::before {
  top: 118px !important;
  right: 24px !important;
  left: auto !important;
  width: clamp(370px, 38vw, 520px) !important;
  max-width: calc(100% - 48px);
  opacity: .64 !important;
}

.hero-network {
  top: 146px !important;
  right: 32px !important;
  left: auto !important;
  width: clamp(330px, 30vw, 410px) !important;
  height: clamp(330px, 30vw, 410px) !important;
  opacity: .62 !important;
}

.js:not(.loader-complete) .hero-network {
  opacity: 0 !important;
}

.js.loader-complete .hero-network {
  opacity: .62 !important;
}

.hero-network .ring-one { inset: 5% !important; }
.hero-network .ring-two { inset: 19% !important; }
.hero-network .network-core { inset: 34% !important; }
.hero-network .node-one { top: 13% !important; left: 15% !important; }
.hero-network .node-two { top: 37% !important; right: 2% !important; }
.hero-network .node-three { right: 18% !important; bottom: 8% !important; }

/* Balanced laptop and tablet layout. */
@media (min-width: 701px) and (max-width: 1040px) {
  .hero {
    max-width: calc(100% - 40px);
  }

  .hero::before {
    top: 128px !important;
    right: 12px !important;
    width: min(44vw, 430px) !important;
    max-width: calc(100% - 24px);
    opacity: .48 !important;
  }

  .hero-network {
    top: 150px !important;
    right: 16px !important;
    width: clamp(280px, 35vw, 350px) !important;
    height: clamp(280px, 35vw, 350px) !important;
    opacity: .48 !important;
  }

  .js.loader-complete .hero-network { opacity: .48 !important; }
}

/* Symmetrical portrait-phone composition. */
@media (max-width: 700px) {
  .hero {
    width: calc(100% - 28px);
    max-width: calc(100% - 28px);
    margin-right: auto;
    margin-left: auto;
    overflow: visible !important;
  }

  .hero::before {
    top: 128px !important;
    right: auto !important;
    left: 6% !important;
    width: 88% !important;
    max-width: 88%;
    opacity: .29 !important;
  }

  .hero-network {
    top: 154px !important;
    right: auto !important;
    left: 14% !important;
    width: 72% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    opacity: .30 !important;
  }

  .js.loader-complete .hero-network { opacity: .30 !important; }

  .hero-network .network-node {
    padding: 6px 8px;
    font-size: 7px;
  }

  .hero-network .network-core {
    box-shadow: 0 0 34px rgba(216, 255, 99, .07);
  }

  .hero h1 {
    max-width: 100%;
    font-size: clamp(48px, 14.4vw, 68px);
    line-height: .96;
    letter-spacing: -.065em;
    overflow-wrap: normal;
  }

  .hero > .eyebrow {
    max-width: 100%;
    font-size: 10px;
    letter-spacing: .145em;
  }

  .hero-copy {
    max-width: 100%;
    font-size: 16px;
    line-height: 1.68;
  }

  .mobile-book {
    width: auto;
    max-width: calc(100% - 20px);
  }
}

/* Extra-safe narrow phones. */
@media (max-width: 360px) {
  .hero::before {
    top: 134px !important;
    left: 7% !important;
    width: 86% !important;
  }

  .hero-network {
    top: 160px !important;
    left: 15% !important;
    width: 70% !important;
  }

  .hero h1 {
    font-size: clamp(46px, 14vw, 54px);
  }

  .hero-network .network-node {
    padding: 5px 7px;
    font-size: 6.5px;
  }
}

/* Complete right-side composition for landscape phones. */
@media (max-height: 600px) and (orientation: landscape) {
  .hero {
    width: calc(100% - 40px);
    max-width: calc(100% - 40px);
    padding-top: 122px;
    overflow: visible !important;
  }

  .hero::before {
    top: 96px !important;
    right: 3% !important;
    left: auto !important;
    width: min(39vw, 300px) !important;
    max-width: 39vw;
    opacity: .31 !important;
  }

  .hero-network {
    top: 112px !important;
    right: 5% !important;
    left: auto !important;
    width: min(31vw, 240px) !important;
    height: min(31vw, 240px) !important;
    opacity: .32 !important;
  }

  .js.loader-complete .hero-network { opacity: .32 !important; }

  .hero h1 {
    max-width: 78%;
    font-size: clamp(48px, 7vw, 72px);
    line-height: .94;
  }

  .hero-copy {
    max-width: 68%;
  }
}

/* Large-screen refinement: full visual with comfortable edge clearance. */
@media (min-width: 1440px) {
  .hero::before {
    right: 12px !important;
    width: 540px !important;
  }

  .hero-network {
    right: 28px !important;
    width: 430px !important;
    height: 430px !important;
  }
}

/* Keep the whole visual visible when motion is reduced as well. */
@media (prefers-reduced-motion: reduce) {
  .hero-network {
    transform: none !important;
  }
}