/* ============================================
   GATEWAY — PayMullet
   Product page: Online Gateway (NMI / Authorize.Net)
   BEM namespace: .gw-*
   ============================================ */

/* -------- HERO -------- */
.gw-hero {
  position: relative;
  padding: var(--space-20) 0 var(--space-16);
  background:
    radial-gradient(1100px 480px at 12% -8%, rgba(3, 116, 73, 0.08), transparent 60%),
    radial-gradient(900px 520px at 95% 0%, rgba(47, 179, 122, 0.09), transparent 65%),
    var(--color-bg);
  overflow: hidden;
}

.gw-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--space-16);
  align-items: center;
}

.gw-hero__copy .eyebrow {
  color: var(--color-primary);
  margin-bottom: var(--space-5);
}

.gw-hero__title {
  font-family: 'Aeonik', 'Poppins', sans-serif;
  font-weight: 800;
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--color-text);
  margin: 0 0 var(--space-6);
}

.gw-hero__sub {
  color: var(--color-text-2);
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.6;
  max-width: 56ch;
  margin: 0 0 var(--space-8);
}

.gw-hero__cta {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

.gw-hero__trust {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  text-transform: uppercase;
  margin: 0;
}

/* -------- HERO ART -------- */
.gw-hero__art {
  position: relative;
}

.gw-browser {
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: rotate(-1.2deg);
}

.gw-browser__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
}

.gw-browser__bar > span {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--color-border-strong);
}
.gw-browser__bar > span:first-child { background: #ff6d6d; }
.gw-browser__bar > span:nth-child(2) { background: #ffc857; }
.gw-browser__bar > span:nth-child(3) { background: #2fb37a; }

.gw-browser__url {
  margin-left: 10px;
  padding: 4px 10px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.gw-browser__body {
  padding: var(--space-6) var(--space-6) var(--space-5);
}

.gw-checkout__row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--space-4);
}

.gw-checkout__row label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.gw-checkout__field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface-2);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  color: var(--color-text);
}

.gw-checkout__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.gw-checkout__pay {
  width: 100%;
  padding: 12px 16px;
  margin-top: var(--space-3);
  background: var(--color-primary);
  color: #fff;
  border: 0;
  border-radius: 10px;
  font-family: 'Aeonik', 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: var(--shadow-green);
}

.gw-checkout__secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: var(--space-3);
  font-size: 0.72rem;
  color: var(--color-text-muted);
  font-family: 'JetBrains Mono', monospace;
}

.gw-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: var(--space-6);
  color: var(--color-text-muted);
}

.gw-flow__node {
  padding: 8px 14px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: var(--color-text-2);
}

.gw-flow__node--primary {
  background: var(--color-primary-soft);
  border-color: var(--color-primary-border);
  color: var(--color-primary-deep);
  font-weight: 600;
}

.gw-flow__line { display: inline-flex; width: 60px; height: 12px; color: var(--color-text-faint); }
.gw-flow__line svg { width: 100%; height: 100%; }

/* -------- WHY -------- */
.gw-why {
  padding: var(--space-20) 0;
  background: var(--color-surface-2);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.gw-why__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.gw-why__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: var(--space-8);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.gw-why__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary-border);
}

.gw-why__icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-soft);
  color: var(--color-primary-deep);
  margin-bottom: var(--space-5);
}

.gw-why__card h3 {
  font-family: 'Aeonik', 'Poppins', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3);
  color: var(--color-text);
}

.gw-why__card p {
  color: var(--color-text-2);
  line-height: 1.6;
  margin: 0;
}

/* -------- INTEGRATIONS -------- */
.gw-int { padding: var(--space-24) 0; overflow: hidden; }

/* Two-column layout: copy on the left, orbit animation on the right */
.gw-int__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  gap: var(--space-12);
  align-items: center;
}

.gw-int__copy {
  min-width: 0;
  max-width: 560px;
}
.gw-int__copy .eyebrow { margin-bottom: var(--space-3); display: inline-block; }
.gw-int__copy h2 {
  font-family: 'Aeonik', 'Poppins', sans-serif;
  font-size: clamp(1.9rem, 3.2vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-4);
  color: var(--color-text);
}
.gw-int__copy p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-6);
}
.gw-int__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

@media (max-width: 960px) {
  .gw-int__layout {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    justify-items: center;
    text-align: center;
  }
  .gw-int__copy { max-width: 620px; }
  .gw-int__cta { justify-content: center; }
}

/* Legacy grid styles kept as defensive no-ops (grid has been removed) */
.gw-int__grid { display: none; }

.gw-int__mark {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  background: var(--color-surface-2);
  color: var(--color-text);
}

