/*
 * DataFirefly — Solution hubs (df_solution)
 * Landing pages "besoin × plateforme" + pages mères + index global.
 *
 * Accent dynamique : chaque page définit --df-sol-color (couleur plateforme)
 * sur <main>. Tout le reste dérive des tokens du thème (theme.css), donc
 * le dark mode fonctionne sans surcharge.
 *
 * @since 1.19.0
 */

.df-solution,
.df-sol-archive {
	--df-sol-color: var(--amber);
	--df-sol-soft: color-mix(in oklab, var(--df-sol-color) 10%, transparent);
	--df-sol-soft-2: color-mix(in oklab, var(--df-sol-color) 16%, transparent);
	--df-sol-line: color-mix(in oklab, var(--df-sol-color) 32%, var(--line));
}

/* ============================================================
   1. HERO (single)
   ============================================================ */

.df-sol-hero {
	position: relative;
	padding: 2.5rem 0 3.25rem;
	background:
		radial-gradient(560px 280px at 12% -10%, var(--df-sol-soft-2), transparent 70%),
		radial-gradient(680px 340px at 95% 0%, color-mix(in oklab, var(--df-sol-color) 7%, transparent), transparent 70%),
		var(--bg-2);
	border-bottom: 1px solid var(--line);
	overflow: hidden;
}

.df-sol-hero::after {
	content: "";
	position: absolute;
	inset: auto -120px -180px auto;
	width: 380px;
	height: 380px;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, var(--df-sol-soft-2), transparent 65%);
	pointer-events: none;
}

.df-sol-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, .7fr);
	gap: 2.5rem;
	align-items: center;
	margin-top: 1.25rem;
}

.df-sol-hero-meta {
	display: flex;
	align-items: center;
	gap: .85rem;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}

.df-sol-hero-copy h1 {
	margin: 0 0 .65rem;
	max-width: 22ch;
	text-wrap: balance;
}

.df-sol-subtitle {
	font-size: 1.35rem;
	color: var(--ink-2);
	margin: 0 0 .85rem;
}

.df-sol-hero-copy .df-lede {
	max-width: 58ch;
}

.df-sol-hero-cta {
	display: flex;
	gap: .75rem;
	flex-wrap: wrap;
	margin-top: 1.5rem;
}

/* Chip plateforme + glyphe */

.df-sol-plat-chip {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .35rem .85rem .35rem .4rem;
	border-radius: 999px;
	border: 1px solid var(--df-sol-line);
	background: var(--df-sol-soft);
	color: var(--ink);
	font-size: .85rem;
	font-weight: 600;
	letter-spacing: .01em;
	white-space: nowrap;
}

.df-sol-plat-glyph {
	display: inline-grid;
	place-items: center;
	width: 1.65rem;
	height: 1.65rem;
	border-radius: 50%;
	background: var(--df-sol-color);
	color: #fff;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .02em;
	flex: none;
}

.df-sol-plat-glyph.is-lg {
	width: 2.6rem;
	height: 2.6rem;
	font-size: 1rem;
}

/* Stats hero */

.df-sol-hero-stats {
	display: grid;
	gap: .85rem;
	align-content: center;
}

.df-sol-stat {
	background: var(--card);
	border: 1px solid var(--line);
	border-left: 3px solid var(--df-sol-color);
	border-radius: 14px;
	padding: .9rem 1.15rem;
	box-shadow: var(--shadow);
}

.df-sol-stat-n {
	font-size: 1.85rem;
	line-height: 1.1;
	color: var(--ink);
}

.df-sol-stat-l {
	font-size: .82rem;
	color: var(--ink-3);
	margin-top: .15rem;
}

/* ============================================================
   2. PAINS — "les problèmes que ça règle"
   ============================================================ */

.df-sol-pain-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 1rem;
}

.df-sol-pain {
	position: relative;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 1.25rem 1.25rem 1.15rem;
	box-shadow: var(--shadow);
}

