:root {
  --emko-touchkiosk-blue: #0079c1;
  --emko-touchkiosk-blue-dark: #005f98;
  --emko-touchkiosk-ink: #111827;
  --emko-touchkiosk-muted: #5e6978;
  --emko-touchkiosk-soft: #f5f8fb;
  --emko-touchkiosk-line: #e7edf3;
  --emko-touchkiosk-radius-lg: 28px;
  --emko-touchkiosk-radius-md: 20px;
  --emko-touchkiosk-max: 1180px;
}
* { box-sizing: border-box; }

.emko-touchkiosk-page {
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: var(--emko-touchkiosk-ink);
  background: #fff;
  line-height: 1.6;
  overflow: clip;
}
.emko-touchkiosk-page img { display: block; max-width: 100%; }
.emko-touchkiosk-page h1,
.emko-touchkiosk-page h2,
.emko-touchkiosk-page h3,
.emko-touchkiosk-page p { margin-top: 0; }
.emko-touchkiosk-page h1,
.emko-touchkiosk-page h2,
.emko-touchkiosk-page h3 { line-height: 1.1; letter-spacing: -.035em; }

.emko-touchkiosk-container {
  width: min(var(--emko-touchkiosk-max), calc(100% - 48px));
  margin-inline: auto;
}
.emko-touchkiosk-eyebrow {
  margin: 0 0 14px;
  color: var(--emko-touchkiosk-blue-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
}
.emko-touchkiosk-eyebrow--light { color: #d9f1ff; }
.emko-touchkiosk-number {
  display: inline-block;
  margin-bottom: 20px;
  color: #a6b2bf;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
}
.emko-touchkiosk-number--light { color: #cceaff; }

.emko-touchkiosk-hero {
  padding: 82px 0 90px;
  background: #f7fafc;
}
.emko-touchkiosk-hero__grid {
  min-height: 610px;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 66px;
  align-items: center;
}
.emko-touchkiosk-hero__copy h1 {
  margin-bottom: 16px;
  color: var(--emko-touchkiosk-blue);
  font-size: clamp(52px, 6.2vw, 78px);
}
.emko-touchkiosk-hero__copy h2 {
  max-width: 650px;
  margin-bottom: 22px;
  font-size: clamp(31px, 3.5vw, 46px);
}
.emko-touchkiosk-hero__lead {
  max-width: 640px;
  margin-bottom: 0;
  color: var(--emko-touchkiosk-muted);
  font-size: 18px;
}
.emko-touchkiosk-hero__meta {
  margin-top: 38px;
  padding-top: 22px;
  border-top: 1px solid var(--emko-touchkiosk-line);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  color: #6f7c8e;
  font-size: 12px;
  font-weight: 700;
}
.emko-touchkiosk-hero__meta span:not(:last-child)::after {
  content: "·";
  margin-left: 22px;
  color: #b5c0cc;
}
.emko-touchkiosk-hero__media { margin: 0; }
.emko-touchkiosk-hero__media img {
  width: 100%;
  aspect-ratio: 1.2 / 1;
  object-fit: cover;
  object-position: center;
  border-radius: var(--emko-touchkiosk-radius-lg);
}
.emko-touchkiosk-hero__media figcaption {
  max-width: 570px;
  padding: 12px 4px 0;
  color: #768394;
  font-size: 12px;
  line-height: 1.55;
}

.emko-touchkiosk-section { padding: 92px 0; }
.emko-touchkiosk-section--soft { background: var(--emko-touchkiosk-soft); }
.emko-touchkiosk-intro { border-top: 1px solid var(--emko-touchkiosk-line); }
.emko-touchkiosk-intro__grid {
  display: grid;
  grid-template-columns: .86fr 1.14fr;
  gap: 92px;
  align-items: start;
}
.emko-touchkiosk-intro h2,
.emko-touchkiosk-overview__head h2,
.emko-touchkiosk-final h2 {
  margin-bottom: 0;
  font-size: clamp(32px, 4vw, 48px);
}
.emko-touchkiosk-prose p {
  color: var(--emko-touchkiosk-muted);
  font-size: 17px;
}
.emko-touchkiosk-prose p:last-child { margin-bottom: 0; }

.emko-touchkiosk-overview {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 72px;
  align-items: end;
}
.emko-touchkiosk-overview__head h2 { max-width: 620px; }
.emko-touchkiosk-overview__items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  border-top: 1px solid var(--emko-touchkiosk-line);
}
.emko-touchkiosk-overview__items div {
  min-height: 78px;
  padding: 18px 8px 18px 0;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: start;
  border-bottom: 1px solid var(--emko-touchkiosk-line);
}
.emko-touchkiosk-overview__items div:nth-child(odd) { margin-right: 22px; }
.emko-touchkiosk-overview__items b {
  color: var(--emko-touchkiosk-blue);
  font-size: 11px;
  letter-spacing: .08em;
}
.emko-touchkiosk-overview__items span {
  color: #445064;
  font-size: 14px;
  font-weight: 700;
}

.emko-touchkiosk-feature-row {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 72px;
  align-items: center;
}
.emko-touchkiosk-feature-row--reverse .emko-touchkiosk-feature-row__copy { order: 1; }
.emko-touchkiosk-feature-row--reverse .emko-touchkiosk-feature-row__media { order: 2; }
.emko-touchkiosk-feature-row__media {
  margin: 0;
  min-height: 410px;
  overflow: hidden;
  border-radius: 24px;
  background: var(--emko-touchkiosk-soft);
}
.emko-touchkiosk-feature-row__media img {
  width: 100%;
  height: 100%;
  min-height: 410px;
  object-fit: cover;
}
.emko-touchkiosk-feature-row__media--product img { object-position: center; }
.emko-touchkiosk-feature-row__copy h2,
.emko-touchkiosk-dual__item h2,
.emko-touchkiosk-content__copy h2 {
  margin-bottom: 18px;
  font-size: clamp(31px, 3.6vw, 45px);
}
.emko-touchkiosk-feature-row__copy > p,
.emko-touchkiosk-dual__item > p:last-child,
.emko-touchkiosk-content__copy > p:last-child {
  color: var(--emko-touchkiosk-muted);
  font-size: 16px;
}
.emko-touchkiosk-feature-row__facts {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--emko-touchkiosk-line);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  color: #5e6978;
  font-size: 12px;
  font-weight: 700;
}
.emko-touchkiosk-feature-row__facts span:not(:last-child)::after {
  content: "·";
  margin-left: 18px;
  color: #aab5c1;
}

.emko-touchkiosk-blue {
  padding: 96px 0;
  background: var(--emko-touchkiosk-blue);
  color: #fff;
}
.emko-touchkiosk-blue__grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 70px;
  align-items: center;
}
.emko-touchkiosk-blue__copy h2 {
  margin-bottom: 18px;
  color: #fff;
  font-size: clamp(32px, 4vw, 46px);
}
.emko-touchkiosk-blue__copy > p {
  color: #e4f4fd;
  font-size: 16px;
}
.emko-touchkiosk-blue__points {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.28);
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
}
.emko-touchkiosk-blue__points span {
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
}
.emko-touchkiosk-blue__points b {
  display: block;
  margin-bottom: 5px;
  color: #d7effd;
  font-size: 10px;
}
.emko-touchkiosk-blue__media {
  margin: 0;
  overflow: hidden;
  border-radius: 24px;
}
.emko-touchkiosk-blue__media img {
  width: 100%;
  min-height: 430px;
  object-fit: cover;
}

