/*
 * OCFai CSS contract
 * AI_RULE: define only classes matching OCFAI_ALLOWED_PREFIXES in this file.
 * AI_RULE: shared UI patterns must use their canonical component CSS instead of local variants.
 * OCFAI_ROLE: component
 * OCFAI_ALLOWED_PREFIXES: mk-card, mk-card--, mk-feature-band, mk-feature-band__, mk-feature-tile, mk-feature-tile__
 */
/* Component: mk_feature_band */
.mk-feature-band {
  position: relative;
  padding: var(--mk-panel-padding);
  border-radius: var(--mk-radius-panel);
  background: var(--mk-color-dark);
  color: var(--mk-color-light);
  overflow: hidden;
  box-shadow: var(--mk-shadow-soft);
}

.mk-feature-band__canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: var(--mk-color-dark);
}

.mk-feature-band__content {
  position: relative;
  z-index: 1;
}

.mk-feature-band__title {
  max-width: 100%;
  margin: 0;
}

.mk-feature-band__text {
  margin: var(--mk-space-4) 0 0;
}

.mk-feature-band__text--spaced {
  margin-top: var(--mk-space-6);
}

.mk-card--glass {
  border-color: rgb(var(--mk-light-rgb) / .12);
  background: rgb(var(--mk-light-rgb) / .07);
}

.mk-feature-tile {
  min-height: 100%;
  display: grid;
  align-content: start;
  gap: var(--mk-card-gap);
  padding: var(--mk-card-padding);
  border: 1px solid var(--mk-color-line);
  border-radius: var(--mk-card-radius);
  background: var(--mk-color-light);
  box-shadow: var(--mk-shadow-feature-tile);
  overflow-wrap: anywhere;
}

.mk-feature-tile__icon {
  width: var(--mk-feature-icon-size);
  height: var(--mk-feature-icon-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--mk-feature-icon-radius);
  background: rgb(var(--mk-accent-rgb) / .08);
}

.mk-feature-tile__icon-media {
  width: var(--mk-feature-icon-glyph-size);
  height: var(--mk-feature-icon-glyph-size);
  display: block;
  filter: invert(23%) sepia(95%) saturate(3220%) hue-rotate(218deg) brightness(89%) contrast(105%);
}

.mk-feature-tile__title {
  margin: 0;
}

.mk-feature-tile__text {
  margin: 0;
}