.df-sol-pain-x {
	display: inline-grid;
	place-items: center;
	width: 1.8rem;
	height: 1.8rem;
	border-radius: 8px;
	background: color-mix(in oklab, #d64545 12%, transparent);
	color: #c23b3b;
	font-weight: 700;
	margin-bottom: .7rem;
}

.df-sol-pain h3 {
	margin: 0 0 .35rem;
	font-size: 1.02rem;
}

.df-sol-pain p {
	margin: 0;
	font-size: .92rem;
	color: var(--ink-3);
	line-height: 1.55;
}

/* ============================================================
   3. PICKS — la sélection classée (cœur de page)
   ============================================================ */

.df-sol-pick-list {
	list-style: none;
	margin: 1.75rem 0 0;
	padding: 0;
	display: grid;
	gap: 1.1rem;
	counter-reset: none;
}

.df-sol-pick-card {
	position: relative;
	display: grid;
	grid-template-columns: auto 168px minmax(0, 1fr);
	gap: 1.35rem;
	align-items: center;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 1.35rem 1.5rem;
	box-shadow: var(--shadow);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.df-sol-pick-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg);
	border-color: var(--df-sol-line);
}

.df-sol-pick-card.is-top {
	border-color: var(--df-sol-line);
	background:
		linear-gradient(135deg, var(--df-sol-soft), transparent 55%),
		var(--card);
}

.df-sol-pick-top {
	display: flex;
	align-items: center;
	gap: .6rem;
	flex-wrap: wrap;
	margin-bottom: .3rem;
}

.df-sol-pick-top .df-sol-pick-title {
	margin: 0;
}

.df-sol-pick-rank {
	font-size: 2.4rem;
	line-height: 1;
	color: color-mix(in oklab, var(--df-sol-color) 75%, var(--ink));
	min-width: 2.2rem;
	text-align: center;
}

.df-sol-pick-card.is-top .df-sol-pick-rank {
	color: var(--df-sol-color);
}

.df-sol-pick-thumb {
	display: block;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--line);
	background: var(--bg-2);
	aspect-ratio: 4 / 3;
}

.df-sol-pick-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .25s ease;
}

.df-sol-pick-card:hover .df-sol-pick-thumb img {
	transform: scale(1.03);
}

.df-sol-pick-body {
	min-width: 0;
}

.df-sol-pick-title {
	margin: 0 0 .3rem;
	font-size: 1.15rem;
	display: flex;
	align-items: center;
	gap: .6rem;
	flex-wrap: wrap;
}

.df-sol-pick-title a {
	color: var(--ink);
	text-decoration: none;
}

.df-sol-pick-title a:hover {
	color: var(--df-sol-color);
}

.df-sol-pick-badge {
	display: inline-block;
	padding: .2rem .6rem;
	border-radius: 999px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	background: var(--df-sol-soft-2);
	color: color-mix(in oklab, var(--df-sol-color) 80%, var(--ink));
	border: 1px solid var(--df-sol-line);
	white-space: nowrap;
}

.df-sol-pick-note {
	margin: 0 0 .4rem;
	font-size: .92rem;
	color: var(--ink-2);
	font-style: italic;
}

.df-sol-pick-note::before {
	content: "— ";
	color: var(--df-sol-color);
}

.df-sol-pick-desc {
	margin: 0 0 .75rem;
	font-size: .92rem;
	color: var(--ink-3);
	line-height: 1.6;
}

.df-sol-pick-row {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.df-sol-pick-price {
	font-weight: 700;
	color: var(--ink);
}

.df-sol-pick-cta {
	margin-left: auto;
}

/* ============================================================
   4. COMPARE — tableau comparatif
   ============================================================ */

.df-sol-compare-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: var(--card);
	box-shadow: var(--shadow);
	margin-top: 1.5rem;
}

.df-sol-compare-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .9rem;
	/* 5 colonnes depuis la v1.19.8 (Version/Compatibilité retirées) :
	   le tableau tient sans scroll horizontal sur tablette. */
	min-width: 560px;
}

.df-sol-compare-table th,
.df-sol-compare-table td {
	padding: .85rem 1rem;
	text-align: left;
	border-bottom: 1px solid var(--line);
	vertical-align: middle;
	white-space: nowrap;
}

.df-sol-compare-table td:first-child {
	white-space: normal;
	min-width: 200px;
}

.df-sol-compare-table thead th {
	background: var(--bg-2);
	color: var(--ink-3);
	font-size: .74rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	position: sticky;
	top: 0;
}

.df-sol-compare-table tbody tr:last-child td {
	border-bottom: 0;
}

.df-sol-compare-table tr.is-top td {
	background: var(--df-sol-soft);
}

