/*
 * JoNa Digital Solutions – Bereiche-Unterseite /bereiche/ (JDS-14)
 * ===========================================================================
 * Marken-/Bereichsübersicht: kompakter Hero, Dachmarken-Einordnung,
 * JoNa | Protect (id="protect"), JoNa | Software (id="software"),
 * Zusammenspiel, Entscheidungshilfe und finaler CTA.
 * Ausschließlich Design-Tokens (--jds-*); nur HTML + CSS, kein JavaScript.
 *
 * Rein per CSS werden KEINE List-Marker gesetzt; wo Divi .entry-content ul
 * beeinflusst, wird gezielt gescopet (nicht global).
 *
 * Layout:
 *   Desktop >= 1000px : Split-Bereiche 2-spaltig (Software gespiegelt),
 *                       Topics 2-spaltig, Prozess/Chooser mehrspaltig
 *   Tablet 690–999px  : Split gestapelt, Topics 2-spaltig
 *   Mobile   < 690px  : alles 1-spaltig, Buttons volle Breite
 *
 * Version: 1.2.0
 */

/* ===========================================================================
 * DIVI-NEUTRALISIERUNG (nur wenn die Seite vorhanden ist)
 * =========================================================================== */
.et_pb_section:has(.jds-areas-page) {
	padding: 0;
	background-color: var(--jds-bg);
}

.et_pb_section:has(.jds-areas-page) > .et_pb_row {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

.et_pb_section:has(.jds-areas-page) .et_pb_column {
	margin: 0;
	padding: 0;
}

.et_pb_section:has(.jds-areas-page) .et_pb_code_inner {
	width: 100%;
}

/* ===========================================================================
 * ROOT
 * =========================================================================== */
.jds-areas-page {
	/* Anker-Offset (Sticky-Header): Desktop; per Breakpoint angepasst. */
	--jds-areas-anchor-offset: calc(var(--jds-header-height-desktop) + var(--jds-space-lg));
	color: var(--jds-text);
}

.jds-areas-page *,
.jds-areas-page *::before,
.jds-areas-page *::after {
	box-sizing: border-box;
}

/* Anker-Ziele: H2 nicht unter dem Sticky-Header verstecken. */
.jds-areas-page .jds-areas-region {
	scroll-margin-top: var(--jds-areas-anchor-offset);
}

/* ===========================================================================
 * HERO
 * =========================================================================== */
.jds-areas-hero {
	background-color: var(--jds-bg-soft);
	padding-block: var(--jds-section-space);
}

.jds-areas-hero__inner {
	max-width: var(--jds-content-text);
}

.jds-areas-hero__eyebrow {
	margin: 0 0 var(--jds-space-md);
	color: var(--jds-green-dark);
}

.jds-areas-hero__title {
	margin: 0 0 var(--jds-space-md);
	font-size: var(--jds-font-size-h1);
	line-height: var(--jds-line-height-h1);
	letter-spacing: var(--jds-letter-spacing-h1);
	font-weight: var(--jds-font-weight-bold);
	color: var(--jds-heading);
	text-wrap: balance;
}

.jds-areas-hero__accent {
	color: var(--jds-green-dark);
}

.jds-areas-hero__lead {
	margin: 0 0 var(--jds-space-lg);
	color: var(--jds-text-muted);
	font-size: var(--jds-font-size-body-lg);
	line-height: var(--jds-line-height-body-lg);
}

.jds-areas-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jds-space-md);
}

.jds-areas-hero__cta,
.jds-areas-region__cta,
.jds-areas-choice__cta,
.jds-areas-chooser__neutral-cta,
.jds-areas-cta__button {
	min-height: var(--jds-btn-min-height);
}

.jds-areas-arrow {
	display: inline-block;
	transition: transform var(--jds-transition-fast);
}

.jds-areas-hero__cta:hover .jds-areas-arrow,
.jds-areas-hero__cta:focus-visible .jds-areas-arrow,
.jds-areas-region__cta:hover .jds-areas-arrow,
.jds-areas-region__cta:focus-visible .jds-areas-arrow,
.jds-areas-choice__cta:hover .jds-areas-arrow,
.jds-areas-choice__cta:focus-visible .jds-areas-arrow,
.jds-areas-chooser__neutral-cta:hover .jds-areas-arrow,
.jds-areas-chooser__neutral-cta:focus-visible .jds-areas-arrow,
.jds-areas-cta__button:hover .jds-areas-arrow,
.jds-areas-cta__button:focus-visible .jds-areas-arrow {
	transform: translateX(2px);
}

/* ===========================================================================
 * DACHMARKE – EINORDNUNG
 * =========================================================================== */
