/* Landing /vkontakte/, part 3: sections 12–20 (ready-made prompts, comparison, audience,
   connection, control, pricing, limits, FAQ, final call) and the phone sticky button, with their
   tablet and phone rules. Loaded without blocking the first paint; the phone carousel rules live
   in vkontakte-landing-blocks.css. Figma «🎨 Лендинг /vkontakte · v2», frames 7345:627 and 7353:769. */

/* 12 · Ready-made prompts */
.vg-prompts { display: flex; flex-direction: column; align-items: center; gap: 32px; }
.vg-prompts > .vg-carousel { width: 100%; }
.vg-pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.vg-prompt { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-height: 250px; padding: 20px; border: 1px solid var(--v2-line); border-radius: 22px; background: var(--v2-card); }
.vg-prompt p { flex: 1 1 auto; margin: 0; font-size: 15px; font-weight: 500; line-height: 1.45; }
.vg-prompt .btn { margin: 0; }
.vg-prompt[hidden] { display: none; }

/* 13 · Comparison */
.vg-compare,
.vg-whowrap,
.vg-controlwrap,
.vg-pricing { display: flex; flex-direction: column; gap: 40px; }
.vg-ctable { overflow: hidden; border: 1px solid var(--v2-line); border-radius: 28px; background: var(--v2-card); }
.vg-ctable table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.vg-ctable :is(th, td) { padding: 14px 16px; border-bottom: 1px solid var(--v2-line); text-align: left; vertical-align: top; font-size: 13px; line-height: 1.4; }
.vg-ctable thead :is(th, td) { padding-block: 18px; background: var(--v2-sand); color: var(--v2-ink-secondary); font-weight: 700; }
.vg-ctable thead tr > :first-child { width: 210px; }
.vg-ctable tbody th { color: var(--v2-ink); font-weight: 700; }
.vg-ctable tbody td { color: var(--v2-ink-secondary); }
.vg-ctable tbody td.is-lidfly { background: var(--v2-lime-soft); color: var(--v2-forest); font-weight: 700; }
.vg-ctable thead th.is-lidfly { background: var(--v2-lime); color: var(--v2-forest); }
.vg-ctable tbody tr:last-child > * { border-bottom: 0; }
.vg-ccards { display: none; }

/* 14 · Audience */
.vg-who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.vg-wcard { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--v2-line); border-radius: 28px; background: var(--v2-card); }
.vg-wcard__media { position: relative; height: 240px; overflow: hidden; background: var(--tone-panel); }
.vg-wcard__media img { width: 100%; height: 100%; object-fit: cover; }
.vg-wcard__body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 22px 24px 26px; }
.vg-wcard h3 { margin: 0; font-size: 21px; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }
.vg-wcard p { margin: 0; color: var(--v2-ink-secondary); font-size: 15px; line-height: 1.5; }
.vg-team__avas { position: absolute; left: 50%; top: 88px; display: flex; transform: translateX(-50%); }
.vg-team__avas > span { display: grid; place-items: center; width: 64px; height: 64px; margin-right: -14px; border: 4px solid var(--v2-sky); border-radius: 50%; font-size: 27px; font-weight: 700; line-height: normal; }
.vg-team__avas > .vg-team__more { margin-right: 0; background: var(--v2-card); color: var(--v2-sky-ink); }
.vg-team__sticker { position: absolute; left: 50%; top: 172px; color: var(--v2-sky-ink); transform: translateX(-50%); }
.vg-team__emoji { display: none; }

