/* =========================================================================
   GLOBAL RESET FOR HORIZONTAL OVERFLOW
   ========================================================================= */
html,
body {
  overflow-x: hidden;
}
/* =========================================================================
   📱  MOBILE OVERRIDES (≤ 599px)
   ========================================================================= */
@media (max-width: 599px) {
  /* Hero Section */
  .hero {
    width: 100%;
    left: 0;
    transform: none;
    margin: 0;
    height: 80vh;
    border-radius: 0 0 40px 40px;
  }
  .hero__text {
    bottom: 10%;
    left: 6%;
  }
  .hero__text h1 {
    font-size: clamp(2.2rem, 9vw + 0.5rem, 3.4rem);
    line-height: 1.15;
  }
  .full-bleed,
  .full-bleed.two-col-wrapper {
    width: 100%;
    margin: 0;
    padding: 1.5rem 1rem;
  }

  /* “As Seen On” carousel */
  .seen-on__carousel {
    overflow-x: hidden;
    padding: 0 1rem;
  }
  .seen-on__track {
    display: flex;
    justify-content: space-between;
    animation-duration: 10s;
  }
  .seen-on__track img {
    flex: 0 0 auto;
    width: 90px;
    margin: 0 30px; 
  }
  .seen-on__track img[src*="spotlight-logo"] {
    width: 120px;
  }

  /* Hero Text */
  .full-bleed.two-col-wrapper {
    width: 100%;
    margin: 0;
    padding: 0 1rem;
    box-sizing: border-box;
  }
  .two-col-grid {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }
  .box {
    padding: 1rem 0;
  }
  .box--label h3 {
    font-size: clamp(1.25rem, 5vw + 0.4rem, 1.6rem);
    text-align: center;
  }
  .box--content p {
    left: auto;
    transform: none;
    font-size: clamp(0.95rem, 4vw + 0.3rem, 1.25rem);
    line-height: 1.45;
    text-align: justify;
  }
  .two-col-grid .box--slogan {
    opacity: 0;
    transform: translateY(2rem);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    padding: 0 0.5rem;
    margin: 1.5rem 0;
  }
  .two-col-grid .box--slogan.revealed {
    opacity: 1;
    transform: translateY(0);
  }
  .two-col-grid .box--slogan h2 {
    font-size: clamp(1.4rem, 8vw + 0.5rem, 2rem);
    line-height: 1.3;
    text-align: center;
  }

  /* Testimonials */
  .full-bleed.testimonials {
    padding: 2rem 1rem;
  }
  .testimonial-text {
    font-size: clamp(0.9rem, 3.5vw, 1.1rem);
    line-height: 1.4;
  }
  .testimonial-name {
    font-size: clamp(0.95rem, 4vw, 1.2rem);
  }
  .testimonial-avatar {
    width: 50px;
    height: 50px;
  }

  /* Info Cards */
  .cards.row-1,
  .cards.row-2 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .cards.row-1 .card,
  .cards.row-2 .card {
    flex: none;
    position: relative;
    min-height: 350px;
  }

  .info-cards.full-bleed {
    width: 100%;
    margin: 0;
    padding: 2rem 1rem;
  }

  .info-cards-heading__title {
    font-size: clamp(1.2rem, 5vw + 0.5rem, 1.8rem);
  }
  .card__heading {
    font-size: clamp(1.6rem, 4vw + 0.3rem, 1.6rem);
  }
  .card__text {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    width: calc(100% - 2rem);
    font-size: clamp(1rem, 2.5vw + 0.5rem, 1.4rem);
    line-height: 1.4;
    opacity: 0;
    transform: translateY(1rem);
    transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s;
  }
  .card__text.revealed {
    opacity: 1;
    transform: translateY(0);
  }

  /* The PLatform */
  .three-split-section {
    margin-top: 20px;
    padding: 60px 1rem;
  }
  .slide-caption h3 {font-size: clamp(1rem, 3.5vw + 0.2rem, 1.2rem);}
  .slide-caption p {font-size: clamp(0.6rem, 3vw + 0.2rem, 0.8rem);}

  /* 3 Way Action Cards */
  .action-card__cta {font-size: clamp(1.8rem, 6vw + 0.2rem, 2.4rem);}
  .action-card__subtitle {font-size: clamp(0.95rem, 4vw + 0.3rem, 1.2rem);}
  .stack-card__heading {
    font-size: clamp(1.4rem, 5vw + 0.3rem, 1.8rem);
    margin-bottom: 0.5rem;
  }
  .stack-card__text {
    font-size: clamp(0.8rem, 4vw + 0.2rem, 1rem);
    line-height: 1.5;
  }

  /* Newsletter + CTA + Pricing */
  .newsletter-section { margin-top: 1.5rem; }
  .box--newsletter {padding: 2rem 1rem;}
  .box--newsletter .box__title {font-size: clamp(1.6rem, 5vw, 2rem);}
  .box--newsletter .box__subtitle {font-size: clamp(1rem, 4vw, 1.3rem);}
  .scroll-reveal-text.full-bleed {margin-top: 1rem; padding: 2rem 1rem;}
  .scroll-reveal-text .sr-lines {font-size: clamp(2rem, 7vw, 3rem);}
  #pricing.pricing {margin-top: 2rem; margin-bottom: 2rem;}
  .pricing__header h2 {font-size: clamp(1.8rem, 5vw, 2.2rem);}
  .pricing__header p {font-size: clamp(0.9rem, 3.5vw, 1.1rem);}
  .pricing__price {font-size: clamp(1.5rem, 6vw, 2rem);}
  .pricing__card h3 {font-size: clamp(1.2rem, 4vw, 1.5rem);}
  .pricing__features li {font-size: clamp(0.8rem, 3vw, 1rem);}
  .get-repped-button.small {font-size: clamp(0.8rem, 3vw, 1rem);}
}

