/* MijnGeld Dashboard V32.4.45 — finale mobiele/tablet polish
   Doel: dashboard direct zichtbaar in de eerste mobiele indruk, natuurlijke typografie,
   compactere verticale ritmiek en een realistischer telefoonmockup. */

/* Rustiger, consistenter ritme op tablet en mobiel. */
@media (max-width:900px){
  .mgdu-home .section{padding-top:44px!important;padding-bottom:44px!important}
  .mgdu-home .home-card,.mgdu-home .section.dark>.storyline.home-card{padding-top:27px!important;padding-bottom:27px!important}
  .mgdu-home .intro{margin-bottom:27px!important}
  .mgdu-home .benefits,.mgdu-home .plans{gap:14px!important}
  .mgdu-home .benefit{padding:23px!important}
  .mgdu-home .benefit .n{margin-bottom:15px!important}
  .mgdu-home .benefit h3{margin-bottom:8px!important}
  .mgdu-home .plan,.mgdu-home .plan.featured{padding:23px!important}
  .mgdu-home .plan p{margin-bottom:18px!important}
  .mgdu-home .plan ul{margin-bottom:21px!important;gap:9px!important}
  .mgdu-home .faq details{padding:18px 0!important}
  .mgdu-home .final{padding-top:44px!important;padding-bottom:44px!important}
}

