/* =============================================================
   homepage-bento-v7.css
   The clean rebuild after user rejected v6 trustBento as "messy."
   One job per section. Postiz-inspired bento patterns in CreatorFlow palette.

   Section index:
     .cf-hiw                — How It Works (visual 3-step)
     .cf-triggers-bento     — Triggers Bento (3-col uniform, black)
     .cf-personas-ribbon    — Personas Ribbon (4-col, black)
     .cf-features-bento     — Comprehensive Features Bento (Postiz 778/530 flex-wrap, black) — CENTERPIECE
     .cf-safety             — Safety section (split 2-up, white)
     .cf-social-proof       — Social Proof (3-col uniform, black)

   Brand rules: black = #000000, lime = #d1fe17 sparingly, no shadows,
   no gradients on dark surfaces, 'Clash Grotesk', em-dash banned in copy.
   ============================================================= */

/* =============================================================
   SHARED SECTION TOKENS
   ============================================================= */
.cf-section--black {
  background: #000000;
}
.cf-section--white {
  background: #ffffff;
}

/* =============================================================
   SECTION 5 — COMPREHENSIVE FEATURES BENTO (.cf-features-bento)
   Layout: Postiz 778/530 flex-wrap pattern.
   Container max 1320px, gap 12px. Two card widths: 778 (wide) + 530 (narrow).
   Pairs sum to 778+530=1308 ≈ 1320. Mobile collapses to 1-col stack.
   ============================================================= */
.cf-features-bento {
  background: #000000;
  padding: clamp(56px, 7vw, 96px) clamp(20px, 3vw, 40px);
}

.cf-features-bento__container {
  max-width: 1320px;
  margin: 0 auto;
}

.cf-features-bento__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(40px, 5vw, 64px);
}

.cf-features-bento__badge {
  display: inline-block;
  padding: 6px 14px;
  background: transparent;
  color: #d1fe17;
  border: 1px solid rgba(209, 254, 23, 0.3);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.cf-features-bento__title {
  font-family: 'Clash Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 18px;
}

.cf-features-bento__subtitle {
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.66);
  margin: 0;
}

/* The flex-wrap grid */
.cf-features-bento__grid {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 12px;
}

@media (min-width: 1340px) {
  .cf-features-bento__grid {
    flex-direction: row;
    justify-content: center;
  }
}

/* Card base — flat elevated surface on pure-black section.
   Solid 6% white tint (no gradient — banned on dark) so the card
   reads as lifted from the #000 page. Border at 16% gives a clean edge. */
.cf-features-bento__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  padding: 28px;
  overflow: hidden;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.cf-features-bento__card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(209, 254, 23, 0.6);
  transform: translateY(-2px);
}

@media (min-width: 1340px) {
  .cf-features-bento__card {
    border-radius: 28px;
    padding: 36px;
  }
  .cf-features-bento__card--wide { width: 778px; }
  .cf-features-bento__card--narrow { width: 530px; }
}

/* Lime accent card — flat lime tint, no gradient. Slightly stronger border to mark it as the hero card. */
.cf-features-bento__card--accent-lime {
  background: rgba(209, 254, 23, 0.06);
  border-color: rgba(209, 254, 23, 0.28);
}

.cf-features-bento__card--accent-lime:hover {
  background: rgba(209, 254, 23, 0.09);
  border-color: rgba(209, 254, 23, 0.6);
}

/* Text block (top of card) */
.cf-features-bento__card-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cf-features-bento__card-label {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  width: fit-content;
}

.cf-features-bento__card--accent-lime .cf-features-bento__card-label {
  background: rgba(209, 254, 23, 0.18);
  color: #d1fe17;
  border-color: rgba(209, 254, 23, 0.4);
}

.cf-features-bento__card-pro {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(0, 0, 0, 0.35);
  color: #d1fe17;
  border: 1px solid rgba(209, 254, 23, 0.45);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  width: fit-content;
}

.cf-features-bento__card-title {
  font-family: 'Clash Grotesk', sans-serif;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0;
  max-width: 22ch;
}

.cf-features-bento__card-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  max-width: 50ch;
}

/* Visual area — fixed bounded height, edge-to-edge bleed for cleaner framing.
   Subtle highlight (not darken) so the bottom doesn't sink below the page. */
.cf-features-bento__card-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 260px;
  margin: 0 -28px -28px;
  padding: 18px 28px;
  position: relative;
  background: rgba(255, 255, 255, 0.025);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