.emko-touchkiosk-dual {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 28px;
}
.emko-touchkiosk-dual__item {
  min-width: 0;
  padding-bottom: 10px;
}
.emko-touchkiosk-dual__media {
  height: 380px;
  margin-bottom: 30px;
  overflow: hidden;
  border-radius: 24px;
  background: #fff;
}
.emko-touchkiosk-dual__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.emko-touchkiosk-dual__media--portrait img { object-position: center 46%; }
.emko-touchkiosk-dual__item .emko-touchkiosk-number { margin-bottom: 14px; }
.emko-touchkiosk-dual__item h2 { font-size: clamp(27px, 3vw, 38px); }

.emko-touchkiosk-content {
  padding: 96px 0;
  background: var(--emko-touchkiosk-soft);
}
.emko-touchkiosk-content__grid {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 72px;
  align-items: center;
}
.emko-touchkiosk-content__media {
  margin: 0;
  overflow: hidden;
  border-radius: 24px;
  background: #fff;
}
.emko-touchkiosk-content__media img {
  width: 100%;
  min-height: 410px;
  object-fit: cover;
}

.emko-touchkiosk-final {
  padding: 104px 0;
  text-align: center;
}
.emko-touchkiosk-final__inner { max-width: 820px; }
.emko-touchkiosk-final p:not(.emko-touchkiosk-eyebrow) {
  max-width: 690px;
  margin: 18px auto 0;
  color: var(--emko-touchkiosk-muted);
  font-size: 17px;
}

@media (max-width: 980px) {
  .emko-touchkiosk-hero__grid,
  .emko-touchkiosk-intro__grid,
  .emko-touchkiosk-overview,
  .emko-touchkiosk-feature-row,
  .emko-touchkiosk-blue__grid,
  .emko-touchkiosk-content__grid {
    gap: 44px;
  }
}

@media (max-width: 820px) {
  .emko-touchkiosk-section { padding: 74px 0; }
  .emko-touchkiosk-hero { padding: 62px 0 72px; }
  .emko-touchkiosk-hero__grid,
  .emko-touchkiosk-intro__grid,
  .emko-touchkiosk-overview,
  .emko-touchkiosk-feature-row,
  .emko-touchkiosk-blue__grid,
  .emko-touchkiosk-content__grid,
  .emko-touchkiosk-dual {
    grid-template-columns: 1fr;
  }
  .emko-touchkiosk-feature-row--reverse .emko-touchkiosk-feature-row__copy,
  .emko-touchkiosk-feature-row--reverse .emko-touchkiosk-feature-row__media {
    order: initial;
  }
  .emko-touchkiosk-hero__media img { aspect-ratio: 16 / 10; }
  .emko-touchkiosk-blue__media img,
  .emko-touchkiosk-feature-row__media,
  .emko-touchkiosk-feature-row__media img,
  .emko-touchkiosk-content__media img { min-height: 340px; }
}

@media (max-width: 580px) {
  .emko-touchkiosk-container {
    width: min(var(--emko-touchkiosk-max), calc(100% - 32px));
  }
  .emko-touchkiosk-hero__copy h1 { font-size: 48px; }
  .emko-touchkiosk-hero__copy h2,
  .emko-touchkiosk-intro h2,
  .emko-touchkiosk-overview__head h2,
  .emko-touchkiosk-final h2 { font-size: 31px; }
  .emko-touchkiosk-hero__meta span::after,
  .emko-touchkiosk-feature-row__facts span::after { display: none; }
  .emko-touchkiosk-overview__items { grid-template-columns: 1fr; }
  .emko-touchkiosk-overview__items div:nth-child(odd) { margin-right: 0; }
  .emko-touchkiosk-blue__points { grid-template-columns: 1fr; }
  .emko-touchkiosk-dual__media { height: 310px; }
  .emko-touchkiosk-blue__media img,
  .emko-touchkiosk-feature-row__media,
  .emko-touchkiosk-feature-row__media img,
  .emko-touchkiosk-content__media img { min-height: 290px; }
}
