/* ── Google Fonts ── */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@700;800&display=swap");
:root {
  /* Brand colours */
  --dfm-color-orange: #f97316;
  --dfm-color-orange-dark: #ea580c;
  --dfm-color-orange-light: #fb923c;

  /* Backgrounds */
  --dfm-bg-white: #ffffff;
  --dfm-bg-light: #f7f7f7;

  /* Text */
  --dfm-text-primary: #1a1a2e;
  --dfm-text-secondary: #555555;
  --dfm-text-muted: #888888;
  --dfm-text-faint: #bbbbbb;

  /* Border */
  --dfm-border-default: #e8e6e0;

  /* Status */
  --dfm-color-success: #22c55e;
  --dfm-color-danger: #ef4444;
}

/* ══════════════════════════════════════════════════
   RESET & BASE
   ══════════════════════════════════════════════════ */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Outfit", sans-serif;
  background: var(--dfm-bg-white);
  color: var(--dfm-text-primary);
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

/* ══════════════════════════════════════════════════
   IMAGES — global defaults
   ══════════════════════════════════════════════════ */
img.img-fluid {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ══════════════════════════════════════════════════
   LAYOUT — Section wrappers
   ══════════════════════════════════════════════════ */
.dfm-section {
  padding: 90px 0;
}

.dfm-section--light {
  padding: 90px 0;
  background: var(--dfm-bg-light);
  border-top: 1px solid var(--dfm-border-default);
  border-bottom: 1px solid var(--dfm-border-default);
}

.dfm-section--center {
  padding: 90px 0 70px;
  text-align: center;
}

/* ══════════════════════════════════════════════════
   TYPOGRAPHY — Shared labels / headings
   ══════════════════════════════════════════════════ */
.dfm-section__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--dfm-color-orange);
  margin-bottom: 12px;
}

.dfm-section__title {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1.5px;
  margin-bottom: 16px;
  color: var(--dfm-text-primary);
}

.dfm-section__title--center {
  margin: 0 auto 6px;
  text-align: center;
}

.dfm-section__desc {
  font-size: 16px;
  color: var(--dfm-text-secondary);
  line-height: 1.65;
  max-width: 580px;
}

.dfm-section__desc--center {
  margin: 0 auto;
  text-align: center;
}

/* ══════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════ */
.dfm-btn-group {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.dfm-feb-btn {
  display: flex;
  justify-content: center;
  gap: 16px;
  align-items: center;
}

.dfm-btn--primary {
  padding: 12px 24px;
  background: linear-gradient(
    135deg,
    var(--dfm-color-orange),
    var(--dfm-color-orange-dark)
  );
  color: #fff;
  border: none;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(249, 115, 22, 0.3);
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.2s;
  height: 52px;
  line-height: normal;
}

.dfm-btn--primary:hover {
  opacity: 0.9;
  color: #fff;
}

.dfm-btn--secondary {
  padding: 13px 30px;
  background: rgba(0, 0, 0, 0.03);
  border: 1.5px solid #ddd;
  color: #555;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s;
}

.dfm-btn--secondary:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #555;
}

/* ══════════════════════════════════════════════════
   HERO SECTION
   ══════════════════════════════════════════════════ */
.dfm-hero {
  padding: 120px 0 80px;
  position: relative;
  text-align: center;
}

.dfm-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 80% 50% at 50% 20%,
    rgba(249, 115, 22, 0.08),
    transparent
  );
  pointer-events: none;
}

.dfm-hero .container {
  position: relative;
  z-index: 2;
}

/* Hero Badge */
.dfm-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 18px;
  background: rgba(249, 115, 22, 0.08);
  border: 1px solid rgba(249, 115, 22, 0.2);
  border-radius: 100px;
  margin-bottom: 24px;
}

.dfm-hero__badge-dot {
  width: 7px;
  height: 7px;
  background: var(--dfm-color-orange);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--dfm-color-orange);
  animation: dfm-pulse 2s ease-in-out infinite;
}

@keyframes dfm-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(1.3);
  }
}

.dfm-hero__badge-text {
  font-size: 11px;
  font-weight: 700;
  color: var(--dfm-color-orange-dark);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* Hero Heading */
.dfm-hero__title {
  font-size: 56px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -2.5px;
  margin-bottom: 6px;
  color: var(--dfm-text-primary);
}

.dfm-hero__title-accent {
  color: var(--dfm-color-orange);
}

.dfm-hero__subtitle {
  font-size: 18px;
  color: var(--dfm-text-secondary);
  line-height: 1.5;
  max-width: 660px;
  margin: 0 auto 32px;
}

.dfm-hero__subtitle strong {
  color: var(--dfm-text-primary);
  font-weight: 600;
}

/* ══════════════════════════════════════════════════
   HERO — STATS STRIP
   ══════════════════════════════════════════════════ */
.dfm-stats {
  display: flex;
  justify-content: center;
  gap: 44px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.dfm-stat__value {
  font-size: 42px;
  font-weight: 900;
  color: var(--dfm-color-orange);
  letter-spacing: -2px;
}

.dfm-stat__label {
  font-size: 11px;
  color: var(--dfm-text-muted);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 2px;
}

/* ══════════════════════════════════════════════════
   HERO — COMPLIANCE BADGES
   ══════════════════════════════════════════════════ */
.dfm-compliance {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.dfm-compliance__badge {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid var(--dfm-border-default);
  border-radius: 5px;
}

.dfm-compliance__check {
  color: var(--dfm-color-orange);
  font-size: 10px;
  font-weight: 800;
}

.dfm-compliance__text {
  font-size: 10px;
  color: var(--dfm-text-muted);
  font-weight: 600;
}

/* ══════════════════════════════════════════════════
   INDUSTRIES SECTION
   ══════════════════════════════════════════════════ */
.dfm-industries {
  background: var(--dfm-bg-light);
  border-top: 1px solid var(--dfm-border-default);
  border-bottom: 1px solid var(--dfm-border-default);
  padding: 90px 0;
}

.dfm-industry-card {
  padding: 24px 16px;
  background: #fff;
  border: 1px solid var(--dfm-border-default);
  border-radius: 12px;
  text-align: center;
  transition: all 0.3s;
  height: 100%;
}

.dfm-industry-card:hover {
  border-color: rgba(249, 115, 22, 0.3);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

.dfm-industry-card__icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.dfm-industry-card__name {
  font-size: 12px;
  font-weight: 600;
  color: var(--dfm-text-secondary);
  margin-bottom: 4px;
}

.dfm-industry-card__use {
  font-size: 10px;
  color: var(--dfm-text-muted);
  line-height: 1.4;
}

/* ══════════════════════════════════════════════════
   WHY DFM — COMPARISON CARDS
   ══════════════════════════════════════════════════ */
.dfm-compare-card {
  padding: 24px;
  border-radius: 13px;
  border: 1px solid;
  height: 100%;
}

.dfm-compare-card--bad {
  background: rgba(239, 68, 68, 0.04);
  border-color: rgba(239, 68, 68, 0.15);
}

.dfm-compare-card--good {
  background: rgba(34, 197, 94, 0.04);
  border-color: rgba(34, 197, 94, 0.15);
}

.dfm-compare-card__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.dfm-compare-card--bad .dfm-compare-card__label {
  color: var(--dfm-color-danger);
}

.dfm-compare-card--good .dfm-compare-card__label {
  color: var(--dfm-color-success);
}

.dfm-compare-card__list {
  list-style: none;
  padding: 0;
}

.dfm-compare-card__list li {
  font-size: 13px;
  color: var(--dfm-text-secondary);
  padding: 7px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.5;
}

.dfm-compare-card__list li:last-child {
  border-bottom: none;
}

/* ══════════════════════════════════════════════════
   NINJA FEATURES SECTION
   ══════════════════════════════════════════════════ */
.dfm-features {
  background: var(--dfm-bg-light);
  border-top: 1px solid var(--dfm-border-default);
  border-bottom: 1px solid var(--dfm-border-default);
  padding: 90px 0;
}

.dfm-feature-card {
  padding: 28px 24px;
  background: #fff;
  border: 1px solid var(--dfm-border-default);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s;
  -webkit-tap-highlight-color: transparent;
  height: 100%;
}

.dfm-feature-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--dfm-color-orange),
    var(--dfm-color-orange-light)
  );
  opacity: 0;
  transition: opacity 0.3s;
}

.dfm-feature-card:hover::before,
.dfm-feature-card.is-open::before {
  opacity: 1;
}

.dfm-feature-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.dfm-feature-card.is-open {
  border-color: var(--dfm-color-orange);
  background: rgba(249, 115, 22, 0.03);
}

.dfm-feature-card__num {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(249, 115, 22, 0.08);
  border: 1px solid rgba(249, 115, 22, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 800;
  color: var(--dfm-color-orange);
  margin-bottom: 14px;
}

.dfm-feature-card__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--dfm-text-primary);
  margin-bottom: 6px;
}

.dfm-feature-card__hint {
  font-size: 11px;
  color: var(--dfm-color-orange);
  font-weight: 600;
  margin-top: 8px;
  transition: all 0.3s;
}

.dfm-feature-card.is-open .dfm-feature-card__hint {
  opacity: 0;
  height: 0;
  margin: 0;
  overflow: hidden;
}

.dfm-feature-card__desc {
  font-size: 12.5px;
  color: var(--dfm-text-muted);
  line-height: 1.55;
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.4s ease,
    opacity 0.3s,
    margin 0.3s;
  opacity: 0;
  margin-top: 0;
}

