/* ===== Страницы разделов: «Бизнесу», «Партнёрам», «Конструктор КП», политика (10.10.2026).
   Работает поверх product-page-v1.css: те же токены, шапка, подвал, кнопки, sec-head. Префикс sp- — только для этих страниц. */

/* полоса раздела под общей шапкой: метка раздела + свои вкладки (как полоса журнала в блоге) */
.sp-bar{border-bottom:1px solid var(--line);background:var(--paper)}
.sp-bar-in{display:flex;align-items:center;gap:clamp(12px,2vw,28px);min-height:58px;padding-block:8px}
.sp-mark{display:inline-flex;align-items:center;gap:10px;flex:none;font:800 15px/1 var(--font-body)}
.sp-mark i{font:600 11px/1 var(--font-mono);font-style:normal;letter-spacing:.08em;border-radius:var(--r-pill);padding:8px 10px;background:var(--ink);color:var(--mint)}
.sp-tabs{display:flex;gap:4px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.sp-tabs::-webkit-scrollbar{display:none}
.sp-tabs a{flex:none;padding:9px 14px;border-radius:var(--r-pill);font:700 14px/1 var(--font-body);color:var(--muted-strong)}
.sp-tabs a:hover{color:var(--ink);background:var(--white)}
.sp-tabs a[aria-current]{background:var(--ink);color:var(--paper)}
.sp-biz .sp-mark i{background:var(--blue);color:#fff}
.sp-prt .sp-mark i{background:#13201c;color:var(--mint)}
.sp-kp .sp-mark i{background:#08110f;color:var(--acid)}

/* первый экран */
.sp-hero{padding:clamp(36px,5vw,84px) 0 clamp(40px,5vw,72px)}
.sp-hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,4vw,72px);align-items:center}
.sp-hero h1{margin:0;font:800 clamp(40px,6vw,96px)/.95 var(--font-display);letter-spacing:-.065em}
.sp-hero h1 em{font-style:normal;color:var(--mint-dark);background:linear-gradient(var(--stroke),var(--stroke)) 0 92%/100% .12em no-repeat}
.sp-lead{margin:clamp(18px,2vw,28px) 0 0;font-size:clamp(17px,1.35vw,21px);line-height:1.45;color:var(--muted-strong);max-width:34em}
.sp-act{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(24px,2.6vw,36px)}

/* секции */
.sp-sec{padding:clamp(56px,6vw,104px) 0}
.sp-sec+.sp-sec{border-top:1px solid var(--line)}
.sp-sec.sp-white{background:var(--white);border-top:0}
.sp-sec.sp-dark{background:var(--ink-surface);color:var(--on-dark);border-top:0}
.sp-dark .sec-head h2 em{color:var(--mint)}
.sp-dark .sec-head p{color:rgba(255,255,255,.7)}

/* сетка карточек: разной важности — разный вес, не одинаковые плитки */
.sp-grid{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:12px}
.sp-card{display:flex;flex-direction:column;gap:10px;background:var(--paper);border-radius:var(--r-l);padding:clamp(20px,2vw,28px);min-width:0}
.sp-white .sp-card{background:var(--paper)}
.sp-sec:not(.sp-white):not(.sp-dark) .sp-card{background:var(--white)}
.sp-dark .sp-card{background:rgba(255,255,255,.05);border:1px solid var(--line-dark)}
.sp-card h3{margin:0;font:800 clamp(19px,1.5vw,24px)/1.12 var(--font-display);letter-spacing:-.045em}
.sp-card p{margin:0;color:var(--muted-strong);font-size:15.5px;line-height:1.5}
.sp-dark .sp-card p{color:rgba(255,255,255,.7)}
.sp-card .mono{color:var(--muted)}
.sp-card .sp-go{margin-top:auto;padding-top:8px;font-weight:800}
a.sp-card{transition:transform .25s}
a.sp-card:hover{transform:translateY(-3px)}
.sp-card.sp-key{background:var(--ink-surface)!important;color:var(--on-dark)}
.sp-card.sp-key p{color:rgba(255,255,255,.72)}
.sp-card.sp-key .mono{color:var(--mint)}

/* последовательность шагов — нумерация только там, где это и правда порядок */
.sp-steps{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:0;border-top:2px solid var(--ink)}
.sp-dark .sp-steps{border-top-color:var(--mint)}
.sp-steps li{counter-increment:s;padding:20px 20px 4px 0;display:flex;flex-direction:column;gap:8px}
.sp-steps li::before{content:counter(s);font:800 clamp(30px,3vw,46px)/1 var(--font-display);letter-spacing:-.06em;color:var(--mint-dark)}
.sp-dark .sp-steps li::before{color:var(--mint)}
.sp-steps b{font:800 18px/1.2 var(--font-body)}
.sp-steps span{color:var(--muted-strong);font-size:15px;line-height:1.5}
.sp-dark .sp-steps span{color:rgba(255,255,255,.7)}

/* тёмный призыв в конце */
.sp-cta{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,4vw,64px);align-items:end;background:var(--ink-surface);color:var(--on-dark);border-radius:var(--r-xl);padding:clamp(28px,4vw,64px)}
.sp-cta h2{margin:0;font:800 clamp(32px,4vw,60px)/1 var(--font-display);letter-spacing:-.06em}
.sp-cta h2 em{font-style:normal;color:var(--mint)}
.sp-cta p{margin:14px 0 0;color:rgba(255,255,255,.72);font-size:17px;max-width:32em}
.sp-cta .sp-act{margin:0;justify-content:flex-end}
.sp-cta .btn{border-color:var(--line-dark);color:#fff}
.sp-cta .btn-main{background:var(--mint);border-color:var(--mint);color:#08110f}
.sp-cta .btn-main .arr{color:#08110f}

/* честная пометка «готовим» — без обещаний */
.sp-note{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:flex-start;margin-top:18px;padding:14px 16px;border-radius:var(--r-m);background:var(--mint-soft);color:var(--ink);font-size:15px;line-height:1.45}
.sp-note b{flex:none}

/* вопросы */
.sp-faq{display:grid;gap:8px;max-width:980px}
.sp-faq details{background:var(--white);border-radius:var(--r-m);padding:0 22px}
.sp-white .sp-faq details{background:var(--paper)}
.sp-faq summary{cursor:pointer;list-style:none;padding:18px 0;font:700 17px/1.35 var(--font-body);display:flex;justify-content:space-between;gap:16px}
.sp-faq summary::-webkit-details-marker{display:none}
.sp-faq summary::after{content:"+";font:800 22px/1 var(--font-display);color:var(--mint-dark);transition:transform .2s}
.sp-faq details[open] summary::after{transform:rotate(45deg)}
.sp-faq details p{margin:0 0 18px;color:var(--muted-strong);line-height:1.55;max-width:60em}

/* текст документа (политика) */
.sp-doc{max-width:760px}
.sp-doc h2{font:800 clamp(22px,2vw,28px)/1.15 var(--font-display);letter-spacing:-.04em;margin:38px 0 10px}
.sp-doc p,.sp-doc li{font-size:17px;line-height:1.6;color:var(--muted-strong)}
.sp-doc .sp-todo{background:#fff4c9;color:#5b4700;border-radius:6px;padding:0 4px}

@media (max-width:980px){
  .sp-hero-grid,.sp-cta{grid-template-columns:minmax(0,1fr)}
  .sp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sp-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sp-cta .sp-act{justify-content:flex-start}
}
/* длинные русские слова в крупных заголовках не должны выталкивать страницу вбок */
.sp-hero h1,.sp-sec .sec-head h2,.sp-cta h2{overflow-wrap:break-word;hyphens:auto}
.sp-sec .sec-head>*{min-width:0}
@media (max-width:620px){
  .sp-hero h1{font-size:clamp(32px,10vw,44px)}
  .sp-sec .sec-head{grid-template-columns:minmax(0,1fr);gap:14px}
  .sp-sec .sec-head h2{font-size:clamp(28px,8.6vw,40px)}
  .sp-cta h2{font-size:clamp(28px,8.6vw,40px)}
  .sp-grid,.sp-steps{grid-template-columns:minmax(0,1fr)}
  .sp-mark b{display:none}
}