/* ==========================================================================
   THEME 6 — "Friendly Rounded"  (generated base: points2.css with re-mapped tokens)
   Palette: purple #5A2D82 · mint #6FD6A8 · lavender #F7F5FB. No red, no black.
   The hand-written design layer is appended below the base.
   ⚠ GENERATED FILE — do not edit here. Edit scripts/theme6/<this file name> (design layer)
     then run:  node scripts/build_theme6_base.js   (and bump ASSET_VERSION before deploying)
   ========================================================================== */
/* ============================================
   POINTS — THEME 2: OBSIDIAN GOLD (LIGHT)
   ============================================ */

:root {
  /* ===============================
     POINTS COLORS (OBSIDIAN GOLD)
  =============================== */
  --ebpt20-section-background-color: #F7F5FB;

  --ebpt20-badge-background-color: rgba(90, 45, 130, 0.08);
  --ebpt20-badge-border-color: rgba(90, 45, 130, 0.2);
  --ebpt20-badge-text-color: #5A2D82;

  --ebpt20-title-text-color: #34184F;
  --ebpt20-title-highlight-text-color: #6FD6A8;
  --ebpt20-subtitle-text-color: #3D2C54;

  --ebpt20-timeline-line-color: linear-gradient(90deg, rgba(90, 45, 130, 0.1) 0%, #5A2D82 50%, rgba(90, 45, 130, 0.1) 100%);

  --ebpt20-card-background-color: #FFFFFF;
  --ebpt20-card-border-color: #ECE6F5;
  --ebpt20-card-hover-border-color: #5A2D82;

  --ebpt20-card-icon-background-color: #FFFFFF;
  --ebpt20-card-icon-border-color: #6FD6A8;
  --ebpt20-card-icon-color: #6FD6A8;
  --ebpt20-card-icon-hover-background-color: #6FD6A8;
  --ebpt20-card-icon-hover-color: #FFFFFF;

  --ebpt20-card-number-background-color: #34184F;
  --ebpt20-card-number-text-color: #FFFFFF;

  --ebpt20-card-title-text-color: #34184F;
  --ebpt20-card-description-text-color: #3D2C54;

  /* TYPOGRAPHY */
  --ebpt20-badge-font-size: 0.8rem;
  --ebpt20-badge-font-weight: 700;
  --ebpt20-badge-letter-spacing: 0.05em;
  --ebpt20-title-font-size: 2.5rem;
  --ebpt20-title-font-weight: 700;
  --ebpt20-title-line-height: 1.2;
  --ebpt20-subtitle-font-size: 1.05rem;
  --ebpt20-subtitle-line-height: 1.7;
  --ebpt20-card-icon-font-size: 1.8rem;
  --ebpt20-card-number-font-size: 0.75rem;
  --ebpt20-card-number-font-weight: 700;
  --ebpt20-card-number-letter-spacing: 0.05em;
  --ebpt20-card-title-font-size: 1.15rem;
  --ebpt20-card-title-font-weight: 700;
  --ebpt20-card-description-font-size: 0.9rem;
  --ebpt20-card-description-line-height: 1.6;

  /* SPACING */
  --ebpt20-section-padding-block: 3.5rem;
  --ebpt20-container-padding-inline: 2rem;
  --ebpt20-header-gap: 1rem;
  --ebpt20-header-margin-bottom: 2.25rem;
  --ebpt20-badge-gap: 0.5rem;
  --ebpt20-badge-padding-block: 0.5rem;
  --ebpt20-badge-padding-inline: 1.25rem;
  --ebpt20-card-body-gap: 0.75rem;
  --ebpt20-card-number-padding: 0.25rem 0.75rem;

  /* LAYOUT */
  --ebpt20-container-max-width: 1100px;
  --ebpt20-container-z-index: 2;
  --ebpt20-header-max-width: 700px;
  --ebpt20-card-flex: 1;
  --ebpt20-card-z-index: 2;

  /* GRID */
  --ebpt20-card-grid-template-columns-tablet: minmax(0, 1fr) auto;
  --ebpt20-card-header-grid-column-tablet: 2;
  --ebpt20-card-header-grid-row-tablet: 1;
  --ebpt20-card-title-grid-column-tablet: 1;
  --ebpt20-card-title-grid-row-tablet: 1;
  --ebpt20-card-description-grid-column-tablet: 1 / -1;
  --ebpt20-card-description-grid-row-tablet: 2;

  /* TIMELINE */
  --ebpt20-timeline-z-index: 1;

  /* CARD */
  --ebpt20-card-number-top: -10px;
  --ebpt20-card-number-right: -10px;

  /* ICON */
  --ebpt20-card-icon-size: 80px;
  --ebpt20-card-icon-border-width: 1px;
  --ebpt20-card-icon-radius: 50%;

  /* BORDER */
  --ebpt20-radius: 0px;
  --ebpt20-card-border-width: 1px;
  --ebpt20-badge-border-width: 1px;
  --ebpt20-card-number-border-radius: 0px;

  /* SHADOW */
  --ebpt20-card-shadow: 0 8px 24px rgba(90, 45, 130, 0.060);
  --ebpt20-card-hover-shadow: 0 12px 30px rgba(90, 45, 130, 0.072);
  --ebpt20-card-icon-shadow: 0 0 15px rgba(90, 45, 130, 0.135);
  --ebpt20-card-icon-hover-shadow: 0 0 25px rgba(90, 45, 130, 0.220);

  /* ANIMATION */
  --ebpt20-ease: cubic-bezier(0.25, 1, 0.5, 1);
  --ebpt20-duration-fast: 0.3s;
  --ebpt20-duration-base: 0.4s;
  --ebpt20-duration-reveal: 0.8s;
  --ebpt20-card-transition: transform var(--ebpt20-duration-base) var(--ebpt20-ease), border-color var(--ebpt20-duration-base) var(--ebpt20-ease), box-shadow var(--ebpt20-duration-base) var(--ebpt20-ease);
  --ebpt20-card-icon-transition: all var(--ebpt20-duration-fast) var(--ebpt20-ease);
  --ebpt20-card-hover-transform: translateY(-6px);
  --ebpt20-animation-distance: 30px;
  --ebpt20-animation-opacity-from: 0;
  --ebpt20-animation-opacity-to: 1;
  --ebpt20-animation-transition: opacity var(--ebpt20-duration-reveal) var(--ebpt20-ease), transform var(--ebpt20-duration-reveal) var(--ebpt20-ease);
  --ebpt20-delay-1: 0.1s;
  --ebpt20-delay-2: 0.25s;
  --ebpt20-delay-3: 0.4s;
  --ebpt20-delay-4: 0.55s;

  /* RESPONSIVE */
  --ebpt20-timeline-gap-desktop: 1.5rem;
  --ebpt20-timeline-gap-tablet: 3rem;
  --ebpt20-timeline-top-desktop: 40px;
  --ebpt20-timeline-top-tablet: 5%;
  --ebpt20-timeline-bottom-tablet: 5%;
  --ebpt20-timeline-left-desktop: 5%;
  --ebpt20-timeline-left-tablet: 40px;
  --ebpt20-timeline-right-desktop: 5%;
  --ebpt20-timeline-width-tablet: 2px;
  --ebpt20-timeline-height-desktop: 2px;
  --ebpt20-timeline-height-tablet: 90%;
  --ebpt20-card-padding-desktop: 2.5rem 1.5rem;
  --ebpt20-card-padding-tablet: 2.5rem;
  --ebpt20-card-padding-mobile: 1.5rem;
  --ebpt20-card-gap-tablet: 1.5rem;
  --ebpt20-card-gap-mobile: 1rem 1.25rem;
  --ebpt20-card-header-margin-bottom-desktop: 1.5rem;
  --ebpt20-card-header-margin-bottom-tablet: 0;
}

.ebpt20-section {
  position: relative;
  background-color: var(--ebpt20-section-background-color);
  padding: var(--ebpt20-section-padding-block) 0;
  overflow: hidden;
}

.ebpt20-container {
  position: relative;
  z-index: var(--ebpt20-container-z-index);
  width: 100%;
  max-width: var(--ebpt20-container-max-width);
  padding: 0 var(--ebpt20-container-padding-inline);
  margin: 0 auto;
}

/* Header */
.ebpt20-header {
  text-align: center;
  max-width: var(--ebpt20-header-max-width);
  margin: 0 auto var(--ebpt20-header-margin-bottom) auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ebpt20-header-gap);
}

