/* Блок 5 главной маклеров «Jak začínáme» (#jak-zacinat) — 03.11 (решение realtors-block5-one-tile-report-terms, его
   «Ставка: 1 + 3 + строка условий»). Три этапа растут масштабом: мини-лист аудита (часть 4 листа блока 4) → полоса
   из пяти шагов блока 3, горит одна плитка «Odhad ceny na webu» (первый шаг плана 90 дней) → отчёт после 3 месяцев с
   решением маклера и всеми пятью шагами. Под этапами — условия оффера 01.11, гарантия — одной синей фразой. Грамматика
   хиро и блоков 2–4: Poppins, синий — данные и действия, плашка объёмная (грань ≈ 5 px); коралла нет. Мобилка 390 первой. */
@media (max-width:1023px){.b4{margin-bottom:0}}   /* блок 4 больше не последний: место под липкую кнопку — у блока 5 */
.b5{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)}
.b5-defs{position:absolute;width:0;height:0;overflow:hidden}
.b5-eye{font-size:14px;font-weight:500;line-height:1.55;color:var(--muted)}
.b5-h{margin-top:8px;font-size:30px;font-weight:500;line-height:1.12;letter-spacing:-.03em;text-wrap:balance}
.b5-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}
.b5-lead{margin-top:16px;font-size:16px;line-height:1.55;color:var(--muted);text-wrap:pretty}

/* этапы: метка срока, заголовок, строка, свой предмет; между этапами — линия */
.b5-st{list-style:none;margin:32px 0 0;padding:0}
.b5-s+.b5-s{margin-top:32px;padding-top:32px;border-top:1px solid var(--rule)}
.b5-when{display:inline-block;padding:4px 10px 5px;border-radius:8px;background:var(--tint);color:#1B45B0;font-size:13px;font-weight:500;
  line-height:1.35;font-variant-numeric:tabular-nums}
.b5-t{margin-top:12px;font-size:22px;font-weight:500;line-height:1.25;letter-spacing:-.02em}
.b5-p{margin-top:8px;font-size:15px;line-height:1.55;color:var(--muted);text-wrap:pretty}

/* 1 — мини-лист: вырез части 4 листа аудита (ровно, как лист блока 4); строка Web раскрыта */
.b5-mini{margin-top:20px;padding:0 14px 14px;border-radius:12px;background:#fff;
  box-shadow:0 0 0 1px var(--rule),0 14px 24px -20px rgba(15,23,42,.42)}
.m-hd{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:12px 0 8px;border-bottom:2px solid var(--ink)}
.m-hd b{font-size:14px;font-weight:500;line-height:1.3}
.m-hd span{font-size:13px;line-height:1.3;color:var(--muted)}
.m-bar{display:grid;grid-template-columns:1fr auto;grid-template-areas:"l n" "t t";align-items:baseline;column-gap:10px;margin-top:10px;
  font-size:13px;line-height:1.35}
