/* ==========================================================================
   validate.css — Page-specific styles (shared premium styles in page-premium.css)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Social proof banner
   -------------------------------------------------------------------------- */
.validate-banner {
  background: var(--blue);
  padding: 48px 0;
  position: relative;
  overflow: hidden;
}
.validate-banner-pattern {
  background: url(/wp-content/themes/plb/img/pattern.webp);
  background-size: auto;
  background-repeat: repeat;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 400px;
  opacity: 0.12;
  pointer-events: none;
}
.validate-banner-pattern-left  { left: -80px; }
.validate-banner-pattern-right { right: -80px; }

/* --------------------------------------------------------------------------
   4-Phase process section
   -------------------------------------------------------------------------- */
.phase-section {
  padding: 88px 0;
  background: #fff;
}
.phase-list {
  margin-top: 64px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.phase-row {
  padding: 64px 0;
  border-top: 1px solid #f1f5f9;
  border-left: 4px solid var(--phase-color, #3d61df);
  position: relative;
}
.phase-row:first-child { border-top: none; }
.phase-row-alt {
  background: #f8faff;
}
.phase-row-inner {
  gap: 72px;
  align-items: center;
  flex-wrap: nowrap;
}
.phase-row-alt .phase-row-inner {
  flex-direction: row-reverse;
}
.phase-col-left {
  display: flex;
  flex-direction: column;
  width: 50%;
}
.phase-col-right {
  display: flex;
  justify-content: center;
  width: 50%;
}
/* Override base.css `main ul` specificity */
main .phase-list-items {
  margin: 16px 0 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
main .phase-list-items li {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  padding-left: 24px;
  position: relative;
  color: #1e293b;
}
main .phase-list-items li::before {
  content: '→';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: var(--bullet-color, #3d61df);
  font-weight: 900;
  font-size: 15px;
}

/* --------------------------------------------------------------------------
   Comparison section
   -------------------------------------------------------------------------- */
.compare-section {
  padding: 88px 0;
  background: #f7f9ff;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  .phase-row-inner {
    gap: 40px;
  }
  .phase-col-left,
  .phase-col-right {
    width: 100%;
  }
  .phase-row-inner,
  .phase-row-alt .phase-row-inner {
    flex-wrap: wrap;
    flex-direction: column;
  }
}

@media (max-width: 806px) {
  .phase-section,
  .compare-section {
    padding: 56px 0;
  }
  .phase-row {
    padding: 48px 0;
    border-left: none;
    border-top: 4px solid var(--phase-color, #3d61df);
  }
  .phase-list {
    margin-top: 40px;
  }
  .validate-banner {
    padding: 40px 0;
  }
  .ticker-track {
    animation-duration: 20s;
  }
}