/**
 * Раскладка страниц.
 *
 * Точки перелома взяты из содержимого, а не из списка популярных устройств:
 * колонка ломается там, где текст перестаёт помещаться в комфортную меру,
 * а сетка карточек — там, где колонка становится уже 17rem.
 */

@layer layout {

	/* Полоса контента с сайдбаром. Держим две колонки до последнего:
	   схлопывать раньше времени значит выбросить место, за которое
	   пользователь заплатил размером экрана. */
	.dp-shell {
		display: grid;
		gap: var(--space-6);
		align-items: start;
		padding-block: var(--space-6) var(--space-8);
	}

	@media (min-width: 64rem) {
		.dp-shell {
			grid-template-columns: minmax(0, 1fr) var(--sidebar-width);
			gap: var(--space-7);
		}
	}

	/* Каталог: фильтр слева, сетка справа. */
	.dp-catalog {
		display: grid;
		gap: var(--space-5);
		padding-block: var(--space-5) var(--space-8);
	}

	@media (min-width: 64rem) {
		.dp-catalog {
			grid-template-columns: 17rem minmax(0, 1fr);
			gap: var(--space-7);
			align-items: start;
		}
	}

	.dp-catalog__aside {
		position: sticky;
		top: calc(var(--header-height) + var(--space-4));
		max-block-size: calc(100dvh - var(--header-height) - var(--space-8));
		overflow-y: auto;
		overscroll-behavior: contain;
		padding-inline-end: var(--space-2);
	}

	@media (max-width: 63.999rem) {
		.dp-catalog__aside {
			position: static;
			max-block-size: none;
			overflow: visible;
		}
	}

	/* Заголовочный блок раздела. */
	.dp-page-head {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
		padding-block: var(--space-6) var(--space-2);
	}

	.dp-page-head__intro {
		max-inline-size: var(--measure);
		color: var(--text-secondary);
		text-wrap: pretty;
	}

	.dp-page-head__meta {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-3);
		font-size: var(--text-small-size);
		color: var(--text-tertiary);
	}

	/* Главная: витрина разделов. */
	.dp-hero {
		padding-block: var(--space-7) var(--space-6);
		display: flex;
		flex-direction: column;
		gap: var(--space-5);
	}

	.dp-hero__title {
		max-inline-size: 20ch;
	}

	.dp-hero__text {
		max-inline-size: var(--measure);
		font-size: 1.0625rem;
		color: var(--text-secondary);
		text-wrap: pretty;
	}

	.dp-hero__search {
		max-inline-size: 34rem;
		inline-size: 100%;
	}

	.dp-sections {
		display: grid;
		gap: var(--space-4);
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	}

	.dp-section-card {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
		padding: var(--space-5);
		border-radius: var(--radius-lg);
		box-shadow: var(--shadow-border);
		text-decoration: none;
		color: inherit;
		background: var(--surface-raised);
	}

	@media (prefers-reduced-motion: no-preference) {
		.dp-section-card {
			transition: box-shadow var(--duration-base) var(--ease-out);
		}
	}

	.dp-section-card:hover {
		box-shadow: var(--shadow-border-hover);
		color: inherit;
	}

	.dp-section-card__icon {
		display: grid;
		place-items: center;
		inline-size: 2.5rem;
		block-size: 2.5rem;
		border-radius: var(--radius-sm);
		background: var(--surface-brand-soft);
		color: var(--brand);
		margin-block-end: var(--space-2);
	}

	.dp-section-card__title {
		font-size: 1.0625rem;
		font-weight: 620;
	}

	.dp-section-card__text {
		font-size: var(--text-small-size);
		color: var(--text-secondary);
		line-height: 1.5;
		text-wrap: pretty;
	}

	.dp-section-card__count {
		margin-block-start: auto;
		padding-block-start: var(--space-3);
		font-size: var(--text-caption-size);
		color: var(--text-tertiary);
		font-variant-numeric: tabular-nums;
	}

	/* Блок раздела на главной. */
	.dp-block {
		padding-block: var(--space-7);
	}

	.dp-block__head {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--space-4);
		flex-wrap: wrap;
		margin-block-end: var(--space-5);
	}

	.dp-block__link {
		font-size: var(--text-small-size);
		font-weight: 600;
		text-decoration: none;
		white-space: nowrap;
	}

	/* Горизонтальная лента. Следующая карточка выглядывает за край —
	   ряд, обрывающийся ровно по границе, выглядит законченным, и его
	   никто не прокручивает. */
	.dp-scroller {
		display: flex;
		gap: var(--space-4);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-inline: var(--layout-margin);
		scroll-padding-inline: var(--layout-margin);
		margin-inline: calc(var(--layout-margin) * -1);
		padding-block-end: var(--space-2);
	}

	.dp-scroller > * {
		flex: 0 0 min(17rem, 78%);
		scroll-snap-align: start;
	}

	@media (min-width: 64rem) {
		.dp-scroller {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
			overflow: visible;
			margin-inline: 0;
			padding-inline: 0;
		}

		.dp-scroller > * {
			flex: initial;
		}
	}

	/* Карточка системы: две колонки на десктопе. */
	.dp-system {
		display: grid;
		gap: var(--space-6);
	}

	@media (min-width: 48rem) {
		.dp-system__top {
			display: grid;
			grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
			gap: var(--space-6);
			align-items: start;
		}
	}

	.dp-system__gallery {
		border-radius: var(--radius-lg);
		overflow: hidden;
		background: var(--surface-sunken);
		aspect-ratio: 4 / 3;
	}

	.dp-system__gallery img {
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
		outline: none;
	}

	.dp-system__summary {
		display: flex;
		flex-direction: column;
		gap: var(--space-4);
	}

	.dp-system__price {
		font-size: 1.5rem;
		font-weight: 650;
		font-variant-numeric: tabular-nums;
	}

	.dp-system__price small {
		display: block;
		font-size: var(--text-caption-size);
		font-weight: 400;
		color: var(--text-tertiary);
	}

	.dp-proscons {
		display: grid;
		gap: var(--space-4);
	}

	@media (min-width: 40rem) {
		.dp-proscons {
			grid-template-columns: 1fr 1fr;
		}
	}

	.dp-proscons__col {
		padding: var(--space-4);
		border-radius: var(--radius-md);
		box-shadow: var(--shadow-border);
	}

	.dp-proscons__title {
		font-size: var(--text-caption-size);
		text-transform: uppercase;
		letter-spacing: var(--text-label-tracking);
		margin-block-end: var(--space-3);
	}

	.dp-proscons__col--pros .dp-proscons__title {
		color: var(--positive);
	}

	.dp-proscons__col--cons .dp-proscons__title {
		color: var(--warning);
	}

	.dp-proscons ul {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
		font-size: var(--text-small-size);
		line-height: 1.5;
		list-style: none;
		padding: 0;
	}

	.dp-proscons li {
		display: flex;
		gap: var(--space-2);
	}

	.dp-proscons li::before {
		flex: none;
		font-weight: 700;
	}

	.dp-proscons__col--pros li::before {
		content: "+";
		color: var(--positive);
	}

	.dp-proscons__col--cons li::before {
		content: "−";
		color: var(--warning);
	}

	/* Таблица сравнения. */
	.dp-compare-wrap {
		overflow-x: auto;
		border-radius: var(--radius-md);
		box-shadow: var(--shadow-border);
	}

	.dp-compare {
		min-inline-size: 40rem;
		font-size: var(--text-small-size);
	}

	.dp-compare th,
	.dp-compare td {
		padding: var(--space-3);
		text-align: start;
		border-bottom: 1px solid var(--separator);
		vertical-align: top;
	}

	.dp-compare thead th {
		position: sticky;
		top: 0;
		background: var(--surface-raised);
		z-index: 1;
	}

	.dp-compare tr.is-differentiator th {
		color: var(--text-primary);
	}

	.dp-compare tr:not(.is-differentiator) {
		color: var(--text-tertiary);
	}

	/* Пагинация. */
	.dp-pagination {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2);
		justify-content: center;
		padding-block: var(--space-6);
	}

	.dp-pagination a,
	.dp-pagination span {
		display: grid;
		place-items: center;
		min-inline-size: 2.75rem;
		min-block-size: 2.75rem;
		padding-inline: var(--space-2);
		border-radius: var(--radius-sm);
		text-decoration: none;
		font-variant-numeric: tabular-nums;
		color: var(--text-primary);
	}

	.dp-pagination a:hover {
		background: var(--surface-sunken);
	}

	.dp-pagination .current {
		background: var(--brand);
		color: var(--text-on-brand);
		font-weight: 600;
	}

	/* ================================================================== */
	/*  Главная страница (по макету)                                      */
	/* ================================================================== */

	.dp-accent-text {
		color: var(--brand);
	}

	/* --- Hero --------------------------------------------------------- */

	.dp-home-hero {
		display: grid;
		gap: var(--gutter);
		align-items: center;
		padding-block: var(--space-7) var(--section-gap);
	}

	@media (min-width: 64rem) {
		.dp-home-hero {
			grid-template-columns: 1fr 1fr;
			gap: var(--space-8);
			min-height: 60vh;
		}
	}

	.dp-home-hero__text {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: var(--space-5);
		z-index: 1;
	}

	/* Мягкое синее свечение за текстом — из макета. */
	.dp-home-hero__glow {
		position: absolute;
		inset: -3rem;
		z-index: -1;
		background: radial-gradient(60% 60% at 30% 40%, rgba(0, 82, 255, 0.08), transparent 70%);
		filter: blur(40px);
		pointer-events: none;
	}

	.dp-home-hero__title {
		font-size: var(--text-display-size);
		line-height: var(--text-display-height);
		font-weight: var(--text-display-weight);
		letter-spacing: var(--text-display-tracking);
	}

	.dp-home-hero__lede {
		font-size: var(--text-lead-size);
		line-height: var(--text-lead-height);
		color: var(--text-secondary);
		max-inline-size: 34rem;
		text-wrap: pretty;
	}

	.dp-home-hero__search {
		max-inline-size: 34rem;
	}

	.dp-home-hero__chips {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-2);
	}

	.dp-home-hero__chips-label {
		font-size: var(--text-caption-size);
		text-transform: uppercase;
		letter-spacing: var(--text-label-tracking);
		color: var(--text-tertiary);
	}

	/* 3D-рендер в стеклянной панели. */
	.dp-home-hero__media {
		border-radius: var(--radius-2xl);
		overflow: hidden;
		background: linear-gradient(135deg, #ffffff, #eaf1fb);
		box-shadow: var(--shadow-overlay);
		aspect-ratio: 16 / 10;
	}

	.dp-home-hero__media img {
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
		outline: none;
		mix-blend-mode: multiply;
	}

	/* --- Кнопки-таблетки ---------------------------------------------- */

	.dp-pill {
		display: inline-flex;
		align-items: center;
		padding: 0.4rem 1rem;
		min-block-size: 2.25rem;
		border-radius: var(--radius-pill);
		background: var(--surface-container-high);
		color: var(--text-secondary);
		font-size: var(--text-small-size);
		font-weight: 600;
		text-decoration: none;
		border: 1px solid var(--separator);
	}

	@media (prefers-reduced-motion: no-preference) {
		.dp-pill {
			transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
		}
	}

	.dp-pill:hover {
		background: var(--brand);
		color: #fff;
		border-color: var(--brand);
	}

	.dp-pill--active {
		background: var(--brand);
		color: #fff;
		border-color: var(--brand);
	}

	/* Ряд фильтр-чипов на разводящих страницах. */
	.dp-hubchips {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2);
		margin-block: var(--space-4) var(--space-6);
	}

	/* Нижний SEO-текст раздела. */
	.dp-seo-block {
		margin-block-start: var(--section-gap);
		padding: var(--space-7);
		border-radius: var(--radius-lg);
		background: var(--surface);
		box-shadow: var(--shadow-border);
	}

	.dp-seo-block > h2 {
		font-size: var(--text-title-size);
		font-weight: var(--text-title-weight);
		letter-spacing: var(--text-title-tracking);
		margin-block-end: var(--space-4);
	}

	/* --- Секции главной ----------------------------------------------- */

	.dp-home-section {
		margin-block-end: var(--section-gap);
	}

	.dp-home-section__title {
		font-size: var(--text-title-size);
		font-weight: var(--text-title-weight);
		letter-spacing: var(--text-title-tracking);
	}

	.dp-home-section__sub {
		color: var(--text-secondary);
		margin-block-start: var(--space-2);
	}

	.dp-home-section__head {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		gap: var(--space-4);
		flex-wrap: wrap;
		margin-block-end: var(--space-6);
	}

	.dp-home-section__more {
		display: inline-flex;
		align-items: center;
		gap: var(--space-1);
		color: var(--brand);
		font-weight: 600;
		font-size: var(--text-small-size);
		text-decoration: none;
		white-space: nowrap;
	}

	.dp-home-section__more:hover {
		text-decoration: underline;
	}

	/* --- Bento-сетка разделов ----------------------------------------- */

	.dp-bento {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-4);
		margin-block-start: var(--space-6);
	}

	@media (min-width: 40rem) {
		.dp-bento {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	@media (min-width: 64rem) {
		.dp-bento {
			grid-template-columns: repeat(6, 1fr);
		}
	}

	.dp-bento__card {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: var(--space-3);
		padding: var(--space-5) var(--space-3);
		background: var(--surface);
		border-radius: var(--radius-lg);
		box-shadow: var(--shadow-border);
		text-decoration: none;
		color: var(--text-primary);
		text-align: center;
	}

	@media (prefers-reduced-motion: no-preference) {
		.dp-bento__card {
			transition: box-shadow var(--duration-base) var(--ease-out), translate var(--duration-base) var(--ease-out);
		}

		.dp-bento__card:hover {
			box-shadow: var(--shadow-border-hover);
			translate: 0 -4px;
		}
	}

	.dp-bento__icon {
		display: grid;
		place-items: center;
		inline-size: 4rem;
		block-size: 4rem;
		border-radius: var(--radius-pill);
		background: var(--surface-brand-soft);
		color: var(--brand);
	}

	@media (prefers-reduced-motion: no-preference) {
		.dp-bento__icon {
			transition: background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
		}
	}

	.dp-bento__card:hover .dp-bento__icon {
		background: var(--brand);
		color: #fff;
	}

	.dp-bento__name {
		font-size: var(--text-small-size);
		font-weight: 600;
	}

	/* --- Контент + сайдбар -------------------------------------------- */

	.dp-home-grid {
		display: grid;
		gap: var(--gutter);
	}

	@media (min-width: 64rem) {
		.dp-home-grid {
			grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
			gap: var(--space-8);
			align-items: start;
		}
	}

	.dp-home-aside__sticky {
		position: sticky;
		top: calc(var(--header-height) + var(--space-4));
	}

	/* --- Строка сравнения --------------------------------------------- */

	.dp-compare-list {
		display: flex;
		flex-direction: column;
		gap: var(--space-4);
	}

	.dp-crow {
		background: var(--surface);
		border-radius: var(--radius-lg);
		box-shadow: var(--shadow-border);
		overflow: hidden;
	}

	.dp-crow--recommended {
		box-shadow: var(--shadow-border-hover);
	}

	.dp-crow__flag {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		padding: var(--space-2) var(--space-4);
		background: var(--recommended);
		color: var(--text-on-recommended);
		font-size: var(--text-caption-size);
		font-weight: 600;
		letter-spacing: 0.02em;
	}

	.dp-crow__flag svg {
		fill: currentColor;
	}

	.dp-crow__body {
		display: flex;
		flex-direction: column;
		gap: var(--space-4);
		padding: var(--space-5);
	}

	@media (min-width: 40rem) {
		.dp-crow__body {
			flex-direction: row;
			align-items: center;
		}
	}

	.dp-crow__media {
		flex: none;
		inline-size: 100%;
		block-size: 8rem;
		display: grid;
		place-items: center;
		border-radius: var(--radius-md);
		background: var(--surface-sunken);
		overflow: hidden;
	}

	@media (min-width: 40rem) {
		.dp-crow__media {
			inline-size: 8rem;
		}
	}

	.dp-crow__media img {
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
		outline: none;
		mix-blend-mode: multiply;
	}

	.dp-crow__media-icon {
		color: var(--brand);
		opacity: 0.5;
	}

	.dp-crow__info {
		flex: 1 1 auto;
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
	}

	.dp-crow__title {
		font-size: var(--text-heading-size);
		font-weight: 600;
	}

	.dp-crow__title a {
		color: inherit;
		text-decoration: none;
	}

	.dp-crow__title a:hover {
		color: var(--brand);
	}

	.dp-crow__text {
		color: var(--text-secondary);
		font-size: var(--text-small-size);
		line-height: 1.5;
	}

	.dp-crow__chips {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2);
		margin-block-start: var(--space-1);
	}

	.dp-crow__actions {
		flex: none;
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
	}

	.dp-chip-status {
		display: inline-flex;
		align-items: center;
		padding: 3px 0.6rem;
		border-radius: var(--radius-pill);
		background: var(--surface-container-high);
		color: var(--text-secondary);
		font-size: var(--text-caption-size);
		font-weight: 600;
		font-variant-numeric: tabular-nums;
	}

	.dp-chip-status--positive {
		background: var(--positive-soft);
		color: var(--positive);
	}

	.dp-chip-status--warning {
		background: var(--warning-soft);
		color: var(--warning);
	}

	.dp-chip-status--negative {
		background: var(--negative-soft);
		color: var(--negative);
	}

	/* --- Эксперты ----------------------------------------------------- */

	.dp-experts {
		padding: var(--space-7) var(--space-5);
		border-radius: var(--radius-xl);
		background: var(--surface-brand-soft);
	}

	.dp-experts__head {
		text-align: center;
		max-inline-size: 40rem;
		margin-inline: auto;
		margin-block-end: var(--space-6);
	}

	.dp-experts__badge {
		color: var(--brand);
		display: inline-flex;
	}

	.dp-experts__lede {
		color: var(--text-secondary);
		margin-block-start: var(--space-2);
	}

	.dp-experts__grid {
		display: grid;
		gap: var(--space-4);
		grid-template-columns: 1fr;
	}

	@media (min-width: 40rem) {
		.dp-experts__grid {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	.dp-experts__card {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-2);
		padding: var(--space-5);
		background: var(--surface);
		border-radius: var(--radius-lg);
		box-shadow: var(--shadow-border);
		text-decoration: none;
		color: var(--text-primary);
		text-align: center;
	}

	.dp-experts__name {
		font-weight: 600;
		font-size: var(--text-small-size);
	}

	.dp-experts__role {
		font-size: var(--text-caption-size);
		color: var(--text-secondary);
	}

	/* ================================================================== */
	/*  Карточка системы (по макету)                                      */
	/* ================================================================== */

	.dp-syshero {
		display: flex;
		flex-direction: column;
		gap: var(--space-5);
	}

	.dp-syshero__meta {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		flex-wrap: wrap;
	}

	.dp-syshero__country {
		display: inline-flex;
		align-items: center;
		gap: var(--space-1);
		font-size: var(--text-small-size);
		color: var(--text-secondary);
		font-weight: 600;
	}

	.dp-syshero__title {
		font-size: var(--text-display-size);
		line-height: var(--text-display-height);
		font-weight: var(--text-display-weight);
		letter-spacing: var(--text-display-tracking);
	}

	.dp-syshero__lede {
		font-size: var(--text-lead-size);
		line-height: var(--text-lead-height);
		color: var(--text-secondary);
		max-inline-size: var(--measure);
		text-wrap: pretty;
	}

	.dp-syshero__cta {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-3);
	}

	/* Крупный рендер на мягком градиенте — как в макете. */
	.dp-syshero__media {
		border-radius: var(--radius-xl);
		overflow: hidden;
		background: linear-gradient(135deg, #ffffff, #eef3fb);
		box-shadow: var(--shadow-border);
		aspect-ratio: 16 / 11;
	}

	.dp-syshero__media img {
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
		outline: none;
		mix-blend-mode: multiply;
	}

	/* Ряд крупной статистики. */
	.dp-stats {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-3);
		padding: var(--space-5);
		background: var(--surface);
		border-radius: var(--radius-lg);
		box-shadow: var(--shadow-border);
	}

	@media (max-width: 32rem) {
		.dp-stats {
			grid-template-columns: 1fr;
			gap: var(--space-4);
		}
	}

	.dp-stats__tile {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4px;
		text-align: center;
		padding-inline: var(--space-2);
	}

	.dp-stats__tile + .dp-stats__tile {
		border-inline-start: 1px solid var(--separator);
	}

	@media (max-width: 32rem) {
		.dp-stats__tile + .dp-stats__tile {
			border-inline-start: 0;
			border-block-start: 1px solid var(--separator);
			padding-block-start: var(--space-3);
		}
	}

	.dp-stats__value {
		font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
		font-weight: 700;
		color: var(--brand);
		line-height: 1.1;
		letter-spacing: -0.01em;
	}

	.dp-stats__label {
		font-size: var(--text-caption-size);
		color: var(--text-secondary);
		text-transform: uppercase;
		letter-spacing: 0.04em;
	}

	.dp-syshero__price-row {
		display: flex;
		align-items: baseline;
		gap: var(--space-5);
		flex-wrap: wrap;
	}

	.dp-syshero__price {
		font-size: 1.5rem;
		font-weight: 700;
		font-variant-numeric: tabular-nums;
	}

	.dp-syshero__price small {
		display: block;
		font-size: var(--text-caption-size);
		font-weight: 400;
		color: var(--text-tertiary);
	}

	.dp-chip-status--brand {
		background: var(--surface-brand-soft);
		color: var(--brand);
	}

	/* --- Реферальная лид-секция (градиент) ---------------------------- */

	.dp-quote {
		scroll-margin-top: calc(var(--header-height) + var(--space-4));
		display: grid;
		gap: var(--space-6);
		padding: var(--space-7);
		border-radius: var(--radius-xl);
		background: linear-gradient(135deg, var(--brand), var(--brand-active));
		color: #fff;
	}

	@media (min-width: 48rem) {
		.dp-quote {
			grid-template-columns: 1fr 1fr;
			align-items: center;
		}
	}

	.dp-quote__title {
		font-size: var(--text-title-size);
		font-weight: 700;
		letter-spacing: var(--text-title-tracking);
	}

	.dp-quote__text p {
		margin-block-start: var(--space-3);
		color: rgba(255, 255, 255, 0.85);
		line-height: 1.6;
	}

	/* Форма на градиенте — белая карточка. */
	.dp-quote__form .dp-lead {
		background: var(--surface);
		color: var(--text-primary);
	}

	/* ================================================================== */
	/*  Интерактивный подбор варианта (виниры-лендинг)                    */
	/* ================================================================== */

	.dp-explorer {
		padding: var(--space-6);
		border-radius: var(--radius-lg);
		background: var(--surface);
		box-shadow: var(--shadow-border);
	}

	.dp-explorer__title {
		font-size: var(--text-heading-size);
		font-weight: 600;
		margin-block-end: var(--space-5);
	}

	.dp-explorer__grid {
		display: grid;
		gap: var(--space-5);
	}

	@media (min-width: 48rem) {
		.dp-explorer__grid {
			grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
			align-items: start;
		}
	}

	.dp-explorer__chips {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2);
	}

	@media (min-width: 48rem) {
		.dp-explorer__chips {
			flex-direction: column;
			align-items: stretch;
		}
	}

	.dp-explorer__chip {
		padding: var(--space-3) var(--space-4);
		border-radius: var(--radius-md);
		border: 2px solid var(--separator);
		background: var(--surface);
		color: var(--text-primary);
		font-size: var(--text-small-size);
		font-weight: 600;
		text-align: start;
		cursor: pointer;
		touch-action: manipulation;
	}

	@media (prefers-reduced-motion: no-preference) {
		.dp-explorer__chip {
			transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
		}
	}

	.dp-explorer__chip:hover {
		border-color: var(--brand);
	}

	.dp-explorer__chip.is-active {
		border-color: var(--brand);
		background: var(--surface-brand-soft);
		color: var(--brand);
	}

	.dp-explorer__panel {
		padding: var(--space-5);
		border-radius: var(--radius-md);
		background: var(--surface-sunken);
		min-block-size: 8rem;
	}

	.dp-explorer__pane.is-active {
		animation: dp-fade-in var(--duration-base) var(--ease-out);
	}

	@media (prefers-reduced-motion: reduce) {
		.dp-explorer__pane.is-active {
			animation: none;
		}
	}

	.dp-explorer__pane-title {
		font-weight: 700;
		margin-block-end: var(--space-2);
	}

	.dp-explorer__pane-text {
		color: var(--text-secondary);
		line-height: 1.6;
		text-wrap: pretty;
	}

	@keyframes dp-fade-in {
		from {
			opacity: 0;
			transform: translateY(4px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	/* ================================================================== */
	/*  Сравнение / разбор (лендинг)                                      */
	/* ================================================================== */

	.dp-cmp-hero {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-4);
		text-align: center;
		padding-block: var(--space-6) var(--space-4);
	}

	.dp-cmp-hero__title {
		font-size: var(--text-display-size);
		line-height: var(--text-display-height);
		font-weight: var(--text-display-weight);
		letter-spacing: var(--text-display-tracking);
		max-inline-size: 22ch;
	}

	.dp-cmp-hero__lede {
		font-size: var(--text-lead-size);
		line-height: var(--text-lead-height);
		color: var(--text-secondary);
		max-inline-size: 52ch;
		text-wrap: pretty;
	}

	.dp-h2h__title {
		font-size: var(--text-title-size);
		font-weight: var(--text-title-weight);
		letter-spacing: var(--text-title-tracking);
		margin-block-end: var(--space-5);
	}

	.dp-h2h__grid {
		display: grid;
		gap: var(--space-4);
	}

	@media (min-width: 48rem) {
		.dp-h2h__grid {
			grid-template-columns: 1fr 1fr;
		}
	}

	.dp-h2h__card {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
		padding: var(--space-5);
		border-radius: var(--radius-lg);
		background: var(--surface);
		box-shadow: var(--shadow-border);
	}

	.dp-h2h__card--pick {
		box-shadow: var(--shadow-border-hover);
		outline: 2px solid var(--recommended);
		outline-offset: -2px;
	}

	.dp-h2h__flag {
		min-block-size: 1.5rem;
	}

	.dp-h2h__badge {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		padding: 3px 0.6rem;
		border-radius: var(--radius-pill);
		background: var(--surface-container-high);
		color: var(--text-secondary);
		font-size: var(--text-caption-size);
		font-weight: 600;
	}

	.dp-h2h__badge--pick {
		background: var(--recommended);
		color: var(--text-on-recommended);
	}

	.dp-h2h__badge--pick svg {
		fill: currentColor;
	}

	.dp-h2h__media {
		aspect-ratio: 16 / 10;
		border-radius: var(--radius-md);
		overflow: hidden;
		background: linear-gradient(135deg, #ffffff, #eef3fb);
		display: grid;
		place-items: center;
	}

	.dp-h2h__media img {
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
		outline: none;
		mix-blend-mode: multiply;
	}

	.dp-h2h__name {
		font-size: var(--text-heading-size);
		font-weight: 600;
	}

	.dp-h2h__name a {
		color: inherit;
		text-decoration: none;
	}

	.dp-h2h__name a:hover {
		color: var(--brand);
	}

	.dp-h2h__rows {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
	}

	.dp-h2h__rows li {
		display: flex;
		gap: var(--space-3);
		font-size: var(--text-small-size);
		line-height: 1.4;
		color: var(--text-secondary);
	}

	.dp-h2h__rows strong {
		display: block;
		color: var(--text-primary);
		font-weight: 600;
	}

	.dp-h2h__ico {
		flex: none;
		color: var(--brand);
		display: inline-flex;
	}

	/* ================================================================== */
	/*  Профиль эксперта                                                  */
	/* ================================================================== */

	.dp-expert {
		padding-block-end: var(--section-gap);
	}

	.dp-expert-hero {
		display: grid;
		gap: var(--gutter, 1.5rem);
		margin-block-end: var(--section-gap);
	}

	@media (min-width: 48rem) {
		.dp-expert-hero {
			grid-template-columns: 5fr 7fr;
			align-items: stretch;
		}
	}

	.dp-expert-portrait {
		position: relative;
		border-radius: var(--radius-xl);
		overflow: hidden;
		box-shadow: var(--shadow-glass);
		background: var(--surface-sunken);
		aspect-ratio: 4 / 5;
		min-block-size: 20rem;
	}

	.dp-expert-portrait img {
		position: absolute;
		inset: 0;
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
	}

	.dp-expert-portrait__blank {
		position: absolute;
		inset: 0;
		display: grid;
		place-items: center;
		background: linear-gradient(135deg, var(--surface-raised), var(--surface-sunken));
	}

	.dp-expert-badge {
		position: absolute;
		inset-block-start: var(--space-4);
		inset-inline-end: var(--space-4);
		display: inline-flex;
		align-items: center;
		gap: 5px;
		padding: 5px 0.7rem;
		border-radius: 9999px;
		background: var(--surface-glass);
		backdrop-filter: blur(10px);
		box-shadow: 0 1px 3px rgba(0, 45, 91, 0.12);
		font-size: var(--text-caption-size);
		font-weight: 600;
		color: var(--accent, #00a3ff);
	}

	.dp-expert-info {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: var(--space-3);
	}

	.dp-expert-role {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		align-self: flex-start;
		padding: 4px 0.75rem;
		border-radius: 9999px;
		background: color-mix(in srgb, var(--brand) 10%, transparent);
		color: var(--primary, #003ec7);
		font-size: var(--text-caption-size);
		font-weight: 600;
	}

	.dp-expert-name {
		font-size: var(--text-display-size);
		line-height: var(--text-display-height);
		font-weight: var(--text-display-weight);
		letter-spacing: var(--text-display-tracking);
	}

	.dp-expert-lead {
		font-size: var(--text-lead-size);
		line-height: var(--text-lead-height);
		color: var(--text-secondary);
		max-inline-size: 48ch;
		text-wrap: pretty;
	}

	.dp-expert-stats {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-3);
		margin: 0;
		margin-block: var(--space-2);
	}

	@media (min-width: 30rem) {
		.dp-expert-stats {
			grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
		}
	}

	.dp-expert-stats > div {
		padding: var(--space-3);
		border-radius: var(--radius-lg);
		background: var(--surface-raised);
		border: 1px solid var(--separator);
		text-align: center;
	}

	.dp-expert-stats dt {
		font-size: var(--text-title-size);
		font-weight: 680;
		color: var(--brand);
	}

	.dp-expert-stats dd {
		margin: 4px 0 0;
		font-size: var(--text-caption-size);
		color: var(--text-secondary);
	}

	.dp-expert-actions {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-3);
	}

	/* Бенто */
	.dp-expert-bento {
		display: grid;
		gap: var(--gutter, 1.5rem);
		margin-block: var(--section-gap);
	}

	@media (min-width: 48rem) {
		.dp-expert-bento {
			grid-template-columns: repeat(2, 1fr);
		}

		.dp-expert-bio {
			grid-column: 1 / -1;
		}
	}

	@media (min-width: 64rem) {
		.dp-expert-bento {
			grid-template-columns: 7fr 5fr;
			align-items: start;
		}

		.dp-expert-bio {
			grid-column: 1;
			grid-row: 1 / 3;
		}
	}

	.dp-expert-bio,
	.dp-expert-expertise,
	.dp-expert-creds {
		padding: var(--space-6);
		border-radius: var(--radius-xl);
		background: var(--surface-raised);
		border: 1px solid var(--separator);
		box-shadow: var(--shadow-glass);
	}

	.dp-expert-expertise {
		background: var(--surface-sunken);
	}

	.dp-expert-bento__title {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		font-size: var(--text-title-size);
		font-weight: var(--text-title-weight);
		margin-block-end: var(--space-4);
	}

	.dp-expert-bento__title svg {
		color: var(--brand);
	}

	.dp-expert-expertise__list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
	}

	.dp-expert-expertise__list li {
		display: flex;
		align-items: flex-start;
		gap: var(--space-2);
	}

	.dp-expert-expertise__list svg {
		flex: none;
		color: var(--accent, #00a3ff);
		margin-block-start: 2px;
	}

	.dp-expert-creds__list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
	}

	.dp-cred {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		padding: var(--space-3);
		border-radius: var(--radius-md);
		background: var(--surface-sunken);
	}

	.dp-cred__ic {
		flex: none;
		display: grid;
		place-items: center;
		inline-size: 2.25rem;
		block-size: 2.25rem;
		border-radius: var(--radius-sm);
		background: color-mix(in srgb, var(--brand) 10%, transparent);
		color: var(--brand);
	}

	.dp-cred__text {
		font-size: 0.9375rem;
		font-weight: 500;
	}

	/* ================================================================== */
	/*  Калькулятор All-on-4                                              */
	/* ================================================================== */

	.dp-page-head--center {
		align-items: center;
		text-align: center;
	}

	.dp-page-head--center .dp-lede {
		max-inline-size: 54ch;
	}

	.dp-prose--narrow {
		max-inline-size: var(--measure);
		margin-inline: auto;
	}

	.dp-shell--reverse {
		display: grid;
		gap: var(--space-6);
		align-items: start;
		padding-block: var(--space-6) var(--space-8);
	}

	@media (min-width: 64rem) {
		.dp-shell--reverse {
			grid-template-columns: minmax(0, 1fr) var(--sidebar-width);
			gap: var(--space-7);
		}
	}

	.dp-allon4 {
		display: grid;
		gap: var(--gutter, 1.5rem);
		margin-block: var(--space-6);
	}

	@media (min-width: 64rem) {
		.dp-allon4 {
			grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
			align-items: start;
		}
	}

	.dp-allon4__form {
		display: flex;
		flex-direction: column;
		gap: var(--space-6);
	}

	.dp-allon4__result {
		position: static;
	}

	@media (min-width: 64rem) {
		.dp-allon4__result {
			position: sticky;
			top: calc(var(--header-height) + var(--space-4));
		}
	}

	/* Шаг калькулятора */
	.dp-calcstep {
		border: 0;
		margin: 0;
		padding: var(--space-5);
		border-radius: var(--radius-xl);
		background: var(--surface-glass);
		backdrop-filter: blur(12px);
		box-shadow: var(--shadow-glass);
	}

	.dp-calcstep__head {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		font-size: var(--text-title-size);
		font-weight: var(--text-title-weight);
		margin-block-end: var(--space-5);
		padding: 0;
	}

	.dp-calcstep__num {
		display: grid;
		place-items: center;
		inline-size: 2rem;
		block-size: 2rem;
		flex: none;
		border-radius: 50%;
		background: var(--brand);
		color: #fff;
		font-size: 0.875rem;
		font-weight: 700;
	}

	.dp-calcstep__grid {
		display: grid;
		gap: var(--space-3);
	}

	.dp-calcstep__grid--2 {
		grid-template-columns: 1fr;
	}

	.dp-calcstep__grid--3 {
		grid-template-columns: 1fr;
	}

	@media (min-width: 34rem) {
		.dp-calcstep__grid--2 {
			grid-template-columns: repeat(2, 1fr);
		}

		.dp-calcstep__grid--3 {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	/* Радио-карточка */
	.dp-optcard {
		position: relative;
		display: flex;
		border: 2px solid var(--separator);
		border-radius: var(--radius-lg);
		background: var(--surface-raised);
		cursor: pointer;
	}

	.dp-optcard__input {
		position: absolute;
		opacity: 0;
		inline-size: 1px;
		block-size: 1px;
		margin: -1px;
	}

	.dp-optcard__body {
		display: flex;
		flex-direction: column;
		gap: var(--space-1);
		padding: var(--space-4);
		inline-size: 100%;
	}

	.dp-optcard__body--center {
		align-items: center;
		justify-content: center;
		text-align: center;
		min-block-size: 5.5rem;
	}

	.dp-optcard__row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-2);
	}

	.dp-optcard__label {
		font-weight: 640;
	}

	.dp-optcard__note {
		font-size: var(--text-caption-size);
		color: var(--text-tertiary);
	}

	.dp-optcard__desc {
		font-size: var(--text-caption-size);
		color: var(--text-secondary);
		line-height: 1.45;
	}

	.dp-optcard__price {
		margin-block-start: var(--space-2);
		font-weight: 640;
		font-variant-numeric: tabular-nums;
		color: var(--text-primary);
	}

	.dp-optcard__price small {
		font-weight: 400;
		color: var(--text-tertiary);
	}

	.dp-optcard__check {
		position: absolute;
		inset-block-start: var(--space-3);
		inset-inline-end: var(--space-3);
		display: grid;
		place-items: center;
		inline-size: 1.4rem;
		block-size: 1.4rem;
		border-radius: 50%;
		background: var(--brand);
		color: #fff;
		opacity: 0;
	}

	.dp-optcard__body--center .dp-optcard__check {
		inset-block-start: var(--space-2);
		inset-inline-end: var(--space-2);
	}

	.dp-optcard.is-selected {
		border-color: var(--brand);
		background: var(--surface-brand-soft);
	}

	.dp-optcard.is-selected .dp-optcard__check {
		opacity: 1;
	}

	.dp-optcard__input:focus-visible + .dp-optcard__body,
	.dp-optcard:focus-within {
		outline: 2px solid var(--focus-ring);
		outline-offset: 2px;
		border-radius: var(--radius-lg);
	}

	.dp-optcard--recommended {
		border-color: var(--recommended, #005183);
	}

	.dp-optcard__flag {
		position: absolute;
		inset-block-start: 0;
		inset-inline-start: 50%;
		translate: -50% -50%;
		padding: 3px 0.6rem;
		border-radius: 9999px;
		background: var(--recommended, #005183);
		color: #fff;
		font-size: 0.625rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		white-space: nowrap;
	}

	@media (prefers-reduced-motion: no-preference) {
		.dp-optcard {
			transition: border-color var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out);
		}
	}

	/* Итоговая панель */
	.dp-calctotal {
		padding: var(--space-6);
		border-radius: var(--radius-xl);
		background: var(--surface-raised);
		box-shadow: var(--shadow-border);
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
	}

	.dp-calctotal__label {
		font-size: var(--text-caption-size);
		text-transform: uppercase;
		letter-spacing: var(--text-label-tracking);
		color: var(--text-tertiary);
	}

	.dp-calctotal__value {
		font-size: clamp(2rem, 6vw, 2.75rem);
		font-weight: 700;
		font-variant-numeric: tabular-nums;
		letter-spacing: -0.02em;
		color: var(--brand);
	}

	.dp-calctotal__note {
		font-size: var(--text-caption-size);
		color: var(--text-secondary);
		line-height: 1.5;
	}

	.dp-calctotal__included {
		list-style: none;
		margin: var(--space-2) 0 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
		font-size: var(--text-small-size);
	}

	.dp-calctotal__included li {
		display: flex;
		align-items: center;
		gap: var(--space-2);
	}

	.dp-calctotal__included svg {
		flex: none;
		color: var(--positive, #0f7a4f);
	}

	/* ================================================================== */
	/*  Результаты и отзывы                                               */
	/* ================================================================== */

	.dp-muted {
		color: var(--text-tertiary);
	}

	.dp-results-bento {
		display: grid;
		gap: var(--gutter, 1.5rem);
		margin-block: var(--space-6) var(--space-8);
	}

	@media (min-width: 60rem) {
		.dp-results-bento {
			grid-template-columns: 2fr 1fr;
			align-items: stretch;
		}
	}

	.dp-results-ratings {
		padding: var(--space-6);
		border-radius: var(--radius-xl);
		background: var(--surface-raised);
		box-shadow: var(--shadow-glass);
		border: 1px solid var(--separator);
	}

	.dp-results-ratings__title {
		font-size: var(--text-title-size);
		font-weight: var(--text-title-weight);
	}

	.dp-results-ratings__sub {
		margin-block: var(--space-1) var(--space-4);
		color: var(--text-secondary);
		font-size: var(--text-small-size);
	}

	.dp-ratingrow__list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
	}

	.dp-ratingrow {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		gap: 2px var(--space-3);
		padding: var(--space-3) var(--space-4);
		border-radius: var(--radius-md);
		background: var(--surface-sunken);
	}

	.dp-ratingrow__name {
		font-weight: 640;
		color: var(--text-primary);
		text-decoration: none;
	}

	.dp-ratingrow__name:hover {
		color: var(--brand);
	}

	.dp-ratingrow__meta {
		grid-column: 1;
		grid-row: 2;
		font-size: var(--text-caption-size);
		color: var(--text-tertiary);
	}

	.dp-ratingrow__score {
		grid-column: 2;
		grid-row: 1 / 3;
		display: inline-flex;
		align-items: center;
		gap: 4px;
		font-size: 1.25rem;
		font-weight: 700;
		font-variant-numeric: tabular-nums;
		color: var(--recommended, #005183);
	}

	.dp-ratingrow__score svg {
		fill: currentColor;
	}

	.dp-results-method {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
		padding: var(--space-6);
		border-radius: var(--radius-xl);
		background: var(--brand);
		color: #fff;
		box-shadow: var(--shadow-border);
	}

	.dp-results-method__ic {
		opacity: 0.85;
	}

	.dp-results-method__title {
		font-size: var(--text-title-size);
		font-weight: var(--text-title-weight);
	}

	.dp-results-method__text {
		opacity: 0.9;
		line-height: 1.55;
	}

	.dp-results-method .dp-button {
		margin-block-start: auto;
		align-self: flex-start;
	}

	/* Кейсы до/после */
	.dp-cases {
		display: grid;
		gap: var(--gutter, 1.5rem);
	}

	@media (min-width: 44rem) {
		.dp-cases {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	.dp-case {
		border-radius: var(--radius-xl);
		overflow: hidden;
		background: var(--surface-raised);
		border: 1px solid var(--separator);
		box-shadow: var(--shadow-glass);
	}

	.dp-case__pair {
		display: grid;
		grid-template-columns: 1fr 1fr;
		aspect-ratio: 16 / 9;
		background: var(--surface-sunken);
	}

	.dp-case__side {
		position: relative;
		overflow: hidden;
	}

	.dp-case__side:first-child {
		border-inline-end: 1px solid var(--separator);
	}

	.dp-case__side img {
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
	}

	.dp-case__tag {
		position: absolute;
		inset-block-end: var(--space-2);
		padding: 2px 0.5rem;
		border-radius: var(--radius-sm);
		font-size: var(--text-caption-size);
		font-weight: 600;
	}

	.dp-case__tag--before {
		inset-inline-start: var(--space-2);
		background: var(--surface-glass);
		color: var(--text-primary);
	}

	.dp-case__tag--after {
		inset-inline-end: var(--space-2);
		background: var(--brand);
		color: #fff;
	}

	.dp-case__body {
		padding: var(--space-5);
	}

	.dp-case__title {
		font-size: 1.0625rem;
		font-weight: 640;
	}

	.dp-case__text {
		margin-block-start: var(--space-2);
		color: var(--text-secondary);
		font-size: var(--text-small-size);
	}

	/* Стена отзывов */
	.dp-reviewwall {
		display: grid;
		gap: var(--gutter, 1.5rem);
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
	}

	.dp-reviewcard {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
		padding: var(--space-5);
		border-radius: var(--radius-lg);
		background: var(--surface-raised);
		border: 1px solid var(--separator);
		box-shadow: var(--shadow-glass);
	}

	.dp-reviewcard__head {
		display: flex;
		align-items: center;
		gap: var(--space-3);
	}

	.dp-reviewcard__avatar {
		flex: none;
		display: grid;
		place-items: center;
		inline-size: 2.5rem;
		block-size: 2.5rem;
		border-radius: 50%;
		background: var(--surface-brand-soft);
		color: var(--brand);
		font-weight: 700;
	}

	.dp-reviewcard__who {
		display: flex;
		flex-direction: column;
		min-inline-size: 0;
	}

	.dp-reviewcard__name {
		font-weight: 620;
	}

	.dp-reviewcard__date {
		font-size: var(--text-caption-size);
		color: var(--text-tertiary);
	}

	.dp-reviewcard__stars {
		margin-inline-start: auto;
		display: inline-flex;
		gap: 1px;
		color: var(--separator-strong);
	}

	.dp-reviewcard__stars .is-on {
		color: var(--recommended, #005183);
	}

	.dp-reviewcard__stars .is-on svg {
		fill: currentColor;
	}

	.dp-reviewcard__system {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		align-self: flex-start;
		padding: 3px 0.6rem;
		border-radius: 9999px;
		background: color-mix(in srgb, var(--recommended, #005183) 12%, transparent);
		color: var(--recommended, #005183);
		font-size: var(--text-caption-size);
		font-weight: 600;
		text-decoration: none;
	}

	.dp-reviewcard__text {
		color: var(--text-secondary);
		line-height: 1.55;
	}

	/* ================================================================== */
	/*  Контакты                                                          */
	/* ================================================================== */

	.dp-contact-bento {
		display: grid;
		gap: 0;
		margin-block: var(--space-6);
		border-radius: var(--radius-xl);
		overflow: hidden;
		border: 1px solid var(--separator);
		box-shadow: var(--shadow-glass);
		background: var(--surface-raised);
	}

	@media (min-width: 40rem) {
		.dp-contact-bento {
			grid-template-columns: 1fr 1fr;
		}
	}

	.dp-contact-bento__info {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
		padding: var(--space-6);
	}

	.dp-contact-bento__head {
		display: flex;
		align-items: center;
		gap: var(--space-2);
	}

	.dp-contact-bento__head svg {
		color: var(--brand);
	}

	.dp-contact-bento__head h2 {
		font-size: var(--text-title-size);
		font-weight: var(--text-title-weight);
	}

	.dp-contact-list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
		color: var(--text-secondary);
	}

	.dp-contact-list a {
		color: var(--text-primary);
		text-decoration: none;
	}

	.dp-contact-list a:hover {
		color: var(--brand);
	}

	.dp-contact-bento__info .dp-button {
		align-self: flex-start;
		margin-block-start: var(--space-2);
	}

	.dp-contact-bento__map {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: var(--space-2);
		min-block-size: 14rem;
		background:
			radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 45%),
			linear-gradient(135deg, var(--surface-sunken), var(--surface-brand-soft));
		color: var(--brand);
	}

	.dp-contact-bento__city {
		font-weight: 640;
		color: var(--text-primary);
	}

	.dp-legal-head {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		padding-block-end: var(--space-3);
		margin-block-end: var(--space-5);
		border-block-end: 1px solid var(--separator);
	}

	.dp-legal-head svg {
		color: var(--recommended, #005183);
	}

	.dp-legal-head h2 {
		font-size: var(--text-title-size);
		font-weight: var(--text-title-weight);
	}

	.dp-legal-grid {
		display: grid;
		gap: var(--gutter, 1.5rem);
	}

	@media (min-width: 40rem) {
		.dp-legal-grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	.dp-legal-card {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
		padding: var(--space-5);
		border-radius: var(--radius-lg);
		background: var(--surface-raised);
		border: 1px solid var(--separator);
		box-shadow: var(--shadow-glass);
		text-decoration: none;
		color: inherit;
	}

	.dp-legal-card__top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: var(--text-tertiary);
	}

	.dp-legal-card__top svg:first-child {
		color: var(--brand);
	}

	.dp-legal-card__title {
		font-size: 1.0625rem;
		font-weight: 640;
	}

	.dp-legal-card:hover .dp-legal-card__title,
	.dp-legal-card:hover .dp-legal-card__top svg:last-child {
		color: var(--brand);
	}

	.dp-legal-card__desc {
		font-size: var(--text-small-size);
		color: var(--text-secondary);
		margin-block-start: auto;
	}

	@media (prefers-reduced-motion: no-preference) {
		.dp-legal-card {
			transition: box-shadow var(--duration-base) var(--ease-out);
		}

		.dp-legal-card:hover {
			box-shadow: var(--shadow-border-hover);
		}
	}

	/* Редколлегия */
	.dp-board {
		display: grid;
		gap: var(--gutter, 1.5rem);
		grid-template-columns: repeat(2, 1fr);
	}

	@media (min-width: 48rem) {
		.dp-board {
			grid-template-columns: repeat(4, 1fr);
		}
	}

	.dp-board__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-2);
		text-align: center;
		text-decoration: none;
		color: inherit;
	}

	.dp-board__ava {
		display: inline-grid;
		place-items: center;
		border-radius: 50%;
		overflow: hidden;
		border: 2px solid var(--separator);
	}

	.dp-board__item:hover .dp-board__ava {
		border-color: var(--brand);
	}

	.dp-board__name {
		font-weight: 620;
	}

	.dp-board__item:hover .dp-board__name {
		color: var(--brand);
	}

	.dp-board__role {
		font-size: var(--text-caption-size);
		color: var(--text-secondary);
	}

	/* ================================================================== */
	/*  Проверка подлинности                                              */
	/* ================================================================== */

	.dp-block__head--center {
		justify-content: center;
		text-align: center;
	}

	.dp-block--narrow {
		max-inline-size: 52rem;
		margin-inline: auto;
	}

	.dp-auth-banner {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-4) var(--space-5);
		margin-block: var(--space-6);
		padding: var(--space-6);
		border-radius: var(--radius-xl);
		background: var(--surface-glass);
		backdrop-filter: blur(12px);
		border-inline-start: 4px solid var(--brand);
		box-shadow: var(--shadow-glass);
	}

	.dp-auth-banner__ic {
		flex: none;
		display: grid;
		place-items: center;
		inline-size: 4rem;
		block-size: 4rem;
		border-radius: 50%;
		background: color-mix(in srgb, var(--brand) 12%, transparent);
		color: var(--brand);
	}

	.dp-auth-banner__body {
		flex: 1 1 20rem;
		min-inline-size: 0;
	}

	.dp-auth-banner__body h2 {
		font-size: var(--text-title-size);
		font-weight: var(--text-title-weight);
		margin-block-end: var(--space-2);
	}

	.dp-auth-banner__body p {
		color: var(--text-secondary);
		line-height: 1.55;
	}

	.dp-auth-banner__cta {
		flex: none;
		white-space: nowrap;
	}

	/* Шаги */
	.dp-auth-steps {
		display: grid;
		gap: var(--gutter, 1.5rem);
		grid-template-columns: 1fr;
	}

	@media (min-width: 48rem) {
		.dp-auth-steps {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	.dp-auth-step {
		position: relative;
		overflow: hidden;
		padding: var(--space-6);
		border-radius: var(--radius-xl);
		background: var(--surface-raised);
		border: 1px solid var(--separator);
		box-shadow: var(--shadow-glass);
	}

	.dp-auth-step::before {
		content: "";
		position: absolute;
		inset-block-start: 0;
		inset-inline: 0;
		block-size: 4px;
		background: var(--brand);
	}

	.dp-auth-step__num {
		position: absolute;
		inset-block-start: var(--space-3);
		inset-inline-end: var(--space-4);
		font-size: 2.75rem;
		font-weight: 700;
		line-height: 1;
		color: var(--surface-brand-soft);
	}

	.dp-auth-step__ic {
		display: grid;
		place-items: center;
		inline-size: 3rem;
		block-size: 3rem;
		border-radius: var(--radius-md);
		background: color-mix(in srgb, var(--brand) 10%, transparent);
		color: var(--brand);
		margin-block-end: var(--space-3);
	}

	.dp-auth-step__title {
		font-size: 1.125rem;
		font-weight: 640;
		margin-block-end: var(--space-2);
	}

	.dp-auth-step__text {
		color: var(--text-secondary);
		line-height: 1.55;
		font-size: 0.9375rem;
	}

	/* Оригинал / подделка */
	.dp-auth-compare {
		display: grid;
		gap: var(--gutter, 1.5rem);
	}

	@media (min-width: 44rem) {
		.dp-auth-compare {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	.dp-auth-col {
		border-radius: var(--radius-xl);
		overflow: hidden;
		border: 1px solid var(--separator);
		background: var(--surface-raised);
		box-shadow: var(--shadow-glass);
	}

	.dp-auth-col__head {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		padding: var(--space-4) var(--space-5);
		font-size: 1.0625rem;
		font-weight: 640;
		color: #fff;
	}

	.dp-auth-col--ok .dp-auth-col__head {
		background: var(--positive, #0f7a4f);
	}

	.dp-auth-col--bad .dp-auth-col__head {
		background: var(--negative, #ba1a1a);
	}

	.dp-auth-col__list {
		list-style: none;
		margin: 0;
		padding: var(--space-5);
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
	}

	.dp-auth-col__list li {
		display: flex;
		align-items: flex-start;
		gap: var(--space-2);
		line-height: 1.5;
	}

	.dp-auth-col__list svg {
		flex: none;
		margin-block-start: 3px;
	}

	.dp-auth-col--ok .dp-auth-col__list svg {
		color: var(--positive, #0f7a4f);
	}

	.dp-auth-col--bad .dp-auth-col__list svg {
		color: var(--warning, #b3261e);
	}

	/* Чек-лист */
	.dp-auth-checklist {
		padding: var(--space-6);
		border-radius: var(--radius-xl);
		background: var(--surface-glass);
		backdrop-filter: blur(12px);
		box-shadow: var(--shadow-glass);
	}

	.dp-auth-checklist__head {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		padding-block-end: var(--space-3);
		margin-block-end: var(--space-3);
		border-block-end: 1px solid var(--separator);
	}

	.dp-auth-checklist__head svg {
		color: var(--recommended, #005183);
	}

	.dp-auth-checklist__head h2 {
		font-size: var(--text-title-size);
		font-weight: var(--text-title-weight);
	}

	.dp-auth-checklist__lede {
		color: var(--text-secondary);
		margin-block-end: var(--space-4);
	}

	.dp-auth-check {
		display: flex;
		align-items: flex-start;
		gap: var(--space-3);
		padding: var(--space-3) var(--space-4);
		border-radius: var(--radius-md);
		border: 1px solid transparent;
		cursor: pointer;
	}

	.dp-auth-check:hover {
		background: var(--surface-sunken);
		border-color: var(--separator);
	}

	.dp-auth-check__box {
		position: absolute;
		opacity: 0;
		inline-size: 1px;
		block-size: 1px;
	}

	.dp-auth-check__mark {
		flex: none;
		display: grid;
		place-items: center;
		inline-size: 1.5rem;
		block-size: 1.5rem;
		margin-block-start: 1px;
		border-radius: 6px;
		border: 2px solid var(--separator-strong);
		color: #fff;
	}

	.dp-auth-check__mark svg {
		opacity: 0;
	}

	.dp-auth-check__box:checked + .dp-auth-check__mark {
		background: var(--brand);
		border-color: var(--brand);
	}

	.dp-auth-check__box:checked + .dp-auth-check__mark svg {
		opacity: 1;
	}

	.dp-auth-check__box:focus-visible + .dp-auth-check__mark {
		outline: 2px solid var(--focus-ring);
		outline-offset: 2px;
	}

	.dp-auth-check__title {
		display: block;
		font-weight: 620;
	}

	.dp-auth-check__desc {
		display: block;
		font-size: var(--text-small-size);
		color: var(--text-secondary);
		margin-block-start: 2px;
	}

	.dp-auth-check__box:checked ~ .dp-auth-check__text .dp-auth-check__title {
		color: var(--text-tertiary);
		text-decoration: line-through;
	}

	/* CTA-полоса */
	.dp-auth-cta {
		position: relative;
		overflow: hidden;
		margin-block: var(--space-8);
		padding: var(--space-8) var(--space-6);
		border-radius: var(--radius-xl);
		text-align: center;
		background: var(--surface-brand-soft);
	}

	.dp-auth-cta h2 {
		font-size: var(--text-display-size);
		line-height: var(--text-display-height);
		font-weight: var(--text-display-weight);
		letter-spacing: var(--text-display-tracking);
		margin-block-end: var(--space-3);
	}

	.dp-auth-cta p {
		max-inline-size: 44rem;
		margin-inline: auto;
		margin-block-end: var(--space-5);
		color: var(--text-secondary);
		text-wrap: pretty;
	}

	/* ================================================================== */
	/*  Мобильная модалка фильтра каталога                                */
	/* ================================================================== */

	/* Кнопка «Фильтр» показывается, пока каталог одноколоночный (< 64rem);
	   на десктопе с боковой панелью она не нужна. Привязка к 64rem, а не к
	   48rem, закрывает зазор на планшете. */
	.dp-filter-trigger {
		display: flex;
	}

	@media (min-width: 64rem) {
		.dp-filter-trigger {
			display: none;
		}
	}

	/* На десктопе панель — обычный сайдбар: обёртка тела «растворяется»,
	   форма фильтра встаёт прямо в колонку. */
	.dp-filter-modal__body {
		display: contents;
	}

	@media (max-width: 63.999rem) {
		/* На мобильном фильтр спрятан за кнопкой и открывается модалкой. */
		[data-dp-filter-panel] {
			display: none;
		}

		[data-dp-filter-panel].is-open {
			position: fixed;
			inset: 0;
			z-index: 80;
			display: flex;
			flex-direction: column;
			background: var(--surface-sunken);
		}

		[data-dp-filter-panel].is-open .dp-filter-modal__head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: var(--space-3);
			padding: var(--space-4);
			background: var(--surface-glass);
			backdrop-filter: blur(12px);
			border-block-end: 1px solid var(--separator);
		}

		[data-dp-filter-panel].is-open .dp-filter-modal__body {
			display: block;
			flex: 1 1 auto;
			overflow-y: auto;
			overscroll-behavior: contain;
			padding: var(--space-4) var(--space-4) var(--space-6);
		}

		[data-dp-filter-panel].is-open .dp-filter-modal__bar {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: var(--space-3);
			padding: var(--space-4);
			padding-block-end: calc(var(--space-4) + env(safe-area-inset-bottom));
			background: var(--surface-glass);
			backdrop-filter: blur(12px);
			border-block-start: 1px solid var(--separator);
			box-shadow: 0 -4px 20px rgba(0, 45, 91, 0.06);
		}

		[data-dp-filter-panel].is-open .dp-filter-modal__bar .dp-button {
			flex: 1 1 auto;
		}
	}

	.dp-filter-modal__title {
		font-size: 1.0625rem;
		font-weight: 640;
	}

	.dp-filter-modal__close {
		display: grid;
		place-items: center;
		inline-size: 2.5rem;
		block-size: 2.5rem;
		border: 0;
		border-radius: 50%;
		background: var(--surface-sunken);
		color: var(--text-secondary);
		cursor: pointer;
	}

	.dp-filter-modal__close:focus-visible {
		outline: 2px solid var(--focus-ring);
		outline-offset: 2px;
	}

	.dp-filter-modal__count {
		font-weight: 640;
		font-variant-numeric: tabular-nums;
		white-space: nowrap;
	}

	.dp-filter-open {
		overflow: hidden;
	}
}