/* Блок «Odkud k vám přijdou majitelé» (#odkud, после блока 2) и таблица «Kontakt, který je jen váš» (#srovnani, перед
   Ceník) — 10.11, его «да» 11:35 на план («тремя колонками, как карточки цен»; «Таблица да» 11:26). Грамматика блоков 2–7:
   белая карточка секции на земле, Poppins, синий — данные и действия, коралл — только кнопки (здесь его нет). Воронка —
   три карточки как пакеты Ceník (рамка 1 px, радиус 20, галочки пакетов), этапы — те же, что вкладки и чипы цен;
   «S námi» — как флагман цен: земля --land и обводка 2 px синим. Мобилка 390 первой: воронка — стопкой, строка
   таблицы — карточка («S námi» последней, выделена). Аудит скиллами до кадра (помощник 10.11): без иконок в кружках,
   номеров 01/02/03, стрелок между колонками и красно-зелёных ячеек. */
.zd,.vs{position:relative;margin:12px 12px 96px;padding:32px 20px 24px;border-radius:24px;background:#fff;scroll-margin-top:12px;
  box-shadow:0 0 0 1px var(--rule),0 30px 60px -40px rgba(15,23,42,.25)}
.zd-h,.vs-h{font-size:30px;font-weight:500;line-height:1.12;letter-spacing:-.03em;text-wrap:balance}
.zd-h mark,.vs-h mark{color:var(--ink);background:linear-gradient(transparent 60%,var(--mark) 60%,var(--mark) 90%,transparent 90%);
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.zd-lead{margin-top:12px;font-size:16px;line-height:1.55;color:var(--muted);text-wrap:pretty}

/* воронка: три этапа — карточки */
.zd-st{display:grid;gap:12px;margin:24px 0 0;padding:0;list-style:none}
.zd-c{padding:20px 20px 22px;border-radius:20px;background:#fff;box-shadow:inset 0 0 0 1px var(--rule)}
.zd-n{font-size:21px;font-weight:500;line-height:1.25;letter-spacing:-.02em}
.zd-n small{display:block;margin-top:2px;font-size:14px;font-weight:400;line-height:1.45;letter-spacing:0;color:var(--muted)}
.zd-ls{display:grid;gap:10px;margin:16px 0 0;padding:0;list-style:none}
.zd-ls li{position:relative;padding-left:26px;font-size:15px;line-height:1.45;color:var(--ink);text-wrap:pretty}
.zd-ls li::before{content:'';position:absolute;left:3px;top:.45em;width:11px;height:6px;border:solid var(--base2);
  border-width:0 0 2px 2px;transform:rotate(-45deg)}
.zd-then{display:grid;gap:2px;margin-top:12px;padding:16px 20px;border-radius:16px;background:var(--land);font-size:15px;line-height:1.45}
.zd-then b{font-size:16px;font-weight:600}
.zd-sum{max-width:40em;margin-top:24px;font-size:17px;line-height:1.5;color:var(--ink);text-wrap:pretty}
.zd-sum b{font-weight:600;color:var(--base2);white-space:nowrap}

/* таблица: телефон — строка = карточка, у значения подпись варианта */
.vs-t{margin-top:24px}
.vs table{width:100%;border-collapse:separate;border-spacing:0}
.vs thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.vs tbody,.vs tr,.vs th,.vs td{display:block}
.vs tbody{display:grid;gap:12px}
.vs tr{padding:16px 16px 14px;border-radius:20px;box-shadow:inset 0 0 0 1px var(--rule)}
.vs tbody th{font-size:17px;font-weight:500;line-height:1.3;letter-spacing:-.01em;text-align:left;color:var(--ink)}
.vs td{display:grid;grid-template-columns:minmax(0,8.5em) minmax(0,1fr);column-gap:12px;padding:10px 0;
  border-top:1px solid var(--rule);font-size:15px;line-height:1.4;color:var(--muted)}
.vs td::before{content:attr(data-o);font-size:13px;line-height:1.55;color:var(--muted)}
.vs th+td{margin-top:10px}
.vs td.us{margin:4px -8px 0;padding:12px 8px;border-top:0;border-radius:12px;background:var(--land);
  box-shadow:inset 0 0 0 2px var(--base2);color:var(--ink);font-weight:500}
.vs td.us::before{font-weight:600;color:#1B45B0}
.vs-src{margin-top:16px;font-size:13px;line-height:1.5;color:var(--muted)}

/* от планшета — настоящая таблица; «S námi» — колонка-флагман */
@media (min-width:768px){
  .vs table{table-layout:fixed}
  .vs thead{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;display:table-header-group}
  .vs tbody{display:table-row-group}
  .vs tr{display:table-row;padding:0;border-radius:0;box-shadow:none}
  .vs th,.vs td{display:table-cell}
  .vs thead :is(th,td){padding:0 20px 16px;font-size:15px;font-weight:500;line-height:1.3;color:var(--muted);text-align:left;vertical-align:bottom}
  .vs tbody :is(th,td){padding:20px;border-top:1px solid var(--rule);font-size:16px;line-height:1.45;vertical-align:top}
  .vs tbody th{width:22%;font-size:16px}
  .vs td::before{content:none}
  .vs th+td{margin-top:0}
  .vs thead td{border-top:0}
  .vs thead th.us{padding-top:20px;border-radius:16px 16px 0 0;background:var(--land);
    box-shadow:inset 2px 2px 0 var(--base2),inset -2px 0 0 var(--base2);font-size:17px;font-weight:600;color:var(--ink)}
  .vs td.us{margin:0;padding:20px;border-top:1px solid #C9D6EE;border-radius:0;box-shadow:inset 2px 0 0 var(--base2),inset -2px 0 0 var(--base2)}
  .vs tr:last-child td.us{border-radius:0 0 16px 16px;box-shadow:inset 2px -2px 0 var(--base2),inset -2px 0 0 var(--base2)}
}

@media (min-width:1024px){
  .zd,.vs{width:min(1360px,calc(100vw - 48px));margin:0 auto 48px;padding:64px 64px 56px;border-radius:28px}
  .zd-h,.vs-h{max-width:17em;font-size:48px;letter-spacing:-.035em;line-height:1.08}
  .zd-h mark,.vs-h mark{padding:0 .1em;margin:0 -.1em;border-radius:.16em;
    background:linear-gradient(transparent .22em,var(--mark) .22em,var(--mark) calc(100% - .18em),transparent calc(100% - .18em))}
  .zd-lead{max-width:34em;margin-top:20px;font-size:18px}
  .zd-st{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:40px}
  .zd-c{padding:28px 28px 32px}
  .zd-n{font-size:24px}
  .zd-n small{margin-top:4px;font-size:15px}
  .zd-ls{gap:12px;margin-top:20px}
  .zd-ls li{font-size:16px}
  .zd-then{grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:baseline;margin-top:16px;padding:20px 28px;font-size:16px}
  .zd-sum{margin-top:32px;font-size:18px}
  .vs-t{margin-top:40px}
  .vs thead :is(th,td),.vs tbody :is(th,td),.vs td.us{padding-left:24px;padding-right:24px}
  .vs tbody :is(th,td){font-size:17px}
  .vs-src{margin-top:20px;font-size:14px}
  .vs :is(thead td,tbody th){padding-left:0}   /* подписи строк — по линии заголовка и сноски (аудит design-review 10.11) */
}

/* появление — как блоки 6 и 7: один раз, .44 с, одна кривая; без движения — сразу видно */
@media (prefers-reduced-motion:no-preference){
  .zd-js :is(.zd,.vs) .rv{opacity:0;transform:translateY(12px);transition:opacity .44s var(--ease) var(--d,0ms),transform .44s var(--ease) var(--d,0ms)}
  .zd-js :is(.zd,.vs) .rv.on{opacity:1;transform:none}
}