/* Shared artwork frames: one canvas, one visible size, no cropped CI. */
:is(body[data-page], body[data-presentation="employee"]) {
  --presentation-art-width: min(520px, calc(100vw - 64px));
  --presentation-mascot-width: 176px;
}
:is(body[data-page], body[data-presentation="employee"])
  main
  :is(
    .hero-art,
    .page-art,
    .story-art,
    .perks-hero-art,
    .member-hero figure,
    .login-art,
    .ep-art,
    .realtime-heading-art
  ) {
  width: var(--presentation-art-width);
  max-width: 100%;
  min-width: 0;
  margin-inline: auto;
  justify-self: center;
  align-self: center;
  aspect-ratio: auto;
  border-radius: 24px;
  padding: 0;
  transform: none;
}
:is(body[data-page], body[data-presentation="employee"])
  main
  :is(
    .hero-art > img,
    .page-art > img,
    .story-art > img,
    .perks-hero-art > img,
    .member-hero figure > img,
    .login-art > img,
    .ep-art > img,
    .realtime-heading-art > img
  ) {
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  border-radius: 24px;
}
:is(body[data-page], body[data-presentation="employee"])
  main
  :is(img.mascot-pose, .perks-access-copy > img, .perks-points-card > img) {
  display: block;
  width: min(100%, var(--presentation-mascot-width));
  max-width: var(--presentation-mascot-width);
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  padding: 0;
}
body[data-page="home"] .tracking-mini-art {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: center;
  gap: 14px;
  width: min(100%, 260px);
  min-width: 0;
}
body[data-page="home"] .tracking-mini-art > .mascot-pose {
  order: 2;
  margin: 0;
}
body[data-page="home"] .tracking-mini-art > .bubble-label {
  position: static;
  order: 1;
  max-width: 100%;
  margin: 0;
  padding: 8px 14px;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
  font-size: 12px;
  line-height: 1.7;
  transform: none;
  background: var(--theme-surface, #fffdf6);
  color: var(--theme-text, #39291f);
  border: 1px solid var(--theme-line, #eadfd1);
  border-radius: 16px;
}
/* Copy belongs outside the illustration so it never covers the CI. */
body[data-page="login"] .login-art::after {
  content: none;
}
body[data-page="login"] .login-art-copy {
  position: static;
  padding: 24px;
  background: var(--theme-soft, #fff2e1);
  color: var(--theme-text, #39291f);
}
body[data-page="login"] .login-art-copy .small-label {
  color: var(--theme-muted, #715f51);
}
@media (max-width: 1060px) {
  :is(body[data-page], body[data-presentation="employee"])
    main
    :is(
      .home-hero,
      .page-hero,
      .perks-hero,
      .member-hero,
      .login-layout,
      .ep-login,
      .realtime-heading
    ) {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (min-width: 1061px) {
  :is(body[data-page], body[data-presentation="employee"]) {
    --presentation-art-width: 624px;
  }
  body[data-page] main .home-hero {
    grid-template-columns: minmax(0, 0.93fr) minmax(624px, 1.13fr);
  }
  body[data-page] main .page-hero {
    grid-template-columns: minmax(0, 0.86fr) minmax(624px, 1.14fr);
  }
  body[data-page] main .perks-hero {
    grid-template-columns: minmax(0, 0.9fr) minmax(624px, 1.1fr);
  }
  body[data-page] main .member-hero {
    grid-template-columns: minmax(0, 1fr) minmax(624px, 1fr);
  }
  body[data-page] main .home-story {
    grid-template-columns: minmax(624px, 1.08fr) minmax(0, 0.95fr);
  }
  body[data-page] main .login-layout {
    grid-template-columns: minmax(624px, 1fr) minmax(0, 1fr);
  }
  body[data-presentation="employee"] main .ep-login {
    grid-template-columns: minmax(624px, 1.35fr) minmax(0, 0.85fr);
  }
  body[data-page] main .realtime-heading {
    grid-template-columns: minmax(0, 1fr) 624px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .customer-motion main [data-motion="image"].motion-visible {
    transform: none;
  }
}

body[data-page] :is(.art-caption, .perks-art-note) {
  position: static;
  display: block;
  margin: 12px 0 0;
  padding: 0;
  background: transparent;
  color: var(--theme-muted, #715f51);
  transform: none;
  max-width: 100%;
  text-align: center;
  overflow-wrap: anywhere;
}