.dfm-feature-card.is-open .dfm-feature-card__desc {
  max-height: 200px;
  opacity: 1;
  margin-top: 8px;
}

/* ══════════════════════════════════════════════════
   EVERYTHING SECTION — Icon grid
   ══════════════════════════════════════════════════ */
.dfm-everything-card {
  padding: 18px;
  background: #fff;
  border: 1px solid var(--dfm-border-default);
  border-radius: 11px;
  text-align: center;
  transition: all 0.3s;
  height: 100%;
}

.dfm-everything-card:hover {
  border-color: rgba(249, 115, 22, 0.3);
  background: rgba(249, 115, 22, 0.03);
}

.dfm-everything-card__icon {
  font-size: 24px;
  margin-bottom: 8px;
}

.dfm-everything-card__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--dfm-text-secondary);
}

/* ══════════════════════════════════════════════════
   PROMPTS SECTION
   ══════════════════════════════════════════════════ */
.dfm-prompts {
  text-align: center;
  background: var(--dfm-bg-light);
  border-top: 1px solid var(--dfm-border-default);
  border-bottom: 1px solid var(--dfm-border-default);
  padding: 90px 0;
}

.dfm-prompt-box {
  max-width: 680px;
  margin: 36px auto 0;
  background: #fff;
  border: 1px solid rgba(249, 115, 22, 0.2);
  border-radius: 14px;
  padding: 28px 36px;
  text-align: left;
}

.dfm-prompt-box__label {
  font-size: 10px;
  color: var(--dfm-text-muted);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.dfm-prompt-box__list {
  list-style: none;
  padding: 0;
}

.dfm-prompt-box__list li {
  font-family: "JetBrains Mono", monospace;
  font-size: 12.5px;
  color: var(--dfm-color-orange-dark);
  padding: 10px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  gap: 10px;
}

.dfm-prompt-box__list li:last-child {
  border-bottom: none;
}

.dfm-prompt-box__chevron {
  color: var(--dfm-color-orange);
  font-weight: 700;
  font-size: 15px;
}

/* ══════════════════════════════════════════════════
   TESTIMONIALS SECTION
   ══════════════════════════════════════════════════ */
.dfm-testimonial-card {
  padding: 28px 24px;
  background: #fff;
  border: 1px solid var(--dfm-border-default);
  border-radius: 14px;
  transition: all 0.3s;
  height: 100%;
}

.dfm-testimonial-card:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
}

.dfm-testimonial-card__quote {
  font-size: 28px;
  color: rgba(249, 115, 22, 0.25);
  font-weight: 900;
  line-height: 1;
  margin-bottom: 6px;
}

.dfm-testimonial-card__text {
  font-size: 13px;
  color: var(--dfm-text-secondary);
  line-height: 1.7;
  margin-bottom: 16px;
  font-style: italic;
}

.dfm-testimonial-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.dfm-testimonial-card__source {
  font-size: 11px;
  font-weight: 700;
  color: var(--dfm-text-muted);
}

.dfm-testimonial-card__tag {
  font-size: 9px;
  font-weight: 600;
  color: var(--dfm-color-orange);
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 9px;
  background: rgba(249, 115, 22, 0.08);
  border-radius: 4px;
}

.dfm-testimonial-card__stats {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--dfm-border-default);
  display: flex;
  gap: 18px;
}

.dfm-testimonial-card__stat-value {
  font-size: 18px;
  font-weight: 800;
  color: var(--dfm-color-orange);
}

.dfm-testimonial-card__stat-label {
  font-size: 9px;
  color: var(--dfm-text-muted);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ══════════════════════════════════════════════════
   BENEFITS SECTION
   ══════════════════════════════════════════════════ */
.dfm-benefit-card {
  padding: 24px;
  background: #fff;
  border: 1px solid var(--dfm-border-default);
  border-radius: 13px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  transition: all 0.3s;
  height: 100%;
}

.dfm-benefit-card:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
}

.dfm-benefit-card__icon {
  font-size: 28px;
  flex-shrink: 0;
}

.dfm-benefit-card__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--dfm-text-primary);
  margin-bottom: 4px;
}

.dfm-benefit-card__desc {
  font-size: 12.5px;
  color: var(--dfm-text-muted);
  line-height: 1.55;
}

/* ══════════════════════════════════════════════════
   ROI BANNER SECTION
   ══════════════════════════════════════════════════ */
.dfm-roi-banner {
  background: linear-gradient(
    135deg,
    var(--dfm-color-orange),
    var(--dfm-color-orange-dark)
  );
  border-radius: 18px;
  padding: 50px;
  display: flex;
  align-items: center;
  gap: 50px;
  margin-top: 40px;
  position: relative;
  overflow: hidden;
}

.dfm-roi-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 20% 50%,
    rgba(255, 255, 255, 0.15),
    transparent 50%
  );
  pointer-events: none;
}

.dfm-roi-banner__number {
  font-size: 90px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -4px;
  line-height: 1;
  position: relative;
  z-index: 2;
  white-space: nowrap;
}

.dfm-roi-banner__content {
  position: relative;
  z-index: 2;
}

.dfm-roi-banner__title {
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 6px;
}

.dfm-roi-banner__desc {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  max-width: 480px;
}

/* ══════════════════════════════════════════════════
   CTA SECTION
   ══════════════════════════════════════════════════ */
.dfm-cta__title {
  font-size: 42px;
  font-weight: 900;
  letter-spacing: -2px;
  margin-bottom: 10px;
  color: var(--dfm-text-primary);
}

.dfm-cta__subtitle {
  font-size: 17px;
  color: var(--dfm-text-secondary);
  margin-bottom: 32px;
}

.dfm-cta__email-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: var(--dfm-bg-light);
  border: 1px solid rgba(249, 115, 22, 0.2);
  border-radius: 11px;
  text-decoration: none;
}

.dfm-cta__email-label {
  font-size: 12px;
  color: var(--dfm-text-muted);
}

.dfm-cta__email-addr {
  font-size: 15px;
  font-weight: 700;
  color: var(--dfm-color-orange);
}

