/* Real native captures: crop the surroundings, preserve every visible control. */
.home-page .editorial-dashboard .native-layout-figure.native-arrange-nl15,
.information-page .native-layout-figure.native-arrange-nl15,
.native-layout-figure.native-arrange-nl15 {
  width:100%;
  max-width:808px;
  margin-inline:auto;
}
.native-arrange-nl15 .native-arrange-columns-nl15 {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  align-items:start;
  background:transparent;
}
.native-layout-figure.native-arrange-nl15 .native-arrange-panel-nl15.native-crop {
  --native-frame-inset:1;
  --native-frame-radius:24;
  position:relative;
  overflow:hidden;
  aspect-ratio:var(--cw)/var(--ch);
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  clip-path:inset(
    calc(var(--native-frame-inset)/var(--ch)*100%)
    calc(var(--native-frame-inset)/var(--cw)*100%)
    round calc(var(--native-frame-radius)/var(--cw)*100%) /
    calc(var(--native-frame-radius)/var(--ch)*100%)
  );
}
.native-arrange-nl15 .native-arrange-panel-nl15>img {
  position:absolute;
  display:block;
  max-width:none;
  width:calc(var(--sw)/var(--cw)*100%);
  height:auto;
  left:calc(var(--cx)/var(--cw)*-100%);
  top:calc(var(--cy)/var(--ch)*-100%);
  transform:none;
}
.native-layout-figure.native-arrange-nl15 figcaption a {
  min-height:44px;
  align-items:center;
}
.native-layout-figure.native-arrange-nl15 figcaption a:focus-visible {
  outline:2px solid var(--pink);
  outline-offset:3px;
}
@media(max-width:600px) {
  .native-arrange-nl15 .native-arrange-columns-nl15 {
    grid-template-columns:minmax(0,1fr);
    gap:16px;
    width:100%;
    max-width:392px;
    margin-inline:auto;
  }
  .native-layout-figure.native-arrange-nl15 figcaption {
    display:block;
  }
  .native-layout-figure.native-arrange-nl15 figcaption a {
    margin-top:7px;
  }
}

/* For additional native detail frames. Set crop geometry on .native-crop;
   set --native-frame-inset/radius in source pixels when its edge differs. */
.native-evidence.native-evidence-nl15 .native-crop {
  --native-frame-inset:1;
  --native-frame-radius:24;
  position:relative;
  overflow:hidden;
  aspect-ratio:var(--cw)/var(--ch);
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  clip-path:inset(
    calc(var(--native-frame-inset)/var(--ch)*100%)
    calc(var(--native-frame-inset)/var(--cw)*100%)
    round calc(var(--native-frame-radius)/var(--cw)*100%) /
    calc(var(--native-frame-radius)/var(--ch)*100%)
  );
}

/* The hero JPEG has a white outer backdrop at the native round corners.
   Clip two source pixels and scale its inner contour with the image. */
.home-page .editorial-hero .hero-product-canvas.editorial-overview {
  --hero-frame-cw:2880;
  --hero-frame-ch:1560;
  aspect-ratio:var(--hero-frame-cw)/var(--hero-frame-ch);
  overflow:hidden;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  clip-path:inset(
    calc(2/var(--hero-frame-ch)*100%) calc(2/var(--hero-frame-cw)*100%)
    round calc(54/var(--hero-frame-cw)*100%) /
    calc(54/var(--hero-frame-ch)*100%)
  );
}
@media(max-width:600px) {
  .home-page .editorial-hero .hero-product-canvas.editorial-overview {
    --hero-frame-cw:1535;
    --hero-frame-ch:1476;
  }
}

/* Give the real editors enough room; the Clock canvas gets a full row. */
.home-page .editor-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
.home-page .editor-detail-grid>.native-evidence-nl15{display:flex;flex-direction:column;min-width:0}
.home-page .editor-detail-grid>.native-evidence-nl15 figcaption{margin-top:auto;padding-top:12px;min-height:54px}
.home-page .editor-detail-grid>.native-clock{grid-column:1/-1;width:100%;max-width:960px;justify-self:center}
@media(max-width:800px){.home-page .editor-detail-grid{grid-template-columns:minmax(0,1fr);gap:24px}.home-page .editor-detail-grid>.native-clock{grid-column:auto}.home-page .editor-detail-grid>.native-evidence-nl15 figcaption{min-height:0}}
/* Keep the native editors near the same point scale and raster density. */
.home-page .editor-detail-grid{grid-template-columns:minmax(0,1fr);max-width:960px;margin-inline:auto;gap:32px}
.home-page .editor-detail-grid>.native-evidence-nl15{width:100%;justify-self:center}
.home-page .editor-detail-grid>.native-audio{max-width:600px}
.home-page .editor-detail-grid>.native-mapping{max-width:900px}
.home-page .editor-detail-grid>.native-clock{max-width:960px;grid-column:auto}
.home-page .editor-detail-grid>.native-evidence-nl15 figcaption{margin-top:0;min-height:0}