/* All changes stay inside the opening screen; interactive cases are untouched. */
.kiosk-attract {
  padding-top: 54px;
  padding-bottom: 76px;
}
.kiosk-attract[hidden] { display: none; }
/* Keep the header's existing height, so adding settings never moves the gateway. */
.kiosk-attract .at-top.has-settings { position: relative; padding-right: 300px; }
.kiosk-attract .at-top.has-settings .at-lockup { max-width: 100%; }
.kiosk-attract .at-top.has-settings .at-customer { min-width: 0; }
.kiosk-attract .at-settings-entry { position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
.kiosk-attract .at-hero { margin-top: 34px; }
.kiosk-attract h1 { font-size: 106px; }
.kiosk-attract .is-long h1 { font-size: 92px; }
.kiosk-attract .at-lead { margin-top: 22px; font-size: 31px; line-height: 1.35; }
.kiosk-attract .at-partner { margin-top: 22px; padding: 10px 24px 10px 28px; }
.kiosk-attract .at-partner img { height: 62px; }
.kiosk-attract .at-partner span { font-size: 24px; }

.kiosk-attract .at-preview { margin-top: 28px; padding: 32px 36px; }
/* Reserve the same header space for every case, including the Ausblick badge
   and two-line titles. The gateway's position must not depend on text length. */
.kiosk-attract .at-case-meta { display: flex; align-items: center; align-self: stretch; flex: none; gap: 16px; min-width: 0; height: 48px; }
.kiosk-attract .at-case-name { margin: 0; color: var(--signal); font-size: 25px; font-weight: 700; line-height: 1.25; }
.kiosk-attract .at-case-badge { flex: none; margin-left: auto; padding: 6px 14px; border: 1px solid #ffffff75; border-radius: 999px; color: #fff; font-size: 21px; font-weight: 600; }
.kiosk-attract .gw-title { flex: none; height: 90px; margin-top: 12px; font-size: 39px; line-height: 1.15; }
.kiosk-attract .gp-diagram { align-self: stretch; flex: none; margin: 26px 0 20px; }
.kiosk-attract .gp-caption { margin: 0 0 24px; color: #ffffffbf; font-size: 23px; text-align: center; }
.kiosk-attract .gp-topology { display: grid; grid-template-columns: minmax(0, 1fr) 68px minmax(0, 1fr) 68px minmax(0, 1fr); align-items: start; height: 260px; }
.kiosk-attract .gp-node { display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; }
.kiosk-attract .gp-icon { display: grid; place-items: center; flex: none; width: 112px; height: 112px; margin-bottom: 18px; border: 3px solid #ffffff6b; border-radius: 30px; background: var(--primary); color: #fff; }
.kiosk-attract .gp-icon svg { width: 60px; height: 60px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kiosk-attract .gp-node.is-active .gp-icon { border-color: var(--signal); box-shadow: 0 0 0 10px #5db8b333; background: var(--signal); color: #00205f; }
.kiosk-attract .gp-node.has-image .gp-icon { padding: 0; border-color: transparent; background: transparent; }
.kiosk-attract .gp-icon img { width: 100%; height: 100%; object-fit: contain; border-radius: 27px; }
.kiosk-attract .gp-node.has-image.is-active .gp-icon { border-color: var(--signal); }
.kiosk-attract .gp-node-label { display: flex; justify-content: center; align-items: flex-start; min-height: 66px; max-width: 100%; font-size: 28px; line-height: 1.18; overflow-wrap: anywhere; }
.kiosk-attract .gp-node-role { min-height: 56px; margin-top: 6px; color: #ffffffb8; font-size: 22px; line-height: 1.25; overflow-wrap: anywhere; }
.kiosk-attract .gp-link { padding-top: 35px; }
.kiosk-attract .gp-link svg { display: block; width: 100%; overflow: visible; }
.kiosk-attract .gp-link path { fill: none; stroke: #ffffff59; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.kiosk-attract .gp-link .is-active path { stroke: var(--signal); stroke-width: 5; }
.kiosk-attract .gp-packet { fill: #fff; }
.kiosk-attract .gp-phase { min-height: 228px; margin-top: 22px; padding: 22px 26px; border: 1px solid #ffffff35; border-radius: 24px; background: #001b5e3b; }
.kiosk-attract .gp-phase-number { display: block; margin-bottom: 6px; color: var(--signal); font-size: 22px; font-weight: 600; }
.kiosk-attract .gp-phase h3 { margin: 0; font-size: 32px; line-height: 1.2; }
.kiosk-attract .gp-phase-detail { margin: 10px 0 0; font-size: 27px; line-height: 1.3; color: #ffffffeb; }
.kiosk-attract .gp-route { margin: 14px 0 0; color: #ffffffb8; font-size: 22px; line-height: 1.25; }
.kiosk-attract .gw-rail { gap: 12px; }
.kiosk-attract .gw-rail li { min-width: 0; text-align: center; line-height: 1.2; }
.kiosk-attract .gw-rail li > span { font-size: 22px; overflow-wrap: anywhere; }
.kiosk-attract .gw-rail li > small { margin-top: 6px; font-size: 19px; }
.kiosk-attract .at-preview-empty { justify-content: center; text-align: center; }

.kiosk-attract .at-preview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex: none; margin-top: 20px; cursor: default; }
.kiosk-attract .at-preview-position { display: flex; flex-direction: column; gap: 5px; color: var(--muted); }
.kiosk-attract .at-preview-position > span { font-size: 21px; line-height: 1.2; }
.kiosk-attract .at-preview-position > strong { color: var(--primary-deep); font-size: 26px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.kiosk-attract .at-preview-controls { display: flex; gap: 10px; }
.kiosk-attract .at-preview-controls button { display: grid; place-items: center; min-height: 72px; border: 2px solid #b9c9df; border-radius: 20px; background: #ffffffd9; color: var(--primary-deep); font: inherit; font-size: 25px; font-weight: 600; cursor: pointer; }
.kiosk-attract .at-preview-arrow { width: 76px; }
.kiosk-attract .at-preview-controls .at-preview-arrow { font-size: 35px; }
.kiosk-attract .at-preview-pause { min-width: 166px; padding: 12px 20px; }
.kiosk-attract .at-preview-controls .at-preview-next { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; min-width: 334px; padding: 14px 24px; border-color: var(--primary); background: var(--primary); color: #fff; }
.kiosk-attract .at-preview-next > span:last-child { font-size: 32px; }
.kiosk-attract .at-preview-controls button:disabled { opacity: .45; cursor: default; }
.kiosk-attract .at-preview-controls button:focus-visible { outline: 5px solid var(--primary-deep); outline-offset: 4px; }
.kiosk-attract .at-cta { height: 136px; margin-top: 26px; font-size: 37px; }
.kiosk-attract .at-cta:disabled { opacity: .55; cursor: default; }
.kiosk-attract.is-paused .at-cta-dot::after,
.kiosk-attract.is-paused .at-cta-arrow { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .kiosk-attract .gw-rail li { transition: none; }
}