/* Phone-only clones 09/10. Leave the same gap at the bottom as at the sides.
   The painted surface ends one side-inset above the fold. Footer heights
   stay fixed; flat-card horizontal insets match the bottom clearance. */
@media (max-width: 600px) {
  html:is(#hero-directions,[data-proo-home-release])[data-caption-placement="inside"] .proo-static-hero__card {
    --inset-footer-ink: #f7f7f5;
    --inset-footer-circle-ink: #131314;
  }
  html:is(#hero-directions,[data-proo-home-release])[data-caption-placement="inside"][data-hero-theme="light"]
  .proo-static-hero__card--formation {
    --inset-footer-ink: #151516;
    --inset-footer-circle-ink: #f7f7f5;
  }
  html:is(#hero-directions,[data-proo-home-release])[data-caption-placement="inside"]
  .proo-static-hero__cards > .proo-static-hero__slide > .proo-static-hero__card::before {
    bottom: var(--inset-artwork-side) !important;
  }
  html:is(#hero-directions,[data-proo-home-release])[data-caption-placement="inside"]
  .proo-static-hero__slide:first-child .proo-static-hero__responsive-mark {
    bottom: var(--inset-artwork-side) !important;
  }
  /* 09/10 only: match the circle's right gap to its existing bottom gap.
     Keep captions slightly inward from that inset without enlarging their fit box.
     The separate nested-card studies retain their existing footer positions. */
  html:is(#hero-directions,[data-proo-home-release])[data-caption-placement="inside"]:not([data-artwork-layout="nested"])
  .proo-static-hero__card > .proo-card-info {
    right: var(--inset-footer-gap) !important;
  }
  html:is(#hero-directions,[data-proo-home-release])[data-caption-placement="inside"]:not([data-artwork-layout="nested"])
  .proo-static-hero__card > :is(.proo-static-hero__card-title, .proo-static-hero__mobile-software-label) {
    left: calc(var(--inset-footer-gap) + 7px) !important;
    right: auto !important;
    width: calc(100% - 2 * var(--mobile-service-title-inset) - 52px) !important;
  }
}