/* Pusharoo — mobile-first layer (standing quality bar).
   Loaded AFTER site.css (and guides.css) on every public page. Owns: safe areas, first-fold density,
   mobile type sizes, 44px tap targets, thumb-zone CTA bar. Keep layout/spacing fixes here, not in site.css.
   Targets: iPhone 13+ (390–430 × 844–932), Galaxy (360–412 × 800–915), phone landscape (≈844 × 390). */

/* ---------- Safe areas (viewport-fit=cover) ---------- */
.wrap{padding-left:max(var(--pad),env(safe-area-inset-left));padding-right:max(var(--pad),env(safe-area-inset-right))}
.nav{padding-top:env(safe-area-inset-top)}
footer{padding-bottom:calc(28px + env(safe-area-inset-bottom))}
@media(max-width:860px){.nav-links{top:calc(60px + env(safe-area-inset-top));padding-left:max(var(--pad),env(safe-area-inset-left));padding-right:max(var(--pad),env(safe-area-inset-right));max-height:calc(100dvh - 60px - env(safe-area-inset-top));overflow-y:auto;overscroll-behavior:contain}}

/* ---------- Tap targets (Apple HIG ≥ 44×44pt) ---------- */
.brand{min-height:44px}
@media(max-width:860px),(pointer:coarse){
  .btn-sm{min-height:44px;padding:0 18px;font-size:15px}
  .copy{min-height:44px;min-width:72px;padding:0 14px;font-size:14px;border-radius:10px;top:6px;right:6px}
  .code[data-copy]{padding-top:58px}
}
footer nav{gap:0 18px}
footer nav a{display:inline-flex;align-items:center;min-height:44px}
footer{font-size:14px}
.faq summary{min-height:52px;display:flex;align-items:center}
.faq summary::after{top:50%;transform:translateY(-50%)}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.docs aside a{min-height:44px;display:flex;align-items:center}
@media(max-width:900px){.docs aside a{display:inline-flex;padding:0 14px;font-size:15px}}

/* Fix: site.css hides <br> in .h2 on phones without leaving a space ("intoreturn"). Keep the designed break. */
@media(max-width:600px){.h2 br{display:inline}}

/* ---------- Phones (portrait) ---------- */
@media(max-width:600px){
  :root{--pad:20px}
  section{padding:52px 0}
  .mt{margin-top:28px}
  .kicker{font-size:15px;margin-bottom:8px}
  .h2{font-size:clamp(30px,8.4vw,36px);line-height:1.1}
  .lead{font-size:17px;line-height:1.47;margin-top:12px}

  /* Hero: headline + value + both CTAs inside the first fold on 360×800 and up */
  .hero{padding-top:18px;padding-bottom:40px}
  .hero .eyebrow{font-size:13px;padding:5px 12px}
  .hero h1{font-size:clamp(38px,10.6vw,44px);margin-top:14px;line-height:1.04}
  .hero .lead{margin-top:12px}
  .hero-ctas{margin-top:20px;flex-direction:column;gap:10px}
  .hero-ctas .btn{width:100%;min-height:52px;font-size:17px}
  .hero-ctas .btn-ghost{min-height:48px}
  .hero-meta{margin-top:14px;font-size:15px;gap:6px 14px}
  .hero .hero-grid{gap:28px}

  .stats{margin-top:28px;gap:10px}.stat{padding:16px}
  .card{padding:20px}
  .card h3{font-size:20px;margin:12px 0 6px}
  .flow{margin-top:28px}.flow li p{font-size:15px;line-height:1.45}
  .legend{font-size:15px}
  .pipe{margin-top:28px}
  .demo{padding:24px 20px;border-radius:26px}
  .demo-steps{margin-top:18px}
  .demo-panel{padding:18px}
  .demo-panel .btn{min-height:50px;font-size:17px}
  .faq{margin-top:24px}
  .final .btns{flex-direction:column;margin-top:22px}.final .btns .btn{width:100%;min-height:52px}

  /* Docs: steps start sooner */
  .docs{padding-top:16px;padding-bottom:56px;gap:14px}
  .docs article h1{font-size:clamp(30px,8.6vw,36px)}
  .docs article .lead{font-size:17px}
  .docs article h2{margin:40px 0 12px;font-size:26px}
  .docs article p,.docs article li{font-size:17px}
  .docs code{font-size:14.5px}
  .code{font-size:13.5px}
}

/* ---------- Phone landscape (short viewports) ---------- */
@media(orientation:landscape) and (max-height:500px){
  .nav .wrap{height:52px}
  html{scroll-padding-top:60px}
  section{padding:44px 0}
  .hero{padding-top:14px;padding-bottom:32px}
  .hero .eyebrow{display:none}
  .hero h1{font-size:34px;margin-top:4px}
  .hero .lead{font-size:16px;line-height:1.42;margin-top:10px}
  .hero-ctas{margin-top:14px;gap:10px}
  .hero-meta{display:none}
  .hero .hero-grid{grid-template-columns:1.25fr .75fr;align-items:start}
  .docs{padding-top:12px}
  .docs article h1{font-size:32px}
  .docs article .lead{font-size:17px}
}
@media(orientation:landscape) and (max-height:500px) and (max-width:860px){.nav-links{top:calc(52px + env(safe-area-inset-top))}}

/* ---------- Thumb-zone CTA bar (built by /assets/js/mobile.js) ---------- */
.m-cta{display:none}
@media(max-width:860px){
  .m-cta{display:flex;gap:10px;position:fixed;z-index:40;left:0;right:0;bottom:0;
    padding:10px max(16px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
    background:rgba(255,255,255,.82);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
    border-top:1px solid var(--line);transform:translateY(110%);transition:transform .3s cubic-bezier(.2,.9,.25,1)}
  .m-cta.show{transform:none}
  .m-cta .btn{flex:1;min-height:50px;font-size:16px;padding:0 12px}
  .m-cta .btn-primary{flex:1.35}
  body:has(> [data-pusharoo]) .m-cta,.nav.open~.m-cta{transform:translateY(110%)}
  body.has-mcta footer{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){.m-cta{transition:none}}

/* Round 2 */
footer nav a{min-width:44px;justify-content:center}
@media(max-width:900px){.flow li p{font-size:15px;line-height:1.45}}
@media(max-width:600px){main .lead[style]{font-size:17px!important}.docs .callout{font-size:16px;padding:14px 16px;margin:14px 0}}
@media(orientation:landscape) and (max-height:500px){main .lead[style]{font-size:17px!important}}
/* Guides (SEO track): breadcrumb tap targets */
.g-crumbs a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
.g-crumbs{margin-bottom:8px}