/* ============================================================
   IconBadge — Small circular icon container
   ============================================================ */

.icon-badge {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           1.625rem;  /* 26px */
  height:          1.625rem;
  border-radius:   var(--radius-full);
  flex-shrink:     0;
  color:           var(--foreground);
}

/* ---- Size ------------------------------------------------- */

.icon-badge[data-size="md"] { width: 2rem; height: 2rem; }  /* 32px */

@media (max-width: 767px) {
  .icon-badge[data-mobile-size="sm"] { width: 1.625rem; height: 1.625rem; }
}


/* ---- Typography ------------------------------------------- */

.icon-badge[data-typography="label"] {
  font-size:   var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-xs);
}


/* ---- Color variants --------------------------------------- */

.icon-badge[data-variant="card"]        { background: var(--card); }
.icon-badge[data-variant="bg"]          { background: var(--background); }
.icon-badge[data-variant="teal"]        { background: color-mix(in srgb, var(--color-brand-blue-400) 40%, transparent); }
.icon-badge[data-variant="teal-active"] { background: color-mix(in srgb, var(--color-brand-blue-400) 60%, var(--background)); }

/* ============================================================
   Eyebrow — icon + label kicker. See Eyebrow.tsx.
   ============================================================ */

.eyebrow {
  display:      inline-flex;
  align-items:  center;
  gap:          0.5rem;            /* 8px */
  height:       36px;
  padding:      5px 0;
  width:        fit-content;       /* never stretch in a column-flex parent */
  font-size:    var(--font-size-sm);
  line-height:  var(--line-height-sm);
  font-weight:  var(--font-weight-regular);
  color:        var(--muted-foreground);
  white-space:  nowrap;
  box-sizing:   border-box;
}

.eyebrow[data-variant="active"] {
  color:       var(--foreground);
  font-weight: var(--font-weight-medium);
}

/* ============================================================
   Container — shared responsive layout constraint
   Provides 1024px max content width with responsive side padding.
   Import this in any component that uses the .container class.
   ============================================================ */

.container {
  position:   relative;
  width:      100%;
  max-width:  calc(1024px + 160px); /* 1024px content + 80px × 2 */
  padding:    0 80px;
  margin:     0 auto;
  box-sizing: border-box;
}

/* Tablet (≤991px): 60px sides */
@media (max-width: 991px) {
  .container {
    padding: 0 60px;
  }
}

/* Landscape mobile (≤767px): 2rem sides */
@media (max-width: 767px) {
  .container {
    padding: 0 2rem;
  }
}



/* ============================================================
   Wide container — 1360px content + 48px side padding
   Used for full-bleed section content blocks (slider, big cards)
   that need to be wider than the standard 1024px text container.
   ============================================================ */

.container-wide {
  width:      100%;
  max-width:  calc(1384px + 96px);   /* 1384px content + 48px × 2 */
  padding:    0 3rem;                /* 48px sides */
  margin:     0 auto;
  box-sizing: border-box;
}

/* Tablet (≤991px): 16px less than .container (60px → 44px) */
@media (max-width: 991px) {
  .container-wide {
    padding: 0 44px;
  }
}

/* Landscape mobile (≤767px): 16px less than .container (2rem → 1rem) */
@media (max-width: 767px) {
  .container-wide {
    padding: 0 1rem;
  }
}


.partner-features {
  width: 100%;
  padding: 4rem 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-family-default);
}

.partner-features__content {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.partner-features__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  width: 100%;
}

.partner-features__heading,
.partner-features__body {
  margin: 0;
}

.partner-features__header .eyebrow {
  height: 38px;
  padding-block: 1px;
  font-weight: var(--font-weight-medium);
}

.partner-features__heading {
  width: 100%;
}

.partner-features__body {
  width: 100%;
  max-width: 800px;
}

.partner-features__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.partner-features__card {
  display: flex;
  min-height: 121px;
  min-width: 0;
  align-items: center;
  gap: 19px;
  padding: 12px 20px 12px 12px;
  background: var(--card);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
}

.partner-features__image {
  display: block;
  width: 96px;
  height: 97px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 12px;
}

.partner-features__card-copy {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.partner-features__card .card-title,
.partner-features__card .card-body {
  width: 100%;
}

@media (max-width: 991px) {
  .partner-features {
    padding: 4.5rem 0;
  }

  .partner-features__content {
    gap: 3rem;
  }

  .partner-features__header {
    gap: 1.5rem;
  }

  .partner-features__heading {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .partner-features__body {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-lg);
  }
}

@media (max-width: 767px) {
  .partner-features {
    padding: 3rem 0;
  }

  .partner-features__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

@media (max-width: 479px) {
  .partner-features__card {
    gap: 16px;
    padding-right: 16px;
  }

  .partner-features__image {
    width: 80px;
    height: 81px;
  }

  .partner-features__card-copy {
    gap: 6px;
  }

  .partner-features__card h3,
  .partner-features__card p {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
  }
}