.jds-areas-overview {
	background-color: var(--jds-bg);
	padding-block: var(--jds-section-space);
}

.jds-areas-overview__intro {
	max-width: var(--jds-content-text);
}

.jds-areas-overview__eyebrow {
	margin: 0 0 var(--jds-space-md);
	color: var(--jds-green-dark);
}

.jds-areas-overview__title {
	margin: 0 0 var(--jds-space-md);
	font-size: var(--jds-font-size-h2);
	line-height: var(--jds-line-height-h2);
	letter-spacing: var(--jds-letter-spacing-h2);
	color: var(--jds-heading);
	text-wrap: balance;
}

.jds-areas-overview__text {
	margin: 0 0 var(--jds-space-sm);
	color: var(--jds-text-muted);
	font-size: var(--jds-font-size-body-lg);
	line-height: var(--jds-line-height-body-lg);
}

.jds-areas-overview__text:last-child {
	margin-bottom: 0;
}

/* Einfache Dachmarken-Struktur (HTML/CSS, dekorativ) */
.jds-areas-tree {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: var(--jds-space-2xl);
}

.jds-areas-tree__root {
	display: inline-flex;
	align-items: center;
	padding: var(--jds-space-sm) var(--jds-space-lg);
	border: var(--jds-border-width) solid var(--jds-border-strong);
	border-radius: var(--jds-radius-pill);
	background-color: var(--jds-bg);
	color: var(--jds-heading);
	font-weight: var(--jds-font-weight-semibold);
}

.jds-areas-tree__line {
	display: block;
	width: 2px;
	height: var(--jds-space-lg);
	background-color: var(--jds-border-strong);
}

.jds-areas-tree__branches {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--jds-space-xl);
	padding-top: var(--jds-space-lg);
}

.jds-areas-tree__branches::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background-color: var(--jds-border-strong);
}

.jds-areas-tree__branch {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: var(--jds-space-sm) var(--jds-space-lg);
	border-radius: var(--jds-radius-medium);
	background-color: var(--jds-bg-blue-soft);
	color: var(--jds-navy-dark);
	font-weight: var(--jds-font-weight-medium);
}

.jds-areas-tree__branch + .jds-areas-tree__branch {
	background-color: var(--jds-bg-green-soft);
}

.jds-areas-tree__branch::before {
	content: "";
	position: absolute;
	top: calc(-1 * var(--jds-space-lg));
	left: 50%;
	width: 2px;
	height: var(--jds-space-lg);
	background-color: var(--jds-border-strong);
}

/* ===========================================================================
 * BEREICHS-SECTIONS (Protect / Software)
 * =========================================================================== */
.jds-areas-region {
	padding-block: var(--jds-section-space);
}

.jds-areas-region--protect {
	background-color: var(--jds-bg-blue-soft);
}

.jds-areas-region--software {
	background-color: var(--jds-bg-green-soft);
}

.jds-areas-split {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: var(--jds-grid-gap);
	align-items: center;
}

.jds-areas-split__content {
	max-width: var(--jds-content-text);
}

.jds-areas-region__eyebrow {
	margin: 0 0 var(--jds-space-md);
	color: var(--jds-green-dark);
}

.jds-areas-region__title {
	margin: 0 0 var(--jds-space-md);
	font-size: var(--jds-font-size-h2);
	line-height: var(--jds-line-height-h2);
	letter-spacing: var(--jds-letter-spacing-h2);
	color: var(--jds-heading);
	text-wrap: balance;
}

.jds-areas-region__lead {
	margin: 0 0 var(--jds-space-md);
	color: var(--jds-text);
	font-size: var(--jds-font-size-body-lg);
	line-height: var(--jds-line-height-body-lg);
}

.jds-areas-region__positioning {
	margin: 0;
	color: var(--jds-text-muted);
	font-size: var(--jds-font-size-body);
	line-height: var(--jds-line-height-body);
}

.jds-areas-topics {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--jds-grid-gap);
	margin-top: var(--jds-space-2xl);
}

.jds-areas-topic {
	display: flex;
	flex-direction: column;
	background-color: var(--jds-white);
	border: var(--jds-border-width) solid var(--jds-border);
	border-radius: var(--jds-radius-large);
	padding: var(--jds-card-padding);
}

.jds-areas-topic__icon {
	width: var(--jds-card-icon-container);
	height: var(--jds-card-icon-container);
	margin-bottom: var(--jds-space-md);
}

.jds-areas-topic__icon svg {
	width: var(--jds-card-icon-size);
	height: var(--jds-card-icon-size);
}

