/* ==========================================================================
   Step Cards — Road Layout (Horizontal Rows)
   ========================================================================== */

/* ---------- Step Container ---------- */

.step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  gap: var(--space-sm);
  z-index: 1;
  margin: 0;
  max-width: none;
}

/* ---------- Step Node ---------- */

.step__node {
  position: relative;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.step__node::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(67, 84, 100, 0.9);
  border: 3px solid rgba(255, 255, 255, 0.2);
  transition: border-color var(--duration-normal) var(--ease-smooth),
              background var(--duration-normal) var(--ease-smooth),
              box-shadow var(--duration-normal) var(--ease-smooth);
}

.step.is-active .step__node::before {
  border-color: var(--orange);
  background: var(--orange);
  box-shadow: 0 0 0 6px rgba(250, 173, 98, 0.2),
              0 0 25px rgba(250, 173, 98, 0.5);
}

/* ---------- Node Ring ---------- */

.step__node-ring {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid var(--orange);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--duration-normal) var(--ease-smooth),
              transform var(--duration-normal) var(--ease-smooth);
  pointer-events: none;
}

.step.is-active .step__node-ring {
  opacity: 0.4;
  transform: scale(1);
  animation: ringPulse 2.5s ease-in-out infinite;
}

@keyframes ringPulse {
  0%, 100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 0.15;
    transform: scale(1.2);
  }
}

/* ---------- Node Number Badge ---------- */

.step__node-number {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--orange);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 800;
  border-radius: 50%;
  z-index: 3;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ---------- Node Icon ---------- */

.step__node-icon {
  position: relative;
  z-index: 1;
  width: 24px;
  height: 24px;
  color: rgba(255, 255, 255, 0.5);
  transition: color var(--duration-normal) var(--ease-smooth);
}

.step__node-icon svg {
  width: 100%;
  height: 100%;
}

.step.is-active .step__node-icon {
  color: var(--white);
}

/* ---------- Step Card ---------- */

.step__card {
  position: relative;
  max-width: 280px;
  padding: var(--space-lg) var(--space-xl);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(250, 173, 98, 0.12);
  transition: border-color var(--duration-normal) var(--ease-smooth),
              box-shadow var(--duration-normal) var(--ease-smooth);
}

.step.is-active .step__card {
  border-color: rgba(250, 173, 98, 0.3);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25),
              0 0 20px rgba(250, 173, 98, 0.08);
}

/* Hover lift on visible cards */
.step.is-revealed .step__card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  border-color: rgba(250, 173, 98, 0.4);
  transform: translateY(-2px);
  transition: box-shadow var(--duration-fast) var(--ease-smooth),
              border-color var(--duration-fast) var(--ease-smooth),
              transform var(--duration-fast) var(--ease-smooth);
}

/* ---------- Card Content ---------- */

.step__title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: var(--space-sm);
  line-height: 1.25;
}

.step__description {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.65;
  margin-bottom: var(--space-lg);
}

/* ---------- Video Button ---------- */

.step__video-btn {
  font-size: 0.8rem;
  padding: 0.5em 1.2em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  min-width: 44px;
}

.step__video-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ---------- Final Step Card ---------- */

.step__card--final {
  position: relative;
  background: rgba(250, 173, 98, 0.08);
  border: none;
  overflow: visible;
}

/* Golden gradient border using pseudo-element */
.step__card--final::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--radius-lg) + 2px);
  background: linear-gradient(
    135deg,
    var(--orange) 0%,
    #FFD700 30%,
    var(--orange) 50%,
    #FFD700 70%,
    var(--orange) 100%
  );
  background-size: 200% 200%;
  z-index: -1;
  animation: goldenShimmer 4s ease-in-out infinite;
}

/* Inner background to mask the gradient border */
.step__card--final::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  background: rgba(67, 84, 100, 0.95);
  z-index: -1;
}

@keyframes goldenShimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.step__card--final .step__title {
  color: var(--orange);
  font-size: 1.2rem;
}

/* Final step node */
.step__node--final::before {
  border-width: 3px;
}

.step.is-active .step__node--final::before {
  background: linear-gradient(135deg, var(--orange), #FFD700);
  border-color: #FFD700;
  box-shadow: 0 0 0 6px rgba(255, 215, 0, 0.15),
              0 0 24px rgba(250, 173, 98, 0.4);
}

/* ---------- Confetti Particle (created by JS) ---------- */

.confetti-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 20;
  will-change: transform, opacity;
}

