/* Skinloop public mobile refinements. Max-width only; desktop untouched. */
@media (max-width: 767px) {
  html, body:not([data-skinloop-app]) { max-width: 100%; overflow-x: clip; -webkit-text-size-adjust: 100%; }
  body:not([data-skinloop-app]) img, body:not([data-skinloop-app]) video, body:not([data-skinloop-app]) svg { max-width: 100%; }
  body:not([data-skinloop-app]) main, body:not([data-skinloop-app]) section, body:not([data-skinloop-app]) footer { max-width: 100vw; }
  body:not([data-skinloop-app]) h1, body:not([data-skinloop-app]) h2, body:not([data-skinloop-app]) h3 { overflow-wrap: anywhere; text-wrap: balance; }
  body:not([data-skinloop-app]) p { overflow-wrap: break-word; }
  body:not([data-skinloop-app]) header nav a, body:not([data-skinloop-app]) header nav button { min-height: 40px; }
  body:not([data-skinloop-app]) header nav > div { max-width: 100%; }
  body:not([data-skinloop-app]) header nav div[class~="lg:flex"] { display: flex; order: 2; gap: 10px; }
  body:not([data-skinloop-app]) header nav div[class~="lg:flex"] > * { margin-inline: 0; }
  body:not([data-skinloop-app]) header nav div[class~="opacity-0"] { opacity: 1; }
  body:not([data-skinloop-app]) header nav a.bg-primary-500 { font-size: 14px; padding: 7px 11px; }
  body:not([data-skinloop-app]) main > section:first-child h1 + p { max-width: min(458px, 100%) !important; }
  body:not([data-skinloop-app]) main > section:first-child > div.relative.z-10 { max-width: 100%; padding-left: 16px; padding-right: 16px; }
  body:not([data-skinloop-app]) main a, body:not([data-skinloop-app]) footer a, body:not([data-skinloop-app]) main button { touch-action: manipulation; }
  body:not([data-skinloop-app]) footer a.bg-primary-500, body:not([data-skinloop-app]) main > section:first-child a.bg-primary-500 { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  body:not([data-skinloop-app]) section button { min-height: 44px; }
  body:not([data-skinloop-app]) .skinloop-game-grid { gap: 14px; }
  body:not([data-skinloop-app]) .skinloop-routing-art, body:not([data-skinloop-app]) .skinloop-coverage-art, body:not([data-skinloop-app]) .skinloop-recurring-art { max-width: 100%; }
  .skinloop-footer { padding-left: 16px; padding-right: 16px; }
  .skinloop-footer nav { flex-wrap: wrap; gap: 8px 20px; }
  .skinloop-footer nav a { display: inline-flex; align-items: center; min-height: 36px; }
  .skinloop-footer__steam { white-space: normal; }
}
@media (max-width: 520px) {
  body:not([data-skinloop-app]) .skinloop-game-grid { grid-template-columns: 1fr; }
  body:not([data-skinloop-app]) .skinloop-game-card { aspect-ratio: 1.4; }
}
@media (max-width: 360px) {
  body:not([data-skinloop-app]) header nav a.bg-primary-500 { padding: 6px 10px !important; font-size: 14px; }
  .skinloop-footer__logos { gap: 12px; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---- Mobile compact pass: hero, CTA, footer ---- */
@media (max-width: 767px) {
  /* Hero stays in normal document flow. */
  body:not([data-skinloop-app]) main > section:first-child {
    height: auto !important; min-height: 0 !important;
    padding-top: 6px; padding-bottom: 18px;
  }
  body:not([data-skinloop-app]) main > section:first-child > div.relative.z-10 {
    transform: none !important; margin-top: 28px !important; margin-bottom: 0;
  }
  body:not([data-skinloop-app]) main > section:first-child h1 { font-size: 26px; line-height: 1.1; }
  body:not([data-skinloop-app]) main > section:first-child h1 + p { font-size: 14px; line-height: 1.4; }
  body:not([data-skinloop-app]) main > section:first-child > div.absolute.inset-0.-z-10 {
    top: 0 !important; height: 100% !important; transform: none !important;
  }

  /* Bottom CTA: shorter copy, no artwork icons or icon on buttons */
  body:not([data-skinloop-app]) footer .footer-float-icon { display: none !important; }
  body:not([data-skinloop-app]) footer > div:first-child > div:first-child { min-height: 0; padding: 36px 0; }
  body:not([data-skinloop-app]) footer > div:first-child > div:first-child > div.flex { min-height: 0; max-width: 90%; }
  body:not([data-skinloop-app]) footer > div:first-child > div:first-child h2,
  body:not([data-skinloop-app]) footer > div:first-child > div:first-child p,
  body:not([data-skinloop-app]) footer a.bg-primary-500 > span { font-size: 0 !important; line-height: 0; }
  body:not([data-skinloop-app]) footer > div:first-child > div:first-child h2::before {
    content: "Accept skin payments"; font-size: 24px; line-height: 1.12; display: block;
  }
  body:not([data-skinloop-app]) footer > div:first-child > div:first-child p::before {
    content: "Let customers pay with the skins they own."; font-size: 13px; line-height: 1.4; display: block;
  }
  body:not([data-skinloop-app]) footer a.bg-primary-500 > span::before {
    content: "Get started"; font-size: 15px; line-height: 1.1;
  }
  body:not([data-skinloop-app]) main > section:first-child a.bg-primary-500 > span::after,
  body:not([data-skinloop-app]) footer a.bg-primary-500 > span::after { display: none !important; }
  body:not([data-skinloop-app]) main > section:first-child a.bg-primary-500 > span { font-size: 0 !important; line-height: 0; }
  body:not([data-skinloop-app]) main > section:first-child a.bg-primary-500 > span::before { content: "Get started"; font-size: 15px; line-height: 1.1; }
  body:not([data-skinloop-app]) main > section:first-child a.bg-primary-500 svg,
  body:not([data-skinloop-app]) footer a.bg-primary-500 svg { display: none !important; }
  body:not([data-skinloop-app]) footer a.bg-primary-500 { min-height: 40px; }
  body:not([data-skinloop-app]) footer h2 + p + div { display: flex; justify-content: center; }

  /* Footer bar: centered, smaller */
  .skinloop-footer { padding: 12px 16px 24px; text-align: center; }
  .skinloop-footer__inner { flex-direction: column; align-items: center; gap: 12px; }
  .skinloop-footer__brand { display: flex; flex-direction: column; align-items: center; }
  .skinloop-footer__brand a > img { width: 104px; height: 25px; }
  .skinloop-footer__brand p { margin-top: 8px; font-size: 11px; }
  .skinloop-footer__logos { justify-content: center; gap: 12px; }
  .skinloop-footer__steam { font-size: 10px; transform: none; justify-content: center; }
  .skinloop-footer__steam img { width: 68px; }
  .skinloop-footer nav { justify-content: center; gap: 4px 16px; padding-top: 0; font-size: 12px; }
  .skinloop-footer nav a { min-height: 30px; }
}

/* ---- Mobile hero simplification: calm, centered, viewport-tall, no skins ---- */
@media (max-width: 767px) {
  body:not([data-skinloop-app]) main > section:first-child {
    min-height: calc(100svh - 64px) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    padding-top: 0; padding-bottom: 40px;
  }
  body:not([data-skinloop-app]) main > section:first-child::before,
  body:not([data-skinloop-app]) main > section:first-child::after,
  html.hero-skins-ready body:not([data-skinloop-app]) main > section:first-child::before,
  html.hero-skins-ready body:not([data-skinloop-app]) main > section:first-child::after {
    content: none !important; display: none !important; animation: none !important; background-image: none !important;
  }
  body:not([data-skinloop-app]) main > section:first-child > div.relative.z-10 {
    margin-top: 0 !important; gap: 20px; width: 100%;
  }
  body:not([data-skinloop-app]) main > section:first-child > div.relative.z-10 > div.flex.max-w-4xl { gap: 20px !important; }
  body:not([data-skinloop-app]) main > section:first-child > div.relative.z-10 > div.flex.max-w-4xl > div:first-child { gap: 18px !important; }
  body:not([data-skinloop-app]) main > section:first-child > div.relative.z-10 > div.flex.max-w-4xl > div:first-child > div:first-child {
    padding: 2px 9px !important; gap: 4px !important; font-size: 11px !important;
  }
  body:not([data-skinloop-app]) main > section:first-child > div.relative.z-10 > div.flex.max-w-4xl > div:first-child > div:first-child::before {
    width: 13px; height: 13px; flex-basis: 13px;
  }
  body:not([data-skinloop-app]) main > section:first-child h1 { font-size: 34px; line-height: 1.08; }
  body:not([data-skinloop-app]) main > section:first-child h1 + p { font-size: 0; line-height: 0; }
  body:not([data-skinloop-app]) main > section:first-child h1 + p::before { content: "Accept skins. Get paid in crypto."; display: block; font-size: 14px; line-height: 1.5; }
  body:not([data-skinloop-app]) main > section:first-child a.bg-primary-500 {
    min-height: 36px; padding: 6px 16px !important; border-width: 2px !important; margin-inline: auto;
  }
  body:not([data-skinloop-app]) main > section:first-child a.bg-primary-500 > span { font-size: 0 !important; line-height: 0; }
  body:not([data-skinloop-app]) main > section:first-child a.bg-primary-500 > span::before {
    content: "Get started"; font-size: 14px; line-height: 1.1;
  }
  body:not([data-skinloop-app]) main > section:first-child > div.relative.z-10 > div.flex.max-w-4xl + div {
    display: flex; justify-content: center;
  }
}