/* Mobiele hero: merk/kop -> product -> uitleg/CTA. Zo ziet de bezoeker meteen het product. */
@media (max-width:520px){
  .mgdu-home .hero{padding-top:18px!important;padding-bottom:30px!important}
  .mgdu-home .hero>.shell.hero-grid{
    display:flex!important;
    flex-direction:column!important;
    gap:0!important;
    padding-top:21px!important;
    padding-bottom:21px!important;
  }
  .mgdu-home .hero-grid>div:first-child{display:contents!important}
  .mgdu-home .hero .eyebrow{order:1;margin:0 0 13px!important}
  .mgdu-home .hero h1{order:2;margin:0!important}
  .mgdu-home .hero .product-stage{order:3;margin:21px 0 19px!important}
  .mgdu-home .hero .lead{order:4;margin:0!important}
  .mgdu-home .hero .actions{order:5;margin-top:18px!important}
  .mgdu-home .hero .micro{order:6;margin-top:15px!important}
  .mgdu-home .hero .proof-strip{order:7;margin-top:20px!important}

  /* Productpresentatie: breder dashboard en minder lange/smalle telefoon. */
  .mgdu-home .product-stage{
    min-height:335px!important;
    height:335px!important;
    padding:0 8px 26px 0!important;
    overflow:visible!important;
  }
  .mgdu-home .dashboard-window{
    width:92%!important;
    min-height:292px!important;
    padding:13px!important;
    border-radius:18px!important;
  }
  .mgdu-home .dw-top{padding-bottom:10px!important}
  .mgdu-home .dw-brand img{width:28px!important;height:28px!important}
  .mgdu-home .dw-brand b{font-size:10px!important}
  .mgdu-home .dw-brand small{font-size:7px!important}
  .mgdu-home .premium-pill{font-size:7px!important;padding:7px 10px!important}
  .mgdu-home .dw-hero{padding:13px 2px 11px!important}
  .mgdu-home .dw-hero>span{font-size:7px!important}
  .mgdu-home .dw-hero strong{font-size:19px!important;margin-top:5px!important}
  .mgdu-home .dw-hero p{font-size:8px!important;line-height:1.35!important;margin-top:5px!important}
  .mgdu-home .dw-stats{gap:6px!important}
  .mgdu-home .dw-stats>div{padding:9px!important}
  .mgdu-home .dw-stats span{font-size:7px!important}
  .mgdu-home .dw-stats b{font-size:12px!important}
  .mgdu-home .dw-panels{margin-top:7px!important}
  .mgdu-home .dw-panel{padding:9px!important}
  .mgdu-home .dw-panel b{font-size:9px!important}

  .mgdu-home .phone-window{
    width:142px!important;
    min-height:246px!important;
    height:246px!important;
    right:0!important;
    bottom:20px!important;
    padding:20px 11px 11px!important;
    border-radius:25px!important;
    transform:rotate(1.2deg)!important;
  }
  .mgdu-home .phone-notch{width:52px!important;height:10px!important;top:7px!important}
  .mgdu-home .phone-brand{margin:4px 0 14px!important}
  .mgdu-home .phone-window>small{font-size:8px!important}
  .mgdu-home .phone-window>strong{font-size:20px!important;margin:5px 0 11px!important}
  .mgdu-home .phone-card{padding:9px!important;margin-top:7px!important}
  .mgdu-home .phone-card span{font-size:7px!important}
  .mgdu-home .phone-card b{font-size:13px!important;margin-top:3px!important}
  .mgdu-home .stage-note{left:8px!important;bottom:0!important;max-width:215px!important;padding:9px 11px!important}
  .mgdu-home .stage-note b{font-size:9px!important}.mgdu-home .stage-note small{font-size:7px!important}

  /* Geen onnodig lange pagina: behoud ademruimte, haal overtollige hoogte weg. */
  .mgdu-home .section{padding-top:30px!important;padding-bottom:30px!important}
  .mgdu-home .home-card,.mgdu-home .section.dark>.storyline.home-card{padding-top:21px!important;padding-bottom:21px!important}
  .mgdu-home .intro{margin-bottom:22px!important}
  .mgdu-home .intro p,.mgdu-home .storycopy p{line-height:1.52!important}
  .mgdu-home .benefit{padding:20px!important}
  .mgdu-home .benefit p{line-height:1.5!important}
  .mgdu-home .steps{gap:27px!important}
  .mgdu-home .stepnum{margin-bottom:13px!important}
  .mgdu-home .step h3{margin-bottom:7px!important}
  .mgdu-home .step p{line-height:1.5!important}
  .mgdu-home .plans{gap:12px!important}
  .mgdu-home .plan,.mgdu-home .plan.featured{padding:20px!important}
  .mgdu-home .label{margin-bottom:12px!important}
  .mgdu-home .price{margin:10px 0 13px!important}
  .mgdu-home .plan p{line-height:1.5!important;margin-bottom:16px!important}
  .mgdu-home .plan ul{gap:8px!important;margin-bottom:18px!important}
  .mgdu-home .faq details{padding:16px 0!important}
  .mgdu-home .faq summary{font-size:15px!important;line-height:1.35!important}
  .mgdu-home .final{padding-top:30px!important;padding-bottom:30px!important}
  .mgdu-home .finalbox{padding:28px 19px!important}
  .mgdu-home .footer{padding-top:27px!important;padding-bottom:32px!important}
  .mgdu-home .footerin{gap:12px!important}

  /* Koppen breken op betekenisvolle plekken; geen geforceerde woordbreuken. */
  .mgdu-home h1,.mgdu-home h2,.mgdu-home h3{overflow-wrap:normal!important;word-break:normal!important;hyphens:none!important}
  .mgdu-home .intro h2,.mgdu-home .storyline h2,.mgdu-home .emotion-grid h2,.mgdu-home .upgrade-box h2,.mgdu-home .finalbox h2{
    text-wrap:balance!important;
  }
}

/* Kleine Android/iPhone breedtes: veilig binnen de randen zonder miniatuurtekst. */
@media (max-width:390px){
  .mgdu-home .product-stage{height:315px!important;min-height:315px!important}
  .mgdu-home .dashboard-window{width:94%!important;min-height:275px!important}
  .mgdu-home .phone-window{width:132px!important;height:232px!important;min-height:232px!important}
  .mgdu-home .stage-note{max-width:195px!important}
}

/* Tablet: product blijft royaal maar telefoon behoudt natuurlijke verhouding. */
@media (min-width:521px) and (max-width:900px){
  .mgdu-home .product-stage{min-height:455px!important;max-width:650px!important}
  .mgdu-home .phone-window{width:170px!important;min-height:310px!important;right:8px!important;transform:rotate(1.5deg)!important}
}