/* ===== Use-case pages — блоки поверх for.css ===== */

.uc-kick{font-family:var(--mono);font-size:13px;color:var(--grey);margin-bottom:22px;text-transform:uppercase;letter-spacing:.09em}

/* видно только скринридеру */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* живой пруф — встроенный прогон или борд */
.proof{border-top:1px solid var(--line)}
.proof-frame{margin-top:36px;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 30px 70px rgba(13,14,18,.09)}
.proof-frame iframe{display:block;width:100%;aspect-ratio:16/10;border:0}
.proof-note{margin-top:16px;font-family:var(--mono);font-size:13px;color:var(--grey)}

/* было / стало */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:42px}
.vs > div{border:1px solid var(--line);border-radius:18px;padding:26px 28px}
.vs .was{background:#F7F7F4;color:var(--grey)}
.vs .now{border-color:var(--ink)}
.vs h4{font-family:var(--disp);font-weight:700;font-size:15px;color:var(--ink);margin-bottom:14px}
.vs ul{list-style:none;display:grid;gap:9px;font-size:15px}

/* определительный блок */
.define{border-top:1px solid var(--line)}
.define .lead{margin-top:22px}

/* перелинковка + сетка хаба */
.related{border-top:1px solid var(--line)}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
.related-grid a{display:block;border:1px solid var(--line);border-radius:16px;padding:24px 26px;background:#fff;transition:border-color .15s,transform .15s}
.related-grid a:hover{border-color:var(--ink);transform:translateY(-2px)}
.related-grid h3{font-family:var(--disp);font-weight:700;font-size:18px;letter-spacing:-.01em;margin-bottom:8px}
.related-grid p{color:var(--grey);font-size:14.5px;line-height:1.55}
.uc-hub{margin-top:0}

/* ===== СЕТКА ФУТЕРА — сайт-широкое правило, живёт ИМЕННО ЗДЕСЬ =====
   use-case.css — единственный файл, который сейчас подключают ВСЕ страницы сайта
   (главная, хаб /use-cases/, страница кейса, все три /for/* персона-страницы).
   Поэтому определение .footgrid — общесайтовое — держим тут, а не в for.css и не
   в инлайн-style главной: там его увидят не все. Каждая страница несёт одинаковые
   пять колонок (бренд + Product + Who it's for + Use cases + Company), так что
   модификатор footgrid5 больше не нужен — правь только это место. Заведёшь копию
   в for.css/инлайне — обречёшь футер снова расходиться. */
.footgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1fr;gap:44px}
@media(max-width:880px){.footgrid{grid-template-columns:1fr 1fr;gap:32px}}

/* тизер-ряд на главной */
.uc-teaser{border-top:1px solid var(--line)}
.uc-teaser-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:34px}
.uc-teaser-grid a{display:block;border:1px solid var(--line);border-radius:14px;padding:18px 20px;font-family:var(--disp);font-weight:600;font-size:15px;line-height:1.3;background:#fff;transition:border-color .15s}
.uc-teaser-grid a:hover{border-color:var(--ink)}
.uc-more{margin-top:26px;font-family:var(--mono);font-size:14px;border-bottom:1px solid var(--grey);display:inline-block}

@media(max-width:880px){.uc-teaser-grid{grid-template-columns:repeat(2,1fr)}.related-grid{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.vs,.related-grid,.uc-teaser-grid{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){.related-grid a{transition:none}.related-grid a:hover{transform:none}}

/* метка ещё не выпущенной возможности */
.soon{display:inline-block;vertical-align:middle;margin-left:10px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);border:1px solid var(--line);border-radius:999px;padding:3px 9px;background:#fff;white-space:nowrap}
.ctx .soon{color:#9C9EA8;border-color:#2A2B33;background:transparent}

/* ВРЕМЕННО. Плейсхолдеры шагов на страницах кейсов: облегчённый вариант .shot —
   без тени и пропорции 16:10, чтобы пустая рамка не обещала картинку, которой нет.
   Решение владельца 2026-07-25, названо временным: заменить настоящими макетами
   интерфейса (в духе .hpt/.hcn на главной), когда станет ясно, что показывать на
   каждой из семи страниц раздела. Убрать этот блок вместе с классом `lite`. */
.shot.lite{aspect-ratio:auto;height:104px;box-shadow:none;border-style:dashed;border-color:#DDDDD6;background:#FBFBF8;align-self:center}
.shot.lite .alabel{top:auto;bottom:9px;right:11px;left:auto;background:none;color:#9A9C93;font-weight:500;padding:0}
.shot.lite .alabel::after{content:none}