.m-bar span{grid-area:l;color:var(--muted)}
.m-bar b{grid-area:n;font-size:13px;font-weight:500;font-variant-numeric:tabular-nums}
.m-bar i{grid-area:t;position:relative;display:block;height:6px;margin-top:4px;overflow:hidden;border-radius:3px;background:#EEF2F8}
.m-bar i::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:3px;background:#9FB0CC}
.m-bar.top i::before{background:var(--base2)}
.m-bar.in{margin:10px -8px 0;padding:8px;border-radius:8px;background:#E8EEFC}
.m-bar.in span{color:#1B45B0;font-weight:500}
.m-bar.in i{background:#fff}

/* 2 — пять шагов блока 3 плитками: горит одна, остальные ждут */
.b5-tiles{--tw:calc((100cqw - 32px) / 5);margin-top:20px;container-type:inline-size}   /* --tw — ширина плитки (cqw считается у плашки)  */
.b5-row{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;list-style:none;margin:0;padding:0}
.b5-row .t{display:grid;place-items:center;aspect-ratio:1;border-radius:14px;background:#F6F8FC;box-shadow:inset 0 0 0 1px var(--rule)}
.b5-row .t svg{width:26px;height:26px;filter:grayscale(1);opacity:.6}
.b5-row .t.on{background:#fff;box-shadow:inset 0 0 0 2px var(--base2),0 14px 22px -14px rgba(36,86,214,.55);transform:translateY(-4px)}
.b5-row .t.on svg{filter:none;opacity:1}
.b5-vol{background:linear-gradient(180deg,#fff 40%,#F3F5F9);
  box-shadow:inset 1px 1px 0 #fff,0 0 0 1px var(--rule),1px .4px 0 #CCD5E2,2px .8px 0 #CCD5E2,3px 1.2px 0 #CCD5E2,4px 1.6px 0 #CCD5E2,
  5px 2px 0 #B3BFD0,14px 22px 30px -12px rgba(15,23,42,.30)}
.b5-here{position:relative;display:inline-block;--off:var(--tw);margin:10px 0 0 var(--off);padding:8px 14px 10px;border-radius:14px}
.b5-here::before{content:"";position:absolute;left:calc(var(--tw) * 1.5 + 2px - var(--off));   /* носик — на центр второй плитки */
 top:-7px;width:12px;height:12px;
  background:#fff;transform:rotate(45deg);box-shadow:-1px -1px 0 0 var(--rule)}
.b5-here b{display:block;font-size:15px;font-weight:500;line-height:1.3}
.b5-here span{display:block;margin-top:2px;font-size:13px;line-height:1.35;color:#1B45B0;font-weight:500}
.b5-you{margin-top:16px;font-size:15px;line-height:1.5;color:var(--muted)}
.b5-you b{font-weight:500;color:var(--ink)}

/* 3 — отчёт после трёх месяцев: цифры первого шага, решение маклера, все пять шагов */
.b5-rep{margin-top:20px;overflow:hidden;border-radius:16px;background:#fff;
  box-shadow:0 0 0 1px var(--rule),0 28px 44px -30px rgba(15,23,42,.38)}
.r-url{padding:8px 14px;border-bottom:1px solid var(--rule);background:#F6F8FC;font-size:12px;line-height:1.4;color:var(--muted)}
.r-pg{padding:14px 16px 16px}
.r-h span{display:block;font-size:12px;line-height:1.35;color:#1B45B0;font-weight:500}   /* какой шаг — над заголовком отчёта */
.r-h b{display:block;margin-top:2px;font-size:16px;font-weight:500;line-height:1.3}
.r-k{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.r-k p{padding:10px 10px 12px;border-radius:10px;background:#F6F8FC}
.r-k span{display:block;min-height:2.7em;font-size:13px;line-height:1.35;color:var(--muted)}
.r-k b{display:block;margin-top:4px;font-size:24px;font-weight:500;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.r-c{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px;font-size:13px;line-height:1.4;color:var(--muted)}
.r-c b{font-size:14px;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.r-b{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px;padding-top:16px;border-top:1px solid var(--rule)}
.r-b span{pointer-events:none;user-select:none;display:grid;place-items:center;min-height:44px;padding:0 8px;border-radius:12px;font-size:14px;font-weight:500;line-height:1.2;text-align:center}
.r-yes{background:#fff;box-shadow:inset 0 0 0 1.5px var(--base2);color:#1B45B0}   /* выбрано — рамкой, как путь в листе блока 4: не спорит с настоящей кнопкой страницы */
.r-no{box-shadow:inset 0 0 0 1px #C9D3E1;color:var(--ink)}
.r-all{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.r-all p{font-size:14px;font-weight:500;line-height:1.3}
.r-all p span{display:block;font-size:13px;font-weight:400;color:var(--muted);font-variant-numeric:tabular-nums}
.b5-row.sm{flex:none;grid-template-columns:repeat(5,32px);gap:6px}
.b5-row.sm .t{border-radius:9px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--base2)}
.b5-row.sm .t svg{width:18px;height:18px;filter:none;opacity:1}

/* условия: гарантия одной синей фразой, ниже два факта; на земле страницы, без движения */
.b5-terms{margin-top:28px;padding:20px;border-radius:16px;background:var(--land)}
.b5-g b{display:block;font-size:22px;font-weight:500;line-height:1.3;letter-spacing:-.02em;color:#1B45B0;text-wrap:balance}
.b5-g span{display:block;margin-top:6px;font-size:15px;line-height:1.45;color:var(--muted)}
.b5-pr{list-style:none;margin:16px 0 0;padding:16px 0 0;border-top:1px solid #D5DDEA}
.b5-pr li{position:relative;padding-left:28px;font-size:15px;line-height:1.5;color:var(--muted);text-wrap:pretty}
.b5-pr li+li{margin-top:8px}
.b5-pr li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m4.5 10.5 3.5 3.5 7.5-8' fill='none' stroke='%232456D6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
.b5-pr b{font-weight:500;color:var(--ink)}
.b5-cap{margin-top:12px;padding:0 4px;font-size:13px;line-height:1.5;color:var(--muted)}

/* появление: как блоки 2–4 — один раз, когда группа в кадре; на этапе оживает одна деталь: строка Web, плитка
   загорается и плашка, решение «Přidat další krok» и пять плиток по очереди. Условия не двигаются кроме входа.
   Без JS и при reduced-motion — сразу итог */
@media (prefers-reduced-motion:no-preference){
  .b5-js .b5 .rv{opacity:0;transform:translateY(12px);transition:opacity .44s var(--ease) var(--d,0ms),transform .44s var(--ease) var(--d,0ms)}
  .b5-js .b5 .rv.on{opacity:1;transform:none}
  .b5-js .b5 .dt{opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease) .6s,transform .4s var(--ease) .6s}
  .b5-js .b5 .rv.on .dt{opacity:1;transform:none}
  .b5-js .b5 .m-bar i::before{transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease) .3s}
  .b5-js .b5 .rv.on .m-bar i::before{transform:none}
  .b5-js .b5 .m-bar.in.dt{transition-delay:1.05s}   /* строка Web — после полос: «вот где дыра» */
  .b5-js .b5 .b5-row .t,.b5-js .b5 .b5-row .t svg{transition:background .35s var(--ease) .45s,box-shadow .35s var(--ease) .45s,
    transform .45s var(--ease) .45s,filter .35s var(--ease) .45s,opacity .35s var(--ease) .45s}
  .b5-js .b5 .b5-tiles:not(.on) .t.on{background:#F6F8FC;box-shadow:inset 0 0 0 1px var(--rule);transform:none}
  .b5-js .b5 .b5-tiles:not(.on) .t.on svg{filter:grayscale(1);opacity:.6}
  /* решение и пять плиток — своими группами (порог считается по ним, не по всему отчёту): иначе играют ниже экрана */
  .b5-js .b5 .r-yes{transition:color .3s var(--ease) .5s,box-shadow .3s var(--ease) .5s}
  .b5-js .b5 .r-b:not(.on) .r-yes{color:var(--ink);box-shadow:inset 0 0 0 1px #C9D3E1}
  .b5-js .b5 .b5-row.sm .t,.b5-js .b5 .b5-row.sm .t svg{transition-delay:calc(.35s + var(--i) * 90ms)}
  .b5-js .b5 .r-all:not(.on) .b5-row.sm .t{background:#F6F8FC;box-shadow:inset 0 0 0 1px var(--rule)}
  .b5-js .b5 .r-all:not(.on) .b5-row.sm .t svg{filter:grayscale(1);opacity:.6}
}

@media (max-width:374px){.b5-row.sm{grid-template-columns:repeat(5,28px);gap:4px}}   /* 320–374: плитки «Celá cesta» не вылезают */

/* планшет 768–1023 — колонка мобилки по центру, как блоки 2–4 */
@media (min-width:768px) and (max-width:1023px){.b5{width:min(640px,calc(100vw - 48px));margin:24px auto 96px;padding:48px 40px 40px}}

/* 03.11 десктоп 1440 (мобилка принята 08:31: «а так все хорошо»): панель — ширина и скругление хиро и блоков 2–4. Шапка
   сверху, как блок 3; три этапа в ряд и растут слева направо (лист → плитки → отчёт, колонки 4/4/5), между ними — линия;
   метки, заголовки, строки и предметы этапов — на общих линиях (subgrid). Условия — полосой на земле во всю ширину:
   гарантия слева, два факта справа */
@media (min-width:1024px){
  .b4{margin-bottom:24px}
  .b5{width:min(1360px,calc(100vw - 48px));margin:0 auto 48px;padding:64px 64px 56px;border-radius:28px}
  .b5-eye{font-size:15px}
  .b5-h{max-width:17em;margin-top:16px;font-size:48px;letter-spacing:-.035em;line-height:1.08}
  .b5-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))}
  .b5-lead{max-width:34em;margin-top:24px;font-size:18px}
  .b5-st{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,4fr) minmax(0,5fr);grid-template-rows:repeat(5,auto);margin-top:56px}
  .b5-s{display:grid;grid-row:span 5;grid-template-rows:subgrid;align-content:start;padding:0 40px}
  .b5-s:first-child{padding-left:0}.b5-s:last-child{padding-right:0}
  .b5-s+.b5-s{margin-top:0;padding-top:0;border-top:0;border-left:1px solid var(--rule)}
  .b5-when{justify-self:start;font-size:14px}
  .b5-t{margin-top:16px;font-size:28px;letter-spacing:-.025em}
  .b5-p{margin-top:8px;font-size:16px}
  .b5-mini,.b5-tiles,.b5-rep{margin-top:28px}
  .b5-mini{align-self:start}
  .b5-tiles{align-self:start}
  .b5-rep{align-self:start}
  .b5-you{margin-top:24px;font-size:16px}
  .b5-cap{margin-top:12px}
  .m-hd b{font-size:15px}
  .b5-terms{display:grid;grid-template-columns:5fr 6fr;column-gap:64px;align-items:center;margin-top:56px;padding:36px 40px;border-radius:20px}
  .b5-g b{font-size:32px;line-height:1.15;letter-spacing:-.03em}   /* гарантия — сильнее заголовков этапов (28) */
  .b5-g span{margin-top:8px;font-size:16px}
  .b5-pr{margin:0;padding:0 0 0 48px;border-top:0;border-left:1px solid #D5DDEA}
  .b5-pr li{font-size:16px}.b5-pr li+li{margin-top:14px}
}
@media (min-width:1024px) and (max-width:1279px){.b5{padding:56px 48px 48px}.b5-s{padding:0 28px}
  .b5-s:first-child{padding-left:0}.b5-s:last-child{padding-right:0}.b5-t{font-size:24px}
  .b5-here{--off:0px}}   /* колонка уже: плашка от первой плитки, носик — на второй */