@media (min-width: 1340px) {
  .cf-features-bento__card-visual {
    margin: 0 -36px -36px;
    padding: 22px 36px;
    height: 300px;
  }
}

/* Constrain placeholder primitives inside Features Bento */
.cf-features-bento__card-visual .cf-ph-phone {
  max-width: 160px;
  max-height: 270px;
  border-radius: 22px;
  padding: 6px;
}
.cf-features-bento__card-visual .cf-ph-phone__notch {
  width: 56px;
  height: 14px;
  top: 8px;
  border-radius: 8px;
}
.cf-features-bento__card-visual .cf-ph-phone__screen {
  border-radius: 18px;
}
.cf-features-bento__card-visual .cf-ph-phone__statusbar {
  padding: 18px 12px 4px;
}
.cf-features-bento__card-visual .cf-ph-phone__content {
  padding: 8px;
  gap: 6px;
}
.cf-features-bento__card-visual .cf-ph-ui {
  width: 100%;
  max-width: 320px;
  max-height: 100%;
}

/* Tablet */
@media (max-width: 1339px) and (min-width: 768px) {
  .cf-features-bento__grid {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .cf-features-bento__card {
    width: calc(50% - 6px);
  }
}

/* Mobile */
@media (max-width: 767px) {
  .cf-features-bento {
    padding: 56px 16px;
  }
  .cf-features-bento__card {
    width: 100%;
    padding: 24px 22px;
    border-radius: 18px;
  }
  .cf-features-bento__card-title {
    font-size: 22px;
  }
  .cf-features-bento__card-visual {
    margin: 0 -22px -24px;
    padding: 14px 22px;
    height: 240px;
  }
}

/* =============================================================
   SECTION 4b — STATS STRIP (.cf-stats-strip)
   Hard-numbers bridge sitting on the seam between the white How It Works
   block and the black Social Proof block. Black surface so it visually
   merges into Social Proof and creates one solid "scale moment."
   5 cells on desktop, 2-col grid on tablet, single column on mobile.
   ============================================================= */
.cf-stats-strip {
  background: #000000;
  padding: clamp(48px, 6vw, 80px) clamp(20px, 3vw, 40px) clamp(24px, 3vw, 36px);
}

.cf-stats-strip__container {
  max-width: 1280px;
  margin: 0 auto;
}

.cf-stats-strip__header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto clamp(28px, 3.5vw, 40px);
}

.cf-stats-strip__title {
  font-family: 'Clash Grotesk', sans-serif;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 10px;
}

.cf-stats-strip__subtitle {
  font-size: clamp(14px, 1.2vw, 15.5px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.cf-stats-strip__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cf-stats-strip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  text-align: center;
  min-height: 140px;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.cf-stats-strip__item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(209, 254, 23, 0.5);
}

.cf-stats-strip__item--badge {
  background: rgba(209, 254, 23, 0.06);
  border-color: rgba(209, 254, 23, 0.3);
}

.cf-stats-strip__item--badge:hover {
  background: rgba(209, 254, 23, 0.09);
  border-color: rgba(209, 254, 23, 0.6);
}

.cf-stats-strip__badge-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #d1fe17;
  color: #000000;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 2px;
}

.cf-stats-strip__value {
  font-family: 'Clash Grotesk', sans-serif;
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.025em;
  line-height: 1;
}

.cf-stats-strip__item--badge .cf-stats-strip__value {
  color: #d1fe17;
  font-size: clamp(20px, 2.4vw, 28px);
}

.cf-stats-strip__label {
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.02em;
  line-height: 1.35;
  max-width: 18ch;
}

@media (max-width: 1023px) {
  .cf-stats-strip__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .cf-stats-strip__item:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .cf-stats-strip {
    padding: 48px 16px 24px;
  }
  .cf-stats-strip__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .cf-stats-strip__item {
    padding: 22px 14px;
    border-radius: 14px;
    min-height: 116px;
  }
  .cf-stats-strip__item:last-child {
    grid-column: 1 / -1;
  }
  .cf-stats-strip__value {
    font-size: 28px;
  }
  .cf-stats-strip__label {
    font-size: 12px;
  }
}

/* =============================================================
   SECTION 1 — HOW IT WORKS VISUAL (.cf-hiw)
   Layout: 3-column on white, each card has visual top + text bottom.
   Replaces the existing simple cf-hp-steps section.
   ============================================================= */
.cf-hiw {
  background: #ffffff;
  padding: clamp(56px, 7vw, 96px) clamp(20px, 3vw, 40px);
}

.cf-hiw__container {
  max-width: 1280px;
  margin: 0 auto;
}

