/* V130 — mobile width balance, especially for workflow + preview */
@media (max-width:640px){
  /* Let the Beauty / Workflow block use a wider phone canvas. */
  .hero-experience .product-section.beauty-focus > .wrap{
    width:calc(100% - 12px)!important;
    max-width:100%!important;
  }

  /* Keep the section readable but less squeezed. */
  .hero-experience .product-grid.product-grid-with-native-flow{
    width:100%!important;
    margin:0!important;
  }
  .hero-experience .product-grid-with-native-flow .product-card-native-flow{
    padding:18px 8px 12px!important;
    border-radius:20px!important;
  }
  .hero-experience .product-card-native-flow > h3{
    max-width:100%!important;
    padding:0 12px!important;
    margin-bottom:0!important;
    font-size:clamp(17px,5.5vw,20px)!important;
    line-height:1.48!important;
    text-wrap:pretty!important;
  }

  /* Remove the extra feeling of inner squeeze around the flow chart. */
  .hero-experience .product-card-native-flow > .native-workflow{
    margin-top:16px!important;
    padding-top:0!important;
    border-top:0!important;
  }
  .hero-experience .native-workflow-row{
    padding:10px 8px!important;
    border-radius:14px!important;
  }
  .hero-experience .native-workflow-label{
    font-size:12px!important;
    line-height:1.3!important;
  }
  .hero-experience .native-workflow-chain span{
    padding:10px 10px!important;
    font-size:11.5px!important;
    line-height:1.34!important;
  }
  .hero-experience .native-workflow-chain b{height:16px!important}

  /* The preview should align visually with the wider flow area. */
  .hero-experience .product-card-native-flow > .hero-preview-wrap{
    margin-top:12px!important;
    padding:0!important;
  }
  .hero-experience .product-card-native-flow > .hero-preview-wrap > div,
  .hero-experience .product-card-native-flow > .hero-preview-wrap .skiin-preview{
    width:100%!important;
    max-width:100%!important;
  }
  .hero-experience .skiin-preview{
    border-radius:18px!important;
  }

  /* Slightly calmer section spacing on phone so it feels less top-heavy. */
  .hero-experience .product-section.beauty-focus{
    padding-top:36px!important;
    padding-bottom:36px!important;
  }
  .hero-experience .product-head{
    margin-bottom:18px!important;
  }
  .hero-experience .product-head p{
    font-size:14px!important;
    line-height:1.8!important;
    text-wrap:pretty!important;
  }
}

@media (max-width:390px){
  .hero-experience .product-section.beauty-focus > .wrap{
    width:calc(100% - 8px)!important;
  }
  .hero-experience .product-grid-with-native-flow .product-card-native-flow{
    padding:16px 6px 10px!important;
  }
  .hero-experience .product-card-native-flow > h3{
    padding:0 10px!important;
  }
  .hero-experience .native-workflow-row{
    padding:9px 6px!important;
  }
}