.ebpt20-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ebpt20-badge-gap);
  background: var(--ebpt20-badge-background-color);
  border: var(--ebpt20-badge-border-width) solid var(--ebpt20-badge-border-color);
  color: var(--ebpt20-badge-text-color);
  padding: var(--ebpt20-badge-padding-block) var(--ebpt20-badge-padding-inline);
  font-size: var(--ebpt20-badge-font-size);
  font-weight: var(--ebpt20-badge-font-weight);
  letter-spacing: var(--ebpt20-badge-letter-spacing);
}

.ebpt20-title {
  font-size: var(--ebpt20-title-font-size);
  font-weight: var(--ebpt20-title-font-weight);
  color: var(--ebpt20-title-text-color);
  line-height: var(--ebpt20-title-line-height);
  font-family: "El Messiri", sans-serif;
}

.ebpt20-title-highlight {
  color: var(--ebpt20-title-highlight-text-color);
}

.ebpt20-subtitle {
  font-size: var(--ebpt20-subtitle-font-size);
  color: var(--ebpt20-subtitle-text-color);
  line-height: var(--ebpt20-subtitle-line-height);
}

/* Timeline Layout wrapper */
.ebpt20-steps-wrapper {
  display: flex;
  justify-content: space-between;
  position: relative;
  gap: var(--ebpt20-timeline-gap-desktop);
}

