/* ============================================================
   responsive-tablet.css — tablet build of the Quely homepage dupe.
   Loaded AFTER site.css; overrides win. Fluid across ~600–1024px.
   site.css already reflows feature rows / bento at these widths;
   this forces the hamburger across the whole range and adds a
   little tablet-grade polish.
   ============================================================ */

.qpage{ --pad:32px; --maxw:1024px; }

/* ---- masthead: hamburger across the full tablet range ----
   (site.css only hides .nav-links below 720, but a tablet can be
   up to ~1024 wide — force the hamburger handoff regardless.) */
.qpage .nav-links{ display:none !important; }
.qpage header{ position:sticky !important; top:0; }
/* keep the inline CTAs on the roomier tablet masthead; just hide
   the quiet "Sign in" link to make space for the burger */
.qpage header .wrap > a.btn-ghost{ display:none !important; }

/* ---- type: a notch down from desktop display sizes ---- */
.qpage .display{ font-size:clamp(40px,6vw,56px) !important; }
.qpage .sec-title{ font-size:clamp(34px,5vw,48px) !important; }
.qpage .sec{ padding:clamp(60px,8vw,96px) 0 !important; }

/* ---- hero stays two-up until it gets tight, then stacks
   (site.css stacks .hero-grid at 860) ---- */
.qpage #top .wrap{ padding-top:36px !important; padding-bottom:44px !important; }

/* ---- 05 use-case tabs: swipeable when they'd otherwise wrap ---- */
@media (max-width:880px){
  .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; }
}

/* ---- 06 platform bento: the Orbit card's absolute art overlaps
   once the card is full-width and narrow. Keep it readable. ---- */
@media (max-width:820px){
  .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; }
}
@media (min-width:821px){
  /* roomy tablets: let the art breathe but pull it fully into frame */
  .qpage .b2b .slant-ui{ right:-6px !important; }
}

/* ---- 08 personas already 2-up via inline grid; good on tablet ---- */

/* ---- ask-AI sticky offset clears the sticky masthead ---- */
.qpage #root section[data-screen-label="10 — Ask your AI"] .feature-row > div:first-child{
  top:90px !important;
}

/* ---- footer: brand block full-width on top once it collapses to 2 cols
   (site.css drops q-ftop to 1fr 1fr at <=820) ---- */
@media (max-width:820px){
  .qpage .q-ftop > div:first-child{ grid-column:1 / -1 !important; }
  .qpage .q-ftop{ gap:30px 20px !important; }
}

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

/* ---- assign-mode demo: reflow tray on top only at the narrow tablet end ---- */
@media (max-width:640px){
  .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%; }
}