/* ==========================================================
  App download page (page-app.php) — loaded only on that page,
  after pages-base.css (tokens, .page-chip/.page-eyebrow/.page-icon).
  01. Base  02. Hero  03. Platform cards  04. Features
  05. Reviews carousel  06. Responsive  07. Reduced motion
============================================================ */

/* ! 01. Base
------------------------------------------------------------ */
.app-page {
	--app-android: #1F1A8F;
	--app-android-line: #DCDAFF;
	--app-ios: #A63815;
	--app-ios-bg: #FFEDE5;
	--app-ios-line: #FFD3C2;
	--app-card-radius: 24px;
	background: linear-gradient(180deg, #FFFBF9 0%, #FFF7F3 100%);
}
.app-page ul,
.app-page ol {
	margin: 0;
	padding: 0;
	list-style: none;
}
.app-page :focus-visible {
	outline: 2px solid var(--brand-color);
	outline-offset: 2px;
}
.app-section-title {
	margin-top: 8px !important;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.6;
}
.app-section-lead {
	margin-top: 12px;
	font-size: 16px;
	line-height: 1.9;
	color: var(--about-text);
}

/* ! 02. Hero
------------------------------------------------------------ */
.app-hero {
	position: relative;
	padding: 176px 0 64px;
}
.app-hero .page-container {
	position: relative;
	z-index: 1;
}
.app-hero__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-bottom: 48px;
}
.app-hero__header .page-chip {
	padding: 4px 16px;
	background: #FFF1EB;
	border: 1px solid #FFE0D5;
	font-size: 13px;
}
.app-hero__title {
	margin-top: 24px !important;
	font-size: 36px;
	font-weight: 700;
	line-height: 1.6;
}
.app-hero__lead {
	margin-top: 12px;
	font-size: 20px;
	line-height: 2;
	color: var(--about-text);
}

/* ! 03. Platform cards
------------------------------------------------------------ */
.app-platforms {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	align-items: start;
}
.app-platform {
	padding: 24px;
	background: #fff;
	border-radius: var(--app-card-radius);
	box-shadow: var(--about-shadow);
}
.app-platform__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 72px;
	padding: 12px 16px;
	border-radius: 16px;
	font-size: 32px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	font-family: inherit;
}
.app-platform--android .app-platform__head {
	background: var(--about-blue-bg);
	color: var(--app-android) !important;
}
.app-platform--ios .app-platform__head {
	background: var(--app-ios-bg);
	color: var(--app-ios) !important;
}
.app-platform__logo {
	flex: 0 0 auto;
}
.app-platform__badge {
	padding: 2px 12px;
	border-radius: 999px;
	background: #fff;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.8;
}
.app-platform__badge[hidden] {
	display: none;
}

.app-steps {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	padding: 24px 0 !important;
	border-bottom: 1px solid #F0EEEE;
}
.app-steps__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--about-title);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.6;
}
.app-steps__sep {
	flex: 0 0 auto;
	margin-inline-end: 4px;
	color: #B9B9C6;
}
.app-steps__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	font-size: 14px;
	font-weight: 700;
}
.app-platform--android .app-steps__num {
	background: var(--about-blue-bg);
	border: 1px solid var(--app-android-line);
	color: var(--about-blue);
}
.app-platform--ios .app-steps__num {
	background: var(--app-ios-bg);
	border: 1px solid var(--app-ios-line);
	color: var(--app-ios);
}

.app-stores {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	padding-top: 24px !important;
}
.app-store {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 84px;
	padding: 16px 20px;
	border: 1px solid var(--app-android-line);
	border-radius: 16px;
	background: #fff;
	color: var(--about-title);
	text-decoration: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.app-store:hover,
.app-store:focus-visible {
	color: var(--about-title);
	border-color: var(--about-blue);
	box-shadow: 0 8px 20px rgba(56, 51, 255, 0.08);
	transform: translateY(-2px);
}
.app-platform--ios .app-store {
	border-color: var(--app-ios-line);
}
.app-platform--ios .app-store:hover,
.app-platform--ios .app-store:focus-visible {
	border-color: var(--brand-color);
	box-shadow: 0 8px 20px rgba(252, 100, 50, 0.1);
}
.app-store__logo {
	flex: 0 0 auto;
	width: 40px;
	height: auto;
	object-fit: contain;
}
.app-store__logo--wide {
	width: 60px;
}
.app-store__logo--icon {
	display: inline-flex;
	color: var(--brand-color);
}
.app-store__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1 1 auto;
}
.app-store__label {
	color: var(--about-muted);
	font-size: 12px;
	line-height: 1.6;
}
.app-store__name {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
}
.app-store__chevron {
	flex: 0 0 auto;
	color: var(--about-blue);
}
.app-platform--ios .app-store__chevron {
	color: var(--brand-color);
}

