/* Лендинг «Мобильное приложение» — шорткод [kvdoc_app_page]. Scoped под .vbapl.
   Дизайн из Claude Design (navy #0F1E3A/#192D51, coral #FF8562, periwinkle #6275DD, Onest + Golos). */

.vbapl { box-sizing:border-box; font-family:'Golos Text', system-ui, sans-serif; color:#192D51; }
.vbapl *, .vbapl *::before, .vbapl *::after { box-sizing:border-box; }
.vbapl a { text-decoration:none; color:inherit; }

.vbapl-wrap { max-width:1200px; margin:0 auto; padding:0 32px; }

.vbapl-hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
.vbapl-feat { display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; }
.vbapl-feat.rev { grid-template-columns:.9fr 1.1fr; }
.vbapl-mini { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.vbapl-extra { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:20px; }
.vbapl-cta-grid { display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center; }
.vbapl-cta-grid--noqr { grid-template-columns:1fr; }
.vbapl-hero-phone, .vbapl-feat-photo { display:flex; justify-content:center; }

.vbapl-phone { flex:none; position:relative; width:300px; height:610px; border-radius:44px; background:#192D51; padding:13px; box-shadow:0 40px 80px rgba(25,45,81,.28); }
.vbapl-phone__notch { position:absolute; top:13px; left:50%; transform:translateX(-50%); width:120px; height:26px; background:#192D51; border-radius:0 0 16px 16px; z-index:3; }
.vbapl-phone__screen { position:relative; width:100%; height:100%; border-radius:32px; overflow:hidden; background:#F2F3FB; }
.vbapl-phone__screen img { width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.vbapl-phone__ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; text-align:center; padding:24px; color:#8893a8; font-size:14px; background:linear-gradient(160deg,#F2F3FB,#e3e7f5); }

.vbapl-badge { display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:14px; background:#192D51; color:#fff; transition:opacity .15s ease; }
.vbapl-badge:hover { opacity:.88; }
.vbapl-badge__sub { display:block; font-size:10px; color:#b9c2d6; line-height:1; }
.vbapl-badge__main { display:block; color:#fff; font-family:'Onest', system-ui, sans-serif; font-weight:700; font-size:16px; line-height:1.1; }
.vbapl-badge__r { width:22px; height:22px; border-radius:6px; background:#fff; color:#192D51; display:flex; align-items:center; justify-content:center; font-family:'Onest', system-ui, sans-serif; font-weight:800; font-size:14px; }

@media (max-width:920px){
	.vbapl-wrap { padding:0 16px; }
	.vbapl-hero-grid, .vbapl-feat, .vbapl-feat.rev, .vbapl-cta-grid { grid-template-columns:1fr; gap:32px; }
	.vbapl-feat-photo { order:-1; }
	.vbapl-mini, .vbapl-extra { grid-template-columns:1fr; }
	.vbapl-h1 { font-size:36px !important; }
	.vbapl-phone { width:250px; height:510px; margin:0 auto; }
	/* На мобиле контент героя и CTA — по центру */
	.vbapl-hero-grid > div:first-child,
	.vbapl-cta-grid > div:first-child { text-align:center; }
	.vbapl-hero-grid > div:first-child > p,
	.vbapl-cta-grid > div:first-child > p { margin-left:auto; margin-right:auto; }
	.vbapl-hero-grid > div:first-child > div,
	.vbapl-cta-grid > div:first-child > div { justify-content:center; }
	.vbapl-cta-grid > div:last-child { margin-left:auto; margin-right:auto; }
}