/* ---------- Reduced Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .step__node-ring {
    animation: none;
  }

  .step__card--final::before {
    animation: none;
    background-position: 0% 50%;
  }

  .step.is-revealed .step__card:hover {
    transform: none;
  }
}

/* ---------- Tablet ---------- */

@media (max-width: 1024px) and (min-width: 768px) {
  .step__card {
    max-width: 240px;
    padding: var(--space-md) var(--space-lg);
  }

  .step__title {
    font-size: 1rem;
  }

  .step__description {
    font-size: 0.82rem;
  }

  .step__node {
    width: 50px;
    height: 50px;
  }

  .step__node-icon {
    width: 20px;
    height: 20px;
  }
}

/* ---------- Mobile: Stack Vertically (node left, card right) ---------- */

@media (max-width: 767px) {
  .step {
    flex-direction: row !important;
    align-items: flex-start;
    text-align: left !important;
    gap: var(--space-md);
    margin-bottom: var(--space-2xl);
  }

  .step__card {
    max-width: none;
    flex: 1;
    min-width: 0;
    padding: var(--space-md) var(--space-lg);
  }

  .step__video-btn {
    margin-left: 0 !important;
  }

  .step__node {
    width: 48px;
    height: 48px;
  }

  .step__node-icon {
    width: 20px;
    height: 20px;
  }

  .step__node-ring {
    inset: -8px;
  }

  .step__title {
    font-size: 1.05rem;
  }

  .step__description {
    font-size: 0.88rem;
    margin-bottom: var(--space-md);
  }

  .step__card--final .step__title {
    font-size: 1.15rem;
  }
}

@media (max-width: 479px) {
  .step {
    gap: var(--space-sm);
    margin-bottom: var(--space-xl);
  }
}

/* ==========================================================================
   Step Flip Cards — PNG (front) flips to reveal info card (back)
   ========================================================================== */

/* Step container — handles reveal animation & flex sizing in the row */
.step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 1 1 0;
  min-width: 0;
  padding: 0 var(--space-xs);
  z-index: 2;
  /* Initial reveal state — fades up on scroll */
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--ease-smooth), transform 700ms var(--ease-smooth);
}

.step.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Flip Card Wrapper ---------- */

.step__flip {
  position: relative;
  width: 100%;
  perspective: 1400px;
  cursor: pointer;
  outline: none;
  border-radius: var(--radius-lg);
  -webkit-tap-highlight-color: transparent;
}

.step__flip:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 6px;
  box-shadow: 0 0 0 6px rgba(67, 84, 100, 0.5);
  border-radius: var(--radius-lg);
}

/* The piece that actually rotates.
   --flip-scale lets desktop bump the visible size without breaking the
   flipped/hover/focus transforms (each state composes scale into its
   transform via var()). Mobile keeps scale 1. */
.step__flip-inner {
  --flip-scale: 1;
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
  transform: scale(var(--flip-scale));
  transition: transform 750ms cubic-bezier(0.7, 0, 0.3, 1);
  will-change: transform;
}

/* ---------- Faces ---------- */