.df-sol-compare-rank {
	display: inline-grid;
	place-items: center;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	background: var(--df-sol-soft-2);
	color: color-mix(in oklab, var(--df-sol-color) 80%, var(--ink));
	font-weight: 700;
	font-size: .78rem;
	margin-right: .55rem;
}

.df-sol-compare-table a {
	color: var(--ink);
	font-weight: 600;
	text-decoration: none;
}

.df-sol-compare-table a:hover {
	color: var(--df-sol-color);
}

.df-sol-compare-go {
	font-size: .84rem;
	color: var(--df-sol-color) !important;
}

/* ============================================================
   5. PROSE (contenu Gutenberg) + GUIDE
   ============================================================ */

.df-sol-prose {
	max-width: 760px;
}

.df-sol-prose h2,
.df-sol-prose h3 {
	text-wrap: balance;
}

.df-sol-guide-inner {
	background:
		linear-gradient(160deg, var(--df-sol-soft), transparent 40%),
		var(--card);
	border: 1px solid var(--df-sol-line);
	border-radius: 20px;
	padding: 2rem 2.25rem;
	box-shadow: var(--shadow);
}

.df-sol-guide-body {
	max-width: 70ch;
	line-height: 1.7;
}

.df-sol-guide-body h3 {
	margin-top: 1.5em;
}

.df-sol-guide-body ul,
.df-sol-guide-body ol {
	padding-left: 1.2em;
}

/* ============================================================
   6. BENEFITS + STEPS + QUOTE
   ============================================================ */

/* 6 bénéfices → 3 + 3. En auto-fit pur, un grand écran produisait 5 + 1. */
.df-sol-benefit-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}

@media (max-width: 900px) {
	.df-sol-benefit-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.df-sol-benefit-grid {
		grid-template-columns: 1fr;
	}
}

.df-sol-benefit-ico svg {
	width: 1.05rem;
	height: 1.05rem;
	display: block;
}

.df-sol-benefit {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 1.3rem 1.3rem 1.15rem;
	box-shadow: var(--shadow);
	transition: border-color .18s ease;
}

.df-sol-benefit:hover {
	border-color: var(--df-sol-line);
}

.df-sol-benefit-ico {
	display: inline-grid;
	place-items: center;
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 10px;
	background: var(--df-sol-soft-2);
	color: color-mix(in oklab, var(--df-sol-color) 85%, var(--ink));
	font-size: 1.05rem;
	margin-bottom: .75rem;
}

.df-sol-benefit h3 {
	margin: 0 0 .35rem;
	font-size: 1rem;
}

.df-sol-benefit p {
	margin: 0;
	font-size: .9rem;
	color: var(--ink-3);
	line-height: 1.55;
}

/* Steps */

.df-sol-step-list {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
	display: grid;
	gap: 0;
	max-width: 760px;
}

.df-sol-step {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 1.25rem;
	padding: 1.15rem 0;
	border-bottom: 1px dashed var(--line);
}

.df-sol-step:last-child {
	border-bottom: 0;
}

.df-sol-step-n {
	font-size: 1.5rem;
	color: var(--df-sol-color);
	min-width: 2.4rem;
}

.df-sol-step h3 {
	margin: .1rem 0 .3rem;
	font-size: 1.05rem;
}

.df-sol-step p {
	margin: 0;
	color: var(--ink-3);
	font-size: .93rem;
	line-height: 1.6;
}

/* Quote */

.df-sol-quote-card {
	margin: 0;
	background:
		linear-gradient(135deg, var(--df-sol-soft), transparent 60%),
		var(--card);
	border: 1px solid var(--df-sol-line);
	border-radius: 20px;
	padding: 2rem 2.4rem;
	box-shadow: var(--shadow);
	max-width: 820px;
}

.df-sol-quote-card blockquote {
	margin: 0 0 1rem;
	border: 0;
	padding: 0;
	font-size: 1.25rem;
	line-height: 1.55;
	color: var(--ink);
}

.df-sol-quote-card blockquote::before {
	content: "\201C";
	display: block;
	font-size: 3rem;
	line-height: .6;
	color: var(--df-sol-color);
	margin-bottom: .6rem;
	font-family: inherit;
}

.df-sol-quote-card figcaption {
	font-size: .9rem;
	color: var(--ink-3);
}

.df-sol-quote-card figcaption strong {
	color: var(--ink-2);
}

/* ============================================================
   7. SIBLINGS + RELATED
   ============================================================ */

.df-sol-sibling-grid,
.df-sol-related-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1rem;
}

