/* ==========================================================================
   Simple2FA — внутренние страницы сайта («Партнёрство», «О компании»).
   Шрифты, палитра, контейнер и кнопки приходят из shared.css и style.css;
   здесь только сетки карточек и шагов, которых больше нигде нет.
   Скругления, границы и расстояния — по общей шкале сайта (см. CLAUDE.md,
   «Стиль сайта»): карточки 24, границы 1 px, теней и градиентов нет.
   ========================================================================== */

.partners-hero { padding: 56px var(--side) 8px; }
.psection { padding: 64px 0; }

/* Серый блок со скруглением внутри колонки — как карточка «мобильного приложения»
   на главной (.app__card), а не заливка во всю ширину экрана. Поля по тем же
   ступеням, что и там. */
.pblock { background: var(--surface); border-radius: 24px; padding: 56px 48px; }
@media (max-width: 768px) { .pblock { padding: 32px 24px; } }
@media (max-width: 480px) { .pblock { padding: 32px 20px; } }

/* Блок с одной мыслью вместо карточек: заголовку не нужен отступ снизу */
.pblock--note .psection__head { margin-bottom: 0; }

.psection__head { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.psection__title { font-size: clamp(26px, 3vw, 34px); font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; }
.psection__head p { margin-top: 14px; font-size: 17px; line-height: 1.6; color: var(--text-2); text-wrap: pretty; }

/* --- Карточки «что даёт партнёрство» --- */
.pcards { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1024px) { .pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .pcards { grid-template-columns: 1fr; } }

.pcard { background: #fff; border: 1px solid var(--border); border-radius: 24px; padding: 28px; }
.pcard__title { font-size: 18px; font-weight: 600; line-height: 1.35; }
.pcard__text { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--text-2); text-wrap: pretty; }

/* Значок над заголовком карточки: квадрат с подложкой акцента, как в панелях главной */
.pcard__icon {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-bottom: 16px;
  border-radius: 8px; background: var(--accent-bg); color: var(--accent);
}
.pcard__icon svg { width: 24px; height: 24px; }

/* --- Шаги «как стать партнёром» --- */
.steps { display: grid; gap: 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: step; }
@media (max-width: 1024px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .steps { grid-template-columns: 1fr; } }
/* Три шага («Стоимость»): три колонки на всю ширину, ниже 768 — в столбик, чтобы
   третий шаг не оставался один в ряду */
.steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1024px) { .steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px)  { .steps--3 { grid-template-columns: 1fr; } }

.step { position: relative; padding-top: 20px; border-top: 1px solid var(--border); }
.step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin-bottom: 12px;
  border-radius: 8px; background: var(--accent); color: #fff;
  font-size: 15px; font-weight: 600; line-height: 1;
}
.step__title { font-size: 17px; font-weight: 600; line-height: 1.35; }
.step__text { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
.step__text a { color: var(--accent); }
.step__text a:hover { color: var(--accent-hover); }

/* --- Проза «О компании»: колонка уже общей, сплошной текст на 1348 не читается --- */
.ptext { max-width: 820px; margin: 0 auto; }
.ptext p { margin-top: 20px; font-size: 17px; line-height: 1.65; color: var(--text-2); text-wrap: pretty; }
.ptext p:first-child { margin-top: 0; }
/* Вопросы-ответы («Стоимость»): вопрос отстоит от предыдущего ответа заметно
   дальше, чем от своего, — иначе он читается как продолжение предыдущего */
.ptext h3 { margin-top: 36px; font-size: 18px; font-weight: 600; line-height: 1.35; }
.ptext h3:first-child { margin-top: 0; }
.ptext h3 + p { margin-top: 10px; }

/* --- Реквизиты: две колонки «название — значение» --- */
.pdl { max-width: 820px; margin: 0 auto; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 0; }
.pdl dt, .pdl dd { padding: 14px 0; border-top: 1px solid var(--border); margin: 0; font-size: 15px; line-height: 1.6; }
.pdl dt { color: var(--text-2); }
.pdl dd { color: var(--text); }
.pdl dd a { color: var(--accent); }
.pdl dd a:hover { color: var(--accent-hover); }
@media (max-width: 640px) {
  .pdl { grid-template-columns: 1fr; }
  .pdl dt { padding-bottom: 0; }
  .pdl dd { padding-top: 4px; border-top: 0; }
}