.cf-hiw__header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto clamp(40px, 5vw, 56px);
}

.cf-hiw__badge {
  display: inline-block;
  padding: 6px 14px;
  background: #d1fe17;
  color: #000000;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.cf-hiw__title {
  font-family: 'Clash Grotesk', sans-serif;
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 600;
  color: #000000;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 16px;
}

.cf-hiw__subtitle {
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.65;
  color: #4b5563;
  margin: 0;
}

.cf-hiw__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  position: relative;
}

.cf-hiw__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: #000000;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  padding: 28px;
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.cf-hiw__step:hover {
  border-color: rgba(209, 254, 23, 0.55);
  transform: translateY(-2px);
}

.cf-hiw__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(209, 254, 23, 0.14);
  color: #d1fe17;
  border: 1px solid rgba(209, 254, 23, 0.35);
  border-radius: 999px;
  font-family: 'Clash Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  width: fit-content;
  padding: 0 12px;
  height: 26px;
}

.cf-hiw__step-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 260px;
  margin: 0 -28px -28px;
  padding: 18px 28px;
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

@media (min-width: 1340px) {
  .cf-hiw__step-visual {
    height: 280px;
  }
}

/* Constrain placeholder primitives inside HIW so columns stay compact */
.cf-hiw__step-visual .cf-ph-phone {
  max-width: 130px;
  max-height: 220px;
  border-radius: 22px;
  padding: 6px;
}
.cf-hiw__step-visual .cf-ph-phone__notch {
  width: 50px;
  height: 12px;
  top: 8px;
  border-radius: 8px;
}
.cf-hiw__step-visual .cf-ph-phone__screen {
  border-radius: 18px;
}
.cf-hiw__step-visual .cf-ph-phone__statusbar {
  padding: 18px 12px 4px;
}
.cf-hiw__step-visual .cf-ph-phone__content {
  padding: 8px 8px;
  gap: 6px;
}
.cf-hiw__step-visual .cf-ph-ui {
  max-width: 220px;
  max-height: 220px;
  padding: 14px;
  gap: 8px;
}
.cf-hiw__step-visual .cf-ph-ui__row {
  padding: 7px 9px;
}
.cf-hiw__step-visual .cf-ph-ui__icon {
  width: 22px;
  height: 22px;
  font-size: 11px;
}

.cf-hiw__step-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cf-hiw__step-label {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  width: fit-content;
}

.cf-hiw__step-title {
  font-family: 'Clash Grotesk', sans-serif;
  font-size: clamp(22px, 2.4vw, 26px);
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin: 0;
}

.cf-hiw__step-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

/* Connector arrows between steps — desktop only */
.cf-hiw__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 52px;
  right: -16px;
  width: 32px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(209, 254, 23, 0.55), transparent);
  z-index: 1;
}

@media (max-width: 1023px) {
  .cf-hiw__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .cf-hiw__step:nth-child(3) {
    grid-column: 1 / -1;
  }
  .cf-hiw__step:not(:last-child)::after {
    display: none;
  }
}

@media (max-width: 767px) {
  .cf-hiw {
    padding: 56px 16px;
  }
  .cf-hiw__grid {
    grid-template-columns: 1fr;
  }
  .cf-hiw__step:nth-child(3) {
    grid-column: auto;
  }
  .cf-hiw__step {
    padding: 24px 22px;
    min-height: auto;
  }
  .cf-hiw__step-visual {
    min-height: 200px;
  }
}

/* =============================================================
   SECTION 2 — TRIGGERS BENTO (.cf-triggers-bento)
   Layout: 3-col bento on WHITE section, WHITE cards w/ #e5e7eb border.
   Harmonizes with Personas Ribbon below; lime accents carry brand.
   ============================================================= */
.cf-triggers-bento {
  background: #ffffff;
  padding: clamp(56px, 7vw, 96px) clamp(20px, 3vw, 40px);
}

.cf-triggers-bento__container {
  max-width: 1280px;
  margin: 0 auto;
}

.cf-triggers-bento__header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto clamp(40px, 5vw, 56px);
}

.cf-triggers-bento__badge {
  display: inline-block;
  padding: 6px 14px;
  background: #000000;
  color: #d1fe17;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.cf-triggers-bento__title {
  font-family: 'Clash Grotesk', sans-serif;
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 600;
  color: #000000;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 16px;
}

.cf-triggers-bento__subtitle {
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.65;
  color: #4b5563;
  margin: 0;
}

