/* partneram/partneram.css — «Партнёрская программа» (/partneram/). Поверх servis.css (токены .sp), свои блоки .pp-*.
   Сетка — как kontur.ru/partnership/online: шаги → тёмная панель продуктов → кто рекомендует → серая 3×2 → баннер → форматы → FAQ.
   Без синего (акцент — ink/зелёный), карточки без border, кнопки тёмные (ховер — #000 + белый текст). */

/* заголовок секции слева + ссылка «→» справа */
.sp .pp-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 32px;flex-wrap:wrap;margin-bottom:clamp(24px,3vw,40px)}
.sp .pp-head h2{max-width:30ch}
.sp .pp-more{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700;text-decoration:none;white-space:nowrap}
.sp .pp-more,.sp .pp-more:link,.sp .pp-more:visited{color:var(--ink)}
.sp .pp-more:hover{color:#000}
.sp .pp-more svg,.sp .pp-fmt__go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .16s}
.sp .pp-more:hover svg{transform:translateX(3px)}

/* фото в тёмной шапке (headerWidget в page_headers.php, вместо SVG-мокапа) — вне .sp: шапка шаблонная */
.pp-hdr-photo img{display:block;width:100%;height:auto;aspect-ratio:6/5;object-fit:cover;object-position:center top;border-radius:24px;box-shadow:0 26px 52px rgba(0,0,0,.28)}
@media(min-width:992px){.pp-hdr-photo{max-width:430px;margin-left:auto}}   /* чуть меньше колонки (560) — заказчик 21.10 */

/* 1. шаги */
.sp .pp-steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px)}
.sp .pp-step__n{display:block;font-size:clamp(34px,3.6vw,48px);font-weight:700;letter-spacing:-.03em;line-height:1;margin-bottom:18px}
.sp .pp-step h3{font-size:clamp(18px,1.6vw,21px);font-weight:700;letter-spacing:-.01em;line-height:1.25;margin-bottom:8px}
.sp .pp-step p{color:var(--muted);font-size:15px;line-height:1.5}

