/* mobile-swipe.css — touch-native swipe hero for phones (<=760px).
 * Hidden on desktop. Each page hides its own heavy hero on mobile via a
 * page-level rule (e.g. @media(max-width:760px){ #hero{display:none} }).
 * Inherits the host page's theme through CSS vars (with safe fallbacks). */

.msw { display: none; }

@media (max-width: 760px) {
  .msw { display: block; position: relative; z-index: 2; padding: 20px 0 8px; }
  .msw-intro { padding: 0 20px 4px; text-align: center; }
  .msw-eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 10px; letter-spacing: 2px;
    text-transform: uppercase; color: var(--accent, #10b981); margin-bottom: 14px;
    padding: 5px 11px; border: 1px solid var(--accent, #10b981); border-radius: 999px;
  }
  .msw-title {
    font-size: clamp(22px, 6.5vw, 31px); line-height: 1.14; letter-spacing: -0.4px;
    font-weight: 600; margin: 0 auto 12px; max-width: 330px; color: var(--fg, #fff);
  }
  .msw-title em { font-style: normal; color: var(--accent, #10b981); }
  .msw-sub {
    font-size: 15px; line-height: 1.5; color: var(--fg-75, rgba(255,255,255,0.72));
    max-width: 330px; margin: 0 auto 18px;
  }

  .msw-deck {
    display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; padding: 10px 20px 38px; scrollbar-width: none;
    width: 100%; min-width: 0; max-width: 100%; overscroll-behavior-x: contain;
  }
  .msw-deck::-webkit-scrollbar { display: none; }
  .msw-slide { flex: 0 0 auto; width: 265px; scroll-snap-align: center; }
  .msw-phone {
    position: relative; border-radius: 34px; padding: 8px;
    background: linear-gradient(155deg, #2b2e40, #0a0c12);
    border: 1px solid var(--line, rgba(255,255,255,0.10));
    box-shadow: 0 26px 52px -18px rgba(0,0,0,0.62);
  }
  .msw-screen { position: relative; border-radius: 27px; overflow: hidden; background: #000; aspect-ratio: 480 / 1040; }
  .msw-island { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 76px; height: 20px; background: #000; border-radius: 999px; z-index: 3; }
  .msw-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
  .msw-cap {
    text-align: center; margin-top: 12px; font-family: var(--mono, 'JetBrains Mono', monospace);
    font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--fg-55, rgba(255,255,255,0.55));
  }

  .msw-dots { display: flex; gap: 7px; justify-content: center; margin: 16px 0 4px; }
  .msw-dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--line-2, rgba(255,255,255,0.22));
    border: 0; padding: 0; cursor: pointer; transition: background 0.2s ease, width 0.2s ease;
  }
  .msw-dot.on { background: var(--accent, #10b981); width: 20px; border-radius: 4px; }

  .msw-hint {
    text-align: center; font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 9.5px;
    letter-spacing: 1.5px; text-transform: uppercase; color: var(--fg-35, rgba(255,255,255,0.35)); margin-top: 6px;
  }
  .msw-cta {
    display: block; margin: 18px 20px 0; text-align: center; background: var(--accent, #10b981);
    color: var(--on-accent, #fff); padding: 14px; border-radius: 999px; text-decoration: none;
    font-weight: 600; font-size: 15px; font-family: inherit;
  }
}

@media (prefers-reduced-motion: reduce) {
  .msw-dot { transition: none; }
  .msw-deck { scroll-behavior: auto; }
}