/* ══════════════════════════════════════════════════
   RESPONSIVE — Tablet  (≤ 1024px)
   ══════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .dfm-section,
  .dfm-section--light,
  .dfm-features,
  .dfm-industries,
  .dfm-prompts {
    padding: 70px 0;
  }

  .dfm-section__title {
    font-size: 32px;
  }

  .dfm-stats {
    gap: 28px;
  }

  .dfm-stat__value {
    font-size: 34px;
  }

  .dfm-roi-banner {
    padding: 36px;
    gap: 36px;
  }

  .dfm-roi-banner__number {
    font-size: 70px;
  }

  .dfm-roi-banner__title {
    font-size: 22px;
  }
}
@media (max-width: 768px) {
  .dfm-section,
  .dfm-section--light,
  .dfm-features,
  .dfm-industries,
  .dfm-prompts {
    padding: 50px 0;
  }

  /* Typography */
  .dfm-section__label {
    font-size: 10px;
    margin-bottom: 10px;
  }

  .dfm-section__title {
    font-size: 26px;
  }

  .dfm-feb-btn {
    display: flex;
    justify-content: center;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
  }

  .dfm-feb-btnhref {
    width: 100%;
  }

  .dfm-feb-btnhref a.dfm-cta__email-link {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

  .dfm-section__desc {
    font-size: 14px;
  }

  /* Hero */
  .dfm-hero {
    padding: 90px 0 50px;
  }

  .dfm-hero__badge-text {
    font-size: 9px;
  }

  .dfm-hero__title {
    font-size: 30px;
    letter-spacing: -1.5px;
  }

  .dfm-hero__subtitle {
    font-size: 14px;
    margin-bottom: 24px;
    padding: 0 8px;
  }

  /* Stats */
  .dfm-stats {
    gap: 16px;
  }

  .dfm-stat__value {
    font-size: 28px;
  }

  .dfm-stat__label {
    font-size: 9px;
  }

  /* Buttons */
  .dfm-btn-group {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .dfm-btn--primary,
  .dfm-btn--secondary {
    width: 100%;
    max-width: 100%;
    text-align: center;
    padding: 12px 24px;
    font-size: 13px;
  }

  /* Compliance */
  .dfm-compliance {
    gap: 8px;
  }

  .dfm-compliance__badge {
    padding: 4px 10px;
  }

  .dfm-compliance__text {
    font-size: 9px;
  }

  /* Industry cards */
  .dfm-industry-card {
    padding: 16px 12px;
  }

  .dfm-industry-card__icon {
    font-size: 26px;
  }

  .dfm-industry-card__name {
    font-size: 11px;
  }

  .dfm-industry-card__use {
    font-size: 9px;
  }

  /* Compare cards */
  .dfm-compare-card {
    padding: 20px;
  }

  .dfm-compare-card__list li {
    font-size: 12px;
    padding: 6px 0;
  }

  /* Feature cards */
  .dfm-feature-card {
    padding: 22px 20px;
  }

  .dfm-feature-card__num {
    width: 28px;
    height: 28px;
    font-size: 11px;
    margin-bottom: 10px;
  }

  .dfm-feature-card__title {
    font-size: 14px;
  }

  .dfm-feature-card__desc {
    font-size: 12px;
  }

  /* Everything cards */
  .dfm-everything-card {
    padding: 14px;
  }

  .dfm-everything-card__icon {
    font-size: 20px;
  }

  .dfm-everything-card__label {
    font-size: 11px;
  }

  /* Prompt box */
  .dfm-prompt-box {
    padding: 20px 18px;
  }

  .dfm-prompt-box__list li {
    font-size: 10.5px;
    padding: 8px 0;
  }

  /* Testimonials */
  .dfm-testimonial-card {
    padding: 22px 20px;
  }

  .dfm-testimonial-card__text {
    font-size: 12px;
  }

  .dfm-testimonial-card__stats {
    gap: 14px;
  }

  .dfm-testimonial-card__stat-value {
    font-size: 16px;
  }

  /* Benefits */
  .dfm-benefit-card {
    padding: 20px;
  }

  .dfm-benefit-card__icon {
    font-size: 24px;
  }

  .dfm-benefit-card__title {
    font-size: 14px;
  }

  .dfm-benefit-card__desc {
    font-size: 11.5px;
  }

  /* ROI banner */
  .dfm-roi-banner {
    flex-direction: column;
    padding: 28px;
    gap: 20px;
    text-align: center;
  }

  .dfm-roi-banner__number {
    font-size: 64px;
  }

  .dfm-roi-banner__title {
    font-size: 20px;
  }

  .dfm-roi-banner__desc {
    font-size: 13px;
  }

  /* CTA */
  .dfm-cta__title {
    font-size: 28px;
  }

  .dfm-cta__subtitle {
    font-size: 14px;
  }

  .dfm-cta__email-link {
    flex-direction: column;
    gap: 4px;
    padding: 12px 20px;
  }
}

/* ══════════════════════════════════════════════════
   RESPONSIVE — Small phones  (≤ 400px)
   ══════════════════════════════════════════════════ */
@media (max-width: 400px) {
  .dfm-hero__title {
    font-size: 26px;
  }

  .dfm-stats {
    gap: 12px;
  }

  .dfm-stat__value {
    font-size: 24px;
  }

  .dfm-stat__label {
    font-size: 8px;
  }

  .dfm-roi-banner__number {
    font-size: 50px;
  }

  .dfm-cta__title {
    font-size: 24px;
  }

  .dfm-prompt-box__list li {
    font-size: 9.5px;
  }
}

/* DFM-Homepage-2026*/

.new-dfm-org.dfm-btn-box {
  display: inline-block;
  padding: 1px;
  border-radius: 8px;
  background: linear-gradient(
    96.83deg,
    rgb(255, 202, 153) -7.76%,
    rgb(255, 147, 5) 98.61%
  );
}

.new-dfm-org .dfm-btn-primary {
  background-color: rgb(255, 122, 1);
  border-width: medium;
  border-style: none;
  border-color: currentcolor;
  border-image: none;
  border-radius: 8px;
  padding: 16px 24px;
  font-weight: 600;
  font-size: 16px;
  line-height: 27px;
  color: rgb(255, 255, 255);
  z-index: 3;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s;
}

.new-dfm-org .dfm-btn-primary::before {
  content: "";
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    -120deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.25),
    rgba(255, 255, 255, 0) 70%
  );
  z-index: 2;
  animation: 3s ease-in-out 0s infinite normal none running shine;
  pointer-events: none;
  border-radius: 8px;
}

.new-dfm-org .dfm-btn-primary::after {
  position: absolute;
  content: "";
  background-image: url(/wp-content/uploads/2025/06/blur-btn.svg);
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  left: 0px;
  top: 0px;
  z-index: -1;
}

@keyframes shine {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(200%);
  }
}
.dftm-re-addons,
.dftm-re-addons *,
.dftm-re-addons *::before,
.dftm-re-addons *::after {
  box-sizing: border-box;
}

.dftm-re-addons p,
.dftm-re-addons span,
.dftm-re-addons a,
.dftm-re-addons button,
.dftm-re-addons div {
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}

/* ========== WRAPPER ========== */
.dftm-re-addons {
  background: #ffffff;
  padding-top: 80px;
  padding-bottom: 80px;
}

/* ========== GRID ========== */
.dftm-re-addons__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "aside list";
  column-gap: 24px;
  row-gap: 16px;
  align-items: start;
}

/* Sticky left column.
       align-self: start is required -- a stretched grid item fills the row and has
       nowhere to travel, so sticky silently does nothing.
       Also note: any ancestor with overflow hidden/auto/scroll would disable this.
       Raise `top` if you have a fixed site header to clear. */
.dftm-re-addons__aside {
  grid-area: aside;
  position: sticky;
  top: 98px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  max-width: 546px;
}

.dftm-re-addons__copy {
  max-width: 546px;
}

.dftm-re-addons__list {
  grid-area: list;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ========== COPY ========== */
.dftm-re-addons__title {
  font-size: 40px;
  font-weight: 500;
  line-height: 52px;
  color: #000000;
  margin: 0 0 16px;
}

.dftm-re-addons__text {
  font-size: 18px;
  font-weight: 500;
  line-height: 27px;
  color: #2b2b2b;
  margin: 0;
}

/* ========== CTA ========== */
.dftm-re-addons__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* 48px total = 27 line box + 9.5 padding top/bottom + 2px top border.
           The frame says 16px padding AND h-48, which cannot both hold (16+27+16+2=61);
           the 48px height is what is visible, so padding yields. */
  min-height: 48px;
  padding: 9.5px 24px;
  background: #ff7a01;
  border: 0;
  border-top: 2px solid #ffca99;
  border-radius: 8px;
  overflow: hidden;
  font-size: 16px;
  font-weight: 500;
  line-height: 27px;
  color: #ffffff;
  text-decoration: none;
  text-align: center;
}

.dftm-re-addons__cta:hover,
.dftm-re-addons__cta:focus-visible {
  color: #ffffff;
  text-decoration: none;
}

/* Angled shine sweep from the Figma button */
.dftm-re-addons__cta::before {
  content: "";
  position: absolute;
  top: -6px;
  left: -34px;
  width: 58px;
  height: 98px;
  transform: rotate(59.38deg);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
}

/* ========== CARDS ========== */
.dftm-re-addons__card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  background: #f5f4f2;
  border-radius: 10px;
  overflow: hidden;
}

.dftm-re-addons__icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  background: #101828;
  border-radius: 8px;
}

.dftm-re-addons__icon {
  display: block;
  width: 22px;
  height: 22px;
}

.dftm-re-addons__card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.dftm-re-addons__card-title {
  font-size: 24px;
  font-weight: 500;
  line-height: 36px;
  color: #413cc3;
  margin: 0;
}

.dftm-re-addons__card-text {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #323232;
  margin: 0;
}

/* ========== TABLET ========== */
@media (min-width: 768px) and (max-width: 991.98px) {
  .dftm-re-addons__grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "list"
      "cta";
    row-gap: 24px;
  }

  /* display: contents lifts the aside's children into the grid so the CTA can
           move below the card list, which `order` could not do across parents. */
  .dftm-re-addons__aside {
    display: contents;
  }

  .dftm-re-addons__copy {
    grid-area: copy;
    max-width: 100%;
  }

  .dftm-re-addons__cta-wrap {
    grid-area: cta;
  }

  .dftm-re-addons__title {
    font-size: 36px;
    line-height: 46px;
  }

  .dftm-re-addons__card-title {
    font-size: 20px;
    line-height: 30px;
  }
}

/* ========== MOBILE ========== */
@media (max-width: 767.98px) {
  .dftm-re-addons {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .dftm-re-addons__grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "list"
      "cta";
    row-gap: 24px;
  }

  /* display: contents lifts the aside's children into the grid so the CTA can
           move below the card list, which `order` could not do across parents. */
  .dftm-re-addons__aside {
    display: contents;
  }

  .dftm-re-addons__copy {
    grid-area: copy;
    max-width: 100%;
  }

  .dftm-re-addons__cta-wrap {
    grid-area: cta;
  }

  .dftm-re-addons__title {
    font-size: 32px;
    line-height: 40px;
  }

  .dftm-re-addons__text {
    font-size: 16px;
    line-height: 24px;
  }

  /* Mobile frame steps the card title down to 18/27 and the body to regular */
  .dftm-re-addons__card-title {
    font-size: 18px;
    line-height: 27px;
  }

  .dftm-re-addons__card-text {
    font-weight: 400;
  }

  .dftm-re-addons__cta {
    display: flex;
    width: 100%;
  }
}
/* ========== WRAPPER ========== */
.npo-tabs {
  position: relative;
  background: #f9fafb;
  padding: 80px 0;
  overflow: hidden;
}

.npo-tabs__inner {
  position: relative;
  z-index: 2;
}

/* ========== HEADING ========== */
.npo-tabs__title {
  font-size: 40px;
  font-weight: 500;
  line-height: 52px;
  color: #18181b;
  margin: 0 0 16px;
}

.npo-tabs__subtitle {
  font-size: 18px;
  font-weight: 500;
  line-height: 27px;
  color: #323232;
  margin: 0 0 40px;
  max-width: 861px;
}

/* ========== DESKTOP / TABLET TAB STRIP ========== */
.npo-tabs__nav {
  border-bottom: 1px solid #d3d3d3;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  scrollbar-width: none;
  margin-bottom: 129px;
  width: fit-content;
}

.npo-tabs__nav::-webkit-scrollbar {
  display: none;
}

