/* Phones (≤640px): one calm column. Loaded last, so it wins over the layered preview sheets.
   - one waitlist CTA per screen, not per section (header, hero, "How it works", closing)
   - tall stacks become swipe rows: selected work, the three steps, the three audiences
   - logos go monochrome and lose their labels, so nothing reads as an emoji
   Desktop and tablet are untouched. */
@media(max-width:640px){
  /* Shared swipe row: bleeds to the screen edge, snaps per card, next card peeks in. */
  #made .work-grid,#workspace .process-grid,#for-whom .audience-photo-grid{display:flex!important;flex-direction:row!important;gap:12px!important;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:20px;margin-inline:-20px;padding:0 20px 4px;scrollbar-width:none;grid-template-columns:none!important}
  #made .work-grid::-webkit-scrollbar,#workspace .process-grid::-webkit-scrollbar,#for-whom .audience-photo-grid::-webkit-scrollbar,#possibilities .tabs::-webkit-scrollbar{display:none}

  /* CTAs that repeat the same "Join the waitlist" inside every section. */
  #workflow-start,#made .work-bottom,#control .control-details>.text-link,#context-start,#integrations .integration-action,#for-whom .audience-panel .button{display:none!important}

  /* Header: a compact pill, no caption under it. */
  main .header .header-waitlist a.start-cta{min-height:38px;padding:8px 14px!important;font-size:12px;gap:10px}
  main .header .header-waitlist a.start-cta>span[aria-hidden]{font-size:15px;line-height:1}
  .header .header-beta{display:none!important}

  /* Hero: copy sits on the lower part of the film, no capability strip, two equal buttons. */
  .hero-stage .capabilities{display:none!important}
  .hero-stage .hero-content{position:absolute;left:0;right:0;top:auto;bottom:36px;margin-inline:auto;transform:none}
  .hero-content .actions{display:grid!important;grid-template-columns:1fr;gap:10px!important;max-width:none!important}
  main .hero-stage .hero-content .actions>a.start-cta,main .hero-stage .hero-content .actions>.demo-play{width:100%;height:52px;min-height:0;padding-block:0!important;justify-content:center;box-sizing:border-box}

  /* What do you want to create: one swipeable row of tabs. */
  #possibilities .tabs{display:flex!important;gap:24px!important;overflow-x:auto;scrollbar-width:none;margin:0 -20px 28px!important;padding:0 20px;border-bottom:1px solid #dddde1!important;scroll-padding-inline:20px}
  #possibilities .tabs button{flex:0 0 auto;min-height:44px!important;padding:0!important;white-space:nowrap;font-size:13px!important;border-bottom:0!important}
  #possibilities .tabs button::after{bottom:0}
  #possibilities .workflow-ai-badge{display:none!important}
  #possibilities .workflow-prompt{grid-template-columns:1fr!important;border-width:1px!important;padding:18px!important}
  html #workflow-panel #workflow-channels{display:none!important}
  #workflow-panel .flow-result{grid-template-columns:minmax(0,1fr)!important}
  #workflow-panel .workflow-flow{gap:0!important;margin:8px 0 0!important}
  #workflow-panel .flow-stage{padding:16px 0 16px 18px!important}
  #workflow-panel .flow-stage h4{font-size:17px!important;margin-bottom:6px!important}
  #workflow-panel .flow-stage ul{display:flex!important;flex-wrap:wrap;gap:0 6px!important}
  #workflow-panel .flow-stage ul li{font-size:13px!important}
  #workflow-panel .flow-stage ul li:not(:last-child)::after{content:'·';margin-left:6px;color:#a3a4a9}

  /* Made with DFIRST: one swipe row of the six examples. */
  #made .balanced-row{display:contents!important}
  #made .work-case{flex:0 0 74%!important;width:auto!important;height:auto!important;margin:0!important;grid-area:auto!important;scroll-snap-align:start}
  #made .work-case .work-item,#made .work-case .work-image{display:block;width:100%!important;height:auto!important;aspect-ratio:4/5}
  #made .work-case .work-image img{width:100%;height:100%!important;object-fit:cover}
  #made .work-film{margin-top:28px}

  /* 60+ models: slim chips instead of tall empty tiles. */
  #models .model-marquees,#models .model-lane,#models .model-track,#models .model-group{height:auto!important;min-height:0!important}
  #models .model-tile{min-height:0!important;height:auto!important;padding:14px 18px!important}
  #models .model-kind{display:none!important}
  #models .model-icon{filter:grayscale(1);opacity:.8}

  /* How it works: the three steps side by side, swiped. */
  #workspace .process-card{flex:0 0 86%!important;min-width:0;scroll-snap-align:start}

  /* Your brand and market: the five views fit on one line. */
  #brand .context-nav{justify-content:center;gap:2px!important;width:auto!important;max-width:100%;margin-inline:auto}
  #brand .context-nav button{padding-inline:9px!important;font-size:12px!important}

  /* App connections: a quiet monochrome wall, names kept for screen readers. */
  #integrations .integration-row{grid-template-columns:repeat(6,minmax(0,1fr));gap:26px 0;width:auto;min-width:0;margin-inline:20px}
  #integrations .integration-row li{min-height:0!important;height:auto!important;padding:0!important;justify-content:center}
  #integrations .integration-row li img{width:24px!important;height:24px!important;filter:grayscale(1) brightness(1.35);opacity:.72}
  #integrations .integration-row li span{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  #integrations .integration-field{margin-block:34px 0;-webkit-mask-image:none;mask-image:none}

  /* Who is DFIRST for: three persona cards, swiped. */
  #for-whom .audience-card{flex:0 0 86%!important;min-height:0!important;height:560px!important;scroll-snap-align:start}
  #for-whom .audience-card-copy h3{font-size:34px!important}
}
@media(max-width:380px){
  #brand .context-nav button{padding-inline:6px!important;font-size:11px!important}
}