/* Stylized per-integration tints (NOT actual brand logos) */
.gw-int__mark--shopify  { background: #e6f4ea; color: #1f7c3a; }
.gw-int__mark--woo      { background: #f1ebfb; color: #6f42a6; }
.gw-int__mark--bigc     { background: #eef4fb; color: #1e5aa6; }
.gw-int__mark--mage     { background: #fdeee7; color: #b4521a; }
.gw-int__mark--wix      { background: #fff4db; color: #8a6300; }
.gw-int__mark--sqsp     { background: #eeeeef; color: #1a1a1a; }
.gw-int__mark--sfcc     { background: #e6f1fb; color: #0a79d1; }
.gw-int__mark--nets     { background: #fdebe9; color: #a33326; }
.gw-int__mark--qbo      { background: #e8f4ef; color: #0f7a47; }
.gw-int__mark--zoho     { background: #fbe9e6; color: #c14828; }
.gw-int__mark--hubspot  { background: #feeadf; color: #c65124; }
.gw-int__mark--api      { background: var(--color-primary-soft); color: var(--color-primary-deep); }

.gw-int__card h3 {
  font-family: 'Aeonik', 'Poppins', sans-serif;
  font-size: 1.02rem;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--color-text);
}

.gw-int__card p {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
}

/* -------- COMPARISON -------- */
.gw-cmp {
  padding: var(--space-20) 0 var(--space-16);
  background: var(--color-surface-2);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.gw-cmp__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

.gw-cmp__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.gw-cmp__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary-border);
}

.gw-cmp__head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.gw-cmp__logo {
  width: 54px; height: 54px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Aeonik', 'Poppins', sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.gw-cmp__logo--nmi  { background: var(--color-primary-deep); color: #fff; font-size: 1.05rem; }
.gw-cmp__logo--anet { background: #e8f3ee; color: var(--color-primary-deep); font-size: 0.92rem; border: 1px solid var(--color-primary-border); }

.gw-cmp__head h3 {
  font-family: 'Aeonik', 'Poppins', sans-serif;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--color-text);
}

.gw-cmp__tag {
  margin: 2px 0 0;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.gw-cmp__rows {
  margin: 0 0 var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.gw-cmp__rows > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px dashed var(--color-border);
}

.gw-cmp__rows > div:last-child { border-bottom: 0; padding-bottom: 0; }

.gw-cmp__rows dt {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  padding-top: 2px;
}

.gw-cmp__rows dd {
  margin: 0;
  color: var(--color-text-2);
  line-height: 1.5;
}

.gw-cmp__pricing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: 12px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  margin-bottom: var(--space-6);
}

.gw-cmp__price-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.gw-cmp__price {
  font-family: 'Aeonik', 'Poppins', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.015em;
}

.gw-cmp__cta {
  margin-top: auto;
  align-self: flex-start;
}

/* -------- SECURITY ROW -------- */
.gw-sec {
  margin-top: var(--space-10);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.gw-sec__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text-2);
}

.gw-sec__pill svg { color: var(--color-primary); flex-shrink: 0; }

/* -------- HOW IT WORKS -------- */
.gw-how { padding: var(--space-24) 0; }

.gw-how__steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  counter-reset: step;
}

.gw-how__step {
  position: relative;
  padding: var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  min-width: 0;
}

.gw-how__num {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: var(--space-4);
  letter-spacing: 0.05em;
}

.gw-how__step h3 {
  font-family: 'Aeonik', 'Poppins', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 var(--space-2);
  color: var(--color-text);
}

.gw-how__step p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin: 0;
}

/* -------- FAQ -------- */
.gw-faq {
  padding: var(--space-20) 0 var(--space-24);
  background: var(--color-surface-2);
  border-top: 1px solid var(--color-border);
}

.gw-faq__list {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.gw-faq__item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.gw-faq__item[open] {
  border-color: var(--color-primary-border);
  box-shadow: var(--shadow-sm);
}

.gw-faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-5) var(--space-6);
  font-family: 'Aeonik', 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.gw-faq__item summary::-webkit-details-marker { display: none; }

.gw-faq__chev {
  display: inline-flex;
  width: 28px; height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  transition: transform 0.25s ease, background 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}

.gw-faq__item[open] .gw-faq__chev {
  transform: rotate(180deg);
  background: var(--color-primary-soft);
  color: var(--color-primary-deep);
}

.gw-faq__item p {
  padding: 0 var(--space-6) var(--space-6);
  margin: 0;
  color: var(--color-text-2);
  line-height: 1.65;
}

/* -------- CTA STRIP -------- */
.cta-strip.gw-cta {
  padding: var(--space-20) 0;
  background: linear-gradient(135deg, #003a22, #037449);
  color: #fff;
  text-align: center;
}

.cta-strip.gw-cta .cta-strip__inner {
  max-width: 780px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}

.cta-strip.gw-cta h2 {
  font-family: 'Aeonik', 'Poppins', sans-serif;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
  color: #fff;
}

.cta-strip.gw-cta p {
  max-width: 52ch;
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
}

.cta-strip.gw-cta .btn--primary {
  background: #fff;
  color: var(--color-primary-deep);
  border-color: #fff;
}

.cta-strip.gw-cta .btn--primary:hover {
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-primary-deep);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1040px) {
  .gw-int__grid { grid-template-columns: repeat(3, 1fr); }
  .gw-how__steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 880px) {
  .gw-hero { padding: var(--space-16) 0 var(--space-12); }
  .gw-hero__grid { grid-template-columns: 1fr; gap: var(--space-10); }
  .gw-hero__art { order: -1; max-width: 480px; margin: 0 auto; }
  .gw-why__grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .gw-cmp__grid { grid-template-columns: 1fr; }
  .gw-int__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .gw-hero__cta .btn { width: 100%; justify-content: center; }
  .gw-hero__trust { font-size: 0.7rem; }
  .gw-why, .gw-cmp, .gw-faq { padding-left: 0; padding-right: 0; }
  .gw-int__grid { grid-template-columns: 1fr; }
  .gw-how__steps { grid-template-columns: 1fr; }
  .gw-cmp__card { padding: var(--space-6); }
  .gw-cmp__rows > div { grid-template-columns: 1fr; gap: 4px; }
  .gw-cmp__rows dt { padding-top: 0; }
  .gw-cmp__pricing { grid-template-columns: 1fr; }
  .gw-flow { flex-wrap: wrap; }
  .gw-flow__line { width: 40px; }
  .gw-faq__item summary { padding: var(--space-4) var(--space-5); font-size: 0.95rem; }
  .gw-faq__item p { padding: 0 var(--space-5) var(--space-5); }
  .gw-sec__pill { font-size: 0.8rem; padding: 8px 12px; }
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .gw-why__card,
  .gw-int__card,
  .gw-cmp__card,
  .gw-faq__item,
  .gw-faq__chev {
    transition: none !important;
  }
  .gw-why__card:hover,
  .gw-int__card:hover,
  .gw-cmp__card:hover {
    transform: none;
  }
}

/* ========================================================
   HERO ANIMATION · Cart → Gateway → Bank
   data-stage on .gw-browser drives scene fade + flow highlight
   ======================================================== */

.gw-browser__bar .gw-browser__url {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}
.gw-browser__host { color: var(--color-text-muted); }
.gw-browser__path { color: var(--color-text); font-weight: 500; transition: opacity 0.35s ease; }

/* Give the body a fixed minimum height so stage swaps don't jump */
.gw-browser__body {
  position: relative;
  min-height: 410px;
}

/* All scenes absolutely stacked */
.gw-scene {
  position: absolute;
  inset: var(--space-6) var(--space-6) var(--space-5);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.45s ease, transform 0.45s ease;
  pointer-events: none;
}
.gw-browser[data-stage="cart"]    [data-scene="cart"]    { opacity: 1; transform: none; }
.gw-browser[data-stage="gateway"] [data-scene="gateway"] { opacity: 1; transform: none; }
.gw-browser[data-stage="bank"]    [data-scene="bank"]    { opacity: 1; transform: none; }

/* ---- Stage 1 · Cart ---- */
.gw-cart__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}
.gw-cart__eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}
.gw-cart__count {
  font-size: 0.78rem;
  color: var(--color-text-2);
}

.gw-cart__list {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gw-cart__item {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  opacity: 0;
  transform: translateY(8px);
  animation: gwCartItemIn 0.4s ease forwards;
}
.gw-browser[data-stage="cart"] .gw-cart__item:nth-child(1) { animation-delay: 0.15s; }
.gw-browser[data-stage="cart"] .gw-cart__item:nth-child(2) { animation-delay: 0.45s; }
.gw-browser[data-stage="cart"] .gw-cart__item:nth-child(3) { animation-delay: 0.75s; }

/* When we leave the cart stage, reset so next cycle re-plays */
.gw-browser:not([data-stage="cart"]) .gw-cart__item { animation: none; opacity: 0; transform: translateY(8px); }

@keyframes gwCartItemIn {
  to { opacity: 1; transform: none; }
}

.gw-cart__thumb {
  width: 32px; height: 32px;
  border-radius: 7px;
  background: var(--color-primary-soft);
}
.gw-cart__thumb--a { background: linear-gradient(135deg, #c8e5d6, #7fbf9d); }
.gw-cart__thumb--b { background: linear-gradient(135deg, #e7e4d8, #bdb38f); }
.gw-cart__thumb--c { background: linear-gradient(135deg, #f2e8d8, #d9c49b); }

.gw-cart__meta { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.gw-cart__meta span { font-size: 0.85rem; color: var(--color-text); font-weight: 500; }
.gw-cart__meta small { font-size: 0.72rem; color: var(--color-text-muted); }
.gw-cart__price { font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; color: var(--color-text); }

.gw-cart__totals {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  margin-bottom: var(--space-2);
  border-top: 1px dashed var(--color-border);
  font-size: 0.85rem;
  color: var(--color-text);
}
.gw-cart__totals strong {
  font-family: 'Aeonik', 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1rem;
}

.gw-cart__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.gw-browser[data-stage="cart"] .gw-cart__cta {
  animation: gwCtaPulse 1.1s 2.1s ease forwards;
}
@keyframes gwCtaPulse {
  0%, 100% { transform: scale(1); box-shadow: var(--shadow-green); }
  50% { transform: scale(0.97); box-shadow: 0 0 0 4px rgba(3, 116, 73, 0.22), var(--shadow-green); }
}

/* ---- Stage 2 · Gateway (typing) ---- */
.gw-type {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-family: 'JetBrains Mono', monospace;
}
.gw-type__value {
  white-space: pre;
  letter-spacing: 0.02em;
}
.gw-type__caret {
  display: inline-block;
  width: 1px;
  height: 0.95em;
  background: var(--color-primary);
  opacity: 0;
  animation: gwCaretBlink 0.9s steps(2) infinite;
}
.gw-type.is-typing .gw-type__caret { opacity: 1; }
@keyframes gwCaretBlink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Highlight the field currently being typed */
.gw-browser[data-stage="gateway"] .gw-checkout__field[data-field].is-active {
  border-color: var(--color-primary-border);
  background: var(--color-surface);
  box-shadow: 0 0 0 3px rgba(3, 116, 73, 0.1);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

/* Pay button spinner */
.gw-pay__spinner {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  display: none;
  animation: gwSpin 0.8s linear infinite;
  margin-left: 8px;
  vertical-align: middle;
}
@keyframes gwSpin { to { transform: rotate(360deg); } }
[data-pay-btn].is-processing .gw-pay__spinner { display: inline-block; }
[data-pay-btn].is-processing { opacity: 0.92; cursor: progress; }
[data-pay-btn] .gw-pay__label[data-processing-label] { display: none; }
[data-pay-btn].is-processing .gw-pay__label[data-processing-label] { display: inline; }
[data-pay-btn].is-processing .gw-pay__label:not([data-processing-label]) { display: none; }

/* ---- Stage 3 · Bank / confirmed ---- */
.gw-bank {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 8px;
}
.gw-bank__check {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
  box-shadow: 0 0 0 0 rgba(3, 116, 73, 0.25);
}
.gw-browser[data-stage="bank"] .gw-bank__check {
  animation: gwBankPulse 1.2s 0.05s ease forwards;
}
@keyframes gwBankPulse {
  0% { transform: scale(0.85); box-shadow: 0 0 0 0 rgba(3, 116, 73, 0.35); }
  60% { transform: scale(1.05); box-shadow: 0 0 0 16px rgba(3, 116, 73, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(3, 116, 73, 0); }
}

/* Draw tick */
.gw-bank__ring { stroke-dasharray: 138; stroke-dashoffset: 138; }
.gw-bank__tick { stroke-dasharray: 40; stroke-dashoffset: 40; }
.gw-browser[data-stage="bank"] .gw-bank__ring {
  animation: gwDraw 0.5s 0.05s ease forwards;
}
.gw-browser[data-stage="bank"] .gw-bank__tick {
  animation: gwDraw 0.35s 0.5s ease forwards;
}
@keyframes gwDraw { to { stroke-dashoffset: 0; } }

.gw-bank__amount {
  font-family: 'Aeonik', 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 1.9rem;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin-top: var(--space-1);
}
.gw-bank__title {
  font-size: 0.95rem;
  color: var(--color-primary-deep);
  font-weight: 600;
  margin-bottom: var(--space-4);
}

.gw-bank__rows {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px dashed var(--color-border);
  padding-top: var(--space-3);
  margin-top: var(--space-2);
}
.gw-bank__rows > div {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--color-text-2);
}
.gw-bank__rows code {
  font-family: 'JetBrains Mono', monospace;
  color: var(--color-text);
  background: none;
  padding: 0;
}

/* ---- Flow indicator · highlight current stage, animate dashes ---- */
.gw-flow__node {
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease, font-weight 0.35s ease, transform 0.25s ease;
}
.gw-browser[data-stage="cart"]    ~ .gw-flow [data-flow-node="cart"],
.gw-browser[data-stage="gateway"] ~ .gw-flow [data-flow-node="gateway"],
.gw-browser[data-stage="bank"]    ~ .gw-flow [data-flow-node="bank"] {
  background: var(--color-primary-soft);
  border-color: var(--color-primary-border);
  color: var(--color-primary-deep);
  font-weight: 600;
  transform: translateY(-1px);
}

/* Animated dashed line: activate the segment between the previous and current stage */
.gw-flow__dash {
  stroke-dasharray: 3 3;
  stroke-dashoffset: 0;
}
.gw-browser[data-stage="gateway"] ~ .gw-flow [data-flow-line="cart-gw"] .gw-flow__dash,
.gw-browser[data-stage="bank"]    ~ .gw-flow [data-flow-line="gw-bank"] .gw-flow__dash {
  animation: gwFlowDash 0.8s linear infinite;
  stroke: var(--color-primary);
}
@keyframes gwFlowDash {
  to { stroke-dashoffset: -12; }
}

/* Respect reduced motion: hold the gateway stage, no typing, no pulses */
@media (prefers-reduced-motion: reduce) {
  .gw-browser[data-gw-anim] { /* JS pauses cycling — leave final state visible */ }
  .gw-cart__item { animation: none !important; opacity: 1; transform: none; }
  .gw-bank__ring, .gw-bank__tick { stroke-dashoffset: 0 !important; }
  .gw-type__caret { animation: none; opacity: 0; }
  .gw-flow__dash { animation: none !important; }
  .gw-cart__cta { animation: none !important; }
}

/* ---------- INTEGRATIONS ORBIT ANIMATION ---------- */
.gw-orbit {
  --orbit-size: 500px;
  --ring-1: 240px;
  --ring-2: 350px;
  --ring-3: 460px;
  --node-w: 130px;
  --node-h: 36px;
  position: relative;
  margin: 0 auto;
  max-width: var(--orbit-size);
  width: 100%;
  aspect-ratio: 1 / 1;
  justify-self: end;
}
.gw-orbit__stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

/* Concentric dashed rings with slow counter-rotating tracks */
.gw-orbit__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1px dashed var(--color-primary-border);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.gw-orbit__ring--1 { width: var(--ring-1); height: var(--ring-1); border-color: rgba(16, 24, 40, 0.10); }
.gw-orbit__ring--2 { width: var(--ring-2); height: var(--ring-2); border-color: rgba(16, 24, 40, 0.08); }
.gw-orbit__ring--3 { width: var(--ring-3); height: var(--ring-3); border-color: rgba(16, 24, 40, 0.06); }

.gw-orbit__track {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transform-origin: 50% 50%;
  animation: gwOrbitSpin var(--dur, 36s) linear infinite;
  will-change: transform;
}
.gw-orbit__ring--1 .gw-orbit__track { --dur: 28s; animation-direction: normal; }
.gw-orbit__ring--2 .gw-orbit__track { --dur: 44s; animation-direction: reverse; }
.gw-orbit__ring--3 .gw-orbit__track { --dur: 60s; animation-direction: normal; }

.gw-orbit[data-paused="true"] .gw-orbit__track,
.gw-orbit[data-paused="true"] .gw-orbit__chip-inner,
.gw-orbit[data-paused="true"] .gw-orbit__pulse {
  animation-play-state: paused;
}

/* Orbit node: pill-shaped chip with icon + name. Positioned by --pos angle. */
.gw-orbit__node {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--node-w);
  height: var(--node-h);
  margin-top: calc(var(--node-h) / -2);
  margin-left: calc(var(--node-w) / -2);
  transform: rotate(var(--pos)) translateX(var(--radius, 0px));
  pointer-events: auto;
}
.gw-orbit__ring--1 .gw-orbit__node { --radius: calc(var(--ring-1) / 2); }
.gw-orbit__ring--2 .gw-orbit__node { --radius: calc(var(--ring-2) / 2); }
.gw-orbit__ring--3 .gw-orbit__node { --radius: calc(var(--ring-3) / 2); }

/* Outer chip: static rotate(-pos) to make upright relative to ring-0 position. */
.gw-orbit__chip {
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(calc(-1 * var(--pos)));
}

/* Inner chip: counter-rotates continuously to cancel the track's spin. */
.gw-orbit__chip-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px 0 4px;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(16, 24, 40, 0.08);
  box-shadow: 0 6px 18px -10px rgba(16, 24, 40, 0.35), 0 2px 4px rgba(16, 24, 40, 0.04);
  animation: gwOrbitCounter var(--dur, 36s) linear infinite;
  will-change: transform;
  transition: box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
/* Chip-inner spins opposite to its ring's track. */
.gw-orbit__ring--1 .gw-orbit__chip-inner { --dur: 28s; animation-direction: reverse; }
.gw-orbit__ring--2 .gw-orbit__chip-inner { --dur: 44s; animation-direction: normal; }
.gw-orbit__ring--3 .gw-orbit__chip-inner { --dur: 60s; animation-direction: reverse; }

.gw-orbit__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(16, 24, 40, 0.04);
  color: var(--color-ink);
  transition: background 0.25s ease;
}
.gw-orbit__icon svg { width: 16px; height: 16px; }
.gw-orbit__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--color-ink);
  white-space: nowrap;
  line-height: 1;
}

.gw-orbit__node:hover { z-index: 3; }
.gw-orbit__node:hover .gw-orbit__chip-inner {
  border-color: var(--color-primary-border);
  box-shadow: 0 12px 30px -10px rgba(16, 24, 40, 0.45), 0 0 0 4px var(--color-primary-soft);
}

/* Per-platform filled color: background tint + matching icon-well + label color */
.gw-orbit__node--shopify  .gw-orbit__chip-inner { background: #e6f4ea; border-color: #bfe0c9; }
.gw-orbit__node--shopify  .gw-orbit__icon      { background: #ffffff; color: #1f7c3a; }
.gw-orbit__node--shopify  .gw-orbit__label     { color: #155c2a; }

.gw-orbit__node--woo      .gw-orbit__chip-inner { background: #f1ebfb; border-color: #d9c9f3; }
.gw-orbit__node--woo      .gw-orbit__icon      { background: #ffffff; color: #6f42a6; }
.gw-orbit__node--woo      .gw-orbit__label     { color: #55307e; }

.gw-orbit__node--bigc     .gw-orbit__chip-inner { background: #eef4fb; border-color: #c9ddf2; }
.gw-orbit__node--bigc     .gw-orbit__icon      { background: #ffffff; color: #1e5aa6; }
.gw-orbit__node--bigc     .gw-orbit__label     { color: #16447e; }

.gw-orbit__node--mage     .gw-orbit__chip-inner { background: #fdeee7; border-color: #f5cab6; }
.gw-orbit__node--mage     .gw-orbit__icon      { background: #ffffff; color: #b4521a; }
.gw-orbit__node--mage     .gw-orbit__label     { color: #8a3f14; }

.gw-orbit__node--wix      .gw-orbit__chip-inner { background: #fff4db; border-color: #f2daa4; }
.gw-orbit__node--wix      .gw-orbit__icon      { background: #ffffff; color: #8a6300; }
.gw-orbit__node--wix      .gw-orbit__label     { color: #6a4c00; }

.gw-orbit__node--sqsp     .gw-orbit__chip-inner { background: #ececee; border-color: #c9c9cc; }
.gw-orbit__node--sqsp     .gw-orbit__icon      { background: #ffffff; color: #1a1a1a; }
.gw-orbit__node--sqsp     .gw-orbit__label     { color: #1a1a1a; }

.gw-orbit__node--sfcc     .gw-orbit__chip-inner { background: #e6f1fb; border-color: #b9d7f1; }
.gw-orbit__node--sfcc     .gw-orbit__icon      { background: #ffffff; color: #0a79d1; }
.gw-orbit__node--sfcc     .gw-orbit__label     { color: #085da1; }

.gw-orbit__node--nets     .gw-orbit__chip-inner { background: #fdebe9; border-color: #f2bdb7; }
.gw-orbit__node--nets     .gw-orbit__icon      { background: #ffffff; color: #a33326; }
.gw-orbit__node--nets     .gw-orbit__label     { color: #7f281d; }

.gw-orbit__node--qbo      .gw-orbit__chip-inner { background: #e2f1ea; border-color: #b6dbc8; }
.gw-orbit__node--qbo      .gw-orbit__icon      { background: #ffffff; color: #0f7a47; }
.gw-orbit__node--qbo      .gw-orbit__label     { color: #0b5d36; }

.gw-orbit__node--zoho     .gw-orbit__chip-inner { background: #fbe9e6; border-color: #f2c2b8; }
.gw-orbit__node--zoho     .gw-orbit__icon      { background: #ffffff; color: #c14828; }
.gw-orbit__node--zoho     .gw-orbit__label     { color: #95371f; }

.gw-orbit__node--hubspot  .gw-orbit__chip-inner { background: #feeadf; border-color: #f8c6a9; }
.gw-orbit__node--hubspot  .gw-orbit__icon      { background: #ffffff; color: #c65124; }
.gw-orbit__node--hubspot  .gw-orbit__label     { color: #9a3e1c; }

.gw-orbit__node--api      .gw-orbit__chip-inner { background: var(--color-primary-soft); border-color: var(--color-primary-border); }
.gw-orbit__node--api      .gw-orbit__icon      { background: #ffffff; color: var(--color-primary-deep); }
.gw-orbit__node--api      .gw-orbit__label     { color: var(--color-primary-deep); }

/* Center PayMullet core */
.gw-orbit__core {
  position: relative;
  z-index: 2;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffffff 0%, #f5f7fb 70%);
  box-shadow:
    0 0 0 9px var(--color-primary-soft),
    0 0 0 1px var(--color-primary-border),
    0 18px 36px -12px rgba(16, 24, 40, 0.24);
  display: grid;
  place-items: center;
  color: var(--color-primary-deep);
}
.gw-orbit__core-mark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
}
.gw-orbit__core-mark svg {
  width: 100%;
  height: 100%;
  color: var(--color-primary-deep);
}
.gw-orbit__core::before {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  border: 1px solid var(--color-primary-border);
  opacity: 0.45;
  animation: gwOrbitHalo 4s ease-in-out infinite;
}
.gw-orbit__core-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.gw-orbit__core-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary-deep);
}

/* Expanding pulses from center to each ring */
.gw-orbit__pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1px solid var(--color-primary);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.2);
  animation: gwOrbitPulse 5s ease-out infinite;
  pointer-events: none;
}
.gw-orbit__pulse--a { width: var(--ring-1); height: var(--ring-1); animation-delay: 0s; }
.gw-orbit__pulse--b { width: var(--ring-2); height: var(--ring-2); animation-delay: 1.6s; }
.gw-orbit__pulse--c { width: var(--ring-3); height: var(--ring-3); animation-delay: 3.2s; }

.gw-orbit__caption { display: none; }

@keyframes gwOrbitSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes gwOrbitCounter {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes gwOrbitHalo {
  0%, 100% { opacity: 0.25; transform: scale(1); }
  50%      { opacity: 0.6;  transform: scale(1.08); }
}
@keyframes gwOrbitPulse {
  0%   { opacity: 0.55; transform: translate(-50%, -50%) scale(0.15); }
  70%  { opacity: 0;    transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0;    transform: translate(-50%, -50%) scale(1); }
}

/* Responsive: shrink radii and nodes as viewport narrows */
@media (max-width: 960px) {
  .gw-orbit { justify-self: center; }
}
@media (max-width: 680px) {
  .gw-orbit {
    --orbit-size: 380px;
    --ring-1: 170px;
    --ring-2: 270px;
    --ring-3: 360px;
    --node-w: 40px;
    --node-h: 40px;
  }
  .gw-orbit__chip-inner { padding: 0; justify-content: center; }
  .gw-orbit__label { display: none; }
  .gw-orbit__core { width: 88px; height: 88px; box-shadow: 0 0 0 8px var(--color-primary-soft), 0 0 0 1px var(--color-primary-border), 0 14px 28px -10px rgba(16, 24, 40, 0.22); }
  .gw-orbit__core-mark { width: 36px; height: 36px; }
  .gw-orbit__core-label { font-size: 9px; letter-spacing: 0.04em; }
  .gw-orbit__icon { width: 28px; height: 28px; }
  .gw-orbit__icon svg { width: 14px; height: 14px; }
}
@media (max-width: 420px) {
  .gw-orbit {
    --orbit-size: 320px;
    --ring-1: 140px;
    --ring-2: 230px;
    --ring-3: 300px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gw-orbit__track,
  .gw-orbit__chip-inner,
  .gw-orbit__pulse,
  .gw-orbit__core::before {
    animation: none !important;
  }
}

/* ============================================
   CONNECTION-HANDSHAKE ANIMATION
   Linear flow: cart -> PayMullet -> bank.
   Replaces the orbital integration animation.
   ============================================ */

.gw-handshake {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  justify-self: end;
  padding: 28px 16px;
}

.gw-handshake__stage {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr 1.2fr 1fr;
  align-items: center;
  gap: 0;
  min-height: 200px;
}

.gw-handshake__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  min-width: 0;
}

.gw-handshake__icon {
  position: relative;
  width: 78px;
  height: 78px;
  border-radius: 22px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, rgba(16, 24, 40, 0.08));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 22px rgba(16, 24, 40, 0.07);
  flex-shrink: 0;
}

/* Cart icon column: every .gw-cart sits in the same slot; only the active one is visible. */
.gw-handshake__icon .gw-cart {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 350ms ease, transform 350ms ease;
  pointer-events: none;
}

.gw-handshake__icon .gw-cart[data-active="true"] {
  opacity: 1;
  transform: scale(1);
}

.gw-cart__label { display: none; }

/* Bank icon: same shell, no cycling. */
.gw-handshake__icon--bank svg { display: block; }

.gw-handshake__caption {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted, #6b7282);
  font-weight: 600;
  max-width: 110px;
  line-height: 1.3;
  min-height: 1.85em;
}

/* CENTER: PayMullet logo — sized to match the side icon tiles so the
   three nodes read as equal weight. */
.gw-handshake__node--core .gw-handshake__core {
  position: relative;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: var(--color-primary, #037449);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 28px rgba(3, 116, 73, 0.28);
  flex-shrink: 0;
}

.gw-handshake__core-mark {
  width: 64%;
  height: 64%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gw-handshake__core-mark svg {
  width: 100%;
  height: 100%;
  color: #fff;
}

/* Soft pulse ring around the core */
.gw-handshake__core-pulse {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--color-primary, #037449);
  opacity: 0;
  animation: gw-core-pulse 2.6s ease-out infinite;
  pointer-events: none;
}

@keyframes gw-core-pulse {
  0%   { transform: scale(0.95); opacity: 0.55; }
  70%  { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(1.18); opacity: 0; }
}

.gw-handshake__node--core .gw-handshake__caption {
  color: var(--color-primary, #037449);
}

/* WIRES: dashed line between adjacent nodes */
.gw-handshake__wire {
  position: relative;
  width: 100%;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -32px; /* lift to align with icon centers, away from captions */
}

.gw-handshake__line {
  width: 100%;
  height: 8px;
  overflow: visible;
}

/* Drawing animation: stroke-dashoffset goes from full length to 0. */
.gw-handshake__line line {
  stroke-dasharray: 5 4;
  stroke-dashoffset: 220;
  animation: gw-draw 3s linear infinite;
}

.gw-handshake__wire--2 .gw-handshake__line line {
  animation-delay: 1.2s;
}

@keyframes gw-draw {
  0%   { stroke-dashoffset: 220; }
  40%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}

/* Travelling dot rides each wire */
.gw-handshake__dot {
  position: absolute;
  top: 50%;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-primary, #037449);
  box-shadow: 0 0 0 3px rgba(3, 116, 73, 0.18);
  transform: translate(-50%, -50%);
  animation: gw-travel 3s linear infinite;
}

.gw-handshake__dot--2 { animation-delay: 1.2s; }

@keyframes gw-travel {
  0%   { left: 0%;   opacity: 0; }
  6%   { opacity: 1; }
  40%  { left: 100%; opacity: 1; }
  45%  { left: 100%; opacity: 0; }
  100% { left: 100%; opacity: 0; }
}

/* Status pills above each wire */
.gw-handshake__pill {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translate(-50%, -100%);
  background: #fff;
  color: var(--color-primary, #037449);
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(3, 116, 73, 0.18);
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(3, 116, 73, 0.12);
  letter-spacing: 0.02em;
  opacity: 0;
  animation: gw-pill 3s ease infinite;
}

.gw-handshake__wire--2 .gw-handshake__pill {
  animation-delay: 1.2s;
}

@keyframes gw-pill {
  0%   { opacity: 0; transform: translate(-50%, -90%); }
  10%  { opacity: 1; transform: translate(-50%, -100%); }
  55%  { opacity: 1; transform: translate(-50%, -100%); }
  65%  { opacity: 0; transform: translate(-50%, -110%); }
  100% { opacity: 0; transform: translate(-50%, -110%); }
}

/* Reduced motion: kill the loops, freeze everything in finished state. */
@media (prefers-reduced-motion: reduce) {
  .gw-handshake__line line,
  .gw-handshake__dot,
  .gw-handshake__pill,
  .gw-handshake__core-pulse {
    animation: none !important;
  }
  .gw-handshake__line line { stroke-dashoffset: 0; }
  .gw-handshake__pill { opacity: 1; transform: translate(-50%, -100%); }
  .gw-handshake__dot { opacity: 0; }
}

/* Pause when out of viewport (set by JS via data-paused) */
.gw-handshake[data-paused="true"] .gw-handshake__line line,
.gw-handshake[data-paused="true"] .gw-handshake__dot,
.gw-handshake[data-paused="true"] .gw-handshake__pill,
.gw-handshake[data-paused="true"] .gw-handshake__core-pulse {
  animation-play-state: paused;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .gw-handshake {
    max-width: 100%;
    padding: 20px 0;
  }
  .gw-handshake__stage {
    grid-template-columns: 1fr 1.1fr 1fr 1.1fr 1fr;
  }
  .gw-handshake__icon { width: 64px; height: 64px; border-radius: 18px; }
  .gw-handshake__icon svg { width: 30px; height: 30px; }
  .gw-handshake__icon--bank svg { width: 40px; height: 40px; }
  .gw-handshake__node--core .gw-handshake__core { width: 64px; height: 64px; }
  .gw-handshake__pill { font-size: 0.65rem; padding: 4px 9px; }
  .gw-handshake__caption { font-size: 0.62rem; }
}

@media (max-width: 600px) {
  .gw-handshake__stage {
    /* Tighter spacing so the 5-column flow still fits */
    grid-template-columns: 1fr 0.9fr 1fr 0.9fr 1fr;
    min-height: 170px;
  }
  .gw-handshake__icon { width: 56px; height: 56px; border-radius: 16px; }
  .gw-handshake__icon svg { width: 26px; height: 26px; }
  .gw-handshake__icon--bank svg { width: 34px; height: 34px; }
  .gw-handshake__node--core .gw-handshake__core { width: 56px; height: 56px; }
  .gw-handshake__wire { margin-top: -28px; height: 60px; }
  .gw-handshake__pill { font-size: 0.6rem; padding: 3px 8px; }
  .gw-handshake__caption {
    font-size: 0.58rem;
    max-width: 84px;
  }
}