@media (max-width: 900px) {
  .main-nav {
    display: none;
  }

  .menu-toggle {
    display: flex;
    /* Performance patch: avoid backdrop filter on mobile controls. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .header-actions {
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .site-header {
    position: relative;
    top: 0;
    max-width: 100%;
    padding: 10px 16px;
    margin: 0;
    backdrop-filter: none;
    background: #1a1117;
    box-shadow: none;
  }

  :root {
    /* Performance patch: soften global shadows to reduce paint cost on mobile. */
    --shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.35);
  }

  /* Performance patch: reduce expensive paints during scroll on mobile. */
  .nav-overlay {
    /* Performance patch: replace backdrop blur with a solid overlay on mobile. */
    background: linear-gradient(
      180deg,
      rgba(30, 20, 28, 0.92),
      rgba(16, 12, 18, 0.96)
    );
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .glass-panel {
    /* Performance patch: disable panel blur and soften shadows on mobile. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35);
  }

  .glass-panel::after {
    display: none;
  }

  .glass-panel::before {
    /* Performance patch: remove extra overlay layer to reduce paint cost. */
    display: none;
  }

  .hot-deal-pill,
  .testimonial-pill {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35);
  }

  body[data-bg="sorbet"]::before,
  body[data-bg="sorbet"]::after {
    /* Performance patch: stop background animation during scroll on mobile. */
    animation: none;
    filter: none;
    opacity: 0;
  }

  /* Performance patch: replace heavy background glows with a single static gradient. */
  body[data-bg="sorbet"] {
    background:
      radial-gradient(circle at 18% 18%, rgba(255, 214, 170, 0.32), transparent 52%),
      radial-gradient(circle at 78% 10%, rgba(255, 190, 230, 0.26), transparent 56%),
      linear-gradient(180deg, #2a1822 0%, #1b0f15 60%, #140b10 100%);
  }

  body[data-panel="blush"] {
    /* Mobile brightness lift: lighter panel/card tones for a brighter feel. */
    --panel-a-rgb: 68, 44, 56;
    --panel-b-rgb: 34, 22, 30;
    --panel-dark-a-rgb: 52, 34, 44;
    --panel-dark-b-rgb: 26, 18, 24;
    --card-rgb: 50, 32, 42;
    --card-soft-rgb: 62, 38, 50;
  }

  .hero-panel {
    overflow: visible;
    box-shadow: var(--shadow-soft);
  }

  .hero-overlay {
    display: none;
  }

  .hero-layout {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .hero-portrait-wrap {
    order: 1;
    margin: 0 auto 16px;
  }

  .hero-text {
    order: 2;
  }

  .hero-newsletter {
    margin-top: 18px;
    padding-top: 12px;
  }

  .hero-newsletter-title {
    font-size: 1rem;
  }

  .two-column {
    grid-template-columns: minmax(0, 1fr);
  }

  .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .section {
    padding: 36px 14px 56px;
  }

  .experience-image-wrapper {
    height: clamp(200px, 60vw, 260px);
  }

  .experience-display.is-marquee {
    padding: 0;
  }

  .experience-display.is-marquee .experience-slide {
    flex: 0 0 88vw;
  }

  .experience-display.is-marquee .experience-image-wrapper {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .partners-strip-container {
    margin-top: 16px;
  }

  .partners-strip {
    --marquee-duration: 64s;
  }

  .experience-display {
    display: block;
  }

  .experience-strip {
    gap: 16px;
    --marquee-duration: 64s;
  }

  .testimonials-strip {
    gap: 16px;
    --marquee-duration: 64s;
  }

  .testimonial-slide {
    flex: 0 0 88vw;
  }

  .experience-cards {
    display: none;
  }

  .newsletter-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .newsletter-submit {
    width: 100%;
  }

  .js .section-fade {
    /* Performance patch: avoid repeated section paints during scroll on mobile. */
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .js .fade-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

@media (max-width: 480px) {
  .brand-wordmark {
    font-size: 1.3rem;
  }

  .glass-panel {
    padding: 18px 16px;
  }

  .hero-portrait-oval {
    width: 180px;
  }

  body[data-visual="aurora"] .hero-portrait-oval {
    width: 200px;
  }
}