/* Mobile use: keep navigation visible and let a swipe pass over closed previews. */
.table-scroll-hint{display:none}
.contact-band>div{min-width:0}
@media(max-width:750px){
  .site-header nav>.mobile-contact{display:flex;padding:14px 16px;justify-content:space-between}
  .language-link,.menu-toggle{min-height:44px;min-width:44px;justify-content:center}
  .scenario-demo select{font-size:16px;min-height:44px;max-width:100%}
  .table-scroll-hint{display:flex;align-items:center;gap:10px;font-size:14px;line-height:1.6;color:var(--muted);margin:0 0 14px}
  .table-scroll-hint span{color:var(--ink)}
  .table-wrap{scrollbar-width:thin;scrollbar-color:#8796a1 #eaf0f4;overscroll-behavior-x:contain}
  .contact-band h2{font-size:clamp(2rem,8.5vw,3.4rem);overflow-wrap:anywhere}
}
@media(max-width:750px),(hover:none) and (pointer:coarse){
  .new-demo-preview:not(.is-expanded) iframe{pointer-events:none;height:540px;max-height:70svh}
  .new-demo-preview.is-expanded iframe{pointer-events:auto;max-height:none}
}
@media(max-width:700px){
  .demo-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));position:static;overflow:visible;gap:4px}
  .demo-nav button{justify-content:center;white-space:normal;line-height:1.4}
  .demo-creative-tabs{flex-wrap:wrap;overflow:visible;gap:6px}
  .demo-creative-tabs button{flex:1 1 120px;white-space:normal;line-height:1.4}
  .cs-tabs{flex-wrap:wrap;overflow:visible;padding:8px;gap:4px}
  .cs-studio .cs-tabs button{flex:1 1 80px;justify-content:center;white-space:normal;min-height:44px;padding:10px 8px}
}
@media(max-width:360px){
  .site-header{padding-inline:16px;column-gap:8px}
  .brand-logo{width:120px}
  .vp-clip{flex-direction:column;align-items:flex-start}
  .vp-clip>span{min-width:0;max-width:100%}
}

/* Compact summaries on the homepage; full explanations keep their own pages. */
@media(max-width:750px){
 .page-home .hero-explanation{max-width:36ch;margin-inline:auto}
 .page-home .hero-product .artwork{display:none}
 .page-home .hero-product{padding-top:12px}
 .page-home .step-preview{display:none}
 .page-home .steps{gap:24px}
 .page-home .steps li{padding-bottom:20px}
 .page-home .feature-row p{display:none}
 .page-home .feature-row{min-height:80px;padding-block:20px}
 .page-home .mac-teaser-preview{display:none}
 .page-home .mac-teaser{padding-block:48px}
 .page-home .systems-suites{display:none}
 .page-home .systems-apps{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
 .page-home .systems-row{display:contents}
 .page-home .systems-app{min-height:96px;padding:12px 6px;font-size:12px;gap:10px}
 .page-home .systems-app:after{display:none}
 .page-home .systems-app img{width:32px;height:32px}
 .cp-art-scroll{overscroll-behavior-y:auto}
 .cp-caption small{font-size:11px;line-height:1.5;color:#596874}
 .vp-clip b,.vp-clip span,.vp-track>span{font-size:11px;line-height:1.35}
 .vp-ruler,.vp-track{grid-template-columns:62px minmax(0,1fr)}
 .vp-playhead{left:clamp(62px,calc(62px + (100% - 62px) * var(--vp-head,0)),100%)}
 .page-demo .page-hero,.page-advertenties-maken .page-hero,.page-video-maken .page-hero,.page-creators .page-hero{padding-top:32px;padding-bottom:28px}
 .page-demo .page-hero h1,.page-advertenties-maken .page-hero h1,.page-video-maken .page-hero h1,.page-creators .page-hero h1{font-size:clamp(2rem,8vw,2.8rem);line-height:1.1}
 .page-demo .page-hero-bottom,.page-advertenties-maken .page-hero-bottom,.page-video-maken .page-hero-bottom,.page-creators .page-hero-bottom{margin-top:20px}
}

/* One clear language control, aligned with the mobile menu. */
@media(max-width:750px){
 .site-header .language-switch{height:46px;padding-inline:3px;gap:2px;border:1px solid #d5dde1;border-radius:8px;background:#eef2f4}
 .site-header .language-current,.site-header .language-link{display:inline-flex;align-items:center;justify-content:center;font-family:Geist,Arial,sans-serif;font-size:12px;line-height:1;font-weight:600;letter-spacing:.02em}
 .site-header .language-current{min-width:32px;height:36px;border-radius:5px;background:#fff;color:#23313b;box-shadow:0 1px 3px #23313b14}
 .site-header .language-link{min-width:44px;min-height:44px;color:#52616b;border-radius:5px}
 .site-header .language-link:hover{color:#a84725;background:#e4e9ec}
 .js .site-header .menu-toggle{min-height:46px;padding:8px 6px}
}
@media(max-width:360px){.site-header .brand-logo{width:110px}}