.benefit-nav { background: none; box-shadow: none; }
.benefit-nav-item { box-shadow: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; background: none; }

/* Homepage-only visual tweaks */

/* NOTE: On this page the visible ribbon is a ::before pseudo-element, not the
   .stripe-hero-background div. We animate the pseudo-element directly. */

/* Base (sharp) state. We transition FROM this to heavy blur on load. */
html[data-wf-page="68811a4aff365897328f6dac"] .section-main.solutions-section-hero::before {
  animation: ribbonColorFlow 15s ease-in-out infinite !important;
  filter: none !important;
  transform: rotate(-20deg) scale(1) !important;
  opacity: 1 !important;
  will-change: opacity;
}

/* Blurred overlay layer using ::after - fade its opacity in for better performance */
html[data-wf-page="68811a4aff365897328f6dac"] .section-main.solutions-section-hero::after {
  content: '';
  position: absolute;
  top: 350px;
  right: -10%;
  width: 120%;
  height: 225px;
  z-index: -9; /* above ::before (-10) */
  background: inherit; /* same gradient context */
  background: linear-gradient(
    90deg,
    oklch(60% 0.24 280) 0%,
    oklch(65% 0.26 290) 15%,
    oklch(70% 0.25 300) 30%,
    oklch(75% 0.28 50) 50%,
    oklch(80% 0.27 60) 65%,
    oklch(85% 0.26 85) 80%,
    oklch(90% 0.25 95) 100%
  );
  background-size: 300% 100%;
  transform: rotate(-20deg);
  transform-origin: center;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(106, 27, 154, 0.3);
  filter: blur(60px) saturate(1.08) contrast(1.02);
  opacity: 0;
  pointer-events: none;
  transition: opacity 2000ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Animate blur by crossfading the blurred overlay in */
html.ribbon-blur[data-wf-page="68811a4aff365897328f6dac"] .section-main.solutions-section-hero::after {
  opacity: 0.8;
}

/* Respect users that prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  html[data-wf-page="68811a4aff365897328f6dac"] .section-main.solutions-section-hero::before {
    transition: none !important;
  }
}

/* Increase bottom padding to allow gradient glow to fade naturally */
html[data-wf-page="68811a4aff365897328f6dac"] .section-main.solutions-section-hero {
  padding-bottom: calc(9.375rem + 100px); /* Original 150px + 100px = 250px */
}

/* Benefits Slideshow styles (homepage section 1) */
.accounts-feature-content { gap: 32px; }

.benefit-nav {
  --benefit-active-color: #0f172a; /* dark for light background */
  --benefit-inactive-color: #8a94a6; /* muted gray */
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;
}

.benefit-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 6px 2px 6px 0;
  color: var(--benefit-inactive-color);
  font-weight: 600;
  background: none;
  border: none;
  cursor: pointer;
  transition: padding-left 180ms cubic-bezier(.2,.8,.2,1), color 180ms ease-out, font-weight 180ms ease-out, opacity 180ms ease-out;
}

.benefit-nav-item.active {
  opacity: 1;
  padding-left: 28px; /* room for the timer ring */
  color: var(--benefit-active-color);
  font-weight: 700;
}
.benefit-nav-item span { font-size: 1rem; }

.progress-ring {
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease-out;
  width: 20px;
  height: 20px;
  z-index: 1;
}
.progress-ring .ring-track {
  fill: none;
  stroke: rgba(0, 0, 0, 0.2);
  stroke-width: 2;
}
.progress-ring .ring-progress {
  fill: none;
  stroke: rgba(0, 0, 0, 0.6);
  stroke-width: 2;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  stroke-dasharray: 56.5; /* 2 * PI * r (r=9) */
  stroke-dashoffset: 56.5;
}

/* Show timer ring only on active item */
.benefit-nav-item .progress-ring { 
  opacity: 0; 
  visibility: hidden; 
}
.benefit-nav-item.active .progress-ring { 
  opacity: 1 !important; 
  visibility: visible !important; 
  display: block !important;
}

.accounts-feature-demo .benefits-slideshow {
  position: relative;
  width: 100%;
  height: 397px;
  border-radius: 12px;
  overflow: hidden;
  background: #18191b;
}

