/* Terminal showcase on /services/payments. Loaded after the shared site styles. */
.terminal-showcase { position: relative; padding: 96px var(--pad) 104px; background: radial-gradient(ellipse at 18% 8%, #16405a 0, transparent 58%), radial-gradient(ellipse at 92% 82%, #0d3347 0, transparent 60%), #060d15; /* clip, not hidden: overflow:hidden on an ancestor disables position:sticky. */ overflow: clip; }
.terminal-showcase::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(#ffffff08 1px, transparent 1px), linear-gradient(90deg, #ffffff08 1px, transparent 1px); background-size: 96px 96px; mask-image: radial-gradient(ellipse at 50% 30%, #000 0, transparent 72%); pointer-events: none; }

.terminal-intro { position: relative; max-width: 780px; margin-bottom: 64px; }
.terminal-intro > .index { display: block; margin-bottom: 26px; color: #7fc5dd; font-size: 11px; }
.terminal-intro h2 { font-size: clamp(38px, 4.6vw, 70px); line-height: 1.06; letter-spacing: -.05em; }
.terminal-intro h2 em { color: #a7c5e2; }
.terminal-intro p { margin-top: 26px; max-width: 620px; color: #a9c3d2; font-size: 17px; line-height: 1.75; }

.terminal-stage-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 96px); max-width: 1320px; margin: 0 auto; }

/* Stage: the device stays put while its scene scrolls past. */
.terminal-stage { position: sticky; top: 96px; align-self: start; display: grid; place-items: center; height: min(66vh, 580px); }
.terminal-stage > * { grid-area: 1 / 1; }
.terminal-halo { width: min(86%, 520px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #20b7d63d 0, #10314a00 68%); filter: blur(6px); }
.terminal-pulse { display: grid; place-items: center; width: min(86%, 520px); aspect-ratio: 1; }
.terminal-pulse i { grid-area: 1 / 1; width: 46%; aspect-ratio: 1; border: 1px solid #20b7d64d; border-radius: 50%; opacity: 0; animation: terminal-ring 6s var(--ease) infinite; }
.terminal-pulse i:nth-child(2) { animation-delay: 2s; }
.terminal-pulse i:nth-child(3) { animation-delay: 4s; }
@keyframes terminal-ring { 0% { transform: scale(.55); opacity: 0; } 18% { opacity: .85; } 100% { transform: scale(2.05); opacity: 0; } }

.terminal-shot { width: auto; max-width: 78%; max-height: 100%; height: auto; opacity: 0; transform: translateY(26px) scale(.965); transition: opacity .65s var(--ease), transform .8s var(--ease); filter: drop-shadow(0 46px 70px #02070ccc); }
.terminal-shot.is-current { opacity: 1; transform: none; }
.terminal-shot-inline { display: none; }

/* Trailing room so the stage stays stuck while the last scene is read. */
.terminal-scenes { list-style: none; margin: 0; padding: 0 0 18vh; }
.terminal-scene { display: flex; align-items: center; min-height: min(92vh, 720px); padding: 40px 0; }
.terminal-scene article { max-width: 520px; }
.terminal-role { display: inline-flex; align-items: center; min-height: 30px; padding: 0 13px; border: 1px solid #2d6c87; border-radius: 40px; color: #8ed3e8; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.terminal-scene h3 { margin-top: 22px; font-family: 'Inter Tight', Inter, sans-serif; font-size: clamp(30px, 3.4vw, 46px); font-weight: 500; line-height: 1.08; letter-spacing: -.045em; color: #f1f8fa; }
.terminal-headline { margin-top: 12px; font-family: 'Inter Tight', Inter, sans-serif; font-size: clamp(19px, 1.9vw, 25px); line-height: 1.25; letter-spacing: -.03em; color: #8fb6cc; }
.terminal-copy { margin-top: 22px; max-width: 46ch; color: #a9c3d2; font-size: 16px; line-height: 1.8; }

.terminal-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin: 30px 0 0; }
.terminal-specs > div { padding: 14px 0; border-top: 1px solid #23495f; }
.terminal-specs dt { color: #6f96ad; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.terminal-specs dd { margin: 7px 0 0; color: #dceaf2; font-size: 15px; line-height: 1.5; }
.terminal-note { margin-top: 22px; padding-left: 16px; border-left: 2px solid #20b7d6; color: #86a7bb; font-size: 13.5px; line-height: 1.7; max-width: 46ch; }

.terminal-disclosure { position: relative; max-width: 780px; margin: 78px auto 0; padding-top: 22px; border-top: 1px solid #22475c; color: #78a0b6; font-size: 13px; line-height: 1.7; text-align: center; }

@media (max-width: 1000px) {
  .terminal-showcase { padding-block: 64px 72px; }
  .terminal-intro { margin-bottom: 40px; }
  .terminal-stage-grid { grid-template-columns: 1fr; gap: 0; }
  .terminal-stage { display: none; }
  .terminal-scene { display: block; min-height: 0; padding: 34px 0; border-top: 1px solid #1d3f54; }
  .terminal-scene:first-child { border-top: 0; }
  .terminal-scene article { max-width: 620px; }
  .terminal-shot-inline { display: block; width: auto; max-width: 300px; max-height: 300px; height: auto; margin: 26px 0 4px; filter: drop-shadow(0 26px 44px #02070cb3); }
  .terminal-specs { gap: 0 22px; }
}

@media (max-width: 600px) {
  .terminal-showcase { padding-block: 52px 60px; }
  .terminal-intro p { font-size: 16px; }
  .terminal-specs { grid-template-columns: 1fr; }
  .terminal-shot-inline { max-width: 240px; max-height: 240px; }
  .terminal-disclosure { margin-top: 48px; text-align: left; }
}

/* The site's pause control and reduced-motion setting stop the ring. */
.motion-paused .terminal-pulse i { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .terminal-pulse i { animation: none; opacity: .35; }
  .terminal-shot { transition: none; }
}

/* A short product film shares the existing stage; it never owns page scrolling. */
.terminal-visual-note { margin-top: 14px; max-width: 46ch; color: #86a7bb; font-size: 12px; line-height: 1.6; }
.terminal-film{position:relative;isolation:isolate;aspect-ratio:1;border-radius:24px;overflow:hidden;background:#060d15;filter:none}.terminal-film.terminal-shot{width:min(100%,66vh,580px);max-width:100%;max-height:100%;visibility:hidden;pointer-events:none}.terminal-film.terminal-shot.is-current{visibility:visible;pointer-events:auto}.terminal-film-poster,.terminal-film video{display:block;width:100%;height:100%;object-fit:contain}.terminal-film video{position:absolute;inset:0;opacity:0}.terminal-film.has-video video{opacity:1}.terminal-film-control{position:absolute;z-index:1;right:16px;bottom:16px;min-height:44px;padding:10px 16px;border:1px solid #7fc5dd66;border-radius:999px;background:#102a43e8;color:#f1f8fa;font:500 12px Inter,sans-serif;cursor:pointer}.terminal-film-control:hover{background:#17405a}.terminal-film-control:focus-visible{outline:2px solid #20b7d6;outline-offset:3px}.terminal-film-control[hidden]{display:none}.has-terminal-film .terminal-pulse{display:none}
@media(max-width:1000px){.terminal-film.terminal-shot-inline{width:100%;max-width:420px;max-height:none;margin:24px 0;filter:none}}
@media(max-width:600px){.terminal-film.terminal-shot-inline{max-width:100%;border-radius:18px}.terminal-film-control{right:12px;bottom:12px}}
.terminal-stage>.terminal-shot{pointer-events:none}.terminal-stage>.terminal-shot.is-current{z-index:1}.terminal-stage>.terminal-film.is-current{pointer-events:auto}

@media(max-width:600px){.terminal-film-control{width:44px;padding:0;font-size:0}.terminal-film-control::before{content:"▶";font-size:16px}.terminal-film-control[data-action="pause"]::before{content:"Ⅱ";font-size:21px}.terminal-film-control[data-action="replay"]::before{content:"↻";font-size:24px}}