/* Uniform 3-col grid — equal cards, equal heights, clean alignment.
   Replaces the old asymmetric Postiz 778/530/full pattern that read as messy
   on white cards. Pattern matches Personas Ribbon directly below. */
.cf-triggers-bento__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1320px;
  margin: 0 auto;
  align-items: stretch;
}

/* Card base — DARK card on white section. Matches Features Bento "Inside the app"
   aesthetic exactly, only the section background differs. */
.cf-triggers-bento__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: #000000;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  padding: 28px;
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.cf-triggers-bento__card:hover {
  border-color: rgba(209, 254, 23, 0.55);
  transform: translateY(-2px);
}

@media (min-width: 1340px) {
  .cf-triggers-bento__card {
    border-radius: 28px;
    padding: 36px;
  }
}

/* Icon chip (top-left) */
.cf-triggers-bento__card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(209, 254, 23, 0.14);
  color: #d1fe17;
  border: 1px solid rgba(209, 254, 23, 0.35);
  border-radius: 12px;
  font-size: 22px;
}

/* Text block */
.cf-triggers-bento__card-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cf-triggers-bento__card-label {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  width: fit-content;
}

.cf-triggers-bento__card-title {
  font-family: 'Clash Grotesk', sans-serif;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0;
  max-width: 22ch;
}

.cf-triggers-bento__card-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  max-width: 50ch;
}

/* Visual area — bounded height, edge-to-edge bleed. Subtle white-tint
   shelf at bottom matches Features Bento exactly. */
.cf-triggers-bento__card-visual {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  flex: 1;
  min-height: 200px;
  margin: 0 -28px -28px;
  padding: 18px 18px 20px;
  position: relative;
  background: #ffffff;
  overflow: hidden;
}

@media (min-width: 1340px) {
  .cf-triggers-bento__card-visual {
    margin: 0 -36px -36px;
    padding: 22px 22px 24px;
    min-height: 220px;
  }
}

.cf-triggers-bento__card-visual .cf-ph-phone {
  max-width: 160px;
  max-height: 270px;
  border-radius: 22px;
  padding: 6px;
}
.cf-triggers-bento__card-visual .cf-ph-phone__notch {
  width: 56px;
  height: 14px;
  top: 8px;
  border-radius: 8px;
}
.cf-triggers-bento__card-visual .cf-ph-phone__screen {
  border-radius: 18px;
}
.cf-triggers-bento__card-visual .cf-ph-phone__statusbar {
  padding: 18px 12px 4px;
}
.cf-triggers-bento__card-visual .cf-ph-phone__content {
  padding: 10px 12px;
  gap: 7px;
}

/* Real DM thread mockup — light IG-style screen, flat on-brand bubbles.
   Replaces the abstract placeholder bars. No gradients, no shadows. */
.cf-triggers-bento__card-visual .cf-ph-phone__screen {
  background: #ffffff;
}
.cf-triggers-bento__card-visual .cf-ph-phone__notch {
  background: #000000;
}
.cf-triggers-bento__card-visual .cf-ph-phone__statusbar-time {
  color: rgba(0, 0, 0, 0.55);
}
.cf-triggers-bento__card-visual .cf-ph-phone__statusbar-dot {
  background: rgba(0, 0, 0, 0.35);
}
.cf-dm__bubble {
  max-width: 80%;
  padding: 7px 11px;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 600;
  border-radius: 14px;
  word-break: break-word;
}
.cf-dm__bubble--in {
  align-self: flex-start;
  background: #f3f4f6;
  color: #111827;
  border-bottom-left-radius: 4px;
}
.cf-dm__bubble--out {
  align-self: flex-end;
  background: #000000;
  color: #ffffff;
  font-weight: 500;
  border-bottom-right-radius: 4px;
}
.cf-dm__context {
  align-self: center;
  font-size: 9px;
  font-weight: 500;
  color: #9ca3af;
}
.cf-dm__tag {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7280;
}
.cf-dm__tag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d1fe17;
}
.cf-dm__link {
  align-self: flex-end;
  width: 84%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}
.cf-dm__link-thumb {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: #d1fe17;
  flex-shrink: 0;
}
.cf-dm__link-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}
.cf-dm__link-text strong {
  font-size: 11px;
  font-weight: 700;
  color: #111827;
  white-space: nowrap;
}
.cf-dm__link-text span {
  font-size: 9.5px;
  color: #6b7280;
  white-space: nowrap;
}

.cf-triggers-bento__footer {
  margin-top: 32px;
  text-align: center;
  font-size: 14px;
  color: #6b7280;
}

