/* Montana's Flow V7 — smooth scrolling + mobile UX */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,43,91,.58) #080507;
}
body { overscroll-behavior-y: none; }
* { -webkit-tap-highlight-color: transparent; }

/* Chromium/WebKit scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #080507; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(255,82,116,.8), rgba(142,13,48,.78));
  border: 3px solid #080507;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ff6686, #c91448);
}

/* subtle sticky-header state */
header.mf-scrolled,
.about-header.mf-scrolled {
  background: rgba(7,4,6,.91) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.24), 0 1px 0 rgba(255,43,91,.08);
}

/* Mobile menu button */
.mf-mobile-menu-button {
  display:none;
  width:40px;
  height:40px;
  flex:0 0 40px;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,43,91,.17);
  border-radius:10px;
  background:rgba(255,255,255,.025);
  color:#f5f5f8;
  cursor:pointer;
}
.mf-mobile-menu-button span,
.mf-mobile-menu-button::before,
.mf-mobile-menu-button::after {
  content:"";
  display:block;
  position:absolute;
  width:18px;
  height:1.5px;
  border-radius:2px;
  background:currentColor;
  transition:transform .24s ease, opacity .2s ease;
}
.mf-mobile-menu-button { position:relative; }
.mf-mobile-menu-button::before { transform:translateY(-6px); }
.mf-mobile-menu-button::after { transform:translateY(6px); }
.mf-mobile-menu-button.is-open span { opacity:0; }
.mf-mobile-menu-button.is-open::before { transform:rotate(45deg); }
.mf-mobile-menu-button.is-open::after { transform:rotate(-45deg); }