.jds-areas-topic__title {
	margin: 0 0 var(--jds-space-xs);
	font-size: var(--jds-font-size-h3);
	line-height: var(--jds-line-height-h3);
	letter-spacing: var(--jds-letter-spacing-h3);
	color: var(--jds-heading);
}

.jds-areas-topic__text {
	margin: 0;
	color: var(--jds-text-muted);
	font-size: var(--jds-font-size-body);
	line-height: var(--jds-line-height-body);
}

/* „Passend für dich, wenn …" */
.jds-areas-fit {
	margin-top: var(--jds-space-2xl);
	background-color: var(--jds-bg);
	border: var(--jds-border-width) solid var(--jds-border);
	border-radius: var(--jds-radius-large);
	padding: var(--jds-card-padding);
}

.jds-areas-fit__title {
	margin: 0 0 var(--jds-space-md);
	font-size: var(--jds-font-size-h3);
	line-height: var(--jds-line-height-h3);
	letter-spacing: var(--jds-letter-spacing-h3);
	color: var(--jds-heading);
}

/* Divi setzt `.entry-content ul { list-style-type: disc; padding: 0 0 23px 1em }`
 * (0,1,1). Diese gescopeten Regeln (0,2,0) neutralisieren das nur für die
 * Listen dieser Seite – kein globales ul/li-Reset. */
.jds-areas-page .jds-areas-fit__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--jds-space-sm) var(--jds-grid-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.jds-areas-page .jds-areas-fit__list > li,
.jds-areas-page .jds-areas-process > li {
	list-style: none;
}

.jds-areas-page .jds-areas-fit__list > li::marker,
.jds-areas-page .jds-areas-process > li::marker {
	content: "";
}

.jds-areas-fit__item {
	position: relative;
	padding-left: 28px;
	color: var(--jds-text);
	font-size: var(--jds-font-size-body);
	line-height: var(--jds-line-height-body);
}

.jds-areas-fit__item::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.5em;
	width: 11px;
	height: 6px;
	border-left: 2px solid var(--jds-green);
	border-bottom: 2px solid var(--jds-green);
	transform: rotate(-45deg);
}

.jds-areas-region__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jds-space-md);
	margin-top: var(--jds-space-2xl);
}

/* ===========================================================================
 * BEREICHSVISUALS (dekorativ)
 * =========================================================================== */
.jds-areas-visual {
	display: flex;
	justify-content: center;
}

.jds-areas-visual__window,
.jds-areas-visual__panel {
	width: 100%;
	max-width: 420px;
	display: flex;
	flex-direction: column;
	gap: var(--jds-space-sm);
	padding: var(--jds-space-lg);
	border: var(--jds-border-width) solid var(--jds-border);
	border-radius: var(--jds-radius-large);
	background-color: var(--jds-white);
	box-shadow: var(--jds-shadow-subtle);
}

.jds-areas-visual__bar {
	display: flex;
	gap: 5px;
	margin-bottom: var(--jds-space-xs);
}

.jds-areas-visual__dot {
	width: 8px;
	height: 8px;
	border-radius: var(--jds-radius-pill);
	background-color: var(--jds-border);
}

.jds-areas-visual__dot:first-child {
	background-color: var(--jds-green);
}

.jds-areas-visual__row {
	display: flex;
	align-items: center;
	gap: var(--jds-space-sm);
	color: var(--jds-text-muted);
	font-size: var(--jds-font-size-body-sm);
	line-height: var(--jds-line-height-ui);
}

.jds-areas-visual__status {
	width: 10px;
	height: 10px;
	flex: 0 0 auto;
	border-radius: var(--jds-radius-pill);
	background-color: var(--jds-navy);
}

.jds-areas-visual__row:nth-child(4) .jds-areas-visual__status,
.jds-areas-visual__row:nth-child(5) .jds-areas-visual__status {
	background-color: var(--jds-green);
}

.jds-areas-visual__line {
	width: 100%;
	height: 36px;
	margin-top: var(--jds-space-xs);
}

.jds-areas-visual__line polyline {
	fill: none;
	stroke: var(--jds-green);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.jds-areas-visual__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jds-space-xs);
}

.jds-areas-visual__chip {
	display: inline-flex;
	align-items: center;
	padding: 3px var(--jds-space-sm);
	border: var(--jds-border-width) solid var(--jds-border);
	border-radius: var(--jds-radius-pill);
	background-color: var(--jds-bg-soft);
	color: var(--jds-navy);
	font-size: var(--jds-font-size-xs);
	line-height: var(--jds-line-height-ui);
}

.jds-areas-visual__codeline {
	display: flex;
	gap: var(--jds-space-xs);
}

