.kiosk-hero {
  padding: 72px 0 48px;
  background: var(--surface-2);
}

.kiosk-hero-fullbleed {
  position: relative;
  min-height: calc(100vh - 76px);
  display: grid;
  align-items: center;
  overflow: hidden;
}

.kiosk-hero-fullbleed::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(248, 250, 252, .97) 0%, rgba(248, 250, 252, .9) 34%, rgba(248, 250, 252, .46) 52%, rgba(248, 250, 252, 0) 72%);
  pointer-events: none;
}

.kiosk-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 700px);
  align-items: center;
  min-height: calc(100vh - 196px);
}

.kiosk-hero-copy h1 { max-width: 700px; font-size: clamp(42px, 5.6vw, 78px); }
.kiosk-hero-copy > p { max-width: 620px; margin-top: 20px; font-size: 18px; line-height: 1.65; }
.kiosk-hero-fullbleed .kiosk-hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.kiosk-hero-fullbleed .kiosk-hero-media picture,
.kiosk-hero-fullbleed .kiosk-hero-media img { display: block; width: 100%; height: 100%; }
.kiosk-hero-fullbleed .kiosk-hero-media img { max-width: none; object-fit: cover; object-position: center center; }

.kiosk-spec-band { border-block: 1px solid var(--line); background: #ffffff; }
.kiosk-spec-rail { display: grid; grid-template-columns: repeat(4, 1fr); }
.kiosk-spec-item { padding: 22px 24px; border-right: 1px solid var(--line); }
.kiosk-spec-item:last-child { border-right: 0; }
.kiosk-spec-item strong, .kiosk-spec-item span { display: block; }
.kiosk-spec-item strong { color: var(--graphite); font-size: 19px; }
.kiosk-spec-item span { margin-top: 5px; color: var(--muted); font-size: 13px; }

.kiosk-application-grid { display: grid; grid-template-columns: minmax(280px, .65fr) minmax(0, 1fr); gap: 54px; align-items: center; }
.kiosk-application-media, .kiosk-angles-media, .kiosk-video { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #ffffff; box-shadow: var(--shadow); }
.kiosk-application-media { aspect-ratio: 16 / 9; }
.kiosk-application-media img, .kiosk-angles-media img { width: 100%; height: 100%; object-fit: cover; }
.kiosk-angles-media { aspect-ratio: 1.94 / 1; }
.kiosk-angles-media img { object-fit: contain; }

.kiosk-video { position: relative; aspect-ratio: 16 / 9; background: var(--graphite); }
.kiosk-video picture, .kiosk-video img, .kiosk-video video { width: 100%; height: 100%; }
.kiosk-video img, .kiosk-video video { display: block; object-fit: cover; }
.kiosk-video video[hidden] { display: none; }
.kiosk-video-play { position: absolute; left: 50%; top: 50%; min-height: 52px; padding: 0 22px; transform: translate(-50%, -50%); border: 0; border-radius: 999px; background: #ffffff; color: var(--graphite); font: inherit; font-weight: 850; cursor: pointer; box-shadow: var(--shadow); }
.kiosk-video-status { position: absolute; inset: auto 18px 18px; margin: 0; padding: 12px 14px; border-radius: 6px; background: rgba(17, 24, 39, .88); color: #ffffff; }

@media (max-width: 980px) {
  .kiosk-application-grid { grid-template-columns: 1fr; }
  .kiosk-spec-rail { grid-template-columns: repeat(2, 1fr); }
  .kiosk-spec-item:nth-child(2) { border-right: 0; }
  .kiosk-spec-item:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 760px) {
  .kiosk-hero { padding: 48px 0 32px; background: #eef1f4; }
  .kiosk-hero-fullbleed { min-height: calc(100svh - 68px); }
  .kiosk-hero-fullbleed::before {
    background: linear-gradient(180deg, rgba(248, 250, 252, .98) 0%, rgba(248, 250, 252, .96) 42%, rgba(248, 250, 252, .72) 50%, rgba(248, 250, 252, .18) 58%, rgba(248, 250, 252, 0) 64%);
  }
  .kiosk-hero-grid { min-height: calc(100svh - 148px); align-items: start; padding-bottom: min(32vh, 280px); }
  .kiosk-hero-copy h1 { font-size: 40px; }
  .kiosk-hero-copy .hero-actions { flex-direction: row; align-items: center; gap: 10px; }
  .kiosk-hero-copy .button { flex: 1; min-width: 0; padding-inline: 12px; text-align: center; }
  .kiosk-hero-fullbleed .kiosk-hero-media { background: #eef1f4; }
  .kiosk-hero-fullbleed .kiosk-hero-media img { width: 65%; margin-inline: auto; object-fit: contain; object-position: center bottom; }
  .kiosk-video { aspect-ratio: 9 / 16; max-height: 76vh; }
}

@media (prefers-reduced-motion: reduce) {
  .kiosk-video-play { transition: none; }
}