.cf-triggers-bento__footer strong {
  color: #000000;
  font-weight: 700;
}

/* Tablet — collapse to 1-col stack (3-up doesn't fit comfortably below 1024px
   with the bounded phone-mockup visual; cleaner to stack than to do 2+1). */
@media (max-width: 1023px) {
  .cf-triggers-bento__grid {
    grid-template-columns: 1fr;
    max-width: 600px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .cf-triggers-bento {
    padding: 56px 16px;
  }
  .cf-triggers-bento__card {
    padding: 24px 22px;
    border-radius: 18px;
  }
  .cf-triggers-bento__card-title {
    font-size: 22px;
  }
  .cf-triggers-bento__card-visual {
    margin: 0 -22px -24px;
    padding: 14px 22px;
    height: 240px;
  }
}

/* =============================================================
   SECTION 4 — PERSONAS RIBBON (.cf-personas-ribbon)
   Layout: 4-col compact on WHITE for clear separation from Triggers (black above).
   ============================================================= */
.cf-personas-ribbon {
  background: #ffffff;
  padding: clamp(56px, 7vw, 96px) clamp(20px, 3vw, 40px);
}

.cf-personas-ribbon__container {
  max-width: 1280px;
  margin: 0 auto;
}

.cf-personas-ribbon__header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto clamp(40px, 5vw, 56px);
}

.cf-personas-ribbon__badge {
  display: inline-block;
  padding: 6px 14px;
  background: #000000;
  color: #d1fe17;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.cf-personas-ribbon__title {
  font-family: 'Clash Grotesk', sans-serif;
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 600;
  color: #000000;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 16px;
}

.cf-personas-ribbon__subtitle {
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.65;
  color: #4b5563;
  margin: 0;
}

.cf-personas-ribbon__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.cf-personas-ribbon__card {
  position: relative;
  background: #000000;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  text-decoration: none;
  transition: border-color 0.25s ease, transform 0.25s ease;
  min-height: 340px;
  overflow: hidden;
}

.cf-personas-ribbon__card:hover {
  border-color: rgba(209, 254, 23, 0.55);
  transform: translateY(-2px);
}

.cf-personas-ribbon__card-avatar-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
}

.cf-personas-ribbon__card-avatar-wrap .cf-ph-avatar {
  width: 56px;
  height: 56px;
  font-size: 18px;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(209, 254, 23, 0.5);
}

.cf-personas-ribbon__card-avatar-wrap .cf-ph-avatar__ring {
  display: none;
}

.cf-personas-ribbon__card-label {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  width: fit-content;
}

.cf-personas-ribbon__card-title {
  font-family: 'Clash Grotesk', sans-serif;
  font-size: 19px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.2;
}

.cf-personas-ribbon__card-desc {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  flex: 1;
}

.cf-personas-ribbon__card-outcomes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.cf-personas-ribbon__card-outcome {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 4px 10px;
}

@media (max-width: 1023px) {
  .cf-personas-ribbon__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .cf-personas-ribbon {
    padding: 56px 16px;
  }
  .cf-personas-ribbon__grid {
    grid-template-columns: 1fr;
  }
  .cf-personas-ribbon__card {
    flex-direction: row;
    min-height: auto;
    align-items: flex-start;
    padding: 22px 20px;
  }
  .cf-personas-ribbon__card-avatar-wrap {
    flex-shrink: 0;
    padding: 0;
  }
  .cf-personas-ribbon__card-avatar-wrap .cf-ph-avatar {
    width: 56px;
    height: 56px;
    font-size: 18px;
  }
}

/* =============================================================
   SECTION 4b — NICHES CLOUD (.cf-niches-cloud)
   Compact pill row below Personas Ribbon. SEO long-tail.
   "Built for" framing, NOT "Used by" — no fabrication.
   ============================================================= */
.cf-niches-cloud {
  background: #ffffff;
  padding: 0 clamp(20px, 3vw, 40px) clamp(40px, 5vw, 64px);
}

.cf-niches-cloud__container {
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
  padding-top: clamp(20px, 3vw, 32px);
}

.cf-niches-cloud__header {
  margin-bottom: 24px;
}

.cf-niches-cloud__badge {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(0, 0, 0, 0.05);
  color: #000000;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.cf-niches-cloud__title {
  font-family: 'Clash Grotesk', sans-serif;
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 600;
  color: #000000;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 8px;
}

.cf-niches-cloud__subtitle {
  font-size: 14px;
  line-height: 1.55;
  color: #6b7280;
  margin: 0 auto;
  max-width: 580px;
}