.df-sol-sibling-card {
	--df-sol-soft: color-mix(in oklab, var(--df-sol-color) 10%, transparent);
	--df-sol-line: color-mix(in oklab, var(--df-sol-color) 32%, var(--line));
	display: flex;
	align-items: center;
	gap: 1rem;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 1.1rem 1.25rem;
	text-decoration: none;
	color: var(--ink);
	box-shadow: var(--shadow);
	transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.df-sol-sibling-card:hover {
	transform: translateY(-2px);
	border-color: var(--df-sol-line);
	box-shadow: var(--shadow-lg);
}

.df-sol-sibling-card h3 {
	margin: 0 0 .15rem;
	font-size: .98rem;
}

.df-sol-sibling-card p {
	margin: 0;
	font-size: .82rem;
}

.df-sol-sibling-card .df-sol-card-arrow {
	margin-left: auto;
}

.df-sol-related-card {
	display: block;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 1.2rem 1.3rem;
	text-decoration: none;
	color: var(--ink);
	box-shadow: var(--shadow);
	transition: transform .18s ease, border-color .18s ease;
}

.df-sol-related-card:hover {
	transform: translateY(-2px);
	border-color: var(--df-sol-line);
}

.df-sol-related-card h3 {
	margin: 0 0 .3rem;
	font-size: 1rem;
}

.df-sol-related-card p {
	margin: 0;
	font-size: .88rem;
	color: var(--ink-3);
	line-height: 1.55;
}

/* ============================================================
   8. CTA BAND
   ============================================================ */

.df-sol-cta-band {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) auto;
	gap: 2rem;
	align-items: center;
	background:
		radial-gradient(480px 240px at 0% 0%, var(--df-sol-soft-2), transparent 70%),
		var(--card);
	border: 1px solid var(--df-sol-line);
	border-radius: 24px;
	padding: 2.4rem 2.6rem;
	box-shadow: var(--shadow-lg);
}

.df-sol-cta-band h2 {
	margin: 0 0 .4rem;
}

.df-sol-cta-band .df-lede {
	margin: 0;
	font-size: 1rem;
}

.df-sol-cta-actions {
	display: flex;
	gap: .75rem;
	flex-wrap: wrap;
	justify-content: flex-end;
}

/* ============================================================
   9. ARCHIVES — index global + pages mères
   ============================================================ */

/* Bandeau full-bleed : le fond court sur toute la largeur, le contenu est
   contraint par un .df-wrap interne (même structure que .df-sol-hero). */
.df-sol-archive-head {
	position: relative;
	padding: 2.5rem 0 2.25rem;
	background:
		radial-gradient(560px 280px at 10% -20%, var(--df-sol-soft-2), transparent 70%),
		var(--bg-2);
	border-bottom: 1px solid var(--line);
	overflow: hidden;
}

.df-sol-archive-head h1 {
	max-width: 26ch;
	text-wrap: balance;
	margin: .5rem 0 .75rem;
}

.df-sol-archive-head h1 em {
	font-style: italic;
	color: var(--df-sol-color);
}

.df-sol-archive-head .df-lede {
	max-width: 62ch;
}

/* Pills plateformes */

/* Pills : désormais à l'intérieur du bandeau, donc pas de marge basse. */
.df-sol-filters {
	display: flex;
	gap: .6rem;
	flex-wrap: wrap;
	margin-top: 1.75rem;
}

/* Cartes plateformes : le .df-section porte l'espacement, la grille reste nue. */
.df-sol-plat-cards-wrap {
	padding-top: 2.5rem;
}

.df-sol-pill {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .45rem 1rem;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--card);
	color: var(--ink-2);
	font-size: .88rem;
	font-weight: 600;
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.df-sol-pill:hover {
	border-color: var(--df-sol-line);
	color: var(--ink);
}

.df-sol-pill.is-active {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--bg);
}

.df-sol-pill-n {
	display: inline-grid;
	place-items: center;
	min-width: 1.4rem;
	height: 1.4rem;
	padding: 0 .3rem;
	border-radius: 999px;
	background: var(--chip);
	color: var(--ink-3);
	font-size: .72rem;
	font-weight: 700;
}

.df-sol-pill.is-active .df-sol-pill-n {
	background: color-mix(in oklab, var(--bg) 25%, transparent);
	color: var(--bg);
}

/* Cartes plateformes (index global) */

