/**
 * Awards / Trust components — реализация Awards Components Handoff
 * (Claude Design, файл «Awards Components Handoff.html»).
 *
 * Содержит 4 финальных компонента + общие inline-бейджи:
 *
 *   ─ Inline badges (используются всеми компонентами):
 *       .clutch-wordmark .dot
 *       .stars
 *       .premier-pill (+ --on-dark)
 *       .dmca-badge (+ --lg)
 *
 *   ─ 01 · Header rating pill           .lv-header__awards
 *   ─ 02 · Hero trust row               .lv-hero__trust
 *   ─ 03 · Awards & Recognitions block  .lv-awards-section
 *   ─ 04 · Footer trust band            .lv-footer-trust.lv-footer-trust--full
 *
 * Tokens (--lv-*) приходят либо из главного scope (объявлены ниже как
 * fallback на :root, если их ещё нет глобально), либо переопределяются
 * на странице через blog-page.css / single-post.css scopes.
 *
 * SVG-symbols (#i-star, #i-google, #i-check, #i-shield, #i-arrow)
 * рендерятся helper'ом theme_render_awards_svg_defs() в header.php
 * один раз на страницу.
 */

/* ─────────────────────────────────────────────────────────────────────────
   DESIGN TOKENS (fallback на :root, если их нет глобально)
   ───────────────────────────────────────────────────────────────────────── */
:root {
	--lv-primary:                  #790000;
	--lv-primary-container:        #a50000;
	--lv-primary-fixed:             #ffdad4;
	--lv-primary-fixed-dim:         #ffb4a8;
	--lv-secondary:                 #545e76;
	--lv-on-surface:                #191c1d;
	--lv-surface-container-lowest:  #ffffff;
	--lv-border:                    #e4e6ea;
	--lv-border-strong:             #d3d7de;
	--lv-font-headline:             'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
	--lv-font-body:                 'Manrope', ui-sans-serif, system-ui, sans-serif;
	--lv-shadow-1: 0 1px 2px rgba(25, 28, 29, 0.06);
	--lv-shadow-2: 0 4px 12px -2px rgba(25, 28, 29, 0.08), 0 2px 4px rgba(25, 28, 29, 0.04);
	--lv-dur-fast: 150ms;
	--lv-dur:      240ms;
	--lv-ease-out: cubic-bezier(0.22, 0.7, 0.2, 1);
	--lv-radius-md: 0.5rem;
}

/* ─────────────────────────────────────────────────────────────────────────
   Inline badges
   ───────────────────────────────────────────────────────────────────────── */

