/* Коммерческое предложение: одна вёрстка для CRM (превью), ссылки клиента (/p/…) и печати в PDF.
   Это документ для продажи, поэтому фирменных цветов здесь больше, чем в интерфейсе CRM.
   Оформления: brand — фирменное, fun — детский праздник, strict — для организаций. */
.kp{--y:#FCDA54;--o:#FF5B35;--g:#50C06A;--pk:#FAA1E5;--b:#2C6CD0;--k:#0A0B0C;--m:#5E6472;--l:#E6E7EB;--sf:#F6F6F4;
  background:#fff;color:var(--k);font-family:'Onest',-apple-system,'Segoe UI',Arial,sans-serif;font-size:15px;line-height:1.5;max-width:880px;margin:0 auto;
  position:relative;overflow:hidden;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.kp *{box-sizing:border-box}
.kp svg.i{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.kp svg.i.xs{width:13px;height:13px}.kp svg.i.s{width:15px;height:15px}
.kp h1,.kp h2,.kp h3{font-family:'Unbounded','Onest',sans-serif;letter-spacing:-.02em;margin:0}
.kp-cover{position:relative;padding:40px 52px 44px;overflow:hidden}
.kp-top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;position:relative;z-index:2}
.kp-top .logo{width:150px;color:var(--k)}
.kp-num{font-size:12.5px;color:var(--m);text-align:right;line-height:1.45}
.kp-num b{color:var(--k);font-weight:700}
.kp-for{margin-top:44px;font-size:13px;font-weight:600;color:var(--m);text-transform:uppercase;letter-spacing:.08em;position:relative;z-index:2}
.kp h1{font-size:40px;line-height:1.1;font-weight:700;margin-top:10px;max-width:640px;position:relative;z-index:2}
.kp-facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;position:relative;z-index:2}
.kp-facts span{display:inline-flex;align-items:center;gap:7px;background:var(--sf);border-radius:30px;padding:7px 14px;font-size:13.5px;font-weight:600}
.kp-intro{font-size:16px;line-height:1.6;max-width:640px;margin:22px 0 0;color:#2B2E35;position:relative;z-index:2}
.kp-sec{padding:34px 52px;border-top:1px solid var(--l)}
.kp h2{font-size:22px;font-weight:700;margin-bottom:20px;display:flex;align-items:center;gap:12px}
.kpcs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.kpc{border:1px solid var(--l);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;break-inside:avoid;page-break-inside:avoid;background:#fff;position:relative}
.kpc-im{aspect-ratio:16/9;background-size:cover;background-position:center;cursor:zoom-in}
.kpc-ph{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:6px 6px 0}
.kpc-ph.n1{grid-template-columns:1fr}.kpc-ph.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.kpc-ph i{position:relative;aspect-ratio:4/3;border-radius:10px;background:#F1F1EE center/cover no-repeat;cursor:zoom-in;overflow:hidden}
.kpc-ph.n1 i{aspect-ratio:16/9}
.kpc-ph i:hover{filter:brightness(1.06)}
.kpc-ph b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(10,11,12,.42);color:#fff;font-size:18px;font-weight:700;font-style:normal}
.kp-lb{position:fixed;inset:0;z-index:100;background:rgba(10,11,12,.92);display:flex;align-items:center;justify-content:center;padding:56px 64px}
.kp-lb img{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px}
.kp-lb-x{position:absolute;top:12px;right:14px;width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:26px;line-height:1;cursor:pointer}
.kp-lb-n{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:30px;line-height:1;cursor:pointer}
.kp-lb-n.l{left:12px}.kp-lb-n.r{right:12px}.kp-lb-x:hover,.kp-lb-n:hover{background:rgba(255,255,255,.26)}
.kp-lb-c{position:absolute;bottom:14px;left:0;right:0;text-align:center;color:#fff;font-size:13.5px;font-weight:600;opacity:.85}
@media (max-width:600px){.kp-lb{padding:56px 8px}.kp-lb-n{display:none}}
.kpc-b{padding:16px 18px 18px;display:flex;flex-direction:column;gap:7px;flex:1;position:relative;overflow:hidden}
/* фирменные фигуры в правом верхнем углу карточки: круг цвета категории, кольцо и точка — как на обложке КП */
.kpc-deco{position:absolute;right:-30px;top:-34px;width:104px;height:104px;border-radius:50%;background:var(--cc);pointer-events:none}
.kpc-deco::before{content:"";position:absolute;left:-26px;top:58px;width:16px;height:16px;border-radius:50%;border:3px solid var(--k);background:#fff}
.kpc-deco::after{content:"";position:absolute;left:-6px;top:96px;width:9px;height:9px;border-radius:50%;background:var(--k)}
.kpc-cat{align-self:flex-start;font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--k);background:color-mix(in srgb,var(--cc) 35%,#fff);
  border:1.5px solid var(--k);border-radius:20px;padding:3px 10px;transform:rotate(-2.5deg);position:relative;z-index:1;margin-bottom:2px}
.kpc h3{font-size:16px;font-weight:650;line-height:1.25;padding-right:58px;position:relative;z-index:1}
.kpc p,.kpc ul,.kpc-m{position:relative;z-index:1}
.kpc p{margin:0;font-size:13.5px;color:#3B3F48;line-height:1.5}
.kpc ul{margin:2px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:3px}
.kpc li{font-size:13px;padding-left:16px;position:relative;color:#2B2E35}
.kpc li::before{content:"";position:absolute;left:2px;top:8px;width:6px;height:6px;border-radius:50%;background:var(--cc)}
.kpc-m{display:flex;gap:12px;margin-top:auto;padding-top:6px;font-size:12.5px;color:var(--m);font-weight:600}
.kpc-m span{display:inline-flex;align-items:center;gap:5px}
.kpt{width:100%;border-collapse:collapse;font-size:14px}
.kpt th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--m);font-weight:700;padding:0 10px 10px;border-bottom:2px solid var(--k)}
.kpt td{padding:12px 10px;border-bottom:1px solid var(--l);vertical-align:top}
.kpt td b{font-weight:600}.kpt td small{display:block;color:var(--m);font-size:12px}
.kpt .r{text-align:right;white-space:nowrap}
.kpt tfoot td{border-bottom:0;padding:8px 10px;color:var(--m)}
.kpt tfoot tr.tot td{font-family:'Unbounded','Onest',sans-serif;font-size:22px;font-weight:700;color:var(--k);padding-top:16px}
.kpv{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;align-items:stretch}
.kpv-c{border:1.5px solid var(--l);border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:12px;break-inside:avoid;page-break-inside:avoid;background:#fff}
.kpv-c.on{border-color:var(--k);box-shadow:0 0 0 3px var(--y)}
.kpv-n{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--m)}
.kpv-h h3{font-size:18px;margin-top:4px}
.kpv-h p{margin:6px 0 0;font-size:13px;color:var(--m)}
.kpv ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;flex:1}
.kpv li{display:flex;gap:10px;justify-content:space-between;font-size:13.5px;border-bottom:1px dashed var(--l);padding-bottom:7px}
.kpv li b{font-weight:600;white-space:nowrap}
.kpv-d{font-size:13px;color:var(--o);font-weight:700}
.kpv-t{font-family:'Unbounded','Onest',sans-serif;font-size:26px;font-weight:700;letter-spacing:-.02em}
.kpv-btn{border:0;background:var(--y);color:var(--k);border-radius:12px;height:46px;font-weight:700;font-size:14.5px;cursor:pointer;font-family:inherit}
.kpv-btn:hover{background:#F5CC2E}
.kpv-ok{display:flex;align-items:center;gap:8px;justify-content:center;background:var(--y);border-radius:12px;height:46px;font-weight:700;font-size:14px}
.kpv-one{margin-top:18px;max-width:320px;margin-left:auto}
.kpv-one .kpv-btn,.kpv-one .kpv-ok{width:100%}
.kpa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.kpa div{display:flex;gap:14px;align-items:flex-start;background:var(--sf);border-radius:16px;padding:16px 18px;break-inside:avoid}
.kpa span{font-family:'Unbounded',sans-serif;font-weight:700;font-size:15px;color:var(--k);background:var(--y);border-radius:10px;min-width:38px;height:38px;display:flex;align-items:center;justify-content:center}
.kpa p{margin:0;font-size:14px;line-height:1.45}
.kpterms{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.kpterms li{padding-left:26px;position:relative;font-size:14.5px}
.kpterms li::before{content:"";position:absolute;left:4px;top:7px;width:10px;height:10px;border-radius:3px;background:var(--y);transform:rotate(45deg)}
.kp-foot{padding:34px 52px 40px;background:var(--sf)}
.kp-outro{font-family:'Unbounded','Onest',sans-serif;font-size:20px;font-weight:600;margin:0 0 22px;letter-spacing:-.02em;line-height:1.3}
.kp-contacts{display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between;align-items:flex-start}
.kp-mg{display:flex;gap:14px;align-items:center;background:#fff;border-radius:18px;padding:14px 18px 14px 14px}
.kp-av{width:52px;height:52px;border-radius:50%;background:var(--y);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;flex:none}
.kp-mg b{display:block;font-size:15px}.kp-mg div span{display:block;font-size:12.5px;color:var(--m)}
.kp-mg a{display:block;font-size:14px;font-weight:600;color:var(--k);text-decoration:none}
.kp-co{display:flex;flex-direction:column;font-size:13px;color:var(--m);text-align:right}
.kp-co b{color:var(--k);font-size:14px}
.kp-valid{margin-top:20px;font-size:12.5px;color:var(--m)}

/* --- brand: фирменная плашка и жёлтый угол */
.kp-brand .kp-cover{background:linear-gradient(180deg,#FFFBEA,#fff 85%)}
.kp-brand .kp-cover::after{content:"";position:absolute;right:-120px;top:-140px;width:420px;height:420px;border-radius:50%;background:var(--y);opacity:.55}
.kp-badge{position:absolute;right:52px;top:150px;z-index:2;background:var(--pk);color:var(--k);font-style:normal;font-family:'Unbounded',sans-serif;font-weight:700;font-size:13px;line-height:1.2;
  text-transform:uppercase;padding:12px 16px;border-radius:14px;transform:rotate(6deg);letter-spacing:.02em;text-align:center}
.kp-brand .kp-facts span{background:#fff;border:1px solid var(--l)}
.kp-brand h2::before{content:"";width:12px;height:12px;border-radius:4px;background:var(--y);transform:rotate(45deg)}

/* --- fun: детский праздник — конфетти фирменными цветами */
.kp-fun .kp-cover{background:#FFF7D6}
.kp-fun .kp-cover i{position:absolute;border-radius:50%;z-index:1}
.kp-c1{width:190px;height:190px;background:var(--pk);right:-60px;top:104px}
.kp-c2{width:96px;height:96px;background:var(--g);right:150px;bottom:-40px}
.kp-c3{width:56px;height:56px;background:var(--b);right:44px;bottom:34px}
.kp-c4{width:24px;height:24px;background:var(--o);right:250px;top:132px}
.kp-c5{width:42px;height:42px;border:6px solid var(--k);background:transparent;right:176px;top:176px}
.kp-fun .kp-facts span{background:#fff;box-shadow:0 0 0 1.5px var(--k)}
.kp-fun h1{max-width:560px}
.kp-fun h2::after{content:"";flex:1;height:3px;border-radius:2px;background:repeating-linear-gradient(90deg,var(--o) 0 22px,var(--g) 22px 44px,var(--pk) 44px 66px,var(--b) 66px 88px,var(--y) 88px 110px);opacity:.85}
.kp-fun .kpc{border-width:1.5px;border-color:var(--k)}
.kp-fun .kpc-b{background:linear-gradient(180deg,color-mix(in srgb,var(--cc) 16%,#fff),#fff 60%)}
.kp-fun .kpv-c{border-color:var(--k)}
.kp-fun .kp-foot{background:#FFF7D6}

/* --- strict: для организаций — монохром, тонкая жёлтая линия */
.kp-strict .kp-cover{border-bottom:6px solid var(--y)}
.kp-strict h1{font-size:34px;font-weight:600}
.kp-strict .kp-facts span{background:transparent;border:1px solid var(--l);border-radius:8px}
.kp-strict .kpc{border-radius:10px}
.kp-strict .kpc-deco{width:70px;height:70px;right:-24px;top:-24px;opacity:.35}
.kp-strict .kpc-deco::before,.kp-strict .kpc-deco::after{display:none}
.kp-strict .kpc-cat{transform:none;border-width:1px;background:#fff}
.kp-strict .kpv-c{border-radius:12px}
.kp-strict .kpa div{border-radius:10px;background:#fff;border:1px solid var(--l)}
.kp-strict .kpa span{background:transparent;border:1.5px solid var(--k)}
.kp-strict .kp-foot{background:#fff;border-top:1px solid var(--l)}
.kp-strict .kpterms li::before{background:var(--k);border-radius:50%;transform:none;width:6px;height:6px;top:9px;left:8px}

@media (max-width:720px){
  .kp-cover{padding:24px 20px 28px}.kp-sec{padding:26px 20px}.kp-foot{padding:26px 20px 30px}
  .kp h1{font-size:28px}.kp-strict h1{font-size:26px}.kp-top .logo{width:118px}
  .kpcs,.kpa{grid-template-columns:1fr}
  .kp-badge{display:none}
  .kp-for{margin-top:28px}
  .kp-co{text-align:left}
  .kpt th:nth-child(2),.kpt td:nth-child(2),.kpt th:nth-child(3),.kpt td:nth-child(3){display:none}
  .kpt tfoot td[colspan]{display:table-cell}
  .kp-c1{width:120px;height:120px;right:-66px;top:130px}.kp-c2,.kp-c3,.kp-c4,.kp-c5{display:none}
}
@media print{
  @page{size:A4;margin:0}
  html,body{background:#fff!important}
  .kp{max-width:none;width:210mm;font-size:13.5px}
  .kp-cover{padding:14mm 16mm 12mm}.kp-sec{padding:9mm 16mm}.kp-foot{padding:10mm 16mm 12mm}
  .kpv-btn{display:none}
  .kp-lb{display:none}.kpc-ph b{display:none}
  .kp h2{break-after:avoid}
}