/* ===============================================================
   PLATFORM • stacked phones & portrait tablets – Combined Query
   =============================================================== */
@media (max-width: 599px),
       (min-width: 600px) and (max-width: 1199px) and (orientation: portrait) {

  .the-platform.full-bleed {
    margin-top: 60px;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 0 1rem;
  }

  .carousel-container     { overflow: visible; }
  .carousel-track         { display: flex; flex-direction: column; gap: 1.5rem; transform: none; }
  .slide      { width: 100%; margin: 0; opacity: 1; position: relative; }
  .slide video{ border-radius: 16px; width: 100%; height: auto; }
  .slide.clone { display: none; }
  .carousel-nav{ display: none; }

  /* Three Card Split Action Cards */
  .three-split-cards {flex-direction: column;gap: 1.5rem;}
  .three-split-cards > * {
    flex: none;
    width: 100%;
    min-height: auto;
  }
  .three-split-cards .action-card {min-height: 500px;}
  .three-split-cards .stack-cards .stack-card {min-height: 300px;}
  .action-card__subtitle,
  .stack-card__text {
    opacity: 0;
    transform: translateY(1rem);
    transition: 
      opacity 0.6s ease 0.3s,
      transform 0.6s ease 0.5s; 
  }
  .action-card__subtitle.revealed,
  .stack-card__text.revealed {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================================
   💻  TABLET OVERRIDES (600px – 1199px)
   ========================================================================= */
@media (min-width: 600px) and (max-width: 1199px) {
  /* Hero Section */
  .hero {
    width: calc(100vw - 40px);
    left: 50%;
    transform: translateX(-50%);
    height: 90vh;
    border-radius: 0 0 52px 52px;
  }

  .hero__text {
    bottom: 8%;
    left: 6%;
  }
  .hero__text h1 {
    font-size: clamp(4.5rem, 5vw + 1rem, 5.6rem);
    line-height: 1.12;
  }

  /* “As Seen On” carousel */
  .seen-on__track img {
    width: 130px;
    margin: 0 60px;
  }

  /* Hero Text */
  .box--content p {
    font-size: clamp(1.2rem, 2.5vw + 1rem, 1.4rem);
    line-height: 1.35;
  }
  .two-col-grid .box--slogan h2 {
    opacity: 0;
    transform: translateY(1.5rem);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  }
  .two-col-grid .box--slogan h2.revealed {
    opacity: 1;
    transform: translateY(0);
  }
  .box--slogan h2 {
    font-size: clamp(3rem, 3vw + 1rem, 4rem);
    line-height: 1.2;
    margin-bottom: 2rem;
    text-align: center;
  }

  /*info cards */
  .cards.row-1,
  .cards.row-2 {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }
  .cards.row-1 .card,
  .cards.row-2 .card {
    flex: none;
    min-height: 400px;
  }
  .info-cards-heading__title {
    font-size: clamp(1.6rem, 4vw + 0.5rem, 2rem);
  }
  .card__text {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    width: calc(100% - 2rem);
    opacity: 0;
    transform: translateY(1rem);
    transition: opacity 0.4s ease 0.4s, transform 0.4s ease 0.4s;
  }
  .card__text.revealed {
    opacity: 1;
    transform: translateY(0);
  }

  /* 3-Way Action Cards */
  .three-split-section {
    margin-top: 40px;
    padding: 80px 2rem;
  }

  /* Newsletter and CTA */
  .newsletter-section { margin-top: 2rem; }
  .box--newsletter {padding: 3rem 1.5rem;}
  .box--newsletter .box__title {font-size: clamp(1.8rem, 4vw, 2.2rem);}
  .box--newsletter .box__subtitle {font-size: clamp(1.2rem, 3.5vw, 1.5rem);}
  .scroll-reveal-text.full-bleed {margin-top: 2rem; padding: 3rem 2rem;}
  .scroll-reveal-text .sr-lines {font-size: clamp(3rem, 5vw, 4rem);}
  #pricing.pricing {margin-top: 3rem; margin-bottom: 3rem;}
  
}