/* 2. тёмная панель «что рекомендовать» */
.sp .pp-dark{background:var(--ink);color:#fff;border-radius:clamp(24px,3vw,40px);margin:clamp(12px,1.5vw,20px) clamp(8px,1.5vw,16px);padding:clamp(40px,5vw,72px) 0}
.sp .pp-dark .sub{color:#a4abb5}
.sp .pp-dark .pp-more,.sp .pp-dark .pp-more:link,.sp .pp-dark .pp-more:visited,.sp .pp-dark .pp-more:hover{color:#fff}
.sp .pp-prods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
.sp .pp-prod{background:#1b1e23;border-radius:22px;padding:clamp(22px,2.2vw,30px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px 24px;transition:background .16s}
.sp .pp-prod:hover{background:#22262c}
.sp .pp-prod--hl{background:#fff;color:var(--ink)}
.sp .pp-prod--hl:hover{background:#fff}
.sp .pp-prod h3{font-size:clamp(18px,1.6vw,21px);font-weight:700;letter-spacing:-.01em;line-height:1.25}
.sp .pp-rate{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:14px}
.sp .pp-rate b{font-size:clamp(30px,3vw,38px);font-weight:800;letter-spacing:-.03em;line-height:1;color:#5fd08a}
.sp .pp-prod--hl .pp-rate b{color:var(--ok)}
.sp .pp-rate span{font-size:13.5px;color:#a4abb5}
.sp .pp-prod--hl .pp-rate span{color:var(--muted)}
.sp .pp-prod__links{list-style:none;padding:0;display:flex;flex-direction:column;gap:10px}
.sp .pp-prod__links a{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;line-height:1.35;text-decoration:none}
.sp .pp-prod__links a,.sp .pp-prod__links a:link,.sp .pp-prod__links a:visited{color:#e6e8eb}
.sp .pp-prod__links a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.sp .pp-prod--hl .pp-prod__links a,.sp .pp-prod--hl .pp-prod__links a:link,.sp .pp-prod--hl .pp-prod__links a:visited{color:var(--ink)}
.sp .pp-prod--hl .pp-prod__links a:hover{color:#000}
.sp .pp-dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:#5fd08a;margin-top:6px}
.sp .pp-prod--hl .pp-dot{background:var(--ok)}

/* 3. кто рекомендует */
.sp .pp-who{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:start}
.sp .pp-who__l{position:sticky;top:96px}
.sp .pp-who__list{background:var(--card);border-radius:28px;padding:clamp(8px,1vw,12px) clamp(22px,2.4vw,34px)}
.sp .pp-who__i{padding:clamp(18px,2vw,26px) 0}
.sp .pp-who__i + .pp-who__i{border-top:1px solid var(--line)}
.sp .pp-who__i h3{font-size:clamp(18px,1.6vw,21px);font-weight:700;letter-spacing:-.01em;margin-bottom:6px}
.sp .pp-who__i p{color:var(--muted);font-size:15px;line-height:1.5}

/* 4. почему выгодно (в серой панели .sp-panel) */
.sp .pp-bens{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
.sp .pp-ben{background:#fff;border-radius:22px;padding:clamp(22px,2.2vw,30px);box-shadow:var(--sh-soft);transition:transform .16s,box-shadow .16s}
.sp .pp-ben:hover{transform:translateY(-2px);box-shadow:var(--sh-lift)}
.sp .pp-ben .sp-card__ic{background:var(--card)}
.sp .pp-ben h3{font-size:clamp(18px,1.6vw,21px);font-weight:700;letter-spacing:-.01em;margin-bottom:8px}
.sp .pp-ben p{color:var(--muted);font-size:14.5px;line-height:1.5}

/* 5. баннер */
.sp .pp-banner{background:var(--ink);color:#fff;border-radius:clamp(24px,3vw,36px);padding:clamp(28px,4vw,56px);display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px;align-items:center;overflow:hidden;position:relative}
.sp .pp-banner h2{max-width:18ch}
.sp .pp-banner p{color:#a4abb5;font-size:clamp(15px,1.4vw,17px);line-height:1.5;margin-top:14px;max-width:46ch}
.sp .pp-btn--light{background:#fff;border:1px solid #fff}
.sp .pp-btn--light,.sp .pp-btn--light:link,.sp .pp-btn--light:visited{color:var(--ink)}
.sp .pp-btn--light:hover{background:#000;border-color:#000;color:#fff}
.sp .pp-btn--ghost{background:transparent;border:1px solid rgba(255,255,255,.28)}
.sp .pp-btn--ghost,.sp .pp-btn--ghost:link,.sp .pp-btn--ghost:visited,.sp .pp-btn--ghost:hover{color:#fff}
.sp .pp-btn--ghost:hover{background:#000;border-color:#000}
.sp .pp-banner__art{display:flex;align-items:center;justify-content:flex-end;gap:14px}
.sp .pp-plus{width:clamp(64px,7vw,96px);height:clamp(64px,7vw,96px);border-radius:50%;background:#2a2e35;display:grid;place-items:center;flex:0 0 auto}
.sp .pp-plus svg{width:44%;height:44%;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round}
.sp .pp-arrow{height:clamp(64px,7vw,96px);flex:1 1 auto;max-width:260px;border-radius:999px;background:var(--ok);display:flex;align-items:center;padding:0 clamp(18px,2vw,28px)}
.sp .pp-arrow svg{width:100%;height:24px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* 6. другие форматы */
.sp .pp-fmts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
.sp .pp-fmt{background:var(--card);border:0;border-radius:22px;padding:clamp(22px,2.2vw,30px);display:flex;justify-content:space-between;gap:20px;width:100%;font:inherit;text-align:left;cursor:pointer;text-decoration:none;transition:background .16s,transform .16s}
.sp .pp-fmt,.sp .pp-fmt:link,.sp .pp-fmt:visited,.sp .pp-fmt:hover{color:var(--ink)}
.sp .pp-fmt:hover{background:var(--card-2);transform:translateY(-2px)}
.sp .pp-fmt h3{font-size:clamp(18px,1.6vw,21px);font-weight:700;letter-spacing:-.01em;margin-bottom:8px}
.sp .pp-fmt p{color:var(--muted);font-size:14.5px;line-height:1.5}
.sp .pp-fmt__go{flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:#fff;display:grid;place-items:center;align-self:flex-end}
.sp .pp-fmt:hover .pp-fmt__go{background:#000;color:#fff}

@media(max-width:900px){
  .sp .pp-steps,.sp .pp-prods,.sp .pp-who,.sp .pp-bens,.sp .pp-fmts,.sp .pp-banner{grid-template-columns:minmax(0,1fr)}
  .sp .pp-who__l{position:static}
  .sp .pp-banner__art{justify-content:flex-start}
}
@media(max-width:560px){
  .sp .pp-prod{grid-template-columns:minmax(0,1fr)}
  .sp .pp-banner__art{display:none}
  .sp .pp-banner .sp-btn{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){.sp .pp-ben,.sp .pp-fmt,.sp .pp-more svg{transition:none}}