/* Hero carousel on /services/payments: each terminal in its business, leading into the terminal showcase. */
.pay-hero { --pay-hold: 7s; position: relative; height: min(100svh, 1240px); min-height: 700px; overflow: clip; background: #060d15; isolation: isolate; }
.pay-hero-crumbs { position: absolute; z-index: 3; top: 130px; left: var(--pad); }

.pay-hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1.1s var(--ease), visibility 0s 1.1s; }
.pay-hero-slide.is-current { opacity: 1; visibility: visible; transition: opacity 1.1s var(--ease), visibility 0s; }
/* The whole scene is always visible: it keeps its 3:2 shape at the full height of the hero,
   anchored right. On wide screens the words sit on the dark ground to its left; where the hero
   is narrower than the scene, only its dark left edge runs off-screen. */
.pay-hero-scene { position: absolute; top: 0; right: 0; bottom: 0; height: 100%; aspect-ratio: 3 / 2; }
.pay-hero-scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Only the edges are blended: the left into the ground, a strip under the header and behind the controls. */
.pay-hero-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #060d15 0, #060d1500 24%), linear-gradient(0deg, #060d15e6 0, #060d1500 15%), linear-gradient(180deg, #060d15cc 0, #060d1500 18%); }

.pay-hero-content { position: absolute; z-index: 2; left: var(--pad); bottom: 190px; max-width: min(680px, 44vw); }
.pay-hero-content h1, .pay-hero-content h2, .pay-hero-content .page-lead { text-shadow: 0 2px 24px #060d15; }
.pay-hero-content .index { display: block; margin-bottom: 26px; color: #8ec8dd; font-size: 11px; }
.pay-hero-content h1, .pay-hero-content h2 { margin-bottom: 0; font-size: clamp(46px, 5vw, 84px); line-height: 1.02; letter-spacing: -.05em; }
.pay-hero-content h1 em, .pay-hero-content h2 em { color: #a7c5e2; }
.pay-hero-content .page-lead { max-width: 30em; margin-top: 26px; font-size: 17px; }
.pay-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 34px; margin-top: 34px; }
.pay-hero-actions .text-link { margin-top: 0; color: #dceaf2; }
.pay-hero-content > * { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .9s var(--ease); }
.pay-hero-slide.is-current .pay-hero-content > * { opacity: 1; transform: none; }
.pay-hero-slide.is-current .pay-hero-content > :nth-child(2) { transition-delay: .08s; }
.pay-hero-slide.is-current .pay-hero-content > :nth-child(3) { transition-delay: .16s; }
.pay-hero-slide.is-current .pay-hero-content > :nth-child(4) { transition-delay: .24s; }

.pay-hero-controls { position: absolute; z-index: 3; left: var(--pad); right: var(--pad); bottom: 40px; display: flex; align-items: flex-end; gap: 40px; }
.pay-hero-selector { flex: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.pay-hero-dot { position: relative; display: flex; align-items: baseline; gap: 10px; min-height: 48px; padding: 18px 0 0; background: none; text-align: left; color: #7f9bae; font-size: 14px; transition: color .3s; }
.pay-hero-dot::before, .pay-hero-dot i { content: ""; position: absolute; top: 0; left: 0; height: 1px; }
.pay-hero-dot::before { right: 0; background: #ffffff2e; }
.pay-hero-dot i { width: 0; background: #20b7d6; }
.pay-hero-dot span { font-size: 11px; letter-spacing: .08em; }
.pay-hero-dot strong { font-weight: 400; }
.pay-hero-dot:hover, .pay-hero-dot.is-active { color: #f1f8fa; }
.pay-hero-dot.is-active span { color: #20b7d6; }
.pay-hero-dot.is-active i { width: 100%; }
.is-autoplay .pay-hero-dot.is-active i { width: 0; animation: pay-hero-progress var(--pay-hold) linear forwards; }
.is-autoplay.is-held .pay-hero-dot.is-active i { animation-play-state: paused; }
@keyframes pay-hero-progress { to { width: 100%; } }
.pay-hero-buttons { display: flex; align-items: center; gap: 10px; }
.pay-hero-arrow { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #ffffff33; border-radius: 50%; background: #060d1566; color: #f1f8fa; font-size: 17px; transition: background .3s, border-color .3s; }
.pay-hero-arrow:hover { background: #17405a; border-color: #7fc5dd88; }
.pay-hero-pause { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 14px; background: none; color: #c4d6e1; font-size: 12px; }
.pay-hero-pause[hidden] { display: none; }
.pay-hero button:focus-visible, .pay-hero a:focus-visible { outline: 2px solid #20b7d6; outline-offset: 4px; }
.pay-hero-live { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 1000px) {
  /* Narrow screens: the scene is its own block, cropped around the terminal, with the words below it.
     Slides share one grid cell, so the hero is as tall as its longest slide. */
  .pay-hero { height: auto; min-height: 0; }
  .pay-hero-slides { display: grid; }
  .pay-hero-slide { position: relative; inset: auto; grid-area: 1 / 1; }
  .pay-hero-crumbs { position: relative; top: auto; left: auto; padding: 104px var(--pad) 0; }
  .pay-hero-scene { position: relative; display: block; width: 100%; height: auto; margin-top: 20px; }
  .pay-hero-scene::after { background: linear-gradient(0deg, #060d15 0, #060d1500 16%); }
  .pay-hero-content { position: relative; left: auto; bottom: auto; max-width: 640px; margin-top: 8px; padding: 0 var(--pad) 112px; }
  .pay-hero-content h1, .pay-hero-content h2 { font-size: clamp(38px, 9vw, 60px); }
  .pay-hero-content .page-lead { margin-top: 18px; font-size: 16px; }
  .pay-hero-actions { gap: 12px 26px; margin-top: 24px; }
  .pay-hero-controls { bottom: 24px; gap: 14px; }
  .pay-hero-selector { display: flex; gap: 8px; }
  .pay-hero-dot { flex: 1; min-width: 0; padding-top: 14px; }
  .pay-hero-dot strong { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pay-hero-pause { padding: 0 6px; }
  .pay-hero-pause-label { display: none; }
  .pay-hero-arrow { width: 44px; height: 44px; }
}
@media (max-width: 600px) {
  .pay-hero-content { padding-bottom: 100px; }
  .pay-hero-content .index { margin-bottom: 16px; font-size: 10px; }
  .pay-hero-actions .button { padding-inline: 18px; }
}

.motion-paused .pay-hero-content > * { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .pay-hero-slide, .pay-hero-content > * { transition: none; }
}