.jds-areas-visual__codebar {
	display: block;
	height: 10px;
	flex: 1 1 auto;
	border-radius: var(--jds-radius-small);
	background-color: var(--jds-bg-blue-soft);
}

.jds-areas-visual__codebar--short {
	flex: 0 0 35%;
	background-color: var(--jds-bg-green-soft);
}

.jds-areas-visual__nodes {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-inline: var(--jds-space-md);
}

.jds-areas-visual__node {
	width: 14px;
	height: 14px;
	border-radius: var(--jds-radius-pill);
	border: 2px solid var(--jds-navy);
	background-color: var(--jds-white);
}

.jds-areas-visual__node:last-child {
	border-color: var(--jds-green);
	background-color: var(--jds-bg-green-soft);
}

/* ===========================================================================
 * ZUSAMMENSPIEL
 * =========================================================================== */
.jds-areas-combined {
	background-color: var(--jds-bg-soft);
	padding-block: var(--jds-section-space);
}

.jds-areas-combined__intro {
	max-width: var(--jds-content-text);
	margin: 0 0 var(--jds-space-2xl);
}

.jds-areas-combined__eyebrow {
	margin: 0 0 var(--jds-space-md);
	color: var(--jds-green-dark);
}

.jds-areas-combined__title {
	margin: 0 0 var(--jds-space-md);
	font-size: var(--jds-font-size-h2);
	line-height: var(--jds-line-height-h2);
	letter-spacing: var(--jds-letter-spacing-h2);
	color: var(--jds-heading);
	text-wrap: balance;
}

.jds-areas-combined__text {
	margin: 0;
	color: var(--jds-text-muted);
	font-size: var(--jds-font-size-body-lg);
	line-height: var(--jds-line-height-body-lg);
}

.jds-areas-page .jds-areas-process {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--jds-grid-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.jds-areas-process__step {
	display: flex;
	flex-direction: column;
	gap: var(--jds-space-sm);
}

.jds-areas-process__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--jds-card-process-index-size);
	height: var(--jds-card-process-index-size);
	border-radius: var(--jds-radius-pill);
	background-color: var(--jds-navy);
	color: var(--jds-white);
	font-weight: var(--jds-font-weight-semibold);
}

.jds-areas-process__body {
	display: flex;
	flex-direction: column;
	gap: var(--jds-space-xs);
}

.jds-areas-process__title {
	color: var(--jds-heading);
	font-size: var(--jds-font-size-h3);
	line-height: var(--jds-line-height-h3);
	letter-spacing: var(--jds-letter-spacing-h3);
	font-weight: var(--jds-font-weight-semibold);
}

.jds-areas-process__text {
	color: var(--jds-text-muted);
	font-size: var(--jds-font-size-body);
	line-height: var(--jds-line-height-body);
}

/* ===========================================================================
 * ENTSCHEIDUNGSHILFE
 * =========================================================================== */
.jds-areas-chooser {
	background-color: var(--jds-bg);
	padding-block: var(--jds-section-space);
}

.jds-areas-chooser__intro {
	max-width: var(--jds-content-text);
	margin: 0 0 var(--jds-space-2xl);
}

.jds-areas-chooser__eyebrow {
	margin: 0 0 var(--jds-space-md);
	color: var(--jds-green-dark);
}

.jds-areas-chooser__title {
	margin: 0;
	font-size: var(--jds-font-size-h2);
	line-height: var(--jds-line-height-h2);
	letter-spacing: var(--jds-letter-spacing-h2);
	color: var(--jds-heading);
	text-wrap: balance;
}

.jds-areas-chooser__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--jds-grid-gap);
}

.jds-areas-choice {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	background-color: var(--jds-bg-soft);
	border: var(--jds-border-width) solid var(--jds-border);
	border-radius: var(--jds-radius-large);
	padding: var(--jds-card-padding-lg);
}

.jds-areas-choice__title {
	margin: 0 0 var(--jds-space-sm);
	font-size: var(--jds-font-size-h3);
	line-height: var(--jds-line-height-h3);
	letter-spacing: var(--jds-letter-spacing-h3);
	color: var(--jds-heading);
}

.jds-areas-choice__text {
	margin: 0 0 var(--jds-space-lg);
	color: var(--jds-text-muted);
	font-size: var(--jds-font-size-body);
	line-height: var(--jds-line-height-body);
}

.jds-areas-choice__cta {
	margin-top: auto;
}

.jds-areas-chooser__neutral {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--jds-space-md);
	margin-top: var(--jds-space-xl);
	padding-top: var(--jds-space-lg);
	border-top: var(--jds-border-width) solid var(--jds-border);
}