/* 15 · Connection */
.vg-connect { display: flex; flex-direction: column; gap: 32px; padding: 48px; border-radius: 36px; background: var(--v2-sand); }
.vg-connect__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.vg-connect__sticker { margin: 0; color: var(--v2-green); }
.vg-steps3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.vg-step { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 24px; background: var(--v2-card); }
.vg-step > div { display: flex; flex-direction: column; gap: 12px; }
.vg-step__num { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; font-size: 18px; font-weight: 700; line-height: normal; }
.vg-step__num--lime { background: var(--v2-lime); color: var(--v2-forest); }
.vg-step__num--lilac { background: var(--v2-lilac); color: var(--v2-lilac-ink); }
.vg-step__num--peach { background: var(--v2-peach); color: var(--v2-peach-ink); }
.vg-step h3 { margin: 0; font-size: 18px; font-weight: 600; line-height: normal; }
.vg-step p { margin: 0; color: var(--v2-ink-secondary); font-size: 15px; line-height: 1.5; }
.vg-clients { display: flex; flex-direction: column; gap: 20px; padding: 24px 28px; border-radius: 24px; background: var(--v2-card); }
.vg-clients__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.vg-clients__steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: client-step; font-size: 15px; font-weight: 500; line-height: normal; }
.vg-clients__steps li { counter-increment: client-step; }
.vg-clients__steps li::before { content: counter(client-step) ". "; }
.vg-clients__steps[hidden] { display: none; }
.vg-clients__steps a { color: var(--v2-green); }
.vg-addr { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.vg-addr__label { margin: 0; color: var(--v2-ink-muted); font-size: 12px; font-weight: 700; line-height: normal; letter-spacing: 0.06em; text-transform: uppercase; }
.vg-addr__field { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 14px; background: var(--v2-sand); }
.vg-addr__field code { flex: 1 1 auto; min-width: 0; font-family: inherit; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.vg-addr__field .btn,
.vg-copyline .btn,
.vg-connect__foot .btn,
.vg-pricing__foot .btn { flex: none; margin: 0; }
.vg-connect__foot { display: flex; align-items: center; gap: 24px; }
.vg-connect__foot p { flex: 1 1 auto; margin: 0; color: var(--v2-ink-secondary); font-size: 15px; line-height: 1.5; }

/* 16 · Control */
.vg-control { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 20px; margin: 0; padding: 0; list-style: none; }
.vg-ctrl { display: flex; flex-direction: column; gap: 10px; padding: 24px; border: 1px solid var(--v2-line); border-radius: 24px; background: var(--v2-card); }
.vg-ctrl__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--tone); color: var(--tone-ink); }
.vg-ctrl__icon svg { width: 24px; height: 24px; }
.vg-ctrl h3 { margin: 0; font-size: 18px; font-weight: 600; line-height: normal; }
.vg-ctrl p { margin: 0; color: var(--v2-ink-secondary); font-size: 15px; line-height: 1.5; }

/* 17 · Pricing: values are prerendered and refreshed from /api/public/pricing through data-price */
.vg-prices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.vg-price { display: flex; flex-direction: column; gap: 8px; padding: 28px 24px; border: 1px solid var(--v2-line); border-radius: 28px; background: var(--v2-card); }
.vg-price__label { color: var(--v2-ink-secondary); font-size: 14px; font-weight: 700; line-height: normal; }
.vg-price__value { color: var(--v2-ink); font-size: 40px; font-weight: 600; line-height: normal; letter-spacing: -0.03em; }
.vg-price p { margin: 0; color: var(--v2-ink-secondary); font-size: 15px; line-height: 1.5; }
.vg-price--main { border-color: transparent; background: var(--v2-lime); }
.vg-price--main :is(.vg-price__label, .vg-price__value, p) { color: var(--v2-forest); }
.vg-pricing__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px; }
.vg-pricing__foot p { margin: 0; color: var(--v2-ink-muted); font-size: 14px; line-height: normal; }

/* 18 · Not yet available */
.vg-missing { display: flex; flex-direction: column; gap: 20px; padding: 40px; border-radius: 32px; background: var(--v2-sand); }
.vg-h2--s { font-size: 36px; }
.vg-h2--s em { font-size: 1.111em; }
.vg-missing__list { display: grid; grid-template-columns: repeat(3, minmax(0, 352px)); gap: 14px 28px; margin: 0; padding: 0; list-style: none; }
.vg-missing__list li { display: flex; align-items: center; gap: 10px; color: var(--v2-ink-secondary); font-size: 15px; font-weight: 500; line-height: normal; }
.vg-missing__list svg { flex: none; width: 20px; height: 20px; color: var(--v2-peach-ink); }

