/* Plain content block — no card border/shadow/background. Layout
   (rail, line, ticks, numbering, spacing) is entirely the parent
   BrandBenefits section's responsibility; this stays a quiet typography
   unit so it never reads as a marketplace feature card. */
.cc_zRr7AL87AP_AMafd3gTtN .brand-benefit-item {
  max-width: 100%; /* actual width comes from the parent rail's grid column */
}

/* ─── Optional badge — thin-ring "certification seal" ───────────────
 * Additive: only rendered when badgeImage is set (see index.tsx), so
 * an existing BrandBenefits placement — which never had this prop and
 * can't have set it — renders with zero DOM/CSS change. Self-contained
 * responsive sizing (not dependent on a parent-provided CSS var) since
 * this item is shared across two different parents (BrandBenefits'
 * rail and BrandCredentials' grid) with no coordination between them.
 * Padding is a FIXED px value, not a percentage — a percentage here
 * combined with a flex-item width driven by clamp(...vw...) is a real
 * Chromium layout bug verified during the BrandCredentialItem work
 * (inflated the badge to ~2.3x its size); fixed px sidesteps it
 * entirely regardless of which flex/grid parent this ends up in.
 */
.cc_zRr7AL87AP_AMafd3gTtN .brand-benefit-item__badge {
  flex: none;
  width: clamp(56px, 18vw, 72px);
  height: clamp(56px, 18vw, 72px);
  border-radius: 50%;
  border: 1px solid var(--color-metallic, #C4A96B);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 10px;
}

@media (min-width: 640px) {
  .cc_zRr7AL87AP_AMafd3gTtN .brand-benefit-item__badge {
    width: clamp(72px, 10vw, 90px);
    height: clamp(72px, 10vw, 90px);
  }
}

@media (min-width: 1024px) {
  .cc_zRr7AL87AP_AMafd3gTtN .brand-benefit-item__badge {
    width: clamp(90px, 6vw, 110px);
    height: clamp(90px, 6vw, 110px);
  }
}

.cc_zRr7AL87AP_AMafd3gTtN .brand-benefit-item__badge-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cc_zRr7AL87AP_AMafd3gTtN .brand-benefit-item__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 400;
  line-height: 1.25;
  color: var(--color-text-primary);
}

.cc_zRr7AL87AP_AMafd3gTtN .brand-benefit-item__description {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

/* Proof-stat (e.g. "≈ 11 AY" / "yeniden geliştirme süreci") — optional,
   only meant for one station. No box/border: the emphasis comes purely
   from the type-scale jump back up to --text-h3 in the display family,
   after the smaller sans-serif description. */
.cc_zRr7AL87AP_AMafd3gTtN .brand-benefit-item__stat {
  margin-top: var(--space-md);
}

.cc_zRr7AL87AP_AMafd3gTtN .brand-benefit-item__stat-value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--font-weight-section-display);
  line-height: 1.15;
  color: var(--color-text-primary);
}

.cc_zRr7AL87AP_AMafd3gTtN .brand-benefit-item__stat-label {
  display: block;
  margin-top: var(--space-xs);
  font-family: var(--font-label);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  color: var(--color-text-muted);
}