.cf-niches-cloud__pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.cf-niches-cloud__pill {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  background: #ffffff;
  color: #000000;
  text-decoration: none;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.cf-niches-cloud__pill:hover {
  background: #000000;
  color: #d1fe17;
  border-color: #000000;
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .cf-niches-cloud {
    padding: 0 16px 40px;
  }
  .cf-niches-cloud__container {
    padding-top: 24px;
  }
  .cf-niches-cloud__pill {
    padding: 8px 14px;
    font-size: 13px;
  }
}

/* =============================================================
   SECTION 7 — SAFETY (.cf-safety)
   ONE job: legitimacy. Meta badge + 3 compliance pills. NO testimonials.
   ============================================================= */
.cf-safety {
  background: #ffffff;
  padding: clamp(56px, 7vw, 96px) clamp(20px, 3vw, 40px);
}

.cf-safety__container {
  max-width: 1200px;
  margin: 0 auto;
}

.cf-safety__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(40px, 5vw, 56px);
}

.cf-safety__badge {
  display: inline-block;
  padding: 6px 14px;
  background: #000000;
  color: #d1fe17;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.cf-safety__title {
  font-family: 'Clash Grotesk', sans-serif;
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 600;
  color: #000000;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 16px;
}

.cf-safety__subtitle {
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.65;
  color: #4b5563;
  margin: 0;
}

.cf-safety__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 18px;
  align-items: stretch;
}

.cf-safety__meta-card {
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: space-between;
}

.cf-safety__meta-badge-shell {
  display: flex;
  align-items: center;
  gap: 18px;
}

.cf-safety__meta-img {
  width: 100px;
  height: 100px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 14px;
  flex-shrink: 0;
}

.cf-safety__meta-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.cf-safety__meta-stamp {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cf-safety__meta-stamp-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #d1fe17;
}

.cf-safety__meta-stamp-date {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
}

.cf-safety__meta-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cf-safety__meta-title {
  font-family: 'Clash Grotesk', sans-serif;
  font-size: 24px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
}

.cf-safety__meta-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

.cf-safety__pillars {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cf-safety__pillar {
  background: #000000;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  padding: 18px 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.cf-safety__pillar:hover {
  border-color: rgba(209, 254, 23, 0.55);
  transform: translateY(-1px);
}

.cf-safety__pillar-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(209, 254, 23, 0.14);
  color: #d1fe17;
  border: 1px solid rgba(209, 254, 23, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
}

.cf-safety__pillar-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cf-safety__pillar-label {
  font-family: 'Clash Grotesk', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.cf-safety__pillar-proof {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.5;
}

@media (max-width: 1023px) {
  .cf-safety__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .cf-safety {
    padding: 56px 16px;
  }
  .cf-safety__meta-card {
    padding: 26px;
    border-radius: 20px;
  }
  .cf-safety__meta-badge-shell {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* =============================================================
   SECTION 8 — SOCIAL PROOF (.cf-social-proof)
   ONE job: peer validation. 3 testimonials + Trustpilot rating + CTA.
   ============================================================= */
.cf-social-proof {
  background: #ffffff;
  padding: clamp(56px, 7vw, 96px) clamp(16px, 3vw, 40px);
}

.cf-social-proof__container {
  max-width: 1280px;
  margin: 0 auto;
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: clamp(20px, 2.5vw, 32px);
  padding: clamp(48px, 6vw, 80px) clamp(24px, 4vw, 56px);
}

.cf-social-proof__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(40px, 5vw, 56px);
}

.cf-social-proof__badge {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(209, 254, 23, 0.14);
  color: #d1fe17;
  border: 1px solid rgba(209, 254, 23, 0.3);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.cf-social-proof__title {
  font-family: 'Clash Grotesk', sans-serif;
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 16px;
}

.cf-social-proof__subtitle {
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.66);
  margin: 0;
}

.cf-social-proof__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 36px;
}

.cf-social-proof__card {
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 22px;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.cf-social-proof__card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(209, 254, 23, 0.6);
  transform: translateY(-2px);
}

.cf-social-proof__card--featured {
  background: rgba(209, 254, 23, 0.06);
  border-color: rgba(209, 254, 23, 0.28);
}

.cf-social-proof__card--featured::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 22px;
  right: 22px;
  height: 2px;
  background: #d1fe17;
  border-radius: 0 0 2px 2px;
}

.cf-social-proof__stars {
  display: inline-flex;
  gap: 2px;
}

.cf-social-proof__stars svg {
  width: 16px;
  height: 16px;
}

.cf-social-proof__stars svg path {
  fill: #fbbf24;
}

.cf-social-proof__card-title {
  font-family: 'Clash Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0;
}

.cf-social-proof__card-quote {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.84);
  margin: 0;
  flex: 1;
}

