/* =========================================================================
   APP DOWNLOAD GUIDE PAGE
   ========================================================================= */

.app-download-guide {
	background: var(--bg);
}

.adg-hero {
	padding: 4.5rem 0 5rem;
}

.adg-hero-bg {
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(241, 248, 244, 0.96)),
		radial-gradient(circle at 88% 18%, rgba(16, 185, 129, 0.14), transparent 32%),
		linear-gradient(180deg, var(--bg-2), var(--bg));
}

.adg-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 2rem;
	color: var(--text-2);
	font-size: var(--text-sm);
}

.adg-breadcrumb a {
	color: var(--green-dark);
	font-weight: 700;
}

.adg-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
	align-items: center;
}

.adg-hero-copy {
	max-width: 44rem;
}

.adg-hero-copy .section-heading {
	margin-bottom: 1rem;
	overflow-wrap: anywhere;
}

.adg-hero-copy .section-sub {
	max-width: 42rem;
}

.adg-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.adg-actions .btn {
	flex: 0 1 auto;
	max-width: 100%;
	white-space: normal;
	text-align: center;
}

.adg-hero-panel {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 28rem;
}

.adg-phone-stack {
	position: relative;
	width: min(100%, 25rem);
	min-height: 27rem;
}

.adg-phone-stack img {
	position: absolute;
	top: 0;
	width: 47%;
	height: auto;
	border-radius: 1.25rem;
	border: 1px solid rgba(7, 19, 15, 0.12);
	background: #fff;
	box-shadow: 0 24px 60px rgba(7, 19, 15, 0.16);
}

.adg-phone-stack img:first-child {
	left: 9%;
	z-index: 2;
}

.adg-phone-stack img:last-child {
	right: 4%;
	top: 2rem;
	z-index: 1;
	transform: rotate(3deg);
}

.adg-hero-note {
	position: absolute;
	right: 0;
	bottom: 1rem;
	display: grid;
	gap: 0.35rem;
	width: min(100%, 19rem);
	padding: 0.9rem 1rem;
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	background: rgba(255, 255, 255, 0.92);
	box-shadow: var(--shadow-card);
	color: var(--text-2);
	font-size: var(--text-sm);
}

.adg-hero-note span:first-child {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--green-dark);
	font-weight: 800;
}

.adg-hero-note svg {
	color: var(--green);
}

.adg-steps-section {
	padding: 3.5rem 0 3rem;
	background: var(--bg-2);
}

.adg-step-marquee {
	position: relative;
	overflow: hidden;
	padding: 0;
	mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}

.adg-step-grid {
	display: flex;
	width: max-content;
	gap: 0.9rem;
	animation: adg-grid-move 42s linear infinite;
	will-change: transform;
}

.adg-step-marquee:hover .adg-step-grid {
	animation-play-state: paused;
}

.adg-step-set {
	display: flex;
	gap: 0.9rem;
}

.adg-step-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.55rem;
	flex: 0 0 min(21rem, calc((min(100vw, var(--container)) - 3.8rem) / 3));
	width: min(21rem, calc((min(100vw, var(--container)) - 3.8rem) / 3));
	overflow: visible;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.adg-step-media {
	position: relative;
	display: grid;
	place-items: start center;
	overflow: visible;
	width: fit-content;
	max-width: 100%;
	height: auto;
	margin-inline: auto;
	border: 1px solid rgba(7, 19, 15, 0.08);
	border-radius: 8px;
	background: transparent;
	box-shadow: none;
}

.adg-step-media img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: min(33rem, 72vh);
	object-fit: contain;
	object-position: top center;
	padding: 0;
}

.adg-step-body {
	order: -1;
	display: grid;
	grid-template-columns: 2.75rem minmax(0, 1fr);
	gap: 0.75rem;
	align-items: center;
	min-height: 3.25rem;
	padding: 0;
}

.adg-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--green);
	color: var(--on-green);
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	font-weight: 700;
	line-height: 1;
}

.adg-step-body h3 {
	color: var(--text-strong);
	font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.25rem);
	line-height: 1.18;
	overflow-wrap: anywhere;
}

.adg-step-body p {
	color: var(--text-2);
	font-size: var(--text-sm);
	line-height: 1.6;
}

@keyframes adg-grid-move {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(calc(-50% - 0.45rem), 0, 0);
	}
}

.adg-checklist-section {
	padding: 5rem 0;
}

.adg-checklist-bg {
	background:
		linear-gradient(180deg, #eef7f1 0%, #fbfefc 100%),
		linear-gradient(135deg, rgba(4, 120, 87, 0.08), transparent);
}

.adg-checklist-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
	align-items: center;
}