.npo-tabs__nav-btn {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 12px;
  font-size: 24px;
  font-weight: 500;
  line-height: 36px;
  color: #484848;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}

.npo-tabs__nav-btn:hover {
  color: #212121;
}

.npo-tabs__nav-btn.is-active {
  color: #212121;
  font-weight: 600;
  border-bottom-color: #ff7a00;
}

/* ========== ITEM / PANEL ========== */
.npo-tabs__item + .npo-tabs__item {
  margin-top: 16px;
}

.npo-tabs__panel {
  position: relative;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.12);
  overflow: hidden;
  min-height: 507px;
  display: flex;
  align-items: center;
  background-image: url("/wp-content/uploads/2026/07/dfm-tab-bg.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.npo-tabs__panel.two {
  background-image: url("/wp-content/uploads/2026/07/data-bg-2.webp");
}
.npo-tabs__panel.three {
  background-image: url("/wp-content/uploads/2026/07/data-bg-3.webp");
}
.npo-tabs__panel.four {
  background-image: url("/wp-content/uploads/2026/07/data-bg-4.webp");
}
.npo-tabs__panel.five {
  background-image: url("/wp-content/uploads/2026/07/data-bg-5.webp");
}

.npo-tabs__panel-bg {
  position: absolute;
  inset: -20px 0 0 0;
  width: 100%;
  height: calc(100% + 40px);
  object-fit: cover;
  filter: blur(4.95px);
  pointer-events: none;
  z-index: 0;
}

.npo-tabs__card {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.83);
  border-radius: 16px;
  margin: 24px 0 24px 24px;
  padding: 24px;
  max-width: 563px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}

.npo-tabs__card-body {
  width: 100%;
}

.npo-tabs__card-title {
  font-size: 24px;
  font-weight: 600;
  line-height: 36px;
  color: #000000;
  margin: 0;
}

.npo-tabs__card-text {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #000000;
  margin: 8px 0 0;
}

.npo-tabs__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  font-size: 18px;
  font-weight: 500;
  line-height: 27px;
  color: #413cc3;
  text-decoration: none;
}

.npo-tabs__link:hover {
  color: #413cc3;
  text-decoration: underline;
}

.npo-tabs__link-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* ========== STAT TILES (Figma node 436:1303) ========== */
.npo-tabs__stats {
  display: flex;
  gap: 24px;
  align-items: stretch;
  width: 100%;
}

.npo-tabs__stat {
  background: #ffffff;
  border: 2px solid #ffdbba;
  border-radius: 19px;
  padding: 25px 41px;
  min-height: 129px;
  min-width: 188px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.npo-tabs__stat-value {
  font-size: 40px;
  font-weight: 600;
  line-height: 52px;
  color: #ff7a01;
  margin: 0;
  white-space: nowrap;
}

.npo-tabs__stat-label {
  font-size: 18px;
  font-weight: 500;
  line-height: 27px;
  color: #323232;
  margin: 0;
}

/* ========== RIGHT-END FIGURE (girl) ========== */
.npo-tabs__figure {
  position: absolute;
  top: auto;
  right: 24px;
  width: auto;
  object-fit: cover;
  pointer-events: none;
  z-index: 3;
  bottom: 0;
}

/* ========== MOBILE ACCORDION HEADER ========== */
.npo-tabs__acc-btn {
  width: 100%;
  background: #ffffff;
  border: 1px solid #ffdfc0;
  border-radius: 8px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  cursor: pointer;
}

.npo-tabs__acc-title {
  font-size: 24px;
  font-weight: 600;
  line-height: 36px;
  color: #ff7a01;
  margin: 0;
}

/* Chevron drawn in pure CSS (17 x 9, 1.5px stroke, rounded joins) */
.npo-tabs__acc-icon {
  position: relative;
  width: 17px;
  height: 9px;
  flex-shrink: 0;
  margin-right: 6px;
}

.npo-tabs__acc-icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  border-top: 1.5px solid #000000;
  border-left: 1.5px solid #000000;
  border-radius: 1px;
  transform: translate(-50%, calc(-50% - 4.25px)) rotate(225deg);
  transition: transform 0.3s ease;
}

.npo-tabs__item.is-open .npo-tabs__acc-btn {
  background: transparent;
  border-color: transparent;
  padding-left: 10px;
}

/* Open state: caret points up, matching the Figma frame */
.npo-tabs__item.is-open .npo-tabs__acc-icon::before {
  transform: translate(-50%, calc(-50% + 4.25px)) rotate(45deg);
}

/* ========== VISIBILITY LOGIC (one structure, two behaviours) ========== */
.npo-tabs__panel-wrap {
  display: none;
}

/* Mobile: accordion */
@media (max-width: 767.98px) {
  .npo-tabs {
    padding: 40px 0;
  }

  .npo-tabs__title {
    font-size: 32px;
    line-height: 40px;
  }

  .npo-tabs__subtitle {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 16px;
  }

  .npo-tabs__item + .npo-tabs__item {
    margin-top: 16px;
  }

  .npo-tabs__item.is-open .npo-tabs__panel-wrap {
    display: block;
    padding-top: 16px;
  }

  .npo-tabs__panel {
    min-height: 0;
    border-radius: 16px;
    background-position: left;
  }

  .npo-tabs__card {
    margin: 8px;
    padding: 16px;
    gap: 16px;
  }

  .npo-tabs__card-body {
    width: 100%;
  }

  .npo-tabs__card-title {
    font-size: 20px;
    line-height: 30px;
  }

  .npo-tabs__card-text {
    font-size: 15px;
    line-height: 23px;
  }

  .npo-tabs__stats {
    gap: 8px;
  }

  .npo-tabs__stat {
    flex: 1 1 0;
    min-width: 0;
    padding: 16px 8px;
    min-height: 110px;
    border-width: 2px;
    border-radius: 18px;
  }

  .npo-tabs__stat-value {
    font-size: 32px;
    line-height: 44px;
  }

  .npo-tabs__stat-label {
    font-size: 16px;
    line-height: 24px;
  }
}

/* Tablet + Desktop: tabs */
@media (min-width: 768px) {
  .npo-tabs__acc-btn {
    display: none;
  }

  .npo-tabs__item {
    margin-top: 0 !important;
  }

  .npo-tabs__item.is-selected .npo-tabs__panel-wrap {
    display: block;
    position: relative;
  }
}

/* Tablet tuning */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .npo-tabs__title {
    font-size: 36px;
    line-height: 46px;
  }

  .npo-tabs__nav-btn {
    font-size: 20px;
    line-height: 30px;
    padding: 10px;
  }

  .npo-tabs__panel {
    min-height: 0;
  }

  .npo-tabs__card {
    margin: 24px;
    max-width: 100%;
  }

  .npo-tabs__figure {
    display: none;
  }

  .npo-tabs__stat {
    flex: none;
    min-width: 0;
    padding: 20px 16px;
  }
  .npo-tabs__nav {
    margin-bottom: 24px;
    border-bottom: 1px solid #d3d3d3;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    scrollbar-width: none;
    margin-bottom: 42px;
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 767.98px) {
  .npo-tabs__figure {
    display: none;
  }
}

/* 1 */
.tspot,
.tspot *,
.tspot *::before,
.tspot *::after {
  box-sizing: border-box;
}

/* ========== WRAPPER (frame 1440 x 636: 66px top / bottom) ========== */
.tspot {
  background: #f9fafb;
  padding-top: 66px;
  padding-bottom: 66px;
}

.tspot__title {
  font-size: 40px;
  font-weight: 500;
  line-height: 52px;
  color: #000000;
  text-align: center;
  margin: 0 0 40px;
}

/* Column cap: keeps a card at the Figma 340px even in a wide container */
.tspot__col {
  max-width: 372px;
}

/* ========== CARD ========== */
.tspot__card {
  display: block;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.tspot__card:hover,
.tspot__card:focus-visible {
  text-decoration: none;
  color: inherit;
}

/* The bordered box - 16px padding, 1px inside stroke #adadad */
.tspot__card-box {
  height: 100%;
  padding: 16px;
  background: #ffffff;
  border-width: 1px;
  border-style: solid;
  border-color: #adadad;
  overflow: hidden;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.tspot__card:hover .tspot__card-box,
.tspot__card:focus-visible .tspot__card-box {
  border-color: #ff7878;
  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1);
}

/* ========== PHOTO: 295px tall on #ff7878 ========== */
.tspot__photo {
  position: relative;
  height: 295px;
  background: #ff7878;
  overflow: hidden;
}

.tspot__photo-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: opacity 0.35s ease;
}

.tspot__photo-img--hover {
  opacity: 0;
}

.tspot__card:hover .tspot__photo-img--hover,
.tspot__card:focus-visible .tspot__photo-img--hover {
  opacity: 1;
}

/* ========== FOOTER: 68px tall, space-between, bottom aligned ========== */
.tspot__footer {
  min-height: 68px;
}

.tspot__name {
  font-size: 24px;
  font-weight: 500;
  line-height: 36px;
  color: #323232;
  margin: 0;
}

.tspot__role {
  font-size: 18px;
  font-weight: 500;
  line-height: 27px;
  color: #323232;
  margin: 0;
}

.tspot__social {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}

.tspot__social-img {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: cover;
}

/* ========== TABLET ========== */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .tspot__title {
    font-size: 36px;
    line-height: 46px;
    margin-bottom: 32px;
  }
}