/* Shared slide shell: identical frame for every slide */
.benefits-slideshow .slide-shell {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.benefits-slideshow .slide-shell > * {
  /* Flexible shell that adapts to content while maintaining consistent frame */
  width: 100%;
  height: 100%;
  max-width: 960px;
  background: #18191b; /* matches cashback card bg */
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
}

/* Make cashback hero fill the slideshow area */
.benefits-slideshow .slide-cashback,
.benefits-slideshow .slide-cashback * {
  box-sizing: border-box;
}

.benefits-slideshow .slide-cashback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: stretch;
}

.benefits-slideshow .slide-cashback .rewards-card-wrapper {
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
}

.benefits-slideshow .slide-cashback .rewards-card {
  width: 100%;
  height: 100%;
  border-radius: 8px; /* inner radius slightly smaller than shell */
  background: transparent; /* shell provides background */
  box-shadow: none; /* shell provides shadow */
  padding: 0; /* shell provides padding */
}

/* Make cashback amount smaller for homepage slideshow */
.benefits-slideshow .slide-cashback .rewards-prefix,
.benefits-slideshow .slide-cashback .rewards-whole {
  font-size: 40px; /* Reduced from 52px */
}

.benefits-slideshow .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(10%);
  transition: opacity 420ms ease, transform 420ms ease;
  display: grid;
  place-items: center;
}

.benefits-slideshow .slide.active {
  opacity: 1;
  transform: translateX(0);
}

.slide-placeholder {
  color: white;
  font-size: 1.125rem;
  font-weight: 600;
}

.slide-cashback { background: transparent; }
.slide-payments { background: transparent; }
.slide-control { background: transparent; }

/* Card Control slide specific styling */
.slide-control .slide-content {
  padding: 24px;
  background: #18191b;
  border-radius: 12px;
  height: 100%;
  box-sizing: border-box;
}

.slide-control .slideshow-cards-preview {
  padding: 0;
  margin: 0;
  background: transparent;
  height: 100%;
}

/* Make Payment Timeline fill the slide area on homepage */
/* Make payment timeline fill the shell content area (no extra margins) */
.slide-payments .payment-timeline-section {
  background: transparent;
  box-shadow: none;
  border-radius: 8px;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.slide-payments .timeline-container { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 20px; }
.slide-payments .timeline-header { margin-bottom: 16px; justify-content: center; }
.slide-payments .timeline-track { margin-bottom: 0; }
.slide-payments .timeline-title { font-size: 28px; }

/* Match progress bar style from slide 1 */
.slide-payments .track-line { 
  height: 3px; /* Same thin height as rewards progress bar */
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.25) 100%);
  border-radius: 2px;
  position: relative;
}

/* Style track labels like category chips from slide 1 */
.slide-payments .track-label {
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: 0.02em;
}

/* Style time badges like category chips from slide 1 */
.slide-payments .track-time {
  display: inline-block;
  background: #2b2d30; /* Same soft charcoal background as category chips */
  border: 1px solid rgba(255, 255, 255, 0.1); /* Same faint white stroke */
  color: #ffffff; /* Bright white text like category chips */
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 12px; /* Same capsule shape */
  font-size: 12px;
}

/* Green styling only for the fastest option (Near-instant) */
.slide-payments .fednow-track .track-time {
  background: rgba(34, 197, 94, 0.15); /* Green background for fastest */
  border: 1px solid rgba(34, 197, 94, 0.3); /* Green border */
  color: #22c55e; /* Green text */
  font-weight: 600;
}