/* Desktop Connecting Timeline Line */
.ebpt20-steps-wrapper::before {
  content: '';
  position: absolute;
  top: var(--ebpt20-timeline-top-desktop);
  left: var(--ebpt20-timeline-left-desktop);
  right: var(--ebpt20-timeline-right-desktop);
  height: var(--ebpt20-timeline-height-desktop);
  background: var(--ebpt20-timeline-line-color);
  z-index: var(--ebpt20-timeline-z-index);
}

@media (max-width: 1024px) {
  .ebpt20-steps-wrapper {
    flex-direction: column;
    gap: var(--ebpt20-timeline-gap-tablet);
  }
  .ebpt20-steps-wrapper::before {
    top: var(--ebpt20-timeline-top-tablet);
    bottom: var(--ebpt20-timeline-bottom-tablet);
    left: var(--ebpt20-timeline-left-tablet);
    right: auto;
    width: var(--ebpt20-timeline-width-tablet);
    height: var(--ebpt20-timeline-height-tablet);
  }
}

/* Step Card */
.ebpt20-step-card {
  flex: var(--ebpt20-card-flex);
  background: var(--ebpt20-card-background-color);
  border: var(--ebpt20-card-border-width) solid var(--ebpt20-card-border-color);
  border-radius: var(--ebpt20-radius);
  padding: var(--ebpt20-card-padding-desktop);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: var(--ebpt20-card-z-index);
  box-shadow: var(--ebpt20-card-shadow);
  transition: var(--ebpt20-card-transition);
}

@media (max-width: 1024px) {
  .ebpt20-step-card {
    display: grid;
    grid-template-columns: var(--ebpt20-card-grid-template-columns-tablet);
    text-align: right;
    align-items: center;
    padding: var(--ebpt20-card-padding-tablet);
    gap: var(--ebpt20-card-gap-tablet);
  }
}

@media (max-width: 480px) {
  .ebpt20-step-card {
    padding: var(--ebpt20-card-padding-mobile);
    gap: var(--ebpt20-card-gap-mobile);
  }
}

.ebpt20-step-card:hover {
  transform: var(--ebpt20-card-hover-transform);
  border-color: var(--ebpt20-card-hover-border-color);
  box-shadow: var(--ebpt20-card-hover-shadow);
}

/* Step Header */
.ebpt20-step-header {
  position: relative;
  margin-bottom: var(--ebpt20-card-header-margin-bottom-desktop);
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (max-width: 1024px) {
  .ebpt20-step-header {
    grid-column: var(--ebpt20-card-header-grid-column-tablet);
    grid-row: var(--ebpt20-card-header-grid-row-tablet);
    margin-bottom: var(--ebpt20-card-header-margin-bottom-tablet);
  }
}

/* Step Icon container */
.ebpt20-step-icon {
  width: var(--ebpt20-card-icon-size);
  height: var(--ebpt20-card-icon-size);
  border-radius: var(--ebpt20-card-icon-radius);
  background: var(--ebpt20-card-icon-background-color);
  border: var(--ebpt20-card-icon-border-width) solid var(--ebpt20-card-icon-border-color);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--ebpt20-card-icon-font-size);
  color: var(--ebpt20-card-icon-color);
  box-shadow: var(--ebpt20-card-icon-shadow);
  transition: var(--ebpt20-card-icon-transition);
}

