/* =============================================================
   go-live-block.css — Bluworks v2
   Mirrors the inline <style> block from the original /overview
   page exactly. All rules scoped to .go-live-section.
   ============================================================= */

/* ── Section ── */
.go-live-section {
  background: var(--bg, #FAFBFD);
  padding: clamp(64px, 8vw, 96px) 0;
  padding-top:0px !important;
}

.go-live-section .container {
  width: 100%;
  max-width: var(--maxw, 1240px);
  margin: 0 auto;
  padding: 0 var(--gutter, 24px);
  box-sizing: border-box;
}

/* ── Section head ── */
.go-live-section .section-head {
  margin-bottom: 48px;
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.go-live-section .section-head h2 {
  font-family: 'Neue Haas Grotesk Display', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(28px, 3.4vw, 44px);  /* --text-section-title */
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink, #0A0F1E);
  margin: 0;
}

.go-live-section .section-head p {
  font-family: 'Neue Haas Grotesk Display', 'Helvetica Neue', Arial, sans-serif;
  margin: 14px 0 0;
  font-size: 16px;
  color: #6B7088;
  line-height: 1.55;
  font-weight: 500;
}

/* ── Arrow + step grid ── */
.go-live-section .steps-grid-arrows {
  display: grid;
  grid-template-columns: 1fr 36px 1fr 36px 1fr 36px 1fr;
  align-items: stretch;
}

@media (max-width: 980px) {
  .go-live-section .steps-grid-arrows {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .go-live-section .step-arrow { display: none; }
}

@media (max-width: 540px) {
  .go-live-section .steps-grid-arrows { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
.step-arrow {
    display: none !important;
}
}
/* ── Arrow connector ── */
.go-live-section .step-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blu-primary, #1E50E5);
}

/* SVG stroke-dash draw animation — starts hidden, revealed by .in */
.go-live-section .step-arrow svg line,
.go-live-section .step-arrow svg polyline {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  transition: stroke-dashoffset 450ms cubic-bezier(0.65, 0, 0.35, 1);
}

/* In RTL, cards flow right-to-left, so the arrow icon (drawn pointing
 * right) needs to be mirrored to point left. */
html[dir="rtl"] .go-live-section .step-arrow svg {
  transform: scaleX(-1);
}

/* ── Step card ── */
.go-live-section .steps-grid .impl-step {
  position: relative;
  background: #EEF2FF;
  border: 1px solid transparent;
  border-radius: var(--r-3, 12px);
  padding: var(--s-5, 20px);
  overflow: hidden;
  min-height: 0;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  transition: transform 280ms ease, box-shadow 280ms ease, background 280ms ease;
}

/* The animated top border — starts at width:0, expands to 100% on .in */
.go-live-section .steps-grid .impl-step::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--blu-primary, #1E50E5);
  border-top-left-radius: var(--r-3, 12px);
  border-top-right-radius: var(--r-3, 12px);
  transition: width 500ms cubic-bezier(0.65, 0, 0.35, 1);
}

.go-live-section .steps-grid .impl-step:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(30, 80, 229, 0.10);
  background: #E4EBFF;
}

/* ── Staggered .in animations ── */
/* Card 1 top-border */
.go-live-section .steps-grid.in > *:nth-child(1)::before {
  width: 100%;
  transition-delay: 150ms;
}
/* Arrow 1 (child 2) */
.go-live-section .steps-grid.in > *:nth-child(2) svg line,
.go-live-section .steps-grid.in > *:nth-child(2) svg polyline {
  stroke-dashoffset: 0;
  transition-delay: 250ms;
}
/* Card 2 top-border (child 3) */
.go-live-section .steps-grid.in > *:nth-child(3)::before {
  width: 100%;
  transition-delay: 550ms;
}
/* Arrow 2 (child 4) */
.go-live-section .steps-grid.in > *:nth-child(4) svg line,
.go-live-section .steps-grid.in > *:nth-child(4) svg polyline {
  stroke-dashoffset: 0;
  transition-delay: 650ms;
}
/* Card 3 top-border (child 5) */
.go-live-section .steps-grid.in > *:nth-child(5)::before {
  width: 100%;
  transition-delay: 950ms;
}
/* Arrow 3 (child 6) */
.go-live-section .steps-grid.in > *:nth-child(6) svg line,
.go-live-section .steps-grid.in > *:nth-child(6) svg polyline {
  stroke-dashoffset: 0;
  transition-delay: 1050ms;
}
/* Card 4 top-border (child 7) */
.go-live-section .steps-grid.in > *:nth-child(7)::before {
  width: 100%;
  transition-delay: 1350ms;
}

/* ── Step label: "STEP 1" ── */
.go-live-section .steps-grid .impl-step .impl-step-num {
  display: block;
  font-family: 'Neue Haas Grotesk Display', 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--text-micro, 14px);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blu-primary, #1E50E5);
  margin-bottom: 8px;
}

html[dir="rtl"] .go-live-section .steps-grid .impl-step .impl-step-num {
  font-family: var(--font-arabic, 'Noto Sans Arabic', 'Segoe UI', sans-serif);
  letter-spacing: 0;
  text-transform: none;
}

/* ── Step title: "Setup" ── */
.go-live-section .steps-grid .impl-step h4,
.go-live-section .steps-grid .impl-step .impl-step-title {
  font-family: 'Neue Haas Grotesk Display', 'Helvetica Neue', Arial, sans-serif;
  margin: 0 0 var(--s-2, 8px);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink, #0A0F1E);
  letter-spacing: -0.015em;
  line-height: 1.1;
  display: block;   /* not flex — it's its own line */
}

html[dir="rtl"] .go-live-section .steps-grid .impl-step h4 {
  font-family: var(--font-arabic, 'Noto Sans Arabic', 'Segoe UI', sans-serif);
  letter-spacing: 0;
}

/* ── Step body ── */
.go-live-section .steps-grid .impl-step p {
  font-family: 'Neue Haas Grotesk Display', 'Helvetica Neue', Arial, sans-serif;
  flex: 1;
  color: var(--ink-mid, #4B5068);
  line-height: 1.45;
  margin: 0;
  font-size: var(--text-small, 16px);
  font-weight: 500;
  overflow: hidden;
}

html[dir="rtl"] .go-live-section .steps-grid .impl-step p {
  font-family: var(--font-arabic, 'Noto Sans Arabic', 'Segoe UI', sans-serif);
  line-height: 1.7;
}

/* ── Mobile: drop aspect-ratio so cards don't become tiny squares ── */
@media (max-width: 900px) {
  .go-live-section .steps-grid .impl-step {
    aspect-ratio: auto;
    min-height: 0;
  }
}

/* ── Reduced motion: skip all transitions, show borders + arrows immediately ── */
@media (prefers-reduced-motion: reduce) {
  .go-live-section .steps-grid .impl-step,
  .go-live-section .steps-grid.in .impl-step {
    transition: none;
  }
  .go-live-section .step-arrow svg line,
  .go-live-section .step-arrow svg polyline {
    transition: none;
    stroke-dashoffset: 0;
  }
  .go-live-section .steps-grid .impl-step::before {
    width: 100%;
    transition: none;
  }
}
/* ── Arabic RTL font override (auto) ────────────────────────────── */
html[dir="rtl"] .go-live-section .section-head h2,
html[dir="rtl"] .go-live-section .section-head p,
html[dir="rtl"] .go-live-section .steps-grid .impl-step .impl-step-title {
  font-family: 'Noto Sans Arabic', 'Segoe UI', sans-serif !important;
}