/* Лендинг «Запросить КП» (/kp) — перенос design/kp.html.
   Скоуп .kp-page; генерические имена прототипа переименованы с префиксом kp-
   (.hero → .kp-hero, .steps → .kp-steps, .cat-tile → .kp-tile и т.д.),
   чтобы не конфликтовать со стилями home/category. Попап .overlay/.popup —
   общий, объявлен в rfq.css. */

.kp-page{background:var(--paper)}

/* hero: сплит — слева посыл, справа карточка-форма */
.kp-hero{position:relative;background:linear-gradient(180deg,var(--field) 0%,#F8FBF6 78%,var(--paper) 100%);border-bottom:1px solid var(--line)}
.kp-hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding-top:64px;padding-bottom:56px}
.kp-eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.15em;color:var(--green);text-transform:uppercase;margin-bottom:18px}
.kp-page h1{font-size:clamp(30px,3.9vw,48px);line-height:1.1;letter-spacing:-.015em;padding:0}
.kp-page h1 em{font-style:italic;color:var(--green)}
.kp-lede{margin:20px 0 22px;font-size:17px;color:var(--muted);max-width:50ch}
.kp-lede b{color:var(--ink);font-weight:600}
.kp-facts{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:8px}
.kp-facts li{display:flex;gap:10px;font-size:15.5px}
.kp-facts li::before{content:'✓';color:var(--green);font-weight:700}
.kp-facts b{font-weight:700}
.kp-factory{display:block;height:210px;object-fit:contain;margin-top:10px;filter:drop-shadow(0 16px 22px rgba(24,43,30,.16))}

/* карточка быстрой заявки */
.kp-lead{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px;box-shadow:0 30px 60px -30px rgba(30,68,41,.35)}
.kp-lead h3{font-family:var(--disp);font-size:21px;font-weight:700;margin-bottom:4px}
.kp-lead .sub{font-size:13.5px;color:var(--muted);margin-bottom:18px}
.kp-lead .btn{width:100%;height:52px}
.kp-lead .note{font-size:12.5px;color:var(--muted);margin-top:12px;font-family:var(--mono);line-height:1.6;text-align:center}
.kp-lead .note a{text-decoration:underline}

