/* Aroken — /web, мостики между экранами (CRO-аудит 22.09, п. 9): экран занимает весь кадр и следующий блок не выглядывает, поэтому внизу
   смысла — короткая строка-вопрос и ссылка на следующий экран, по образцу #ceiling («Откуда столько заказов? Сайт нужен каждому бизнесу ↓»,
   css/web-intro.css .ceil__next). Порядок секций не меняется; ссылка — обычный якорь (плавная прокрутка — общая, css/main.css). */
.hop { margin: clamp(14px, calc(1.8vh / var(--z, 1)), 28px) 0 0; font-size: clamp(14px, calc(.95vw / var(--z, 1)), 19px); line-height: 1.4; color: var(--muted-2); text-wrap: balance; }
.hop a { display: inline-block; padding: 4px 0; font-weight: 600; color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .3); text-underline-offset: 4px; transition: text-decoration-color .2s; }
.hop a:hover { text-decoration-color: #fff; }
.hop a:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 4px; }
.hop--center { text-align: center; }
/* на бумажной плитке (#cert) — графитом */
.tile--paper .hop { color: rgba(23, 24, 28, .56); }
.tile--paper .hop a { color: var(--ink); text-decoration-color: rgba(23, 24, 28, .3); }
.tile--paper .hop a:hover { text-decoration-color: var(--ink); }
.tile--paper .hop a:focus-visible { outline-color: var(--ink); }
@media (max-width: 767px) {
  .hop { margin-top: 14px; font-size: 14px; }
  .hop a { padding: 11px 0; } /* тап-зона 44 px */
}
.outcomes .hop { margin-top: clamp(8px, calc(1vh / var(--z, 1)), 16px); } /* экран умений и так во весь кадр — мостик ближе */
/* невысокие окна ноутбуков (1536 × 864, 1280 × 720): экраны умений и лицензии и так впритык к кадру — мостик не выталкивает их за край */
@media (min-width: 1024px) and (max-height: 900px) {
  .outcomes .hop, .cert .hop { display: none; }
}
@media (min-width: 1024px) and (max-height: 760px) {
  .fit .hop { display: none; }
}