/* =================================================
   OWLHUB — mobile.css
   Mobile-first optimizations (<= 768px)
   ================================================= */

@media (max-width: 768px) {

  /* =================================================
     GENERAL RESETS
     ================================================= */

  body {
    overflow-x: hidden;
  }

  main {
    display: block;
  }

  section {
    padding: 24px 16px;
  }

  /* =================================================
     HERO
     ================================================= */

  .hero {
    position: relative;
    overflow: hidden;
    padding-top: 96px;
    min-height: auto;
    padding-bottom: 32px;
  }

  .hero h1 {
    font-size: 1.8rem;
    line-height: 1.2;
  }

  .hero__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* =================================================
     CARDS & PANELS
     ================================================= */

  .card,
  .panel,
  .method-card,
  .method-step,
  .login-box {
    width: 100% !important;
    margin: 16px 0 !important;
    padding: 20px !important;
    border-radius: 16px;
  }

  .method-card + .method-card {
    margin-top: 24px !important;
  }

  /* =================================================
     METHOD SECTION
     ================================================= */

  .method {
    display: block;
  }

  .method h2 {
    font-size: 1.4rem;
    margin-bottom: 12px;
  }

  .method-step h3 {
    font-size: 1.1rem;
    margin-bottom: 6px;
  }

  .method-step p {
    font-size: 0.95rem;
    line-height: 1.6;
  }

  /* Remove sticky behavior */
  .method-intro,
  .method-hero,
  .hibou-method,
  .method-header,
  .method-step,
  .step-observer,
  .observer-step,
  .method-step-1,
  .method-stack,
  .method-flow,
  .method-scroll,
  .sticky {
    position: static !important;
    top: auto !important;
    transform: none !important;
  }

  .method-intro,
  .method-hero {
    margin-bottom: 24px !important;
  }

  .method-step,
  .step-observer,
  .observer-step {
    margin-top: 24px !important;
  }

  /* =================================================
     CHIPS & TAGS
     ================================================= */

  .chips,
  .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
  }

  .chips span,
  .tags span {
    font-size: 0.75rem;
    padding: 6px 10px;
  }

  /* =================================================
     CANVAS / BACKGROUND
     ================================================= */

  canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    pointer-events: none;
    opacity: 0.08;
  }

  body::before,
  body::after {
    content: none !important;
  }

  /* =================================================
     FOOTER
     ================================================= */

  footer {
    padding: 32px 16px;
  }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* =================================================
     LANE / SCROLLYTELLING
     ================================================= */

  .lane {
    grid-template-columns: 1fr;
  }

  .sticky {
    position: static !important;
  }

  /* =================================================
     PRICING
     ================================================= */

  .prices {
    grid-template-columns: 1fr;
  }

  .price {
    margin-bottom: 16px;
  }
}