/* Consistent, lightly rounded iPad corners at every display size.
 * Only genuine iPad shells participate, not landscape desktop screenshots.
 * For the 3:4 screenshot, 4.5% / 3.375% gives near-circular corners.
 * The image's real border scales with the shell and derives its inner curve.
 */
html body :is(.owner-charts-shell, .paid-cafe-tablet-shell, .cs-tablet,
  .screenshot-frame--tablet:has(> img[src*="owner-charts-ipad"])) {
  container-type: inline-size;
  box-sizing: border-box;
  max-width: 100%;
  padding: 0 !important;
  border-width: 0 !important;
  border-style: solid;
  border-radius: 4.5% / 3.375% !important;
}

html body :is(.owner-charts-shell, .paid-cafe-tablet-shell, .cs-tablet,
  .screenshot-frame--tablet:has(> img[src*="owner-charts-ipad"])) > img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: auto 3 / 4;
  object-fit: contain;
  box-sizing: border-box;
  /* Container units follow this tablet, not the viewport or surrounding card.
   * A real image border also gives us the correct inner curve automatically. */
  border: 1.8cqw solid #102d32 !important;
  border-radius: 4.5% / 3.375% !important;
}

/* Size the image first so the small homepage frame includes its bezel. */
html body .how-story__tablet-shell {
  width: min(100%, calc((clamp(182px, 17vw, 196px) - 8px) * 0.75 + 8px));
  height: auto;
  aspect-ratio: auto;
}

/* Preserve the compact homepage preview at the tablet breakpoint, sizing the
 * shell rather than squeezing the image into a separately capped height. */
@media (min-width: 641px) and (max-width: 768px) {
  html body .hero-showcase__proof--datahub .owner-charts-shell {
    max-width: 147.5px;
  }
}