/* The live profitability card becomes part of the mobile hero flow. */
@media (max-width: 900px) {
  .saas-hero > .profit-widget {
    position: relative;
    top: auto;
    right: auto;
    display: block;
    width: min(100%, 390px);
    margin: 34px auto 0;
  }
}

@media (max-width: 720px) {
  .saas-hero .shopify-image-cta { width: min(100%, 230px); }
  .saas-hero .hero-install { gap: 8px; }
  .saas-hero .hero-install > span { margin-left: 5px; font-size: 11px; }
  .saas-hero > .profit-widget {
    width: min(100%, 350px);
    margin-top: 31px;
    padding: 16px;
    border-radius: 22px;
  }
  .saas-hero > .profit-widget .profit-chart { width: 224px; height: 224px; margin: 19px auto 17px; }
  .saas-hero > .profit-widget .profit-ring { mask: radial-gradient(farthest-side, transparent calc(100% - 33px), #000 calc(100% - 32px)); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 33px), #000 calc(100% - 32px)); }
  .saas-hero > .profit-widget .profit-total strong { font-size: 27px !important; }
  .saas-hero > .profit-widget .profit-total small { font-size: 8px !important; }
  .saas-hero > .profit-widget .profit-total span { font-size: 9px !important; }
  .saas-hero > .profit-widget .profit-metrics div { padding: 12px 10px; }
  .saas-hero > .profit-widget .profit-metrics strong { font-size: 15px; }
  .saas-hero > .profit-widget .widget-foot { margin-top: 14px; font-size: 10px; }
}

@media (max-width: 390px) {
  .saas-hero .shopify-image-cta { width: 210px; }
  .saas-hero > .profit-widget { width: 100%; padding: 14px; }
  .saas-hero > .profit-widget .profit-chart { width: min(67vw, 218px); height: min(67vw, 218px); }
  .saas-hero > .profit-widget .widget-top { font-size: 7px; }
  .saas-hero > .profit-widget .profit-metrics strong { font-size: 13px; }
}