/* ========== MOBILE (frame 375: 40px block padding) ========== */
@media (max-width: 767.98px) {
  .tspot {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .tspot__title {
    font-size: 32px;
    line-height: 40px;
    margin-bottom: 24px;
  }

  /* Row becomes a 285px scroll-snap rail (Figma frame 486:2307).
           Cards start flush at the frame's 16px left padding. The -12px margin
           cancels the .container gutter so the 16px is measured from the
           viewport edge, not stacked on top of it. */
  .tspot__row {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start !important;
    gap: 16px;
    margin-top: 0;
    margin-left: -12px;
    margin-right: -12px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .tspot__row::-webkit-scrollbar {
    display: none;
  }

  /* Gutter padding is removed so the flex gap alone controls the 16px spacing */
  .tspot__col {
    flex: 0 0 285px;
    width: 285px;
    max-width: 285px;
    margin-top: 0;
    padding-left: 0;
    padding-right: 0;
    scroll-snap-align: start;
  }
}

/* 2 */
.nifi-feat,
.nifi-feat *,
.nifi-feat *::before,
.nifi-feat *::after {
  box-sizing: border-box;
}

/* ========== WRAPPER (frame: 80px block padding, 1242px content) ========== */
.nifi-feat {
  background: #f9fafb;
  padding-top: 80px;
  padding-bottom: 80px;
}

.nifi-feat__title {
  font-size: 40px;
  font-weight: 500;
  line-height: 52px;
  color: #000000;
  text-align: center;
  margin: 0 0 40px;
}

/* ========== GRID ========== */
.nifi-feat__item {
  position: relative;
  padding: 20px 30px;
}

.nifi-feat__icon-box {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #eff6ff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.nifi-feat__icon {
  display: block;
  width: 20px;
  height: 20px;
}

.nifi-feat__item-title {
  font-size: 24px;
  font-weight: 600;
  line-height: 36px;
  color: #413cc3;
  margin: 0 0 8px;
}

.nifi-feat__item-text {
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
  color: #2c2c2c;
  margin: 0;
}

/* ========== DIVIDERS: DESKTOP 3-UP ==========
       Vertical lines sit between columns 1|2 and 2|3 and run through both rows.
       The top-row segment fades in, the bottom-row segment fades out, so the pair
       reads as the single 667px line in the Figma frame. */
@media (min-width: 992px) {
  .nifi-feat__item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
  }

  /* Top row, columns 2 and 3: fade in from the top */
  .nifi-feat__col:nth-child(2) .nifi-feat__item::before,
  .nifi-feat__col:nth-child(3) .nifi-feat__item::before {
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.51) 90%,
      rgba(0, 0, 0, 0.51) 100%
    );
  }

  /* Bottom row, columns 2 and 3: fade out towards the bottom */
  .nifi-feat__col:nth-child(5) .nifi-feat__item::before,
  .nifi-feat__col:nth-child(6) .nifi-feat__item::before {
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.51) 0%,
      rgba(0, 0, 0, 0.51) 10%,
      rgba(0, 0, 0, 0) 100%
    );
  }

  /* Horizontal line across the full grid, drawn as three staggered segments */
  .nifi-feat__col:nth-child(4) .nifi-feat__item::after,
  .nifi-feat__col:nth-child(5) .nifi-feat__item::after,
  .nifi-feat__col:nth-child(6) .nifi-feat__item::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
  }

  .nifi-feat__col:nth-child(4) .nifi-feat__item::after {
    background: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.51) 100%
    );
  }

  .nifi-feat__col:nth-child(5) .nifi-feat__item::after {
    background: rgba(0, 0, 0, 0.51);
  }

  .nifi-feat__col:nth-child(6) .nifi-feat__item::after {
    background: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.51) 0%,
      rgba(0, 0, 0, 0) 100%
    );
  }
}

/* ========== DIVIDERS: TABLET 2-UP ========== */
@media (min-width: 768px) and (max-width: 991.98px) {
  .nifi-feat__title {
    font-size: 36px;
    line-height: 46px;
  }

  .nifi-feat__item {
    padding: 20px 24px;
  }

  /* Vertical line between the two columns */
  .nifi-feat__col:nth-child(even) .nifi-feat__item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.51) 46.6%,
      rgba(0, 0, 0, 0) 100%
    );
  }

  /* Horizontal line above rows 2 and 3 */
  .nifi-feat__col:nth-child(n + 3) .nifi-feat__item::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.51) 46.6%,
      rgba(0, 0, 0, 0) 100%
    );
  }
}

/* ========== MOBILE: single column, full-width line between items ========== */
@media (max-width: 767.98px) {
  .nifi-feat {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .nifi-feat__title {
    font-size: 32px;
    line-height: 40px;
    margin-bottom: 40px;
  }

  .nifi-feat__item {
    padding: 16px 0;
  }

  .nifi-feat__col:not(:first-child) .nifi-feat__item::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.51) 46.6%,
      rgba(0, 0, 0, 0) 100%
    );
  }
}

/* 3 */
.dfm-change,
.dfm-change *,
.dfm-change *::before,
.dfm-change *::after {
  box-sizing: border-box;
}

/* ========== WRAPPER ========== */
.dfm-change {
  background: #ffffff;
  padding-top: 80px;
  padding-bottom: 80px;
  overflow: hidden;
}

.dfm-change__title {
  font-size: 40px;
  font-weight: 500;
  line-height: 52px;
  color: #212121;
  max-width: 394px;
  margin: 0 0 40px;
}

/* ========== ACCORDION (Bootstrap, restyled) ========== */
.dfm-change__accordion {
  max-width: 435px;
}

.dfm-change__accordion .accordion-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid #d6d6d6;
  border-radius: 0;
  margin-bottom: 8px;
}

.dfm-change__accordion .accordion-item:last-child {
  border-bottom: 0;
  margin-bottom: 0;
}

.dfm-change__accordion .accordion-button {
  min-height: 56px;
  padding: 10px 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: 24px;
  font-weight: 500;
  line-height: 36px;
  color: #484848;
}

/* Open row turns indigo; Bootstrap's default blue tint is removed */
.dfm-change__accordion .accordion-button:not(.collapsed) {
  background: transparent;
  box-shadow: none;
  color: #4e49e0;
}

.dfm-change__accordion .accordion-button:focus {
  box-shadow: none;
  border-color: transparent;
}

/* ---------- Chevron: supplied SVG as a CSS background ---------- */
.dfm-change__accordion .accordion-button::after {
  width: 24px;
  height: 24px;
  background-size: 24px 24px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20.0306 9.53055L12.5306 17.0306C12.4609 17.1003 12.3782 17.1556 12.2871 17.1933C12.1961 17.2311 12.0985 17.2505 11.9999 17.2505C11.9014 17.2505 11.8038 17.2311 11.7127 17.1933C11.6217 17.1556 11.539 17.1003 11.4693 17.0306L3.9693 9.53055C3.82857 9.38982 3.74951 9.19895 3.74951 8.99993C3.74951 8.80091 3.82857 8.61003 3.9693 8.4693C4.11003 8.32857 4.30091 8.24951 4.49993 8.24951C4.69895 8.24951 4.88982 8.32857 5.03055 8.4693L11.9999 15.4396L18.9693 8.4693C19.039 8.39962 19.1217 8.34435 19.2128 8.30663C19.3038 8.26892 19.4014 8.24951 19.4999 8.24951C19.5985 8.24951 19.6961 8.26892 19.7871 8.30663C19.8781 8.34435 19.9609 8.39962 20.0306 8.4693C20.1002 8.53899 20.1555 8.62171 20.1932 8.71276C20.2309 8.8038 20.2503 8.90138 20.2503 8.99993C20.2503 9.09847 20.2309 9.19606 20.1932 9.2871C20.1555 9.37815 20.1002 9.46087 20.0306 9.53055Z' fill='%23484848'/%3E%3C/svg%3E");
  transition: transform 0.3s ease;
}

/* Open row: indigo chevron, flipped to point up */
.dfm-change__accordion .accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20.0306 9.53055L12.5306 17.0306C12.4609 17.1003 12.3782 17.1556 12.2871 17.1933C12.1961 17.2311 12.0985 17.2505 11.9999 17.2505C11.9014 17.2505 11.8038 17.2311 11.7127 17.1933C11.6217 17.1556 11.539 17.1003 11.4693 17.0306L3.9693 9.53055C3.82857 9.38982 3.74951 9.19895 3.74951 8.99993C3.74951 8.80091 3.82857 8.61003 3.9693 8.4693C4.11003 8.32857 4.30091 8.24951 4.49993 8.24951C4.69895 8.24951 4.88982 8.32857 5.03055 8.4693L11.9999 15.4396L18.9693 8.4693C19.039 8.39962 19.1217 8.34435 19.2128 8.30663C19.3038 8.26892 19.4014 8.24951 19.4999 8.24951C19.5985 8.24951 19.6961 8.26892 19.7871 8.30663C19.8781 8.34435 19.9609 8.39962 20.0306 8.4693C20.1002 8.53899 20.1555 8.62171 20.1932 8.71276C20.2309 8.8038 20.2503 8.90138 20.2503 8.99993C20.2503 9.09847 20.2309 9.19606 20.1932 9.2871C20.1555 9.37815 20.1002 9.46087 20.0306 9.53055Z' fill='%234e49e0'/%3E%3C/svg%3E");
  transform: rotate(-180deg);
}