.step__face {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Front face is a transparent container that holds either the PNG
   illustration (tablet+desktop) or the designed mobile card. CSS swaps
   which one is visible based on viewport. */
.step__face--front {
  display: block;
  width: 100%;
  height: auto;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  position: relative;
  overflow: visible;
  user-select: none;
}

/* ---------- PNG illustration (tablet + desktop) ---------- */
.step__front-img {
  display: block;
  width: 100%;
  height: auto;
  filter:
    drop-shadow(0 6px 14px rgba(0, 0, 0, 0.22))
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
  transition: filter 350ms var(--ease-smooth);
  -webkit-user-drag: none;
}

@media (hover: hover) and (pointer: fine) {
  .step__flip:hover:not(.is-flipped) .step__front-img,
  .step__flip:focus-visible .step__front-img {
    filter:
      drop-shadow(0 0 12px rgba(250, 173, 98, 0.7))
      drop-shadow(0 0 28px rgba(250, 173, 98, 0.45))
      drop-shadow(0 12px 22px rgba(0, 0, 0, 0.3));
  }
}

.step__front-cta {
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(67, 84, 100, 0.92);
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-size: clamp(0.6rem, 0.95vw, 0.72rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  white-space: nowrap;
  opacity: 0.92;
  transition: opacity 250ms var(--ease-smooth), transform 250ms var(--ease-smooth);
  z-index: 2;
}

@media (hover: hover) and (pointer: fine) {
  .step__flip:hover:not(.is-flipped) .step__front-cta {
    background: var(--orange);
    color: var(--navy);
    opacity: 1;
    transform: translateX(-50%) scale(1.06);
  }
}

/* ---------- Designed mobile card — hidden on tablet+ ---------- */
.step__front-designed {
  display: none;
}

@media (max-width: 767px) {
  /* Hide the PNG illustration on mobile — show the designed card */
  .step__front-img,
  .step__front-cta {
    display: none;
  }

  .step__face--front {
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 2px solid var(--orange);
    background: linear-gradient(165deg, #FFFFFF 0%, #FAF6EE 100%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      0 4px 10px rgba(67, 84, 100, 0.1),
      0 14px 28px rgba(67, 84, 100, 0.16);
  }

  .step__front-designed {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 240px;
    padding: var(--space-md);
    text-align: left;
    position: relative;
  }

  .step__front-designed::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 55%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    pointer-events: none;
    z-index: 0;
  }

  .step__front-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: var(--space-sm);
    position: relative;
    z-index: 1;
  }

  .step__front-number {
    font-family: var(--font-heading);
    font-size: 2.4rem;
    font-weight: 900;
    line-height: 0.9;
    color: var(--navy);
    letter-spacing: -0.04em;
  }

  .step__front-phase {
    font-family: var(--font-heading);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--medium-gray);
    text-align: right;
    line-height: 1.3;
    margin-top: 6px;
  }

  .step__front-icon-d {
    position: absolute;
    top: 50%;
    right: 0%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: 50%;
    pointer-events: none;
    color: var(--navy);
    z-index: 0;
  }

  .step__front-icon-d svg {
    width: 100%;
    height: 100%;
    opacity: 0.18;
  }

  .step__front-title {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--navy);
    margin: 0;
    position: relative;
    z-index: 1;
    padding-right: 30%;
  }

  .step__front-foot {
    margin-top: auto;
    position: relative;
    z-index: 1;
  }

  .step__front-divider {
    display: block;
    width: 32px;
    height: 3px;
    margin: var(--space-sm) 0 6px;
    background: var(--orange);
    border-radius: 2px;
  }

  .step__front-hint {
    font-family: var(--font-body);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--medium-gray);
  }
}

/* Back face — absolutely positioned over the front so they share the box.
   The counter-scale (1 / --flip-scale) negates the parent's scale so the
   back card renders at its natural (unscaled) size, even when the front
   PNG is enlarged on desktop to feel "connected". The back is centered
   inside the larger bounding box, with road bar visible around it. */
.step__face--back {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* `safe center` falls back to flex-start when content is taller than
     the card — without `safe`, overflowing content centers off the top
     and the back-number/title become unscrollable. */
  justify-content: safe center;
  text-align: center;
  padding: clamp(1rem, 2vw, 1.5rem);
  background: linear-gradient(165deg, #FFFFFF 0%, #FAF6EE 100%);
  border: 2px solid var(--orange);
  border-radius: var(--radius-lg);
  transform: rotateY(180deg) scale(calc(1 / var(--flip-scale, 1)));
  transform-origin: center center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 4px 10px rgba(67, 84, 100, 0.1),
    0 18px 38px rgba(67, 84, 100, 0.2);
  /* Clip the ::before glow horizontally, but allow vertical scroll so
     long copy (cards 3, 6, 9 — especially on iPad-sized viewports where
     the back card is short) can never be cut off. Scrollbars are hidden
     for a clean look; touch users still get natural momentum scroll. */
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.step__face--back::-webkit-scrollbar {
  display: none;
}

/* Subtle glow accent on the back card */
.step__face--back::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -25%;
  width: 70%;
  height: 70%;
  background: radial-gradient(circle, rgba(250, 173, 98, 0.16) 0%, transparent 65%);
  pointer-events: none;
}

/* Number badge on the back — solid navy with white digit for AAA contrast */
.step__back-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 0.55em;
  margin-bottom: var(--space-xs);
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 800;
  border-radius: 14px;
  box-shadow:
    0 3px 10px rgba(67, 84, 100, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  position: relative;
  z-index: 1;
}

/* Back face title & description.
   Tight type + max-width gutters so long titles (cards 3, 6, 9) fit
   comfortably inside the original (unscaled) back-card box without
   touching the edges. overflow-wrap breaks any unusually long word. */
.step__face--back .step__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(0.82rem, 1.2vw, 0.98rem);
  color: var(--navy);
  line-height: 1.2;
  margin: 0 0 var(--space-xs);
  letter-spacing: -0.005em;
  position: relative;
  z-index: 1;
  max-width: 86%;
  overflow-wrap: break-word;
  hyphens: auto;
}