/* 19 · FAQ: native details; the FAQPage JSON-LD is built from #faq details (build and pricing-text.js) */
.vg-faq { display: grid; grid-template-columns: 340px minmax(0, 1fr); align-items: start; gap: 64px; }
.vg-faq__list { display: flex; flex-direction: column; gap: 10px; }
.vg-qa { border: 1px solid var(--v2-line); border-radius: 20px; background: var(--v2-card); }
.vg-qa[open] { border-color: transparent; background: var(--v2-lime-soft); }
.vg-qa summary { display: flex; align-items: center; gap: 16px; padding: 20px 24px; border-radius: 20px; color: var(--v2-ink); font-size: 17px; font-weight: 600; line-height: normal; list-style: none; cursor: pointer; }
.vg-qa summary::-webkit-details-marker { display: none; }
.vg-qa summary:focus-visible { outline: 3px solid var(--btn-focus-ring); outline-offset: 2px; }
.vg-qa summary > span { flex: 1 1 auto; min-width: 0; }
.vg-qa__icon { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--v2-sand); }
.vg-qa[open] .vg-qa__icon { background: var(--v2-card); }
.vg-qa__icon svg { width: 14px; height: 14px; }
.vg-qa__minus,
.vg-qa[open] .vg-qa__plus { display: none; }
.vg-qa[open] .vg-qa__minus { display: block; }
.vg-qa__a { display: flex; flex-direction: column; gap: 8px; margin-top: -10px; padding: 0 24px 20px; }
.vg-qa__a p { margin: 0; color: var(--v2-ink-secondary); font-size: 15px; line-height: 1.5; }
.vg-qa__a .vg-link { margin-top: 0; }