.dfm-change__accordion .accordion-body {
  padding: 0 0 12px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #484848;
}

/* ========== VISUAL: screenshot + decorative cluster ========== */
.dfm-change__visual {
  position: relative;
  width: 100%;
  max-width: 738px;
  margin-left: auto;
}

.dfm-change__screen-box {
  position: relative;
  width: 100%;
  aspect-ratio: 738 / 397;
  overflow: hidden;
  z-index: 1;
}

.dfm-change__screen {
  position: absolute;
  top: -45.68%;
  left: 0;
  width: 100%;
  height: 145.77%;
  max-width: none;
}

/* Ellipses and tiles are placed in % of the 738 x 397 box */
.dfm-change__glow,
.dfm-change__tile {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.dfm-change__glow {
  z-index: 0;
}

.dfm-change__glow img,
.dfm-change__tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.dfm-change__glow--lg {
  left: 28.05%;
  top: -37.03%;
  width: 67.34%;
  aspect-ratio: 1;
}

.dfm-change__glow--sm {
  left: 36.18%;
  top: -15.87%;
  width: 50.95%;
  aspect-ratio: 1;
}

/* Icon tiles: #ebf4f7 rounded squares, radius is ~15% of the tile */
.dfm-change__tile {
  background: #ebf4f7;
  border-radius: 15%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.dfm-change__tile--1 {
  left: 46.75%;
  top: -16.88%;
  width: 7.59%;
}

.dfm-change__tile--2 {
  left: 61.79%;
  top: -41.31%;
  width: 5.69%;
}

.dfm-change__tile--3 {
  left: 29.95%;
  top: -8.31%;
  width: 5.42%;
}

.dfm-change__tile--4 {
  left: 83.33%;
  top: -24.69%;
  width: 6.5%;
}

.dfm-change__tile--5 {
  left: 81.84%;
  top: 8.06%;
  width: 6.5%;
}

.dfm-change__tile--6 {
  left: 32.11%;
  top: 26.45%;
  width: 6.5%;
}

/* ========== TABLET ========== */
@media (min-width: 768px) and (max-width: 991.98px) {
  .dfm-change__title {
    font-size: 36px;
    line-height: 46px;
  }

  .dfm-change__accordion {
    max-width: 100%;
  }

  .dfm-change__visual {
    margin: 56px auto 0;
  }
}

/* ========== MOBILE ========== */
@media (max-width: 767.98px) {
  .dfm-change {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .dfm-change__title {
    font-size: 32px;
    line-height: 40px;
    margin-bottom: 40px;
  }

  .dfm-change__accordion {
    max-width: 100%;
  }

  /* Closed rows step down to 20px / 27 in the mobile frame */
  .dfm-change__accordion .accordion-button {
    font-size: 20px;
    line-height: 27px;
  }

  .dfm-change__accordion .accordion-button:not(.collapsed) {
    font-size: 24px;
    line-height: 36px;
  }

  .dfm-change__visual {
    margin: 0px auto 0;
  }
}

/* 4 */
/* Base Styles */
.ksolves-industry-leaders {
  background-color: #ffffff;
  padding: 80px 0;
}

.ksolves-industry-leaders__heading {
  margin: 0 0 40px 0;
  font-size: 32px;
  font-weight: 600;
  line-height: 40px;
  letter-spacing: -0.32px;
  color: #323232;
  text-align: left;
}

.ksolves-industry-leaders__slider {
  width: 100%;
}

.ksolves-industry-leaders__card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100px;
  padding: 0;
  /* background-color: #ffffff;
     border: 1px solid #e7e7e7; */
  border-radius: 8px;
  transition:
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

/* .ksolves-industry-leaders__card:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  transform: translateY(-3px);
} */

.ksolves-industry-leaders__logo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* .ksolves-industry-leaders__card--dark-logo .ksolves-industry-leaders__logo {
  background-color: #1e1e1e;
  padding: 6px 12px;
  border-radius: 4px;
} */

/* Owl Carousel Overrides */
.ksolves-industry-leaders__slider .owl-stage {
  display: flex;
  align-items: center;
}

.ksolves-industry-leaders__slider .owl-item {
  display: flex;
}

.ksolves-industry-leaders__slider .owl-nav,
.ksolves-industry-leaders__slider .owl-dots {
  display: none;
}

/* Responsive Media Queries */
@media (max-width: 991.98px) {
  .ksolves-industry-leaders {
    padding: 60px 0;
  }

  .ksolves-industry-leaders__heading {
    font-size: 28px;
    line-height: 38px;
    margin-bottom: 32px;
  }

  .ksolves-industry-leaders__card {
    height: 80px;
    padding: 10px 16px;
    border-radius: 6px;
  }

  .ksolves-industry-leaders__logo {
    max-height: 100%;
  }
}

@media (max-width: 767.98px) {
  .ksolves-industry-leaders {
    padding: 40px 0;
  }

  .ksolves-industry-leaders__heading {
    font-size: 24px;
    line-height: 36px;
    letter-spacing: 0;
    margin-bottom: 24px;
  }

  .ksolves-industry-leaders__card {
    height: 100%;
    padding: 0;
    /* border-radius: 4.5px; */
  }

  .ksolves-industry-leaders__logo {
    max-height: 100%;
  }
}

/* 5 */
/* Base Styles */
.ksbl-compliance {
  position: relative;
  padding: 60px 0;
  background-image: url("/wp-content/uploads/2026/05/bgwave-blueprint.webp");
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

.ksbl-compliance__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.ksbl-compliance__title {
  font-weight: 500;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -0.32px;
  color: #212121;
  margin: 0;
  max-width: 500px;
  flex-shrink: 0;
  width: 100%;
}

/* Included in case strong/b tags are used in the ACF field */
.ksbl-compliance__title-bold {
  font-weight: 700;
}

.ksbl-compliance__badges {
  display: flex;
  gap: 15px;
  align-items: center;
  flex-wrap: nowrap;
}

.ksbl-compliance__badge {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid #fff;
  border-radius: 12px;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
  flex-shrink: 0;
}

.ksbl-compliance__badge:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.ksbl-compliance__badge-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Responsive Media Queries */

@media (max-width: 1200px) {
  .ksbl-compliance__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .ksbl-compliance__title {
    max-width: 100%;
    width: 100%;
  }
}

@media (max-width: 1080px) {
  .ksbl-compliance__title {
    text-align: center;
  }

  .ksbl-compliance__badges {
    width: 100%;
    overflow-x: auto;
    gap: 12px;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: center;
  }
}

@media (max-width: 991.98px) {
  .ksbl-compliance {
    padding: 48px 0;
  }

  .ksbl-compliance__title {
    font-size: 28px;
    line-height: 36px;
  }

  .ksbl-compliance__badges::-webkit-scrollbar {
    display: none;
  }

  .ksbl-compliance__badge {
    width: 110px;
    height: 110px;
    padding: 18px;
  }
}

@media (max-width: 767.98px) {
  .ksbl-compliance {
    background-image: url("/wp-content/uploads/2026/05/bgwave-blueprintmb.webp");
    padding: 40px 0;
  }

  .ksbl-compliance__title {
    font-size: 24px;
    line-height: 36px;
    letter-spacing: 0;
    text-align: start;
  }

  .ksbl-compliance__badges {
    justify-content: start;
  }

  .ksbl-compliance__badge {
    width: 100px;
    height: 100px;
    padding: 16px;
  }
}

/* 6 */
.dftm-re-cta,
.dftm-re-cta *,
.dftm-re-cta *::before,
.dftm-re-cta *::after {
  box-sizing: border-box;
}

/* ========== OUTER ========== */
.dftm-re-cta {
  background: #ffffff;
  padding-top: 64px;
  padding-bottom: 64px;
}

/* ========== THE ORANGE BOX ==========
       Only padding-top here, as requested. The swirl is the third background layer,
       blended over the gradient, so it needs no absolutely positioned element. */
.dftm-re-cta__box {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 67px;
  min-height: 353px;
  padding-top: 32px;
  border-radius: 20px;
  overflow: hidden;
  background-image: url("/wp-content/uploads/2026/07/dfm-cta-bg-d.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* ========== TEXT COLUMN ==========
       Carries the inline + bottom spacing that was removed from the box. */
.dftm-re-cta__content {
  flex: 0 0 auto;
  width: 497px;
  max-width: 100%;
  min-height: 289px;
  padding-left: 32px;
  padding-bottom: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 32px;
}

.dftm-re-cta__copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.dftm-re-cta__title {
  font-size: 36px;
  font-weight: 500;
  line-height: 40px;
  color: #ffffff;
  margin: 0;
}

.dftm-re-cta__text {
  font-size: 18px;
  font-weight: 500;
  line-height: 27px;
  color: #ffffff;
  margin: 0;
}

.dftm-re-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 16px 34px;
  background: #ffffff;
  border: 2px solid rgba(10, 10, 10, 0.2);
  border-radius: 12px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #0a0a0a;
  text-decoration: none;
  white-space: nowrap;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.dftm-re-cta__btn:hover,
.dftm-re-cta__btn:focus-visible {
  color: #0a0a0a;
  text-decoration: none;
  opacity: 0.9;
  transform: scale(1.04);
}

/* ========== RIGHT MOCKUP ==========
       A plain flex child. Wider and taller than the box on purpose -- the box clips it. */
.dftm-re-cta__media {
  /* flex: 0 0 auto; */
  width: 100%;
  /* height: 100%; */
  padding: 12px 0 0 12px;
  background: #fffefe;
  border-radius: 20px 0 18px 0;
  overflow: hidden;
  max-width: 964px;
}

.dftm-re-cta__screen {
  /* width: 1200px; */
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
}

.dftm-re-cta__screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

/* ========== TABLET ========== */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .dftm-re-cta__box {
    gap: 32px;
  }

  .dftm-re-cta__content {
    width: 45%;
  }

  .dftm-re-cta__media {
    width: 700px;
    height: 500px;
  }

  .dftm-re-cta__screen {
    width: 780px;
  }
}

/* ========== MOBILE: stacked, mockup still overruns the right edge ========== */
@media (max-width: 767.98px) {
  .dftm-re-cta {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .dftm-re-cta__box {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    min-height: 565px;
    padding-top: 16px;
  }

  .dftm-re-cta__content {
    width: 100%;
    min-height: 0;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 0;
    gap: 32px;
  }

  .dftm-re-cta__media {
    width: 465px;
    height: 331px;
    margin-left: 16px;
    padding: 4.741px;
    border-radius: 8px 0 0 0;
  }

  .dftm-re-cta__screen {
    width: 509px;
    height: 100%;
    border-radius: 6.792px;
  }

  .dftm-re-cta__screen img {
    object-position: top center;
  }

  .dftm-re-cta__box {
    background-image: url("/wp-content/uploads/2026/07/dfm-cta-bg-m.webp");
  }
}

/* 7 */
/* =====================================================
   FAQ SECTION BASE STYLES
   ===================================================== */
.faqq {
  background-color: #ffffff;
  padding: 66px 0;
  position: relative;
  background-image: url("/wp-content/uploads/2026/05/Faq-bg.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.faqq .faq__bg-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.faqq .faq__bg-decor {
  position: absolute;
  width: 1533px;
  height: 531px;
  left: 50%;
  transform: translateX(-50%) rotate(9.12deg);
  top: 475px;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

.faqq .faq__bg-decor img {
  width: 1505px;
  height: 296px;
  display: block;
}

.faqq .faq__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

.faqq .faq__left {
  width: 347px;
  min-width: 326px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 130px;
  align-self: flex-start;
}

.faqq .faq__heading {
  font-size: 40px;
  font-weight: 600;
  line-height: 52px;
  color: #212121;
  margin: 0;
}

.faqq .faq__subheading {
  font-size: 18px;
  font-weight: 500;
  line-height: 27px;
  color: #323232;
  margin: 0;
}

/* =====================================================
   FAQ ACCORDION STYLES (Updated Orange Theme)
   ===================================================== */
.faqq .faq__accordion {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 727px;
}

.faqq .faq__item {
  position: relative;
  border-radius: 16px;
  padding: 1px;
  isolation: isolate;
  cursor: pointer;
}

/* Updated Border Gradient */
.faqq .faq__item::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(
    180deg,
    rgba(255, 122, 0, 0.4) 0%,
    rgba(255, 122, 0, 0.4) 30.39%,
    rgba(255, 122, 0, 0.256) 63.49%,
    rgba(255, 122, 0, 0) 112.87%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}

/* Updated Background Gradient (Default State) */
.faqq .faq__item-body {
  position: relative;
  z-index: 1;
  border-radius: 15px;
  padding: 16px;
  background:
    linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 154.29%),
    linear-gradient(
      90deg,
      rgba(255, 122, 0, 0.02) 0%,
      rgba(255, 122, 0, 0.02) 26.92%,
      rgba(255, 122, 0, 0.02) 56.25%,
      rgba(255, 122, 0, 0.02) 100%
    );
  transition: background 0.35s ease;
  cursor: default;
}

/* Updated Background Gradient (Open/Active State) */
.faqq .faq__item.is-open .faq__item-body {
  background:
    linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 154.29%),
    linear-gradient(
      90deg,
      rgba(255, 122, 0, 0.04) 0%,
      rgba(255, 122, 0, 0.04) 26.92%,
      rgba(255, 122, 0, 0.04) 56.25%,
      rgba(255, 122, 0, 0.04) 100%
    );
}

.faqq .faq__item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.faqq .faq__question {
  font-size: 24px;
  font-weight: 600;
  line-height: 36px;
  color: #212121;
  flex: 1;
  min-width: 0;
  margin: 0;
  cursor: pointer;
}

.faqq .faq__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.faqq .faq__icon img {
  width: 24px;
  height: 24px;
  display: block;
}

.faqq .faq__item.is-open .faq__icon {
  transform: rotate(180deg);
}

.faqq .faq__answer {
  font-size: 18px;
  font-weight: 500;
  line-height: 27px;
  color: #323232;
  margin: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.35s ease,
    padding-top 0.35s ease;
  padding-top: 0;
}

.faqq .faq__answer-inner {
  overflow: hidden;
  min-height: 0;
  cursor: default;
}

.faqq .faq__item.is-open .faq__answer {
  grid-template-rows: 1fr;
  opacity: 1;
  padding-top: 16px;
}

/* =====================================================
   CTA BUTTON STYLES
   ===================================================== */
.cta-btn-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  width: fit-content;
}

.cta-btn-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 3.932px;
  background: linear-gradient(
    90deg,
    rgb(86, 74, 232) 0%,
    rgb(186, 98, 188) 26.923%,
    rgb(224, 103, 140) 56.25%,
    rgb(232, 93, 104) 100%
  );
  filter: blur(16.709px);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
}

.cta-btn-wrap:hover::before {
  opacity: 1;
}

.cta-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
  border: none;
  text-decoration: none;
  cursor: pointer;
  width: fit-content;
  transition: color 0.25s ease;
}

.cta-btn--primary {
  background-color: #0f0232;
  color: #ffffff;
}

.cta-btn--primary:hover {
  background-color: #0f0232;
  color: #ffffff;
}

/* =====================================================
   RESPONSIVE MEDIA QUERIES
   ===================================================== */
@media (max-width: 1400px) {
  .faqq .faq__left {
    width: 280px;
    min-width: 280px;
  }
}

@media (max-width: 992px) {
  .faqq {
    padding: 50px 0;
  }

  .faqq .faq__inner {
    flex-direction: column;
    gap: 32px;
  }

  .faqq .faq__left {
    width: 100%;
    min-width: unset;
    position: static;
    align-items: center;
  }

  .faqq .faq__heading {
    font-size: 36px;
    line-height: 46px;
  }

  .faqq .faq__question {
    font-size: 20px;
    line-height: 30px;
  }
}

@media (max-width: 765px) {
  .faqq {
    padding: 40px 0;
    background-image: url("/wp-content/uploads/2026/05/Faq-mob-bg.webp");
  }

  .faqq .faq__heading {
    font-size: 32px;
    line-height: 42px;
  }

  .faqq .faq__question {
    font-size: 18px;
    line-height: 27px;
  }
}

@media (max-width: 575px) {
  .faqq {
    padding: 40px 4px;
  }

  .faqq .faq__heading {
    font-size: 28px;
    line-height: 38px;
  }

  .faqq .faq__subheading {
    font-size: 16px;
    line-height: 24px;
  }

  .faqq .faq__question {
    font-size: 18px;
    line-height: 27px;
  }
}

/* 8 */
.dftm-re-hero,
.dftm-re-hero *,
.dftm-re-hero *::before,
.dftm-re-hero *::after {
  box-sizing: border-box;
}

/* ========== WRAPPER ========== */
.dftm-re-hero {
  position: relative;
  background-image: url("/wp-content/uploads/2026/07/dummy-bg.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  padding-top: 388px;
  padding-bottom: 8px;
  min-height: 564px;
  display: flex;
  align-items: center;
}

/* ========== BACKGROUND VIDEO (scaleMode FILL) ========== */
.dftm-re-hero__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}
/* Black gradient overlay, sits above the video and below the content */
.dftm-re-hero__shade {
  position: absolute;
  inset: 0;
  background-image: url("/wp-content/uploads/2026/07/black-bg-grad.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  z-index: 1;
  pointer-events: none;
}

.dftm-re-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* ========== LEFT COLUMN ========== */
.dftm-re-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  max-width: 620px;
}

.dftm-re-hero__title {
  font-size: 48px;
  font-weight: 600;
  line-height: 60px;
  color: #ffffff;
  margin: 0;
}

.dftm-re-hero__title-accent {
  color: #ff7a01;
}

.dftm-re-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 16px 34px;
  background: #ffffff;
  border: 2px solid rgba(10, 10, 10, 0.2);
  border-radius: 12px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #0a0a0a;
  text-decoration: none;
  white-space: nowrap;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.dftm-re-hero__btn:hover,
.dftm-re-hero__btn:focus-visible {
  color: #0a0a0a;
  text-decoration: none;
  opacity: 0.9;
  transform: scale(1.04);
}

/* ========== VERTICAL DIVIDER (2px gradient: fades to white at the middle) ========== */
.dftm-re-hero__divider {
  width: 2px;
  height: 341px;
  flex: 0 0 2px;
  align-self: center;
  background: linear-gradient(
    180deg,
    rgba(102, 102, 102, 0) 13.73%,
    rgba(255, 255, 255, 1) 53.37%,
    rgba(74, 74, 74, 0) 100%
  );
}

/* ========== GLASS QUOTE CARD ========== */
.dftm-re-hero__quote {
  display: flex;
  align-items: center;
  gap: 16px;
  width: auto;
  max-width: 100%;
  min-height: 179px;
  padding: 16px;
  border: 1px solid rgba(255, 122, 0, 0.3);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.dftm-re-hero__avatar {
  width: 88px;
  height: 88px;
  flex: 0 0 88px;
  border: 2px solid #ff7a01;
  border-radius: 70px;
  background: #ffffff;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dftm-re-hero__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.dftm-re-hero__quote-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.dftm-re-hero__quote-text {
  font-size: 18px;
  font-weight: 600;
  line-height: 27px;
  color: #f9fafb;
  margin: 0;
}

.dftm-re-hero__quote-accent {
  color: #ff7a01;
}

.dftm-re-hero__quote-author {
  font-size: 14px;
  font-weight: 300;
  font-style: italic;
  line-height: 20px;
  color: #f9fafb;
  margin: 0;
}

/* ========== TABLET ========== */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .dftm-re-hero {
    padding-top: 180px;
    padding-bottom: 32px;
    min-height: auto;
  }
  .dftm-re-hero__shade {
    display: none;
  }

  .dftm-re-hero__title {
    font-size: 40px;
    line-height: 50px;
  }

  .dftm-re-hero__divider {
    display: none;
  }

  .dftm-re-hero__copy {
    max-width: 100%;
    margin-bottom: 40px;
  }
}

/* ========== MOBILE: centred, no card, no divider, no avatar ========== */
@media (max-width: 767.98px) {
  .dftm-re-hero {
    padding-top: 64px;
    padding-bottom: 64px;
    min-height: 0;
    background-image: url("/wp-content/uploads/2026/07/mobile-dfm.webp");
  }
  .banner-box {
    width: 100%;
  }
  /* .dftm-re-hero__title-accent {
    width: 100%;
    display: inline-block;
  } */

  .dftm-re-hero__copy {
    align-items: flex-start; /* was: center */
    gap: 16px;
    max-width: 100%;
    margin-bottom: 40px;
  }

  .dftm-re-hero__title {
    font-size: 32px;
    line-height: 40px;
    text-align: left; /* was: center */
  }

  .dftm-re-hero__btn {
    width: 100%;
  }

  .dftm-re-hero__divider {
    display: none;
  }

  /* The mobile frame keeps the quote as a real card -- background, padding,
       and radius stay. Only the avatar is dropped, and text steps down in size. */
  .dftm-re-hero__quote {
    width: 100%;
    min-height: 0;
    /* padding, border, radius, background, backdrop-filter: unchanged from desktop */
  }

  .dftm-re-hero__avatar {
    display: none;
  }

  .dftm-re-hero__quote-text {
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
  }
  .dftm-re-hero__video,
  .dftm-re-hero__shade {
    display: none;
  }
}

/* 8 */
/* Long-content guard: an unbroken token (URL, ID, compound word) has no break
       opportunity and will otherwise punch out of its column. `anywhere` also shrinks
       min-content size, which is what lets flex and grid children actually give way. */
.dftm-re-compare p,
.dftm-re-compare span,
.dftm-re-compare a,
.dftm-re-compare button,
.dftm-re-compare th,
.dftm-re-compare td,
.dftm-re-compare div {
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}

.dftm-re-compare,
.dftm-re-compare *,
.dftm-re-compare *::before,
.dftm-re-compare *::after {
  box-sizing: border-box;
}

/* ========== WRAPPER ========== */
.dftm-re-compare {
  background: #ffffff;
  padding-top: 80px;
  padding-bottom: 80px;
}

.dftm-re-compare__title {
  font-size: 40px;
  font-weight: 500;
  line-height: 52px;
  color: #000000;
  text-align: center;
  max-width: 734px;
  margin: 0 auto 40px;
}

/* ========== CARD ========== */
.dftm-re-compare__card {
  background: #fffdfa;
  border-radius: 16px;
  padding: 24px;
  overflow-x: auto;
  max-width: 992px;
  margin: auto;
}

.dftm-re-compare__table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
}

.dftm-re-compare__table th,
.dftm-re-compare__table td {
  /* The frame says 12px vertical padding AND a 40px row height, but
           12 + 24 (line box) + 12 = 48, so the two cannot both hold. The 40px
           rhythm is what is visible across all 12 rows, so that wins and the
           cell centres its content instead. */
  padding: 0 8px;
  vertical-align: middle;
  border: 0;
}

/* Column widths: 419 / 247 / rest of the 992px content box */
.dftm-re-compare__col-feature {
  width: 42.24%;
}

.dftm-re-compare__col-dfm {
  width: 24.9%;
}

.dftm-re-compare__col-other {
  width: 32.86%;
}

/* ---------- Header row ---------- */
.dftm-re-compare__table thead th {
  height: 40px;
  font-size: 20px;
  font-weight: 600;
  line-height: 27px;
  color: #212121;
  text-align: center;
  background: transparent;
}

.dftm-re-compare__table thead th:first-child {
  text-align: left;
}

/* ---------- Body ---------- */
.dftm-re-compare__table tbody th,
.dftm-re-compare__table tbody td {
  height: 40px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.dftm-re-compare__table tbody th {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #323232;
  text-align: left;
}

.dftm-re-compare__table tbody td {
  text-align: center;
}

/* Zebra striping sits on top of the card tint, exactly as in the frame */
.dftm-re-compare__table tbody tr:nth-child(odd) th,
.dftm-re-compare__table tbody tr:nth-child(odd) td {
  background: #ffffff;
}

/* ---------- Highlighted column rebuilt from cell borders ---------- */
.dftm-re-compare__table .dftm-re-compare__hl {
  background: rgba(255, 122, 0, 0.06);
  border-left: 2px solid #ff7a00;
  border-right: 2px solid #ff7a00;
}

/* Striped rows keep the white fill but must not lose the side borders */
.dftm-re-compare__table tbody tr:nth-child(odd) .dftm-re-compare__hl {
  background: #ffffff;
}

.dftm-re-compare__table thead .dftm-re-compare__hl {
  border-top: 8px solid #ff7a00;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.dftm-re-compare__table tbody tr:last-child .dftm-re-compare__hl {
  border-bottom: 8px solid #ff7a00;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* ---------- Column glow ----------
       A table column cannot be one box, so the borders are rebuilt per cell above.
       The SHADOW, though, must not be: per-cell shadows band at every row seam,
       because each cell paints over the shadow cast by the one before it.
       Instead one transparent overlay spans the column and carries the real
       Figma value, 0 0 29.1px rgba(0,0,0,0.12), as a single outer shadow.
       left/width mirror the colgroup percentages so it tracks the column exactly.
       z-index lifts it over the unpositioned sibling cells; the outer shadow never
       paints inside its own border box, so the highlighted cells stay untouched. */
.dftm-re-compare__grid {
  position: relative;
}

.dftm-re-compare__grid::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 42.24%;
  width: 24.9%;
  border-radius: 8px;
  box-shadow: 0 0 29.1px 0 rgba(0, 0, 0, 0.12);
  pointer-events: none;
  z-index: 1;
}

/* ---------- Icons ---------- */
.dftm-re-compare__icon {
  display: inline-block;
  vertical-align: middle;
  width: 24px;
  height: 24px;
}

/* Short labels are for the mobile frame only */
.dftm-re-compare__label-short {
  display: none;
}

/* ========== TABLET ========== */
@media (min-width: 768px) and (max-width: 991.98px) {
  .dftm-re-compare__title {
    font-size: 36px;
    line-height: 46px;
  }

  .dftm-re-compare__table thead th {
    font-size: 18px;
  }
}

/* ========== MOBILE ========== */
@media (max-width: 767.98px) {
  .dftm-re-compare {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .dftm-re-compare__title {
    font-size: 32px;
    line-height: 40px;
    margin-bottom: 24px;
  }

  .dftm-re-compare__card {
    padding: 16px 8px;
  }

  .dftm-re-compare__grid::before {
    left: 39%;
    width: 32%;
  }

  .dftm-re-compare__col-feature {
    width: 39%;
  }

  .dftm-re-compare__col-dfm {
    width: 32%;
  }

  .dftm-re-compare__col-other {
    width: 29%;
  }

  .dftm-re-compare__table thead th {
    height: 78px;
  }

  /* Rows grow with the wrapped label instead of the frame's fixed heights */
  .dftm-re-compare__table tbody th,
  .dftm-re-compare__table tbody td {
    height: auto;
    padding: 12px 8px;
  }

  .dftm-re-compare__label-full {
    display: none;
  }

  .dftm-re-compare__label-short {
    display: inline;
  }
}
@media screen and (min-width: 1300px) {
  .dftm-re-hero__inner .row {
    display: grid;
    grid-template-columns: 620px 20px auto;
    gap: 48px;
  }
  .dftm-re-hero__inner .row .col-lg,
  .dftm-re-hero__inner .row .col-lg-6,
  .dftm-re-hero__inner .row .col-auto {
    width: 100%;
  }
}
/* DFM-Homepage-2026-css-end */
@media (max-width: 767.98px) {
  /* No hover on touch devices -- show the color photo directly, hide the
       default (pre-hover) photo entirely instead of relying on a :hover that
       tap can trigger unpredictably. */
  .tspot__photo-img {
    display: none;
  }

  .tspot__photo-img--hover {
    display: block;
    opacity: 1;
  }
}