/* Страница проекта «кальматрон.рф». Подключается после proto.css (общие блоки). */
.pp-browser--hero img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;background:#fff}
.pp-compare--color .pp-compare__b{filter:none}
.pp-sechead__note{color:var(--color-gray-6);max-width:680px;margin:14px 0 0}

/* два рисунка рядом с подсказками */
.pp-screens__two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px)}
.pp-fig{margin:0;min-width:0}
.pp-fig figcaption{margin-top:14px;font-size:14px;color:var(--color-gray-5)}
.pp-annot--round img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain;border-radius:20px;box-shadow:0 24px 50px -24px rgba(13,37,71,.35),0 0 0 1px rgba(13,37,71,.06);cursor:zoom-in}
.pp-annot--round .pp-pin em{width:230px}

/* bento: своё лицо, регион */
.pp-bit--gs{grid-column:span 7;background:var(--pp-brand-tint);display:grid;grid-template-columns:1fr minmax(160px,230px);gap:24px;align-items:center}
.pp-gs-hint{display:inline-block;margin-top:16px;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--color-gray-5)}
.pp-gs{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:390/336;cursor:pointer;box-shadow:0 18px 40px -20px rgba(13,37,71,.5)}
.pp-gs img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:filter .7s}
.pp-gs span{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;color:#fff;font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:.03em;background:linear-gradient(transparent,rgba(13,37,71,.75))}
.pp-gs:hover img,.pp-gs.on img{filter:none}
.pp-bit--php{grid-column:span 3}
.pp-bit--contact{grid-column:span 4;background:#fff;border:1px solid var(--color-gray-2)}
.pp-contact{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px;font-size:14px}
.pp-contact li{display:flex;gap:12px;align-items:flex-start;line-height:1.4}
.pp-contact i{color:var(--color-theme-hover);font-size:18px;line-height:1.2}

@media(min-width:992px){.pp-steps--4{grid-template-columns:repeat(4,1fr);gap:24px}}
@media(max-width:1199px){.pp-bit--gs{grid-column:span 12}.pp-bit--php{grid-column:span 4}.pp-bit--contact{grid-column:span 8}}
@media(max-width:767px){.pp-screens__two{grid-template-columns:1fr}.pp-bit--gs{grid-template-columns:1fr}.pp-gs{max-width:300px}}
@media(max-width:575px){.pp-bit--php,.pp-bit--contact{grid-column:span 12}}