/* Mobile-only layout. Desktop presentation and scroll choreography remain untouched. */
@media (max-width:820px){
  html{-webkit-text-size-adjust:100%;scroll-padding-top:72px}
  body{overflow-x:hidden}
  section[id]{scroll-margin-top:72px}
  .wrap,.concept-inner,.thflow-inner{width:calc(100% - 40px)}

  /* Navigation and touch targets */
  .nav{max-width:100vw}
  .nav.pill{width:calc(100% - 20px);top:8px;height:52px}
  .nav .btn{min-height:40px;padding:0 14px}
  .download-popover{width:min(260px,calc(100vw - 32px));right:0}
  .download-popover a{min-height:56px;justify-content:center}
  .hero .cta .btn,.lines a,.ctrls button,.demo-chips button,.ft-btn{min-height:44px}

  /* The two comparison canvases must each retain their full logical height. */
  .tyai-sec{padding-bottom:64px}
  .contrast-sticky{padding-top:88px}
  .contrast{height:auto!important;min-height:0!important;align-items:start;gap:18px}
  .contrast .cline{margin:4px 0}
  .contrast .cpane{height:520px!important;min-height:520px}
  #cRight.stage--free{height:520px!important}

  /* Keep the mobile demo controllable without wrapping seven chapter pills into a dense block. */
  .demo-static #demo-pin{gap:0}
  .demo-static .demo-head-layer{order:-3;margin-bottom:18px}
  .demo-static .demo-ui-m{order:-2;display:block;width:calc(100% - 40px);padding:0;margin:0 auto 12px}
  .demo-static .demo-ui-m .ctrls{display:grid;grid-template-columns:1fr 1fr}
  .demo-static .demo-ui-m .ctrls button{justify-content:center;height:44px}
  .demo-static .demo-ui-m .prog{height:7px;margin-top:10px;padding:0}
  .demo-static .demo-chips{order:-1;width:calc(100% - 40px);max-width:none;margin:0 auto 14px;padding:5px;justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;border-radius:14px}
  .demo-static .demo-chips::-webkit-scrollbar{display:none}
  .demo-static .demo-chips button{height:40px;padding:0 14px;flex:none}
  .demo-static .demo-bleed{order:0;padding:12px 0 18px}
  .demo-static .demo-win-wrap{width:calc(100% - 40px)}
  .demo-static .demo-wrap{width:100%;height:clamp(440px,126vw,520px);aspect-ratio:auto}
  .demo-static .demo-cap{width:calc(100% - 40px);margin-top:10px}

  /* Replace the desktop horizontal coverflow with a readable vertical gallery. */
  .editors{height:auto!important;padding:72px 0 56px}
  .editors .pin{position:static!important;top:auto!important;height:auto!important;overflow:visible!important;display:block}
  .editors .e-head{position:static;padding:0 20px}
  .editors .e-head h2{font-size:clamp(28px,8.2vw,38px)}
  .track{display:grid!important;grid-template-columns:1fr;gap:30px;width:auto!important;margin-top:34px!important;padding:0 20px!important;transform:none!important}
  .ecard{width:100%!important;flex:auto!important;opacity:1!important;transform:none!important}
  .ecard .shot{width:100%;border-radius:12px;overflow:hidden}
  .ecard figcaption{opacity:1!important;margin-top:12px;padding:0 4px;text-align:left}
  .e-hl{display:none!important}

  /* Dense desktop cards become single-column reading cards. */
  .thflow-sec{padding:72px 0}
  .steps{gap:7px}
  .step{min-height:38px;padding:7px 10px}
  .fcards{gap:18px}
  .fcard{grid-template-columns:1fr!important;padding:20px;gap:16px;opacity:1!important;transform:none!important}
  .fcard h3{font-size:18px}
  .fcard p,.fcard ul{font-size:14px;line-height:1.65}
  .fcard .ev{width:100%;aspect-ratio:16/9}
  .fcard .num{font-size:22px}
  .thfoot{flex-direction:column;gap:8px;line-height:1.6}

  /* The comparison is static on touch screens, so scrolling never gets trapped by a pin. */
  .wipe-sec{height:100svh;min-height:620px}
  .wipe .handle::after{width:48px;height:48px}

  /* Readable contact details and safe-area spacing. */
  .contact-sec{min-height:100svh}
  .ft-rows div{display:grid;grid-template-columns:3.4em minmax(0,1fr);gap:8px}
  .ft-rows dd{min-width:0;overflow-wrap:anywhere}
  footer{padding-bottom:max(30px,env(safe-area-inset-bottom))}
}

@media (max-width:430px){
  .hero h1,.tyai-head h2,.demo-head-layer h2,.editors .e-head h2,.thflow-head h2{overflow-wrap:anywhere}
  .skills{grid-template-columns:1fr}
  .ft-downloads{grid-template-columns:1fr 1fr}
}