/* ============================================================
   responsive-mobile.css — phone build of the Quely homepage dupe.
   Loaded AFTER site.css; overrides win. Fluid across ~320–560px.
   The desktop sheet already reflows a lot at small widths; this
   layers on phone-specific polish + the hamburger handoff.
   ============================================================ */

.qpage{ --pad:16px; }

/* ---- masthead: hamburger replaces the inline nav + CTAs ---- */
.qpage .nav-links{ display:none !important; }
.qpage header{ position:sticky !important; top:0; }
/* the two inline header buttons live in the hamburger menu now */
.qpage header .wrap > a.btn{ display:none !important; }
.qpage header .wrap{ gap:12px !important; }

/* ---- ticker / marquee: a touch tighter ---- */
.qpage .marquee-track{ gap:36px; padding-right:36px; }

/* ---- hero ---- */
.qpage #top .hero-grid{ gap:28px !important; }
.qpage #top .wrap{ padding-top:26px !important; padding-bottom:34px !important; }
.qpage .display{ font-size:clamp(30px,8.4vw,40px) !important; }
.qpage #top .lead{ margin-top:18px !important; }
/* stack the hero CTAs full width so nothing crowds at 320px */
.qpage #top .hero-grid > div:first-child > div[style*="flex"]{ gap:10px !important; }
.qpage #top .hero-grid .btn{ width:100%; }

/* ---- section rhythm ---- */
.qpage .sec{ padding:clamp(44px,12vw,72px) 0 !important; }
.qpage .sec-title{ font-size:clamp(27px,7vw,40px) !important; }
.qpage .sec-title2{ font-size:clamp(26px,7vw,38px) !important; }
.qpage .lead{ font-size:16px !important; }
.qpage .kicker{ margin-bottom:20px; }

/* ---- 05 use-case tabs → swipeable single row ---- */
.qpage .uc-tabs{
  flex-wrap:nowrap !important; width:100% !important; max-width:100% !important;
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.qpage .uc-tabs::-webkit-scrollbar{ height:0; }
.qpage .uc-tabs button{ flex:0 0 auto; min-height:44px !important; display:inline-flex !important; align-items:center !important; }

/* ---- footer links: real 44px touch targets ---- */
.qpage .q-fcol a{ min-height:44px; display:flex; align-items:center; padding:0 !important; }

/* ---- 06 platform bento: kill the absolute Orbit art overlap ---- */
.qpage .bc2{ padding:18px !important; }
.qpage .b2b h3,
.qpage .b2b p{ max-width:100% !important; }
.qpage .b2b div[style*="54%"]{ max-width:100% !important; }
.qpage .b2b .slant-ui{ display:none !important; }
.qpage .b2g div[style*="min-width: 300px"]{ min-width:0 !important; }
.qpage .b2g div[style*="flex: 1 1 440px"]{ flex-basis:100% !important; }
/* assign-mode demo: the fixed 150px tray + two columns crush at phone width.
   Reflow → unassigned tray full-width on top, capacity columns side-by-side
   below. The drag animation reads live rects, so it still animates correctly. */
.qpage .b2g .ad-stage > div:nth-child(2){ flex-wrap:wrap !important; row-gap:12px !important; }
.qpage .b2g .ad-stage > div:nth-child(2) > div:first-child{ width:100% !important; flex:0 0 100% !important; }
.qpage .b2g .ad-stage > div:nth-child(2) > div:first-child > div:last-child{ flex-direction:row !important; flex-wrap:wrap !important; gap:8px !important; }
.qpage .b2g .ad-stage > div:nth-child(2) > div:first-child > div:last-child > div{ flex:1 1 46%; }

/* ---- 08 personas: force single column (inline grid override) ---- */
.qpage .integ-grid[style*="1fr 1fr"]{ grid-template-columns:1fr !important; }

/* ---- final CTA headline: dial back the giant clamp ---- */
.qpage #cta .display{ font-size:clamp(30px,8.5vw,46px) !important; }

/* ---- 10 ask-AI: drop the sticky so it flows naturally stacked ---- */
.qpage #root section[data-screen-label="10 — Ask your AI"] .feature-row > div:first-child{
  position:static !important;
}

/* ---- footer: brand block full-width on top, link groups in 2 columns
   (the inline 1.5fr+4 grid collapses unevenly otherwise) ---- */
.qpage .q-ftop{ grid-template-columns:1fr 1fr !important; gap:30px 20px !important; }
.qpage .q-ftop > div:first-child{ grid-column:1 / -1 !important; }