/* Make Wire and ACH progress bars more contrasting while keeping them grey */
.slide-payments .wire-progress {
  background: linear-gradient(90deg, #9ca3af 0%, #6b7280 100%);
}

.slide-payments .ach-progress {
  background: linear-gradient(90deg, #9ca3af 0%, #6b7280 100%);
}

/* Restore status chip to the header's top-right (original placement) */
.slide-payments .timeline-controls { display: none; }
.slide-payments .timeline-header { position: relative; }
.slide-payments .payment-timeline-section { position: relative; }
.slide-payments .status-chip {
  display: none;
  position: static;
  bottom: auto;
  left: auto;
  right: auto;
  top: auto;
  transform: none;
  z-index: 3;
}

/* No decorative pseudo-element needed for homepage */
.slide-payments .payment-timeline-section::after { content: none; }

@media (max-width: 991px) {
  .accounts-feature-content { gap: 20px; }
  .accounts-feature-demo .benefits-slideshow { height: 277px; }
}

/* ===== MOBILE OVERRIDES FOR HEADER SPACING ===== */
@media (max-width: 768px) {
  /* Reduce header margin-top on mobile for better spacing */
  .max-width-995.black-text.stripe-title-blend[style*="margin-top: 60px"] {
    margin-top: 20px !important;
  }
  
  /* Alternative selector in case the above doesn't work */
  .solutions-section-hero .max-width-995.stripe-title-blend {
    margin-top: 20px !important;
  }
}

/* ===== MOBILE OVERRIDES FOR GRADIENT RIBBON ===== */
@media (max-width: 768px) {
  /* Override the existing gradient ribbon ::before to be much bigger on mobile */
  html[data-wf-page="68811a4aff365897328f6dac"] .section-main.solutions-section-hero::before {
    width: 150% !important; /* Narrower than 200% */
    height: 150px !important; /* Reduced height to make it narrower */
    transform: rotate(-20deg) scale(1.5) !important; /* Reduced scale from 1.8 to 1.5 */
    filter: none !important; /* No blur - sharp edges */
    top: 280px !important; /* Moved down to compensate for reduced height */
    left: -12% !important; /* Moved slightly more to the right */
    right: -38% !important; /* Adjusted to maintain width */
    opacity: 0.7 !important; /* 70% opacity */
  }
  
  /* Override the blurred overlay ::after to match */
  html[data-wf-page="68811a4aff365897328f6dac"] .section-main.solutions-section-hero::after {
    width: 150% !important; /* Narrower than 200% */
    height: 150px !important; /* Reduced height to make it narrower */
    transform: rotate(-20deg) scale(1.5) !important; /* Reduced scale from 1.8 to 1.5 */
    filter: none !important; /* No blur - sharp edges */
    top: 280px !important; /* Moved down to compensate for reduced height */
    left: -12% !important; /* Moved slightly more to the right */
    right: auto !important; /* Reset right positioning */
    opacity: 0.7 !important; /* 70% opacity */
  }
  
  /* Adjust mobile card positioning to work with gradient */
  .mobile-card-fallback {
    position: relative;
    z-index: 2;
    margin-top: 100px !important; /* Adjust spacing */
  }
  
  /* Ensure the hero section has proper overflow and z-index on mobile */
  .section-main.solutions-section-hero {
    overflow: visible !important;
    position: relative;
    z-index: 1;
  }
  
  /* Add padding to the next section to prevent overlap */
  .section-main.solutions-section-hero + section {
    padding-top: 60px !important; /* Add extra padding to prevent shadow cutoff */
    position: relative;
    z-index: 0; /* Lower z-index than hero section */
  }
}

/* ===== MOBILE OVERRIDES FOR SMALLER SCREENS ===== */
@media (max-width: 480px) {
  /* Even smaller header margin for very small screens */
  .max-width-995.black-text.stripe-title-blend[style*="margin-top: 60px"],
  .solutions-section-hero .max-width-995.stripe-title-blend {
    margin-top: 15px !important;
  }
}

/* ===== MOBILE OVERRIDES FOR VIRTUAL CARD MODAL ===== */
@media (max-width: 767px) {
  /* Ensure proper centering of the virtual card modal on mobile */
  [data-lazy-section="section3"] .accounts-feature-demo {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 20px !important; /* Add horizontal padding to prevent edge overflow */
    box-sizing: border-box !important;
  }
  
  /* Make the virtual card modal responsive and centered */
  #homepage-virtual-card-modal {
    width: 100% !important;
    max-width: calc(100vw - 40px) !important; /* Full width minus padding */
    margin: 0 auto !important; /* Center the modal */
    box-sizing: border-box !important;
  }
}

@media (max-width: 480px) {
  /* Additional styles for very small screens */
  [data-lazy-section="section3"] .accounts-feature-demo {
    padding: 0 16px !important; /* Reduce padding on very small screens */
  }
  
  #homepage-virtual-card-modal {
    max-width: calc(100vw - 32px) !important; /* Adjust for smaller padding */
  }
}