.df-sol-plat-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.1rem;
}

.df-sol-plat-card {
	--df-sol-soft: color-mix(in oklab, var(--df-sol-color) 10%, transparent);
	--df-sol-soft-2: color-mix(in oklab, var(--df-sol-color) 16%, transparent);
	--df-sol-line: color-mix(in oklab, var(--df-sol-color) 32%, var(--line));
	display: flex;
	align-items: center;
	gap: 1.1rem;
	background:
		linear-gradient(135deg, var(--df-sol-soft), transparent 60%),
		var(--card);
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 1.4rem 1.5rem;
	text-decoration: none;
	color: var(--ink);
	box-shadow: var(--shadow);
	transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.df-sol-plat-card:hover {
	transform: translateY(-3px);
	border-color: var(--df-sol-line);
	box-shadow: var(--shadow-lg);
}

.df-sol-plat-card h2 {
	margin: 0 0 .2rem;
	font-size: 1.1rem;
}

.df-sol-plat-card p {
	margin: 0;
	font-size: .85rem;
	color: var(--ink-3);
}

.df-sol-plat-card .df-sol-card-arrow {
	margin-left: auto;
}

/* Groupes de besoins */

.df-sol-group {
	margin-top: 2.5rem;
}

.df-sol-group-title {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin: 0 0 1.1rem;
	font-size: 1.15rem;
}

.df-sol-group-title::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--line);
}

.df-sol-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: 1.1rem;
}

/* Carte besoin */

.df-sol-card {
	display: flex;
	flex-direction: column;
	gap: .45rem;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 1.4rem 1.5rem 1.25rem;
	text-decoration: none;
	color: var(--ink);
	box-shadow: var(--shadow);
	transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.df-sol-card:hover {
	transform: translateY(-3px);
	border-color: var(--df-sol-line);
	box-shadow: var(--shadow-lg);
}

.df-sol-card-kicker {
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: color-mix(in oklab, var(--df-sol-color) 80%, var(--ink));
}

.df-sol-card-title {
	margin: 0;
	font-size: 1.08rem;
	line-height: 1.35;
}

.df-sol-card-desc {
	margin: 0;
	font-size: .89rem;
	color: var(--ink-3);
	line-height: 1.55;
}

.df-sol-card-foot {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin-top: auto;
	padding-top: .85rem;
	font-size: .82rem;
}

.df-sol-card-count {
	color: var(--ink-3);
}

.df-sol-card-cta {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-weight: 600;
	color: color-mix(in oklab, var(--df-sol-color) 80%, var(--ink));
}

.df-sol-card-arrow {
	display: inline-block;
	transition: transform .18s ease;
}

.df-sol-card:hover .df-sol-card-arrow,
.df-sol-sibling-card:hover .df-sol-card-arrow,
.df-sol-plat-card:hover .df-sol-card-arrow {
	transform: translateX(3px);
}

/* ============================================================
   10. RESPONSIVE
   ============================================================ */

@media (max-width: 960px) {
	.df-sol-hero-grid {
		grid-template-columns: 1fr;
		gap: 1.75rem;
	}

	.df-sol-hero-stats {
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	}

	.df-sol-cta-band {
		grid-template-columns: 1fr;
		padding: 1.9rem 1.7rem;
	}

	.df-sol-cta-actions {
		justify-content: flex-start;
	}
}

@media (max-width: 720px) {
	.df-sol-pick-card {
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas:
			"rank body"
			"thumb body";
		padding: 1.15rem 1.2rem;
		gap: .9rem 1.1rem;
	}

	.df-sol-pick-rank {
		grid-area: rank;
		font-size: 1.7rem;
		min-width: 1.6rem;
		text-align: left;
	}

	.df-sol-pick-thumb {
		display: none;
	}

	.df-sol-pick-body {
		grid-area: body;
	}

	.df-sol-pick-cta {
		margin-left: 0;
	}

	.df-sol-guide-inner {
		padding: 1.4rem 1.3rem;
	}

	.df-sol-quote-card {
		padding: 1.5rem 1.4rem;
	}

	.df-sol-quote-card blockquote {
		font-size: 1.08rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.df-sol-pick-card,
	.df-sol-card,
	.df-sol-sibling-card,
	.df-sol-plat-card,
	.df-sol-related-card,
	.df-sol-card-arrow,
	.df-sol-pick-thumb img {
		transition: none;
	}
}