/* Keep decorative shapes inside the demo, never over neighbouring copy. */
@media(max-width:400px) {
  html body .topbar { padding-inline:10px; gap:6px; }
  html body .topbar .brand { font-size:14px; gap:5px; }
  html body .topbar .brand-icon { width:28px; height:28px; border-radius:9px; }
  html body .topbar .client-area { font-size:10px; gap:3px; padding:8px 2px; }
  html body .topbar .header-actions { gap:0; }
}
.hero > .hero-copy { position:relative; z-index:1; min-width:0; }
.hero > .hero-visual.af-demo { min-width:0; overflow:hidden; overflow:clip; }
@media(max-width:900px) {
  .hero > .hero-visual.af-demo {
    display:flex; flex-direction:column; align-items:center;
    gap:18px; min-height:0; padding:24px 0;
  }
  .hero .af-demo .sun {
    inset:0; margin:auto; width:100%; height:100%;
    max-width:440px; border-radius:44px; z-index:-1;
  }
  .hero .af-demo .mascot,
  .hero .af-demo .result-card {
    position:relative; inset:auto; margin:0;
    max-width:100%; box-sizing:border-box;
  }
  .hero .af-demo .mascot { justify-content:center; text-align:center; }
  .hero .af-demo .af-demo-stage {
    width:100%; min-width:0; padding:0;
    display:flex; justify-content:center;
  }
  .hero .af-demo .phone { transform:none; max-width:100%; }
  .hero .af-demo .result-card { animation:none; }
}
@media(max-width:600px) {
  html body a.whatsapp-float {
    width:56px; height:56px; padding:6px;
    justify-content:center; gap:0;
  }
  html body a.whatsapp-float .af-wa-copy { display:none; }
  html body a.whatsapp-float .af-wa-icon { width:42px; height:42px; }
}