/* поля обеих форм */
.kp-page .f{margin-bottom:12px}
.kp-page .f label,.kp-lead label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.kp-page .f label small,.kp-lead label small{font-weight:400;color:var(--muted)}
.kp-page .f input,.kp-page .f textarea{width:100%;height:46px;border:1.5px solid var(--line);border-radius:10px;padding:0 13px;outline:none;background:#FAFBF8;font-family:inherit;font-size:inherit;color:inherit}
.kp-page .f textarea{height:96px;padding:10px 13px;resize:vertical}
.kp-page .f input:focus,.kp-page .f textarea:focus{border-color:var(--green)}
.kp-page .file{border:1.5px dashed var(--line);border-radius:10px;padding:13px;text-align:center;font-size:13.5px;color:var(--muted);cursor:pointer;background:#FAFBF8}
.kp-page .file:hover{border-color:var(--green)}
.kp-page .fitem{display:flex;align-items:center;gap:10px;background:#FAFBF8;border:1px solid var(--line);border-radius:10px;padding:8px 8px 8px 13px;margin-bottom:8px;text-align:left}
.kp-page .fitem .fname{flex:1;min-width:0;font-size:13.5px;font-weight:600;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.kp-page .fitem button{width:28px;height:28px;border:none;background:none;border-radius:8px;color:var(--muted);font-size:14px;cursor:pointer}
.kp-page .fitem button:hover{background:#FDEBEA;color:#B3261E}
.kp-page .ferr{color:#B3261E;font-size:13px;margin:2px 0 10px;text-align:left}

/* секции */
.kp-page section{padding-top:76px;padding-bottom:76px}
.kp-page h2{font-family:var(--disp);font-weight:700;font-size:clamp(24px,2.8vw,33px);letter-spacing:-.01em}
.kp-page .sec-head{margin-bottom:36px;max-width:60ch}
.kp-page .sec-head p{color:var(--muted);margin-top:10px}
.kp-page .center .sec-head,.kp-page section.center .sec-head{margin-left:auto;margin-right:auto;text-align:center}

/* как работает */
.kp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.kp-step{background:var(--field);border-radius:16px;padding:26px 24px}
.kp-step .no{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--green);letter-spacing:.1em}
.kp-step h3{font-family:var(--disp);font-size:20px;font-weight:700;margin:10px 0 8px}
.kp-step p{font-size:15px;color:var(--muted)}
.kp-step p b{color:var(--ink);font-weight:600}

/* каталог-витрина */
.kp-cats{background:var(--field);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.kp-cat-row{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.kp-tile{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;transition:border-color .14s ease,transform .14s ease}
.kp-tile:hover{border-color:var(--green);transform:translateY(-2px)}
.kp-tile img{height:84px;max-width:85%;object-fit:contain;margin:6px 0 8px;filter:drop-shadow(0 10px 12px rgba(24,43,30,.12))}
.kp-tile .nm{font-size:13.5px;font-weight:600;line-height:1.25}
.kp-tile .ct{font-family:var(--mono);font-size:11px;color:var(--muted)}
.kp-cats .all{display:block;text-align:center;margin-top:26px;font-weight:600;color:var(--green-dn)}
.kp-cats .all:hover{text-decoration:underline}

/* сорсинг */
.kp-sourcing{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.kp-sourcing .pic{background:var(--field);border-radius:20px;padding:34px;display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
.kp-sourcing .pic img{height:110px;object-fit:contain;filter:drop-shadow(0 12px 16px rgba(24,43,30,.14))}
.kp-sourcing h2{margin-bottom:14px}
.kp-sourcing p{color:var(--muted);margin-bottom:14px}
.kp-sourcing p b{color:var(--ink);font-weight:600}
.kp-sourcing ul{list-style:none;margin:18px 0 26px;display:flex;flex-direction:column;gap:10px}
.kp-sourcing li{display:flex;gap:10px;font-size:15px}
.kp-sourcing li::before{content:'✓';color:var(--green);font-weight:700}

/* полная форма КП */
.kp-form-sec{background:var(--field);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.kp-form{max-width:720px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:20px;padding:32px;text-align:left}
.kp-page .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kp-form .btn{width:100%;height:52px;margin-top:6px}
.kp-form .btn:disabled,.kp-lead .btn:disabled{opacity:.6;cursor:not-allowed;transform:none}
.kp-page .form-note{font-size:12.5px;color:var(--muted);margin-top:12px;font-family:var(--mono);line-height:1.6;text-align:center}

/* FAQ */
.kp-faq{max-width:760px;margin:0 auto;text-align:left}
.kp-faq details{border-bottom:1px solid var(--line)}
.kp-faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:18px 2px;font-size:16.5px;font-weight:600;cursor:pointer}
.kp-faq summary::-webkit-details-marker{display:none}
.kp-faq summary::after{content:'+';font-family:var(--mono);font-size:20px;color:var(--green);flex-shrink:0}
.kp-faq details[open] summary::after{content:'−'}
.kp-faq .a{padding:0 2px 18px;color:var(--muted);font-size:15px;max-width:64ch}
.kp-faq .a b{color:var(--ink);font-weight:600}

@media(max-width:980px){
  .kp-hero-in{grid-template-columns:1fr;gap:36px;padding-top:48px}
  .kp-factory{height:170px;margin:14px auto 0}
  .kp-steps{grid-template-columns:1fr}
  .kp-cat-row{grid-template-columns:repeat(3,1fr)}
  .kp-sourcing{grid-template-columns:1fr}
}
@media(max-width:560px){
  .kp-cat-row{grid-template-columns:repeat(2,1fr)}
  .kp-lead{padding:20px}
  .kp-page .grid2{grid-template-columns:1fr}
  .kp-page section{padding-top:56px;padding-bottom:56px}
  .kp-form{padding:22px}
}