.adg-checklist-copy {
	max-width: 36rem;
}

.adg-checklist-copy .section-heading {
	margin-bottom: 0.9rem;
}

.adg-checklist {
	display: grid;
	gap: 0.75rem;
}

.adg-checklist div {
	display: grid;
	grid-template-columns: 2.6rem minmax(0, 1fr);
	gap: 0.75rem;
	align-items: center;
	min-height: 4rem;
	padding: 0.85rem;
	border: 1px solid var(--border);
	border-radius: var(--r);
	background: rgba(255, 255, 255, 0.86);
	box-shadow: 0 8px 24px rgba(7, 19, 15, 0.05);
	color: var(--text);
	font-size: var(--text-sm);
	line-height: 1.45;
	overflow-wrap: anywhere;
}

.adg-checklist span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: var(--r);
	background: rgba(4, 120, 87, 0.08);
	color: var(--green-dark);
}

.adg-checklist a {
	color: var(--green-dark);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

@media (min-width: 760px) {
	.adg-step-card {
		max-width: none;
	}
}

@media (min-width: 1024px) {
	.adg-hero-grid {
		grid-template-columns: minmax(0, 1.05fr) minmax(22rem, 0.95fr);
		gap: 3rem;
	}

	.adg-step-card {
		grid-template-rows: auto 1fr;
	}

	.adg-step-media img {
		max-height: min(33rem, 72vh);
	}

	.adg-checklist-grid {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
		gap: 3rem;
	}
}

@media (max-width: 1023px) {
	.adg-hero-copy {
		max-width: 48rem;
	}

	.adg-hero-panel {
		order: -1;
	}

	.adg-step-card {
		flex-basis: min(21rem, calc((100vw - 3.4rem) / 2));
		width: min(21rem, calc((100vw - 3.4rem) / 2));
	}

	.adg-step-media {
		height: auto;
	}

	.adg-step-media img {
		max-height: min(31rem, 64vh);
	}

	.adg-checklist-copy {
		max-width: 44rem;
	}
}

@media (max-width: 759px) {
	.adg-steps-section,
	.adg-checklist-section {
		padding-block: 2.75rem;
	}

	.adg-step-card {
		flex-basis: min(21rem, calc(100vw - 1.5rem));
		width: min(21rem, calc(100vw - 1.5rem));
		max-width: none;
		margin-inline: 0;
	}

	.adg-step-media {
		height: auto;
	}

	.adg-step-media img {
		max-height: min(30rem, 68vh);
	}
}

@media (max-width: 640px) {
	.adg-hero {
		padding: 3.25rem 0 4rem;
	}

	.adg-actions .btn {
		width: 100%;
	}

	.app-download-guide .vg-actions .btn {
		width: 100%;
	}

	.adg-hero-panel {
		min-height: 22rem;
	}

	.adg-phone-stack {
		min-height: 21rem;
	}

	.adg-phone-stack img {
		width: 50%;
		border-radius: 1rem;
	}

	.adg-phone-stack img:first-child {
		left: 4%;
	}

	.adg-phone-stack img:last-child {
		right: 3%;
	}

	.adg-hero-note {
		left: 0;
		right: 0;
		bottom: 0;
		margin-inline: auto;
	}
}

@media (max-width: 480px) {
	.adg-breadcrumb {
		margin-bottom: 1.25rem;
		font-size: var(--text-xs);
	}

	.adg-hero {
		padding: 2.75rem 0 3.4rem;
	}

	.adg-hero-grid {
		gap: 1.4rem;
	}

	.adg-hero-panel {
		min-height: 19rem;
	}

	.adg-phone-stack {
		min-height: 18.5rem;
	}

	.adg-phone-stack img {
		width: 49%;
		border-radius: 0.85rem;
		box-shadow: 0 14px 34px rgba(7, 19, 15, 0.14);
	}

	.adg-hero-note {
		width: min(100%, 17rem);
		padding: 0.75rem 0.85rem;
		font-size: var(--text-xs);
	}

	.adg-step-body {
		grid-template-columns: 2.4rem minmax(0, 1fr);
		gap: 0.6rem;
	}

	.adg-step-num {
		width: 2.4rem;
		height: 2.4rem;
		font-size: var(--text-base);
	}

	.adg-step-media img {
		padding: 0;
	}

	.adg-checklist div {
		grid-template-columns: 2.3rem minmax(0, 1fr);
		padding: 0.75rem;
	}

	.adg-checklist span {
		width: 2.3rem;
		height: 2.3rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.adg-step-marquee {
		overflow-x: auto;
		mask-image: none;
		-webkit-mask-image: none;
		scrollbar-width: thin;
	}

	.adg-step-grid {
		animation: none;
	}
}