/* Round 11 (klara, Nov 2): home page, phones only (<=700px). Desktop unchanged: every rule sits inside the media query.
   Goal: ~10-12 screens at 390px (was ~21). Swipe rows come from mobile-home.js (.mh-swipe); without JS the lists stay stacked. */
@media (max-width:700px){
  /* 1. rhythm: tighter section padding and heads */
  body.al-home-m .al-section{padding-top:44px!important;padding-bottom:44px!important}
  body.al-home-m .alx-demo .demo,body.al-home-m .alx-trust,body.al-home-m .alx-db--attack,body.al-home-m .r10{padding-top:44px!important;padding-bottom:44px!important}
  body.al-home-m .al-head{margin-bottom:18px!important}
  body.al-home-m .al-section h2,body.al-home-m .alx h2,body.al-home-m .r10 h2{font-size:clamp(26px,7vw,30px)!important}

  /* 2. swipe rows (scroll-snap, one card + a peek of the next) */
  .mh-swipe{display:flex!important;flex-wrap:nowrap!important;grid-template-columns:none!important;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;gap:12px!important;
    margin-inline:-20px!important;padding:2px 20px 4px!important;scroll-padding-inline:20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .mh-swipe::-webkit-scrollbar{display:none}
  .mh-swipe>*{flex:0 0 80%!important;max-width:80%!important;scroll-snap-align:start;margin:0!important;min-width:0}
  .mh-swipe--2>*{flex-basis:84%!important;max-width:84%!important}
  .mh-swipe:focus-visible{outline:2px solid var(--ail-primary,#0E7490);outline-offset:4px}
  .mh-dots{display:flex;justify-content:center;gap:6px;margin:12px 0 0}
  .mh-dots i{width:6px;height:6px;border-radius:3px;background:currentColor;opacity:.25;transition:width .2s,opacity .2s}
  .mh-dots i.on{width:18px;opacity:.8}
  .al-dark .mh-dots,.alx .mh-dots{color:var(--ail-text-on-dark,#fff)}
  .mh-dots{color:var(--ail-primary,#0E7490)}
  .r10 .mh-dots{color:var(--t)}
  /* swipe cards: equal height inside a row */
  .mh-swipe>*{align-self:stretch}

  /* 3. hero: trust line under the buttons kept; the demo console stays but tighter */
  body.al-home-m .al-hero .alx-deskwrap{margin-top:8px}

  /* 4. the demo section: the empty drop zone was nearly a full screen */
  body.al-home-m .alx-demo .lead{display:block}   /* C19c: no line clamp, the full intro shows */
  body.al-home-m .alx-demo .drop{min-height:0!important;padding:12px!important}
  body.al-home-m .alx-demo .drop-empty{min-height:96px!important;flex-direction:row!important;gap:12px!important;font-size:14px}
  body.al-home-m .alx-demo .drop-ring{width:36px!important;height:36px!important}
  body.al-home-m .alx-demo .cards li img{aspect-ratio:1/1;height:auto;object-fit:cover}
  body.al-home-m .alx-demo .samples .small{margin-bottom:8px}

  /* 5. AI Trust Layer: smaller stat cards */
  body.al-home-m .tl-card{min-height:0!important;padding:14px!important;gap:8px!important}
  body.al-home-m .tl-card .tl-num{font-size:30px!important}
  body.al-home-m .tl-card--wide{min-height:0!important}
  body.al-home-m .tl-mpair{transform:scale(.8);margin:-8px 0!important}
  body.al-home-m .tl-col+.tl-col{margin-top:24px}

  /* 6. use cases: icon + text in one row (inside the swipe card) */
  body.al-home-m .ail-usecase{padding:18px!important}

  /* 7. team: two compact cards side by side */
  body.al-home-m #team .al-cards{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  body.al-home-m #team .al-card{padding:16px 12px!important}
  body.al-home-m #team .al-avatar{transform:scale(.8);margin:-6px auto!important}

  /* 8. steps (how it works / how we test / POC): tighter rows */
  body.al-home-m .tc-steps{gap:10px!important}
  body.al-home-m .tc-sub{margin-top:14px!important}

  /* 9. repeated CTAs: the sticky "Book a demo" bar is always on screen on phones, so the in-section "Book a demo"
     buttons are hidden; distinct actions stay (Try the API, Test on your files, See the comparison, hero, final CTA) */
  body.al-home-m .mh-cta-dup{display:none!important}

  /* 10. round 10 deploy tabs: use cases + output as compact rows */
  body.al-home-m .r10-tabsec .r10-panel{padding:12px}
  body.al-home-m .r10-tabsec .r10-sub{font-size:15px}
}
@media (max-width:700px){
  /* pass 2 */
  .mh-swipe--half>*{flex-basis:46%!important;max-width:46%!important}
  /* attack tiles: 4 small tiles per row under the title (was 2 per row) */
  body.al-home-m .db-attack .db-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important}
  body.al-home-m .db-attack .db-tile{padding:6px 6px 8px!important;border-radius:10px}
  body.al-home-m .db-attack .db-tlabel{font-size:11.5px!important;margin-top:6px!important;line-height:1.2}
  body.al-home-m .db-attack .db-center{grid-column:1/-1!important}
  /* steps: smaller rings */
  body.al-home-m .tc-steps .tc-icwrap{width:46px!important;height:46px!important;box-shadow:0 0 0 4px var(--tc-as)!important}
  body.al-home-m .tc-steps .tc-icwrap svg{width:20px;height:20px}
  body.al-home-m .tc-steps::before{top:23px!important;bottom:23px!important;left:22px!important}
  body.al-home-m .tc-step{gap:12px!important;align-items:center}
  /* round 10 blocks on home: tighter */
  body.al-home-m .r10-devlbl{display:none}
  body.al-home-m .r10-dev{border:0!important;padding:0!important}
  body.al-home-m .r10-steps{gap:14px!important}
  body.al-home-m .r10-step{padding:9px 10px!important}
  body.al-home-m .r10-step+.r10-step::before{top:-13px!important;height:12px!important}
  body.al-home-m .r10-step+.r10-step::after{top:-6px!important}
  body.al-home-m .r10-out{padding:10px!important}
  body.al-home-m .r10-arrow--out{margin:-4px 0}
  body.al-home-m .r10-head{margin-bottom:18px}
  body.al-home-m .r10-seal6s .r10-s6srow .r10-stage{min-height:44px;padding:9px 6px}
  body.al-home-m .r10-tabs{margin-bottom:18px}
}
@media (max-width:700px){
  /* pass 3 */
  /* bug fix: the empty drop zone showed the file ghost: mobile CSS set display:flex on .drop-file, which beat [hidden] */
  body.al-home-m .alx-demo .drop-file[hidden]{display:none!important}
  /* hero: the side windows (seal + log) repeat what the demo section shows two scrolls later */
  body.al-home-m .al-hero .desk-side{display:none!important}
  /* trust layer seal cards: the wide "Lightweight" card fits the half-width row */
  body.al-home-m .tl-card--wide{flex-direction:column!important;align-items:flex-start!important;gap:8px!important}
  body.al-home-m .tl-card--wide .tl-num{font-size:18px!important}
  /* footer (home only): link columns two by two */
  body.al-home-m .al-footer{padding-top:36px!important;padding-bottom:28px!important}
}
@media (max-width:700px){
  /* pass 4 */
  body.al-home-m .al-section,body.al-home-m .alx-demo .demo,body.al-home-m .alx-trust,body.al-home-m .alx-db--attack,body.al-home-m .r10{padding-top:40px!important;padding-bottom:40px!important}
  /* step lists (how it works / how we test / POC): first 2 steps + "Show all" (mobile-home.js) */
  .mh-steps-cut>li:nth-child(n+3){display:none!important}
  .mh-steps-cut::before{bottom:auto!important;height:calc(100% - 46px)!important}
  .mh-more{display:inline-flex;align-items:center;gap:6px;margin:12px 0 0 58px;padding:8px 0;border:0;background:none;font:600 15px/1.2 var(--ail-font-body-en,Inter,sans-serif);color:var(--ail-primary,#0E7490);cursor:pointer;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
  .al-dark .mh-more,.tc-poc .mh-more{color:var(--ail-primary-on-dark,#22D3EE)}
  .mh-more:focus-visible{outline:2px solid currentColor;outline-offset:3px}
  /* round 10 tabs on home: the use cases live on Physical AI; on a phone home keeps the chain + output */
  body.al-home-m #deploy-two-ways .r10-uses{display:none}
  body.al-home-m #deploy-two-ways .r10-uses+.mh-dots{display:none}
  /* use-case swipe cards: tighter */
  body.al-home-m .ail-usecase{padding:16px!important;gap:10px!important}
  
}
@media (max-width:700px){
  /* pass 5 */
  body.al-home-m .al-section,body.al-home-m .alx-demo .demo,body.al-home-m .alx-trust,body.al-home-m .alx-db--attack,body.al-home-m .r10{padding-top:36px!important;padding-bottom:36px!important}
  body.al-home-m .al-hero .swipe-hint{display:none!important}   /* its side windows are hidden on phones (pass 3) */
  body.al-home-m .al-press-list{display:flex!important;flex-wrap:wrap;justify-content:center;gap:0 18px}
  body.al-home-m .al-press-list li{margin:0!important}
  body.al-home-m .tc-faq summary{padding-top:14px!important;padding-bottom:14px!important}
  body.al-home-m .alx-demo .drop-empty{min-height:76px!important}
  body.al-home-m .tl-head{margin-bottom:18px!important}
}