/* ============================================================================
   RUDQP mobile system (phones only: max-width 680px).
   Everything in this file is inside one media query, so tablet and desktop
   are untouched. It sets the mobile type scale, spacing rhythm, swipe rows
   for galleries and reviews, the floating tab bar, tap states and reveals.
   ========================================================================== */
@media (max-width: 680px) {
  html { --mg: 20px; --msec: 56px; --mr: 22px; --mease: cubic-bezier(.16, 1, .3, 1); }

  /* ---- rhythm ---- */
  html .wrap { padding: 0 var(--mg); }
  html main > section.sec, html .sec { padding: var(--msec) 0; }
  html .brands-sec { padding: 40px 0 36px; }
  html body { padding-bottom: 0; }
  html .foot, html .lfoot { padding: 44px 0 calc(36px + env(safe-area-inset-bottom)); }

  /* ---- type scale ---- */
  html h1.display, html .ah h1, html h1 { font-size: clamp(34px, 9.6vw, 42px); line-height: 1.03; letter-spacing: -.035em; font-weight: 700; max-width: 100%; text-wrap: balance; }
  html h2.display, html h2 { font-size: clamp(28px, 7.8vw, 34px); line-height: 1.06; letter-spacing: -.03em; font-weight: 700; text-wrap: balance; }
  html .dhead, html main h3 { font-size: 19px; line-height: 1.25; letter-spacing: -.015em; font-weight: 700; }
  html .lead, html .cp__sub, html .dsub { font-size: 16px; line-height: 1.55; max-width: 100%; margin-top: 12px; color: #515154; }
  html .eyebrow, html .cp__eyebrow { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: #6E6E73; }
  html main p { font-size: 16px; line-height: 1.6; }
  html .fine, html .muted, html .gcap .k, html .ltile__ov, html .lq, html small { font-size: 12.5px; letter-spacing: .04em; }
  html .pill { min-height: 48px; padding: 0 22px; font-size: 15px; }
  html .pill.sm { min-height: 44px; }
  html .center .lead, html .ah__copy .lead { margin-left: auto; margin-right: auto; }

  /* ---- tap feedback (no hover on phones) ---- */
  html .pill, html .gtile, html .wtile, html .ltile, html .wcard, html .svc-card, html .lcard, html .lmenu__row { transition: transform .18s var(--mease), opacity .18s; }
  html .pill:active, html .gtile:active, html .ltile:active, html .svc-card:active, html .lcard:active, html .lmenu__row:active { transform: scale(.97); }

  /* ---- swipe rows: home categories, reviews, every photo gallery ---- */
  /* home categories keep the 1 + 2 + 2 mosaic (all five visible at once); polish only */
  html .wgrid { gap: 10px; }
  html .wtile { border-radius: var(--mr); border: 0; }
  html .wtile:first-child { border-radius: var(--mr); }
  html .wcap { padding: 14px; }
  html .wtile:first-child .wcap h3 { font-size: 26px; }
  html .wcap h3 { font-size: 17px; }
  html .gcap h3 { font-size: 24px; }

  html .wall { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 var(--mg); padding: 4px var(--mg) 8px; margin: 0 calc(var(--mg) * -1); scrollbar-width: none; }
  html .wall::-webkit-scrollbar { display: none; }
  html .wall .wcard { flex: 0 0 82vw; max-width: 360px; scroll-snap-align: start; opacity: 1 !important; transform: none !important; border-radius: var(--mr); padding: 22px 22px 20px; }
  html .wcard q { font-size: 17px; line-height: 1.45; }
  html .rvacts { display: flex; gap: 10px; margin-top: 18px; }
  html .rvacts > * { flex: 1 1 0; min-height: 48px; justify-content: center; }

  html .lgal { display: flex; grid-template-columns: none; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 var(--mg); padding: 4px var(--mg) 8px; margin: 0 calc(var(--mg) * -1); scrollbar-width: none; }
  html .lgal::-webkit-scrollbar { display: none; }
  html .lgal .ltile { flex: 0 0 72vw; max-width: 320px; aspect-ratio: 4 / 5; scroll-snap-align: start; border-radius: var(--mr); }
  html .lgal .ltile.hide { display: none; }
  html .loadmore-wrap { margin-top: 14px; }
  html .loadmore { width: 100%; min-height: 48px; }
  html .chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px var(--mg) 10px; margin: 0 calc(var(--mg) * -1) 8px; scrollbar-width: none; flex-wrap: nowrap; }
  html .chips::-webkit-scrollbar { display: none; }
  html .chip { flex: 0 0 auto; min-height: 40px; padding: 0 16px; }

  /* ---- home sections ---- */
  html .li { gap: 14px; padding-bottom: 22px; }
  html .li__b { width: 40px; height: 40px; font-size: 15px; }
  html .li__t h3 { font-size: 18px; }
  html .li__t p { font-size: 14.5px; }
  html .two-svc { gap: 12px; }
  html .svc-card { padding: 22px 20px 20px; border-radius: var(--mr); }
  html .svc-card h3 { font-size: 22px; }
  html .sysd-svc { gap: 0; margin-top: 22px; }
  html .sysd-svc div { padding: 14px 0; }
  html .sysd-dash { border-radius: var(--mr); }
  html .ah-close { padding: 64px 0 56px; }
  html .ah-close__h { font-size: clamp(46px, 15.5vw, 66px); }
  html .ah-close__ct .pill { width: 100%; max-width: 320px; justify-content: center; }
  html .cp--home { padding: 52px 20px 48px; }
  html .cp__steps li { min-height: 36px; }

  /* ---- pricing builder touch targets ---- */
  html .bqbtn { width: 44px; height: 44px; border-radius: 12px; }
  html .bqitem { padding: 14px 0; gap: 10px; }
  html .bqtipbtn, html .bqtipcustom { min-height: 44px; }

  /* ---- footer ---- */
  html .foot__grid { grid-template-columns: 1fr 1fr; gap: 26px 18px; padding-top: 34px; }
  html .foot__brand { grid-column: 1 / -1; }
  html .foot__wm { font-size: 30px; }
  html .foot__brand h3 { font-size: 16px; margin: 8px 0 14px; }
  html .foot .fcol h4 { font-size: 11px; margin-bottom: 10px; }
  html .foot .fcol a { font-size: 15px; padding: 7px 0; }
  html .foot .fcol p { font-size: 14px; }
  html .foot__bar { gap: 8px; padding-bottom: 20px; }
  html .foot__low { flex-direction: column; gap: 6px; font-size: 12.5px; }
  html .foot__cta { min-height: 48px; }

  /* ---- navigation on phones: the header menu button opens the full-screen menu; no floating bars ---- */
  html .rtop { display: none; }

  /* ---- scroll reveals (JS adds .m-reveal only on phones; nothing hides without it) ---- */
  html .m-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--mease), transform .8s var(--mease); }
  html .m-reveal.m-in { opacity: 1; transform: none; }

  /* ---- tap targets: every link and control reaches 44px ---- */
  html .lnav .brand { min-height: 44px; display: inline-flex; align-items: center; }
  html .foot .fcol a { padding: 10px 0; min-height: 44px; display: flex; align-items: center; }
  html .foot__legal a, html .foot__low a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
  html .flink, html .feat__go, html .morelist a, html .slinks a, html .dc-1 .v a, html .dc-2 .v a, html .cp__foot a, html .faq__q p a { display: inline-flex; align-items: center; min-height: 44px; }
  html .morelist li { padding: 0; }
  html .slinks { gap: 6px 14px; flex-wrap: wrap; }
  html .lmenu__row { min-height: 52px; }
  html .lmenu__small a { min-height: 44px; display: inline-flex; align-items: center; }

  /* ---- readable minimums: no text under 12px on a phone ---- */
  html .prow__meta span, html .prow__meta .cat, html .badge, html .commuter .lbl, html .sysd-live, html .oC-th span, html .fg-rhead span, html .fg-swipe, html .scope-ends span, html .wcap .wk { font-size: 12px; }

  /* ---- page rows that scroll sideways keep their intent, just with the site gutter ---- */
  html .ig-strip { scroll-padding: 0; }

  /* ---- safety: nothing wider than the screen ---- */
  html main img, html main video, html main iframe { max-width: 100%; }
}
@media (max-width: 680px) and (prefers-reduced-motion: reduce) {
  html .m-reveal { opacity: 1; transform: none; transition: none; }
  html .pill, html .gtile, html .ltile, html .svc-card { transition: none; }
}