/* =====================================================================================
   TABLET HYBRID (600–1199px) — mobile building blocks arranged in desktop-like columns.
   "Where are you now" stays the mobile layout, just wider.
   ===================================================================================== */
@media (min-width:600px) and (max-width:1199px){
  :root{--tw:1040px}
  /* hero: two buttons side by side */
  .tiles{flex-direction:row}
  .tiles .btn{flex:1;width:auto}
  /* stacked services: image left, content right */
  .p4-item{max-width:var(--tw)}
  .p4-card{flex-direction:row;align-items:stretch;gap:24px}
  .p4-img{order:0;flex:0 0 44%;width:auto;aspect-ratio:auto;min-height:320px}
  .p4-panel{display:flex;flex-direction:column;justify-content:space-between;gap:24px;flex:1;min-width:0;height:auto;padding:0;background:none}
  .p4-t{display:flex;flex-direction:column;gap:16px}
  .p4-t h3,.p4-t p,.p4-tags,.p4-cta{order:0}
  .p4-head{max-width:calc(var(--tw) + var(--gx)*2)}
  /* Atlas: screenshots left, copy right */
  .frame5{max-width:calc(var(--tw) + var(--gx)*2);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:32px;row-gap:24px;align-items:start}
  .frame5 h2{grid-column:1/-1;grid-row:1}
  .p5-shot.s1{grid-column:1;grid-row:2/5}
  .p5-shot.s2{grid-column:1;grid-row:3/6;margin:40% 0 0 10%!important}
  .p5-lead{grid-column:2;grid-row:2}
  .p5-big{grid-column:2;grid-row:3}
  .p5-btn{grid-column:2;grid-row:4}
  .p5-btn.ghost{grid-column:2;grid-row:5;margin-top:0!important}
  /* Why us / cases / blog get the wider container */
  .frame6,.frame8,.frameBlog,.frameFoot{max-width:calc(var(--tw) + var(--gx)*2)}
  /* testimonials: video + text side by side inside a slide */
  .t-slide{width:min(640px,86vw)}
  .t-slide.video{flex-direction:row;gap:4px}
  .t-slide.video .t-media{width:50%;aspect-ratio:auto;min-height:100%}
  .t-slide.video .t-body{flex:1}
  .t-slide.text{grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);column-gap:4px}
  .t-slide.text .t-ava{grid-row:1/5;align-self:stretch;aspect-ratio:auto;height:100%}
  .t-slide.text::before{display:none}
  .t-slide.text::after{grid-column:2;grid-row:1/5;margin-top:0}
  .t-slide.text .t-row>div,.t-slide.text .t-quote,.t-slide.text .t-foot{grid-column:2}
  .t-slide.text .t-row>div{grid-row:1;padding-top:24px}
  .t-slide.text .t-quote{grid-row:2}
  .t-slide.text .t-foot{grid-row:3}
  /* CTA: heading + lead full width, button | note, then the list in two columns */
  .frameCta{max-width:calc(var(--tw) + var(--gx)*2);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px;row-gap:16px}
  .frameCta h2,.ct-lead,.ct-list{grid-column:1/-1}
  .ct-btn{grid-column:1;grid-row:3;margin-top:16px}
  .ct-note{grid-column:2;grid-row:3;align-self:end}
  /* FAQ keeps a single column on small tablets */
  .frameFaq{max-width:calc(var(--tw) + var(--gx)*2)}
  /* How we build copy is wider than the diagram */
  .frame7{max-width:calc(var(--tw) + var(--gx)*2)}
}
@media (min-width:900px) and (max-width:1199px){
  /* hero: copy left, dashboard right */
  .frame{max-width:calc(var(--tw) + var(--gx)*2);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);column-gap:40px;row-gap:32px;align-items:start}
  .header{grid-column:1/-1}
  h1{grid-column:1;grid-row:2;margin-top:0}
  .lead{grid-column:1;grid-row:3}
  .tiles{grid-column:1;grid-row:4;flex-direction:column}
  .stage{grid-column:2;grid-row:2/5;width:100%;align-self:center}
  .desc{grid-column:2;grid-row:4/6;justify-self:start;align-self:end;margin:0 0 -40px -40px}
  .badges{grid-column:1/-1;grid-row:6;margin-top:40px}
  /* why us: 3 columns */
  .p6-grid{grid-template-columns:repeat(3,1fr)}
  .p6-map{grid-column:1/-1;aspect-ratio:1000/420}
  /* how we build: copy + CTA left, diagram right */
  .p7-dia{grid-template-columns:minmax(0,1fr) 343px;grid-template-rows:696px;column-gap:48px}
  .p7-copy{grid-column:1;grid-row:1;align-self:start}
  .p7-cta{grid-column:1;grid-row:1;align-self:end;margin:0}
  .p7-bg{grid-column:1/-1;grid-row:1;margin:180px calc(var(--gx) * -1) 0}
  .p7-labels span,.p7-mlab,.p7-mlines,.p7-node{grid-column:2;grid-row:1}
  /* cases: 3 columns, all six */
  .p8-track{grid-template-columns:repeat(3,1fr)}
  .p8-card:not(.clone):nth-child(n+4 of :not(.clone)),.p8-card:not(.clone):nth-child(n+5 of :not(.clone)){display:block}
  /* FAQ: sticky case card left, accordion right (as on desktop) */
  .frameFaq{display:flex;flex-direction:row;gap:40px;align-items:stretch;padding-bottom:96px}
  .fq-left{display:block;flex:0 0 38%}
  .fq-card{position:sticky;top:40px;width:100%;height:auto;aspect-ratio:1}
  .fq-right{flex:1;min-width:0}
  /* CTA: two list columns already; footer: headline with a square Let's Talk */
  .ft-big p{grid-column:1/-1}
  .ft-talk{grid-column:2;justify-self:end;width:153px}
  .ft-ind{margin-inline:0}
  .ft-track{justify-content:space-between;width:auto;animation:none}
  .ft-track .dup{display:none}
}