/* ============================================================
   OneSync — Landing mobile refinement
   Loaded LAST. Surgical overrides over the Webflow export.
   Goals: kill dead space, fix clipping, tighten vertical rhythm,
   make every CTA read as obviously tappable. No markup changes.
   ============================================================ */

/* ---- Submit / application CTA (all breakpoints) ----
   Was a flat white block that read as disabled. Make it an
   unmistakable, branded primary action. */
#submit-btn,
#partner-application-form button[type="submit"]{
  width:100% !important;
  padding:16px 24px !important;
  border:none !important;
  border-radius:980px !important;
  background:linear-gradient(135deg,#7f56d9 0%,#2962ff 100%) !important;
  color:#fff !important;
  font-family:var(--font-system,"Montserrat",system-ui,sans-serif) !important;
  font-size:1rem !important;
  font-weight:700 !important;
  letter-spacing:-0.01em !important;
  cursor:pointer !important;
  box-shadow:0 10px 30px rgba(127,86,217,0.35) !important;
  transition:transform .25s var(--spring,cubic-bezier(.34,1.56,.64,1)),
             box-shadow .25s ease, filter .2s ease !important;
}
#submit-btn:hover,
#partner-application-form button[type="submit"]:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 16px 40px rgba(127,86,217,0.45) !important;
  filter:brightness(1.05) !important;
  opacity:1 !important;
}
#submit-btn:active,
#partner-application-form button[type="submit"]:active{
  transform:scale(.98) !important;
}
#submit-btn:disabled{
  background:rgba(255,255,255,0.14) !important;
  color:rgba(255,255,255,0.45) !important;
  box-shadow:none !important;
  cursor:not-allowed !important;
}

/* ---- Floating "scroll to top" — keep it out of the content ---- */
#scroll-to-top,.scroll-to-top{
  width:44px !important;height:44px !important;
  right:16px !important;
  bottom:calc(16px + env(safe-area-inset-bottom,0px)) !important;
  background:rgba(20,20,22,0.72) !important;
  -webkit-backdrop-filter:blur(14px) saturate(160%) !important;
  backdrop-filter:blur(14px) saturate(160%) !important;
  border:0.5px solid rgba(255,255,255,0.16) !important;
  box-shadow:0 8px 24px rgba(0,0,0,0.5) !important;
  z-index:900 !important;
}

/* ============================================================
   MOBILE  (<= 767px)
   ============================================================ */
@media screen and (max-width:767px){

  /* ---- Global vertical rhythm: trim the oversized gaps ----
     IMPORTANT: these margin-NNpx classes double as both empty spacers
     AND as wrappers around real content. Only shrink the EMPTY spacers
     (:empty) so we never crush a content wrapper. */
  .section{ padding-top:clamp(28px,8vw,40px) !important; padding-bottom:clamp(28px,8vw,40px) !important; }
  .margin-60px:empty{ height:28px !important; min-height:0 !important; }
  .margin-40px:empty{ height:20px !important; min-height:0 !important; }
  .margin-20px:empty{ height:12px !important; min-height:0 !important; }

  /* Headings: tighter so they don't eat a whole screen */
  .display-1,.display-1.smaller{ font-size:clamp(1.9rem,8.5vw,2.5rem) !important; line-height:1.08 !important; letter-spacing:-0.02em !important; margin-bottom:12px !important; }

  /* ---- ARTIST GRID: the biggest offender ----
     The image wrapper was locked to height:17rem while the image
     was forced square -> ~100px dead space per card + clipped names.
     Make the wrapper match a square image; name becomes a clean footer. */
  .artist-gallery-grid{
    grid-template-columns:repeat(2,1fr) !important;
    gap:12px !important;
  }
  .artist-card{
    display:flex !important;
    flex-direction:column !important;
    border-radius:16px !important;
    background:rgba(255,255,255,0.055) !important;
    border:0.5px solid rgba(255,255,255,0.12) !important;
  }
  .artist-card .combine-gallery2_image-wrapper{
    height:auto !important;
    aspect-ratio:1/1 !important;
    width:100% !important;
    border-radius:16px 16px 0 0 !important;
    box-shadow:none !important;
    display:block !important;
    overflow:hidden !important;
    flex:0 0 auto !important;
  }
  .artist-card .combine-gallery2_image{
    width:100% !important;height:100% !important;
    aspect-ratio:1/1 !important;
    object-fit:cover !important;
    display:block !important;
  }
  .artist-card .artist-name.clean{
    display:flex !important;align-items:center !important;
    min-height:40px !important;
    padding:9px 12px !important;
    margin:0 !important;
    font-size:0.8rem !important;line-height:1.2 !important;
    font-weight:600 !important;color:#fff !important;
    text-align:left !important;
    position:static !important;   /* never overlap the image */
  }

  /* ---- STATS: flex-wrap + 48px gaps made a tall, ragged block.
     Make it an even 2-up grid with consistent number sizing. ---- */
  .trust-stats-section > .container > div{
    display:grid !important;
    grid-template-columns:repeat(2,1fr) !important;
    gap:20px 16px !important;
    justify-content:stretch !important;
  }
  .trust-stats-section > .container > div > div{ text-align:center !important; }
  .trust-stats-section > .container > div > div > div:first-child{
    font-size:1.6rem !important;line-height:1.1 !important;
    font-weight:700 !important;letter-spacing:-0.02em !important;
    white-space:nowrap !important;
  }
  .trust-stats-section > .container > div > div > div:last-child{
    font-size:0.72rem !important;margin-top:4px !important;
  }

  /* ---- FEATURE CARDS ("Drop Free…"): tighten + match rounded brand language ---- */
  .features-subtitle{ font-size:0.95rem !important;line-height:1.5 !important; }
  .step-box-main{ padding:18px !important; border-radius:14px !important; }
  .step-box-main .step-main-title{ line-height:1.25 !important; margin-bottom:6px !important; }
  .step-box-main .paragraph-12{ line-height:1.45 !important; }

  /* ---- COMPARISON table (renders as stacked rows on mobile): tighten ---- */
  .home-compare-table td,.home-compare-table th{ padding-top:10px !important; padding-bottom:10px !important; }

  /* ---- COMPARISON (stacked cards on mobile): tighten ---- */
  .toogle-max-w{ gap:12px !important; }
  .toogle-max-w > *{ margin-bottom:10px !important; }

  /* Keep last content clear of the floating button */
  footer, .footer, body > :last-child{ padding-bottom:12px; }
}

/* Very small phones */
@media screen and (max-width:479px){
  .artist-gallery-grid{ gap:10px !important; }
  .artist-card .artist-name.clean{ font-size:0.74rem !important;padding:8px 10px !important;min-height:36px !important; }
  .trust-stats-section > .container > div > div > div:first-child{ font-size:1.4rem !important; }
}