.jds-areas-chooser__neutral-text {
	margin: 0;
	color: var(--jds-text-muted);
	font-size: var(--jds-font-size-body);
	line-height: var(--jds-line-height-body);
}

/* ===========================================================================
 * FINALER CTA (dunkel)
 * =========================================================================== */
.jds-areas-cta {
	background-color: var(--jds-navy-band);
	background-image: linear-gradient(
		180deg,
		var(--jds-navy-deep) 0%,
		var(--jds-navy-band) 100%
	);
	color: var(--jds-text-inverse);
	padding-block: var(--jds-section-space-sm);
	border-bottom: var(--jds-border-width) solid var(--jds-border-on-dark);
}

.jds-areas-cta__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: var(--jds-grid-gap);
	align-items: center;
}

.jds-areas-cta__eyebrow {
	margin: 0 0 var(--jds-space-md);
	color: var(--jds-green);
}

.jds-areas-cta__title {
	margin: 0 0 var(--jds-space-md);
	font-size: var(--jds-font-size-h2);
	line-height: var(--jds-line-height-h2);
	letter-spacing: var(--jds-letter-spacing-h2);
	color: var(--jds-text-inverse);
	text-wrap: balance;
	max-width: 24ch;
}

.jds-areas-cta__text {
	margin: 0;
	color: var(--jds-text-inverse-muted);
	font-size: var(--jds-font-size-body);
	line-height: var(--jds-line-height-body);
	max-width: var(--jds-measure-tight);
}

.jds-areas-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jds-space-md);
}

/* ===========================================================================
 * TABLET (690–999px)
 * =========================================================================== */
@media (min-width: 690px) and (max-width: 999px) {
	.jds-areas-page {
		--jds-areas-anchor-offset: calc(var(--jds-header-height-mobile) + var(--jds-space-lg));
	}

	.jds-areas-split {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--jds-space-xl);
	}

	.jds-areas-split__content {
		max-width: none;
	}

	.jds-areas-topics {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.jds-areas-region__actions {
		margin-top: var(--jds-space-xl);
	}

	.jds-areas-process {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.jds-areas-cta__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--jds-space-xl);
	}
}

/* ===========================================================================
 * MOBILE (< 690px)
 * =========================================================================== */
@media (max-width: 689px) {
	.jds-areas-page {
		--jds-areas-anchor-offset: calc(var(--jds-header-height-mobile-compact) + var(--jds-space-lg));
	}

	.jds-areas-hero {
		padding-block: var(--jds-space-2xl);
	}

	.jds-areas-hero__actions,
	.jds-areas-hero__cta {
		width: 100%;
	}

	.jds-areas-overview,
	.jds-areas-region,
	.jds-areas-combined,
	.jds-areas-chooser {
		padding-block: var(--jds-space-2xl);
	}

	.jds-areas-overview__intro,
	.jds-areas-combined__intro,
	.jds-areas-chooser__intro {
		margin-bottom: var(--jds-space-xl);
	}

	.jds-areas-tree__branches {
		gap: var(--jds-space-lg);
	}

	.jds-areas-split {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--jds-space-xl);
	}

	.jds-areas-split__content {
		max-width: none;
	}

	.jds-areas-topics {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--jds-space-lg);
		margin-top: var(--jds-space-xl);
	}

	.jds-areas-fit {
		margin-top: var(--jds-space-xl);
	}

	.jds-areas-fit__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.jds-areas-region__actions,
	.jds-areas-region__cta {
		width: 100%;
	}

	.jds-areas-region__cta {
		justify-content: center;
		min-height: 48px;
	}

	/* Split-Layouts immer logisch stapeln (Text zuerst, Visual danach). */
	.jds-areas-split--reverse .jds-areas-split__media {
		order: 0;
	}

	.jds-areas-process {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--jds-space-lg);
	}

	.jds-areas-chooser__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--jds-space-lg);
	}

	.jds-areas-choice__cta,
	.jds-areas-chooser__neutral-cta {
		width: 100%;
		justify-content: center;
		min-height: 48px;
	}

	.jds-areas-chooser__neutral {
		flex-direction: column;
		align-items: stretch;
	}

	.jds-areas-cta {
		padding-block: var(--jds-space-2xl);
	}

	.jds-areas-cta__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--jds-space-xl);
	}

	.jds-areas-cta__title {
		max-width: none;
	}

	.jds-areas-cta__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.jds-areas-cta__button {
		width: 100%;
		justify-content: center;
		min-height: 48px;
	}
}

/* ===========================================================================
 * REDUCED MOTION
 * =========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.jds-areas-arrow {
		transition: none;
	}
}