/* Раздел /shipping (хаб и лендинги). Общие блоки из site.css пакета дизайнера (2026-10-15).
   Шапка/футер — наши (styles.css). Всё под корнем страницы: .hub, .biz, .ps, .mc, .cr (и .ab — страница /about, T-008).
   Класс lr-motion ставит скрипт в <head> на html (inertia.blade.php, VT-PERF-07), блоки помечает data-r initShipping; при «уменьшить движение» его нет и всё видно сразу. */
:is(.hub, .biz, .ps, .mc, .cr, .ab) { --text: #1a1a1a; --ease-out: cubic-bezier(.2, .7, .2, 1); position: relative; overflow-x: clip; background: #fff; font-family: Manrope, "Manrope Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; interpolate-size: allow-keywords; }
:is(.hub, .biz, .ps, .mc, .cr, .ab) *, :is(.hub, .biz, .ps, .mc, .cr, .ab) ::before, :is(.hub, .biz, .ps, .mc, .cr, .ab) ::after { box-sizing: border-box; }
/* :where — нулевая специфичность, чтобы не перебивать цвета ссылок-карточек страниц */
:where(.hub, .biz, .ps, .mc, .cr, .ab) a { color: #1a1a1a; }

/* Появление при скролле */
@keyframes lr-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
/* Первый экран (заголовок, текст, кнопки, картинка с лентой — LCP) виден сразу, без проявления (VT-PERF-02, VT-PERF-07) */
.lr-motion :is(.hub, .biz, .ps, .mc, .cr, .ab) [data-r] { transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.lr-motion :is(.hub, .biz, .ps, .mc, .cr, .ab) [data-r]:not(.in) { opacity: 0; transform: translateY(28px); }
.lr-motion :is(.hub, .biz, .ps, .mc, .cr, .ab) [data-stagger] > * { transition: opacity .6s var(--ease-out) calc(var(--i, 0) * 70ms), transform .6s var(--ease-out) calc(var(--i, 0) * 70ms); }
.lr-motion :is(.hub, .biz, .ps, .mc, .cr, .ab) [data-stagger]:not(.in) > * { opacity: 0; transform: translateY(16px); }
@media (prefers-reduced-motion: reduce) {
  :is(.hub, .biz, .ps, .mc, .cr, .ab), :is(.hub, .biz, .ps, .mc, .cr, .ab) *, :is(.hub, .biz, .ps, .mc, .cr, .ab) ::before, :is(.hub, .biz, .ps, .mc, .cr, .ab) ::after { animation: none !important; transition: none !important; }
}

/* Плавное раскрытие вопросов (FAQ на <details>) */
:is(.hub, .biz, .ps, .mc, .cr, .ab) details::details-content { height: 0; overflow: clip; transition: height .35s var(--ease-out), content-visibility .35s allow-discrete; }
:is(.hub, .biz, .ps, .mc, .cr, .ab) details[open]::details-content { height: auto; }

/* Белая тема раздела: шапка (topbar--content) поверх фирменной ленты первого экрана */
body.page--white { background: #fff; }
body.page--white .topbar--content { position: relative; z-index: 5; }
body.page--white .topbar--content .home-actions__signin { background: #f1f3f7; }
body.page--white .topbar--content .home-actions__signin:hover { background: #e8eaef; }
/* Шапка на ширине 981–1260px: при отступах 120px меню наезжает на логотип — ужимаем */
@media (min-width: 981px) and (max-width: 1260px) {
  body.page--white .topbar--content { padding: 12px 24px; }
  body.page--white .topbar--content .topbar__right { gap: 20px; }
  body.page--white .topbar--content .topnav { gap: 18px; }
  body.page--white .topbar--content .home-actions__signin { padding: 0 28px; }
}
@media (min-width: 981px) and (max-width: 1100px) {
  body.page--white .topbar--content .topbar__inner { gap: 16px; }
  body.page--white .topbar--content .home-actions__signin { padding: 0 18px; gap: 12px; }
}
/* Мобильная шторка меню: нижней панели в разделе нет — прижата к низу */
body.page--white .mobmenu__sheet { bottom: 0; padding-bottom: calc(32px + env(safe-area-inset-bottom)); }

/* Фирменная лента: ставится внутрь блока с картинкой первого экрана, уходит за шапку и растворяется вниз.
   Без isolation: иначе multiply смешивается с прозрачным фоном группы и белый фон ленты закрывает текст */
:is(.hub, .biz, .ps, .mc, .cr, .ab) img.lr-ribbon { position: absolute; z-index: 0; width: 1500px; max-width: none; height: auto; right: -300px; top: -300px; mix-blend-mode: multiply; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 98%); mask-image: linear-gradient(to bottom, #000 70%, transparent 98%); box-shadow: none; border-radius: 0; }
@media (max-width: 980px) { :is(.hub, .biz, .ps, .mc, .cr, .ab) img.lr-ribbon { width: 760px; right: -330px; top: -60px; } }

/* Финальный тёмный блок: фирменная лента на прозрачном фоне, фото растворяется в тёмном, логотипы перевозчиков */
.ps .ps-final__block, .hub .hub-final__block, .biz .final { position: relative; isolation: isolate; overflow: hidden; }
.ps .ps-final__block::before, .hub .hub-final__block::before, .biz .final::before { content: ""; position: absolute; z-index: -1; inset: auto; width: 900px; height: 502px; left: -470px; bottom: -250px; pointer-events: none; background: url("/html/assets/home2610/ribbon-alpha.webp") center / contain no-repeat; transform: rotate(-12deg); opacity: .95; }
.hub .hub-final__block::after { content: ""; position: absolute; z-index: -1; width: 900px; height: 502px; right: -520px; top: -230px; background: url("/html/assets/home2610/ribbon-alpha.webp") center / contain no-repeat; transform: rotate(160deg); opacity: .9; pointer-events: none; }
.ps .ps-final__photo, .biz .final__photo { position: relative; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%); mask-image: linear-gradient(to right, transparent 0, #000 14%); }
:is(.hub, .biz, .ps, .mc, .cr, .ab) .lr-final-carriers { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
:is(.hub, .biz, .ps, .mc, .cr, .ab) .lr-final-chip { display: inline-flex; align-items: center; justify-content: center; height: 40px; min-width: 52px; padding: 0 12px; border-radius: 12px; background: #fff; }
:is(.hub, .biz, .ps, .mc, .cr, .ab) .lr-final-chip img { display: block; width: auto; height: 22px; }
:is(.hub, .biz, .ps, .mc, .cr, .ab) .lr-final-chip--fedex img { height: 14px; }
:is(.hub, .biz, .ps, .mc, .cr, .ab) .lr-final-note { margin-left: 6px; color: #b8bcc8; font-size: 14px; font-weight: 600; }
.hub .hub-final__block .lr-final-carriers { justify-content: center; }
/* лента проходит между текстом и фото и уходит под растворённый край фото */
.ps .ps-final__block--photo::before, .biz .final--photo::before { z-index: 2; width: 700px; height: 390px; left: 80px; bottom: -190px; transform: rotate(-8deg); opacity: 1; }
.ps .ps-final__copy, .biz .final__copy { position: relative; z-index: 3; }
@media (max-width: 980px) {
  .ps .ps-final__photo, .biz .final__photo { -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); }
  :is(.hub, .biz, .ps, .mc, .cr, .ab) .lr-final-carriers { margin-top: 20px; }
  :is(.hub, .biz, .ps, .mc, .cr, .ab) .lr-final-note { flex-basis: 100%; margin: 4px 0 0; }
  .hub .hub-final__block .lr-final-carriers { justify-content: flex-start; }
  /* лента на телефоне: растворяется и сверху, без ровного среза */
  :is(.hub, .biz, .ps, .mc, .cr, .ab) img.lr-ribbon, .ps .ps-ribbon { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 65%, transparent 95%); mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 65%, transparent 95%); }
  .ps .ps-final__block::before, .hub .hub-final__block::before, .biz .final::before { width: 600px; height: 335px; left: -330px; bottom: -170px; }
  .hub .hub-final__block::after { display: none; }
  .ps .ps-final__block--photo::before, .biz .final--photo::before { display: none; }
  .hub .hub-final__block::before { left: auto; right: -300px; bottom: -190px; transform: rotate(10deg); opacity: .8; }
}

/* Финальный призыв (lr-cta): тёплая карточка в цветах ленты, человек выходит за её верх */
:is(.hub, .biz, .ps, .mc, .cr, .ab) .lr-cta { padding: 150px 0 96px; }
:is(.hub, .biz, .ps, .mc, .cr, .ab) .lr-cta__inner { position: relative; width: 1198px; max-width: calc(100% - 48px); margin: 0 auto; min-height: 400px; display: grid; grid-template-columns: minmax(0, 1fr) 520px; align-items: center; border-radius: 32px;
  background: url("/html/assets/home2610/ribbon-alpha.webp") right -170px top -90px / 940px auto no-repeat, linear-gradient(120deg, #fff6e6 0%, #ffe7cf 50%, #ffdcdc 100%); }
:is(.hub, .biz, .ps, .mc, .cr, .ab) .lr-cta__copy { position: relative; z-index: 1; padding: 64px 0 64px 64px; max-width: 600px; }
:is(.hub, .biz, .ps, .mc, .cr, .ab) .lr-cta .lr-cta__copy h2 { margin: 0; font-size: 52px; line-height: 1.05; font-weight: 800; letter-spacing: -.03em; color: var(--text); text-wrap: balance; }
:is(.hub, .biz, .ps, .mc, .cr, .ab) .lr-hl { color: #eaa30a; }
:is(.hub, .biz, .ps, .mc, .cr, .ab) .lr-cta__text { margin: 18px 0 0; font-size: 19px; line-height: 1.55; color: #50586a; max-width: 480px; }
:is(.hub, .biz, .ps, .mc, .cr, .ab) .lr-cta__buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
:is(.hub, .biz, .ps, .mc, .cr, .ab) .lr-cta__btn { display: inline-flex; align-items: center; justify-content: center; height: 54px; padding: 0 28px; border-radius: 12px; background: #eaa30a; color: #fff; font-size: 17px; font-weight: 700; text-decoration: none; transition: transform .15s, box-shadow .15s; }
:is(.hub, .biz, .ps, .mc, .cr, .ab) .lr-cta__btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(234, 163, 10, .35); }
:is(.hub, .biz, .ps, .mc, .cr, .ab) .lr-cta__btn--ghost { background: #fff; color: var(--text); }
:is(.hub, .biz, .ps, .mc, .cr, .ab) .lr-cta__btn--ghost:hover { box-shadow: 0 10px 24px rgba(26, 31, 51, .08); }
:is(.hub, .biz, .ps, .mc, .cr, .ab) .lr-cta__carriers { display: flex; align-items: center; gap: 10px; margin-top: 28px; }
:is(.hub, .biz, .ps, .mc, .cr, .ab) .lr-cta__carriers img { display: block; box-sizing: content-box; height: 22px; width: auto; padding: 9px 12px; background: #fff; border-radius: 10px; }
:is(.hub, .biz, .ps, .mc, .cr, .ab) .lr-cta__carriers img.lr-cta__fedex { height: 13px; padding: 13.5px 12px; }
:is(.hub, .biz, .ps, .mc, .cr, .ab) .lr-cta__carriers span { margin-left: 6px; color: #50586a; font-size: 14px; font-weight: 600; }
:is(.hub, .biz, .ps, .mc, .cr, .ab) img.lr-cta__person { position: absolute; right: 24px; bottom: 0; width: 540px; height: auto; max-width: none; }
@media (max-width: 1180px) {
  :is(.hub, .biz, .ps, .mc, .cr, .ab) .lr-cta__inner { grid-template-columns: minmax(0, 1fr) 400px; }
  :is(.hub, .biz, .ps, .mc, .cr, .ab) img.lr-cta__person { width: 440px; right: 0; }
}
@media (max-width: 980px) {
  :is(.hub, .biz, .ps, .mc, .cr, .ab) .lr-cta { padding: 110px 0 64px; }
  :is(.hub, .biz, .ps, .mc, .cr, .ab) .lr-cta__inner { grid-template-columns: 1fr; max-width: calc(100% - 32px); min-height: 0; border-radius: 24px; background: linear-gradient(160deg, #fff6e6 0%, #ffe7cf 55%, #ffdcdc 100%); }
  :is(.hub, .biz, .ps, .mc, .cr, .ab) img.lr-cta__person { position: relative; right: auto; order: -1; width: 92%; max-width: 100%; margin: -90px auto 0; display: block; }
  :is(.hub, .biz, .ps, .mc, .cr, .ab) .lr-cta__copy { padding: 8px 24px 32px; }
  :is(.hub, .biz, .ps, .mc, .cr, .ab) .lr-cta .lr-cta__copy h2 { font-size: 32px; }
  :is(.hub, .biz, .ps, .mc, .cr, .ab) .lr-cta__text { font-size: 16px; }
  :is(.hub, .biz, .ps, .mc, .cr, .ab) .lr-cta__btn { width: 100%; }
  :is(.hub, .biz, .ps, .mc, .cr, .ab) .lr-cta__carriers { flex-wrap: wrap; }
  :is(.hub, .biz, .ps, .mc, .cr, .ab) .lr-cta__carriers span { flex-basis: 100%; margin: 4px 0 0; }
}
/* Фото финальных блоков: у каждой страницы своё */
:is(.hub, .biz, .ps, .mc, .cr, .ab) img.lr-cta__person--cta-woman-silver { width: 470px; right: 40px; }
:is(.hub, .biz, .ps, .mc, .cr, .ab) img.lr-cta__person--cta-man-shoulder { width: 400px; right: 70px; }
:is(.hub, .biz, .ps, .mc, .cr, .ab) img.lr-cta__person--cta-man-arms { width: 350px; right: 90px; }
:is(.hub, .biz, .ps, .mc, .cr, .ab) img.lr-cta__person--cta-woman-boxes { width: 350px; right: 90px; }
:is(.hub, .biz, .ps, .mc, .cr, .ab) img.lr-cta__person--cta-man-phone { width: 360px; right: 90px; }
@media (max-width: 1180px) {
  :is(.hub, .biz, .ps, .mc, .cr, .ab) img.lr-cta__person--cta-woman-silver { width: 400px; right: 0; }
  :is(.hub, .biz, .ps, .mc, .cr, .ab) img.lr-cta__person--cta-man-shoulder { width: 340px; right: 20px; }
  :is(.hub, .biz, .ps, .mc, .cr, .ab) img.lr-cta__person--cta-man-arms { width: 300px; right: 30px; }
  :is(.hub, .biz, .ps, .mc, .cr, .ab) img.lr-cta__person--cta-woman-boxes { width: 320px; right: 30px; }
  :is(.hub, .biz, .ps, .mc, .cr, .ab) img.lr-cta__person--cta-man-phone { width: 320px; right: 30px; }
}
@media (max-width: 980px) {
  :is(.hub, .biz, .ps, .mc, .cr, .ab) img.lr-cta__person--cta-woman-silver { width: 80%; margin: -96px 0 0 auto; }
  :is(.hub, .biz, .ps, .mc, .cr, .ab) img.lr-cta__person--cta-man-shoulder { width: 66%; margin: -96px 0 0 auto; }
  :is(.hub, .biz, .ps, .mc, .cr, .ab) img.lr-cta__person--cta-man-arms { width: 58%; margin: -96px 4% 0 auto; }
  :is(.hub, .biz, .ps, .mc, .cr, .ab) img.lr-cta__person--cta-woman-boxes { width: 60%; margin: -96px 2% 0 auto; }
  :is(.hub, .biz, .ps, .mc, .cr, .ab) img.lr-cta__person--cta-man-phone { width: 62%; margin: -96px 4% 0 auto; }
}

/* Линия шагов (lr-flow, data-play): дорожка с точками над карточками, по ней бежит свет ленты */
:is(.hub, .biz, .ps, .mc, .cr, .ab) .lr-flow.lr-flow { position: relative; padding-top: 36px; }
:is(.hub, .biz, .ps, .mc, .cr, .ab) .lr-flow > * { position: relative; }
:is(.hub, .biz, .ps, .mc, .cr, .ab) .lr-flow::before { content: ""; position: absolute; top: 9px; left: calc(100% / 6); right: calc(100% / 6); height: 2px; border-radius: 2px; background: #ececf0; }
:is(.hub, .biz, .ps, .mc, .cr, .ab) .lr-flow::after { content: ""; position: absolute; top: 7px; left: calc(100% / 6); width: 120px; height: 6px; border-radius: 6px; margin-left: -60px; background: linear-gradient(90deg, transparent, #f2b632 35%, #ff7a1a 60%, transparent); filter: blur(1px); opacity: 0; }
:is(.hub, .biz, .ps, .mc, .cr, .ab) .lr-flow > *::after { content: ""; position: absolute; top: -36px; left: 50%; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #e2e4ea; }
:is(.hub, .biz, .ps, .mc, .cr, .ab) .lr-flow.play > *::after { box-shadow: inset 0 0 0 6px #eaa30a; }
.lr-motion :is(.hub, .biz, .ps, .mc, .cr, .ab) .lr-flow.play::after { animation: lr-flow-run 3.6s cubic-bezier(.45, 0, .55, 1) .4s infinite; }
.lr-motion :is(.hub, .biz, .ps, .mc, .cr, .ab) .lr-flow.play > *::after { animation: lr-flow-dot 3.6s ease-out infinite; animation-delay: calc(.4s + var(--i, 0) * 1.2s); box-shadow: inset 0 0 0 2px #e2e4ea; }
@keyframes lr-flow-run { 0% { left: calc(100% / 6); opacity: 0; } 8% { opacity: 1; } 72% { opacity: 1; } 80%, 100% { left: calc(100% * 5 / 6); opacity: 0; } }
@keyframes lr-flow-dot { 0% { box-shadow: inset 0 0 0 2px #e2e4ea, 0 0 0 0 rgba(234, 163, 10, 0); } 8% { box-shadow: inset 0 0 0 6px #eaa30a, 0 0 0 0 rgba(234, 163, 10, .45); } 30% { box-shadow: inset 0 0 0 6px #eaa30a, 0 0 0 10px rgba(234, 163, 10, 0); } 70% { box-shadow: inset 0 0 0 6px #eaa30a, 0 0 0 0 rgba(234, 163, 10, 0); } 100% { box-shadow: inset 0 0 0 2px #e2e4ea; } }
/* Телефон: карточки столбиком, дорожка вертикальная слева, свет бежит сверху вниз */
@media (max-width: 980px) {
  :is(.hub, .biz, .ps, .mc, .cr, .ab) .lr-flow.lr-flow { padding-top: 0; padding-left: 34px; --dot: 42px; }
  .biz .lr-flow.lr-flow { --dot: 52px; }
  :is(.hub, .biz, .ps, .mc, .cr, .ab) .lr-flow::before { top: var(--dot); bottom: 16px; left: 9px; right: auto; width: 2px; height: auto; background: linear-gradient(to bottom, #ececf0 85%, transparent); }
  :is(.hub, .biz, .ps, .mc, .cr, .ab) .lr-flow::after { top: var(--dot); left: 7px; width: 6px; height: 110px; margin: -55px 0 0; background: linear-gradient(180deg, transparent, #f2b632 35%, #ff7a1a 60%, transparent); }
  :is(.hub, .biz, .ps, .mc, .cr, .ab) .lr-flow > *::after { top: calc(var(--dot) - 10px); left: -34px; margin-left: 0; }
  .lr-motion :is(.hub, .biz, .ps, .mc, .cr, .ab) .lr-flow.play::after { animation-name: lr-flow-run-v; }
}
@keyframes lr-flow-run-v { 0% { top: var(--dot); opacity: 0; } 8% { opacity: 1; } 72% { opacity: 1; } 80%, 100% { top: calc(100% - 90px); opacity: 0; } }