.step__face--back .step__description {
  font-family: var(--font-body);
  font-size: clamp(0.7rem, 0.95vw, 0.8rem);
  color: var(--medium-gray);
  line-height: 1.45;
  margin: 0 0 var(--space-sm);
  font-weight: 500;
  position: relative;
  z-index: 1;
  max-width: 90%;
  overflow-wrap: break-word;
}

/* Final step's back face — golden accent */
.step__face--back--final {
  background: linear-gradient(165deg, #FFFFFF 0%, #FFF8E5 100%);
  border-color: #D4A017;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 4px 10px rgba(67, 84, 100, 0.1),
    0 18px 38px rgba(212, 160, 23, 0.25);
}

.step__face--back--final::before {
  background: radial-gradient(circle, rgba(255, 215, 0, 0.22) 0%, transparent 65%);
}

.step__face--back--final .step__title {
  color: var(--navy);
}

.step__face--back--final .step__back-number {
  background: linear-gradient(135deg, var(--orange) 0%, #D4A017 100%);
  color: var(--navy);
  font-weight: 900;
}

/* ---------- Watch Video Button ---------- */

.step__video-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.7em 1.4em;
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--white);
  background: var(--navy);
  border: 2px solid var(--navy);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-smooth),
    color var(--duration-fast) var(--ease-smooth),
    border-color var(--duration-fast) var(--ease-smooth),
    transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 240ms var(--ease-smooth);
  white-space: nowrap;
  line-height: 1;
  position: relative;
  z-index: 2;
  min-height: 44px;
  box-shadow: 0 4px 14px rgba(67, 84, 100, 0.3);
}

.step__video-btn:hover,
.step__video-btn:focus-visible {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--navy);
  box-shadow:
    0 8px 22px rgba(250, 173, 98, 0.6),
    0 0 0 4px rgba(250, 173, 98, 0.18);
  transform: translateY(-2px) scale(1.04);
  outline: none;
}

.step__video-btn:active {
  transform: translateY(0) scale(1);
  box-shadow: 0 2px 8px rgba(250, 173, 98, 0.3);
}

.step__video-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.step__video-btn:hover svg,
.step__video-btn:focus-visible svg {
  transform: translateX(3px) scale(1.18);
}

/* ---------- "Tap to flip" hint badge ---------- */

.step__flip-hint {
  position: absolute;
  bottom: 8px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-family: var(--font-heading);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--orange);
  background: rgba(20, 28, 38, 0.78);
  border: 1px solid rgba(250, 173, 98, 0.4);
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 300ms var(--ease-smooth), transform 300ms var(--ease-smooth);
  z-index: 3;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Hint shows on hover-capable devices when not flipped */
@media (hover: hover) and (pointer: fine) {
  .step__flip:hover:not(.is-flipped) .step__flip-hint {
    opacity: 1;
    transform: translateY(0);
  }
}

/* On touch, hint is always subtly visible until first interaction */
@media (hover: none) {
  .step__flip:not(.has-been-flipped) .step__flip-hint {
    opacity: 0.85;
    transform: translateY(0);
  }
}

/* ---------- Flip States ---------- */

/* The flipped state is fully driven by JS — clicking flips and locks,
   the × button or outside-click unflips. Focus-within auto-flip was
   removed because it caused state mismatches with the explicit flow. */
.step__flip.is-flipped .step__flip-inner {
  transform: rotateY(180deg) scale(var(--flip-scale));
}

/* Hover-to-peek (desktop only, when not click-locked).
   Mouse over front face → temporary preview; mouse off → returns to front. */
@media (hover: hover) and (pointer: fine) {
  .step__flip:hover:not(.is-flipped) .step__flip-inner {
    transform: rotateY(180deg) scale(var(--flip-scale));
  }
}

/* ---------- Close button on back face ---------- */

.step__flip-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--navy);
  border: 1.5px solid var(--navy);
  border-radius: 50%;
  color: var(--white);
  cursor: pointer;
  transition: background 200ms var(--ease-smooth),
              transform 180ms var(--ease-smooth),
              border-color 200ms var(--ease-smooth),
              color 200ms var(--ease-smooth),
              box-shadow 200ms var(--ease-smooth);
  z-index: 4;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 3px 10px rgba(67, 84, 100, 0.3);
}

.step__flip-close:hover,
.step__flip-close:focus-visible {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--navy);
  transform: scale(1.12) rotate(90deg);
  box-shadow: 0 6px 18px rgba(250, 173, 98, 0.55);
  outline: none;
}

.step__flip-close:active {
  transform: scale(0.95) rotate(90deg);
}

.step__flip-close svg {
  pointer-events: none;
}

