/* ============================================================
   Bellevo — mobile overrides
   Targets ≤940 / ≤760 / ≤560 viewports. Everything outside the
   queries is unaffected on desktop.
   ============================================================ */

/* Global: kill horizontal overflow that occasionally leaks from
   absolutely-positioned floats on narrow viewports. */
html, body { overflow-x: hidden; }

@media (max-width: 940px) {
  .wrap { padding: 0 20px; }
  section.block { padding: 64px 0; }
  .block-head { margin-bottom: 36px; }

  /* Hero */
  .hero { padding: 40px 0 64px; }
  .hero h1 { font-size: clamp(34px, 7.5vw, 52px); margin-top: 18px; }
  .hero-lead { font-size: 17px; margin: 18px 0 26px; }
  .hero-trust { gap: 16px; margin-top: 26px; }
  .phone-stage { margin-top: 4px; }
  .phone { width: 280px; }
  .phone-screen { height: 580px; border-radius: 28px; }
  .phone-glow { width: 360px; height: 360px; }

  /* Nav — show burger, hide nav-links + ghost CTA */
  .nav-inner { height: 64px; }
  .brand { font-size: 20px; }

  /* Stats — 2 cols already at 760, but tighten gap */
  .stats { padding: 48px 0; }

  /* Featured salons / categories spacing */
  .cats { padding-bottom: 72px; }

  /* Business section dashboard mock — let it shrink */
  .dash-top { padding: 14px 16px; }
  .dash-kpis { padding: 16px; gap: 10px; }
  .dash-kpi { padding: 12px; }
  .dash-kpi .v { font-size: 19px; }
  .dash-sched { padding: 0 16px 18px; }
  .appt { padding: 9px 11px; gap: 10px; }
  .appt .time { width: 44px; font-size: 11.5px; }
}

@media (max-width: 760px) {
  .wrap { padding: 0 18px; }
  section.block { padding: 56px 0; }

  /* Hero — float cards crowd the phone on narrow screens. Drop them
     so the mockup centers cleanly. */
  .float-card { display: none; }
  .phone-glow { width: 300px; height: 300px; }

  /* Hero CTAs stack and fill the row */
  .hero-actions { gap: 12px; }
  .hero-actions .store-badge img { height: 50px; }

  /* Eyebrow / section heading reins in on tiny screens */
  .h-section { font-size: clamp(26px, 6.8vw, 36px); }
  .sub { font-size: 16px; }
  .block-head .sub { margin-top: 12px; }

  /* Logos strip — tighter row */
  .logos { padding: 24px 0 0; }
  .logos-row { gap: 14px 28px; }
  .logos-row .lg { font-size: 16px; }
  .logos-row .lg svg { width: 18px; height: 18px; }

  /* Stats */
  .stat { padding: 22px 16px; }
  .stat .num { font-size: clamp(28px, 8vw, 36px); }
  .stat .lbl { font-size: 13px; }

  /* Categories: tighter aspect + smaller label */
  .cat-grid { gap: 12px; }
  .cat-card { aspect-ratio: 3/3; }
  .cat-card .ic { width: 40px; height: 40px; top: 10px; left: 10px; }
  .cat-card .label { padding: 12px; }
  .cat-card .label .t { font-size: 16px; }
  .cat-card .label .c { font-size: 12px; }

  /* How it works */
  .step { padding: 26px 22px; }
  .step h3 { font-size: 19px; }
  .step p { font-size: 14px; }
  .step .n { width: 46px; height: 46px; font-size: 19px; margin-bottom: 16px; }

  /* Testimonials */
  .tcard { padding: 22px 20px; }
  .tcard p { font-size: 14.5px; }

  /* For business */
  .biz { padding: 64px 0; }
  .biz-grid { gap: 36px; }
  .biz h2 { font-size: clamp(26px, 6.8vw, 36px); }
  .biz .lead { font-size: 16px; margin: 14px 0 22px; }
  .biz-feats { gap: 14px; margin-bottom: 26px; }
  .biz-feat .bf-t { font-size: 15px; }
  .biz-feat .bf-s { font-size: 13px; }
  .biz-actions .btn { width: 100%; justify-content: center; }

  /* CTA card */
  .dl-card { padding: 44px 22px; border-radius: 22px; }
  .dl-card h2 { font-size: clamp(26px, 7vw, 38px); }
  .dl-card p { font-size: 16px; margin: 14px auto 22px; }
  .dl-badges { gap: 12px; }
  .dl-badges .store-badge img { height: 50px; }

  /* FAQ — bigger tap targets, smaller font */
  .faq-item summary { padding: 18px 18px; font-size: 15.5px; gap: 12px; }
  .faq-item .ans { padding: 0 18px 20px; font-size: 14.5px; }

  /* Footer */
  .footer { padding: 48px 0 28px; }
  .footer-bottom { font-size: 12.5px; gap: 12px; }

  /* Page hero (privacy / terms / team) */
  .page-hero { padding: 100px 0 40px; }
  .page-hero h1 { font-size: clamp(30px, 7vw, 44px); }
  .page-hero p.lead { font-size: 16px; }
  .legal { padding: 40px 0 64px; }
  .legal h2 { font-size: 19px; margin-top: 36px; }
  .legal p { font-size: 15px; }
  .team { padding: 40px 0 80px; }
  .team-grid { gap: 18px; }
  .team-card { padding: 24px; }
  .team-avatar { width: 80px; height: 80px; font-size: 30px; }
  .team-card h3 { font-size: 19px; }
  .team-bio { font-size: 14.5px; }
}

@media (max-width: 480px) {
  .wrap { padding: 0 16px; }
  section.block { padding: 48px 0; }

  /* Stats — 2 cols still, but smaller */
  .stats-grid { gap: 12px; }

  /* Categories full-width column on the smallest devices */
  .cat-grid { grid-template-columns: 1fr; }
  .cat-card { aspect-ratio: 16/9; }

  /* Hero actions stack so badges aren't squished */
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .store-badge { align-self: flex-start; }

  /* Phone mockup scaled down a touch more */
  .phone { width: 260px; }
  .phone-screen { height: 540px; }

  /* CTA — stack download badges */
  .dl-badges { flex-direction: column; align-items: center; }

  /* Tighter brand mark in nav */
  .brand-mark { width: 32px; height: 32px; }
  .brand { font-size: 19px; gap: 9px; }
}

/* Tap-target hygiene: any interactive control should be ≥44px tall on
   touch viewports. */
@media (hover: none) and (pointer: coarse) {
  .btn, .nav-burger, .faq-item summary, .store-badge,
  .f-social a, .footer-bottom a { min-height: 44px; }
}