@media (max-width: 992px) {

  canvas.games-gallery-webgl {

    top: 50% !important;

  }

  .container.overlap-top {
    margin: -250px auto 75px auto;
  }

  .demo-cta-card {
    flex-direction: column;
    text-align: center;
    padding: var(--space-lg);
  }

  .demo-cta-card__image {
    max-width: 100%;
  }

  .demo-cta-card__content {
    order: 1;
  }

  .demo-cta-card__image {
    order: 2;
  }

  .demo-cta-card__actions {
    flex-direction: column;
    width: 100%;
    order: 3;
  }

  .country-select {
    width: 100%;
  }

  .btn--large {
    width: 100%;
  }

  .cta-overlap {
    margin-top: -120px;
    margin-bottom: -120px;
  }

  .hero {
    padding-bottom: 160px !important;
  }

  section#product-features {
    padding-top: 160px !important;
  }
}

@media (max-width: 768px) {
  .demo-cta-card__content h3 {
    font-size: var(--text-xl);
  }

  .demo-cta-card__image {
    max-width: 280px;
    margin: 0 auto;
    min-width: 100%;
  }

  .cta-overlap {
    margin-top: -80px;
    margin-bottom: -80px;
  }

  .font-thin {
    font-weight: 900;
    font-size: var(--text-5xl);
  }

  section#product-features {
    padding-top: 120px !important;
  }
}

@media (max-width: 768px) {
  .logo-marquee img {
    height: 40px;
    max-width: 120px;
  }

  .logo-marquee {
    -webkit-mask-image: linear-gradient(to right,
        transparent 0%,
        black 20%,
        black 80%,
        transparent 100%);
    mask-image: linear-gradient(to right,
        transparent 0%,
        black 20%,
        black 80%,
        transparent 100%);
  }
}

@media (max-width: 768px) {
  .hidden-mobile {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .homepage-pricing {
    grid-template-columns: 1fr;
    min-height: auto;
    display: flex;
    flex-direction: column;
  }

  .homepage-pricing .card__content {
    width: 100%;
    padding-right: var(--space-xl);
    /* Restore padding on mobile if needed or keep 0? Content usually needs padding. */
    /* Reseting padding to match standard card content on mobile */
    padding: var(--space-xl);
    order: 1;
    /* Content first */
  }

  .homepage-pricing .card__image {
    width: 100%;
    height: 300px;
    /* Give it some height or keep intrinsic */
    order: 2;
    /* Image second */
    min-height: 300px;
  }
}

@media (max-width: 768px) {
  .cookie-banner__content {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }

  .cookie-banner__actions {
    width: 100%;
    justify-content: flex-end;
  }
}

@media (max-width: 768px) {
  .cookie-modal__footer {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-md);
  }

  .cookie-modal__actions-group {
    display: contents;
    /* Allows children to participate in parent flex container */
  }

  .cookie-modal__footer button {
    width: 100%;
    margin: 0 !important;
    /* Override any potential margins */
  }

  /* Order for Mobile: Accept (1), Save (2), Decline (3), Cancel (4) */
  .cookie-modal__accept-all {
    order: 1;
  }

  .cookie-modal__save {
    order: 2;
  }

  .cookie-modal__decline-all {
    order: 3;
  }

  .cookie-modal__cancel {
    order: 4;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .home-heading-icon {
    height: calc(1.25em / 1.5);
    margin-right: 0.15em;
    /* Reduce margin slightly too */
  }
}

@media (max-width: 768px) {
  .cta-right {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }

  .cta-right-text,
  .cta-right-buttons {
    width: 100%;
    margin-left: 0;
  }

  .cta-right-buttons {
    justify-content: flex-start;
    margin-top: var(--space-lg);
  }
}

@media (max-width: 769px) {
  .light-shafts {
    top: 0;

    z-index: 0;
    mix-blend-mode: hard-light;

  }
}


@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
  }

  .stats-grid .stat-item .stat-value {
    font-size: 1.5rem;
  }

  .stats-grid .stat-item .stat-label {
    font-size: 0.7rem;
    line-height: 1.2;
    text-align: center;
  }

  .stats-grid .stat-item.divided {
    grid-column: 1 / -1;
    border-left: none;
    padding-top: var(--space-lg);
    border-top: solid 1px var(--color-border);
    margin-top: var(--space-md);
  }

  .stats-grid .stat-item:last-child .font-thin {
    font-size: 2rem;
  }
}