.cf-social-proof__card-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.cf-social-proof__card-initial {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}

.cf-social-proof__card--featured .cf-social-proof__card-initial {
  background: rgba(209, 254, 23, 0.18);
  border: 1px solid rgba(209, 254, 23, 0.4);
  color: #d1fe17;
}

.cf-social-proof__card-name {
  font-size: 13.5px;
  font-weight: 600;
  color: #ffffff;
}

.cf-social-proof__card-country {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.04em;
  margin-top: 2px;
}

.cf-social-proof__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}

.cf-social-proof__rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.cf-social-proof__rating-stars {
  display: inline-flex;
  gap: 2px;
}

.cf-social-proof__rating-stars svg {
  width: 14px;
  height: 14px;
}

.cf-social-proof__rating-text strong {
  color: #ffffff;
  font-weight: 700;
}

.cf-social-proof__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #d1fe17;
  color: #000000;
  text-decoration: none;
  border-radius: 999px;
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid #d1fe17;
  transition: background 0.2s ease, transform 0.2s ease;
}

.cf-social-proof__cta:hover {
  background: #ffffff;
  border-color: #ffffff;
  transform: translateY(-1px);
}

@media (max-width: 1023px) {
  .cf-social-proof__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

@media (max-width: 640px) {
  .cf-social-proof {
    padding: 56px 16px;
  }
  .cf-social-proof__grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 88%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 0 -16px 24px;
    padding: 0 16px 8px;
    gap: 12px;
    -webkit-overflow-scrolling: touch;
  }
  .cf-social-proof__grid::-webkit-scrollbar { display: none; }
  .cf-social-proof__card {
    scroll-snap-align: start;
    padding: 24px 22px;
  }
  .cf-social-proof__footer {
    flex-direction: column;
    gap: 14px;
  }
  .cf-social-proof__cta {
    width: 100%;
    justify-content: center;
  }
}

/* =============================================================
   SECTION 4 (EN-only) — AUDIENCE MATRIX (.cf-audience)
   Merged "personas + niches" block. Replaces the back-to-back
   personasRibbon and nichesCloud on the EN homepage. One badge,
   one headline, one subtitle, persona cards, then a tail row of
   niche pills inside the same section.
   ============================================================= */
.cf-audience {
  background: #ffffff;
  padding: clamp(64px, 8vw, 112px) clamp(20px, 3vw, 40px);
}

.cf-audience__container {
  max-width: 1280px;
  margin: 0 auto;
}

.cf-audience__header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(40px, 5vw, 56px);
}

.cf-audience__badge {
  display: inline-block;
  padding: 6px 14px;
  background: #000000;
  color: #d1fe17;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.cf-audience__title {
  font-family: 'Clash Grotesk', sans-serif;
  font-size: clamp(34px, 5.4vw, 56px);
  font-weight: 600;
  color: #000000;
  letter-spacing: -0.03em;
  line-height: 1.04;
  margin: 0 0 16px;
}

.cf-audience__subtitle {
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.65;
  color: #4b5563;
  margin: 0;
}

.cf-audience__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.cf-audience__card {
  position: relative;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
  min-height: 360px;
}

.cf-audience__card:hover {
  border-color: #000000;
  transform: translateY(-2px);
}

.cf-audience__card-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #000000;
  color: #d1fe17;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  transition: background 0.25s ease, color 0.25s ease;
}

.cf-audience__card-icon svg {
  width: 24px;
  height: 24px;
}

.cf-audience__card:hover .cf-audience__card-icon {
  background: #d1fe17;
  color: #000000;
}

.cf-audience__card-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b7280;
}

.cf-audience__card-title {
  font-family: 'Clash Grotesk', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #000000;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.2;
}

.cf-audience__card-desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: #4b5563;
  margin: 0;
  flex: 1;
}

.cf-audience__card-outcomes {
  font-size: 12.5px;
  font-weight: 600;
  color: #374151;
  margin: 0;
  line-height: 1.5;
}

.cf-audience__card-outcome-sep {
  color: #9ca3af;
  margin: 0 6px;
}

.cf-audience__card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #000000;
  margin-top: 4px;
}

