/* ============================================================
   Конекса — секции главной. Компоненты живут в components.css.
   ============================================================ */

/* ==== Первый экран ============================================
   Цветная плашка со скруглением во всю ширину контейнера: слева
   обещание, справа белая карточка с формой. Как на референсах.
   ============================================================== */

.hero { padding-top: var(--s-4); padding-bottom: var(--s-8); }

.hero__block {
  background: var(--blue-50);
  border-radius: var(--r-block);
  padding: clamp(24px, 3vw, 48px);
  display: grid;
  gap: var(--s-7);
}

.hero__pitch { display: grid; gap: var(--s-5); align-content: center; }
.hero__title { font-size: var(--fs-display); font-weight: 800; line-height: 1.06; letter-spacing: -0.035em; }
.hero__sub { max-width: 44ch; color: var(--ink-600); }

.hero__points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.hero__points li { display: grid; grid-template-columns: 20px 1fr; gap: var(--s-3); margin: 0; font-size: var(--fs-sm); color: var(--ink-600); }
.hero__points svg { width: 20px; height: 20px; color: var(--blue); margin-top: 2px; }

.hero__form {
  background: #fff;
  border-radius: var(--r-card);
  padding: clamp(20px, 2.2vw, 26px);
  display: grid;
  gap: var(--s-3);
  align-content: start;
  box-shadow: var(--shadow-card);
}
.hero__form-title { font-family: var(--font-head); font-size: var(--fs-h4); font-weight: 700; }
.hero__form-price { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.hero__form-new { font-family: var(--font-head); font-size: 1.75rem; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.hero__form-old { font-size: 1.0625rem; color: var(--ink-300); text-decoration: line-through; font-variant-numeric: tabular-nums; }

@media (min-width: 900px) {
  .hero__block { grid-template-columns: minmax(0, 1fr) minmax(320px, 384px); gap: var(--s-9); align-items: center; }
}

/* Первый экран обязан помещаться в окно целиком: на невысоких
   экранах ноутбуков поля и отступы формы ужимаются ещё раз. */
@media (min-width: 900px) and (max-height: 900px) {
  .hero { padding-top: var(--s-3); padding-bottom: var(--s-6); }
  .hero__block { padding: var(--s-7); }
  .hero__form .k-field__control { height: 46px; }
  .hero__form { gap: var(--s-2); padding: var(--s-5); }
  .hero__points { gap: var(--s-2); }
  .hero__pitch { gap: var(--s-4); }
}

/* ==== Площадки ================================================ */

.marketplaces { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-4) var(--s-8); }
.marketplaces__label { font-size: var(--fs-xs); color: var(--ink-400); }
.marketplaces__item { font-family: var(--font-head); font-size: 1.125rem; font-weight: 700; color: var(--ink-900); letter-spacing: -0.02em; }

/* ==== Три шага ================================================ */

.steps { display: grid; gap: var(--s-5); }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); } }

/* ==== Бенто вопросов ==========================================
   Разные размеры плиток и разные подложки, чтобы блок не
   превращался в три одинаковые карточки.
   ============================================================== */

.asks { display: grid; gap: var(--s-4); }
.asks__q { font-family: var(--font-head); font-size: clamp(1.0625rem, 1rem + .5vw, 1.375rem); font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; }
.asks__a { font-size: var(--fs-sm); line-height: 1.55; }

@media (min-width: 700px) {
  .asks { grid-template-columns: repeat(6, 1fr); }
  .asks > *:nth-child(1) { grid-column: span 6; }
  .asks > *:nth-child(2) { grid-column: span 3; }
  .asks > *:nth-child(3) { grid-column: span 3; }
  .asks > *:nth-child(4) { grid-column: span 2; }
  .asks > *:nth-child(5) { grid-column: span 4; }
}
@media (min-width: 1024px) {
  .asks > *:nth-child(1) { grid-column: span 3; grid-row: span 2; }
  .asks > *:nth-child(2) { grid-column: span 3; }
  .asks > *:nth-child(3) { grid-column: span 3; }
  .asks > *:nth-child(4) { grid-column: span 3; }
  .asks > *:nth-child(5) { grid-column: span 3; }
}

/* ==== Команды в табах ========================================= */

/* display не задаём: панель показывает правило вкладок из
   components.css, иначе оно перебивается этим файлом. */
.commands { gap: var(--s-4); }
@media (min-width: 640px) { .commands { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .commands { grid-template-columns: repeat(4, 1fr); } }

.command__ask { font-size: var(--fs-sm); color: var(--ink-600); font-style: italic; }

/* ==== Обучение ================================================ */

.learn { display: grid; gap: var(--s-8); }
.learn__list { display: grid; gap: var(--s-2); }
@media (min-width: 1024px) {
  .learn { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: var(--s-10); align-items: start; }
}

/* ==== Безопасность ============================================ */

.safety { display: grid; gap: var(--s-5); }
@media (min-width: 900px) { .safety { grid-template-columns: repeat(2, 1fr); } }

.safety__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); font-size: var(--fs-sm); }
.safety__list li { display: grid; grid-template-columns: 18px 1fr; gap: var(--s-3); margin: 0; }
.safety__list svg { width: 18px; height: 18px; margin-top: 3px; color: var(--blue); }

/* ==== Тарифы ================================================== */

.plans { display: grid; gap: var(--s-5); }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }

/* ==== Финальный блок ========================================== */

.final { display: grid; gap: var(--s-7); }
.final__form { display: grid; gap: var(--s-4); }
.final__row { display: grid; gap: var(--s-3); }
@media (min-width: 560px) { .final__row { grid-template-columns: 1fr auto; align-items: end; } .final__row .k-btn { height: 54px; } }
@media (min-width: 1024px) { .final { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: var(--s-11); align-items: center; } }