/* Страница продукта /p/<ключ>. Токены и кнопки — из landing.css; префикс pp-. */
.pp { max-inline-size: 1180px; margin-inline: auto; }
.pp-back { display: block; margin: 0 0 clamp(18px, 3vw, 30px); color: var(--lp-ink-faint); font-size: .88rem; font-weight: 600; text-decoration: none; }
.pp-back:hover { color: var(--lp-jade-deep); }

/* верх: обещание слева, «коротко» справа — на широком экране заполняет всю ширину */
.pp-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 72px); align-items: start; padding-bottom: clamp(36px, 6vw, 72px); }
.pp-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.pp-brand, .pp-kicker { display: inline-block; padding: 7px 15px; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.pp-brand { background: var(--lp-jade-deep); color: #fff; }
.pp-kicker { background: var(--lp-jade-wash); color: var(--lp-jade-deep); }
.pp-h1 { margin: 0 0 22px; font-size: clamp(2.1rem, 5.2vw, 3.9rem); line-height: 1.06; font-weight: 800; letter-spacing: -.03em; color: var(--lp-ink); text-wrap: balance; }
.pp-lead { margin: 0 0 30px; max-inline-size: 54ch; font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.6; color: var(--lp-ink-soft); }
.pp-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.pp-cta__note { font-size: .86rem; color: var(--lp-ink-faint); }

.pp-aside { display: grid; gap: 16px; }
.pp-aside__img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); display: block; }
.pp-aside__box { padding: clamp(22px, 3vw, 32px); border-radius: var(--radius); background: var(--lp-surface); box-shadow: var(--shadow-sm); border: 1px solid var(--lp-jade-line); }
.pp-aside__h { margin: 0 0 16px; font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--lp-jade-deep); }
.pp-checks { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.pp-checks li { position: relative; padding-left: 34px; font-size: 1rem; line-height: 1.45; font-weight: 600; color: var(--lp-ink); }
.pp-checks li::before { content: ""; position: absolute; left: 0; top: .08em; inline-size: 22px; block-size: 22px; border-radius: 50%; background: var(--lp-jade-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f8a7d' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; }

/* разделы: заголовок слева, текст справа */
.pp-sec { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(16px, 4vw, 64px); padding-block: clamp(30px, 5vw, 56px); border-top: 1px solid var(--lp-jade-line); }
.pp-h2 { margin: 0; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.15; font-weight: 800; letter-spacing: -.02em; color: var(--lp-ink); position: sticky; top: 24px; align-self: start; }
.pp-text { font-size: clamp(1.02rem, 1.4vw, 1.12rem); line-height: 1.7; color: var(--lp-ink-soft); max-inline-size: 62ch; }
.pp-text p { margin: 0 0 16px; }
.pp-text p:last-child, .pp-text ul:last-child, .pp-text ol:last-child { margin-bottom: 0; }
.pp-text b, .pp-text strong { color: var(--lp-ink); }
.pp-text ul, .pp-text ol { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: n; }
.pp-text li { position: relative; padding: 14px 18px 14px 52px; border-radius: 16px; background: var(--lp-surface); box-shadow: var(--shadow-sm); color: var(--lp-ink); font-weight: 500; }
.pp-text ul li::before { content: ""; position: absolute; left: 20px; top: 1.35em; inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--lp-jade); }
.pp-text ol li { counter-increment: n; }
.pp-text ol li::before { content: counter(n); position: absolute; left: 14px; top: 50%; transform: translateY(-50%); inline-size: 28px; block-size: 28px; border-radius: 50%; background: var(--lp-jade-deep); color: #fff; font-size: .85rem; font-weight: 800; display: grid; place-items: center; }

.pp-quote { position: relative; margin: clamp(20px, 4vw, 44px) 0; padding: clamp(64px, 8vw, 96px) clamp(24px, 6vw, 80px) clamp(28px, 5vw, 56px); border-radius: var(--radius); background: var(--lp-jade-wash); }
.pp-quote__mark { position: absolute; left: clamp(24px, 6vw, 80px); top: clamp(10px, 2vw, 24px); font-size: clamp(3.5rem, 7vw, 5.5rem); line-height: 1; font-weight: 800; color: var(--lp-jade-soft); opacity: .6; }
.pp-quote p { position: relative; margin: 0 0 14px; max-inline-size: 40ch; font-size: clamp(1.2rem, 2.4vw, 1.7rem); line-height: 1.45; font-weight: 600; color: var(--lp-ink); }
.pp-quote cite { font-style: normal; font-size: .82rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--lp-jade-deep); }

.pp-end { margin-top: clamp(24px, 4vw, 48px); padding: clamp(40px, 7vw, 88px) clamp(24px, 6vw, 80px); border-radius: var(--radius); color: var(--lp-on-dark); background: linear-gradient(158deg, #0f6055 0%, #0b4a44 46%, #072e2a 100%); }
.pp-end__h { margin: 0 0 14px; max-inline-size: 22ch; font-size: clamp(1.7rem, 4vw, 2.8rem); line-height: 1.1; font-weight: 800; letter-spacing: -.025em; text-wrap: balance; }
.pp-end__p { margin: 0 0 28px; max-inline-size: 44ch; color: rgba(242, 247, 245, .86); font-size: 1.05rem; line-height: 1.55; }
.pp-more { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; padding-block: 28px 0; }

@media (max-width: 900px) {
  .pp-hero { grid-template-columns: 1fr; }
  .pp-sec { grid-template-columns: 1fr; gap: 14px; }
  .pp-h2 { position: static; }
}