.cf-audience__card-cta-arrow {
  width: 14px;
  height: 14px;
  transition: transform 0.25s ease;
}

.cf-audience__card:hover .cf-audience__card-cta-arrow {
  transform: translateX(3px);
}

.cf-audience__niches {
  margin-top: clamp(48px, 6vw, 72px);
  padding-top: clamp(28px, 3vw, 36px);
  border-top: 1px solid #f3f4f6;
  text-align: center;
}

.cf-audience__niches-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 18px;
}

.cf-audience__niches-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.cf-audience__niche {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  background: #ffffff;
  color: #000000;
  text-decoration: none;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.cf-audience__niche:hover {
  background: #000000;
  color: #d1fe17;
  border-color: #000000;
  transform: translateY(-1px);
}

@media (max-width: 1023px) {
  .cf-audience__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .cf-audience {
    padding: 64px 16px;
  }
  .cf-audience__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .cf-audience__card {
    min-height: auto;
    padding: 24px 22px;
  }
  .cf-audience__niche {
    padding: 8px 14px;
    font-size: 13px;
  }
}

/* ============================================================
   FEATURE INDEX (.cf-feature-index) — complete feature list.
   Light grey section between Features bento (black) and HIW
   (white). Four group cards + black "easy to use" CTA strip.
   No shadows, no gradients, flat lime accents only.
   ============================================================ */
.cf-feature-index {
  background: #f9fafb;
  padding: clamp(4rem, 8vw, 7rem) 0;
}
.cf-feature-index__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 768px) {
  .cf-feature-index__container {
    padding: 0 48px;
  }
}
.cf-feature-index__header {
  max-width: 760px;
  margin: 0 auto 3.25rem;
  text-align: center;
}
.cf-feature-index__badge {
  display: inline-block;
  color: #6b7280;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.cf-feature-index__title {
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #000000;
  line-height: 1.1;
  margin: 0 0 1rem;
}
.cf-feature-index__subtitle {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: #4b5563;
  margin: 0;
}
.cf-feature-index__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: start;
}
@media (min-width: 900px) {
  .cf-feature-index__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.cf-feature-index__group {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: clamp(1.5rem, 3vw, 2rem);
}
.cf-feature-index__group-head {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 1.5rem;
}
.cf-feature-index__group-glyph {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cf-feature-index__group-glyph svg {
  width: 20px;
  height: 20px;
  color: #d1fe17;
}
.cf-feature-index__group-kicker {
  display: block;
  color: #6b7280;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.125rem;
}
.cf-feature-index__group-title {
  font-size: 1.1875rem;
  font-weight: 600;
  color: #000000;
  margin: 0;
  line-height: 1.2;
}
.cf-feature-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.125rem;
}
.cf-feature-index__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.cf-feature-index__item-dot {
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  background: #d1fe17;
  border: 1px solid rgba(0, 0, 0, 0.15);
  margin-top: 0.4rem;
  flex-shrink: 0;
}
.cf-feature-index__item-name {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: #000000;
  line-height: 1.4;
}
.cf-feature-index__item-plan {
  display: inline-block;
  vertical-align: 1px;
  margin-left: 0.5rem;
  padding: 1px 8px;
  border: 1px solid #d1d5db;
  border-radius: 9999px;
  color: #6b7280;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cf-feature-index__item-desc {
  display: block;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #6b7280;
  margin-top: 0.125rem;
}
/* "Easy to use" closing strip */
.cf-feature-index__strip {
  margin-top: 1.25rem;
  background: #000000;
  border-radius: 16px;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .cf-feature-index__strip {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
  }
}
.cf-feature-index__strip-title {
  color: #ffffff;
  font-size: clamp(1.25rem, 2.5vw, 1.625rem);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 0.5rem;
}
.cf-feature-index__strip-copy {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0;
  max-width: 56ch;
}
.cf-feature-index__strip-cta-wrap {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}
@media (min-width: 768px) {
  .cf-feature-index__strip-cta-wrap {
    align-items: flex-end;
    text-align: right;
  }
}
.cf-feature-index__strip-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #d1fe17;
  color: #000000;
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: transform 0.2s ease;
}
.cf-feature-index__strip-cta:hover {
  transform: translateY(-2px);
  background: #d1fe17;
  color: #000000;
}
.cf-feature-index__strip-microcopy {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8125rem;
  margin: 0;
}
@media (max-width: 480px) {
  .cf-feature-index__header {
    margin-bottom: 2.5rem;
  }
  .cf-feature-index__item-desc {
    font-size: 1rem;
  }
}