/* 20 · Final call: stickers without numbers */
.vg-final-sec .vg-wrap { display: flex; flex-direction: column; gap: 32px; }
.vg-final { position: relative; display: flex; justify-content: center; min-height: 520px; padding: 72px 40px; overflow: hidden; border-radius: 40px; background: var(--v2-lime); }
.vg-final__stickers > * { position: absolute; }
.vg-final__s1 { left: 9.76%; top: 113px; color: var(--v2-rose-ink); transform: translate(-50%, -50%) rotate(8deg); }
.vg-final__s2 { left: 10.57%; top: 340px; color: var(--v2-green); transform: translate(-50%, -50%) rotate(-6deg); }
.vg-final__s3 { left: 90.67%; top: 125px; color: var(--v2-sky-ink); transform: translate(-50%, -50%) rotate(-7deg); }
.vg-final__s4 { left: 86.02%; top: 404px; color: var(--v2-green); transform: translate(-50%, -50%) rotate(5deg); }
.vg-final__stickers .vg-final__s5 { display: none; }
.vg-final__content { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; width: 760px; max-width: 100%; text-align: center; }
.vg-final h2 { margin: 0; color: var(--v2-forest); font-size: 56px; font-weight: 600; line-height: 1.05; letter-spacing: -0.03em; }
.vg-final h2 em { font-size: 1.107em; color: var(--v2-forest); }
.vg-final__lead { margin: 0; color: var(--v2-forest); font-size: 19px; line-height: 1.5; }
.vg-copyline { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 12px 12px 20px; border-radius: 20px; background: var(--v2-card); box-shadow: var(--v2-shadow-card); text-align: left; }
.vg-copyline p { flex: 1 1 auto; margin: 0; font-size: 15px; font-weight: 500; line-height: 1.45; }
.vg-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; }
.vg-links nav { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.vg-links__label { margin: 0; color: var(--v2-ink-muted); font-size: 12px; font-weight: 700; line-height: normal; letter-spacing: 0.06em; text-transform: uppercase; }
.vg-links a { color: var(--v2-green); font-size: 17px; font-weight: 600; line-height: 1.35; text-underline-offset: 3px; }
.vg-links a svg { display: inline-block; width: 16px; height: 16px; margin-left: 4px; vertical-align: -2px; }

.vg-sticky { display: none; }

/* --- Tablet --- */
@media (max-width: 1100px) {
  .vg-pgrid,
  .vg-control,
  .vg-prices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vg-connect__head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .vg-faq { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .vg-final__stickers .vg-final__s1,
  .vg-final__stickers .vg-final__s2,
  .vg-final__stickers .vg-final__s3,
  .vg-final__stickers .vg-final__s4 { display: none; }
}

@media (max-width: 900px) {
  .vg-who { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .vg-wcard { flex-direction: row; align-items: center; gap: 12px; padding: 10px; border-radius: 22px; }
  .vg-wcard__media { flex: none; width: 96px; height: 110px; border-radius: 16px; }
  .vg-wcard__body { gap: 6px; padding: 0; }
  .vg-wcard .vg-tag { padding: 3px 9px; font-size: 11px; }
  .vg-wcard h3 { font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0; }
  .vg-wcard p { font-size: 13px; line-height: 1.45; }
  .vg-team__avas,
  .vg-team__sticker { display: none; }
  .vg-team__emoji { display: grid; place-items: center; height: 100%; font-size: 28px; }
  .vg-steps3,
  .vg-clients__body,
  .vg-missing__list { grid-template-columns: minmax(0, 1fr); }
}

/* --- Phone (Figma Mobile 375) --- */
@media (max-width: 760px) {
  .vg-prompts { align-items: stretch; gap: 20px; }
  .vg-prompt { min-height: 220px; padding: 18px; }
  .vg-prompt p { font-size: 14px; }

  .vg-compare { gap: 20px; }
  .vg-whowrap { gap: 16px; }
  .vg-controlwrap,
  .vg-pricing { gap: 12px; }
  .vg-ctable { display: none; }
  .vg-ccards { display: block; }
  .vg-ccard { overflow: hidden; border: 1px solid var(--v2-line); border-radius: 22px; background: var(--v2-card); }
  .vg-ccard__name { margin: 0; padding: 14px 16px; background: var(--v2-sand); color: var(--v2-ink-secondary); font-size: 15px; font-weight: 700; line-height: normal; }
  .vg-ccard dl { margin: 0; }
  .vg-ccard dl > div { padding: 10px 16px; border-top: 1px solid var(--v2-line); }
  .vg-ccard dt { color: var(--v2-ink-muted); font-size: 11px; font-weight: 700; line-height: normal; letter-spacing: 0.04em; text-transform: uppercase; }
  .vg-ccard dd { margin: 2px 0 0; color: var(--v2-ink-secondary); font-size: 13px; line-height: 1.4; }
  .vg-ccard.is-lidfly { border-color: transparent; background: var(--v2-lime-soft); }
  .vg-ccard.is-lidfly .vg-ccard__name { background: var(--v2-lime); color: var(--v2-forest); }
  .vg-ccard.is-lidfly dd { color: var(--v2-forest); font-weight: 700; }

  .vg-connect { gap: 16px; padding: 22px 16px; border-radius: 28px; }
  .vg-connect__head { gap: 12px; }
  .vg-connect__sticker { padding: 6px 11px 6px 10px; font-size: 12px; font-weight: 700; white-space: normal; }
  .vg-steps3 { gap: 10px; }
  .vg-step { flex-direction: row; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; }
  .vg-step > div { gap: 2px; }
  .vg-step__num { width: 36px; height: 36px; font-size: 15px; }
  .vg-step h3 { font-size: 14px; font-weight: 700; }
  .vg-step p { font-size: 13px; line-height: 1.4; }
  .vg-clients { gap: 12px; padding: 14px; border-radius: 18px; }
  .vg-clients__body { gap: 12px; }
  .vg-clients__steps { gap: 12px; font-size: 13px; line-height: 1.45; }
  .vg-addr__label { display: none; }
  .vg-addr__field { padding: 6px 6px 6px 12px; border-radius: 12px; }
  .vg-addr__field code { font-size: 13px; }
  .vg-connect__foot { flex-direction: column; align-items: stretch; gap: 16px; }
  .vg-connect__foot p { font-size: 13px; }
  .vg-connect__foot .btn,
  .vg-pricing__foot .btn { width: 100%; }

  .vg-control { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .vg-ctrl { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: start; column-gap: 12px; row-gap: 2px; padding: 14px; border-radius: 18px; }
  .vg-ctrl__icon { grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; }
  .vg-ctrl__icon svg { width: 20px; height: 20px; }
  .vg-ctrl h3 { font-size: 14px; font-weight: 700; }
  .vg-ctrl p { font-size: 13px; line-height: 1.4; }

  .vg-prices { gap: 10px; }
  .vg-price { gap: 6px; padding: 16px; border-radius: 20px; }
  .vg-price__label { font-size: 12px; }
  .vg-price__value { font-size: 28px; }
  .vg-price p { font-size: 12px; line-height: 1.4; }
  .vg-pricing__foot { flex-direction: column; align-items: stretch; gap: 12px; }
  .vg-pricing__foot p { font-size: 12px; line-height: 1.4; }

  .vg-missing { gap: 12px; padding: 22px 18px; border-radius: 26px; }
  .vg-h2--s { font-size: 26px; }
  .vg-h2--s em { font-size: 1.1em; }
  .vg-missing__list { gap: 12px; }
  .vg-missing__list li { font-size: 14px; line-height: 1.4; }

  .vg-faq { gap: 16px; }
  .vg-qa { border-radius: 18px; }
  .vg-qa summary { gap: 10px; padding: 16px; border-radius: 18px; font-size: 14px; line-height: 1.35; }
  .vg-qa__icon { width: 28px; height: 28px; }
  .vg-qa__icon svg { width: 12px; height: 12px; }
  .vg-qa__a { margin-top: -8px; padding: 0 16px 16px; }
  .vg-qa__a p { font-size: 13px; }

  .vg-final-sec { padding-bottom: 40px; }
  .vg-final-sec .vg-wrap { gap: 24px; }
  .vg-final { flex-direction: column; align-items: center; gap: 14px; min-height: 0; padding: 28px 12px; border-radius: 30px; }
  .vg-final__stickers { display: flex; justify-content: center; }
  .vg-final__stickers .vg-final__s5 { display: inline-flex; position: static; padding: 6px 11px 6px 10px; color: var(--v2-rose-ink); font-size: 12px; font-weight: 700; }
  .vg-final__content { gap: 14px; }
  .vg-final h2 { font-size: 32px; line-height: 1.1; }
  .vg-final h2 em { font-size: 1.094em; }
  .vg-final__lead { font-size: 16px; }
  .vg-copyline { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; border-radius: 18px; }
  .vg-copyline p { font-size: 13px; }
  .vg-links { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .vg-links nav { gap: 8px; }
  .vg-links__label { font-size: 11px; }
  .vg-links a { font-size: 15px; }
}

/* Figma V7m «Нижняя панель · CTA (после первого экрана)» (505:1814). Same breakpoint as the phone mode of the
   section row (page-nav.css): wider, «Подключить группу» stays in the row, so the button is in one place. */
@media (max-width: 729.98px) {
  .vg-sticky { display: block; position: fixed; inset: auto 0 0; z-index: 25; padding: 12px 16px calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid var(--v2-grid); background: var(--v2-cream); transform: translateY(110%); transition: transform var(--motion-duration-medium) var(--motion-ease-out); }
  .vg-sticky.is-visible { transform: none; }
  .vg-sticky .btn { margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .vg-sticky,
  .vg-dots span { transition: none; }
}