.ebpt20-step-card:hover .ebpt20-step-icon {
  background: var(--ebpt20-card-icon-hover-background-color);
  color: var(--ebpt20-card-icon-hover-color);
  box-shadow: var(--ebpt20-card-icon-hover-shadow);
}

/* Step Number indicator */
.ebpt20-step-number {
  position: absolute;
  top: var(--ebpt20-card-number-top);
  right: var(--ebpt20-card-number-right);
  background: var(--ebpt20-card-number-background-color);
  color: var(--ebpt20-card-number-text-color);
  font-weight: var(--ebpt20-card-number-font-weight);
  font-size: var(--ebpt20-card-number-font-size);
  padding: var(--ebpt20-card-number-padding);
  border-radius: var(--ebpt20-card-number-border-radius);
  letter-spacing: var(--ebpt20-card-number-letter-spacing);
}

/* Step Body */
.ebpt20-step-body {
  display: flex;
  flex-direction: column;
  gap: var(--ebpt20-card-body-gap);
}

@media (max-width: 1024px) {
  .ebpt20-step-body {
    display: contents;
  }
}

.ebpt20-step-title {
  font-size: var(--ebpt20-card-title-font-size);
  font-weight: var(--ebpt20-card-title-font-weight);
  color: var(--ebpt20-card-title-text-color);
  font-family: "El Messiri", sans-serif;
}

@media (max-width: 1024px) {
  .ebpt20-step-title {
    grid-column: var(--ebpt20-card-title-grid-column-tablet);
    grid-row: var(--ebpt20-card-title-grid-row-tablet);
    align-self: center;
  }
}

.ebpt20-step-desc {
  font-size: var(--ebpt20-card-description-font-size);
  color: var(--ebpt20-card-description-text-color);
  line-height: var(--ebpt20-card-description-line-height);
}

@media (max-width: 1024px) {
  .ebpt20-step-desc {
    grid-column: var(--ebpt20-card-description-grid-column-tablet);
    grid-row: var(--ebpt20-card-description-grid-row-tablet);
  }
}

/* Animations */
.ebpt20-anim-up {
  opacity: var(--ebpt20-animation-opacity-from);
  transform: translateY(var(--ebpt20-animation-distance));
  transition: var(--ebpt20-animation-transition);
}

.ebpt20-anim-up.ebpt20-visible {
  opacity: var(--ebpt20-animation-opacity-to);
  transform: translateY(0);
}

.ebpt20-delay-1 { transition-delay: var(--ebpt20-delay-1); }
.ebpt20-delay-2 { transition-delay: var(--ebpt20-delay-2); }
.ebpt20-delay-3 { transition-delay: var(--ebpt20-delay-3); }
.ebpt20-delay-4 { transition-delay: var(--ebpt20-delay-4); }