/* ! 04. Features
------------------------------------------------------------ */
.app-features {
	position: relative;
	padding: 40px 0 72px;
}
.app-features__panel {
	padding: 64px 48px 72px;
	border-radius: 32px;
	background: #FFE9E2;
}
.app-features__header {
	max-width: 760px;
	margin: 0 auto 48px;
}
.app-features__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	max-width: 1200px;
	margin: 0 auto !important;
}
.app-feature {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 32px;
	background: #fff;
	border-radius: var(--app-card-radius);
	box-shadow: var(--about-shadow);
}
.app-feature__title {
	margin-top: 20px !important;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.7;
}
.app-feature__desc {
	margin-top: 8px;
	font-size: 15px;
	line-height: 1.9;
	color: var(--about-text);
}
.app-icon--peach  { background: var(--about-peach); color: var(--brand-color); }
.app-icon--blue   { background: var(--about-blue-bg); color: var(--about-blue); }
.app-icon--yellow { background: #FFF6DB; color: #E5A400; }
.app-icon--purple { background: #F6E8FF; color: #B526E8; }
.app-icon--green  { background: #E3F8EC; color: #1FA45B; }
.app-icon--pink   { background: #FFE6F6; color: #E0249A; }

/* ! 05. Reviews carousel
------------------------------------------------------------ */
.app-reviews {
	position: relative;
	padding: 48px 0 120px;
	overflow: hidden;
}
.app-reviews .page-container {
	position: relative;
	z-index: 1;
}
.app-reviews__header {
	max-width: 760px;
	margin: 0 auto 40px;
}
.app-reviews__ring,
.app-reviews__dot {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
}
.app-reviews__ring {
	width: 140px;
	height: 140px;
	top: 300px;
	left: calc(50% - 660px);
	border: 26px solid #FF9C7B;
}
.app-reviews__dot {
	width: 32px;
	height: 32px;
	top: 400px;
	right: calc(50% - 560px);
	background: #FF9C7B;
	box-shadow: 72px -60px 0 -10px #fff, 72px -60px 0 -8px #FF9C7B;
}
.app-reviews__viewport {
	position: relative;
	z-index: 1;
}
.app-reviews__track {
	--app-slide: min(420px, calc(100vw - 48px));
	display: flex;
	gap: 24px;
	padding: 16px max(24px, calc(50% - var(--app-slide) / 2)) 24px !important;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}
.app-reviews__track::-webkit-scrollbar {
	display: none;
}
.app-reviews__track:focus-visible {
	outline-offset: -2px;
}
.app-review {
	flex: 0 0 var(--app-slide);
	scroll-snap-align: center;
	display: flex;
}
.app-review__card {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 24px;
	background: #fff;
	border-radius: var(--app-card-radius);
	box-shadow: 0 12px 32px rgba(166, 56, 21, 0.08);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.app-review__card > * {
	transition: opacity 0.3s ease, filter 0.3s ease;
}
.app-review__head {
	display: flex;
	align-items: center;
	gap: 12px;
}
.app-review__avatar {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
}
.app-review__who {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
}
.app-review__name {
	color: var(--about-title);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
}
.app-review__date {
	color: var(--about-muted);
	font-size: 13px;
	line-height: 1.6;
}
.app-review__quote {
	flex: 0 0 auto;
	color: var(--brand-color);
}
.app-review__text {
	margin-top: 16px;
	color: var(--about-text);
	font-size: 15px;
	line-height: 2;
}

/* Enhanced (JS) state: centre card active, neighbours faded. */
/* Card stays opaque (decorations behind must not show through); only its content fades. */
.app-reviews.is-enhanced .app-review:not(.is-active) .app-review__card {
	transform: scale(0.92);
	box-shadow: 0 6px 18px rgba(166, 56, 21, 0.05);
}
.app-reviews.is-enhanced .app-review:not(.is-active) .app-review__card > * {
	opacity: 0.45;
	filter: blur(1px);
}
.app-reviews.is-enhanced .app-review:not(.is-active) .app-review__quote {
	color: #C9C9C9;
}

.app-reviews__nav {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 8px;
}
.app-reviews__nav[hidden] {
	display: none;
}
.app-reviews__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--brand-color);
	transition: background-color 0.2s ease, color 0.2s ease;
}
.app-reviews__btn:hover:not(:disabled) {
	background: #FFF1EB;
}
.app-reviews__btn:disabled {
	color: #BDBDBD;
	cursor: default;
}
.app-reviews__dots {
	display: flex;
	align-items: center;
	gap: 4px;
}
.app-reviews__dot-btn {
	position: relative;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: transparent;
	transition: width 0.3s ease;
}
.app-reviews__dot-btn::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: #C4C4C4;
	transform: translate(-50%, -50%);
	transition: width 0.3s ease, background-color 0.3s ease;
}
.app-reviews__dot-btn[aria-current="true"] {
	width: 56px;
}
.app-reviews__dot-btn[aria-current="true"]::before {
	width: 48px;
	background: var(--brand-color);
}

/* ! 06. Responsive
------------------------------------------------------------ */
@media (max-width: 1399.98px) {
	.app-platform__head {
		font-size: 28px !important;
	}
}
@media (max-width: 1199.98px) {
	.app-hero {
		padding-top: 152px;
	}
	.app-platforms {
		grid-template-columns: 1fr;
	}
	.app-reviews__ring {
		left: -40px;
	}
	.app-reviews__dot {
		right: 24px;
	}
}
@media (max-width: 991.98px) {
	.app-hero__title {
		font-size: 30px;
	}
	.app-hero__lead {
		font-size: 16px;
	}
	.app-features__panel {
		padding: 48px 24px;
	}
	.app-features__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.app-section-title {
		font-size: 24px;
	}
}
@media (max-width: 767.98px) {
	.app-hero {
		padding: 128px 0 40px;
	}
	.app-hero__header {
		margin-bottom: 32px;
	}
	.app-hero__title {
		margin-top: 16px !important;
		font-size: 24px;
	}
	.app-hero__lead {
		font-size: 15px;
	}
	.app-platforms {
		gap: 16px;
	}
	.app-platform {
		padding: 16px;
		border-radius: 20px;
	}
	.app-platform__head {
		min-height: 60px;
		font-size: 24px !important;
	}
	.app-steps {
		flex-direction: column;
		align-items: flex-start;
		padding: 20px 4px !important;
	}
	.app-steps__sep {
		display: none;
	}
	.app-stores {
		grid-template-columns: 1fr;
		gap: 12px;
		padding-top: 20px !important;
	}
	.app-store {
		min-height: 72px;
		padding: 12px 16px;
	}
	.app-features {
		padding: 24px 0 48px;
	}
	.app-features__panel {
		padding: 40px 16px;
		border-radius: 24px;
	}
	.app-features__header {
		margin-bottom: 32px;
	}
	.app-features__grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.app-feature {
		padding: 24px 20px;
	}
	.app-feature__title {
		margin-top: 16px !important;
		font-size: 17px;
	}
	.app-section-title {
		font-size: 22px;
	}
	.app-section-lead {
		font-size: 15px;
	}
	.app-reviews {
		padding: 32px 0 72px;
	}
	.app-reviews__track {
		--app-slide: calc(100vw - 64px);
		gap: 12px;
		padding-inline: 32px !important;
	}
	.app-reviews__ring {
		width: 96px;
		height: 96px;
		top: auto;
		bottom: 24px;
		border-width: 18px;
	}
	.app-reviews__dot {
		display: none;
	}
}

/* ! 07. Reduced motion
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.app-reviews__track {
		scroll-behavior: auto;
	}
	.app-store,
	.app-review__card,
	.app-review__card > *,
	.app-reviews__btn,
	.app-reviews__dot-btn,
	.app-reviews__dot-btn::before {
		transition: none;
	}
	.app-store:hover,
	.app-store:focus-visible {
		transform: none;
	}
}