/* Clutch wordmark — слово «Clutch» с красной точкой над «t». */
.clutch-wordmark {
	font-family: var(--lv-font-headline);
	font-weight: 700;
	letter-spacing: -0.03em;
	color: #17313b;
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}
.clutch-wordmark .dot {
	display: inline-block;
	width: 0.32em; height: 0.32em;
	background: #e8244c;
	border-radius: 999px;
	margin: 0 0.05em 0.1em 0.05em;
	vertical-align: middle;
	position: relative; top: -0.04em;
}
.clutch-wordmark--white { color: #fff; }
.clutch-wordmark--inverse { color: rgba(255,255,255,0.95); }

/* Star strip — наследует цвет от родителя (например, в Tile 1 = жёлтый
   #f6b318, в footer = #f6b318 явно, в header = inherit). */
.stars {
	display: inline-flex;
	align-items: center;
	gap: 1px;
	color: #f6b318;
}
.stars svg { width: 1em; height: 1em; }

/* Premier Verified pill — зелёный значок c галочкой. */
.premier-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #d8f1de;
	color: #117a3a;
	font-size: 12px;
	font-weight: 700;
	padding: 4px 10px 4px 8px;
	border-radius: 999px;
	letter-spacing: 0.01em;
	white-space: nowrap;
}
.premier-pill__check {
	width: 14px; height: 14px;
	background: #1f9a4a; color: #fff;
	border-radius: 999px;
	display: inline-flex; align-items: center; justify-content: center;
	flex-shrink: 0;
}
.premier-pill--on-dark { background: rgba(31,154,74,0.18); color: #6ed68c; }
.premier-pill--on-dark .premier-pill__check { background: #2bb358; }

/* DMCA badge — ОФИЦИАЛЬНЫЙ код от dmca.com: <a class="dmca-badge"><img></a>.
   img это PNG из их CDN, дизайн уже встроен в картинку (зелёный «PROTECTED»
   слева + чёрный «DMCA» справа). Наш CSS нужен только для alignment +
   ограничения высоты, чтобы badge не «прыгал» по высоте footer-cell'и. */
.dmca-badge {
	display: inline-flex;
	align-items: center;
	line-height: 0;
	text-decoration: none;
	flex-shrink: 0;
}
.dmca-badge img {
	display: block;
	height: auto;
	width: auto;
	max-height: 22px;
}
.dmca-badge--lg img {
	max-height: 38px;
}
/* Старые CSS-spans от прежнего custom badge'а — на случай если в кэшированном
   контенте где-то остались, прячем чтобы не было FOUC. */
.dmca-badge__left,
.dmca-badge__right { display: none; }

/* ─────────────────────────────────────────────────────────────────────────
   01 · Header rating pill   .lv-header__awards
   HARD HIDE 15.05.2026 — шеф попросил скрыть всё связанное с rating'ом
   в header'е (и desktop-pill «5.0 on Clutch · 5.0 on Google», и mobile
   Premier Verified pill около burger'а, и overlay-вариант). Trust-сигналы
   остаются в hero (02.D vertical accent) и в footer trust band. Правила
   ниже сохранены — !important выше их перебивает, при желании вернуть
   rating-pill достаточно убрать hide-блок.
   ───────────────────────────────────────────────────────────────────────── */
.lv-header__awards,
.mobile-nav-overlay .lv-header__awards,
.lv-header__awards.mmenu__awards,
.mmenu__awards,
.lv-header__premier-link {
	display: none !important;
}

.lv-header__awards {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--lv-surface-container-lowest);
	border: 1px solid var(--lv-border-strong);
	font-size: 12px;
	color: var(--lv-on-surface);
	text-decoration: none;
	transition: border-color var(--lv-dur-fast), box-shadow var(--lv-dur-fast), transform var(--lv-dur-fast);
}
.lv-header__awards:hover,
.lv-header__awards:focus-visible {
	border-color: var(--lv-primary);
	box-shadow: var(--lv-shadow-1);
	color: var(--lv-on-surface);
}
.lv-header__awards .stars { font-size: 13px; }
.lv-header__awards .sep {
	width: 1px; height: 14px;
	background: var(--lv-border-strong);
	margin: 0 2px;
	flex: 0 0 1px;
}
.lv-header__awards strong { font-weight: 700; color: var(--lv-on-surface); }
.lv-header__awards-reviews {
	color: var(--lv-secondary);
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

/* На узких экранах: коллапс до краткой формы «★ 5.0 · Clutch · Google».
   Скрываем второе число «5.0» + sep, оставляя «5.0» от Clutch + лейблы. */
@media (max-width: 1100px) {
	.lv-header__awards .sep { display: none; }
	.lv-header__awards strong + .lv-header__awards-reviews + .sep + strong { display: none; }
}
@media (max-width: 900px) {
	/* Скрыто целиком — на мобиле burger открывает overlay, там можно
	   добавить trust-row отдельно. Сейчас лишний elem в desktop-баре. */
	.lv-header__awards { display: none; }
}

/* Premier Verified pill рядом с burger'ом — видим только на мобиле,
   на десктопе работает полноразмерный .lv-header__awards. margin-left
   auto прижимает к правой части site-header__inner, плюс 10px справа,
   чтобы pill не упирался впритык в burger. */
.lv-header__premier-link {
	display: none;
	align-items: center;
	margin-left: auto;
	margin-right: 10px;
	text-decoration: none;
	flex: 0 0 auto;
}
@media (max-width: 900px) {
	.lv-header__premier-link { display: inline-flex; }
}
@media (max-width: 420px) {
	/* На очень узких экранах оставляем pill видимым — юзер просил.
	   .lv-header__premier-link { display: none; } */
}

/* Override внутри mobile-overlay: рейтинговая полоса показывается всегда
   (даже на >=900px overlay не используется, но если открыт — рейтинг есть)
   и центрируется. Перебиваем .display: none из media-query через более
   специфичный селектор. */
.mobile-nav-overlay .lv-header__awards,
.lv-header__awards.mmenu__awards {
	display: inline-flex;
	align-self: center;
	margin: 0 auto 4px;
	flex-wrap: wrap;
	justify-content: center;
}

/* ─────────────────────────────────────────────────────────────────────────
   02 · Hero trust row   .lv-hero__trust
   ───────────────────────────────────────────────────────────────────────── */
.lv-hero__trust {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--lv-border);
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 16px;
	align-items: center;
	max-width: 540px;
}
.lv-hero__trust-label {
	/* Лейбл «Independently verified» убран — сигналы говорят сами за
	   себя, ещё одно слово сверху делало hero перегруженным. Оставляем
	   правила (без display: none само правило) на случай, если шеф
	   захочет вернуть label через override. */
	display: none;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--lv-secondary);
	padding-right: 16px;
	border-right: 1px solid var(--lv-border);
}
/* После скрытия label grid схлопывается в одну колонку. */
.lv-hero__trust {
	grid-template-columns: 1fr;
}
.lv-hero__trust-row {
	display: flex; align-items: center; gap: 16px;
	flex-wrap: wrap;
}
.hero-trust-item {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 12px;
	color: var(--lv-on-surface);
	text-decoration: none;
	transition: color var(--lv-dur-fast) var(--lv-ease-out);
}
a.hero-trust-item:hover,
a.hero-trust-item:focus-visible { color: var(--lv-primary); }
.hero-trust-item strong { font-weight: 700; }
.hero-trust-item .stars { font-size: 12px; }
.hero-trust-item .micro {
	color: var(--lv-secondary);
	font-weight: 500;
}

