/*
 * 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-public-align-center, mk-public-align-start, mk-public-align-stretch, mk-public-bottom, mk-public-bottom-sm, mk-public-col-12, mk-public-col-lg-4, mk-public-col-lg-5, mk-public-col-lg-6, mk-public-col-lg-7, mk-public-col-md-4, mk-public-col-md-6, mk-public-col-sm-6, mk-public-col-xl-3, mk-public-electric, mk-public-electric__, mk-public-fill-height, mk-public-fill-width, mk-public-flex-column, mk-public-flex-fill, mk-public-flex-grow, mk-public-flex-md-row, mk-public-flex-row, mk-public-footer, mk-public-gap-2, mk-public-gap-3, mk-public-gap-4, mk-public-justify-center, mk-public-muted, mk-public-page, mk-public-position, mk-public-row, mk-public-semibold, mk-public-small, mk-public-stack, mk-public-stack-top, mk-public-stack-top-lg, mk-public-stack-top-sm, mk-public-stack-top-xs, mk-public-text-center, mk-public-text-light, mk-public-text-light-muted, mk-public-title-dark, mk-public-z-2, mk-public-zero, mk-typo-accent-strong, mk-typo-body, mk-typo-body-lg, mk-typo-body-sm, mk-typo-caption, mk-typo-caption-accent, mk-typo-display, mk-typo-heading, mk-typo-kicker, mk-typo-label-sm, mk-typo-lead, mk-typo-link-sm, mk-typo-muted, mk-typo-on-dark, mk-typo-on-dark-muted, mk-typo-on-dark-soft, mk-typo-value
 */
/* Component: mk_public_layout */
.mk-public-page {
  overflow: hidden;
}

.mk-public-position {
  position: relative;
}

.mk-public-z-2 {
  z-index: 2;
}

.mk-public-text-center {
  text-align: center;
}

.mk-public-electric {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--mk-space-4) var(--mk-space-3);
}

.mk-public-electric__content {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  width: min(var(--mk-public-width), 100%);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.mk-public-title-dark {
  margin: 0 0 var(--mk-space-4);
  color: var(--mk-color-light);
  font-size: var(--mk-font-size-md);
  font-weight: 650;
}

.mk-public-row {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.mk-public-gap-3 {
  gap: var(--mk-space-3);
}

.mk-public-gap-4 {
  gap: var(--mk-space-4);
}

.mk-public-flex-row {
  display: flex;
  gap: var(--mk-space-3);
}

.mk-public-flex-column {
  flex-direction: column;
}

.mk-public-flex-grow {
  flex: 1 1 auto;
}

.mk-public-flex-fill {
  flex: 1 1 0;
}

.mk-public-justify-center {
  justify-content: center;
}

.mk-public-align-center {
  align-items: center;
}

.mk-public-align-start {
  align-items: start;
}

.mk-public-align-stretch {
  align-items: stretch;
}

.mk-public-col-12 {
  grid-column: span 12;
}

.mk-public-stack {
  display: grid;
}

.mk-public-stack-top {
  margin-top: var(--mk-space-4);
}

.mk-public-stack-top-lg {
  margin-top: var(--mk-space-5);
}

.mk-typo-display {
  color: var(--mk-typo-display-color, var(--mk-color-text));
  font-size: var(--mk-typo-display-size, var(--mk-font-size-md));
  line-height: var(--mk-typo-display-line-height, .98);
  font-weight: 760;
  letter-spacing: 0;
}

.mk-typo-heading {
  color: var(--mk-typo-heading-color, var(--mk-color-text));
  font-size: var(--mk-font-size-md);
  line-height: 1.08;
  font-weight: 740;
  letter-spacing: 0;
}

.mk-typo-lead {
  color: var(--mk-typo-lead-color, var(--mk-color-muted));
  font-size: var(--mk-font-size-md);
  font-weight: 300;
  line-height: 1.58;
}

.mk-typo-body {
  color: var(--mk-typo-body-color, var(--mk-color-muted));
  font-size: var(--mk-font-size-base);
  line-height: 1.5;
}

.mk-typo-body-lg {
  color: var(--mk-typo-body-lg-color, var(--mk-color-muted));
  font-size: var(--mk-font-size-md);
  line-height: 1.58;
}

.mk-typo-body-sm {
  color: var(--mk-typo-body-sm-color, var(--mk-color-muted));
  font-size: var(--mk-font-size-sm);
  line-height: 1.5;
}

.mk-typo-caption {
  color: var(--mk-typo-caption-color, var(--mk-color-muted));
  font-size: var(--mk-font-size-xs);
}

.mk-typo-caption-accent {
  color: var(--mk-color-accent);
  font-size: var(--mk-font-size-xs);
}

.mk-typo-label-sm {
  color: var(--mk-typo-label-sm-color, var(--mk-color-text));
  font-size: var(--mk-font-size-sm);
  line-height: 1.3;
  font-weight: 700;
}

.mk-typo-accent-strong {
  color: var(--mk-color-accent);
  font-weight: 750;
}

.mk-typo-link-sm {
  color: var(--mk-color-muted);
  font-size: var(--mk-font-size-sm);
  line-height: 1.4;
}

.mk-typo-value {
  color: var(--mk-color-text);
  font-size: var(--mk-font-size-md);
}

.mk-typo-kicker {
  color: var(--mk-typo-kicker-color, var(--mk-color-accent));
  font-size: var(--mk-font-size-sm);
  font-weight: 750;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: uppercase;
}

.mk-typo-muted {
  color: var(--mk-color-muted);
}

.mk-typo-on-dark {
  --mk-typo-heading-color: var(--mk-color-light);
}

.mk-typo-on-dark-soft {
  --mk-typo-body-lg-color: rgb(var(--mk-light-rgb) / .72);
}

.mk-typo-on-dark-muted {
  --mk-typo-caption-color: rgb(var(--mk-light-rgb) / .62);
  --mk-typo-kicker-color: rgb(var(--mk-light-rgb) / .62);
}

.mk-public-small {
  font-size: var(--mk-font-size-xs);
}

.mk-public-semibold {
  font-weight: 650;
}

.mk-public-text-light {
  color: var(--mk-color-light);
}

.mk-public-text-light-muted {
  color: rgb(var(--mk-light-rgb) / .62);
}

.mk-public-bottom-sm {
  margin-bottom: var(--mk-space-3);
}

.mk-public-bottom {
  margin-bottom: var(--mk-space-4);
}

.mk-public-footer {
  padding-top: var(--mk-space-13);
  padding-bottom: var(--mk-space-13);
  color: var(--mk-color-text);
}

.mk-public-fill-height {
  height: 100%;
}

.mk-public-fill-width {
  width: 100%;
}

@media (min-width: 576px) {
  .mk-public-col-sm-6 {
    grid-column: span 6;
  }
}

@media (min-width: 768px) {
  .mk-public-col-md-4 {
    grid-column: span 4;
  }

  .mk-public-col-md-6 {
    grid-column: span 6;
  }

  .mk-public-flex-md-row {
    flex-direction: row;
  }
}

@media (min-width: 992px) {
  .mk-public-col-lg-4 {
    grid-column: span 4;
  }

  .mk-public-col-lg-5 {
    grid-column: span 5;
  }

  .mk-public-col-lg-6 {
    grid-column: span 6;
  }

  .mk-public-col-lg-7 {
    grid-column: span 7;
  }
}

@media (min-width: 1200px) {
  .mk-public-col-xl-3 {
    grid-column: span 3;
  }
}

@media (max-width: 767.98px) {
  .mk-public-flex-row {
    flex-direction: column;
  }
}