/* ===============================
   MOBILE RESPONSIVE (768px & 380px)
=============================== */
@media (max-width: 768px) {
  .ebpt20-section {
    padding: 1.75rem 0 !important;
  }
  .ebpt20-header {
    margin-bottom: 1.25rem !important;
    padding: 0 0.75rem !important;
    gap: 0.65rem !important;
  }
  .ebpt20-title {
    font-size: 1.75rem !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
  }
  .ebpt20-subtitle {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
  }
  .ebpt20-badge {
    font-size: 0.78rem !important;
    padding: 0.4rem 0.95rem !important;
  }
  .ebpt20-container {
    padding: 0 0.75rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .ebpt20-steps-wrapper {
    flex-direction: column !important;
    gap: 1.25rem !important;
    width: 100% !important;
  }
  .ebpt20-steps-wrapper::before {
    display: none !important;
  }
  .ebpt20-step-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 1.25rem 1rem !important;
    gap: 0.75rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .ebpt20-step-header {
    margin-bottom: 0.25rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .ebpt20-step-icon {
    width: 60px !important;
    height: 60px !important;
    font-size: 1.4rem !important;
  }
  .ebpt20-step-number {
    font-size: 0.72rem !important;
    padding: 0.2rem 0.55rem !important;
    top: -6px !important;
    right: -6px !important;
  }
  .ebpt20-step-body {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.4rem !important;
    width: 100% !important;
  }
  .ebpt20-step-title {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
  }
  .ebpt20-step-desc {
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
    margin: 0 !important;
  }
}

@media (max-width: 380px) {
  .ebpt20-title {
    font-size: 1.5rem !important;
  }
  .ebpt20-subtitle {
    font-size: 0.88rem !important;
  }
  .ebpt20-step-title {
    font-size: 1.05rem !important;
  }
  .ebpt20-step-desc {
    font-size: 0.82rem !important;
  }
  .ebpt20-step-card {
    padding: 1rem 0.85rem !important;
  }
}


/* === MOBILE-COMPACT DISTRIBUTED: POINTS 480 === */
@media (max-width: 480px) {
  .ebpt20-container {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    padding-inline: 0.75rem !important;
  }
}


/* === MOBILE-COMPACT DISTRIBUTED: POINTS 380 === */
@media (max-width: 380px) {
  .ebpt20-container {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    padding-inline: 0.5rem !important;
  }
}


/* === MOBILE-COMPACT DISTRIBUTED: POINTS 768 INLINE FIX === */
@media (max-width: 768px) {
  .ebpt20-container {
    padding-inline: 0.75rem !important;
  }
}


/* ==========================================================================
   THEME 6 — STEPS / POINTS: "Bubble Timeline"
   A soft dotted line; each step is a speech bubble with a small tail toward the
   line and a purple number bubble on the line. Bubbles alternate their offset.
   ========================================================================== */
body.theme-6 .ebpt20-section {
  background: var(--t6-lavender);
  position: relative;
  overflow: hidden;
  padding-block: 120px 120px;
}
/* waves in from / out to white neighbours */
body.theme-6 .ebpt20-section::before,
body.theme-6 .ebpt20-section::after {
  content: "";
  position: absolute; inset-inline: 0; height: 60px; z-index: 1; pointer-events: none;
  background-size: 100% 100%; background-repeat: no-repeat;
}
body.theme-6 .ebpt20-section::before {
  top: -1px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L1440 0 L1440 24 C 1180 60 960 4 720 28 C 480 52 240 2 0 30 Z' fill='%23ffffff'/%3E%3C/svg%3E");
}
body.theme-6 .ebpt20-section::after {
  bottom: -1px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 34 C 260 0 480 58 720 30 C 960 2 1200 56 1440 30 L1440 60 L0 60 Z' fill='%23ffffff'/%3E%3C/svg%3E");
}
body.theme-6 .ebpt20-line-decor { display: none; }

body.theme-6 .ebpt20-badge {
  background: #fff; color: var(--t6-purple);
  border: 0; border-radius: 999px; font-weight: 700; padding: 6px 16px;
  box-shadow: var(--t6-shadow-sm);
}
body.theme-6 .ebpt20-title { color: var(--t6-purple-deep); font-weight: 800; }
body.theme-6 .ebpt20-title-highlight { color: var(--t6-purple); }
body.theme-6 .ebpt20-subtitle { color: var(--t6-muted); }

/* the timeline */
body.theme-6 .ebpt20-steps-wrapper {
  display: flex !important;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 26px;
  max-width: 860px;
  margin-inline: auto;
  position: relative;
  padding-inline-start: 78px;
}
body.theme-6 .ebpt20-steps-wrapper::before {
  content: "";
  display: block;
  position: absolute;
  top: 10px; bottom: 10px;
  inset-inline-start: 30px;
  left: auto; right: auto;
  width: 0;
  height: auto;
  background: none;
  border-inline-start: 3px dotted rgba(90, 45, 130, .35);
  transform: none;
}
body.theme-6.lang-ar .ebpt20-steps-wrapper::before { right: 30px; left: auto; }
body.theme-6.lang-en .ebpt20-steps-wrapper::before { left: 30px; right: auto; }

/* each step = speech bubble */
body.theme-6 .ebpt20-step-card {
  flex: none;
  width: auto;
  max-width: none;
  position: relative;
  background: #fff;
  border: 0;
  border-radius: 1.75rem;
  box-shadow: var(--t6-shadow);
  padding: 20px 24px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 16px;
  text-align: start;
  transition: transform .4s var(--t6-ease), box-shadow .3s ease;
}
body.theme-6 .ebpt20-step-card:nth-child(even) { margin-inline-start: 34px; }
body.theme-6 .ebpt20-step-card:hover { transform: translateY(-0.25rem); box-shadow: var(--t6-shadow-lg); }
/* bubble tail pointing at the line */
body.theme-6 .ebpt20-step-card::before {
  content: "";
  position: absolute;
  top: 26px;
  inset-inline-start: -9px;
  width: 20px; height: 20px;
  background: #fff;
  border-radius: 4px;
  transform: rotate(45deg);
  box-shadow: none;
}
body.theme-6 .ebpt20-step-card::after { display: none; }

body.theme-6 .ebpt20-step-header { display: contents; }
/* number bubble sitting on the dotted line */
body.theme-6 .ebpt20-step-number {
  position: absolute;
  top: 14px;
  inset-inline-start: -78px;
  left: auto; right: auto;
  width: 50px; height: 50px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--t6-purple);
  color: #fff;
  font-weight: 800; font-size: 1.1rem;
  border: 5px solid var(--t6-lavender);
  box-shadow: 0 8px 18px -6px rgba(90, 45, 130, .6);
  opacity: 1;
  -webkit-text-stroke: 0;
}
body.theme-6 .ebpt20-step-card:nth-child(even) .ebpt20-step-number { inset-inline-start: -112px; }
body.theme-6.lang-ar .ebpt20-step-number { right: -78px; left: auto; }
body.theme-6.lang-ar .ebpt20-step-card:nth-child(even) .ebpt20-step-number { right: -112px; }
body.theme-6.lang-en .ebpt20-step-number { left: -78px; right: auto; }
body.theme-6.lang-en .ebpt20-step-card:nth-child(even) .ebpt20-step-number { left: -112px; }

/* icon in a small mint blob */
body.theme-6 .ebpt20-step-icon {
  width: 52px; height: 52px;
  border-radius: 58% 42% 55% 45% / 50% 58% 42% 50%;
  background: var(--t6-mint-soft);
  color: var(--t6-purple);
  font-size: 20px;
  box-shadow: none;
  border: 0;
  transition: transform .4s var(--t6-ease), background .3s ease;
}
body.theme-6 .ebpt20-step-card:hover .ebpt20-step-icon { transform: scale(1.1); background: var(--t6-mint); }
body.theme-6 .ebpt20-step-body { padding: 0; }
body.theme-6 .ebpt20-step-title { color: var(--t6-purple-deep); font-weight: 800; margin: 2px 0 6px; }
body.theme-6 .ebpt20-step-desc { color: var(--t6-muted); line-height: 1.8; margin: 0; }

/* ---------- phones: a clean stacked flow (no side line, no tails) ----------
   theme 2 styles this range with !important, so these do too */
@media (max-width: 768px) {
  body.theme-6 .ebpt20-section { padding-block: 90px !important; }
  body.theme-6 .ebpt20-steps-wrapper { padding-inline-start: 0 !important; gap: 26px !important; max-width: 520px; }
  body.theme-6 .ebpt20-steps-wrapper::before { display: none !important; }
  body.theme-6 .ebpt20-step-card,
  body.theme-6 .ebpt20-step-card:nth-child(even) {
    margin-inline-start: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 26px 20px 22px !important;
    gap: 12px !important;
    border-radius: 1.75rem !important;
  }
  body.theme-6 .ebpt20-step-card::before { display: none !important; }
  /* short dotted connector to the next step */
  body.theme-6 .ebpt20-step-card:not(:last-child)::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    bottom: -24px; left: 50%; right: auto;
    width: 0; height: 22px;
    border-inline-start: 3px dotted rgba(90, 45, 130, .35);
    transform: translateX(-50%);
    background: none; box-shadow: none;
  }
  body.theme-6 .ebpt20-step-header { display: flex !important; position: relative !important; margin: 0 !important; }
  body.theme-6 .ebpt20-step-icon { width: 64px !important; height: 60px !important; font-size: 1.4rem !important; }
  /* number = small purple badge on the icon corner */
  body.theme-6 .ebpt20-step-number,
  body.theme-6.lang-ar .ebpt20-step-number,
  body.theme-6.lang-en .ebpt20-step-number,
  body.theme-6.lang-ar .ebpt20-step-card:nth-child(even) .ebpt20-step-number,
  body.theme-6.lang-en .ebpt20-step-card:nth-child(even) .ebpt20-step-number {
    position: absolute !important;
    top: -8px !important; bottom: auto !important;
    right: -12px !important; left: auto !important;
    width: 30px !important; height: 30px !important;
    padding: 0 !important;
    font-size: .78rem !important;
    border-width: 3px !important;
    border-color: #fff !important;
  }
  body.theme-6.lang-en .ebpt20-step-number,
  body.theme-6.lang-en .ebpt20-step-card:nth-child(even) .ebpt20-step-number { left: -12px !important; right: auto !important; }
  body.theme-6 .ebpt20-step-body { align-items: center !important; }
}