/* Mobile: bigger tap target (Apple HIG / Material recommend 44px+) */
@media (max-width: 767px) {
  .step__flip-close {
    width: 44px;
    height: 44px;
    top: 10px;
    right: 10px;
  }
}

/* ---------- Active step (current scroll position) — glow on front face ---------- */

.step.is-active .step__face--front {
  filter:
    drop-shadow(0 10px 24px rgba(0, 0, 0, 0.4))
    drop-shadow(0 0 28px rgba(250, 173, 98, 0.35));
}

.step--final.is-active .step__face--front {
  filter:
    drop-shadow(0 10px 24px rgba(0, 0, 0, 0.4))
    drop-shadow(0 0 32px rgba(255, 215, 0, 0.55));
}

/* ---------- Tablet ---------- */

@media (max-width: 1024px) and (min-width: 768px) {
  .step {
    padding: 0 2px;
  }
  .step__flip-inner {
    --flip-scale: 1.18;
  }
  /* iPad-class tablets: the 16:9 front PNGs render very short
     (~140px tall), leaving the back card too short to fit a title +
     description + video button. iOS Safari also has a long-standing bug
     where overflow:auto fails to scroll inside a rotateY 3D transform,
     so scroll is not a viable fallback here. We extend the back's box
     vertically only (inset top/bottom negative, left/right 0) so the
     content fits at its natural size without changing the side-to-side
     footprint of the card. */
  .step__face--back {
    inset: -22% 0;
    padding: 0.75rem 1rem;
  }
  .step__face--back .step__title {
    font-size: 0.85rem;
    margin-bottom: 0.2rem;
  }
  .step__face--back .step__description {
    font-size: 0.72rem;
    line-height: 1.4;
    margin-bottom: 0.4rem;
  }
  .step__back-number {
    min-width: 24px;
    height: 24px;
    font-size: 0.75rem;
    margin-bottom: 0.15rem;
  }
  .step__video-btn {
    font-size: 0.72rem;
    padding: 0.5em 1em;
    min-height: 36px;
  }
}

/* ---------- Desktop: PNGs scale up so they almost touch, replicating
   the matte-transparent map's connected feel ---------- */

@media (min-width: 1025px) {
  .step {
    padding: 0;
  }
  .step__flip-inner {
    --flip-scale: 1.32;
  }
  /* When a step is being interacted with, raise it above neighbors so its
     scaled-up content (which overflows its bounding box) isn't clipped or
     intercepted by an adjacent step's hit area. */
  .step:hover,
  .step:focus-within {
    z-index: 5;
  }
  .step:has(.step__flip.is-flipped) {
    z-index: 5;
  }
}

/* ---------- Mobile: stack vertically, larger flip cards ---------- */

@media (max-width: 767px) {
  .step {
    flex-direction: column !important;
    align-items: stretch;
    text-align: center !important;
    padding: 0;
    margin-bottom: var(--space-xl);
    gap: 0;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }
  .step__flip {
    width: 100%;
  }

  /* Front face — small faded watermark behind content so the icon is
     visible as texture but doesn't compete with the title text. */
  .step__face--front {
    min-height: 240px;
  }
  .step__front-icon {
    width: 50%;
    height: 50%;
    right: 0%;
  }
  .step__front-icon svg {
    opacity: 0.18;
  }
  .step__front-title {
    font-size: 1rem;
  }

  /* Back face — generous side padding, full-width text, comfortable size,
     and let content scroll if it ever overflows so nothing gets cut off. */
  .step__face--back {
    padding: var(--space-lg) var(--space-md);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .step__face--back .step__title {
    font-size: 1rem;
    max-width: none;
    padding: 0 var(--space-sm);
  }
  .step__face--back .step__description {
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: var(--space-md);
    max-width: none;
    padding: 0 var(--space-sm);
  }
  .step__back-number {
    margin-bottom: var(--space-xs);
  }
  .step__video-btn {
    font-size: 0.85rem;
    padding: 0.7em 1.4em;
    min-height: 44px;
  }
  .step__flip-hint {
    font-size: 0.6rem;
  }
}

/* ---------- Reduced Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .step,
  .step__flip-inner,
  .step__face--front,
  .step__flip-hint {
    transition: opacity var(--duration-fast) var(--ease-smooth) !important;
    transform: none !important;
  }
  /* When motion is reduced, show both faces side-by-side via no flip */
  .step__flip.is-flipped .step__face--back,
  .step__flip:focus-within .step__face--back {
    /* Bring the back into view with a simple opacity swap rather than 3D */
    transform: rotateY(0deg) !important;
  }
}