@media (max-width: 700px) {
	.lv-hero__trust {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.lv-hero__trust-label {
		padding-right: 0;
		border-right: 0;
		padding-bottom: 8px;
		border-bottom: 1px solid var(--lv-border);
	}
}
@media (max-width: 480px) {
	/* По specs из handoff'а — DMCA badge скрыт на узких экранах,
	   потому что плохо читается и не критичен в hero. */
	.lv-hero__trust-row > a:has(.dmca-badge),
	.lv-hero__trust-row > .hero-trust-item:has(.dmca-badge) {
		display: none;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
   02.D · Hero trust grouped — vertical accent, platform-tinted left bar
   (handoff 8vPbDm0Hc9M4MxQzxbCBoA, секция 02.D).

   Layout:
     ─ Eyebrow «Independently verified»
     ─ Stack из 2 групп (Clutch / Google), каждая с цветной вертикальной
       полосой слева в brand-color (#17313b / #4285F4).
     ─ В каждой группе: brand-line «On <Brand>» + row с цифрой/звёздами/
       подписями + extra pills (только в Clutch-группе: Premier + Top IT).

   Info-only, без ссылок. cursor: default.
   ───────────────────────────────────────────────────────────────────────── */
.hero-trust-grouped {
	margin-top: 24px;
	padding-top: 18px;
	border-top: 1px solid var(--lv-border);
	max-width: 540px;
}
.hero-trust-grouped__eyebrow {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lv-secondary);
	margin-bottom: 14px;
}
.htg-indent {
	display: flex;
	flex-direction: column;
	gap: 19px;
}
.htg-indent__group {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-left: 14px;
	border-left: 2px solid var(--lv-border);
}
.htg-indent__group--clutch { border-left-color: #17313b; }
.htg-indent__group--google { border-left-color: #4285F4; }
.htg-indent__brand {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--lv-secondary);
	text-transform: uppercase;
}
.htg-indent__brand .clutch-wordmark {
	letter-spacing: -0.02em;
	text-transform: none;
	font-size: 13px;
}
.htg-indent__row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	font-size: 12.5px;
	color: var(--lv-on-surface);
}
.htg-indent__row .num {
	font-family: var(--lv-font-headline);
	font-weight: 700;
	font-size: 14px;
	color: var(--lv-on-surface);
	letter-spacing: -0.01em;
}
.htg-indent__row .stars {
	font-size: 13px;
	color: #f6b318;
}
.htg-indent__row .reviews {
	color: var(--lv-secondary);
	font-weight: 500;
}

/* Premier Verified pill — компактная mini-версия для inline-use в trust-row.
   На handoff'е она меньше чем «обычная» .premier-pill. */
.htg-premier {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: #d8f1de;
	color: #117a3a;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.01em;
	padding: 3px 9px 3px 6px;
	border-radius: 999px;
	white-space: nowrap;
}
.htg-premier__check {
	width: 12px; height: 12px;
	background: #1f9a4a;
	color: #fff;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.htg-premier__check svg { display: block; }

/* Top IT — neutral pill с щитом-иконкой. */
.htg-topit {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: #f4f6f8;
	border: 1px solid var(--lv-border);
	border-radius: 999px;
	padding: 3px 9px;
	font-size: 10.5px;
	font-weight: 600;
	color: var(--lv-on-surface);
	letter-spacing: 0.01em;
	white-space: nowrap;
}
.htg-topit svg {
	width: 10px; height: 10px;
	color: var(--lv-primary);
	flex-shrink: 0;
}

/* Google-mark — «G» Google's blue + word «Google». Заменяет clutch-wordmark
   во второй группе. Не uppercase (как brand), просто bold. */
.google-mark {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #1a1a1a;
	font-weight: 700;
	text-transform: none;
	letter-spacing: -0.01em;
	font-size: 13px;
}
.google-mark svg { display: block; flex-shrink: 0; }

/* Info-only — cursor default. */
.hero-trust-grouped,
.htg-indent__group,
.htg-indent__row,
.htg-premier,
.htg-topit { cursor: default; }

/* Mobile responsive ─────────────────────────────────────── */
@media (max-width: 700px) {
	.hero-trust-grouped {
		margin-top: 20px;
		padding-top: 14px;
		max-width: 100%;
	}
	.htg-indent { gap: 17px; }
	.htg-indent__group {
		padding-left: 12px;
		border-left-width: 2px;
	}
	.htg-indent__row {
		gap: 8px;
		font-size: 12px;
		/* row-gap чуть меньше column-gap'а, чтобы Premier/Top IT при wrap'е
		   аккуратно вставали на следующую строку без зрительного «провала». */
		row-gap: 6px;
	}
	.htg-indent__row .num { font-size: 13px; }
	.htg-indent__row .stars { font-size: 12px; }
	/* .htg-topit и .htg-premier на мобиле НЕ скрываем — flex-wrap корректно
	   перенесёт их на следующую строку. */
}
@media (max-width: 480px) {
	.hero-trust-grouped__eyebrow { margin-bottom: 10px; font-size: 9.5px; }
	.htg-indent { gap: 15px; }
	.htg-indent__group {
		padding-left: 10px;
		gap: 4px;
	}
	.htg-indent__brand { font-size: 10px; }
	.htg-indent__brand .clutch-wordmark,
	.htg-indent__brand .google-mark { font-size: 12px; }
	.htg-indent__row { gap: 7px; row-gap: 5px; }
	/* Премьер и Top IT остаются видимыми на любых экранах — пользователь
	   попросил их не прятать. Они wrap'аются в следующую строку через
	   flex-wrap у .htg-indent__row. */
}

/* Reduced-motion: убираем потенциальные transitions внутри trust-group
   (фактически их нет, но на всякий случай дублируем правило). */
@media (prefers-reduced-motion: reduce) {
	.htg-indent__group,
	.htg-premier,
	.htg-topit { transition: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   03 · Client ratings section (compact 06.A) — copy слева, 2 rating-tile
   справа. Из handoff'а -AaqtZ38lYbSaB1jJ79VwA, секция 06.A.
   ───────────────────────────────────────────────────────────────────────── */
.lv-awards-section.lv-awards-section--compact {
	padding: 80px 0;
	background:
		radial-gradient(ellipse 50% 60% at 0% 0%, rgba(255, 218, 212, 0.32), transparent 60%),
		linear-gradient(180deg, #fdfbf9 0%, #faf8f5 100%);
	position: relative;
	overflow: hidden;
}
.lv-awards-section__inner {
	/* Берём ту же max-width что и остальные секции сайта (.container в
	   main.css = 1500px). Так блок выравнивается по визуальной сетке
	   с hero/services/footer и не выглядит "сжатым". */
	max-width: var(--container-width, 1500px);
	margin: 0 auto;
	padding-inline: 32px;
	position: relative;
}

.lv-awards-section__head {
	margin-bottom: 32px;
}
.lv-awards-section__eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--lv-primary);
}
.lv-awards-section__eyebrow::before {
	content: ''; width: 6px; height: 6px; border-radius: 999px;
	background: var(--lv-primary);
}

/* Body grid — tiles column СЛЕВА (фиксированная ширина) | copy column СПРАВА (1fr).
   Раньше tiles задавался через minmax(220px, 0.55fr) — он гулял от 220 до ~350px
   в зависимости от viewport'а, и юзеру не нравилось что карточки «сжимаются» на
   средних экранах. Сейчас фиксированно 360px — карточки одинаковой ширины на
   всех desktop-разрешениях, до момента mobile-breakpoint'а (≤960px), где grid
   сваливается в одну колонку и tiles растягивается на всю ширину. */
.lv-awards-section__body {
	display: grid;
	grid-template-columns: 360px 1fr;
	gap: 56px;
	align-items: stretch;
}

/* Copy column ─────────────────────────────────────── */
.lv-awards-section__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.lv-awards-section__title {
	font-family: var(--lv-font-headline);
	font-size: clamp(28px, 3.4vw, 40px);
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.1;
	margin: 0 0 18px;
	color: var(--lv-on-surface);
}
.lv-awards-section__title em {
	font-style: normal;
	color: var(--lv-primary);
}
.lv-awards-section__lead {
	font-size: 15px;
	line-height: 1.6;
	color: var(--lv-secondary);
	margin: 0 0 28px;
	max-width: 48ch;
}
.lv-awards-section__actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}
/* Desktop-набор по умолчанию виден, mobile-дубль скрыт. На <=960px
   (там же где grid сваливается в одну колонку и tiles уезжают под
   copy) роли меняются: desktop скрывается, mobile появляется внизу
   секции — чтобы кнопки оказались ПОСЛЕ tiles, а не между copy и tiles. */
.lv-awards-section__actions--mobile { display: none; }
.lv-awards-section__cta-primary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.lv-awards-section__cta-secondary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 18px;
	font-size: 14px;
	font-weight: 600;
	color: var(--lv-on-surface);
	text-decoration: none;
	border: 1px solid var(--lv-border);
	border-radius: 6px;
	background: #ffffff;
	transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
.lv-awards-section__cta-secondary:hover,
.lv-awards-section__cta-secondary:focus-visible {
	border-color: var(--lv-primary);
	color: var(--lv-primary);
	transform: translateY(-1px);
}

/* Tiles column — два tile'а в столбик (06.B layout). */
.lv-awards-section__tiles {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Tile shell — компактная узкая карточка. */
.award-tile {
	background: #fff;
	border-radius: var(--lv-radius-md);
	padding: 18px 20px;
	border: 1px solid var(--lv-border);
	display: flex;
	flex-direction: column;
	position: relative;
	transition: transform var(--lv-dur) var(--lv-ease-out), box-shadow var(--lv-dur) var(--lv-ease-out), border-color var(--lv-dur) var(--lv-ease-out);
	text-decoration: none;
	color: inherit;
	min-height: 0;
}
a.award-tile:hover,
a.award-tile:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--lv-shadow-2);
	border-color: var(--lv-primary-fixed-dim);
}
.award-tile__source {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lv-secondary);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.award-tile__source-name {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.award-tile__source-name .clutch-wordmark { letter-spacing: -0.02em; }
.award-tile__source .verify {
	color: var(--lv-primary);
	display: inline-flex; align-items: center; gap: 4px;
}

/* Rating-line: «5.0» + ★★★★★ inline, рядом, как на handoff-скрине. */
.award-tile__rating-line {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 14px 0 12px;
}
.award-tile__rating-num {
	font-family: var(--lv-font-headline);
	font-size: 36px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--lv-on-surface);
	flex: 0 0 auto;
}
.award-tile__rating-line .stars { font-size: 16px; color: #f6b318; }

/* Bold title под rating-line + параграф-описание (как у handoff'а). */
.award-tile__title {
	font-family: var(--lv-font-headline);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: -0.01em;
	line-height: 1.3;
	margin: 0 0 6px;
	color: var(--lv-on-surface);
}
.award-tile__body {
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--lv-secondary);
	margin: 0;
}

/* Clutch-карточка — лёгкий тёплый градиент */
.award-tile--rating-clutch {
	background: linear-gradient(180deg, #fff 0%, #fffbf2 100%);
}

/* Pills-row внутри Clutch tile'а — те же .htg-premier / .htg-topit что в
   hero (стили классов глобальные). margin-top создаёт отступ от body-текста. */
.award-tile__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 12px;
}

/* ─── Section mobile ─────────────────────────────────────────────────── */
@media (max-width: 960px) {
	.lv-awards-section.lv-awards-section--compact { padding: 64px 0; }
	.lv-awards-section__inner { padding-inline: 24px; }
	/* На мобиле body grid сваливается в одну колонку: tiles → copy → actions.
	   Отступы между ними одинаковые (20px) — даёт ритмичную вертикаль.
	   Раньше gap был 0, а у actions был margin-top: 28px + у lead margin-bottom:
	   28px — получалось ~56px над кнопками и почти 0 под карточками. Юзер
	   попросил выровнять: меньше над кнопками, больше под карточками. */
	.lv-awards-section__body {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.lv-awards-section__lead {
		max-width: 100%;
		/* Убираем margin-bottom — отступ до actions теперь даёт grid gap. */
		margin-bottom: 0;
	}
	.lv-awards-section__actions--desktop { display: none; }
	.lv-awards-section__actions--mobile {
		display: flex;
		/* margin-top: 0 — отступ от copy уже даёт grid gap, иначе удвоится. */
		margin-top: 0;
	}
}
@media (max-width: 560px) {
	.lv-awards-section.lv-awards-section--compact { padding: 48px 0; }
	.lv-awards-section__inner { padding-inline: 16px; }
	.lv-awards-section__tiles { gap: 12px; }
	.award-tile { padding: 20px; }
	.award-tile__rating-num { font-size: 28px; }
	.lv-awards-section__actions {
		flex-direction: column;
		align-items: stretch;
	}
	.lv-awards-section__cta-primary,
	.lv-awards-section__cta-secondary {
		justify-content: center;
		width: 100%;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
   04 · Footer trust band   .lv-footer-trust.lv-footer-trust--full
   ───────────────────────────────────────────────────────────────────────── */
.lv-footer-trust {
	position: relative;
	padding: 28px 0;
	width: 100%;
	color: #c9ccd0;
	font-family: var(--lv-font-body);
}
.lv-footer-trust--full .lv-footer-trust__row {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	max-width: 1280px;
	margin: 0 auto;
	gap: 0;
}
.lv-footer-trust__cell {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 6px 20px;
	border-left: 1px solid rgba(255,255,255,0.10);
	min-height: 64px;
	justify-content: center;
	text-decoration: none;
	color: inherit;
	transition: background var(--lv-dur-fast) var(--lv-ease-out);
}
.lv-footer-trust__cell:first-child {
	border-left: 0;
	padding-left: 0;
}
.lv-footer-trust__cell:last-child {
	padding-right: 0;
}
/* Clutch / Google cells link to their review profiles. "Invisible" link:
   inherits colour, no underline — the cell looks identical, only the hover
   tint + cursor signal it's clickable. */
a.lv-footer-trust__cell {
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}
a.lv-footer-trust__cell:hover,
a.lv-footer-trust__cell:focus-visible {
	background: rgba(255,255,255,0.04);
}
.lv-footer-trust__cell .label {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: rgba(255,255,255,0.45);
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
/* Внутри label рендерится наш Clutch wordmark или Google G — оба должны
   сохранять читаемость на тёмной подложке footer'а. Wordmark обычно
   #17313b на светлом, тут переопределяем на белёсый. */
.lv-footer-trust__cell .label .clutch-wordmark {
	color: rgba(255,255,255,0.75);
}
.lv-footer-trust__cell .value {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--lv-font-headline);
	font-weight: 600;
	font-size: 18px;
	color: #fff;
	letter-spacing: -0.015em;
}
.lv-footer-trust__cell .value .stars { font-size: 12px; color: #f6b318; }
.lv-footer-trust__cell .value small {
	font-family: var(--lv-font-body);
	font-weight: 500;
	font-size: 11px;
	color: rgba(255,255,255,0.55);
	margin-left: 2px;
}

@media (max-width: 1100px) {
	.lv-footer-trust--full .lv-footer-trust__row {
		grid-template-columns: repeat(3, 1fr);
		gap: 12px 0;
	}
	.lv-footer-trust__cell:nth-child(4) { border-left: 0; padding-left: 0; }
}
@media (max-width: 720px) {
	/* Мобильная компоновка — все 5 ячеек в столбик. На двух колонках всё
	   не вмещалось в строчку (звёзды + 5.0 + «N reviews» + premier pill
	   расползались). Один column с hairline-разделителями сверху между
	   ячейками — самый предсказуемый вариант. */
	.lv-footer-trust--full .lv-footer-trust__row {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0;
		max-width: 100%;
		padding: 0;
	}
	.lv-footer-trust__cell {
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.10);
		padding: 12px 0;
		align-items: flex-start;
		text-align: left;
		min-height: 0;
	}
	.lv-footer-trust__cell:first-child {
		border-top: 0;
		padding-top: 0;
	}
	.lv-footer-trust__cell .label  { text-align: left; }
	.lv-footer-trust__cell .value  { justify-content: flex-start; }

	/* В Clutch+Google ячейках значение может быть длинным (звёзды + 5.0 +
	   «75 reviews»). Разрешаем wrap на случай очень узких экранов — не
	   обязательно с переносом, но если не помещается — пусть аккуратно
	   перенесётся, а не вылезет за край. */
	.lv-footer-trust__cell:first-child .value,
	.lv-footer-trust__cell:nth-child(2) .value {
		flex-wrap: wrap;
		column-gap: 8px;
		row-gap: 2px;
	}
}
@media (max-width: 480px) {
	/* DMCA-cell оставляем видимым на мобиле — шеф просил все 5 сигналов
	   в footer'е, даже при компактной ширине.
	   .lv-footer-trust__cell--dmca { display: none; } */
}

/* Reduced-motion — выключаем transitions */
@media (prefers-reduced-motion: reduce) {
	.lv-header__awards,
	.hero-trust-item,
	.award-tile,
	.lv-footer-trust__cell {
		transition: none !important;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
   DMCA скрыт ТОЛЬКО в hero и в Awards section (tile 4). В footer'е DMCA
   остаётся — это его законное место, шеф просил только убрать дубли
   на главной (hero + большой блок Awards).
   ───────────────────────────────────────────────────────────────────────── */
.hero-trust-item--dmca,
.lv-awards-section .award-tile--dmca {
	display: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   Разделитель между Clutch и Google в hero trust row.
   Тонкая вертикальная hairline между chip'ами — визуально разделяет
   два rating-индикатора, чтобы не сливались в одну фразу.
   ───────────────────────────────────────────────────────────────────────── */
.lv-hero__trust-row .hero-trust-item--google {
	position: relative;
	padding-left: 14px;
	margin-left: -2px;
}
.lv-hero__trust-row .hero-trust-item--google::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 16px;
	background: rgba(25, 28, 29, 0.18);
}

/* На мобиле, когда chip'ы стек'аются в столбик — разделитель не нужен. */
@media (max-width: 700px) {
	.lv-hero__trust-row .hero-trust-item--google { padding-left: 0; margin-left: 0; }
	.lv-hero__trust-row .hero-trust-item--google::before { display: none; }
}

/* После удаления link'а у hero-trust-item — нет hover-эффекта по умолчанию.
   Cursor возвращаем к default, чтобы пользователь не видел pointer'а на
   некликабельных info-блоках. */
.hero-trust-item:not(a) { cursor: default; }
.award-tile:not(a) { cursor: default; }
.lv-footer-trust__cell:not(a) { cursor: default; }
/* Hover-эффект только на anchored ячейках. Сам award-tile:hover уже
   target'ит селектор `a.award-tile:hover` — это работает. */