/* ==========================================================================
   Utilities (форс-состояния, helpers для UI-kit)
   ========================================================================== */
/* Форс-состояния, чтобы видеть их в UI-kit без ховера/клика */
.demo-surface {
  padding: var(--space-16);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-18);
  background: var(--color-surface);
}
.demo-surface--alt {
  background: var(--color-surface-2);
}
.demo-grid {
  display: grid;
  gap: var(--space-12);
}
.demo-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.offset-bottom-60-40 {
  padding-bottom: 60px;
}
.app-h1 {
  color: #171717;
  font-family: Montserrat;
  font-size: 2rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin: 0;
}
@media (min-width: 768px) {
  .demo-grid--3\@md {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.visible-mobiles,
.visible-tablets,
.visible-desktop-sm,
.visible-desktop {
  display: none !important;
}
@media (max-width: 767px) {
  .hidden-mobiles {
    display: none !important;
  }
  .visible-mobiles {
    display: block !important;
  }
}
@media(max-width: 1220px) {
  .offset-bottom-60-40 {
    padding-bottom: 40px;
  }
  .app-h1 {
    font-size: 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1179px) {
  .hidden-tablets {
    display: none !important;
  }
  .visible-tablets {
    display: block !important;
  }
}
@media (min-width: 1180px) and (max-width: 1359px) {
  .hidden-desktop-sm {
    display: none !important;
  }
  .visible-desktop-sm {
    display: block !important;
  }
}
@media (min-width: 1360px) {
  .hidden-desktop {
    display: none !important;
  }
  .visible-desktop {
    display: block !important;
  }
}