/* ============================================================
   КАК СТЫКУЕТСЯ — таблица способов интеграции

   Единственный блок проекта с настоящей таблицей. Появилась она
   не для разнообразия: разбор топа показал, что у конкурентов
   таблиц нет вовсе, а сравнение четырёх способов по трём признакам
   списком не читается — глазу нужны колонки.

   Таблица едет вбок внутри своей обоймы (overflow-x на .how__tablewrap),
   а не растягивает страницу: на 390px четыре колонки иначе не влезают,
   и горизонтальная прокрутка ушла бы на <body>.
   ============================================================ */
.how{
  display:grid;
  gap:clamp(18px, 1.8vw, 30px);
}

.how__tablewrap{
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:var(--r-card);
  background:var(--surface);
  box-shadow:var(--shadow-card);
}

.how__table{
  border-collapse:collapse;
  width:100%;
  min-width:720px;              /* ниже этого колонки схлопываются в кашу */
  font-size:clamp(14px, 1.02vw, 16px);
}

.how__table th,
.how__table td{
  text-align:left;
  vertical-align:top;
  padding:clamp(12px, 1.1vw, 18px) clamp(14px, 1.2vw, 20px);
  border-bottom:1px solid var(--line);
}

.how__table thead th{
  font-size:clamp(12px, .8vw, 13px);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--fg-mute);
  font-weight:600;
  white-space:nowrap;
}

/* Первая колонка — название способа. Это заголовок строки (th scope=row),
   поэтому выделяется весом и акцентом, а не отдельным классом. */
.how__table tbody th{
  font-weight:600;
  color:var(--accent-1);
  width:1%;
  white-space:nowrap;
}

.how__table tbody tr:last-child th,
.how__table tbody tr:last-child td{ border-bottom:0; }

.how__table tbody tr:hover{ background:var(--accent-wash); }

/* ------------------------------------------------------------
   Пояснение под таблицей. Слот знака слева — по той же причине,
   что в блоке возражений: два текстовых блока подряд проваливаются
   в лист бумаги. Форма onec здесь уместна, хотя в первом экране
   стоит фоторендер того же направления: между ними два экрана
   прокрутки, рядом они не окажутся. */
.how__note{
  display:grid;
  grid-template-columns:minmax(140px, 210px) 1fr;
  gap:clamp(18px, 2vw, 34px);
  align-items:start;
  padding:clamp(18px, 1.8vw, 28px) clamp(18px, 2vw, 32px);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  background:var(--surface);
  box-shadow:var(--shadow-card);
}

.how__art{
  width:100%;
  aspect-ratio:1 / 1;
}
.how__art canvas{ width:100%; height:100%; display:block; }

.how__cap{
  font-size:clamp(14px, .8vw, 14px);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--fg-mute);
  font-weight:600;
  margin:0 0 .6em;
}

.how__note p + p{ margin-top:.8em; }

@media (max-width: 900px){
  .how__note{ grid-template-columns:1fr; }
  .how__art{ max-width:180px; }
}