/* 01 — hero: measured-foot stage + lifestyle photo + trust row (T01) */
.hero__chip { margin-block-end: var(--s-5); }
.hero__chip .icon { width: 16px; height: 16px; }
.hero h1 { font-size: clamp(2.125rem, 1.5rem + 2.6vw, 3.5rem); text-wrap: balance; }
.hero h1 .accent { display: block; }
.hero .lead { margin-block-end: var(--s-6); }
.hero__ctas .btn { flex: 1 1 auto; }
@media (min-width: 480px) { .hero__ctas .btn { flex: 0 0 auto; } }

/* Trust row — clinical 2×2 on mobile, single ruled row on desktop */
.hero__facts {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-4);
  margin-block-start: var(--s-6); padding-block-start: var(--s-5);
  border-block-start: 1px solid var(--kx-line); color: var(--kx-ink-2);
}
.hero__facts li { align-items: flex-start; line-height: 1.45; }
.hero__facts .icon { margin-block-start: 1px; }
@media (min-width: 1200px) { .hero__facts { gap: var(--s-4) var(--s-7); } }

/* Stage: product sits higher so the caption zone (y > 500) stays clear */
.hero .measure-stage__img { inset: 6% 12% 16%; width: 76%; height: 78%; }
.hero .measure-stage__cap { flex-wrap: wrap; row-gap: var(--s-1); }
.hero .measure-stage__cap span:last-child { color: var(--kx-ink-3); }
.hero__tag { z-index: 1; }
/* tag positions live here (not inline) so the partial carries no % strings */
.hero__tag--len  { --x: 2%;  --y: 44%; }
.hero__tag--heel { --x: 2%;  --y: 74%; }
.hero__tag--arch { --x: 70%; --y: 24%; }
@media (max-width: 479px) {
  .hero__tag--arch { --x: 66%; --y: 22%; }
  .hero .measure-stage__cap { inset-inline: var(--s-4); bottom: var(--s-3); padding-block-start: var(--s-2); }
}

/* Mobile/tablet: stage first, photo as its own rounded card below */
.hero__media--combo { display: grid; gap: var(--s-5); }
.hero__media--combo .hero__photo { aspect-ratio: 5 / 4; border-radius: var(--r-lg); }
.hero__media--combo .hero__photo img { object-position: 50% 30%; }
@media (min-width: 640px) and (max-width: 959px) {
  .hero__media--combo { grid-template-columns: 1.4fr 1fr; align-items: center; }
  .hero__media--combo .hero__photo { aspect-ratio: 4 / 5; }
}

/* Desktop: stage aligned to the inline start, photo overlaps its lower outer corner */
@media (min-width: 960px) {
  .hero__media--combo { display: block; padding-block-end: var(--s-6); }
  .hero__media--combo .measure-stage { margin-inline: 0 auto; max-width: 92%; }
  .hero__media--combo .hero__photo {
    position: absolute; width: 34%; aspect-ratio: 4 / 5;
    inset-inline-end: 0; bottom: 0; z-index: 2;
  }
  .hero__media--combo .hero__photo img { object-position: 42% 40%; }
  /* keep the stage caption clear of the overlapping photo */
  .hero__media--combo .measure-stage__cap { inset-inline-end: 30%; }
}
.hero__tag--arch2 { --x: 80%; --y: 56%; }
@media (max-width: 959px) { .hero__tag--arch2 { --x: 78%; --y: 55%; } }
@media (max-width: 599px) { .hero__tag--arch2 { --x: 64%; --y: 55%; } .hero__tag--len { --x: 4%; } }