.mf-mobile-nav {
  display:none;
  position:fixed;
  top:69px;
  left:12px;
  right:12px;
  z-index:99;
  padding:10px;
  border:1px solid rgba(255,43,91,.18);
  border-radius:16px;
  background:rgba(10,6,8,.96);
  box-shadow:0 22px 60px rgba(0,0,0,.55),0 0 32px rgba(255,43,91,.07);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  transform:translateY(-8px) scale(.985);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease, transform .24s cubic-bezier(.16,1,.3,1);
}
.mf-mobile-nav.is-open { opacity:1; transform:none; pointer-events:auto; }
.mf-mobile-nav a,
.mf-mobile-nav button {
  width:100%;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 14px;
  border:0;
  border-radius:11px;
  background:transparent;
  color:#c7c6d0;
  text-decoration:none;
  font:inherit;
  font-size:14px;
  font-weight:600;
  text-align:left;
  cursor:pointer;
}
.mf-mobile-nav a:hover,
.mf-mobile-nav button:hover,
.mf-mobile-nav .active { background:rgba(255,43,91,.07); color:#fff; }
.mf-mobile-nav .mf-mobile-product {
  margin:5px 0;
  border:1px solid rgba(255,43,91,.13);
  color:#ff7894;
}
.mf-mobile-nav .mf-mobile-product small { color:#777786; font-size:10px; font-weight:500; }
.mf-mobile-nav-backdrop {
  display:none;
  position:fixed;
  inset:69px 0 0;
  z-index:98;
  background:rgba(0,0,0,.28);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}
.mf-mobile-nav-backdrop.is-open { opacity:1; pointer-events:auto; }
body.mf-menu-open { overflow:hidden; }

@media (max-width: 820px) {
  html { scroll-padding-top:74px; }
  ::-webkit-scrollbar { width:5px; }

  header:not(.social-proof-heading):not(.about-section-heading),
  .about-header {
    min-height:69px !important;
    padding:12px 16px !important;
    gap:10px;
  }
  header:not(.social-proof-heading):not(.about-section-heading) > nav,
  .about-header > nav { display:none !important; }
  header .logo-container,
  .about-header .logo-container { gap:9px !important; min-width:0; }
  header .logo-icon,
  .about-header .logo-icon { width:34px !important; height:34px !important; flex:0 0 34px; }
  header .logo-text,
  .about-header .logo-text { font-size:17px !important; white-space:nowrap; }
  header .user-section,
  .about-header .user-section { margin-left:auto; gap:8px !important; }
  header .status-badge,
  .about-header .status-badge,
  header .discord-header-button,
  .about-header .discord-header-button { display:none !important; }
  header .header-auth-link { display:none; }
  header .header-auth-button { padding:8px 10px !important; font-size:11px !important; }
  header .avatar,
  .about-header .avatar { width:36px !important; height:36px !important; }
  .mf-mobile-menu-button { display:inline-flex; }
  .mf-mobile-nav,.mf-mobile-nav-backdrop { display:block; }

  /* Home */
  .hero-container {
    grid-template-columns:1fr !important;
    gap:34px !important;
    padding:52px 20px 48px !important;
    min-height:auto !important;
  }
  .hero-copy, .hero-content { max-width:100% !important; }
  .hero-container h1, .hero-title { font-size:clamp(38px,11vw,54px) !important; line-height:1.04 !important; letter-spacing:-2px !important; }
  .hero-container p, .hero-subtitle { max-width:100% !important; font-size:14px !important; }
  .hero-actions { flex-wrap:wrap; }
  .hero-card, .engine-card, .settings-card { width:100% !important; max-width:100% !important; }
  .toast-notification { right:8px !important; top:-18px !important; transform:scale(.9); transform-origin:top right; }
  .card-tabs { gap:12px !important; font-size:12px !important; overflow-x:auto; }
  .toggle-row { padding:13px 14px !important; }

  .social-proof-section { padding:68px 0 72px !important; }
  .social-proof-heading { width:calc(100% - 32px) !important; margin:0 auto 24px !important; padding:0 !important; display:block !important; }
  .social-proof-heading h2 { font-size:clamp(30px,9vw,44px) !important; }
  .social-proof-heading p { margin-top:10px !important; max-width:100% !important; }
  .reviews-marquee, .reviews-track { max-width:100vw; }

  /* About */
  .about-wrap,
  .about-feedback .about-wrap,
  .about-footer-grid,
  .about-footer-bottom { width:calc(100% - 32px) !important; }
  .about-hero { grid-template-columns:1fr !important; gap:24px !important; padding:46px 0 28px !important; }
  .about-hero-copy { max-width:100% !important; }
  .about-hero h1 { font-size:clamp(40px,11vw,57px) !important; line-height:1.02 !important; letter-spacing:-2px !important; }
  .about-hero-art { display:block !important; min-height:220px !important; margin:0 !important; }
  .about-hero-art img { height:230px !important; width:118% !important; right:-9% !important; }
  .about-features { grid-template-columns:1fr !important; gap:10px !important; }
  .about-feature-card { min-height:auto !important; }
  .about-testimonial { flex-basis:min(84vw,350px) !important; }
  .about-story { grid-template-columns:1fr !important; padding:18px !important; }
  .about-stats { grid-template-columns:repeat(2,1fr) !important; }

  /* Auth */
  .auth-shell {
    width:calc(100% - 28px) !important;
    grid-template-columns:1fr !important;
    gap:28px !important;
    padding:38px 0 48px !important;
  }
  .auth-brand { text-align:center; }
  .auth-brand h1 { font-size:clamp(36px,10vw,48px) !important; }
  .auth-brand p { margin-inline:auto; }
  .auth-card { width:100%; padding:23px 18px !important; border-radius:18px !important; }
  .reset-feature-list { display:none !important; }

  /* Account/profile */
  .account-main { width:calc(100% - 28px) !important; padding-left:0 !important; padding-right:0 !important; }
  .account-summary { gap:18px; }
  .account-products-grid { grid-template-columns:1fr !important; }
  .account-title-row { align-items:flex-start !important; gap:10px; }
  .account-sync-badge { white-space:nowrap; }

  /* Footer */
  .site-footer { margin-top:44px; }
  .site-footer-grid,
  .site-footer-bottom { width:calc(100% - 28px) !important; }
  .site-footer-grid { grid-template-columns:1fr 1fr !important; gap:24px 18px !important; padding-top:28px !important; }
  .site-footer-brand,.site-footer-help { grid-column:1/-1 !important; }
  .site-footer-brand p { max-width:300px; }
  .site-footer-help { min-height:auto !important; }
}

@media (max-width: 480px) {
  header .logo-text,.about-header .logo-text { font-size:15px !important; }
  header .header-auth-button { display:none !important; }
  .hero-container { padding-left:16px !important; padding-right:16px !important; }
  .hero-actions,.about-actions { display:grid !important; grid-template-columns:1fr !important; }
  .hero-actions a,.hero-actions button,.about-actions a { width:100%; justify-content:center; }
  .about-hero-art { min-height:185px !important; }
  .about-hero-art img { height:195px !important; }
  .site-footer-grid { grid-template-columns:1fr !important; }
  .site-footer-brand,.site-footer-help { grid-column:auto !important; }
  .site-footer-bottom { align-items:center !important; text-align:center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}


/* V8 — mobile-only product media framing */
@media (max-width: 820px) {
  .product-media,
  .product-slider,
  .slider-container,
  .slider-wrapper,
  .product-gallery,
  .product-visual,
  .product-preview {
    min-height: 0 !important;
    height: auto !important;
  }

  .product-slider,
  .slider-container,
  .slider-wrapper {
    aspect-ratio: 16 / 10;
    overflow: hidden;
  }

  .product-slider img,
  .product-slider video,
  .slider-container img,
  .slider-container video,
  .slider-wrapper img,
  .slider-wrapper video,
  .product-gallery img,
  .product-gallery video,
  .product-preview img,
  .product-preview video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  .product-slide,
  .slide,
  .slider-slide {
    height: 100% !important;
    min-height: 0 !important;
  }
}

@media (max-width: 480px) {
  .product-slider,
  .slider-container,
  .slider-wrapper {
    aspect-ratio: 16 / 10;
  }
}


/* V9 — fix the ACTUAL product slider classes on mobile */
@media (max-width: 820px) {
  .products-container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .product-hero-banner {
    margin-bottom: 28px !important;
    border-radius: 18px !important;
  }

  .product-hero-banner .slider-window {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 2 / 1 !important;
    display: block !important;
    background: #09030a !important;
  }

  .product-hero-banner .product-slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  .product-hero-banner .product-slide-image,
  .product-hero-banner .product-slide video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  .product-hero-banner .slider-nav-btn {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
  }

  .product-hero-banner .slider-nav-btn.prev { left: 14px !important; }
  .product-hero-banner .slider-nav-btn.next { right: 14px !important; }

  .product-hero-banner .slider-dots {
    bottom: 12px !important;
  }
}

@media (max-width: 480px) {
  .product-hero-banner .slider-window {
    aspect-ratio: 2 / 1 !important;
  }

  .product-hero-banner .slider-nav-btn {
    width: 40px !important;
    height: 40px !important;
  }
}


/* V10 — restore engine sensitivity sliders on mobile */
@media (max-width: 820px) {
  #slider-x.slider-wrapper,
  #slider-y.slider-wrapper,
  .tab-content .slider-wrapper {
    position: relative !important;
    width: 100% !important;
    height: 20px !important;
    min-height: 20px !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
  }

  #slider-x .slider-bg,
  #slider-y .slider-bg,
  .tab-content .slider-wrapper .slider-bg {
    width: 100% !important;
    height: 8px !important;
    min-height: 8px !important;
    border-radius: 4px !important;
  }

  #slider-x .slider-fill,
  #slider-y .slider-fill,
  .tab-content .slider-wrapper .slider-fill {
    height: 8px !important;
    min-height: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    border-radius: 4px !important;
  }

  #slider-x .slider-thumb,
  #slider-y .slider-thumb,
  .tab-content .slider-wrapper .slider-thumb {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    top: 50% !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
  }
}


/* V11 — mobile social-proof overflow fix + branded rating strip */
.home-rating-strip {
  width: fit-content;
  max-width: calc(100% - 40px);
  margin: 18px auto 26px;
  padding: 13px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid rgba(255,43,91,.14);
  border-radius: 999px;
  background:
    radial-gradient(circle at 18% 50%, rgba(255,43,91,.11), transparent 44%),
    rgba(10,6,8,.76);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.018),
    0 12px 34px rgba(0,0,0,.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.home-rating-stars {
  display:flex;
  align-items:center;
  gap:4px;
  color:#ff4770;
  text-shadow:0 0 10px rgba(255,71,112,.28);
  white-space:nowrap;
}
.home-rating-stars span { font-size:15px; line-height:1; }
.home-rating-strip strong {
  color:#f5f5f8;
  font-size:14px;
  font-weight:800;
  letter-spacing:.2px;
}
.home-rating-divider {
  width:1px;
  height:14px;
  background:rgba(255,255,255,.13);
}
.home-rating-count {
  color:#8e8d9b;
  font-size:11px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  white-space:nowrap;
}

@media (max-width: 820px) {
  .social-proof-heading {
    width: calc(100% - 32px) !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .social-proof-heading > * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .social-proof-heading h2,
  .social-proof-heading p {
    width: 100% !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  .social-proof-heading h2 {
    font-size: clamp(29px, 8.6vw, 42px) !important;
    line-height: .98 !important;
    letter-spacing: -1.7px !important;
  }

  .social-proof-heading p {
    font-size: 13px !important;
    line-height: 1.55 !important;
  }

  .home-rating-strip {
    max-width: calc(100% - 32px);
    margin: 16px auto 24px;
    padding: 12px 15px;
    gap: 10px;
  }

  .home-rating-stars span { font-size:14px; }
  .home-rating-strip strong { font-size:13px; }
  .home-rating-count {
    font-size:10px;
    letter-spacing:1.1px;
  }
}

@media (max-width: 480px) {
  .social-proof-heading {
    width: calc(100% - 28px) !important;
  }

  .social-proof-heading h2 {
    font-size: clamp(27px, 8.2vw, 36px) !important;
    letter-spacing: -1.3px !important;
  }

  .home-rating-strip {
    width: calc(100% - 28px);
    max-width: none;
    border-radius: 14px;
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .home-rating-stars {
    flex: 1 0 auto;
  }

  .home-rating-divider {
    display:none;
  }

  .home-rating-count {
    flex: 0 0 100%;
    text-align:center;
  }
}


/* V12 — social proof mobile polish */
@media (max-width: 820px) {
  /* Make the WHAT PLAYERS SAY heading frame truly edge-to-edge */
  .social-proof-heading {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 18px 20px 17px !important;
    box-sizing: border-box !important;
    border-top: 1px solid rgba(255,43,91,.07);
    border-bottom: 1px solid rgba(255,43,91,.11);
    background:
      linear-gradient(90deg, rgba(255,43,91,.025), transparent 35%, transparent 65%, rgba(255,43,91,.02)),
      rgba(8,5,7,.64);
  }

  .social-proof-heading h2,
  .social-proof-heading p,
  .social-proof-heading .section-kicker,
  .social-proof-heading .eyebrow {
    max-width: 100% !important;
  }

  /* Keep the rating compact and centered like desktop, not stretched */
  .home-rating-strip {
    width: fit-content !important;
    max-width: calc(100% - 28px) !important;
    margin: 18px auto 24px !important;
    padding: 11px 15px !important;
    border-radius: 999px !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 9px !important;
  }

  .home-rating-stars {
    flex: 0 0 auto !important;
  }

  .home-rating-divider {
    display: block !important;
  }

  .home-rating-count {
    flex: 0 0 auto !important;
    text-align: left !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 480px) {
  .social-proof-heading {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .social-proof-heading h2 {
    font-size: clamp(27px, 8.4vw, 35px) !important;
  }

  .home-rating-strip {
    max-width: calc(100% - 20px) !important;
    padding: 10px 12px !important;
    gap: 8px !important;
  }

  .home-rating-stars {
    gap: 3px !important;
  }

  .home-rating-stars span {
    font-size: 12px !important;
  }

  .home-rating-strip strong {
    font-size: 12px !important;
  }

  .home-rating-count {
    font-size: 8.7px !important;
    letter-spacing: .8px !important;
  }
}